변화하는 비지니스 환경대응과 기술 기반의 알바몬으로 전환하기 위해 구조의 효율화, 개인회원 사용성 개선,
모바일 중심으로 전환을 통한 화면 및 기능의 공동 사용 추구,
사용자 경험 일관화로 사용성 개선 목적에 맞는 디자인 시스템 개발을 통해 “일관성”과 “확장성” 그리고 업무와 커뮤니케이션의 “효율성”을 목표로 프로젝트를 진행했습니다.
가장 작은 단위의 컴포넌트 단위를 원자로 설정하고, 이를 바탕으로 상위 컴포넌트를 만들어 디자인 요소 및 코드 재사용을 최대화하는 방법으로 디자인 가이드를 구축했습니다. 상위 컴포넌트는 순서대로 분자(Molecules), 유기체(Organisms), 템플릿(Templates)으로 가며 최종적으로는 페이지를 관리하는 아토믹 디자인 시스템은 “일관성”과 “확장성” 그리고 업무와 커뮤니케이션의 “효율성”을 가져옵니다.
Use case를 분석하고 서비스 별 UI를 통일시켜 PC web, Mobile web, APP에서 일관된 사용자 경험을 제공하였습니다.
디자인 요소를 컴포넌트(Component)화하고 운영효율을 극대화하기 위해 use case에 따른 공통 컴포넌트를 사용하였습니다.
체계적인 컴포넌트 기반의 디자인 시스템을 통해 효율적이고 통일된 경험을 제공하고자 했습니다.
각각의 컴포넌트는 UI의 가장 기본적인 모양과 색을 구성하는 코드로 변환이 가능해서, 다양한 페이지에 일관되게 사용될 수 있도록 구축되었습니다.
가나다라마바사아자차카타파하
1234567890+-?!
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
가나다라마바사아자차카타파하
1234567890+-?!
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
가나다라마바사아자차카타파하
1234567890+-?!
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
브랜드가 가지고 있는 본연의 이미지를 해치지 않도록 컬러의 사용을 최소화하고,
컬러의 명도와 채도를 다르게 사용하여 컬러를 '색'이 아닌 인지요소로 사용하여 콘텐츠 간의 구분을 명확하게 했습니다.
카드형 UI, 디바이더 사용 등 콘텐츠 간의 구분을 통한 각 정보의 주목성을 높였습니다.
동일한 컴포넌트의 일관된 사용은 신뢰할 수 있는 브랜드라는 느낌을 줄 수 있습니다.
각각의 컴포넌트에 각자의 브랜드의 색깔을 가질 수 있게 UX글쓰기로 목소리를 주고, 브랜드 고유의 컬러 이용과 여러 시각적 요소로
숨 쉬고 움직이는 플로우, 패턴을 만드는 과정을 통해 브랜드 고유의 특성을 명확하게 유지하는 것을 중점으로 하였습니다.