여기어때 해외여행 아이콘 디자인 이야기

글. 임지현(Jinny) / UX Desinger

<비즈니스 임팩트를 고려한 아이콘 제작기>

안녕하세요. 여기어때 Creative Lab의 UX Designer 임지현(Jinny)입니다. Creative Lab은 지난 5월 UX Center 내에 신설된 조직이에요. 진화하는 여기어때 비즈니스 방향에 맞춰 브랜드를 새롭게 정의하고, 제품과 브랜드를 관통하는 Identity와 Design System을 구축 및 관리하며, 나아가 새로운 비즈니스 기회를 제시하는 선행 디자인까지 담당하고 있습니다.

2022년은 여기어때가 해외여행 사업을 본격적으로 시작한 한 해입니다. 5월엔 항공, 7월엔 해외숙소 그리고 9월엔 해외특가 서비스를 오픈했는데요. 이에 따라 홈 화면에서는 해외여행 카테고리가 생기고, 신규 서비스 아이콘들이 추가되면서 많은 변화가 있었어요. 이번 글을 통해 지금부터 홈 화면 카테고리 아이콘의 발전 과정 및 비하인드 스토리를 차근차근 설명드려보겠습니다.

해외여행 아이콘 여정의 시작, 항공

해외여행 서비스 아이콘의 여정은 제가 인턴 시절이었던 2월, 항공 아이콘을 구상하면서부터 본격적으로 시작되었습니다. 지금의 모습과 달리, 당시의 항공 아이콘은 비행기가 두둥실 떠다니는 모션 아이콘이었습니다. 그런데 그동안 여기어때에서 국내 서비스만 제공했다 보니, 항공 카테고리 내에서 ‘국내·해외 여행이 모두 가능함’을 명확하게 인지시키는 것이 중요하다고 판단했습니다. 이에 따라 국내외를 모두 어필 가능한 항공 아이콘 시안을 다시 제작하게 되었습니다.

- A안 : 애니메이션 내에서 국내·해외 텍스트를 직접적으로 노출

- B안 : 지구본 모티브로 해외여행의 느낌을 줌

- C안 : 배경 속 지도가 움직이며 해외여행을 암시

위와 같이 총 3개의 후보를 추려냈고, 이 중 가장 직관적으로 인지 가능한 지구본 모티브의 B안이 최종 선정되었습니다. 그런데, 실제 서비스 오픈 당시에는 오른쪽 화면처럼 국내·해외 배지가 추가됐습니다. 그 사이에 무슨 일이 일어난 걸까요?

아이콘 의사 결정, A/B 테스트로 정해요

최종 아이콘 결정을 앞두고, A/B테스트를 진행하게 된 것입니다.

- 그룹 A: 국내·해외 배지 추가된 ‘항공’ 아이콘 + 상단 항공 배너

- 그룹 B: ‘국내항공’, ‘해외항공’ 아이콘 + 상단 항공 배너

- 그룹 C: ‘국내항공’, ‘해외항공’ 아이콘

위 3개의 그룹으로 A/B테스트를 진행한 결과, 최종 winner는 그룹 A로 선정되었습니다. 그에 따라 국내·해외 배지가 추가된 아이콘으로 항공 서비스가 오픈하게 되었습니다.

국내 / 해외 서비스로 구분된 홈 카테고리

항공 오픈 이후, 또 다른 고민거리가 생겼습니다. 향후 해외 서비스가 늘어나더라도, 홈 화면에서 카테고리를 확장성 있게 수용할 수 있는 구조적 해결 방안이 필요해진 것입니다.

- A안 : 3x4 레이아웃 유지 (기존 카테고리를 통합 또는 제거)

- B안 : 하단 열에 아이콘 추가

- C안 : 해외여행 섹션 추가

그에 따라 위와 같은 세 가지 시안을 만들었고, 이 중 ‘해외여행 타이틀+구분선+ NEW 배지’를 통해 기존 국내 서비스와 신규 해외 서비스를 명확히 구분해주는 C안이 최종 선정되면서 홈 화면에 해외여행 섹션이 추가되었습니다. 그러면서 자연스럽게 항공 카테고리도 국내 항공 / 해외 항공으로 나뉘게 되었습니다.

해외숙소 아이콘, 디자인 방향성 설정부터 다양한 시안 작업까지

그 다음 단계로는 해외숙소 오픈을 앞두고 있었는데요. 해외숙소 아이콘 디자인을 시작하기에 앞서, 기존 홈 아이콘 카테고리를 분석하고 그룹핑해봤습니다. 그중 숙소 카테고리에만 주목했을 때, 가구 형태 혹은 건물 외형의 아이콘을 주로 사용 중인 것을 파악할 수 있었습니다.

앞선 기존 앱 내 아이콘 분석을 통해, 해외 숙소 아이콘의 디자인 방향성을 아래와 같이 3가지로 설정해봤어요.

1. 다양한 숙소 건물 외관 — 국내와 달리 해외 숙소는 세부 카테고리 구분 없이 다양한 숙소가 포함됨 (주로 호텔/리조트)

2. 해외여행 메타포 — 지구본, 비행기 아이콘, 여행가방, 캐리어 등

3. 해외 숙소 가구 — 아이코닉한 디자인의 조명, 의자 등

해외 숙소 아이콘 디자인 시 지속적으로 고려해야 하는 부분들을 키워드로 정리한 디자인 원칙도 3가지로 세워보았습니다.

