Overview

여기어때의 비주얼은 멈추지 않아요. Simple, Scalable, Lively라는 코어 밸류는 변하지 않지만, 그 위에 쌓이는 비주얼은 계속 진화해요. 2D 그래픽, 3D 그래픽, 일러스트레이션까지 시스템이 확장될수록 에셋도 함께 성장하고, 시간이 지날수록 더 정교해져요. 이 포트폴리오는 그 여정을 담고 있어요.

Visual core value

여기어때 비주얼 시스템이 지향하는 핵심 가치예요. 불필요함을 걷어내고, 어떤 서비스와 맥락에서도 흔들리지 않으며, 여행의 설렘과 따뜻함을 잃지 않는 것. 이 세 가지 원칙이 모든 디자인 결정의 기준이 되고, 일관된 브랜드 경험을 만드는 토대가 돼요.

Simple

불필요한 요소를 제거하고 본질에 집중해요. 사용자가 즉시 이해할 수 있는 직관적인 시각 언어를 추구해요.

Scalable

성장에 맞게 유연하게 확장되는 시스템. 새로운 서비스와 컨텍스트에도 일관된 시각 언어를 유지해요.

Lively

따뜻하고 생동감 있는 감성. 여행과 여가의 설렘을 담아 사용자와 정서적으로 연결되는 비주얼을 만들어요.

3D visual system

기존 이미지를 탈피해 새로운 브랜드 옷으로 갈아입는다는 개념 아래 리뉴얼이 진행됐어요. '책을 넘기듯 여행의 경험을 입체적으로 느껴라'는 의미를 담은 새 로고가 탄생했으며, 이 철학은 그래픽 디자인 전반에도 반영됐어요. 기존의 아웃라인 기반 2D 그래픽에서 벗어나 여행 경험의 입체감을 시각적으로 표현한 3D 그래픽 시스템으로의 전환이 이루어졌어요. 이러한 의미를 담아 홈 카테고리 아이콘이 새롭게 제작됐으며, 앱의 첫인상을 결정짓는 요소인 만큼 A/B 테스트와 유저 테스트를 병행한 검증 과정을 거쳐 최종 비주얼이 확정됐어요.

Home icon reskin 블로그 글 보러가기

실패한 첫 번째 리뉴얼

새로운 아이콘은 구매전환율과 GMV에는 유의미한 영향을 주지 않았지만, 홈 상단(ATF) 카테고리 아이콘 클릭률이 통계적으로 유의미하게 감소했어요. 이를 통해 새로운 아이콘이 사용자의 초기 탐색 과정에서 인지 부담을 높인 것으로 판단했고, 실험을 중단한 뒤 기존 디자인을 유지했어요.

Current (Applied)

A/B 테스트 결과 홈 상단(ATF) 카테고리 아이콘 클릭 유저 비율이 더 높게 유지되어 최종 적용했어요.

Experiment (Rejected)

새로운 스타일을 적용했지만, 홈 상단(ATF) 카테고리 아이콘을 클릭한 사용자 비율이 60.00% → 59.51%(-0.49%p)로 유의미하게 감소해 적용하지 않았어요.

---

왜 졌을까?
인사이트 수립 그리고 재도전하기

A/B 테스트 결과를 바탕으로 지표가 감소한 원인에 대한 가설을 세웠어요. 그리고 Casual UT를 통해서도 새로운 인사이트를 얻었으며, 이를 바탕으로 두 번째 A/B 테스트를 진행했어요.

아웃라인이 형태적 일관성을 만들어 줬어요. 외곽선을 기준으로 형태가 정리되면서 각 카테고리가 더 명확하게 구분됐어요.

형태와 디테일을 함께 담으면서 작은 화면에서는 오히려 빠른 인지를 방해했을 수 있다고 판단했어요.

스타일이 크게 바뀌면 기존 메타포도 다시 학습해야 했어요. 우리는 Casual UT를 통해서 새로운 인사이트를 발견했어요.

---

Casual UT 에서 찾은 인사이트

