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

여기어때 디자인팀이 디자인 시스템 YDS 의 2D·3D 아이콘을 일관되게 만들던 병목을, AI 생성과 벡터화 파이프라인을 묶은 "아이콘 생성기"로 자동화한 제작기를 다룬다. 단순히 AI 이미지를 뱉는 게 아니라, 브랜드 규칙을 학습시키고 비트맵을 실무에서 바로 쓰는 벡터 자산으로 변환하는 데 진짜 도전이 있었다.

핵심 포인트

YDS 의 반투명 질감·베벨·3D 앵글·브랜드 컬러 규칙 때문에 일반 AI 툴 결과물은 매번 리터칭이 필요해 오히려 느렸다.
캔버스를 좌(3D)·우(2D 플랫)로 물리 이등분하고 영역을 격리해 한 번에 두 스타일을 "스타일 오염" 없이 생성했다.
사용자가 첨부한 스케치의 실루엣은 유지하고 YDS 스타일·분할 규칙만 덧입히는 레퍼런스 기반 생성을 설계했다.
AI 비트맵을 자체 픽셀 스캔으로 안티앨리어싱·노이즈를 깎고 패스를 병합·정돈한 벡터로 변환했다.
3D 는 PNG, 2D 는 정제된 SVG 로 클립보드에 바로 복사해 Figma 로 끊김 없이 붙여넣게 했다.

상세 정리

배경: 서비스 확장으로 시각 에셋 수요가 폭증했고, YDS 일관성을 지키며 2D·3D 아이콘을 매번 세트로 만드는 과정이 작업 흐름의 심각한 병목이 됐다.
일반 툴 한계: "빨간 캐리어 아이콘" 같은 요청에 스타일이 제각각 나와 디자인 툴로 다시 가져와 리터칭해야 해, 오히려 시간이 더 걸렸다.
멀티 뷰 분할: AI 캔버스를 정확히 이등분해 좌측 3D, 우측 그림자·그라데이션을 뺀 2D 플랫을 배치하고, 두 영역이 조명·스타일로 간섭하지 않게 격리하는 규칙을 프롬프트에 주입했다.
스타일 오염: 두 스타일을 동시에 요구하면 3D 렌더링에 2D 납작한 질감이 섞이는 문제를 위 영역 분리로 한 번의 생성에서 해결했다.
레퍼런스 생성: 텍스트보다 그림이 의도를 잘 전달하는 경우를 위해, 첨부 스케치의 실루엣·형태를 유지하면서 YDS 스타일과 분할 규칙만 입히도록 설계했다.
벡터화 동기: AI 가 만든 2D 는 비트맵이라 Figma·일러스트레이터에서 자유롭게 편집할 수 없어 "진짜 자산"이 아니라고 보고, 벡터 변환 파이프라인을 핵심 과제로 삼았다.
배경 분리: 생성 시 배경을 순백(#FFFFFF)으로 강제하고 피사체 내부엔 순백을 못 쓰게 통제한 뒤, 자체 픽셀 스캔으로 외곽 안티앨리어싱과 노이즈를 깎았다.
패스 최적화: 자동 벡터화가 앵커 포인트를 수백 개 찍어 편집이 어려운 문제를, 패스를 병합하고 좌표를 정돈하며 외곽선 속성을 걷어내 색이 채워진 순수 면 데이터로 압축했다.
UX: 3D 는 PNG, 2D 는 SVG 로 복사 버튼 한 번에 클립보드에 담겨 Figma 에 바로 붙고, 페이지네이션 대신 무한 캔버스 UI 와 즐겨찾기·ZIP 일괄 다운로드로 탐색 흐름을 끊지 않게 했다.
교훈: 모델만 연동하면 끝이 아니라, 버전업마다 결과가 달라지므로 프롬프트·가이드라인을 끊임없이 튜닝하고 실무 워크플로에 녹여야 도구가 살아남는다.

왜 읽나디자인 시스템 일관성을 지키며 AI 생성 에셋을 실무에 쓰려는 디자이너·디자인 엔지니어에게, 프롬프트 영역 분리와 벡터화 파이프라인 설계의 구체적 레퍼런스.

여기어때 (GC컴퍼니) 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

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

이 글과 비슷한

학습 에이전트 — AI 두뇌 구축하기

AI 에이전트 회사 차리기: 설립부터 어디서든 동기화까지

AI Gateway에서 실시간 음성 에이전트 구축하기