Engineering

여기어때 비주얼 에셋, 새롭게 정의하다

여기어때 UX Center여기어때

2025년 12월 12일

글. 정종민(Green), 한동현(Noah) / Platform Design Team

안녕하세요, 여기어때 플랫폼 디자인팀의 그린, 노아예요. 플랫폼 디자인팀은 여기어때의 프로덕트와 인터널 전반에서 시각적 일관성을 만들어가는 팀이에요. 브랜드의 방향성과 사용자 경험이 하나의 톤으로 전달될 수 있도록, 제품 그래픽부터 사내 커뮤니케이션 디자인까지 통합적인 비주얼 아이덴티티를 고민하고 있어요.

이번에는 그 일환으로, 여기어때만의 개성과 철학을 담은 비주얼 에셋을 새롭게 제작했어요. 현재는 2D, 3D, 인물표현까지 확장해가며, 하나의 일관된 시각 언어로 브랜드를 표현하려고 해요. 이번 글에서는 그 비주얼 에셋을 제작하게 된 이유와, 그 과정에서 어떤 고민과 시도가 있었는지 함께 이야기해보려고 해요.

비주얼 에셋을 제작한 이유가 무엇인가요?

첫 번째 이유는 여기어때가 성장하면서 브랜드 일관성이 점점 더 중요해졌기 때문이에요. 여기어때는 외부 커뮤니케이션, 내부 커뮤니케이션, 그리고 프로덕트 화면 등 다양한 접점에서 사용자를 만나고 있어요. 이 모든 영역에서 하나의 ‘여기어때다움’을 전달하기 위해, 시각적으로 통합된 기준이 필요하다고 느꼈어요. 그래서 플랫폼 팀은 “여기어때 하면 어떤 비주얼이 떠오를까?”를 꾸준히 고민했고, 그 결과 지금의 비주얼 에셋 체계를 만들게 되었어요. 홈 화면 그래픽을 시작으로 범위를 조금씩 넓혀가면서, 우리만의 시각적 언어와 철학도 점점 견고하게 다듬고 있어요.

두 번째 이유는 효율성과 접근성을 높이기 위해서예요. 공통적으로 자주 사용하는 그래픽 자산을 미리 만들어 두면 누구나 쉽게 가져다 쓸 수 있고, 중복된 요청이 줄어들어요. 실제로 비주얼 에셋 파일을 만든 이후에는 디자이너 뿐만 아니라 마케터나 개발자도 같은 자산을 빠르게 활용할 수 있게 되었어요. 그 덕분에 브랜드 이미지의 일관성을 유지하면서도, 업무 속도와 생산성이 함께 좋아졌어요.

여행과 관련된 비주얼 에셋부터 제작했다고 들었어요,

이유가 궁금해요.

여행과 관련된 비주얼을 먼저 제작한 건, 우리 서비스의 정체성을 가장 명확하게 드러낼 수 있는 출발점이라고 판단했기 때문이에요. 여기어때는 OTA 서비스로서 ‘여행’이라는 주제가 브랜드의 핵심 언어이고, 이를 시각적으로 정의하는 것이 아이덴티티를 구축하는 중요한 과정이었어요.

실제로도 기존에 그래픽이 자주 사용되는 지면을 살펴보면, 프로모션 페이지에서는 여행, 할인, 혜택, 쿠폰 등과 같은 주제가 가장 자주 등장했고, 프로덕트 내에서도 유사한 맥락의 비주얼이 반복적으로 쓰이고 있었어요.

인터널 디자인에서도 채용과 온보딩 과정을 여행에 비유하는 등 ‘여행’은 이미 여러 영역에서 공통적으로 사용되고 있었죠. 또한, 여행이라는 주제는 단순히 ‘장소’나 ‘사물’로만 표현되지 않고, 여정, 감정, 이동 등 다양한 레이어의 메타포를 포함하고 있어요. 그래서 여행 관련 비주얼을 먼저 정리하면, 전체 그래픽 시스템의 방향과 규칙을 세우는 데 가장 효과적이라 판단했어요.

그다음에는 실제 사용 빈도와 필요도를 기준으로 제작 범위를 확장했어요. ’여행’을 시작점으로 삼고, ‘랜드마크’, ‘할인 및 혜택’, ‘이동수단’, ‘음식과 자연물’ 등 자주 활용되는 주제들을 우선순위에 따라 차근차근 제작할 수 있었어요.

UX Center 디자이너들을 대상으로 UT를 진행하셨더라고요. 그 이유 또한 궁금해요.

비주얼 에셋을 만드는 과정에서 UT(Usability Test)를 적용한 이유는 , 우리 조직 안에 자리 잡은 디자인 검증 문화를 비주얼에도 자연스럽게 확장할 수 있다고 보았기 때문이에요. UX Center는 그동안 UT와 사용자 리서치를 기반으로 많은 UX를 검증해왔고, 이러한 프로세스가 비주얼 작업에도 충분히 효과적으로 적용될 수 있다고 판단했어요. 그래픽 역시 사용자 경험을 구성하는 중요한 요소이기 때문에, ‘잘 만들어졌는지’뿐 아니라 사용자가 실제로 어떻게 받아들일지를 테스트하는 과정이 필요했어요.