처음에는 기존 가구 중심 메타포를 유지한 채 스타일만 리뉴얼했어요. 하지만 Casual UT 결과, 침대 아이콘만으로는 모텔과 호텔을 구분하기 어렵다는 등 카테고리 인지가 명확하지 않다는 피드백을 받았어요. 이를 바탕으로 클릭률이 높은 주요 숙소 카테고리는 가구 대신 건물 형태의 아이콘을 적용해 카테고리 구분과 의미 전달을 더욱 직관적으로 개선했어요.

Casual UT로 얻은 인사이트가구 중심 메타포에서 건물 중심 메타포로 바꿔 호텔 카테고리가 무엇인지 한 번에 읽히도록 했어요.

앱 6.0 Renewal IDI 인터뷰중 살짝 넣어서 확인해본 인사이트메타포에 확신이 없었던 터라, 마침 진행 중이던 앱 6.0 Renewal IDI 인터뷰에 아이콘 문항을 더해 호텔에 가장 적합한 아이콘을 선택하게 해 인지와 이해도를 함께 검증했어요.

모텔모텔은 단독 건물 형태를 중심으로 표현하고, 간판 요소를 더해 호텔과 명확히 구분했어요. 높은 색상 대비를 적용해 작은 화면에서도 빠르게 인지할 수 있도록 했어요.

호텔호텔은 고층 건물과 별 메타포를 활용해 규모와 등급을 직관적으로 표현했어요. 넓고 안정적인 비율을 적용해 신뢰감 있는 이미지를 전달했어요.

해외 숙소다양한 해외 건축 양식을 하나의 형태로 표현하기 위해 건물 메타포를 단순화했어요. 건물의 각도와 비행기 요소를 결합해 해외 숙소라는 의미를 직관적으로 전달했어요.

---

A/B/C 타입으로 재도전

UT 인사이트를 바탕으로 메타포의 구체성과 컬러 사용 범위를 달리한 세 가지 타입을 제작했어요. 동일한 조건에서 A/B/C 테스트를 진행해 카테고리 인지와 비즈니스 KPI를 함께 비교했고, 여기어때의 핵심 비즈니스인 숙박 카테고리(모텔·호텔·해외숙소)를 중심으로 평가한 결과, 모텔과 호텔에서 더 긍정적인 사용자 반응을 보인 Type B를 최종안으로 선정했어요.

Type A — 기존

Type B — 3D 그래픽

Type C — 2D 그래픽

A/B 테스트 결과 지표

핵심 지표 변화

KPI	Type B · 3D	Type C · 2D	우세
GMV / User	-0.01%	-0.60%	Type B
Purchase CVR	+0.31%	+0.46%	Type C

카테고리별 홈 아이콘 클릭 UV 변화

카테고리	Type B · 3D	Type C · 2D	우세
모텔	+1.25%	-0.98%	Type B
호텔·리조트	-0.10%	-1.41%	Type B
해외숙소	+3.95%	+5.48%	Type C
···

---

검증을 거쳐 완성한 여기어때 홈 아이콘 리스킨

사용자 검증과 A/B 테스트를 거쳐 3D 그래픽 스타일을 최종안으로 선정했어요. 이후 홈 아이콘을 시작으로 서비스 전반의 3D 그래픽 시스템을 구축하는 기준이 되었어요.

As-is

To-be

Asset enhancement

3D Graphic Version 1.0

3D 홈 카테고리 아이콘 작업을 성공적으로 마친 후, 본격적인 비주얼 셋 작업에 돌입했어요. 홈 카테고리 아이콘은 36px이라는 작은 영역 안에 작업해야 했기 때문에 묘사가 함축적일 수밖에 없었어요. 반면 version 1은 보다 디테일한 묘사가 담기기 시작했어요. 작업 과정에서 브랜드의 Core Value를 지키면서 컬러, 그리고 가장 중요한 요소인 'Lively함'을 어떻게 표현할지 고민했어요. 여기어때가 정의한 Lively함은 '약간의 역동성'이에요. 다음 동작이 살짝 느껴지듯, 각도와 형태를 통해 정적이지 않고 생동감이 느껴지도록 디자인했어요.

3D Graphic Version 2.0

