⏤게슈탈트 UI 디자인 원칙 하늘의 구름을 보고 익숙한 동물이나 물체를 닮은 모양을발견한 적이 있는가? 구름 덩어리를 보는 것만으로 왜,어떻게 이런 연관성을 갖게 되는지 궁금한가?그것은 모두 뇌의 작동 방식 때문이다.뇌는 항상 과거 경험이나 시각적 패턴을 비교하고연결하여 세상을 이해한다.이것은 모양과 형태를 인식하고, 정보를 그룹화하고,큰 그림을 그리기 위해 간격을 채우는 방식인 것이다.뇌가 어떻게 작동하는지 이해하면 주어진 상황에서가장 효과적인 시각적 요소를 결정하는 데 도움이 된다.이를 사용하여 인식에 영향을 미치고 주의를 집중시켜행동에 변화를 일으킬 수 있다. 또한 목표 지향적으로문제를 해결하고 직관적 디자인이 가능하다. “훌륭한 디자이너란 심리학이 시각적으로 수행하는 중요한 역할을 이해한다. 누군가가 당신의 디자인을 보면어떨까? 당신이 공유하는 디자인에 그들의 마음은 어떻게 반응할까?”—Autodesk의 브랜드 콘텐츠 전략가, Laura Busche 시각 디자인과 심리학은 밀접하게 연결되어 있고서로 영향을 미칠 수 있다는 것은 분명하다.게슈탈트 원칙은 이러한 연결을 이해하는 데 도움이 된다. ⏤게슈탈트란?게슈탈트(독일어로 형태, 모양)는 1920년대 독일심리학자들이 개발한 시각적 인식 원리의 개념이다.그것은 "전체는 부분보다 더 큰 것으로 인식된다"는이론을 기반으로 한다."전체는 부분의 합이 아니다."— 커트 코프카 ∙ 출현 현상게슈탈트 원칙은 특정 조건이 적용될 때사람들이 시각적으로 인식하는 방법을 설명한다.사람들은 일반적으로 윤곽이 잡힌 형태를 먼저식별하는 경향이 있다. 우리의 뇌는 세부적인 것보다단순하고 잘 정리된 물체를 더 빨리 인식한다. ∙ 구상화사람은 사물의 일부가 없어도 알아볼 수 있다.뇌는 우리가 보는 것을 기억에 저장된 친숙한 패턴과일치시키고 그 차이를 채운다. ∙ 다중 안정성사람들은 모호한 대상을 여러 가지 방식으로 해석한다.우리의 뇌는 확실성을 추구하여 한 관점을 더 우세하게 보고다른 관점은 쉽게 보지 못할 것이다. ∙ 불변성사람들은 회전, 배율 및 평행이동과 관계없이 간단한 물체를인식할 수 있다. 뇌는 서로 다른 모양도 서로 다른 관점에서인식할 수 있다. ⏤UI 디자인의 게슈탈트 원칙1. 근접성서로 가깝게 배치된 요소는 멀리 배치된 요소보다 더관련이 있는 것으로 인식된다. 이러한 방식으로 서로다른 요소는 개별 요소가 아닌 그룹으로 표시된다. 1-1. 근접성 원칙은 UI 디자인에 어떻게 적용되는가?UI 디자인에서 유사한 정보를 그룹화하고 콘텐츠를구성하며 레이아웃을 정리함에 있어 근접성 원칙을사용할 수 있다. 이는 시각적 커뮤니케이션과 사용자경험에 긍정적인 영향을 미친다.원칙에 따라 관련된 항목 및 카테고리는 서로 근접하게배치해야 하고 관련없는 항목은 멀리 배치해야 한다.또한 여백은 사용자의 눈을 의도한 방향으로 이동시키는대비효과 역할을 한다. 여백은 시각적 하이어라키와정보 흐름 및 화면 플로우를 읽기 쉽고 스캔하기쉽도록 한다. 그럼으로 사용자가 목표를 더 빨리달성하고 콘텐츠를 더 깊게 파고들 수 있도록 도와준다.검색, 카드, 갤러리 및 배너에서 목록, 본문 텍스트 및페이지에 이르기까지 거의 모든 곳에 근접성 원칙을적용할 수 있다. 2. 공통 영역동일한 영역 내에 배치된 요소는 그룹화된 것으로 인식된다. 2-2. 공통 영역 원칙은 UI 디자인에 어떻게 적용되는가?공통 영역 원칙은 그룹화와 콘텐츠 구성에는 도움이 될 수있지만 콘텐츠를 분리하거나 한 부분을 강조시킬 수 있다.하지만 명확한 계층 구조를 읽을 수 있고 검색율과홍보율을 높인다. 공통 영역 원칙은 선, 색상, 모양 및그림자를 사용하여 상호 작용이나 중요성을 나타낼 수 있다.좋은 공통 영역 원칙의 예는 카드 UI 패턴이다.서로 다른 정보가 하나로 표시되는 직사각형의 카드가정보를 효율적으로 전달한다. 3. 유사성유사한 성격을 갖는 요소는 유사한 성격을 갖지 않는요소보다 더 관련이 있는 것으로 인식된다. 3-2. 유사성 원칙은 UI 디자인에 어떻게 적용되는가?우리는 서로 유사한 요소를 그룹화 또는 패턴으로인식하는 경향이 있다. 또한 그것들이 같은 목적을수행한다고 생각할 수도 있다. 유사성은 그룹 내에서개체를 구성 및 분류하고 같은 의미 또는 다른 의미로연결하거나 같은 기능 또는 다른 기능과 연결하는 데도움이 된다. 요소를 유사한 것으로 인식도록 만드는방법에는 여러 가지가 있다. 색상, 크기, 모양, 질감,치수 및 방향의 유사성이 포함되며 일부는 더 강력하게작용한다. (예: 색상 > 크기 > 모양)유사성을 적용하면 그 요소는 나머지 요소와는 다르게강조될 수 있다. 이를 '변칙'이라고 하며 대비 또는시각적 가중치를 만드는 데 사용할 수 있다.이로 특정 콘텐츠로 사용자의 관심을 유도할 수 있다. 4. 폐쇄성요소는 하나의 형태나 그림으로 인식된다. 폐쇄성은요소가 불완전하거나 일부가 포함되지 않은 경우에도인식되는 것을 말한다. 4-2. 폐쇄성 원칙은 UI 디자인에 어떻게 적용되는가?우리의 뇌는 적절한 양의 정보만 제공되어도 알아서간극을 채우고 통합된 전체를 만들어 결론에 도달한다.이를 사용하면 정보를 전달하는 데 필요한 요소의 수와복잡도를 줄여 디자인을 더욱 심플하게 만들 수 있다.폐쇄성은 시각적인 복합도를 최소화하고 메시지직관적으로 전달하여 미니멀한 개념으로 정보를전달하는데 도움이 된다. 특히 Iconography에서폐쇄성 원칙을 사용할 수 있다. 여기서 단순함은의미를 신속하고 명확하게 전달하는 데 도움이 된다. 5. 대칭성요소의 대칭은 거리에 관계없이 함께 속해 있는 것으로인식되는 경향이 있어 견고함과 질서를 느끼게 한다. 5-2. 대칭성 원칙은 UI 디자인에 어떻게 적용되는가?대칭은 단순하고 조화로우며 시각적으로 즐겁다.우리의 눈은 세상을 이해하기 위해 시각적으로질서와 안정을 찾는다. 대칭은 정보를 빠르고 효율적으로전달하며 중요한 것에 집중할 수 있도록 도와준다.시각적 대칭은 보다 역동적이고 흥미로운 경향이 있지만약간 둔하고 정적일 수도 있다.다른 대칭 디자인에 비대칭 요소를 추가하면 개성으로관심을 끌 수 있다. 예를 들어 사용자의 관심 또는 사용자의행동을 유도해야 하는 곳에 적용하는 것으로 적절한 양의비대칭은 대칭과 함께 디자인에서 중요한 요소이다.포트폴리오, 갤러리, 제품 디스플레이, 목록, 탐색, 배너및 콘텐츠가 많은 페이지에 대칭을 사용하는 것이 좋다. 6. 연속성연속적인 선이나 부드러운 곡선으로 배열된 요소는무작위로 배열되거나 거친 선으로 배열된 요소보다더 관련이 있는 것으로 인식된다. 6-2. 연속성 원칙은 UI 디자인에 어떻게 적용되는가?우리의 눈은 연속된 선을 따르며 인식한다.선이 매끄러울수록 더 통합된 모양으로 본다.우리의 눈은 연속성을 통해 방향과 움직임을 해석하므로요소를 정렬할 때 부드럽운 움직임과 흐름을 도와가독성을 높일 수 있다.연속성 원칙은 그룹화된 시각 정보를 강화하여 질서를만들고 다양한 콘텐츠를 통해 사용자의 시선을 유도및 안내한다. 연속성의 끝은 콘텐츠의 종료를 무언으로알리고 사용자로 하여금 새로운 시각적 콘텐츠에 주의를기울일 수 있도록 한다. 행과 열의 선형 배열은 연속성의좋은 예다. 메뉴 및 하위 메뉴, 목록, 제품 배열, 캐러셀,서비스 또는 프로세스∙진행률 표시에서 사용할 수 있다. 7. 방향성같은 방향으로 움직이는 요소는 다른 방향으로 움직이는요소나 전혀 움직이지 않는 요소보다 더 관련이 있는 것으로인식된다. 7-2. 방향성 원칙은 UI 디자인에 어떻게 적용되는가?요소가 얼마나 멀리 또 얼마나 다르게 보이는지에관계없이 함께 움직이거나 변경되면 그 요소들은관련된 것으로 인식된다. 이 효과는 다른 시각적요소에 의해 움직임이 이미 암시된 경우에 발생할수 있다. 방향성 원칙은 정보를 같은 방향으로 시간과속도를 그룹화하고 연결한다.방향 움직임의 중단은 사용자를 특정 요소나 기능으로안내한다. 또한 다른 그룹이나 상태 간의 관계를 설정할수도 있다. 확장 가능한 메뉴, 아코디언 메뉴, 툴팁,제품 슬라이더 스크롤 및 스와이프에서 방향성 원칙을사용할 수 있다. ⏤결론사용자 인터페이스 디자인은 심미성과 화려한그래픽이 전부가 아니다. 그보다는 주로 통신 기능,성능 및 사용자 편의성에 관한 것이다.게슈탈트 원칙은 항상 현재 적용되어이러한 목표를 달성하는 데 도움이 된다.사용자에게는 즐거운 경험을,비즈니스에는 큰 성공을 가져다준다. [기사 발췌 : Medium.com -Written by Eleana Gkogka]