즈코딩스쿨 디자인 캠프 - 사람은 전체를 먼저 본다 — 게슈탈트 이론과 레이아웃 (day7)

 

 

이번 수업은 두 갈래였다. 앞부분은 영상에 넣을 음악과 나레이션을 만드는 도구, 뒷부분은 디자인의 기본기라 할 수 있는 게슈탈트 이론. 도구를 만지는 손맛과 이론을 곱씹는 머리를 번갈아 쓴 하루였다.

음악과 나레이션, 이것도 AI로

**수노(Suno)**는 텍스트만 넣으면 음악을 만들어주는 AI다. 영상이나 콘텐츠에 배경음악이 필요할 때 쓰기 좋다. 다만 주의할 점이 있었다. 수노는 저작권 문제가 있어서, 무료 플랜으로 만든 음원은 상업적으로 사용하기 어렵다. 포트폴리오나 연습용으로는 괜찮지만 실제 상업 프로젝트에 쓸 땐 라이선스를 확인해야 한다.

나레이션은 네이버 TTS(클로바) 같은 음성 합성 도구를 쓰면 된다. 영상에 음악과 내레이션을 얹는 흐름까지 한 번에 그려볼 수 있었다.

게슈탈트 이론 — 사람은 전체를 먼저 본다

원래 심리학에서는 인식을 개별 요소들의 합으로 보는 관점이 있었다. 게슈탈트(Gestalt) 이론은 여기에 반대한다. 인간은 개별 요소를 따로따로 보는 게 아니라, 전체를 먼저 보고 하나의 패턴으로 인식한다는 것이다. 지금도 인지심리학과 심리치료에서 인간이 정보를 인식하는 방식을 설명할 때 많이 쓰인다고 한다.

게슈탈트는 독일어로 형태, 전체, 패턴을 의미한다. 핵심은 이렇다.

사람은 화면의 요소를 하나씩 따로 보는 것이 아니라, 맥락 속에서 의미 있는 하나의 덩어리로 묶어서 지각한다.

사용자는 화면을 하나하나 정독하지 않는다. 아주 짧은 시간에 슥 훑으면서 파악한다. 그래서 화면을 훑어볼 때 핵심 정보를 바로 알아챌 수 있게 만들어야 한다. 게슈탈트 이론은 그 인식이 어떻게 작동하는지를 설명해주는 이론인 셈이다.

이 대목에서 ICU에서 일하던 시절이 떠올랐다. 환자 모니터를 정독할 시간이 없으니, 한눈에 이상 신호를 잡아내야 했다. 잘 정리된 모니터 화면이 곧 환자 안전이었던 것처럼, 잘 정리된 UI는 곧 사용성이라는 게 같은 원리로 느껴졌다.

이 이론이 왜 유용한가

효과설명

정보 구조가 한눈에	근접성·유사성을 활용하면 사용자가 설명을 읽지 않아도 관계를 바로 인지한다. 인지 부하를 줄이고 사용성을 높이는 기본 도구다.
시선 흐름과 행동 유도	연속성·전경배경을 잘 쓰면 사용자가 읽어야 할 순서대로 자연스럽게 흐르게 만들 수 있다. 어디를 먼저 읽고 어디를 눌러야 할지 유도한다.
심미성과 기능성	정돈돼 보이는 인상을 주고, 결과적으로 읽기 쉽고 쓰기 쉬운 레이아웃이 된다.

한 줄로 요약하면, 전체는 개별 요소의 합보다 크다. 우리 뇌는 복잡한 시각 정보를 단순한 그룹으로 정리하기 때문에, 전체 구조가 엉망이면 화면 자체가 이상하게 느껴진다. 그래서 디테일보다 전반적인 구조를 먼저 잡는 게 중요하다.

게슈탈트 5가지 원리

수업에서는 다섯 가지 원리를 사례와 함께 정리했다.

원리핵심대표 사례

근접성	가까이 있으면 같은 그룹	에어비앤비
유사성	비슷하게 생기면 같은 그룹	원티드
연속성	시선 흐름대로 연결해서 봄	우버, 배민
폐쇄성	불완전해도 뇌가 채워서 인식	브랜드 로고
전경·배경	주인공과 배경을 구분	모달, 팝업

1. 근접성의 원리

