제로베이스 PM 스쿨 수강생의 아티클 스터디입니다.
Main issue :
게슈탈트라는 단어는 '전체로서의 형태'라는 뜻을 가진 독일어로,
사람은 전체 이미지를 각 부분들 사이의 상호 관계와 맥락 속에서 지각한다는 뜻
→ 부분 혹은 요소의 의미가 고정되어 있지 않고 이들이 속한 전체에 따라 달라진다는 것
SO, 게슈탈트 이론은 패턴 지각에 있어 전체와 부분의 전체성과 통합성을 강조
근접성 (가까운 것끼리 묶어서 지각하기) : 형태를 지각할 때 거리가 가까운 요소들을 하나로 묶어 지각하려는 경향을 의미
→ 사람들은 이미지를 볼 때 가까이 있는 물체에서 서로 연관성을 찾고,
이웃해 있는 요소들과 그렇지 않은 요소들을 구분 지으려 함
SO, 서로 연관성 있는 내용들을 카테고리라이징하는 작업 필요
EX)
- 가장 위, 주력 메뉴를 표현한 텍스트들 사이에 일정한 거리를 두어 메뉴들끼리 구분
- 메가 메뉴에서는 서비스들을 ㄱ부터 z까지 배열하고 한 섹션당 7~8개씩 나눔
유사성 (비슷한 것끼리 묶어서 지각하기) 형태를 지각할 때 형태, 크기, 입체, 방향, 색 등 시각적으로 비슷한 요소들끼리 묶어 지각하려는 경향
크기>모양>색상 순서대로 유사성의 인상을 높이는 데 중요한 역할
+ 타이포, 아이콘, 그림자, 질감 등을 활용해 부가적인 인상을 형성 가능
→ 따라서 디자이너는 명암과 크기에 있어 중요도의 차이를 두어 시각적 위계를 명확히 하고, 기능이 같은 버튼은 비슷하게, 다른 버튼은 다르게 디자인해야 함.
WHY? 서로 다른 역할을 하는 기능들이 비슷하게 디자인되어 있으면 사람들이 서비스를 이해하는 데 쉽게 혼란을 겪을 수 있기 때문
ex) 쿠팡의 좌측 내비게이션은 색상을 활용한 유사성의 원리 내포
→ 같은 메뉴에는 버튼 및 폰트 색상, 레이아웃 색상 동일하게
cf. 다른 메뉴에는 개별적인 색상을 부여하여 섹션을 명확히 구분
ex) 드리블의 회원가입 페이지
→ 인풋 필드의 디자인을 통일 & 클릭을 유도하는 버튼에는 “핑크색” 색상을 부여해 인풋 필드와 구분
+ 약관들에는 텍스트에 색상을 부여해 사용자가 해당 페이지를 쉽게 이해하고 사용
폐쇄성 (닫힌 것을 하나로 묶어서 지각하기) 형태를 지각할 때 애매한 부분들을 하나의 형태로 묶어 지각하려는 경향을 의미
ex) 로딩바&스피너 → 빈 부분이 있어도 사용자들은 이를 보고 쉽게 전체 형태를 지각 가능
연속성의 원리 (선이나 곡선을 따라 나열된 요소들을 하나로 묶어서 지각하기) 사람은 중간에 끊기는 대상보다 연속적으로 부드럽게 직선이나 곡선을 이루는 시각적 요소들을 더 잘 인지하는데, 이러한 형태 지각 경향을 의미
ex) 리스트 디자인 → 여러 개의 아티클들이 연속적으로 배치 되면, 중간에 라인 등 다른 요소가 가로막더라도 사용자는 그것을 하나의 그룹으로 인식
전경과 배경의 원리 (전경과 배경을 지각하기) 형태를 지각할 때 물체나 모양으로 보이는 부분을 전경으로, 그 이외의 부분을 배경으로 지각하려는 경향
→ SO, 화면에서 전경과 배경이 명확하지 않으면 사용자가 페이지에서 어떤 부분이 중요한지 알기 어려워 서비스를 이용하는 데 혼동
ex) 앱의 정상 작동을 방해하는 오류가 났을 때나 사용자의 작업, 결정 또는 확인이 필요한 중요 정보를 제공할 때 사용됨.
→ 사용자의 인지적 자원 중에서 가장 높은 우선 순위를 차지해야 하므로, 모달창을 가장 전경에 띄우고 뒤에 음영처리를 하여 원래 서비스 이미지를 모두 배경 처리
*제로베이스 PM 스쿨 수강생의 아티클 스터디 중 일부입니다.
*수강생의 소중한 자산으로 저작권법에 보호를 받아 무단 전재, 복사, 배포 등 사용을 금지합니다.
