디자인 시스템의 핵심, Lithium Design System을 활용한 UI 구성 체크리스트

UI 설계가 처음이라면 막막할 수 있죠.그럴 때 필요한 게 바로 Lithium Design System입니다.

글로벌 IT 기업들이 사용하는 이 디자인 시스템은 사용자 경험을 최우선으로 고려한 UI 구성 가이드라인을 제공합니다.

이 체크리스트는 UI 설계에서 놓치기 쉬운 부분들을 빠짐없이 점검할 수 있어, 실수 없이 디자인 시스템을 적용하는 데 큰 도움이 될 거예요

 

UI 구성 체크리스트 요약

분류	체크항목	필수/권고
정보구조	3Depth 이하로 설계	권고
	메뉴가 적으면 Top Menu 방식으로 제공	권고
	메뉴가 많으면 Left Menu 방식으로 제공	권고
	Menu명은 짧게 제공	권고
	메뉴가 선택된 상태를 명확히 표시	필수
	2Depth 메뉴는 화면 위쪽 또는 왼쪽에 배치	권고
	Mobile에서는 3Depth 구조를 피하기	권고
	1Depth 메뉴는 5개 이하로 설계	권고
	3Depth 메뉴에서는 선택된 상태를 표시	필수
레이아웃	중요한 기능은 우선순위를 고려하여 배치	필수
	위치: 왼쪽 위에서 오른쪽 아래 방향으로 배치	권고
	시각적으로 부각시키는 방법을 적용	권고
	화면과 배치의 규칙을 통일성 있게 구성	권고
	한 화면에 너무 많은 기능을 배치하지 않음	권고
	반응형 UI로 PC와 Mobile 모두 지원	권고
PC Web	Header 영역에서 유틸리티 기능은 왼쪽에서 오른쪽으로 배치	필수
	Utility 기능 그룹화하여 디바이더로 구분	필수
	배너 제공 시 닫기 버튼을 추가	필수
PC Web	1Depth 메뉴가 적으면 Header 영역만 제공	권고
	로그인하지 않으면 Left Menu에 로그인 영역 제외	필수
	배너를 화면 최하단에 배치	권고
모바일 웹	헤더는 유틸리티 기능을 가장 중요한 기능으로 배치	권고
	햄버거 메뉴로 메뉴를 제공	권고
반응형 UI	Overflow 기능을 통해 유틸리티 기능을 제공	권고
	Mobile에서 메뉴와 헤더 영역을 하나의 네비게이션 바로 제공	권고

 

이 체크리스트는 웹 및 모바일 UI 구성에 대한 중요한 기준을 제시합니다.

Lithium Design System을 기반으로, 이 가이드라인을 통해 정보구조부터 레이아웃, PC 웹 및 모바일 웹의 반응형 설계까지 실수를 줄이고, 더 나은 사용자 경험을 제공할 수 있습니다.

위의 체크리스트는 단순히 "어떻게 디자인할까?"에 대한 가이드뿐 아니라, 실제로 서비스 기획자가 놓치기 쉬운 부분을 꼼꼼히 점검할 수 있는 기회를 제공해요. 이 체크리스트를 실무에서 참고하면 더 정확하고 효율적인 UI 구성을 할 수 있습니다.