UX/UI 디자인에서 게슈탈트 법칙의 역할
인간의 인지를 이해하는 디자인을 위해 활용해야 할 법칙
인간이 주변 사물을 인식하는 방식에 기초한 7가지 게슈탈트 원리가 있습니다. 이러한 법칙을 경험(UX)과 인터페이스(UI)를 디자인하는 동안 사용할 수 있습니다.
각 법칙을 예시와 함께 살펴보겠습니다.
1. 근접성의 법칙 (The law of proximity)
근접성의 법칙은 "가깝거나 함께 있는 것들은 멀리 떨어져 있는 것보다 더 많은 관련성을 갖고 하나의 그룹으로 인식되는 것처럼 보인다."라고 말합니다.
아래 예에서 요소는 각각 하나의 분리된 그룹으로 표시됩니다.
Instagram: @ayushithisside.uxUX 디자인에서의 실행
근접성의 법칙은 매우 오랫동안 사용되어 왔으며 많은 곳에서 볼 수 있습니다. UX/UI에서 이 법칙을 가장 간단하게 구현하는 것 중 하나는 폼의 텍스트 필드 근처에 레이블을 배치하는 것입니다. 이는 레이블과 텍스트 필드를 하나로 인식하는 데 도움이 됩니다.
2. 유사성의 법칙 (The law of similarity)
유사성의 법칙은 "사물이 서로 유사해 보일 때 우리는 그것들을 하나로 묶고 그것들이 연관된 같은 기능을 가지고 있다고 생각하는 경향이 있다."라고 말합니다.
아래 예에서 요소의 모양은 동일하지만 색상은 요소의 기능을 구별하는 데 도움이 됩니다.
Instagram: @ayushithisside.uxUX 디자인에서의 실행
유사성의 법칙을 구현하는 것은 매우 간단하면서도 중요한 디자인 측면입니다. 여기에서는 필드와 버튼의 크기가 동일하지만 버튼의 색상이 다르기 때문에 사용자는 해당 기능이 다르다는 것을 알 수 있습니다. 모양, 색상 및 크기는 요소의 기능을 구별하는 데 도움이 됩니다.
3. 초점의 법칙 (The law of focal point)
초점의 법칙은 "시각적으로 눈에 띄는 것은 무엇이든 처음 보는 사람의 관심을 빠르게 사로잡는다."라고 말합니다.
아래 예에서는 수많은 검은색 원으로 둘러싸여 있음에도 불구하고 빨간색 사각형이 가장 먼저 눈에 띕니다.
Instagram: @ayushithisside.uxUX 디자인에서의 실행
초점의 법칙은 디자인에서 중요한 역할을 합니다. 위의 예에서 버튼의 색상이 다르면 사용자의 시선을 빠르게 사로잡는다는 것을 알 수 있습니다. 이를 통해 더 짧은 시간에 CTA(타깃)를 찾아 도달하는 데 도움이 됩니다.
4. 공통 영역의 법칙 (The law of common-region)
공통 영역의 법칙은 근접성의 법칙과 혼동되기도 합니다. “객체가 동일한 닫힌 영역 내에 위치할 때 우리는 그것들이 함께 그룹화되어 있다고 인식한다.”라고 말합니다.
아래 예에서 요소 주위의 경계는 별도의 그룹으로 동작하는 영역을 생성합니다.
Instagram: @ayushithisside.uxUX 디자인에서의 실행
공통 영역의 법칙은 모든 전자 상거래 사이트의 제품 페이지와 같은 웹 사이트에서 볼 수 있습니다. 가격대, 카테고리 등 선으로 결정되는 섹션이 있습니다. 이것들은 공통 영역의 법칙이 작용하는 몇 공간들입니다.
5. 폐쇄의 법칙 (The law of closure)
폐쇄의 법칙은 "시각적 요소의 복잡한 배열을 볼 때 우리는 인식할 수 있는 하나의 패턴을 찾는 경향이 있다."라고 말합니다.
아래 예에서 당신의 기억에서 나온 생각을 활용하면 그 그림이 축구공처럼 보입니다.
Instagram: @ayushithisside.uxUX 디자인에서의 실행
폐쇄의 법칙은 일반적으로 로고 디자인에서 더 잘 보입니다. FedEx 로고와 같이 여러분의 관찰과 기억 속에 있는 아이디어에서 오는 숨겨진 화살표 모양이 있습니다.
6. 전경-배경의 법칙 (The law of figure-ground)
전경-배경의 법칙은 "사람은 본능적으로 물체를 전경 또는 배경에 있는 것으로 인식한다"라고 말합니다. (인간이 한 번에 많은 것을 인식할 수 없기 때문에 부분적으로 주목하는 경향이 있습니다)
아래 예에는 두 레이어 사이에 오버레이나 그림자가 있어 전경 또는 배경에 있는 물체를 인식하는 데 도움이 됩니다. 마치 모달 또는 대화 상자처럼 말입니다.
Instagram: @ayushithisside.uxUX 디자인에서의 실행
전경-배경의 법칙을 실행하면 모달이나 대화 상자를 배경과 다르게 볼 수 있습니다.
7. 연속성의 법칙 (The law of continuity)
연속성의 법칙은 "선 위에 배열되거나 모양 윤곽선으로 배열된 요소는 무작위로 배치된 요소보다 더 관련성이 높은 것으로 인식된다."라고 말합니다.
아래 예에서 드롭다운 메뉴는 연속성의 법칙을 보여주는 데 가장 적합합니다.
Instagram: @ayushithisside.uxUX 디자인에서의 실행
연속성의 법칙은 내비게이션 바, 드롭다운 메뉴 등에서 확인할 수 있습니다. 위에서 사용자는 홈, 남성, 여성 등과 같은 카테고리를 이해할 수 있습니다. 더 나아가 각 카테고리에는 하위 그룹이 있습니다.
여러분, 이것으로 글을 마치겠습니다! 디자인에 대한 인간의 인식을 이해하는 데 도움이 되길 바랍니다. 각 법칙에 대한 이해를 바탕으로 사용자 중심의 디자인을 만들 수 있습니다.
내용이 흥미롭고 유용하다고 생각되신다면 박수를 눌러 주세요. 저는 항상 대화에 참여하고 있습니다.
인스타그램: https://www.instagram.com/ayushithisside.ux/
링크드인: https://www.linkedin.com/in/ayushiverma13/
