{3줄 요약}
형태는 복잡한 화면보다 먼저 읽히며 인터페이스 성격을 정하는 기본 단위예요.
원과 사각형과 삼각형은 각기 다른 인상을 주어 행동 기대를 바꾸기도 해요.
형태를 이해하면 버튼과 아이콘과 카드의 성격을 더 분명하게 설계할 수 있어요.
도형이 먼저 읽히는 이유
인간의 뇌는 복잡한 것을 보기 전에 단순한 패턴을 먼저 찾아요.
디테일보다 전체 형태를 먼저 처리해요.
그래서 인터페이스에서 형태는 빠른 인식을 돕는 가장 기본적인 시각 언어예요.
세 가지 기본 도형이 있어요. 원, 사각형, 삼각형. 각각 인식되는 방식이 달라요.
원 - 부드럽고 친근하고 안전한 느낌이에요.
소셜 미디어 프로필 사진이 둥근 이유, 카카오 캐릭터들이 둥근 이유가 있어요.
친근함을 전달하는 형태예요.
사각형 - 안정적이고 구조적이고 신뢰감이 있어요.
대부분의 인터페이스 레이아웃이 사각형 기반인 건 이 이유예요.
정보를 담는 가장 효율적인 형태이기도 해요.
삼각형 - 방향성과 움직임을 표현해요.
재생 버튼이 삼각형인 이유, 드롭다운 화살표가 삼각형인 이유예요.
"이쪽으로"라는 신호를 보내는 형태예요.
모서리의 각도가 전달하는 것
같은 사각형이어도 모서리 처리에 따라 다른 느낌을 줘요.
직각 모서리 - 딱딱하고 공식적이고 전문적인 인상이에요.
금융, 법률, 공공기관 서비스에 어울려요.
둥근 모서리 (Rounded Corner)
- 부드럽고 접근하기 쉬운 느낌이에요.
요즘 대부분의 소비자 앱이 버튼, 카드, 입력창에 둥근 모서리를 써요.
카카오, 배달의민족, 토스가 모두 이 방향이에요.
원형에 가까운 모서리 (Pill Shape)
- 더 부드럽고 현대적인 느낌이에요. 태그, 배지, 일부 버튼에 써요.
Apple iOS는 시스템 전체에서 모서리 곡률(Corner Radius)을 통일해서 일관된 시각 언어를 만들어요.
앱 아이콘, 카드, 알림창까지 같은 곡률이 적용돼요.
채우기와 선 형태
아이콘에서 자주 보이는 차이예요.
Fill (채운 형태) - 더 강하고 선명한 존재감이에요.
선택된 상태, 활성 상태를 나타낼 때 써요.
Outline (선 형태) - 더 가볍고 보조적인 느낌이에요.
비활성 상태, 보조 액션에 써요.
많은 앱의 하단 탭 내비게이션에서 이 두 가지를 함께 써요.
현재 보고 있는 탭은 채운 아이콘, 나머지 탭은 선 아이콘으로 표시해서 활성/비활성 상태를 직관적으로 보여줘요.
형태 일관성이 왜 중요한가요
제품 안에서 형태 스타일이 섞이면 어수선해 보여요.
어떤 버튼은 직각이고, 어떤 버튼은 완전 원형이고, 아이콘은 절반은 채워진 형태이고 절반은 선 형태라면
- 사용자는 같은 제품을 쓰는 느낌이 들지 않아요.
형태도 색상, 타이포그래피처럼 시스템으로 관리해야 해요.
버튼의 모서리 반경, 아이콘 스타일, 카드의 형태가 제품 전체에서 일관돼야 해요.
형태가 아이콘 설계에서 어떻게 작동하는지는 아이콘 디자인 기초에서 더 다뤄요.
관련 아티클
- 아이콘 디자인 기초 - 형태 원리를 아이콘 설계에 적용하는 방법이에요.
- 레이아웃 구조 이해 - 형태가 레이아웃 안에서 어떻게 구조를 만드는지 다뤄요.
- Grid System - 형태들을 체계적으로 배치하는 그리드 구조예요.
참고 문헌
- William Lidwell, 《Universal Principles of Design》(2003) - 형태 인식과 지각 심리의 원리를 다뤄요.
- Wucius Wong, 《Principles of Form and Design》(1993) - 형태 설계의 이론적 기반이에요.