Essay
보이는 논리: 시각적 위계와 사용자 여정
Brewed on 2025년 11월 24일
디자인은 장식이 아니라 설계다
코드를 짤 때 논리(Logic)가 필요하듯, 디자인에도 논리가 필요하다. 이번 대규모 업데이트의 핵심은 “방문자의 시선을 어떻게 유도할 것인가?” 였다.
1. The Dark Zone: 쉼표 찍기
메인 화면에 새로 추가된 ‘The Matcha Course’ 섹션은 과감하게 어두운 쑥색(bg-matcha-900)을 사용했다.
밝은 톤 일색이던 페이지 중간에 무거운 색상을 배치한 이유는 ‘시각적 환기’ 때문이다.
- Light (Intro) → Dark (Navigation) → Light (Content)
이런 리듬감은 사용자가 지루함을 느끼지 않고 스크롤을 내리게 만든다. 또한, 어두운 배경 위에서 하얗게 빛나는 카드들은 “이곳이 중요한 이정표”라는 것을 직관적으로 알린다.
2. Interaction: 반전(Invert)의 미학
정적인 사이트에 생동감을 불어넣는 건 마이크로 인터랙션이다. 네비게이션 카드에 마우스를 올리면(Hover) 색상이 반전되도록 설계했다.
- 기본: 흰색 카드 (가독성)
- 호버: 쑥색 카드 (몰입감)
“당신이 이것을 선택했습니다”라는 피드백을 색상의 변화로 확실하게 전달하는 것이다.
3. Flow: 순서가 곧 스토리
헤더 메뉴의 순서도 바꿨다.
기존에는 Tasting이 Brewing보다 앞에 있었지만, 논리적으로 맞지 않았다.
재료(Ingredients)를 준비하고 → 차를 우려내고(Brewing) → 맛을 본다(Tasting)
이 순서가 자연스럽다. 메뉴의 배치를 바꾸는 것만으로도 이 블로그가 지향하는 **‘과정 중심의 사고’**를 전달할 수 있다.
마치며
단순히 “보기에 좋게” 만드는 것이 아니라, “의도대로 읽히게” 만드는 것. 그것이 Matcha Logic이 추구하는 디자인의 방향성이다.