여기어때가 비주얼 일관성을 지키는 방법, 여기어때 룸서비스 🍽️

Framer를 활용한 여기어때 그래픽 자산 아카이브 웹사이트 제작기

여기어때 룸서비스를 소개합니다! 🌟

이번에 소개할 내용은 여기어때의 리소스 공유 웹사이트 <여기어때 룸서비스(이하 ‘룸서비스’)> 입니다!

지난 🔗브랜드 아이덴티티를 담은 3D 그래픽 개발 방법아티클에서도 소개했듯이, 여기어때는 브랜드 아이덴티티를 담은 그래픽 아트워크를 개발해 브랜딩에 적극적으로 활용하고 있어요.

그동안 브랜드 디자인팀 내에서는 실무 툴과 연동이 쉬운 어도비 클라우드를 활용해 그래픽을 공유하고 있었는데요. 여기어때 내 여러 팀에서 그래픽 자산 활용에 대한 문의가 늘어나면서, 일관된 브랜드 경험을 제공하기 위해 브랜드 디자인팀 내부 공유에서 전사 직원으로 공유 범위를 확장하게 되었어요.

그래서 여기어때의 모든 구성원이 쉽게 접근할 수 있으면서도 신규 그래픽을 효율적으로 공유하기 위한 방법으로 여기어때만의 그래픽 자산 아카이브 웹사이트, ‘룸서비스’가 탄생하게 되었죠.

🎉룸서비스 소개

링크만 있으면 여기어때 구성원뿐만 아니라 협력사에서도 그래픽 소스와 로고 가이드 등 그래픽 자산을 일관성 있게 활용할 수 있어, 여기어때 브랜딩 결과물의 상향평준화도 기대할 수 있는 여기어때 룸서비스!

이 <룸서비스>라는 이름은 어떻게 탄생했을까요?

사이트의 이용 목적을 고려하여 ‘여기어때 리소스 홈페이지’로 명명할 수도 있었지만, 브랜드의 속성과 연관된 키워드를 사용하여 여기어때 구성원들이

그래픽 자산을 사용하는 과정에서도 여기어때만의 브랜드 아이덴티티를 경험할 수 있으면 했습니다. 그래서 목적성(여기어때의 브랜드 자산 가이드 공유 및 확인, 리소스 다운로드)과 브랜드 연관성(여행, 숙박 플랫폼 브랜드 여기어때)을 고려해 여러 단어를 선별하고 조합하는 과정을 거쳤어요.

그 결과! 체크인한 숙소에서 이용하는 편리한 룸서비스처럼, 여기어때에 체크인한 모든 구성원들이 필요할 때 브랜드 리소스를 편리하게 사용할 수 있는 플랫폼이라는 의미를 담아 <여기어때 룸서비스>라는 이름이 탄생하게 되었죠!

룸서비스라는 이름에 걸맞게 브랜드 디자인팀에서는 비주얼 브랜딩의 시작부터 끝까지 일관되고 편리한 브랜드 경험을 제공할 수 있도록 매달 정기적으로 새로운 그래픽 소스를 제작하여 업데이트 하는 등 호텔의 프론트 데스크와 같은 역할도 맡고 있답니다.

아, 여기어때 임직원분들 누구나 새로운 소스를 요청하거나 룸서비스와 관련된 의견을 전달할 수 있는 웹사이트 하단의 <프론트 문의하기>가 있으니 언제든 편하게 문의주세요! 최상의 비주얼 서비스를 제공하겠습니다🛎️

여기어때 룸서비스 메인 이미지

룸서비스에는 여기어때 서비스 관련 그래픽들이 업로드되어 있는데요.

서비스 탭에는 2D부터 2.5D, 3D, 그리고 아이콘 등 그래픽 형태별로 선분류를 하고, 그 안에서 다시 한 번 카테고리로 세분화하여 사용 목적에 따라 그래픽을 쉽게 찾을 수 있도록 했어요. 특히 2D / 2.5D / 3D는 같은 카테고리로 구성되어 있어서 각 그래픽의 스타일을 쉽게 비교하여 그때그때 무드에 따라 원하는 소스를 다운로드할 수 있다는 장점이 있죠.

아이콘 탭에는 앱 아이콘뿐만 아니라 여기어때 잘난체 폰트에 포함되어 있는 딩뱃도 업로드 되어있습니다. 그동안 잘난체 딩뱃 사용에 필수인 오픈타입/글리프 기능이 없어 아쉬웠던 분들을 위해 폰트가 아닌 ‘딩뱃 그래픽’만 다운 받을 수 있도록 별도로 생성했다는 사실…! 어때요, 감동이죠? 😉