시간이 흐르면서 AI 시대에 발맞춰 비주얼을 더욱 생산성 있게 제작할 수 있는 환경이 갖춰졌어요. 처음에는 ChatGPT를, 이후에는 Gemini를 활용해 여기어때만의 아이콘 스타일을 구현할 수 있는 프롬프트를 기획하고 지속적으로 고도화하고 있어요. 이 작업은 현재도 진행 중이며, 추후 API 연동을 통해 디자이너가 아니더라도 누구나 손쉽게 비주얼을 제작할 수 있는 템플릿을 구축하는 것을 목표로 하고 있어요.

yeogi_icon_prompt.txt

yds_prompt_full.txt

01 · Style 02 · Subject 03 · Composition 04 · Background 05 · 3D View 06 · 2D View 07 · Color Rules 08 · YDS Colors

01 · MASTER STYLE — 스타일 DNA, 그대로 복사 / 수정 금지

rendering : 3D isometric · smooth matte plastic texture // 3D 아이소메트릭 · 무광 플라스틱 질감 lighting : 3-point setup · soft fill light · no harsh shadows · zero color spill // 3포인트 조명 · 컬러 번짐 금지 geometry : extreme simplification · basic geometric primitives only // 극도의 단순화 · 기본 도형만 사용 surface : clean solid color fills · no gradients · no noise · no texture overlays // 단색 면 · 그라디언트·노이즈·텍스처 금지 edge : strictly aliased hard edges · no anti-aliasing · no feathering // 픽셀 단위 경계 · 안티얼라이어싱 금지 // YDS 레퍼런스 이미지에서 추출한 스타일 DNA: // 무광 플라스틱 · 특정 조명 설정 · 극도의 기하학적 단순화 · 깔끔한 단색 면

02 · SUBJECT — 생성 대상 변수 / 레퍼런스 이미지 내용 복제 금지

name : ${name} // 생성할 오브젝트 — 예: "텐트", "호텔", "수영장" color : ${color} // YDS 컬러 딕셔너리 값만 사용 — 임의 HEX 금지 shape : ${shape} // 오브젝트의 기본 기하학적 형태 material : smooth matte plastic ← 3D 영역 전용 · 2D에 적용 금지 // 콘텐츠 금지 사항 — 레퍼런스 이미지는 스타일 참고 전용: // 레퍼런스에 보이는 오브젝트 복제 금지 (백팩, 카메라, 열쇠, 선물상자 등) // 레퍼런스의 그리드 레이아웃·컴포지션 복제 금지 // 레퍼런스를 배경 레이어 또는 워터마크로 사용 금지

03 · COMPOSITION — 캔버스 구성 / 복제·중복 생성 절대 금지

layout : SPLIT CANVAS EXACTLY IN HALF — 캔버스를 정확히 세로 2등분 left 50% : 3D Isometric View · 원근감 · 플라스틱 재질 · 조명 적용 right 50% : 2D Flat Icon View · 정면/탑뷰 · 벡터 플랫 스타일 objects : EXACTLY TWO — 오브젝트 정확히 2개 · 각 영역에 1개씩 · 추가 금지 alignment : 오브젝트는 반드시 수평 중심선에 정렬 size : 최대 크기로 생성 — 여백 최소화 · 영역 내 최대한 크게 stacking : 수직 배치 절대 금지 — Y축 기준 오브젝트는 1개 · 상하 배치 불가 cloning : 복제 금지 — ${name}은 3D 1번 · 2D 1번만 생성

04 · BACKGROUND — 순수 화이트 배경 / 그림자·컬러 번짐 절대 금지

color : PURE WHITE #FFFFFF — 배경 캔버스 전용 컬러 shadows : ZERO — 드롭 쉐도우 · 바닥 그림자 일체 금지 · 오브젝트는 허공에 부유 color bleed: NONE — 배경에서 컬러 빛·반사·앰비언트 오클루전 발생 금지 ambient OCC: ZERO — 배경 레이어에 앰비언트 오클루전 적용 금지

05 · 3D VIEW — 좌측 50% · 아이소메트릭 렌더