UT 대상자로는 UX Center의 디자이너들을 선택했어요. 이들은 프로덕트를 직접 만들고 매일같이 사용하는 사람들인 만큼, 여기어때 서비스에 대한 이해도가 높고 비주얼이 브랜드와 프로덕트 맥락에 잘 맞는지 가장 객관적으로 판단해줄 수 있는 집단이었거든요. 그렇게 우리는 제작한 2D·3D 비주얼을 격주 단위로 공유하며, 브랜드 이미지와의 조화, 각 요소의 명확한 인지 여부 등을 지속적으로 검증할 수 있었어요. 테스트 과정에서 “이건 (코어밸류인) 라이블리가 잘 적용된 사례 같아요. ”, “이 그래픽은 보편적으로 사용하는 메타포는 아닌 거 같아요.” “Stroke를 사용한 기준이 있나요? 그래픽 마다 굵기가 달라서 일관성이 떨어져요.” 같은 의미있는 피드백이 오가며 비주얼 언어는 점점 더 풍부해졌고, 팀 간 협업의 즐거움도 자연스럽게 커졌어요.

비주얼 에셋은 어떤 원칙을 가지고 있나요?

비주얼 에셋은 여기어때의 세 가지 핵심 가치인 Lively, Simple, Scalable을 바탕으로 디자인했어요. 이 세 가지는 우리가 시각적으로 어떤 감정을 전달하고 싶은지, 또 어떤 방식으로 일관된 경험을 만들어갈지를 보여주는 기준이에요.

Lively는 ‘생동감 있는 경험’을 뜻해요. 여기어때는 사용자의 경험을 중요하게 생각하기 때문에, 모든 오브젝트에 약간의 각도나 움직임을 주어 다음 동작을 예상할 수 있는 역동성을 담으려고 했어요. 또 따뜻한 색감과 비비드한 톤을 함께 사용해서 친근하고 즐거운 분위기를 느낄 수 있도록 했어요.

Simple은 ‘간결하지만 개성 있는 디자인’을 의미해요. 그래픽은 선, 원 같은 기본 도형에서 출발한 형태들을 기반으로 제작했어요. 불필요한 요소를 덜어내고, 명확한 형태로 구성해 단순하면서도 브랜드의 개성을 살린 디자인을 구현했어요.

Scalable은 그래픽이 다양한 환경에서도 자연스럽게 확장될 수 있도록 설계했어요. 2D와 3D, 디지털과 인쇄물, 모바일과 웹 등 어떤 매체에서도 형태와 비율이 일정하게 보일 수 있도록 고민하면서 작업을 했어요. 그래서 새로운 그래픽이 더해져도 전체적인 시각 언어의 흐름은 유지되려고해요.

그럼, 여기어때 비주얼 스타일은 어떤 기준으로 설계되었나요?

Fundamentals of Shape

여기어때의 핵심 가치인 Lively, Simple, Scalable을 시각적으로 표현한 2D 그래픽 시스템은 여기어때 로고에서 시작돼요. 로고의 특징 중 하나인 기하학적인 형태를 기반으로 만들어졌으며, 모든 그래픽은 기본적인 기하학적 도형에서 출발해요. 이 도형들을 변형하거나 일부 자유곡선을 더해, 여기어때만의 유연하고 따뜻한 시각 언어로 확장했어요.

Metaphor

메타포를 활용할 때 가장 중요한 건 전달하려는 기능, 목적, 혹은 특징을 명확하게 강조하는 것이에요. 그래픽의 비주얼 요소가 단순한 장식이 아니라, 사용자에게 의미를 전달하는 ‘시각적 단서’로 작동할 수 있도록 했어요.

Description Layering

그래픽의 묘사와 메타포의 디테일을 풍부하게 만들기 위해, 최소 세 단계 이상의 묘사 레이어를 컬러의 차이로 표현했어요. 두 가지 색상만 사용할 경우 그래픽의 밀도가 약해지고 형태가 지나치게 단순해질 수 있기 때문이에요. 컬러의 차이를 단계적으로 더함으로써, 묘사의 깊이와 완성도를 높이고 그래픽이 더 생동감 있고 풍부한 인상을 줄 수 있도록 디자인했어요.

3D Modeling

모델링은 물체의 고유한 특징을 균형 있고 조화롭게 표현하는 과정이에요. 형태를 단순화하면서도, 재질감과 구조적인 완성도를 잃지 않도록 세심하게 작업했어요. 스탬프 오브젝트를 예시로 들면 둥근 엣지와 매끄러운 표면으로 부드럽고 친근한 인상을 주고, 적색과 흑색의 대비를 통해 여기어때만의 생동감 있는 톤을 강조했어요. 각도와 비율, 라운드의 깊이까지 꼼꼼히 조정해 단순한 형태 속에서도 브랜드의 캐릭터가 자연스럽게 드러나도록 했어요.

디자이너들이 더 잘 찾고 더 많이 활용할 수 있도록 여러 가지 방법을 고민해오신 걸로 알고 있어요. 어떤 접근을 해오셨는지 소개해주실 수 있을까요?

에셋을 더 쉽게 찾을 수 있도록

플랫폼팀은 800개가 넘는 비주얼 에셋을 제작해 두었지만, 잘 활용되지 않으면 의미가 없다고 생각했어요. 특히 처음 사용하는 사람들은 필요한 그래픽이 어디에 있는지 찾기 어려울 수 있다고 판단했어요. 그래서 피그마 라이브러리에서 검색이 잘 되도록 에셋마다 유의어나 연관어를 description에 등록해, 누구나 쉽게 원하는 자산을 찾을 수 있도록 했어요.