게슈탈트 이론을 통해 만드는 UI디자인 (번역본)
UI 디자이너를 위한 실무적인 게슈탈트 이론
이 게시물은 Medium - Muzli 채널의 'Gestalt principles in UI design' 이라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했기 때문에 정확하지 못한 표현이 있을 수 있습니다.
https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965
게슈탈트 이론을 통해 만드는 UI 디자인 (Gestalt principles in UI design.)
시각적 커뮤니케이션의 마스터가 되는 방법
하늘을 볼 때 - 동물이나 사물을 닮은 특이한 모양의 구름을 본 적이 있나요? 왜 우리는 솜털 같은 덩어리나 기체등을 보는 것만으로 뭔가를 떠올리게되는걸까요? 그건 여러분의 뇌가 동작하는 방식 때문입니다.
여러분의 뇌는 항상 이전의 경험이나 시각적 패턴을 서로 비교하려합니다. 그리고 이런 내용들을 서로 연결하는 방식으로 발전해왔죠. 그래서모양과 형태를 인식하고, 정보를 분류하고, 간격을 메우는 방식으로 큰 그림을 그립니다.
현명한 디자이너가 되려는 사람들에겐, 이런 뇌의 동작방식을 이해하면 도움이 될겁니다. 이 방식은 어떤 상황에서든 효과적인 레이아웃과, 시각구조를 만드는데 도움이 됩니다. 이 방법은 목표가 명확한 문제 해결이나, 직관적 설계디자인, 사용자 인터페이스 설계에 있어서도 특히 유용합니다.
" 위대한 디자이너들은 시각적 인식 내에서 심리학이 가지는 힘을 잘 알고 있습니다. 과연 한 사람의 눈이 여러분의 디자인 결과물을 바라볼때, 어떤 반응을 만들어낼까요? 고객의 마음은 여러분이 공유하고 있는 메시지에 어떻게 반응합니까?"
- 로라 버쉬, Autodesk 브랜드 콘텐츠 전략가
시각 디자인과 심리학은 꽤나 밀접한 관계를 갖고있습니다. 이런 기반을 통해 - 오늘은 게슈탈트 이론을 기반으로 디자인 결과물과 각각의 사람에게 어떤 영향을 줄 수 있는지를 이야기해보려합니다.
게슈탈트 이론은 뭔가요? (What is Gestalt?)
게슈탈트는 1920년대 독일 심리학자들에 의해 개발된 시각적 인지방법에 대한 이름입니다. 이 내용은 "조직적으로 만들어진 구조 전체는 - 개별 부분을 합쳐놓은 '여러 부품들'이 아니라. 그보다 더 커다란 무언가로 인식된다는 이론에 기반해있습니다.
"전체는 개별 요소의 집합이 아니다"
- 로라 버쉬, Autodesk 브랜드 콘텐츠 전략가
게슈탈트 이론은 특정한 상황이 주어졌을 때, 사람들이 시각요소를 인지하는 방식을 설명해줍니다. 그 내용은 총 네가지 핵심 아이디어를 기반으로 갖고있습니다.
게슈탈트 이론의 기반요소
1. 구조를 연결시켜서 바라보는 경향 (Emergence)
사람들은 일반적으로 개별 요소가 아니라, 외곽선이나, 윤곽이 드러난 형태로 대상을 바라보는 경향이 있습니다. 우리의 뇌는 세부적인 것보다, 이 커다란 윤곽으로 물체를 인식합니다.
게슈탈트 이론의 기반요소
2. 관념(original) 을 기반으로 없는 부분을 채워내는 경향 (Reification)
사람들은 '관념적으로 당연한' 것들의 일부가 없어진 경우에 - 무엇이 없어졌는지를 인식할 수 있습니다. 사람의 뇌는 기억에 저장된 익숙한 패턴 (관념)에 맞게 부족한 것들을 메워줍니다.
게슈탈트 이론의 기반요소
3. 대상을 여러 기준으로 해석하는 경향 (Multi-Stability)
사람들은 종종 애매 모호한 물체를 여러가지 방법으로 해석합니다. 우리의 뇌는 이러한 여러 대안들 중에서 이리저리 고믾을 하게됩니다. 하지만 결과적으로는 한가지 대안이 더 지배적이되며, 다른 관점은 점차 잘 보이지 않게 됩니다.
게슈탈트 이론의 기반요소
4. 번형된 내용과 원형(original)을 동일하게 인식하는 경향 (Invariance)
사람들은 하나의 사물이 회전하거나, 크기가 변형되거나. 움직임과관계 없이 해당 물체가 동일한 물체라고 인식합니다. 우리의 뇌는 다른 시각적 상황에 대해서도 - 특정 조건만 일치한다면, 사물을 동일한 것으로 인지할 수 있습니다. (비슷한 사례로 애니메이션이나 영화 역시도 사람의 시각적 인지를 기반으로 한 것입니다.)
-
게슈탈트 이론의 4개 핵심단어가 - 너무 압축된, 불확실한 표현이라 - 맥락에 맞는 표현으로 길게 풀어서 표기하였습니다.
자, 이제 게슈탈트 이론이 UI 디자인에서 어떻게 사용되는지에 대해 이야기해보겠습니다.
UI 디자인 속 게슈탈트 이론
1. 근접한 개체들은 동일한 개체로 인식된다 : 근접성의 원칙 (Proximity)
서로 가까이 있는 시각요소들은 더 멀리 떨어져 있는 요소들보다 서로 연관된 것으로 보이게됩니다. 이런 방식을 통해, 시각적 그루핑. 그룹짓기 / 다른 요소로 보이게하기가 가능해집니다.
근접성 원칙은 UI 디자인에서 어떻게 쓰일까?
(How does the Proximity principle apply to UI design?)
-
UI를 설계할때, 근접성 원칙을 사용하면 - 유사한 정보를 그룹화하거나, 삭제하여 정보구조를 만들 수 있습니다. 이러한 레이아웃을 제대로 사용할 경우, 정보의 규격과 압축적 내용전달에 큰 도움이 됩니다.
이 원칙에 따르면 - 서로 연관된 정보들은 가까이 있어야 합니다. 반대로 관련 없는 항목은 더 멀리 떨어져 있어야 하죠. 백색 여백은 이러한 '거리'를 만들어내는 데 매우 유용한 역할을 합니다. 여백을 사용하면 시각적 계층과 정보 흐름을 높일 수 있으므로 - 가독성이나 내용확인을 더 쉽게 만들어줍니다.
우리는 내비게이션, 카드, 갤러리, 배너에서부터 목록, 본문 텍스트 및 페이지 나눔 규격에 이르기까지 - 거의 모든 곳에 근접성 원칙을 적용할 수 있습니다.
UI 디자인 속 게슈탈트 이론
2. 공통영역 내에 배치된 요소들은 그룹으로 인식된다 : 공통영역의 원칙 (Common Region)
근접성 원칙과 마찬가지로 동일한 영역에 배치된 요소들은 서로 연관을 갖고있는 그룹으로 인식됩니다.
박스 안에 들어있는 요소들은 제 아무리 배열이 달라도 하나의 그룹으로 인식됩니다
공통영역 원칙은, UI 디자인에서 어떻게 쓰일까?
How does the Common Region principle apply to UI design?
-
공통영역 원칙은 디자인에서 특히나 자주 사용되는 방식입니다. 이 방식은 정보 그룹화와 콘텐츠를 배치할 때 매우 유용합니다. 또한 각각의 컨텐츠를 분리하거나, 한곳에 강조 및 집중시킬수도 있습니다. 이 방식은 시각적 계층구조를 만들고, 정보를 정리하는데에도 사용됩니다.
공통 영역 원칙은 많은 다양한 요소들을 큰 그룹 내에서 일관성을 갖도록 정리해줍니다. 선과 색깔, 모양과 그림자를 통해 이런 결과를 만들어낼 수 있죠. 또한 사용자 입력에 따라 상호작용될 수 있는지의 여부를 나타내주기도하고. 중요한 요소에 사용자가 집중할 수 있도록 도와주기도 합니다.
UI 디자인의 카드패턴도 공통영역의 좋은 사례입니다. 서로 다른 정보규격들이 하나의 규격으로 표현되죠. 이렇게 잘 만들어진 직사각형 공간들이 - 공통 영역의 좋은 예가 될 수 있습니다. 광고배너나, 정보테이블 역시 마찬가지입니다.
UI 디자인 속 게슈탈트 이론
3. 유사하게 생긴 요소들은 같은 종류로 보인다 : 유사성의 원칙 (Similarity)
유사한 시각적 특징을 공유하는 요소들은 서로 연관이있거나, 같은 종류의 것으로 보입니다. 이러한 유사성이 많고, 더 확연할수록, 더 연관성이 높은것으로 인식되죠.
유사성의 원칙은, UI 디자인에서 어떻게 쓰일까?
(How does the Similarity principle apply to UI design?)
-
우리는 서로 유사하게 분류된 요소들이나, 규칙성을 발견하여 동일하게 여기는 경향이 있습니다. 이러한 유사성은 개별 요소들의 특징을 파악하고 서로 연결하여 - 하나의 그룹으로 인식하게되는 결과를 만들어냅니다.
유사성을 높이는데에는 여러 방법이 있습니다. 색상, 크기, 형태, 질감, 치수, 심지어 진행방향 까지 포함됩니다. 다만 모든 요소들이 동일한 강도로 유사성을 만들어주는 것은 아닙니다. 예를 들어 색상과같은 요소는 특히나 유사성을 크게 증가시킵니다. 그리고 이러한 유사성이 반복되는 구조가 만들어질 때. 통일성을 깨는 나머지 요소들은 오히려 - 대비가 되는 효과를 만들어냅니다. 이것을 '비정형적 대비'라고 불리며, 다양한 방식으로 응용될 수 있습니다.
유사성의 원칙은 동일한 패턴이 필요한 경우와. 그중에 다시 강조가 필요한 경우에도 사용될 수 있습니다. (예 : 탐색, 링크, 버튼, 머리 글, 영업용 방안 등)
UI 디자인 속 게슈탈트 이론
4. 끊어지거나, 불완전한 원형(Original)을 발견한 경우, 관념 속의 원형을 보려한다 : 관념속 원형 원칙 (Closure)
요소들의 그룹은 종종 하나의 인식 가능한 형태나 숫자로도 인식됩니다. 관념 속 원형 원칙은 - 객체의 형태가 불완전하거나 객체의 일부의 외곽선이 명확하지 않을 때에도 발생합니다.
관념 속 원형 원칙은, UI 디자인에서 어떻게 쓰일까?
(How does the Closure principle apply to UI design?)
-
사람의 뇌는 기본적으로 사물의 원형을 바라보려하는 성향을 갖고있습니다. 그렇기에 원형을 인식하기에 적당한 양의 정보가 있다면, 우리의 뇌는 비어있는 내용을 채워내어 통합된 결과를 바라보게됩니다. 이 방식을 사용하면 정보를 전달하는 데 필요한 요소를 줄이거나, 복잡성을 줄여도 좋은 디자인을 만들어낼 수 있습니다.
아이콘 디자인이나, 단순화된 로고 디자인은 - 관념 속 원형 원칙의 아주 대표적인 사례입니다.
UI 디자인 속 게슈탈트 이론
5. 대칭적 요소들은 서로 통일성을 가진다 : 대칭의 원칙 (Symmetry)
대칭적 요소는 거리에 관계 없이 -그 자체가 하나의 시각적 규격이자, 반복패턴으로 인식됩니다. 이로 인해 고유한 통일성을 만들어내는데에 쓰입니다.
대칭의 원칙은, UI 디자인에서 어떻게 쓰일까?
(How does the Symmetry principle apply to UI design?)
-
대칭성은 사람이 갖고있는 아주 기초적인 미적 감각 중 하나입니다. 대칭은 여러 시각물에서 사용되는 개념으로, 사진과 영상, 건축물 등 모든 시각이 연관된 분야에서 사용되고있습니다.
대칭적인 구성은 안정적이지만, 단조롭고 정적인 결과를 만들어내기도합니다. 그렇기 때문에 반복패턴화된 규격 내에 비대칭요소를 추가하거나, 아예 대칭을 깨는 디자인을 해보는것도 한가지 방법이 될 수 있습니다. 그러나 언제나 대칭성과 비대칭성은 적절한 양의 조화가 필요합니다.
대칭적 구조는 - 포트폴리오, 갤러리, 제품 디스플레이, 목록, 탐색, 배너 및 콘텐츠 중심 페이지 등에 사용될 수 있습니다.
UI 디자인 속 게슈탈트 이론
6. 연속되는 요소는 하나의 흐름으로 인식된다 : 연속성의 원칙 (Continuation)
간결한 직선이나 부드러운 곡선으로 배열된 요소는 랜덤 하게 또는 거친 선으로 배열된 요소보다 관련성이 더 높은 것으로 인식됩니다.
연속성의 원칙은, UI 디자인에서 어떻게 쓰일까?
(How does the Continuity principle apply in UI design?)
-
연속적으로 이어지는 요소는 하나의 선이나,흐름으로 바라보게됩니다. 이러한 흐름은 또하나의 반복적인 패턴이나, 그룹으로 인식하게되죠. 특히 개별 요소들이 가지는 흐름의 윤곽선이나, 개별 단계의 간격이 일정할수록 더 좋습니다.
연속성은 레이아웃 배치와, 내용구성에 있어서 큰 도움을 줍니다. 잘 정리된 배치는 - 페이지를 통해 부드럽게 움직이도록 도와줍니다. 반대로 연속성을 일부로 깨는 경우, 기존 영역이 이곳에서부터는 끝나고 - 새로운 영역이 시작됨을 알려줄 수도 있습니다.
행과 열의 선형 배치는 연속성의 좋은 예입니다. 메뉴 및 하위 메뉴, 목록, 제품 배열, 카로우셀, 서비스 또는 프로세스/프로그램 디스플레이에 사용할 수 있습니다.
UI 디자인 속 게슈탈트 이론
7. 동시에 이동하는 요소들은 서로 동일한 패턴으로 인식된다 : 동시 이동의 원칙 (Common fate)
동일한 방향으로 이동하는 요소들은 서로 더 깊은 연관성을 갖고있는 것으로 인식된다.
동시 이동의 원칙은, UI 디자인에서 어떻게 쓰일까?
(How does the Common Fate principle apply in UI design?)
이 원칙의 경우. 개별 요소들이 제 아무리 멀리 떨어져있는지. 얼마나 다르게 보이는지는 상관이 없습니다. 그들이 함께 움직이고있는지 아닌지의 여부가 가장 중요합니다. 그들이 함께 움직이거나, 변형되는 경우 그들은 서로 연관된 것으로 인식됩니다. 이 효과는 다른 시각적 요소에 의해 해당 요소가 직접 움직이지 않았다해도 - 동일하게 적용됩니다. (예 : 그림자 효과가 커져서 마치 움직인 것 처럼 보이는 요소들)
동시 이동의의 원칙은 개별 요소가 같은 방향과 속도로 움직일 때, 더욱 강한 연관성을 갖게됩니다. 이러한 동시적인 움직임은 하나의 반복되는 패턴을 만들어내게됩니다. 이런 상황에서 - 통일성을 깨고, 개별적인 움직임을 갖게되는 요소는 또다른 대비를 만들어냅니다. 이러한 방식은 UI 디자인의 마이크로 애니메이션이나, 영상의 여러 요소에서도 응용되어 사용될 수 있습니다.
동시이동의 원칙은 다양한 응용이 가능합니다. 확장 가능한 드롭다운 메뉴, 기록, 도구 조각, 제품 슬라이더, 시차 두루마리 및 회전 표시기 등에 적용할 수 있습니다.
결론 (Conclusion)
UI 디자인은 보기좋은 시각물로만 만들어지는 것이 아닙니다. UI는 주로 사용자가 원하는 결과를 달성하기 위한 편의나. 정보의 구조와 큰 연관이 있습니다. 이러한 정보구조나 문서구조의 흐름이 명확할수록 좋은 UI 환경이 만들어집니다. 게슈탈트 이론은 더 나은 UI 디자인과 사용자 환경을 만드는데 큰 도움이 됩니다.
-
해당 자료는 내용이 상당히 좋은 자료인데 반해, 영어 단어 하나로 너무 함축적으로 설명하는 경우가 많더군요. 그래서 읽으시는 분들이 이해가 가질 않으실만한 상황이 많아보이는지라 내용을 더 풀어서 정리했습니다. 사실 개념을 알아도 UI 디자인 경험이 없으면 이해가 바로 가시진 않을만한 내용이 많습니다. 그러니 - 다양한 UI 시안들 중 - 저 규칙을 잘 지킨 시안들을 찾아내는 방식으로 사용하시면 더 유용할 듯 합니다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