위와 같은 디자인 방향성 및 디자인 원칙을 기반으로, 100가지가 넘는 다양한 아이콘 디자인 시안들이 탄생했습니다.

수많은 시안 중 ‘건물 외형’의 아이콘, 그중에서도 이국적인 느낌의 호텔들이 ‘해외 숙소’임을 연상하기에 가장 적합하다고 판단했습니다. 그리고 해외여행 메타포 중에서는 ‘비행기’가 건물 외형과 잘 어울리면서 기존 항공 아이콘과의 통일성도 가져갈 수 있었습니다.

이러한 판단에 따라 위 3가지의 모션 아이콘으로 시안이 정리되었습니다. 최종적인 의사 결정을 위해 아이콘 제작 과정 및 디자인 시안을 공유하는 리뷰 미팅이 마련되었고, 3가지 시안 모두 긍정적인 반응을 얻을 수 있었는데요. 그중에서도, C안이 비행기가 해외 느낌을 직관적으로 보여주고, 항공 아이콘과도 통일성이 느껴진다’는 점에서 다수의 동의를 얻으며 최종 시안으로 선정되었습니다.

해외숙소 아이콘 배포를 앞두고, 국내 / 해외항공 아이콘 간의 시각적인 통일성이 필요하다는 피드백이 있어 국내항공 아이콘 또한 디자인 수정이 이루어졌는데요. 국내 / 해외항공 아이콘의 비행기 형태를 통일했고, 국내항공 아이콘의 색상은 해외항공의 하늘색과 명확히 구분되어보이도록 난색 계열의 노란색으로 변경했습니다.

심플한 아이콘 : 수차례의 시행착오 끝에 완성된 결실

항공부터 해외숙소 오픈까지, 약 5개월 간의 아이콘 대장정이 마무리되는 시점에서 회고를 해보게 되었습니다. 사실 처음에는 “항공 아이콘? 비행기 그리면 되는 거 아닌가?”, “해외숙소? 그냥 호텔 건물 그리면 되지 않나?”라는 생각으로 호기롭게 시작했던 것 같습니다. 그런데 본격적으로 아이콘을 디자인하다 보니 객기였다는 걸 알게 되었죠.

서비스가 하나씩 오픈될 때마다 숱한 시행착오를 겪으면서 홈화면 카테고리 전반이 변경되었고, 그 과정에서 몇 가지 깨달음을 얻을 수 있었습니다.

아이콘 하나만 크게 보면서 작업할 땐 괜찮아 보였는데, 모바일 화면에 적용해서 보니 예상보다 작아서 디테일들이 잘 보이지 않는 문제가 종종 발생했습니다. 그래서 작업 중간에 수시로 프로토타입 화면을 체크하는 과정이 필수적이었습니다.

또한, 정말 다양한 시안을 테스트해봐야 한다는 점을 느꼈습니다. 크기가 작은 라인 아이콘이다 보니 디테일을 예민하게 보는 것이 중요했습니다. 그리고 카테고리의 확장성을 고려하는 것도 중요했는데요. 해외숙소 오픈 이후 바로 옆에 해외특가가 오픈했을 때의 상황까지 함께 고민하면서 아이콘을 만들어야 했습니다.

‘해외숙소’ 라고 해서 무작정 호텔 건물을 그리는 것이 아니라, 기존 앱 내 아이콘 분석을 통해 ‘숙소 카테고리는 가구 형태 또는 건물 외형의 아이콘이어야겠다’는 디자인 방향성을 판단하는 과정 역시 놓쳐서는 안 되는 절차였습니다. A/B테스트를 통해 아이콘에서의 국내·해외 구분 여부만으로도 구매전환율 및 클릭률에 크게 영향을 줄 수 있다는 중요한 발견도 할 수 있었죠.

제일 중요한 인사이트를 정리하자면요

아이콘을 그릴 때는 아이콘 하나만 보는 것이 아니라

1. 해당 카테고리에 미치는 비즈니적 임팩트

2. 홈 화면 카테고리 전반의 UX

3. 향후 사업의 확장성

등 다양한 관점에서의 고려가 필수적이었습니다.

뿐만 아니라, 다양하고 디테일한 시안 작업 및 기존 아이콘 audit 및 분석을 통한 명확한 design direction 설정의 중요성 또한 간과해서는 안된다는 사실을 깨달을 수 있었죠.

이제 와서 생각해보면 당연히 고려해야하는 중요한 사항들인데, 처음에는 잘 모르고 무작정 아이콘을 보기 좋게 그리려고만 했던 것 같습니다. 5개월의 기간 동안 다양한 시도를 통해 배우며 성장한 제 자신을 발견할 수 있었습니다. 앞으로 더욱 크게 확장해나갈 여기어때의 해외여행 카테고리들 기대해주시고, 아이콘 하나하나에 담긴 고민들도 유심히 들여다봐주시길 바랄게요 :) 심플하고 편리한 여기어때 앱의 사용 경험을 위해 저희 UX디자이너들이 계속 더 고민 중에 있어요. 많은 관심 부탁드려요!

• 해외 숙소 탄생기가 궁금하다면?

그래픽: 김제린(Riny) Visual Interaction Designer

편집: 이소연(Jetty) UX Writer

*해당 글과 이미지를 인용 또는 재가공 시 출처를 꼭 밝혀주세요.