Pattern library, Visual hierarchy, Focal point, 디자인 어휘 묶음

Pattern library

UI 패턴들의 모음입니다. Component library보다 추상적입니다. 코드가 아니라 언제 어떤 패턴을 쓸지의 가이드입니다.

대표 사례:

• UI-Patterns.com: 무료 공개 패턴 라이브러리.
• Mobbin: 모바일 앱 디자인 패턴 모음.
• Anti-card (Freeive): 안티 디자인 패턴 라이브러리.

Visual hierarchy

이미 다룬 개념입니다. 화면에서 어떤 요소가 가장 중요한지 시각적으로 표현하는 것입니다. 핵심 도구:

• 크기.
• 색.
• 위치.
• 여백.
• 굵기.
• 대비.

Focal point

화면에서 사용자 시선이 가장 먼저 가는 지점입니다. 회화에서 빌려온 개념입니다.

좋은 focal point:

• 한 화면에 하나만: 여러 개면 분산됩니다.
• 명확한 강도 차이: 다른 요소와 구별돼야 합니다.
• 의도된 것: 우연히 생긴 게 아니라 디자이너가 정한 것입니다.

Above the fold의 핵심에 focal point가 있어야 합니다.

Optical alignment

수학적 정렬과 시각적 정렬의 차이입니다. 사람 눈은 수학적으로 정확한 정렬을 비대칭으로 인식하기도 합니다.

예를 들어 동그라미와 사각형을 같은 높이에 두면 동그라미가 작아 보입니다. 동그라미를 살짝 크게 만들면 비슷한 크기로 인식됩니다.

큰 폰트도 마찬가지입니다. 베이스라인을 살짝 조정합니다.

바이브 메이커가 챙길 한 가지

본인 화면을 1초만 보고 무엇이 가장 먼저 보였는지 자문합시다. 그게 의도한 focal point면 OK, 아니면 디자인 재검토가 필요합니다.

관련

Visual hierarchy · Whitespace · Hero section