style : trendy clean smooth 3D render · matte plastic texture // 트렌디한 3D 렌더 · 마스터 스타일 복사 quality : ULTRA-SHARP FOCUS · 8k resolution · crisp edges // 최고 해상도 · 선명한 엣지 pose : floating · 3D ISOMETRIC TILT // 부유 · 아이소메트릭 각도 · 입체감 표현 placement : 좌측 영역 정중앙에 오브젝트 1개 배치 · 여백 최소화 lighting : pure neutral white studio lighting ONLY // 중립 화이트 스튜디오 조명 · 컬러 오염 0% edges : STRICTLY ALIASED // 픽셀 단위 하드 엣지 · 배경 제거 작업을 위한 깔끔한 경계

06 · 2D VIEW — 우측 50% · 플랫 벡터 아이콘

style : strictly GEOMETRIC 2D flat vector icon // YDS 파운데이션 그래픽 스타일 기반 process : 기본 기하학 도형만으로 형태를 완전히 재해석 primitives : perfect circles · thick rectangles · rounded capsules // 원·사각형·캡슐만 사용 abstraction: EXTREME // 최소 인식 가능한 수준까지 단순화 · 유기적 곡선 금지 view : FRONT or TOP VIEW // 정면 또는 탑뷰 · 깊이감·원근감 완전 제거 alignment : GRID PRECISION // 수평 0° · 수직 90° 완벽 유지 · 흔들림 금지 symmetry : PERFECT SYMMETRY // 대칭 오브젝트는 좌우 100% 대칭 integrity : 모든 도형 요소는 논리적으로 연결 · 부유 요소 금지 fill : solid flat colors ONLY // 단색 면 채색 · 외곽선·획·그라디언트·그림자 일체 금지

07 · COLOR RULES — 2D 뷰 전용 컬러 제한 규칙

NEVER : #FFFFFF // 2D 아이콘 내부에 순수 흰색 사용 절대 금지 REPLACE : 2D 아이콘의 모든 흰색 요소 → #EBEBEB // 예외 없이 치환 bg only : PURE WHITE #FFFFFF // 캔버스 배경 레이어에만 사용 가능 reason : 배경 제거 작업 시 내부 흰색이 배경과 합쳐져 사라지는 문제 방지 shadows : ZERO // 드롭 쉐도우 · 이너 쉐도우 · 앰비언트 · 글로우 일체 금지 edges : ALIASED // 픽셀 단위 경계 · 블러·페더링 금지

08 · YDS COLOR DICTIONARY

Lively Red

Blue

Cyan

Green

Mint

Yellow

Violet

Orange

Neutral

// ── yeogi visual design system · AI 아이콘 생성 프롬프트 전문 ───────── // Target: Gemini Image Gen / ChatGPT-4o · 2025 MASTER STYLE 레퍼런스 이미지의 스타일 DNA만 추출 — 오브젝트 내용 복제 금지 DO NOT copy: subjects (backpacks, cameras, keys, gift boxes) DO NOT copy: grid layout / composition / use as background or watermark EXTRACT ONLY → smooth matte plastic · specific light setup · extreme geometric simplification · clean solid color fills SUBJECT — template variables ${name} 생성할 오브젝트 (예: 텐트, 호텔, 수영장) ${color} YDS 컬러 딕셔너리 값 전용 · 임의 HEX 금지 ${shape} 기본 기하학적 형태 material → smooth matte plastic (3D 전용 · 2D 적용 금지) COMPOSITION — ABSOLUTE RULES 캔버스 정확히 세로 2등분 [Left 50%: 3D Isometric View] [Right 50%: 2D Flat Icon View] 오브젝트 정확히 2개 · 각 영역 1개 · 수직 배치 금지 · 복제 금지 수평 중심선 정렬 · 최대 크기 · 불필요한 여백 최소화 BACKGROUND #FFFFFF 순수 화이트 (배경 캔버스 전용) ZERO shadows · NO color bleed · NO ambient occlusion · 오브젝트 허공 부유 3D VIEW — Left 50% trendy clean smooth 3D render · matte plastic · ULTRA-SHARP 8k floating · 3D ISOMETRIC TILT · 중립 화이트 스튜디오 조명 · 컬러 오염 0% STRICTLY ALIASED EDGES 배경 제거용 하드 픽셀 경계 2D VIEW — Right 50% strictly GEOMETRIC flat vector icon (YDS Foundation Graphic Style) 기본 도형만 사용 → perfect circles · thick rectangles · rounded capsules EXTREME 추상화 · 유기적 곡선 금지 · 정면/탑뷰 · 깊이감 제거 GRID PRECISION · PERFECT SYMMETRY · NO floating elements solid flat colors ONLY · 외곽선·획·그라디언트·그림자 일체 금지 COLOR RULES — 2D 전용 NEVER #FFFFFF 내부 사용 → 모든 흰색 요소 → #EBEBEB 치환 #FFFFFF 배경 캔버스 전용 · 내부 사용 시 배경 제거 불가 ALIASED EDGES · ZERO shadows · NO gradients · NO glow