가까이 있는 것들을 같은 그룹으로 본다. 그래서 관련 있는 정보는 가까이, 관련 없는 정보는 멀리 배치한다. 예를 들어 하나의 카드 컴포넌트 안에 제목, 본문, 버튼이 모여 있을 때 이 요소들을 가까이 붙여놓으면 하나의 정보 덩어리로 인식한다. 카드 사이에 여백을 주면 거기서 구분이 끊긴다는 걸 자연스럽게 알게 된다.

선이나 구분 요소를 따로 주지 않아도 여백만으로 정보가 깔끔하게 정리된다. 하나하나 다 설명해주고 싶은 마음에 선을 긋다 보면 오히려 화면이 복잡해진다. 여백과 근접성만으로 구조를 만드는 게 더 직관적이다. 실제로 잘 설계된 사이트일수록 구분선이 거의 없다. 애플도 이미지와 텍스트의 간격 조합으로 구조를 만든다. 오래된 사이트가 선과 구분선이 많은 것과 대비된다. 요즘 흐름은 선의 남용이 아니라 띄어서 구분하는 쪽이다.

여백도 디자인이다. 여백은 그냥 비어 있는 영역이 아니라, 정보 구조에 맞게 쓰면 오히려 완성도를 높여준다. 이때 간격이 주는 신호도, 그 안의 텍스트도 일관되게 가야 한다. 에어비앤비를 보면 레이블·텍스트·버튼·사진이 가까이 모여 있어서 선이나 화살표가 없어도 어떤 이미지가 어떤 항목인지 바로 인식된다. 섹션 사이의 여백과 항목 사이의 여백 차이를 비교해보면, 그 차이만으로 정보의 계층이 만들어진다는 걸 알 수 있다.

2. 유사성의 원리

비슷하게 생긴 것들을 같은 그룹으로 본다. 그래서 같은 기능은 같은 디자인, 같은 카테고리는 같은 색상으로 일관성을 유지한다. 반대로 강조하고 싶은 요소는 주변과 다르게 만들어서 시각적으로 두드러지게 한다. 막상 작업해보면 이 유사성을 일관되게 유지하는 게 생각보다 어렵다. 원티드가 좋은 사례였다.

3. 연속성의 원리

시선이 자연스럽게 흐르는 방향으로 요소들을 연결해서 본다. 수평·수직 메뉴 구조, 탭 디자인, 타임라인 등을 만들 때 시선 흐름을 고려하면 좋다. 우버나 배민에서 잘 드러난다.

4. 폐쇄성의 원리

불완전한 형태도 뇌가 자동으로 완성해서 인식한다. 빈 공간과 간격을 알아서 채워 전체를 파악하는 인지 경향이다. 브랜드 로고에서 특히 잘 보인다.

5. 전경·배경의 원리

어떤 것은 주인공으로, 나머지는 배경으로 인식한다. 토스트 메시지나 모달창이 뜰 때 배경이 흐려지고, 팝업이 뜰 때 그림자가 생겨 구분되는 게 이 원리다. 중요한 정보를 앞으로 끌어내는 것이다. 반대로 전경과 배경의 구분이 불분명하면 인지 부조화가 생길 수 있다. UI에서 전경을 부각하는 방법은 이렇다.

• 색상 대비 — 전경을 더 밝게, 또는 배경을 흑백으로 눌러주기
• 그림자 처리 — 드롭 섀도우, 엘리베이션 효과로 앞으로 나온 정도를 표현
• 배경 블러 — 배경을 흐리게 처리해 전경을 더 명확하게

정리하며

게슈탈트 이론을 배우고 나니, 그동안 "왜 이 화면은 깔끔해 보이고 저 화면은 답답하지" 막연하게 느끼던 게 설명되기 시작했다. 결국 좋은 레이아웃은 선을 많이 긋는 게 아니라, 여백과 그룹으로 사용자의 인식을 도와주는 것이었다.

특히 와닿은 건 여백을 대하는 태도였다. 그동안 빈 공간을 채워야 할 것처럼 느꼈는데, 여백 자체가 정보를 구분하고 계층을 만드는 도구라는 걸 알게 됐다. 다음 과제에서는 선을 긋고 싶은 손을 한 번 참고, 여백과 근접성만으로 구조를 잡아봐야겠다.