Font Cleaner를 사용해 BMP로 변환 후 도트 작업을 거쳐 고객사에 전달하여 품질 컨펌을 받고 최종 결과물의 기준으로 확정해 최종 산출물의 방향을 수립했습니다.피그마에서 자원을 Export 후 Font Cleaner로 1차 변경을 하고 Find & Replace Tool에 등록한 Glyphs 자원을 사용해 최종 결과물까지 생성하는 비디오 클립입니다.
1차 개발에서는 도트 작업 이전에 Batch를 사용해 전처리 작업 후 작업을 했습니다. 다국어 지원에서는 프로그래밍을 통해 더욱 향상된 전처리를 했습니다.
전처리기 Font Clenaer를 사용해 세리프 글꼴을 직교 형태로 다듬고, 디더링 없이 앨리어싱을 합니다. OCR을 사용해 직교 형태로 다듬는 것을 돕습니다.
Font Cleaner를 사용해 BMP로 변환 후 도트 작업을 거쳐 고객사에 전달하여 품질 컨펌을 받고 최종 결과물의 기준으로 확정해 최종 산출물의 방향을 수립했습니다.
Font Cleaner를 사용해 품질을 향상 시킬 수 있었으나 상용 제품으로 사용하기에는 조금은 부족했습니다. 영어와 중국어 도트작업은 한글과는 다른 어려움 있었습니다.도트 작업은 그라데이션 없이 하나의 픽셀로 형태를 정의합니다. 작은 글자의 경우 픽셀 하나에 많은 영향을 받게 됩니다.
라틴문자의 경우 대부분 하나의 형태(Shape)으로 되어 있으며 대소문자가 있어 글자 크기가 네모꼴에 비해 작습니다. 이는 형태감을 도드라지게 하며 같은 굵기와 크기를 작업자 간에 유지하는 것은 매우 어렵습니다.
한자는 네모꼴로 되어 있어 직교형태로 단순화하는 점에서는 라틴어보다는 작업에 유리하나 한정된 네모꼴 안에 많이 획이 사용되는 경우가 있습니다. 공간 안에 최대한 같은 굵기와 가독성을 유지하기 위해 실물 크기로 화면을 열람하며 작업합니다.
작업의 안정성과 편의성을 위해 Glyphs를 찾고 바꾸는 도구를 개발했습니다. 원본에서 찾을 글자들을 등록하고 도트 작업을 통해 변경할 글자를 등록해 변경하는 도구입니다.
5가지 유형의 글자를 Find & Replace로 등록하면 좋겠지만, Find & Replace 로 등록한 자원은 3,207개이며, Find자원이 3배 이상 많습니다. Find 자원이 많은 이유는 힌팅으로 인해 글자가 픽셀 그리드에 맞춰 변형합니다. 또한 커닝으로 픽셀 정렬이 맞추어져 있지 않은 경우도 있습니다. 따라서 Export 한 글자는 같은 크기라로 픽셀 단위에서는 제각기 달라 10개 이상의 Find가 만들어집니다.
Find & Replace에 사용할 Asstes은 영역 별로 Assets폴더에 등록합니다. Find & Replace 실행 시 Assets 폴더를 순차적으로 완료하며 자원을 업데이트해 완성본을 만듭니다.
위 두개의 작업 도구 외에 도트 작업에 필요한 도구들 전체 자원을 하나의 이미지로 병합하기, 완료한 작업 마킹하기와 같이 다양한 도구를 개발해 사용했습니다. 애플리케이션은 CUDA를 활용한 GPU 가속을 적용했습니다. CPU 기반 멀티 프로세싱에 비해 GPU 병렬 처리로 비교할 수 없이 빠른 속도를 체감할 수 있었습니다.
개발 과정에서 OCR을 활용하여 폰트를 찾는 방법도 시도했지만, 찾은 후 변경 시 사용할 글꼴 크기를 정확하게 보장하기 어려워 효율성이 떨어진다고 판단하여 적용하지 않았습니다. Find&Replace는 정확하고 빠른 글자 찾기를 만드는 것이 중요했습니다. Canny를 사용한 윤곽 추출 방법 OCR을 이용한 방법 등을 검토했으나, 라틴 문자의 경우 어센더(ascender), 디센더(descender), x-height 등의 개념이 있습니다. 네모 꼴과는 달린 글자를 판독하는 외부 공간의 크기가 일정하지 않습니다. 이를 고려해 OCR 블록의 줄맞춤까지는 했으나, 1~2픽셀로 글자 크기가 정해지는 상황을 고려했을 때 원하는 Replace 대상을 찾는 것에는 어려움이 있었습니다. Replace가 아닌 Retouch 또는 Create으로 접근하기 위해 AI를 개발해 학습 시켰으나 완료하지는 못했습니다.
원하는 자원의 크기로 변경하는 것은 어려움이 이
고려한 글줄 맞추기와
1~2픽셀로 높낮이로 바뀌는 글자 크기와 상태는 Replace 대상으로 정하는 것은 Replace가 아닌 Retouch 또는 Create으로의 접근이 더 적절한 방법이라 생각합니다. 이를 종합적으로 고려해 Find&Replace 자원으로 AI를 개발해 FontCleaner단계에서 적용하려했으나 완료하지 못했습니다.
매우 높은 정밀도를 필요로합니다. 또한
이는
OCR만을 사용해 변경하는 것은 적절하지 못합니다. 뿐만 아니라 글자를
정확하게 대입해서 변경하는 것은
굵기와 크기 반각을 사용하는 라틴 문자의 경우 어센더(ascender), 디센더(descender), x-height 등의 개념을 가지며 문자들이 직사각형 영역에 흩어져 있고, 네모꼴에 맞추지 않습니다. 이는 문자를 찾고 ㅇㅇ
이는 작업작들간에 일관성을 갖기 어렵다는 점과 글자꼴이 갖고 있는 특성과
다국어에서의 도트 작업은 더
두 번째 단계는 낱글자를 Find & Replace하는 도구를 개발하는 것이었습니다. Ant-Aliasing 처리된 낱글자를 등록하고, 픽셀이 정돈된 Replace 이미지를 생성했습니다. 글자 크기는 약 5가지 종류가 있었지만, 힌팅 처리로 인해 글자가 픽셀 그리드에 맞춰 변형되므로 단순히 5가지 크기의 Find & Replace만으로는 모든 경우에 대응할 수 없었습니다.
사진 넣기 > 다른 Find 자원이미지들.. Find & Replace 로 등록된 자원은 3,207개이다.
이미지 AI 모델을 활용하여 AI가 이미지를 판독하고 변경하는 방법도 고려했으나, 학습 데이터 부족과 변경할 글꼴 크기의 정확성 문제로 인해 채택하지 않았습니다.
Anti-Aliasing이 적용된 PNG를 BMP로 변환할 때 디더링 등으로 인해 예상과 다른 이미지로 변경되는 문제가 발생했습니다. 이를 해결하기 위해 OCR 기술과 직교 형태 보정 방식을 적용하여 변환 품질을 향상시킨 BMP 이미지를 생성할 수 있었습니다.
최종적으로 개발한 시스템에서는 이미지에서 찾을(Find) Glyphs를 등록하고, 이를 변경(Replace)할 Glyphs를 디자인하는 방식을 채택했습니다. 또한, 작업한 Glyphs를 쉽게 찾고 전체 자원을 효율적으로 열람할 수 있도록 마스크 기능과 GUI Assets 병합 기능을 구현했습니다.
책 박태웅의 AI 강의 2025에 "AI는 확대기입니다."라는 말에 깊이 공감했습니다. 디자인 전공자로서 개발에 대한 깊은 지식은 부족하지만, 오랜 기간 개발자를 위한 정책 및 인터랙션을 정의하는 업무를 수행하며 기본적인 개발 지식을 쌓을 수 있었습니다.
AI에게 개발자에게 UX 가이드라인을 전달하듯 요청하면, AI는 코드로 응답해 줍니다. AI가 제공하는 코드는 놀랍지만, 항상 완벽하게 작동하는 것은 아닙니다. 프로그래밍에 어려움이 있을 때는 외부 인력이나 계약직 리소스를 활용하여 문제를 해결했습니다.
이번 프로젝트는 마치 사이드 프로젝트처럼 진행되었습니다. Git Push 로그와 Find & Replace 애플리케이션으로 생성된 이미지 로그를 보면, 주중과 주말, 심지어 밤늦게까지 작업을 지속했음을 알 수 있습니다.
AI를 활용한 개발은 기술적 역량의 상향 평준화를 가져오며, 기존보다 효율적인 작업 환경을 제공합니다. 이 프로젝트에서 저의 역할은 UX 및 GUI 담당이었으며, 고객사에 전달할 최종 결과물은 UX 문서와 GUI Assets이었습니다.
주중, 주말을 가리지 않고 때로는 새벽 2시, 4시까지 작업을 이어가며 문서 개발과 코딩을 병행했습니다. 특히 퍼블리싱을 위한 작업에 많은 시간과 노력을 쏟았으며, 이는 결과물의 품질 향상에 크게 기여했다고 생각합니다.
이번 다국어 지원 프로젝트를 통해 AI를 활용한 개발의 가능성과 한계를 동시에 경험했으며, 앞으로의 프로젝트에서도 이러한 경험을 바탕으로 더욱 효율적인 작업 방식을 모색해 나갈 계획입니다.
AI를 활용하여 마치 여러 명의 개발팀과 협업하는 것과 같은 효과를 얻을 수 있었으며, 크게 다음 세 가지를 개발했습니다.
또한, 도트 작업 시 필요한 Assets을 하나의 이미지로 병합하여 효율적으로 관리하고 확인할 수 있는 기능과, 찾기 & 바꾸기가 완료된 낱글자를 시각적으로 표시하는 기능 등 작업 편의성을 높이는 기능들을 개발하여 활용했습니다.
AI를 활용한 개발은 때로는 놀라운 결과를 빠르게 만들어내기도 하지만, 대부분의 경우 명확한 목표 정의, 문제 해결 및 디버깅 과정을 거쳐야 합니다. 실제 코딩 양은 줄어들 수 있지만, 개발 과정 자체는 기존 방식과 크게 다르지 않으며, 때로는 예상치 못한 문제에 직면하여 어려움을 겪을 수도 있습니다. (AI를 활용한 개발에도 여러 어려움이 있다. 개발팀과 협업하는 경우라면 개발 비용과 산출물의 운영 비용이 발생하기 때문에 프로젝트의 연속성이 매우 중요하다.
AI를 사용한 개발은 때로는 마술지팡이처럼 쉽게 완성된 결과물을 만드는 경우도 있다. 하지만 대부분의 경우, 만들고자 하는 것을 정확하게 정의하고 발생하는 문제에 대해 찾고 수정해야 한다. 그럼에도 문제를 해결하지 못해 어려움을 겪을 수 있다. 이러한 측면에서는 실제 코드를 작성하는 양이 적을 뿐, 개발 과정과 크게 다르지 않다.)
로그 이미지