Engineering
디자이너의 상상을 현실로: 여기어때 아이콘 생성기 제작기
여기어때 UX Center여기어때
2026년 5월 22일
원문에서 보기 ↗글. 정종민(Green) / Visual Interaction Designer
AI와 벡터화 파이프라인으로 구축한 YDS 아이콘 자동화 워크플로우
서비스가 빠르게 성장하고 다양한 도메인으로 비즈니스가 확장되면서, 프로덕트 내에 필요한 시각적 에셋의 양도 폭발적으로 증가했어요. 특히 ‘아이콘’은 어려운 내용을 쉽게 전달해 이해를 돕고 새로운 지면의 주목도와 어포던스를 높여주기 때문에, 새로운 화면이 추가될 때마다 필수적으로 요구되는 핵심 리소스였죠.
여기어때는 고유의 디자인 시스템인 YDS(Yeogi Design System)를 통해 일관된 브랜드 경험을 제공하고 있어요. 하지만 이 ‘일관성’을 철저히 지키며 매번 고품질의 2D 플랫 아이콘과 3D 아이콘을 세트로 제작하는 과정은, 리소스 측면에서 전체 작업 흐름을 지연시키는 심각한 병목 현상이 되기 시작했어요. 단순히 예쁜 아이콘을 만드는 것을 넘어, 어떻게 하면 효율과 퀄리티라는 두 마리 토끼를 잡을 수 있을지 고민해야만 했어요.
여기어때 아이콘 생성 툴
이런 고민 끝에, 디자이너의 상상을 즉각적으로 사용할 수 있는 에셋으로 변환해 주는 ‘여기어때 아이콘 생성기’를 직접 개발하기로 했어요. 단순히 AI 결과물을 뱉어내는 것을 넘어, 실무 디자인 워크플로우에 완벽하게 녹아드는 프로덕트를 만들기까지의 치열했던 과정을 공유할게요.
1. 완벽한 디자인 시스템, 그러나 부족한 시간
프로젝트 초반, 우리가 마주한 가장 현실적인 문제는 브랜드 고유의 톤앤매너를 일관되게 유지하는 일이었어요. 시중에는 이미 훌륭한 AI 툴이 많았지만, 이를 그대로 실무에 가져다 쓰기엔 무리가 있었죠. YDS 아이콘은 특유의 반투명하고 부드러운 플라스틱 질감부터 모서리의 베벨(Bevel) 처리, 정교한 3D 앵글, 그리고 엄격하게 지정된 브랜드 컬러 팔레트라는 우리만의 규칙을 따르고 있었기 때문이에요.
일반적인 툴에 “빨간색 여행용 캐리어 아이콘 그려줘”라고 입력하면 매번 스타일이 제각각인 결과물이 튀어나오곤 했어요. 결국 생성된 이미지를 다시 디자인 툴로 가져와 일일이 리터칭해야 했고, 오히려 작업 시간이 더 길어지는 아이러니한 상황이 발생했죠. 우리는 AI가 ‘여기어때의 디자인 DNA’를 완벽하게 학습하고 이해하도록 만드는 데 집중해야만 했어요.
2. 2D와 3D를 동시에 구현하는 ‘멀티 뷰 분할’ 전략
사용자가 한 번의 요청으로 3D 아이콘과 2D 아이콘을 동시에 얻게 만드는 것은 생각보다 까다로운 과제였어요. AI에게 서로 다른 두 스타일을 동시에 요구하면, 3D 렌더링에 2D의 납작한 질감이 섞이는 등 이른바 ‘스타일 오염’ 현상이 자주 발생했기 때문이죠. 우리는 이 문제를 해결하기 위해 고도의 프롬프트 엔지니어링 전략을 도입했어요.
영역의 완벽한 분리와 엄격한 규칙 주입
우리는 AI 캔버스를 물리적으로 정확히 이등분하는 강력한 가이드라인을 설정했어요. “좌측에는 입체적인 3D 뷰를, 우측에는 그림자와 그라데이션이 완전히 배제된 2D 플랫 스타일을 배치하라”고 명확히 지시했죠. 특히 각 영역이 서로의 조명이나 스타일에 간섭하지 않도록 철저하게 격리하는 규칙을 주입했어요. 덕분에 단 한 번의 생성으로도 이질적인 두 가지 스타일의 에셋 세트를 완벽하게 얻어낼 수 있었어요.
의도는 사람이, 완성은 AI가: 레퍼런스 기반 생성
때로는 백 마디의 텍스트보다 한 장의 그림이 의도를 더 정확히 전달해요. 사용자가 직접 그린 스케치나 레퍼런스 이미지를 첨부하면, AI는 그 실루엣과 형태를 유지하면서 YDS의 스타일과 ‘2D/3D 분할 생성’ 규칙만을 덧입히도록 설계했어요. 제작자의 초기 의도를 보존하면서 AI의 표현력을 극대화한, 그야말로 사람과 AI의 완벽한 협업 구조를 완성한 셈이에요.
3. 이미지 너머, ‘진짜 디자인 자산’을 고민하다
AI가 생성한 2D 이미지가 아무리 예쁘더라도, 결국 그것은 비트맵 방식의 수많은 픽셀 조각일 뿐이에요. 피그마나 일러스트레이터 같은 벡터 기반의 툴에서 크기나 색상 등을 자유롭게 편집할 수 없다면, 원하는 아이콘 하나를 얻기 위해 무수한 생성 요청과 인내심을 소모해야만 하죠. 결국 실무자 입장에서 편집 불가능한 결과물은 본질적으로 ‘진짜 자산’이라고 부르기 어렵다고 판단했어요. 그래서 이 비트맵 이미지를 유연한 벡터 데이터로 변환하는 파이프라인을 구축하는 것이 이번 프로젝트의 진정한 핵심이자 기술적 도전이었답니다.
① 1픽셀의 오차도 허용하지 않는 배경 분리
완벽한 벡터화를 위해서는 픽셀 단계에서부터 불순물이 없어야 해요. AI 생성 시 배경을 순백색(#FFFFFF)으로 강제하고, 피사체 내부에는 절대 순백색을 쓰지 않도록 통제했어요. 이를 바탕으로 자체적인 픽셀 스캔 알고리즘을 돌려 3D 및 2D 오브젝트 외곽에 생기는 미세한 안티앨리어싱(경계선 흐림)과 노이즈를 지능적으로 깎아냈어요.
② 디자이너가 실무에서 바로 쓰는 벡터 데이터
사실 비트맵 이미지를 선으로 따주는 자동화 툴은 이미 많죠. 하지만 결과물을 열어보면 앵커 포인트가 수백 개씩 찍혀 있어서, 점 하나 옮기려다 결국 포기하게 되는 경우가 태반이었어요. 저희는 단순히 외부 생성 모델을 연결해 결과물을 뱉어내는 데 그치지 않았어요. 불필요하게 꼬여있는 패스들을 하나하나 병합하고 미세한 좌표값들을 정돈하는 최적화 과정을 거쳤어요.
특히 디자이너를 번거롭게 만드는 외곽선 속성들을 걷어내고, 색상이 채워진 순수한 ‘면’ 데이터로 결과물을 압축하는 데 공을 들였어요. 덕분에 사람이 펜 툴로 직접 정성껏 그린 것처럼, 군더더기 없고 가벼운 벡터 데이터를 제공할 수 있게 되었답니다.
4. 영감을 자극하는 무한 캔버스와 끊김 없는 워크플로우
핵심 기술이 완성되었으니, 이제 이 강력한 엔진을 디자이너들이 편하게 쓸 수 있도록 운전석(UX)을 세팅할 차례였어요. 아무리 좋은 에셋도 매번 다운로드 폴더를 뒤적여야 한다면 불편하겠죠.
여기어때 아이콘 생성기에서는 마음에 드는 아이콘 위에서 복사 버튼만 누르면, 3D 아이콘은 PNG로, 2D 아이콘은 정제된 SVG 형태로 클립보드에 즉시 저장돼요. 디자이너는 화면 전환 없이 띄워둔 피그마 캔버스에 곧바로 붙여넣으며 작업을 물 흐르듯 이어갈 수 있어요.
또한 영감을 충분히 자극할 수 있도록, 아이콘들을 페이지네이션으로 답답하게 넘겨보는 방식 대신 빈 캔버스 위를 자유롭게 유영하는 ‘무한 캔버스 UI’를 채택했어요. 마우스로 드래그하며 광활한 화면 구석구석을 탐험하다 보면, 의도하지 않았던 조합이나 새로운 영감을 발견하는 즐거움도 함께 느끼실 수 있을 거예요.
이렇게 무한 캔버스를 탐색하며 마음에 드는 아이콘들을 즐겨찾기에 툭툭 담아보세요. 모아둔 에셋들은 나중에 ZIP 파일로 한 번에 일괄 다운로드할 수 있게 구성해, 탐색과 발견의 흐름이 중간에 끊기지 않도록 세심하게 챙겼답니다.
마무리: ‘살아있는 서비스’를 향한 집요한 고민
이번 프로젝트를 통해 AI가 디자이너를 반복적인 작업으로부터 해방시키는 최고의 동료가 될 수 있다는 확신을 얻었어요. 하지만 그 과정에서 저희가 배운 것은 기술의 화려함보다 훨씬 더 묵직한 ‘운용의 가치’였어요.
첫째, AI는 끊임없이 돌봐줘야 하는 존재입니다.
요즘은 생성 모델만 연동하면 누구나 AI 프로덕트를 만들 수 있다고들 하지만, 사실 진짜 완성도는 그 이후의 ‘집요한 관리’에서 결정된다고 생각해요. 이미지 생성 모델이 버전업될 때마다 똑같은 프롬프트에도 전혀 다른 결과물이 나오기도 하기에, 모델의 변화에 따라 사용자 경험(UX)이 널뛰지 않도록 프롬프트와 가이드라인을 끊임없이 튜닝하는 과정은 필수적이에요.
둘째, 실무의 워크플로우에 녹아들지 못하는 기술은 결국 외면받아요.
“쉽게 만들었으니 쉽게 쓰겠지”라는 안일한 생각 대신, 도구가 실제 업무 현장에서 생존할 수 있도록 디자이너의 가려운 곳을 긁어주는 세밀한 UX 개선이 계속해서 뒷받침되어야 해요.
여기어때 아이콘 생성기는 이제 시작이에요. 우리는 앞으로도 모델의 변화를 주시하며 프롬프트를 고도화하고, 이 도구를 하나의 ‘살아있는 서비스’로 키워나갈 계획이에요. 디자이너를 가장 번거로운 일로부터 해방시키는 그날까지, 여기어때의 디자인 혁신은 멈추지 않고 계속 달릴 겁니다.
✔️ 글쓴이를 더 알고 싶다면?
편집: 이소연(Jetty) UX Writer
그래픽: 정종민(Green)
**해당 글과 이미지를 인용 또는 재가공 시 출처를 꼭 밝혀주세요.
Platform Design Team을 더 자세히 알고 싶다면?