# 예약솔루션 디자인 템플릿

> year: 2021
at: tablemanager
role: project lead, platform design
teammate: only one

![Image](https://upload.cafenono.com/image/slashpagePost/20240825/211117_oByCMHSK6KPN6uAPZB?q=80&s=1280x180&t=outside&f=webp)

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

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

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

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

![Image](https://upload.cafenono.com/image/slashpagePost/20240825/175801_Muo9oBN9mLfElXnRag?q=80&s=1280x180&t=outside&f=webp)

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

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

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

![Image](https://upload.cafenono.com/image/slashpagePost/20240825/175950_ZIV9YkxckW9qF4fUh4?q=80&s=1280x180&t=outside&f=webp)

![파트너사 예약 솔루션 foundation](https://upload.cafenono.com/image/slashpagePost/20240825/180019_sOqwkU0W36CTmHDGGn?q=80&s=1280x180&t=outside&f=webp)

# 3. 어떻게 해결했는가?

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

### foundation : Color & Typography

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

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

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

![Image](https://upload.cafenono.com/image/slashpagePost/20240825/180148_PrtoF3URaRxEh68tSF?q=80&s=1280x180&t=outside&f=webp)

### Elements

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

![Image](https://upload.cafenono.com/image/slashpagePost/20240825/180209_rWVU9uYd96bZjJFrMn?q=80&s=1280x180&t=outside&f=webp)

### Modules

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

![Image](https://upload.cafenono.com/image/slashpagePost/20240825/180228_xwxjF5Qn6bRRT3laEy?q=80&s=1280x180&t=outside&f=webp)

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

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

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

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

![Image](https://upload.cafenono.com/image/slashpagePost/20240825/180443_WQX2kxwva0GrMpeaoO?q=80&s=1280x180&t=outside&f=webp)

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

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

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

![Image](https://upload.cafenono.com/image/slashpagePost/20240825/180505_SWD0O9LnuXjHHrv3rp?q=80&s=1280x180&t=outside&f=webp)

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

![Image](https://upload.cafenono.com/image/slashpagePost/20240825/180520_YsMeBq3T2jwHSIbpDx?q=80&s=1280x180&t=outside&f=webp)

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

![Image](https://upload.cafenono.com/image/slashpagePost/20240825/180533_yQQjCBnS9Sfs5HWjLq?q=80&s=1280x180&t=outside&f=webp)

# 4. 회고

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

For the site tree, see the [root Markdown](https://slashpage.com/yiseo.md).