logo
Albamon
Web & Mobile Site
Guide Renewal Project
  • Date 2022. 08. 30
  • Client JOBKOREA
Project Goal 사용자 경험 일관화

변화하는 비지니스 환경대응과 기술 기반의 알바몬으로 전환하기 위해 구조의 효율화, 개인회원 사용성 개선,
모바일 중심으로 전환을 통한 화면 및 기능의 공동 사용 추구, 사용자 경험 일관화로 사용성 개선 목적에 맞는 디자인 시스템 개발을 통해 “일관성”과 “확장성” 그리고 업무와 커뮤니케이션의 “효율성”을 목표로 프로젝트를 진행했습니다.

아토믹 디자인

가장 작은 단위의 컴포넌트 단위를 원자로 설정하고, 이를 바탕으로 상위 컴포넌트를 만들어 디자인 요소 및 코드 재사용을 최대화하는 방법으로 디자인 가이드를 구축했습니다. 상위 컴포넌트는 순서대로 분자(Molecules), 유기체(Organisms), 템플릿(Templates)으로 가며 최종적으로는 페이지를 관리하는 아토믹 디자인 시스템은 “일관성”과 “확장성” 그리고 업무와 커뮤니케이션의 “효율성”을 가져옵니다.

  • ATOMS
  • MOLECULES
  • ORGANISMS
  • TEMPLATES
  • PAGES
새로 정립된 디자인 전략을 기반으로 다음과 같은 디자인 원칙을 수립하였습니다.
통일된 디자인을 통해 일관된 경험을 제공
UI기준을 통일하여 커뮤니케이션 시간을 단축
중복되는 컴포넌트를 제거하고 디자인 요소 재사용을 통해 효율성을 강화
UI/UX Concept 효율적이고 명확한 가이드를 통해
어떠한 환경에서 든지 일관된 경험으로
안정감있는 서비스를 제공하는 것을 목표로 하였습니다.

Use case를 분석하고 서비스 별 UI를 통일시켜 PC web, Mobile web, APP에서 일관된 사용자 경험을 제공하였습니다.
디자인 요소를 컴포넌트(Component)화하고 운영효율을 극대화하기 위해 use case에 따른 공통 컴포넌트를 사용하였습니다.

일관된 UI경험을 제공

체계적인 컴포넌트 기반의 디자인 시스템을 통해 효율적이고 통일된 경험을 제공하고자 했습니다.
각각의 컴포넌트는 UI의 가장 기본적인 모양과 색을 구성하는 코드로 변환이 가능해서, 다양한 페이지에 일관되게 사용될 수 있도록 구축되었습니다.

Color system
  • #FF501B
  • #171717
  • #6A6A6A
  • #9E9E9E
  • #B8B8B8
  • #D2D2D2
FONT system
  • 알바몬 Pretendard
  • Bold

    가나다라마바사아자차카타파하
    1234567890+-?!
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz

  • Medium

    가나다라마바사아자차카타파하
    1234567890+-?!
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz

  • Regular

    가나다라마바사아자차카타파하
    1234567890+-?!
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz

ICON
MULTI Component
Design Concept 서비스의 중요도에 따라 강약을 구분하고
전략을 담은 기본에 충실한 디자인으로
알바몬이 가지고 있는 브랜드의 특성을
명확히 하고자 했습니다.

브랜드가 가지고 있는 본연의 이미지를 해치지 않도록 컬러의 사용을 최소화하고,
컬러의 명도와 채도를 다르게 사용하여 컬러를 '색'이 아닌 인지요소로 사용하여 콘텐츠 간의 구분을 명확하게 했습니다.
카드형 UI, 디바이더 사용 등 콘텐츠 간의 구분을 통한 각 정보의 주목성을 높였습니다.

명확한 브랜드 아이텐티티

동일한 컴포넌트의 일관된 사용은 신뢰할 수 있는 브랜드라는 느낌을 줄 수 있습니다.
각각의 컴포넌트에 각자의 브랜드의 색깔을 가질 수 있게 UX글쓰기로 목소리를 주고, 브랜드 고유의 컬러 이용과 여러 시각적 요소로
숨 쉬고 움직이는 플로우, 패턴을 만드는 과정을 통해 브랜드 고유의 특성을 명확하게 유지하는 것을 중점으로 하였습니다.

본 Casestudy에 구성된 디자인은 프로젝트 당시 제안했던 디자인 시안과 가이드이며, 실제 구현된 버전과는 다릅니다.
  • Client job korea
  • Date july .2022
  • Service PC WEB, MOBILE WEB
  • Site www.albamon.com