그래픽 뿐만 아니라 여기어때 CI & BI, 여기어때 잘난체 폰트, 서비스 로고까지 함께 업로드되어 있어 여기어때의 모든 브랜드 자산을 한눈에 확인하고 필요한 소스를 다운받아 사용하기 편리한 룸서비스! 실제로 룸서비스를 오픈하고 가장 크게 와닿았던 장점은 브랜드 리소스 필요시 별도의 검색이나 요청 없이 필요한 소스를 바로 다운받아 사용할 수 있다는 점이었어요.

여기어때 룸서비스 브랜드 에셋 페이지

여기어때 룸서비스 2D 그래픽 페이지

🛠룸서비스 제작기

#제작툴, 프레이머

룸서비스는 프레이머라는 툴을 활용해 만들어졌어요.

프레이머(Framer)는 화면 드로잉부터 애니메이션, 페이징, 스크롤 등 디지털 화면의 디자인에 필요한 모든 기능을 제공하고 코딩 없이 빠르게 화면 구현이 가능한 디자인 툴이에요. 많은 기업에서 프레이머로 제작한 웹사이트를 보면 퀄리티 높은 웹사이트 제작이 가능하다는 점을 알 수 있어요. (2023 프레이머 어워드)

제작툴로 프레이머를 선택한 이유를 간략히 정리해보자면 다음과 같습니다.

1. 개발 리소스 없이 디자이너가 웹사이트를 제작할 수 있다.

작업자가 원하는대로 “코딩 없이” 웹사이트 제작이 가능하다는 점이 프레이머의 장점이자 큰 이유였어요. 또한 Figma와 유사한 툴이어서 Figma를 사용해 본 디자이너라면 바로 사용할 수 있고, 다양한 플러그인과 기능을 제공하고 있어 인터랙티브한 UX와 반응형 웹페이지도 제작 가능하다고 해요.

2. 퍼블리싱 및 운영이 쉽다.

룸서비스는 웹사이트를 오픈 한 이후에도 매달 신규 그래픽 소스를 업데이트하며 운영할 계획으로 퍼블리싱 과정이 쉬워야 했고, 프레이머는 작업 후 퍼블리시 버튼 하나만 누르면 언제든지 쉽게 업데이트가 가능하다는 점이 좋다고 생각했어요.

프레이머는 새로 접하는 신규 툴이었지만 실무에서 Figma를 사용하고 있어 비교적 빠르게 전체 기능을 숙지할 수 있었고, 프레이머에서 제공하는 튜토리얼과 커뮤니티를 통해 여러 기능을 스터디 하고 응용해가며 직접 만들어가는 재미가 있었어요.

#컴포넌트 활용

룸서비스는 원하는 그래픽 소스를 쉽게 찾아 다운 받는 것이 주요한 목적이기 때문에 그래픽이 정말 ‘잘’ 보이는 형태의 웹사이트를 제작해야 했어요.

프레이머를 활용해 기능적인 측면과 디자인적인 측면을 최대한 충족할 수 있도록 페이지 레이아웃부터 그래픽 배치, 카테고리 구분, 그래픽 다운로드 방법 등등 정말 다양한 부분을 고려했고, 웹사이트의 전반적인 디자인을 먼저 잡은 후 프레이머에서 바로 작업을 진행했어요.

프레이머의 수많은 기능 중에 ‘컴포넌트 기능’을 유용하게 사용했는데요, 웹페이지에서 반복적으로 사용되는 카테고리 메뉴, 타이포, 컬러 등의 디자인 시스템들을 컴포넌트로 만들어 모든 화면에 공통으로 적용되도록 했죠.

페이지 레이아웃을 잡을 때 스크린 안에서 그래픽이 1순위로 잘 보일 수 있도록 그래픽을 제외한 부가적 요소들을 가능한 최소화하는 과정에서 그래픽 소스 다운로드 버튼에 컴포넌트 기능을 적용했던 것이 작업 효율을 극대화하는데 많은 도움이 되었어요.