2D visual system

여기어때의 비주얼 시스템은 2D 그래픽에서 시작됐어요. 출발점은 워드마크 로고예요. 원, 정사각형, 직사각형 같은 가장 단순한 기본 도형의 조합에서 여기어때만의 조형 규칙이 만들어졌고, 비비드한 5가지 기본 컬러를 더해 브랜드의 시각적 토대를 다졌어요. 그 규칙은 시스템 아이콘, 2D 그래픽, 3D 그래픽, 일러스트레이션까지 확장되며 하나의 일관된 비주얼 시스템으로 고도화됐어요.

Logo를 기반으로 한 비주얼 특징 생성

비비드하고 심플한 컬러들을 기반으로 제한적이면서도 구분된 컬러 사용

System icon에 shape 원칙을 적용

2D 비주얼 시스템 세부 규칙 적용 2D 가이드 보러가기

여기어때만의 비주얼 아이덴티티를 구축하고, 내부 디자이너들이 일관성 있는 그래픽을 유지할 수 있도록 세부 규칙을 정립했어요. 그림자의 각도, 형태 규칙, 비주얼의 각도, Core Value인 'Lively'를 극대화하는 방법, 재질 표현 방식, 선 처리 방식까지 라운드 값 하나하나까지 세밀하게 규정하며 여기어때만의 비주얼 시스템을 고도화해 나갔어요.

Rule 01 Shadow

그림자는 오브젝트 하단에 부드럽게 적용해요. 과도한 표현은 지양하고 일관된 깊이감을 부여해요.

Rule 02 View Angle

오브젝트의 시점은 정면 또는 3/4뷰를 원칙으로 해요. 카테고리 내에서 시점 방향을 통일하여 일관성을 유지해요.

Rule 03 Material

카테고리별로 정해진 색상 팔레트를 사용해요. 오브젝트당 최대 4색 이내로 제한하여 깔끔한 인상을 유지해요.

Rule 04 Stroke

선 두께는 2pt와 4pt 두 종류로만 통일해요. 오브젝트의 크기와 위계에 따라 선택해 일관된 인상을 유지해요.

Rule 05 Font

오브젝트에 텍스트가 포함될 경우 지정된 폰트와 굵기 원칙을 따라요. 가독성과 브랜드 일관성을 동시에 확보해요.

Rule 06 Shape

단순하고 명확한 실루엣을 기반으로 형태를 설계해요. 작은 크기에서도 오브젝트를 즉시 인식할 수 있어야 해요.

Rule 07 Grid

모든 오브젝트는 100×100px 기준 그리드 위에 설계돼요. 일관된 비율과 여백을 유지해요.

Illustration system

일러스트레이션은 기본 셋을 먼저 제작한 후 지속적으로 고도화하는 방향으로 진행됐어요. 비주얼 셋의 분위기를 이어가면서도 간결하게, 그러면서도 의미를 명확히 전달할 수 있도록 제작됐으며, 기본 도형을 기반으로 디자인됐어요.

캐릭터 디자인 기본 셋

여기어때 컬쳐북 프로젝트 사이트 보러가기

