🏗 게슈탈트 이론을 UI에 활용하는 7가지 방법

🎈 한 줄 요약 - 게슈탈트(Gestalt)는 형태, 형상을 뜻하는 독일어로 특정한 상황이 주어졌을 때 사람들이 시각 요소를 인지하는 방식 ✔️ 게슈탈트라는 말을 많이 들어봤을 거예요. 특히 게슈탈트 붕괴라는 지각 현상 중 하나를 말이죠. 게슈탈트 붕괴는 언뜻 보면 심리학 용어, 학술 용어처럼 보이는데요. 사실은 그렇지 않아요. ✔️ 게슈탈트 붕괴는 일본에서 만들어진(?) 용어인데요. 커뮤니티에서 도시전설처럼 쓰이던 용어예요. 다른 말로 하면 신조어라 할 수 있어요. 게슈탈트 붕괴 이론 또한, 도시괴담처럼 존재할 뿐 실제하지 않는 용어죠. ✔️ 즉, 정리해서 말하자면 게슈탈트 붕괴는 학술적 용어가 아니며, 일본 커뮤니티에서 생겨난 '신조어'라고 생각하면 이해가 쉬울 듯 해요. 🤪 ✔️ 여튼, 게슈탈트라는 용어는 이렇게 많이 알려졌고, 인터넷에서도 흔히 쓰이는데, 실제 내용은 어떤지 다들 모르고 있어요. 그저, 게슈탈트 붕괴라는 신조어를 통해 접해봤기 때문이죠. ✔️ 그럼 진짜 게슈탈트는 잘 안 쓰이는 용어이냐? 그건 아니에요. 게슈탈트는 형태, 형상을 뜻하는 독일어로, 특정한 상황이 주어졌을 때, 사람들이 시각 요소를 인지하는 방식을 설명해줘요. 이를 기반으로 게슈탈트 이론이 있고, UI에 적용하여 바라볼 수도 있죠. ✔️ 일반적으로 우리는 항상 이전의 경험이나 시각적 패턴을 서로 비교하고자 해요. 경험 즉, 지각하거나 인지한 것을 하나의 현상으로 받아들이기 때문이죠. ✔️ 그리고 그 내용들을 서로 연결하고, 형태를 인식하고, 정보를 분류하고, 간격을 메우며 큰 그림을 그리죠. 큰 그림이 완성되면? 맵(지도)이 되죠. ✔️ 특정한 사람만 그런 거 아니냐고요? 아니에요. 모든 인간의 습성이라 할 수 있죠. 우리는 연계된 것으로부터 유사함을 도출하고, 그것을 통해 익숙함을 습득하고 반복된 행동을 보여요. ✔️ 그런 점에서 UI/UX 디자인에 있어 게슈탈트는 진리라고 여길 수 있어요. 하지만 우리는 항상 조심해야하죠. 게슈탈트 이론 은 하나의 법칙이라는 점이요. ✔️ 어떤 법칙이요? 인간의 시지각적 원리 중 하나로 규명한 법칙이요. 즉, 모든 디자인 측면에서 인간의 욕망의 표현방식을 다룬 게슈탈트 이론이 적용된다기 보다는 각각의 요소에 따른 면모를 보인다는 사실이죠. ✔️ 가끔 UT를 통해 사용성을 조사하다보면 사람들은 그들의 욕망이나 욕구 보다는 '익숙함'에 따라 행동하는 모습이 보여요. 즉, 어느 덧 나도 모르게 몸에 배어버린 행동을 그대로 보여주는 거죠. ✔️ 여튼, 이러한 점들을 주의하며, 다음 내용을 확인하시길 당부드려요. 1️⃣ 근접성의 원칙: 근접한 개체들은 동일한 개체로 인식된다. ✔️ 가까이 있으면 하나의 그룹처럼 묶을 수 있죠. 여기서 묶는다는 행위 자체가 근접하게 만든다는 것을 의미하고, 유사한 내용들로 묶는다는 것도 의미하죠. 그런 측면에서 서로 연관된 정보는 가까이, 관련 없는 항목은 멀리 떨어져 있게 구성하면 시각적 계층과 정보 흐름을 높일 수 있어요. 2️⃣ 공통 영역의 원칙: 공통 영역 내에서 배치된 요소들은 그룹으로 인식된다. ✔️ 근접성의 원칙과 마찬가지로 동일한 영역에 요소가 배치되면 서로 연관을 가진 그룹으로 인식돼요. 이 방식은 정보 그룹화, 콘텐츠 배치에 유용하며, 큰 그룹 내에서도 일관성을 갖게 정리할 수 있어요. 3️⃣ 유사성의 원칙: 유사하게 생긴 요소들은 같은 요소로 보인다. ✔️ 우리는 유사성이 높으면 더 연관성이 높다고 인식해요. 이때 유사성을 높이는 방법에는 컬러, 스케일, 쉐입, 패턴, 사이즈 등이 있는데, 그 중 컬러는 유사성을 가장 높일 수 있는 방법이에요. 4️⃣ 관념 속 원형 원칙: 끊어지거나 불완전한 원형을 발견한 경우 관념 속의 원형을 보려한다. ✔️ 형태가 불완전하거나 일부의 외곽선이 명확하지 않을 때, 우리는 과거의 경험을 토대로 '완전한 형태'로 만들고자 노력해요. 즉, 불완전함에서 완전함을 유추할 수 있게 만드는 거죠. 대표적인 예로 아이콘이나 단순화된 로고 등이 있어요. 5️⃣ 대칭의 원칙: 대칭적인 요소들은 서로 통일성을 가진다. ✔️ 대칭은 기초적인 미적 감각 중 하나예요. 안정적인 형태를 갖기 때문이죠. 안정적일 경우 단조롭고 정적인 결과를 만들어 내는데요. 이를 살짝 비틀어 비대칭 요소를 활용하면 좀 더 동적인 결과를 만들어 낼 수 있어요. 단, 대칭과 비대칭이 적절한 조화를 이뤄내야 한다는 점은 잊지 말아야 해요. 6️⃣ 연속성의 원칙: 연속되는 요소는 하나의 흐름으로 인식된다. ✔️ '연속적 요소 > 하나의 선 또는 흐름 > 하나의 패턴, 그룹'으로 사람들은 인식해요. 이에 따라 레이아웃과 내용 구성에 큰 도움을 주죠. 연속성이 잘 배치돼 있으면 부드러운 흐름을 도와줘요. 반면, 연속성을 일부러 깨는 경우도 있는데요. 시작과 끝처럼 변화를 알려줄 수 있는 수단이 되기도 해요. 7️⃣ 동시 이동의 원칙: 동시에 이동하는 요소들은 서로 동일한 패턴으로 인식된다. ✔️ 동일한 방향으로 이동할 경우 우리는 같은 그룹으로 인식해요. 이때 개별 요소가 어떻냐는 중요하지 않아요. 단지, 함께 움직이냐, 움직이지 않느냐만 중요한 요소로 보는 거죠. 또한, 개별요소가 같은 방향과 속도로 움직이면, 더욱 강한 연관성을 갖게 돼요.