Share
Sign In
Work
❇️
year: 2021
at: tablemanager
role: project lead, platform design
teammate: only one
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. 회고
디자인 파일로만 정리하다 보니 꼼꼼하게 보지 않으면 이 역시 오류가 날 수 있음을 깨달았습니다.
다음에 이런 기회가 있다면 컴포넌트를 코드화 해서 정리하여 더 체계적인 가이드를 만들어보고 싶습니다.
Yi
Subscribe to 'yiseo'
Welcome to 'yiseo'!
By subscribing to my site, you'll be the first to receive notifications and emails about the latest updates, including new posts.
Join SlashPage and subscribe to 'yiseo'!
Subscribe
👍
Other posts in 'Work'See all
yiseo
최소한으로 앱 삭제 개선하기
yaer: 2022 at: doctornow role: design lead, product design, QA teammate: 1 PO, 1 FE, 1 BE, 1 PD 1. 어떤 문제가 있었는가? 7월을 기점으로 안드로이드 사용자를 대상으로 구글 플레이 스토어 리뷰에서 ‘상단바에서 만보기를 끄고 싶다’, ’만보기 권한 어떻게 설정하나요.’ ‘걸음 수 끄는 옵션 만들어주세요.’ 등의 만보기 기능 개선에 대한 리뷰가 지속해서 올라왔습니다. 2. 그것이 왜 문제였는가? 부정적인 리뷰는 얼마든지 올라올 수 있습니다. 하지만 만보기 때문에 앱을 삭제한다는 리뷰가 간간히 올라왔고 리뷰를 남기는 사람 이외에 하루에 2천 명 정도씩 앱 삭제가 이루어지고 있었기 때문에 당시 굉장히 시급한 문제로 떠올랐습니다. 3. 이 문제를 지금 해결하는 것이 왜 중요한가? 이 당시 전사 목표는 MAU와 리텐션을 높이는 것이었습니다. 만보기로 추측되는 앱 삭제는 목표에 방해가 되기 때문에 시급히 처리해야 했습니다.
yiseo
시스템으로 디자인 통일성 지키기
year: 2022 at: doctornow role: platform design teammate: 4 PD 1. 시작하게 된 배경은? 제품 개선이 동시 다발적으로 이루어지고 주기가 빠르다보니 디자인 리소스를 자주 변경해야 하는 상황이었습니다. 표준 규칙이 존재하지 않아 매번 다른 요소가 생성되다 보니 UI의 일관성이 떨어졌습니다. 디자인 작업 만큼이나 싱크를 맞추는 데 상당한 시간이 허비되고 있었습니다. 앞서 제작된 그리고 제작한 UI 요소들의 관리가 제대로 이루어지고 있지 않다보니 관리하는데 어려움이 있었습니다. 이렇다 보니 개발자는 매번 새로운 코드를 생성하게 되어 비효율적으로 개발하고 있었습니다. 2. 시스템을 만들어야 하는 이유 디자인 시스템을 만들어놓았을 때의 이점은 상당합니다. 반복되는 컴포넌트 제작에 소비되는 시간을 아껴서 사용자에게 더 집중할 기회를 주고 제품의 일관성을 유지할 수 있도록 도와줍니다. 디자인 시스템은 그 명칭 때문에 디자이너들을 위한 시스템이라고 오해될 수 있지만 개발자 입장에서도 모든 UI 요소에 대한 완전한 참조 가이드를 제공받기 때문에 개발자에게 도움이 될 수 있습니다. 3. 우리의 목표는?
yiseo
닥터나우 보이스앤톤 가이드
year: 2022 at: doctornow role: design lead, platform design, project lead teammate: pnly one 1. 실행하게된 배경은? 닥터나우의 앱과 웹 모든 곳에서 일관되지 않은 보이스앤톤이 사용자에게 전달되고 있었습니다. 또한 제품을 만들 때마나 글쓰기에 관한 규칙이 없다보니 고민하는 시간에 리소스가 많이 들어갔습니다. 2. 그것이 왜 문제였는지? 언어적 요소와 비언어적 요소가 일관되고 상호보완적일 때, 사용자는 서비스의 성격에 대한 일관된 그림을 그릴 수 있기 때문에 인터페이스가 똑똑하고 재미있으며 설득력 있다고 느낍니다. 또한, 서비스의 메시지를 더 잘 이해하고신뢰하며 서비스가 요구하는 행동을 하게 됩니다. 하지만 앞선 배경에서 볼 수 있듯이 닥터나우는 유저에게 격식을 차릴 때도 있고 그렇지 않을 때도 있습니다. 또한 한 메시지 안에서도 불협화음이 일어나고 있었습니다. 이처럼 닥터나우에서는 보이스앤톤과 UX writing에 대한 명확한 기준이 없었고 문구를 작성할 때 개인의 기준에 맞춰 작성하다 보니 일관성이 떨어졌습니다. 사람의 건강을 책임지는 헬스케어 플랫폼에서의 신뢰감을 주는 것은 기본자세입니다. 일관된 문구의 명문화를 통해 고객 만족도를 높일 필요가 있었습니다. 3. 목표는 무엇이었는지? 모든 프로젝트를 진행할 때 목표가 가장 중요하다고 생각합니다. 명확히 설정한 목표를 통해 프로젝트의 방향을 정해 나아가고, 선택이 필요한 순간에 빠른 판단을 할 수 있기 때문입니다. 아래와 같이 다음과 같은 목표를 정했습니다. 일관된 마이크로카피를 작성할 수 있도록 해주는 보이스앤톤 디자인을 정의한다. 이를 통해 모든 채널에서 유저에게 일관된 메시지와 브랜드 경험을 제공한다.