몬드리안의 대각선 혐오: 뇌과학과 UX의 시선
왜 뇌는 사선을 그토록 싫어하고, UX 디자이너는 이를 어떻게 이용할까?
미술사를 공부하다 보면 가끔 "겨우 이런 걸로?" 싶은 이유로 예술가들이 결별하는 장면을 목격하곤 합니다. 그중에서도 가장 흥미로운 사건을 꼽자면, 1924년 '데 스틸(De Stijl)' 그룹의 두 거장, 피에트 몬드리안(Piet Mondrian)과 테오 반 되스부르크(Theo van Doesburg)의 결별일 겁니다.
이들이 등을 돌린 이유는 복잡한 치정 문제도, 돈 문제도 아니었습니다. 바로 '사선', 즉 45도 각도의 선 때문이었습니다.
수직과 수평만이 '보편적인 인간 이성'을 대변하는 가장 순수한 조형 요소라고 믿었던 몬드리안에게, 반 되스부르크가 내놓은 사선이 가득 찬 작품 <불협화음 속의 반(反)-구성 XVI>은 용납할 수 없는 배신이었습니다.
뇌 속의 '방위 탐지기'와 편애
겨우 선의 각도 하나 때문에 절연을 택한 몬드리안을 보고 속이 좁다고 할 수도 있습니다. 하지만 만약 몬드리안의 뇌가 필연적으로 사선을 거부하도록 설계되어 있었다면, 이야기가 달라지지 않을까요?
놀랍게도 과학은 몬드리안의 손을 들어줍니다. 이 이야기를 하려면 1959년, 하버드 의대의 허블(David Hubel)과 비젤(Torsten Wiesel)의 실험실로 가야 합니다.
그들은 고양이에게 다양한 각도의 빛을 보여주며 뇌 시각 피질(V1)의 반응을 측정했습니다. 그 결과 뇌의 뉴런들이 아무 빛에나 반응하는 것이 아니라, 자신이 담당한 특정 방위의 선이 들어올 때만 활성화된다는 사실을 발견했습니다. 어떤 뉴런은 0도(수직)에만, 또 어떤 뉴런은 90도(수평)에만 반응했죠.
이 '방위 선택성(Orientation Selectivity)'의 발견을 통해, 우리는 사물을 인식할 때 뇌가 먼저 대상을 수많은 짧은 선으로 쪼갠 뒤 이를 재조립한다는 것을 알게 되었습니다.
그런데 여기서 더 흥미로운 사실이 드러납니다. 2000년, 퍼만스키(Furmanski)와 엥겔(Engel)이 fMRI(기능적 자기공명영상)를 통해 인간의 뇌를 촬영해본 결과, 수직선이나 수평선에 반응하는 뉴런의 숫자가 사선에 반응하는 뉴런보다 압도적으로 많았고, 그 반응 강도 또한 훨씬 높았습니다.
이를 학계에서는 '카디널 우월성(Cardinal Superiority)' 혹은 '사선 효과(The Oblique Effect)'라고 부릅니다. 인간은 본능적으로 수직·수평 정보를 처리할 때 더 빠르고 정확하며, 사선을 볼 때는 인지 능력이 떨어집니다.
과학자들은 이를 진화적 관점에서 설명합니다. 중력의 영향을 받는 나무나 신체(수직), 그리고 대지와 지평선(수평)은 생존에 필수적인 정보였기에 뇌가 이에 최적화되어 진화했다는 것이죠.
"오늘날의 과제는 명확하고 가능한 한 '보편적인' 아름다움의 직접적인 표현을 창조하는 것이다." — 피에트 몬드리안
결국 몬드리안이 수직과 수평에 집착했던 건, 어쩌면 인간의 뇌가 가장 명확히 인지할 수 있는 보편적인 대상을 캔버스에 구현하고 싶었던 본능적 욕구였을지도 모릅니다.
UX 디자인 1: 긴장감을 디자인하다
그렇다면 사용자 경험(UX)을 설계하는 우리는 몬드리안처럼 모든 화면을 명확한 수직과 수평의 그리드로만 채워야 할까요? 여기서 반전이 일어납니다. 뇌가 사선을 처리하기 힘들어한다는 점, 바로 그 '불편함'이 디자인의 핵심 무기가 됩니다.
우리가 공사 현장의 '접근 금지' 테이프나 시스템 에러 창에서 빗금(사선) 패턴을 자주 보는 이유는 우연이 아닙니다. 사선은 뇌가 의도적으로 에너지를 할당해야 하는 정보, 즉 '시각적 긴장감(Visual Tension)'을 유발하는 요소입니다. 편안한 수직과 수평의 세계에서 불쑥 튀어나온 사선은 뇌에게 까다로운 정보 처리를 요구하며 강제적으로 주의를 집중시킵니다(Pop-out effect).
UX 디자이너는 이 원리를 이용해 '주목성'을 만들어냅니다. 사용자가 무심코 지나치지 말아야 할 중요한 경고나, 결제 마감 임박 같은 긴급한 메시지에 사선 모티프를 활용하여 뇌를 집중시키는 것입니다.
UX 디자인 2: 시선의 미끄럼틀
일단 사용자의 주의를 끌었다면 그 다음은 시선을 원하는 곳으로 움직이게 해야 합니다. 여기서 사선은 훌륭한 '가이드' 역할을 합니다.
딱딱한 그리드 구조 속에 배치된 대각선 요소는 사용자의 시선을 미끄러지듯 이동시킵니다. 닐슨 노먼 그룹이 제시한 'Z-패턴'이 그 대표적인 예입니다. 텍스트가 적은 랜딩 페이지에서 사용자의 시선은 자연스럽게 좌상단에서 우하단으로 대각선을 그리며 흐릅니다.
디자이너들은 이 흐름을 의도적으로 강화합니다. 화면을 가로지르는 사선 레이아웃이나 대각선 화살표를 통해 사용자의 시선을 자연스럽게 스크롤 방향으로 유도하거나, 최종 목적지인 '구매하기(CTA)' 버튼에 안착시킵니다. 이 화면에서 반 되스부르크의 사선은 시선을 움직이게 하는 '미끄럼틀'인 셈입니다.
데 스틸(De Stijl)의 균형
결국 100년 전의 그 싸움에서 승자는 누구였을까요?
뇌가 선호하는 '안정성'을 대변한 몬드리안과, 뇌를 자극하는 '주목성'을 주장한 반 되스부르크 사이 승패를 가릴 수는 없습니다.
웹사이트가 온통 사선으로 가득 차 있다면 사용자는 인지 과부하로 피로를 느낄 것입니다. 반대로 명확한 수직과 수평만 존재한다면 지루해서 아무런 클릭도 일어나지 않겠죠.
훌륭한 UX는 이 둘의 균형점에 있습니다. 몬드리안의 수직과 수평 그리드로 편안한 정보 구조를 만들고, 그 위에 반 되스부르크의 사선을 한 스푼 얹어 긴장감과 흐름을 만드는 것. 그것이 뇌과학이 증명하고 미술사가 암시하는 최적의 사용자 경험일 것입니다.
References
Art History
Overy, P. (1991). De Stijl. Thames and Hudson.
Blotkamp, C. (1986). De Stijl: The Formative Years. MIT Press. (몬드리안과 반 되스부르크의 결별 과정을 다룬 주요 문헌)
Cognitive Science & Neuroscience
Hubel, D. H., & Wiesel, T. N. (1959). Receptive fields of single neurones in the cat's striate cortex. The Journal of Physiology, 148(3), 574–591. (방위 선택성 발견 논문)
Appelle, S. (1972). Perception and discrimination as a function of stimulus orientation: The "oblique effect" in man and animals. Psychological Bulletin, 78(4), 266–278. (사선 효과를 정립한 논문)
Furmanski, C. S., & Engel, S. A. (2000). An oblique effect in human primary visual cortex. Nature Neuroscience, 3(6), 535–536. (fMRI를 통한 카디널 우월성 입증 논문)
UX Design & HCI
Nielsen, J. (2006). F-Shaped Pattern For Reading Web Content. Nielsen Norman Group.
Cao, J. (2015). Web Design Patterns: The Z-Shape Pattern. UXPin. (Z-패턴에 대한 실무적 분석)Rosenholtz, R., Li, Y., & Nakano, L. (2007). Measuring visual clutter. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. (시각적 복잡도와 팝아웃 효과 관련)