Read Original
#Design

디자이너의 상상을 현실로: 여기어때 아이콘 생성기 제작기

디자이너의 상상을 현실로: 여기어때 아이콘 생성기 제작기
01

Summary

아이콘 노가다는 끝났다! 여기어때의 AI 기반 디자인 자동화 혁신

디자인 시스템 DNA를 학습한 AI가 2D/3D 아이콘과 벡터 데이터까지 한 번에 해결하는 방법

여기어때 디자인팀이 반복적인 아이콘 제작 병목을 해결하기 위해 직접 개발한 '아이콘 생성기'의 제작 여정을 소개합니다. 단순히 이미지를 만드는 것을 넘어 브랜드의 일관성을 지키고 실무에서 즉시 편집 가능한 벡터 데이터로 변환하는 기술적 도전과 UX 고민을 담았습니다.

  • 01브랜드 아이덴티티(YDS)를 완벽히 준수하는 전용 AI 생성 환경 구축
  • 02프롬프트 엔지니어링을 통한 2D 플랫과 3D 아이콘의 동시 생성(멀티 뷰 분할)
  • 03비트맵 이미지를 편집 가능한 고품질 SVG로 변환하는 벡터화 파이프라인
  • 04피그마와 즉시 연동되는 클립보드 복사 및 무한 캔버스 UI 기반의 워크플로우
  • 05단순 생성을 넘어 '살아있는 서비스'로 관리되는 AI 운영 전략

RECOMMENDATION

반복적인 그래픽 에셋 제작으로 생산성 저하를 겪는 디자인 팀이나, AI를 실무 워크플로우에 심리스하게 통합하고 싶은 엔지니어들에게 필독을 권합니다.

The Problem

비즈니스가 확장됨에 따라 브랜드 디자인 시스템(YDS)의 일관성을 유지하며 고품질의 2D/3D 아이콘 세트를 수동으로 제작하는 과정에서 심각한 리소스 병목 현상이 발생했습니다. 시중의 일반적인 AI 툴은 브랜드 고유의 스타일을 일관되게 복제하지 못해 실무 적용을 위해서는 번거로운 추가 리터칭 작업이 필수적이었습니다.

The Solution

AI 캔버스를 물리적으로 분할해 2D와 3D 스타일을 동시에 생성하는 멀티 뷰 전략을 도입하고, 비트맵 이미지를 노이즈 없는 고품질 SVG 벡터 데이터로 변환하는 자동화 파이프라인을 구축했습니다. 또한 무한 캔버스 UI와 클립보드 복사 기능을 구현하여 생성된 에셋을 피그마 등 실무 도구에 즉시 붙여넣을 수 있는 심리스한 워크플로우를 완성했습니다.

The Result

반복적인 아이콘 제작 시간을 대폭 단축하여 디자인 생산성을 높였으며, 단순 이미지가 아닌 편집 가능한 가벼운 벡터 데이터를 제공함으로써 실무 활용도가 높은 '디자인 자산'으로서의 가치를 확보했습니다.

Trade-off

AI 모델이 업데이트될 때마다 동일한 프롬프트에도 결과물이 달라지는 변동성이 있어 지속적인 튜닝이 요구되며, 자동화된 벡터화 과정에서 복잡한 디테일이 일부 단순화될 수 있는 한계가 존재합니다.

03

Key Concepts

Concept · 01

YDS (Yeogi Design System)

여기어때 고유의 브랜드 경험을 일관되게 제공하기 위한 디자인 시스템으로, 고유의 질감, 앵글, 컬러 팔레트 등의 규칙을 정의합니다.

  • AI가 브랜드 DNA를 학습하여 일관된 스타일의 아이콘을 생성하는 핵심 가이드라인으로 활용됨
Concept · 02

멀티 뷰 분할 전략

한 번의 생성 요청으로 서로 다른 스타일(2D와 3D)의 결과물을 동시에 얻기 위해 AI 캔버스를 물리적으로 나누어 제어하는 프롬프트 기법입니다.

  • 영역별 격리 규칙을 통해 3D 렌더링과 2D 플랫 스타일 간의 상호 간섭(스타일 오염)을 방지함
Concept · 03

벡터화 파이프라인 (Vectorization)

픽셀 기반의 비트맵 이미지를 좌표와 선 중심의 SVG 데이터로 변환하고, 패스 최적화를 통해 편집 가능한 상태로 만드는 기술 공정입니다.

  • 안티앨리어싱 제거 및 불필요한 앵커 포인트를 정돈하여 실무자가 바로 편집 가능한 가벼운 데이터 생성