일러스트는 주로 인사팀에서 활발하게 활용됐어요. 여기어때 임직원들을 위한 컬처북 프로젝트를 진행하면서, 인사팀과 함께 9가지 리더십 원칙을 수립하고 각 원칙에 맞는 일러스트를 디자인했어요. 이 과정을 통해 일러스트 스타일을 한층 더 고도화할 수 있었어요.

여기어때 펜션캠핑 광고 프로젝트 사이트 보러가기

여기어때 영업팀은 펜션·캠핑 업주들과의 제휴 확대를 위해 활발히 활동하고 있어요. 다만 영업 담당자의 역량과 성향에 따라 전달되는 내용에 차이가 생기는 경우가 있었어요. 이를 개선하기 위해 제휴사에 일관된 정보를 제공하고, 여기어때의 강점을 효과적으로 알릴 수 있는 전용 웹사이트를 제작했어요. 해당 사이트에는 가족, 친구, 반려동물까지 아우르는 따뜻하고 친근한 분위기의 일러스트를 활용해 제휴사와의 공감대를 자연스럽게 형성할 수 있도록 했어요.

Design system onboarding

여기어때 비주얼 시스템을 처음 접하는 디자이너와 개발자를 위한 온보딩 가이드예요. 시스템의 철학과 원칙부터 실제 적용 방법까지, 빠르게 이해하고 활용할 수 있도록 안내해요. 비주얼 디자이너로서 단순한 화면 제작을 넘어, 프로덕트 전반에서 브랜드와 비주얼 경험이 닿을 수 있는 모든 영역을 직접 설계하고 만들 수 있는 디자이너로 성장하기 위해 이 프로젝트를 진행했어요.

Overview

디자인 시스템 온보딩 프로그램은 구성원들이 디자인 시스템을 동일한 기준과 맥락으로 이해하고, 각자의 역할에서 자연스럽게 활용할 수 있도록 제작됐어요. 여기어때에 입사한 지 얼마 되지 않았거나 디자인 시스템이 익숙하지 않은 분들도 구조와 목적, 방향성을 빠르게 파악해 실무에 적용할 수 있는 진입점 역할을 해요. 이를 통해 브랜드와 프로덕트의 일관성을 장기적으로 유지하고, 앞으로의 확장까지 고려한 기반을 마련하고자 해요.

Before use

이 섹션에서는 피그마 라이브러리 사용 방법을 비롯해 필수로 다운로드해야 하는 폰트, 그리고 구글 드라이브 링크를 제공하여 디자이너와 개발자가 공통으로 알아두어야 할 주요 리소스를 안내해요. 디자이너와 개발자분들께서 디자인 시스템을 보다 원활하게 활용하실 수 있도록, 몇 가지 주요 단계를 순서대로 소개해요.

Changelog

Changelog는 디자이너와 개발자가 변경 사항, 삭제 예정 항목, 현재 적용된 버전 등 디자인 시스템의 최신 상태를 확인할 수 있도록 정리한 변경 이력이에요. 또한 개발 리소스 소요를 예측할 수 있는 기준 문서이기도 해요. Changelog를 통해 변경 범위와 영향도를 미리 파악함으로써 개발자는 작업 난이도와 소요 시간을 계산하고, 일정과 우선순위를 효율적으로 조정할 수 있어요.

Typography & Color

타이포그래피는 단순히 텍스트 크기를 맞추기 위한 요소가 아니라, 콘텐츠의 역할과 화면 안에서의 위계를 전달하기 위한 도구예요. 따라서 Text styles는 px 값만을 기준으로 선택하기보다는, 사용되는 맥락과 텍스트의 의미를 먼저 고려한 뒤 적용하는 것을 권장해요.

Promotion template

여기어때에서는 마케팅 브랜드팀이 이벤트 및 프로모션 페이지를 제작하고 있어요. 플랫폼 디자인팀은 서비스 UX와 마케팅 페이지의 UX·비주얼 방향성을 일관성 있게 유지하기 위해 디자인 시스템을 제안했어요. 이후 마케팅 브랜드팀과 지속적으로 협업하며 기본적인 시스템과 디자인 툴을 함께 정립하고 조율해 나갔어요.