Design Guide
UX/UI Guide
UX 와 UI 는 자주 섞여 쓰이지만 다른 일입니다. 둘의 차이, 화면 설계의 기본 원칙, 그리고 멤버 전용 실무 체크리스트.
UX 와 UI, 무엇이 다른가
UX · 경험
왜·무엇을·어떤 순서로. 목표를 쉽게 이루게 하는 흐름.
UI · 표면
어떻게 보이고 만져지는가. 화면의 모양과 동작.
| 관점 | UX | UI |
|---|---|---|
| 질문 | 목표를 쉽게 이루는가? | 버튼·색·간격이 명확한가? |
| 다루는 것 | 흐름·정보 구조·시나리오 | 레이아웃·타이포·색·컴포넌트 |
| 산출물 | 와이어프레임·플로우·리서치 | 시안·디자인 시스템·스타일 |
| 성공 기준 | 전환율·이탈률·완료 시간 | 일관성·가독성·심미성 |
UX 는 '길을 잘 냈는가', UI 는 '그 길이 잘 보이고 걷기 좋은가'.
기본 원칙
일관성
같은 동작은 같은 모양·위치·반응으로.
시각적 계층
크기·색·간격으로 중요도를 표현.
여백
그룹을 나누고 호흡을 주는 도구.
피드백
클릭·로딩·성공·실패에 즉각 반응.
단순함
더하기보다 덜어내기.
접근성
대비·키보드·포커스·대체 텍스트는 기본.
실무 체크리스트
항목을 눌러 체크하세요. 카테고리별로 정리한 출시 전 점검 목록입니다.