큰 프로젝트에서 디자인 일관성을 지키는 방법

글. 소피(김경희) / UX Designer

부제: 여기어때 웹, 새집 짓고 이사 가기까지

여기어때는 앱뿐만 아니라 웹 서비스도 제공하고 있다는 사실 알고 계셨나요?

얼마 전까지 여기어때 웹은 이런 모습이었죠.

리뉴얼 전 여기어때 웹

기존 여기어때 웹은 사실상 오랫동안 개선이 되지 않아 앱의 경험과 차이가 큰 상태였고 기술적으로, 사용자 경험 측면에도 많은 개선이 필요했어요.

리뉴얼된 여기어때 웹

그리고 2023년 말, 새로운 웹으로 거듭나게 되었답니다.

작년 초, 많은 도전과 기회를 안고 시작하여 약 80명의 실무자들이 1년 정도의 시간을 들여서 새로운 여기어때 웹을 론칭했어요.

집을 올 리모델링 하듯 여기어때 웹의 완전한 변화를 만들게 되었어요. 이 프로젝트는 여러 명의 디자이너가 함께 작업하고 아이디어를 내며 만들어 나갔는데요. 프로젝트의 규모가 큰 만큼 디자인 일관성을 유지하는 것이 더 중요해졌어요. 여러 디자이너가 참여하고 다양한 아이디어가 발산되는 상황에서 어떻게 하면 프로젝트 전반에 걸쳐 일관성 있는 디자인을 유지할 수 있을까요?

이번 글에서는 웹 개편처럼 규모가 큰 프로젝트에서 디자인 일관성을 유지하기 위해 시도한 방법에 대해 이야기해보려 해요.

디자인 일관성을 위한 출발점

프로젝트가 시작되고 모든 디자이너, PO가 모여 워크숍을 열어 프로젝트를 종합적으로 이해하고, 각 화면별 구성 요소와 플로우에 대한 공통된 이해를 형성했어요. 초기 워크숍은 프로젝트의 목표를 같은 선상에서 이해하고 하나의 프로덕트를 만들기 위해서 가장 중요한 단계예요. 공통된 이해가 바탕이 되어야지 전체의 일관성을 맞출 수 있기 때문이죠.

그리고 여기어때 UX원칙을 기반으로 웹 개편 프로젝트의 목적에 맞춰 디자인 원칙을 Simplicity, Scalability, Continuity로 구체화하고 이를 함께 공유했어요. 이러한 디자인 원칙은 디자인 일관성을 유지하는 데 중추적인 역할을 한 것 같아요.

여기어때 웹 디자인 원칙

반응형으로 디자인하기

모바일 기기부터 데스크톱까지 다양한 화면 크기에서 사용자들이 일관된 경험을 느낄 수 있도록 반응형으로 디자인을 진행했어요. 반응형 디자인은 그리드 시스템을 정의하고 브레이크 포인트를 설정하는 것이 중요해요. 일관된 그리드 패턴을 유지하여 디자인함으로써 사용자가 다양한 페이지를 탐색하더라도 익숙한 레이아웃이 유지되도록 하여 일관된 느낌을 줄 수 있어요.

메뉴의 구조별로 공통적인 디자인 패턴이 몇 가지로 정리가 되었고 동일한 패턴을 가진 페이지들은 같은 레이아웃과 규칙으로 적용될 수 있도록 했어요.

여기어때 웹 디자인 시스템 구축하기

여기어때 웹 디자인 시스템

여러 디자이너 간의 협업을 용이하게 하기 위해 통합된 디자인 시스템을 도입했는데요. 여기어때에는 이미 YDS(여기어때 디자인 시스템)가 존재하고 있었지만 모바일 기반으로 정리되어 있어서 웹의 환경과 사용성을 고려한 보완이 필요했어요. 색상 팔레트, 텍스트 스타일, 아이콘 등과 같은 기본적인 파운데이션 요소는 YDS와 일관성을 맞추되 데스크톱 환경까지 고려했을 때 크기 조정 또는 사용성 보완이 필요한 컴포넌트에 대해서 추가적으로 정리하는 방식으로 진행했어요.

또한, YDS WEB에서는 여러 페이지에서 공통으로 사용되는 카드 컴포넌트나 템플릿 컴포넌트들까지 시스템에 포함하면서 조금 더 일관된 UX/UI를 만들 수 있었어요. 이렇게 공통된 요소들을 시스템에 통합함으로써, 디자인 변경이나 업데이트가 필요한 경우에도 더 효율적으로 대응하며 작업할 수 있었어요.

주기적인 리뷰와 피드백 주고받기

여러 명의 실무자가 디자인 일관성을 가져가기 위해서는 지속적인 노력이 필요한데요. 프로젝트에 참여하는 디자이너분들과 싱크 미팅을 가졌어요. 이 미팅을 통해 각 디자이너는 작업한 내용을 공유하고, 고민하고 있는 부분이나 페이지는 다르지만 일관성 이슈가 있는 부분들에 대해서 함께 논의했어요. 논의 과정에서 결정한 부분들은 이후에 작업하는 페이지들에서도 공통적으로 적용할 수 있도록 정리하면서 지속적으로 일관성을 지키려고 노력했어요. 처음에는 매일매일 진행하다가 점점 규칙들이 정립되고 디자인을 완료하면서 주에 몇 번, 그러다 점차 주에 1번씩으로 점차 자연스럽게 줄여갔던 것 같아요.

