UIUX : 디자인 시스템 가이드라인 - 작업시 유의사항

 

 

 

요즘 새로운 프로젝트를 맡게 되어서 UIUX관련 정보를 정리하고 있습니다.

디자인가이드에 맞춰 컴포넌트를 만들기 전에 디자인가이드를 만들때의 유의사항을

분석하고 적립하기 위해서 아래와 같이정리해 보았습니다.

 

---

 

1.목적과 범위 구체화

[목적]

• 어떤 이유로 시스템과 디자인 원칙이 필요하다고 생각하게 되었는지
• 어떤 프로세스에서 디자인 결정이 어려운지
• 사용자 입장에서 어떤 부분이 디자인 일관성이깨지고 있는지

 

[범위]

• 어떤 서비스부터 적용할 건지
• 어떤 성격의 앱인지 (컴포넌트의 우선순위를 정하기 위해 중요)

 

2.AS-IS / TO-BE 정의하기

[AS-IS]

• 현재 브랜드/경쟁사 AS-IS분석을 통해 기능과 콘텐츠 분류
• 기능단위로 쪼개 비슷한 성격의 UI끼리 묶기 (ex 차량예약, 상담예약, 상세 콘텐츠확인 등)
• 분류된 기능별 사용 기술 정의 ( ex 예약기능(직접,전화,톡 등), 스마트키)

 

[TO-BE]

• 분석된 기능을 바탕으로 사용자 관점으로 여정 맵핑 (각 여정의 어떤 맥락에서 사용 기능인지 파악하기 위해)

 

3.주요 화면을 기준으로 컴포넌트 정의하기

• 우리 서비스/시스템은 어떤 컴포넌트를 정의할지 (Google / Apple의 컴포넌트 가이드를 참고)
• 자주사용할 컴포턴트 기준으로 가이드 정의
• 하나의 컴포넌트를 어떻게 묶고 쪼갤건지 (ex 상단 시트 - 아이콘+텍스트, 텍스트 온리, 대타이틀/소타이틀 등)
• 컴포넌트들의 명칭 통일하기
• 상태별 컴포넌트 스타일 정의하기( 클릭시, 마우스오버시, 스크롤시 등)
• 전체 컴포넌트를 아우르는 디자인 가이드 목차 잡기 (ex 타이틀, 버튼, 인풋 등)

 

---

여기까지 디자인 가이드라인을 위한 고려사항이였습니다.

 

UIUX관점을 점검하고 재확인하기 위한 포스팅으로 최대한 간략하게 핵심만 정리하였습니다.

새롭게 인지되는 사항이 있을 때마다 지속적으로 업데이트 하려고 합니다 :)