별도의 다운로드 버튼 없이 그래픽을 누르면 다운로드할 수 있도록, 비활성 시 그래픽/텍스트가 없는 투명한 상태에서 마우스 오버 시 ‘download’ 텍스트와 함께 썸네일 이미지가 딤 처리되어 보이고, 클릭 시 설정해둔 url로 연결되어 다운로드 받을 수 있도록 다운로드 과정을 그래픽이 돋보이도록 설계했죠. 덕분에 그래픽이 ‘잘’ 보이는 페이지 레이아웃은 물론이고 직관적으로 누구나 쉽게 사용할 수 있는 뛰어난 사용성을 확보할 수 있었답니다.

프레이머 다운로드 컴포넌트

#그래픽 카테고리와 웹페이지 디자인

룸서비스에는 수많은 그래픽 소스가 업로드돼 있어요. 그중에서도 원하는 그래픽 소스를 쉽고 빠르게 찾아 다운받기 위해서는 메뉴 구성이 중요했는데요.

룸서비스 사용자가 원하는 그래픽을 찾을 때 어떤 순서로 찾아야 쉽고 빠르게 찾을지를 먼저 고민했습니다. 예를 들어 2D 자유의여신상 그래픽이 필요한 경우, [그래픽 스타일 선택(2D) > 건물/랜드마크 카테고리 메뉴 > 자유의여신상 그래픽 다운로드]의 3단계 프로세스가 그래픽을 선택하기까지 넘어가는 페이지 수와 단계도 가장 적고 메인 메뉴도 간략하게 구성되어 원하는 그래픽을 쉽고 빠르게 찾는 데 도움이 될 수 있다고 생각했어요.

그래서 메인 메뉴는 폰트나 로고, 브랜드 컬러 등 브랜드 에셋을 모아둔 <Brand Guide>, 그래픽 사용에 대한 유의사항이나 외부 공유 방법 등 룸서비스 이용 안내하는 <Service Guide>, 그리고 <2D> / <2.5D> / <3D> / <ICON>의 그래픽 스타일 탭까지 크게 6가지 메뉴로 구성했죠. 추가로 <2D> / <2.5D> / <3D> / <ICON> 탭 안에서 사용 목적에 따라 최대 8개의 카테고리로 세분화해, 상황이나 특성에 따라 필요한 이미지를 쉽게 찾아 사용할 수 있도록 했어요.

한 가지 더! 룸서비스의 백그라운드 컬러는 다크 그레이인 것을 볼 수 있는데요. 서로 다른 컬러와 형태를 가지고 있는 그래픽 이미지를 가장 잘 보여줄 방법을 고민하다가 저명도 저채도가 적용된 이미지부터 고명도 고채도 컬러가 적용된 이미지까지 두루두루 잘 보여주는 배경 색상으로 다크 그레이만 한 것이 없다고 생각했죠.

룸서비스 메뉴 카테고리

프레이머는 높은 사용성으로 웹사이트를 빠르게 구축하고 바로바로 반영할 수 있다는 점이 엄청난 장점으로 느껴진 툴이었어요. 작업이 끝나면 ‘퍼블리시 버튼’ 하나로 퍼블리싱을 완료할 수 있다는 점도 매달 신규 그래픽 업데이트와 페이지 유지 보수를 해야하는 입장에서 굉장히 편리하다고 느끼고 있답니다. 코드를 활용한다면 프레이머에서도 보다 더 디테일한 작업이 가능하다고 하니 다음엔 코드를 배워서 활용해 볼까 해요! 🤓

룸서비스는 기획부터 디자인, 그래픽 자산 아카이빙, 그리고 웹 퍼블리싱에 이르기까지 모든 과정을 브랜드 디자인팀에서 직접 작업해 만든 웹사이트여서 애착이 남다른데요. 앞으로 룸서비스를 통해 일관된 브랜드 자산을 공유함으로써 ‘여기어때다움’을 함께 공감하고 여기어때 구성원 모두가 한 방향을 바라볼 수 있기를 기대해봅니다!

아참! 사이트가 사내 그룹웨어를 통해 오픈된 이후 많은 분이 룸서비스 사용하고 계시는데요, 룸서비스는 여기어때의 브랜드 자산을 활용하여 여기어때 구성원을 대상으로 만들어진 웹사이트이기 때문에 여기어때 브랜드 커뮤니케이션 외에 다른 용도로는 사용이 불가하다는 점~ 잊지 말아주세요😉

그럼 앞으로 꾸준히 업데이트될 룸서비스를 기대해 주세요!

감사합니다❣️

Written by

BX Designer Molly(몰리)

BX Writer Ron(론)