brunch

매거진 Design Information

라이킷 79 댓글 4

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Giii Sep 03. 2020

심리를 활용한 디자인

게슈탈트 이론을 기반으로 한 UI 디자인

훌륭한 디자이너라면 시지각적으로 사용자가 이해할 수 있는 디자인을 해야 합니다. 당신이 피카소가 아닌 이상 상대방이 당신에 디자인의 의도를 이해할 수 있어야 합니다. 그렇기 때문에 UI(사용자 인터페이스)나 UX(사용자 경험)와 같은 단어들이 탄생한 것입니다.

심리를 활용하면 주어진 상황에서 어떤 시각적 요소가 가장 효과적인지 결정하는데 도움이 될 수 있으며 사용자의 흐름을 제어할 수 있는 지각적 요소를 디자인에 적용하여 상대방의 두뇌를 어떻게 작동시킬지 이해할 수 있습니다.

그렇기 때문에 시각디자인과 심리학이 연결되어 서로 영향을 미치는 점은 오늘날의 디자인업계에서는 많이들 공감할 것이라 생각합니다. 그중에 가장 많이 거론되는 이론인 바로 게슈탈트 이론과 디자인에 대해서 이야기해보려 합니다.

게슈탈트(Gestalt) 이론이란?

게슈탈트란 독일어로 형태 혹은 모양이라는 뜻인데 1920년대 독일 심리학파가 제시한 심리학 용어로, 형태를 지각하는 방법을 담은 원칙입니다. “전체는 부분의 합이 아니다”라는 이론에 기반을 두고 있습니다.

그들이 발견한 대표적인 법칙들이 있는데 사람은 어떤 형태를 지각할 때 '그루핑'적인 사고를 한다는 것입니다. 이것을 군집의 법칙이라 부르며 사람들이 시각적 요소를 어떻게 인식하는지를 설명하며 유사성의 법칙, 근접성의 법칙, 폐쇄성의 법칙, 연속성의 법칙 등이 있습니다.

유사성의 법칙 (Similarity)

사람은 유사하다고 인식한 개체를 그루핑 하는 특성을 가지고 있습니다. 유사한 시각적 특성을 공유하는 요소를 유사한 특성을 공유하지 않는 요소보다 관련성이 높다고 인식하는 것으로 사람들은 크기나 형태가 같은 것을 한 그룹으로 보려 하는 성향을 유사성의 법칙이라고 합니다.

요소들을 그룹화하는 것으로 크기, 모양, 색상, 방향등이 있는데 그중에서 같은 색상끼리 가지는 유사성은 가장 강력한 힘을 발휘합니다. 좀 더 이해를 돕기 위해 예제로 설명드리도록 하겠습니다.

위와 같은 텍스트 배열을 하였을 때 사용자는 각각의 하나의 요소들로 보고 그것을 그룹 하지 못하게 됩니다. 그럼 유사성의 법칙이 가장 강하게 적용되는 색상을 적용하면 각 요소들을 그루핑 할 수 있습니다.

위와 같이 이름을 검정색 도시는 회색으로 요소를 유사하게 만들어주면 사용자는 아 검정색으로 된 건 이름이고 회색으로 된 건 도시 이름이구나라고 인식하게 됩니다. 유사성의 법칙을 사용하면 시각적으로 그룹화할 수 있으며 오늘날의 UI 디자인에서는 CTA버튼이나 제목과 본문 등에서 사용되고 있습니다.

근접성의 법칙 (Proximity)

서로 가까이 배치된 요소는 더 떨어져 배치된 요소보다 관련성이 높은 것으로 인식되는데 서로 가까운 요소를 한 덩어리로 보려 하며 서로 연관 지어 사고하는 것이 바로 근접성 법칙의 원리입니다.

사용자는 디자이너가 전달하려 하는 정보에 대해 자세히 알지 못합니다. 그렇기 때문에 서로 같은 맥락의 요소들은 근접하게 위치하고 같은 요소라도 여백을 주어서 다른 요소로 보이게 하는 레이아웃을 구성해야 합니다. 아까 유사성의 법칙이 들어간 요소에 이번에는 근접성의 법칙을 적용해보도록 하겠습니다.

좀 전의 예시를 보면 각각 도시와 이름으로는 그룹 되지만 아직 무언가 그룹이라는 느낌을 가지기 어렵습니다. 이럴 때는 적용 가능한 게 바로 근접성의 법칙입니다.

이렇게 다른 요소이지만 근접하는 것으로 아까의 그룹과는 다르게 이름과 그 사람의 도시가 그룹이 되며 어떻게 그룹 짓는지에 따라 다른 그룹을 인식되게 됩니다. 또한 디자인에서는 위계(계층)라는 것이 존재하는데 일반적으로 도시보다는 이름이 위계가 높기 때문에 위계가 낮은 도시는 텍스트 크기를 낮추면 좀 더 디자인에 밸런스가 맞춰지게 됩니다.

연속성의 법칙 (Continuation)

우리는 시각적으로 연속적인 형태를 그룹화시키게 심리가 있는데 연속되는 선 다음에 오는 요소를 그룹으로 인식하는 원리이며 그 중간에 다른 요소가 가로막더라도 우리 뇌는 다음에 연속된 요소들의 방향과 패턴대로 인식하는 것이 연속성의 법칙입니다.

연속성은 구성을 통해 방향과 움직임을 해석하는데 도움이 됩니다. 요소를 정렬할 때 발생하며 페이지를 통해 눈을 부드럽게 움직여 가독성을 향상하며 그룹화된 정보에 대한 인식을 강화할 수 있습니다.

사진출처 - lpoint

보통 우리는 리스트 디자인에서 연속성의 법칙을 활용할 수 있습니다. 여러 개의 QA가 연속적으로 배치가 되면서 우리는 그것을 하나의 그룹으로 인식하게 됩니다 중간에 라인이라는 다른 요소가 가로막더라도 그것을 하나의 그룹으로 인식하게 됩니다.

폐쇄성의 법칙 (Closure)

폐쇄성의 법칙은 게슈탈트 이론의 핵심이며 시지각적 원리인데 불완전한 형태를 무의식적으로 완전한 형태로 인지하려고 하는 심리, 즉 객관적으로 일관성이 없는 부분을 일관성이 있는 무언가로 만들게 되는 것이 폐쇄성 법칙의 원리입니다. 강아지와 비슷한 구름을 보고 우리가 강아지 같다고 생각하는 것이 대표적인 예입니다.