Work

예약솔루션 디자인 템플릿

yiseo

Aug 25, 20242y ago

1. 어떤 문제가 있었는가?

테이블매니저는 자사의 예약 솔루션을 여러 파트너사와 제휴하여 서비스하고 있었습니다. 하지만

→ 뚜렷한 기준이 없었기에 매 번 새로운 디자인 결과물 도출
→ 원본을 각자의 해석으로 개발하여 효율성 하락

이라는 문제점을 가지고 있었고, 코어 가이드의 부채와 커뮤니케이션 비용이 떨어지지 않아 물 빠진 독에 한정된 리소스만 들이붓는 상황이었습니다. 따라서 디자인 가이드를 정립하여 개발 및 디자인 리소스를 줄이고 일관성있는 UI를 전달하고자 했습니다.

2. 어떤 방법을 사용했는가?

•

가이드 체계는 Material Guidelines, Adobe International design을 참고했으며, 예약 시스템 UI의 모든 요소들을 해부하여 아래 이미지와 같은 구조도로 표현할 수 있었습니다.

•

화면의 가장 작은 단위를 foundation, 각기 다른 foundation이 모아진 Elements, 하나 이상의 Elements로 이루어진 Modules을 합쳐component로 규정하였습니다.

파트너사 예약 솔루션 foundation

3. 어떻게 해결했는가?

① 아토믹 시스템으로 체계화하기

foundation : Color & Typography

다수의 파트너사와 연동하기 때문에 이를 돕기 위해 미리 제작된 UI와 컬러 팔레트가 필요합니다.

•

테이블매니저가 제공하는 UI의 기본 골격을 맞추고 gray Scale, Semantic colors외에 파트너사에서 원하는 브랜드 컬러를 지정하면 해당 컬러가 적재적소에 일괄적으로 적용되도록 구성했습니다.

•

서체는 디바이스에 최적화할 수 있는 서체를 적용하였습니다.

Elements

Elements 단일로 사용하지 못하는 최소 단위의 블록입니다.
Button, icon, input box, Forms, Spinner 등이 여기에 해당됩니다.

Modules

Modules은 하나 이상의 Elements로 만들어진 블록입니다. 여기에는 Bottom navigation, Card, Carousel, Modal등이 포함됩니다.

② 효율적으로 사용하고 관리하기

Variants를 사용하여 효율적으로 동작시키기

•

가장 복잡한 컴포넌트도 직관적으로 구성할 수 있도록 Variants로 설계 시스템을 구성합니다.

•

각각의 컴포넌트 별로 Properties, state를 구성하고, 필요에 따라서는 토글로 만들어 완성된 UI에서도 빠르게 구조를 바꿀 수 있도록 하였습니다.

빠르게 적용하고 범용적으로 사용할 수 있도록

•

Button, Modal, Input 등 용도에 맞는 이름을 지어 컴포넌트 계층을 구조화합니다.

•

바로가기 키를 사용하여 새 UI를 탐색하거나, 미리 보기를 사용하여 올바른 컴포넌트를 쉽게 찾거나, 특정 컴포넌트를 빠르게 검색할 수 있습니다.

또한 예약 솔루션 디자인 가이드는 여러 파트너사와 연동하기 때문에 하나의 체계가 여러 프로젝트에 적용되어야 합니다. 따라서 가이드 파일을 퍼블리시한 다음 개별 파트너사 파일에 에셋을 적용하여 범용적으로 사용할 수 있도록 하였습니다.

이렇게 정리된 디자인 가이드는 여러 파트너사와 함께한 프로젝트에 동일하게 적용됩니다.

4. 회고

디자인 파일로만 정리하다 보니 꼼꼼하게 보지 않으면 이 역시 오류가 날 수 있음을 깨달았습니다.
다음에 이런 기회가 있다면 컴포넌트를 코드화 해서 정리하여 더 체계적인 가이드를 만들어보고 싶습니다.

Subscribe to 'yiseo'

Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to 'yiseo'!