[내일 배움 캠프] 19일

시각적 리듬과 상태 설계를 통한 사용자 경험 최적화

1. 시각적 리듬 (Visual Rhythm)

디자인은 '꾸미기'가 아니라 '정보의 우선순위를 설계하는 시스템'이다.

컬러는 시스템이다: 브랜드 컬러보다 중요한 것은 Semantic Color(의미 체계)이다.

Primary(행동), Secondary(보조), System(성공/경고/오류)으로 역할을 분리하여 일관성을 유지해야 한다.

밀도와 여백: 여백은 디자인의 '호흡'이다. 8·16·24·40px 같은 일정한 규칙(8pt Grid)을 사용하면 시각적 안정감이 생기며, Auto Layout 활용은 선택이 아닌 필수다.

텍스트의 간결화: 스타일을 Title / Body / Caption 3단계로 고정해도 충분하다. 스타일의 개수를 늘리기보다 색상과 두께, 여백으로 변화를 주는 것이 훨씬 세련된 리듬을 만든다.

핵심 팁: 강조는 색으로, 구분은 여백으로 한다. 이 둘이 섞이면 정보의 위계가 무너진다.

2. 상태 표현 (State Design)

사용자는 멈춰있는 화면이 아니라 '상태 변화의 연속'을 경험한다.

인터랙션의 템포: 버튼의 Default → Hover → Active 변화는 미묘해도 충분하다. 10~15%의 명도 차이만으로도 사용자는 '눌림의 리듬'을 느낀다.

에러와 빈 상태(Empty State): * 오류 시나리오는 설계를 단단하게 만드는 예방주사다.

데이터가 없는 빈 화면은 단순히 비워두는 것이 아니라, '다음 행동(CTA)'을 제안하는 기회로 삼아야 한다. (예: "내역이 없습니다" → "첫 상품 등록하기")

3. 프로토타입 연결 (Interactions)

프로토타입의 본질은 화려함이 아니라 '설계 의도의 검증'에 있다.

선택과 집중: 모든 버튼을 연결할 필요는 없다. 하나의 핵심 시나리오(Happy Path)를 완벽하게 연결하는 것이 설득력이 높다.

맥락이 있는 전환: Smart Animate는 단순히 신기한 효과가 아니라, 화면 간의 관계(맥락)를 인지시키는 도구다.

행동의 근거: 사용자가 다음 화면으로 넘어갈 때, 왜 그 버튼을 눌러야 하는지 근거(안심 문구, 팁 등)를 배치하여 심리적 허들을 낮춰야 한다.

오늘의 한 줄 요약

"좋은 디자인은 눈에 띄는 것이 아니라, 사용자가 고민 없이 다음 행동으로 이어지게 만드는 자연스러운 리듬 그 자체다."