AI로 디자인, 생산성은 두 배! 여기어때 아이콘 생성기
YDS(Yeogi Design System) 기반의 일관된 아이콘 제작을 위해 AI 기반 아이콘 생성기 개발
2D/3D 멀티 뷰 분할 전략을 통해 한 번의 요청으로 두 가지 스타일의 아이콘 동시 생성
벡터 데이터 변환 파이프라인 구축으로 픽셀 기반 이미지의 편집 한계 극복
무한 캔버스 UI와 클립보드 연동을 통해 디자이너의 작업 흐름(Workflow) 최적화
AI 모델과 디자인 시스템의 조화
본문에서는 AI가 생성한 결과물을 YDS(Yeogi Design System)의 디자인 가이드라인에 맞춰 일관성을 유지하는 데 초점을 맞췄다. AI 모델의 지속적인 튜닝(Tuning)을 통해 브랜드 톤앤매너를 유지하고, 프롬프트 엔지니어링(Prompt Engineering)을 통해 원하는 스타일을 구현했다. 특히, AI 모델의 버전 변화에 따라 UX가 달라지는 문제를 해결하기 위해 지속적인 관리의 중요성을 강조했다. 이는 AI 기반 디자인 시스템 구축의 핵심 과제이다.
2D와 3D 아이콘 동시 생성 전략
여기어때 아이콘 생성기는 멀티 뷰 분할(Multi-view Split) 전략을 통해 2D와 3D 아이콘을 동시에 생성한다. AI 캔버스를 이등분하여 각 영역에 서로 다른 스타일을 적용하고, 프롬프트 엔지니어링(Prompt Engineering)을 통해 스타일 간의 간섭을 최소화했다. 사용자가 레퍼런스 이미지를 첨부하면, AI는 해당 이미지의 실루엣과 형태를 유지하면서 YDS 스타일을 적용한다. 이는 AI와 디자이너의 협업(Collaboration)을 극대화하는 방식이다.
벡터 데이터 변환 파이프라인 구축
AI가 생성한 비트맵 이미지를 실무에서 활용 가능한 벡터 데이터로 변환하는 과정은 이 프로젝트의 핵심 기술적 도전이었다. 1픽셀 오차도 허용하지 않는 배경 분리를 위해 픽셀 스캔 알고리즘을 사용하고, 불필요한 패스를 병합하여 최적화된 벡터 데이터(Optimized Vector Data)를 생성했다. 디자이너가 펜 툴로 직접 그린 듯한 퀄리티의 벡터 데이터를 제공함으로써, 실무 워크플로우(Workflow) 효율성을 높였다.
디자이너 중심의 UX/UI 설계
여기어때 아이콘 생성기는 디자이너의 작업 흐름을 고려한 UX/UI를 제공한다. 무한 캔버스 UI(Infinite Canvas UI)를 통해 아이콘을 자유롭게 탐색하고, 클립보드 연동을 통해 피그마(Figma) 캔버스에 즉시 붙여넣을 수 있도록 했다. 또한, 즐겨찾기 기능을 통해 원하는 아이콘을 모아 ZIP 파일로 일괄 다운로드할 수 있도록 하여, 탐색과 발견의 흐름(Flow)을 끊임없이 유지했다. 이는 사용자 경험(UX) 최적화를 위한 노력이다.
