UI의 기본을 말하는 게슈탈트 이론
Design Text
전체는 부분의 합과 다르다 - 커트 코프카
게슈탈트 이론이란?
게슈탈트(Gestalt)는 ‘통합된 전체'라는 뜻의 독일어로써, 게슈탈트 현상이란 ‘전체는 부분의 합과 다르다'라고 정의할 수 있습니다. 또한 연구학적으로 사람들이 시각적 요소를 그룹으로 구성하고 정보가 많이 없는 패턴을 찾는 방법에 대한 목적의 연구이며, 기본적으로 알아야 될 우리가 알아야 될 UI이론이며, 게슈탈트 이론의 2가지 법칙(대칭 및 비대칭의 법칙, 연속성의 법칙)을 소개하려 합니다.
대칭 및 비대칭의 법칙
대칭 구조는 요소들을 동일한 구성과 위치로 배치하는 것으로, 사용자의 시야를 방해하지 않습니다. 하지만 비대칭 구조는 특정 요소로 시선을 유도하기 위해 사용됩니다.
이미지 출처 : https://uxpro.cc/publications/using-gestalt-laws-of-perceptual-organization-in-ui-design/
인터페이스 화면 내에서 각 요소 간의 구성은 사용자에게 효과적인 상호작용을 만드는데 도움이 됩니다. 대칭과 비대칭을 통한 레이아웃을 올바르게 사용함으로써, 균형적이며, 역동적인 디자인을 만들 수 있으며, 필요한 정보를 강조할 수 있습니다.
와이어프레임 - 대칭
와이어프레임 - 비대칭
와이어프레임 - 하이브리드대칭 디자인의 예시
SK 드파인 웹사이트를 예로 들어, 프레임 중앙에 브랜드 아이덴티티를 전달할 수 있는 메인 카피와 함께 비주얼 이미지를 반전시켜, 카피라이팅과 비주 얼간의 강약 대비를 활용하여, 웹 아이덴티티를 표현하고 있습니다.
이미지 출처 : SK드파인비대칭 디자인의 예시
국내 최대 비즈니스 데이터 플랫폼 COOCON 웹사이트를 디자인 요소를 왼쪽 하단에 배치하여, 콘텐츠 요소와 비주얼간의 강약을 깊게 표현하여, 콘텐츠를 더욱 강조하고 있습니다.
이미지 출처 : COOCON대칭과 비대칭 디자인을 같이 활용한 예시
Pinterest의 로그인 화면을 보게 되면, 대칭과 비대칭을 모두 사용하여 페이지를 구성한 것을 확인할 수 있습니다. 너비가 동일한 6개의 열에 각기 다른 세로 값을 가진 이미지 카드를 배치하여 균형 잡힌 레이아웃과 역동적인 비주얼을 표현하여, 적절한 Dim을 활용하여, 중요도가 높은 로그인 화면을 중앙에 배치하여 시선의 주목도를 표현하고 있습니다.
이미지 출처 : pinterest연속성의 법칙
연속성의 법칙은 무의식적으로 정해진 방향으로 콘텐츠 요소를 배치하는 것을 말합니다. 이러한 방식은 우리의 뇌가 특정 요소를 채우고 분리된 부분만이 아니라, 전체적인 그림을 보고 연속성을 만드는 방법입니다.
이미지 출처 : https://www.toptal.com/designers/ui/gestalt-principles-of-design연속성의 법칙은 디자인의 계층구조를 명확하게 하는 데 도움이 됩니다. 이를 활용하여 디자이너는 사용자에게 상당한 영향을 미치면서 사용자에게 특정 목표로 미묘하게 유도할 수 있습니다.
연속의 법칙 - 퀵메뉴 활용연속성의 법칙 디자인의 예시
연속성의 법칙은 다양한 화면에서 볼 수 있지만, 가장 일반적으로 확인할 수 있는 곳은 커머스 사이트입니다. 하단의 NIKE 사이트를 분석하였을 때, 깔끔하게 정렬된 제품 이미지들의 연속성은 사용자의 시선을 유도하고 그룹화하며, 관련 제품을 명확하게 전달합니다.
이미지 출처 : NIKE결론
게슈탈트 이론은 정보를 빠르고 쉽게 전달할 수 있는 사용자 인터페이스의 목표를 달성하는 데 도움이 될 것입니다. 좋은 디자인은 사용자를 혼동시키지 않고, 시각적으로 최상의 표현을 해야 됩니다. 이러한 규칙을 통해 디자이너는 브랜드 인지도와 사용자 친화적인 비즈니스를 주도하는 깔끔한 디자인을 만들기 위해 게슈탈트 이론을 한 번쯤 알아두면 스스로에게 좋은 영향을 끼칠 것입니다.
참고문헌
1. https://sympli.io/blog/guide_symmetry_asymmetry_in_ui_design/
2. https://speckyboy.com/asymmetrical-split-screens-web-design/
3. https://ux360.design/symmetry-design-principle/
4. https://www.shopify.in/partners/blog/asymmetrical-design
6. https://uxplanet.org/improving-your-designs-with-gestalt-principles-figure-ground-26429a3eccad
7. https://uxplanet.org/improving-your-designs-with-gestalt-principles-figure-ground-26429a3eccad
위 글은 UX Collective에서 업로드한 아티클을 번역한 내용이며, 저작권 관련하여 원작자와 협의 후 Dseign Text에 업로드된 점 참고 부탁드립니다.
원문 출처 : https://medium.com/devpixel-blog/use-of-gestalt-theory-in-interface-design-199413bbe14a