큰 규모의 프로젝트에서 디자인 일관성을 지키는 것이 쉽지 않았지만 이러한 몇 가지 방법들을 통해 사용자에게 일관된 경험을 제공할 수 있었다고 생각해요. 그러나 일관성을 유지하기 위한 여러 방법 중 가장 핵심은 협업인 것 같아요. 일관성을 지키기 위해 여러 가지 룰을 세팅하고 정의한다고 해도 잘 공유되지 않거나 합의되지 않는다면 지속적으로 지키기 어려워요. 그렇기에 여러 디자이너가 참여하는 프로젝트에서는 자주 소통하고 디자인 방향을 공유하면서 싱크를 맞추는 것이 핵심이에요.

웹 담당 UX 디자이너들과 피드백 주고받았던 실제 화면

새로운 웹 론칭 후의 성과는?

웹 개편 이후, 웹 서비스에서 해외 숙소 거래가 가능하게 되었고, 특히 직전 동일 기간 대비 거래액이 2배 증가하는 성과를 달성할 수 있었어요. 또한 론칭 이후 진행했던 UT에서도 새롭게 구축된 웹에서는 숙소 정보가 잘 정돈되어 있어 보기 편하고, 특히 ‘간편한 결제 플로우가 좋다’라는 긍정적인 피드백을 얻을 수 있었어요.

마무리하며

웹 개편 프로젝트의 UX를 리딩하면서 많이 배우고 성장한 것 같아요. 이전 직장에서도 프로젝트를 리딩한 적이 있었지만, 이 프로젝트는 제가 여기어때에 입사한 이후 처음으로 맡은 큰 프로젝트로 새로운 경험을 많이 쌓을 수 있었어요. 이를 통해 중요한 교훈 3가지를 얻었고, 향후에 더욱 신경을 써야겠다는 깨달음이 있었어요.

먼저 프로젝트 초기에 전체 개편 방향을 먼저 시각적으로 제안하는 것의 중요성을 더욱 깨닫게 되었어요. UX 리드로서 이 역할은 매우 중요하다고 생각해요. 함께 일하는 동료들에게 전체적인 흐름을 시각적으로 보여주어 빠르게 일에 착수할 수 있도록 도와줄 수 있어요. 이는 동시에 프로젝트의 주요 이해관계자들과의 원활한 의사소통을 촉진하는 도구로 작용해요. 시각적인 표현이 있으면 개념이나 아이디어를 더 구체적으로 확인할 수 있어서 다양한 의견을 적극적으로 수렴하고, 이를 통해 의사결정이 보다 신속하게 이루어질 수 있기 때문이에요. 이러한 경험을 통해 앞으로의 프로젝트에서는 이 부분을 더욱 적극적으로 활용해야겠다고 생각했어요.

다음으로 프로젝트를 진행하는 것도 중요하지만 그 결과물을 전사 구성원들과 공유하는 것도 매우 중요하다는 교훈도 얻었어요. 론칭 일주일 전, 전사 올핸즈 시간에 웹 개편에 대한 공유했었는데요.

전사 올핸즈 발표 현장

웹 PO인 히어로(이희수님)와 함께 전사 구성원들에게 프로젝트의 핵심 내용과 숙소 예약 시연을 선보였어요. 공유의 목적은 단순히 프로젝트의 성과를 자랑하는 것뿐만이 아니라, 여러 부서에서 웹을 활용할 수 있도록 동기 부여하고 협업을 이끌어내기 위해 꼭 필요하다는 걸 알게 되었어요.

마지막으로, 협업의 중요성을 다시 한번 깊게 느꼈던 것 같아요. 무엇보다도 디자이너뿐만 아니라 PO, 개발, QA 등 관련 협업자들과 싱크를 맞추는 것이 얼마나 중요한지를 느꼈고, 서로 싱크를 맞추는 것이 더 나은 결과물을 만들어낸다는 것을 몸소 체험했어요.

이 프로젝트를 진행하면서 스스로 부족한 점도 많이 느꼈지만 새로운 경험과 교훈을 얻을 수 있었고, 이 경험을 발판 삼아 앞으로 더 많은 프로젝트를 리드할 때, 더 나은 방향으로 나아갈 수 있도록 성장하고 발전해 나가고 싶어요.

부족한 부분이 많았을 텐데 함께 적극적으로 채워주려고 했던 팀원분들께 다시 한번 감사하다는 말 전하고 싶어요.

💡 새로워진 여기어때 웹이 궁금하다면? yeogi.com

✔️ 글쓴이를 더 알고 싶다면?링크드인

편집: 이소연(Jetty) UX Writer

새로운 프로젝트를 앞두고 있다면 읽어보세요

・맨땅에 UX 헤딩하기

・ 무작정 디자인하기 보다 비즈니스부터 이해해야 해요

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