1. 디자인 원칙

디자인 원칙이란?

• 인지심리학의 관점에서 디자인할 때 지켜야 할 규칙을 정해 놓은 것.
  • 인지심리학은 인간이 어떻게 보고, 생각하고, 받아들이는 지를 연구하는 학문.
  • 디자인 원칙은 많은 사람들이 비슷하게 느끼고, 행동하는 방식에 기초해 디자인하는 방법을 제시.
  • 디자인 원칙을 기반해 디자인하면 사람들이 편안하게 느끼고 자연스럽게 행동하도록 유도할 수 있고, 사용성이 높은 제품을 만들 수 있도록 도와줌.

디자인 원칙의 종류

• 게슈탈트 심리학
• UX 비주얼 디자인 원칙
• UX/UI 심리학 법칙
• 기업의 디자인 원칙

2. 게슈탈트 심리학

게슈탈트 심리학이란?

• 게슈탈트 심리학은 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론.

전체성의 원리 (The Principle of Wholeness)

• 인간은 사물을 개별 요소로 보지 않고, 전체적인 패턴이나 구조로 인식하려는 경향이 있음.
  "전체는 부분의 합보다 크다(The whole is greater than the sum of its parts)"는 게슈탈트 심리학의 핵심 원리.

왜 게슈탈트 심리학을 알아야 하나?

• 게슈탈트 심리학은 사용자가 제품을 경험하는데 영향을 끼침.
  • 제품을 이용하는 사용자의 의식은 계속해서 화면 구성의 통일성, 연속성, 유사성을 기대함. 화면이 기대한 대로 구성되어 있지 않다면 사용자의 몰입이 깨지고 제품을 이탈하는 이유가 됨.

게슈탈트 심리학의 원리들

* 유사성 법칙 (The Law of Similarity)

• 형태, 색깔, 크기 등이 유사한 요소들은 그룹으로 묶여 인식됨.
• 예: 빨간색과 파란색 점들이 섞여 있어도 같은 색끼리 묶어서 보게 됨.
• 모양을 이용한 유사 관계 형성
  • 모양이 유사하면 같은 그룹으로 묶여 보임.
  • 하지만 모양의 그룹화 효과는 크기, 색을 이용한 것보다 훨씬 약함.
• 크기를 이용한 유사 관계 형성
  • 크기가 더 큰 사각형이 주변의 다른 사각형보다 더 중요하게 보임
• 색상을 이용한 유사 관계 형성
  • 특히 유사성은 색상에 큰 영향을 받음
• 방향을 이용한 유사 관계 형성
  • 특정 요소만 방향을 바꾸면 그 요소들끼리 별도의 그룹을 형성.
• 색상>크기>모양
• 유사성의 원리 사례
  • 모양이 유사한 컴포넌트는 자연스럽게 하나의 그룹이라는 느낌을 줍니다.
  • 정보의 그룹화가 잘되면 사용자가 내용을 파악하기가 편합니다.

* 근접성 법칙 (The Law of Proximity)

• 가까이 있는 요소들은 하나의 그룹으로 인식됨.
• 사람들은 가까이 있는 요소들이 멀리 있는 요소들보다 더 관련성이 있다고 느낌.
• 예: "•• •• ••" → 세 쌍의 점으로 인식됨.
• 근접>색상>크기>모양
  

* 폐쇄성 법칙 (The Law of Closure)

• 불완전한 도형이라도 뇌가 자동으로 빈 부분을 채워 완전한 형태로 인식함.
• 예: 점선으로 이루어진 원도 하나의 원으로 보임.
• 공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향.
• 도형의 일부가 끊어져 있거나, 이어져 있지 않더라도 완벽한 형태로 인식할 수 있음.

* 연속성 법칙 (The Law of Continuance)

• 인간의 시각은 부드러운 곡선이나 직선 형태로 연속적으로 이어지는 것을 선호함.
• 예: 교차하는 선이 있을 때, 단절된 부분보다 자연스럽게 연결된 선을 먼저 인식.
• 사람은 어떤 요소가 방향성을 가지고 연속되어 있을 때 편안함을 느낌.
• 직선이나 곡선을 따라 배열된 대상을 하나의 단위로 인식.

* 공통성의 법칙 (The Law of Common Fate)

• 같은 방향으로 움직이는 요소들은 하나의 그룹으로 인식된다.
• 예: 여러 개의 점이 같은 방향으로 이동하면 하나의 무리로 보임.
• 모양, 색상 등에 관계없이 함께 움직이거나 바뀌는 요소는 서로 더 관련이 있다고 느낌.
• 이 원리는 주로 모션 그래픽에서 자주 사용됨.

* 대칭성과 균형 법칙 (The Law of Symmetry and Balance)

• 인간은 대칭적인 형태를 안정적이고 조화롭게 인식하는 경향이 있다.
• 예: 좌우 대칭인 도형이 균형 잡혀 보임.

3. UX 비주얼 디자인 원칙

UX 비주얼 원칙이란?

• UX (User Experience) 비주얼 디자인은 사용자 경험을 최적화하는 데 중요한 역할을 함. 단순히 미적으로 아름다운 디자인을 만드는 것이 아니라, 사용자가 직관적으로 이해하고 효율적으로 사용할 수 있도록 돕는 것이 핵심.

UX 비주얼 디자인 원칙의 힘

• 시각적으로 매력적인 이유를 근거를 들어 설명할 수 있도록 도와줌.
• UX 비주얼 디자인 원칙을 잘 활용하면 심미적으로 아름다울 뿐만 아니라 사용성도 높여줌.
• 원칙에 따라 잘 설계된 디자인은 사용자가 제품에 몰입하는 것을 도와주고 사용성도 좋아짐.

UX 비주얼 디자인 원칙

5 Principles of Visual Design in UX 문서 보기

• 스케일 (Scale)
• 시각적 위계 (Visual Hierarchy)
• 균형 (Balance)
• 대비 (Contrast)

* 스케일 (Scale)

• 상대적인 크기를 사용하여 구성의 중요도와 순위를 표시하는 것.
• 가장 중요한 요소는 덜 중요한 요소보다 크게 표현.
• 당연하게도 크기가 크면 더 주목받을 가능성이 높음.
• 시각적으로 보기 좋은 디자인은 일반적으로 3가지 이하의 크기 사용.

* 시각적 위계 (Visual Hierarchy)

• 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인 하는 것.
• 시각적 위계는 크기, 색상, 간격, 배치 등을 통해 표현할 수 있음.
• 사용자가 화면에서 정보를 찾는 데 어려움을 겪는 경우 명확한 시각적 위계가 없을 가능성이 높음.
• 명확한 시각적 위계를 만들기 위해서는 2~3개 정도의 텍스트 크기를 사용.
• 위계의 낮음, 중간, 높음에 따라 요소의 크기를 large, medium, small로 분류.
• 중요하다고 생각되는 요소는 채도가 높고 색상대비가 크게, 덜 중요한 요소는 채도가 낮고 색상대비가 크지 않도록 적용.

* 균형 (Balance)

• 디자인 요소 간에 적당한 배열이나 비율을 주는 것.
• 시소처럼 디자인 요소 간의 균형을 맞춘다고 생각.
• 수직이나, 수평의 가상 축에 비슷한 양의 시각적 정보가 배치되도록 함. 이때, 꼭 대칭이 아니여도 괜찮음.
• 대칭
  • 디자인 요소가 가상의 중심축을 기준으로 대칭으로 분포하는 것.
  • 안정적이고, 정적인 느낌을 주고 싶을 때 사용.
    
• 비대칭
  • 디자인 요소가 가상의 중심축을 기준으로 비대칭으로 분포하는 것.
  • 역동적이고 신선한 느낌을 주고 싶을 때 사용.
    
• 방사형
  • 중앙의 점을 기준으로 원형으로 배치한 것.
  • 시선을 중앙에 집중시키고 싶을 때 사용.
    

* 대비 (Contrast)

• 눈에 띄게 구별되도록 강조하기 위해 두 요소 간의 차이를 두는 것.
• 특정 부분을 사용자에게 돋보이게 하고 싶을 때 사용.
• 크기나 색상을 사용해 두 디자인 요소 간에 뚜렷한 차이를 줌.
• 주로 명암의 차이를 주거나 색상의 차이를 주는 방법을 많이 사용.
• 주의해야 할 것은, 덜 중요한 텍스트의 강조를 줄이기 위해 배경과의 명도 차이를 너무 줄이지 않도록 하기. 너무 흐릿한 글자는 사용성을 떨어뜨림.

4. UX/UI 심리학 법칙

UX/UI 심리학의 법칙이란?

• UX/UI 디자인에서는 사용자의 심리와 행동 패턴을 이해하는 것이 중요함. 심리학적 원리를 적용하면 더 직관적이고 효율적인 사용자 경험을 제공할 수 있음.
• 심리학 법칙은 사람이 어떻게 행동하고, 왜 그런 행동을 하는지 설명함. 사람의 마음을 깊이 들여다보고 이해해 보면서 어떤 것들이 디자인에 직접적인 영향을 끼치는지 알아보자.

심리학 법칙의 힘

• 정량적, 정성적 데이터가 없는 초기 제품에 대한 의사결정의 근거가 되어줌.
• 명확한 이론적 근거를 바탕으로 주장할 수 있고, 팀원들을 설득할 무기로 활용할 수 있음.
• 스스로 좋은 디자인을 할 수 있도록 도와주는 체크리스트가 되어줌.
• 사용자의 경험을 근원적으로 이해할 수 있도록 도와줌.

UX/UI에 영향을 주는 심리학 법칙들

• 제이콥의 법칙
  • 사용자는 새로운 제품을 사용할 때도 자신이 이미 알고 있는 익숙한 제품과 같은 방식으로 작동하길 원한다.
• 피츠의 법칙
  • 터치 대상에 도달하는 시간은 거리와 크기와 함수 관계에 있다.
• 힉의 법칙
  • 의사결정에 걸리는 시간은 선택지의 갯수와 복잡성에 비례해 늘어난다.
• 밀러의 법칙
  • 보통 사람은 작업 기억에 7(±2)개의 항목밖에 저장하지 못한다.
• 포스텔의 법칙
  • 자기 자신에게는 엄격하고, 남의 것을 받아드릴 때는 너그럽게 해야 한다.
• 피크엔드 법칙
  • 인간의 경험은 전체 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낌 감정을 바탕으로 경험을 판단하는 경향이 있다.
• 심미적 사용성 효과
  • 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
• 폰 레스토프 효과
  • 비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
• 테슬러의 법칙
  • 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
• 도허티 임계
  • 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션하면 생산성이 급격히 높아진다.

대표 심리학 법칙들

* 제이콥의 법칙

• 사용자는 새로운 제품을 사용할 때 이미 알고 있는 익숙한 방식으로 작동하길 원한다는 법칙.
• 누구나 새로운 제품을 처음 접하면 기존에 학습된 지식과 경험을 바탕으로 비슷하게 사용하려고 시도함.
• 인터페이스를 익히는데 드는 정신적 에너지가 줄어들수록, 사용자가 목표 달성에 투자할 에너지가 늘어남.
• 목표달성이 수월해질수록 목표를 성공적으로 달성할 확률도 높아짐
• 멘탈모델이 큰 영향을 끼침
  • 멘탈모델이란?
    • 자신이나 타인, 개념, 사물, 현상 등 다양한 대상에 대해 갖고 있는 생각 패턴.
    • 개개인마다의 경험과 학습을 통해 형성되고 사용자의 생각과 행동, 의사결정에 영향을 미침.
    • 예를 들어, 스마트폰에서 사진을 확대할 때 보통은 두 손가락을 오므렸다 펼치는 동작을 함. 이것이 디지털 제품 속 사진에 대한 보편적인 멘탈모델 중 하나.
  • 디자인 할 때 참고하기
    • 새로운 디자인을 할 때나 제품에 큰 변화가 있을 땐 기존의 멘탈모델을 잘 활용하는 것이 좋음.
    • 사용 방법을 새로 익히지 않아도 되니 사용자가 들여야 하는 시간과 비용, 노력이 줄어듬.

* 피츠의 법칙

• 터치 대상에 도달하는 시간은 대상까지의 거리와 크기와 함수 관계에 있다는 법칙.
• 쉽게 말해, 사용자가 인터랙션해야 하는 대상은 거리가 가깝고, 크기가 커야 사용성이 좋다는 뜻.
  • 디자인 할 때 참고하기
    • 터치해야 하는 대상의 크기는 사용자가 정확하게 선택할 수 있을 만큼 충분히 커야 함.
    • 터치해야 하는 대상이 2개 이상이라면 잘못 누르지 않도록 둘 사이에 충분한 거리를 확보해야 함.
    • 터치해야 하는 대상은 마우스나 손가락이 쉽게 닿을 수 있는 영역에 배치해야 함.

* 힉의 법칙

• 의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다는 법칙.
• 사용자가 선택해야 하는 선택지가 늘어나면 결정까지 시간이 늘어남.
• 사람의 뇌에 한꺼번에 복잡하고 많은 양의 정보가 들어오면 이를 처리하기 위해 인지 부하가 생김.
  • 인지 부하란?
    • 정보를 학습하거나 문제를 해결하는 과정에서 필요한 인지적 요구량.
    • 뇌가 처리할 수 있는 양보다 처리해야 할 정보가 많으면 인지 부하가 생김.
    • 인지 부하의 한계점을 넘어가는 순간 사용자는 이탈.
  • 디자인 할 때 참고하기
    • 복잡한 작업은 더 작은 단계로 나누기.
    • 의사결정 시간을 줄이기 위해 선택지의 개수를 최소화 하기.
    • 추천 선택지를 강조해서 사용자의 부담을 줄이는 것도 도움이 됨.
    • 단, 너무 추상적으로 단순화 하지 않도록 주의. 정보의 양이 지나치게 적을 때에도 인지 부하가 생김.

* 밀러의 법칙

• 보통 사람은 작업 기억에 7(±2)개 정도의 항목밖에 저장하지 못한다는 법칙.
• 사람마다 다르지만, 보편적으로 무언가를 기억할 수 있는 정보의 덩어리가 7(±2)개 정도라는 뜻.
• 밀러의 법칙에서 꼭 기억할 것은 개수가 아니라 정보 덩어리.
  • '덩어리'는 한 그룹으로 묶여서 기억에 저장되는 기본 단위.
  • 덩어리 크기는 크게 중요하지 않음.
  • 인간의 단기 기억은 한계가 있기 때문에 정보를 덩어리로 만들면 더 효과적으로 이해하고 기억할 수 있음.
  • 디자인 할 때 참고하기
    • 사용자가 쉽게 이해하고 기억할 수 있도록 정보를 구조화, 그룹화 하기.
    • 메뉴나 항목을 무조건 7개로 제한하라는 뜻이 아님.
    • 유사한 정보끼리 시각적으로 뚜렷이 구별되도록 그룹으로 나누고 명확하게 체계화 하기.

다른 심리학 법칙들

• 디자이너가 알아야 할 10가시 심리학 법칙 (上)
• 디자이너가 알아야 할 10가지 심리학 법칙 (下)
• 도서 <UX/UI의 10가지 심리학 법칙>

5. 기업의 디자인 원칙

• 기업의 철학을 담고, 심미성과 사용성이 높은 제품을 만들 수 있도록 제시하는 가이드.
• 기업과 제품의 비전을 공유.
• 공통된 느낌을 주는 일관된 원칙을 제시.
• 심미적인 UI와 인터렉션을 구현하는 동시에 사용성을 지키는 방법을 안내.
• 의사결정 기준이 되고 시간을 절약.

Spotify

Spotify’s New Design Principles 보기

• 연관성
  • 스포티파이는 개인화를 통해 사용자 개인을 위해 만들어진 것이라는 느낌을 주어야 함.
  • 이를 위해 정보를 적시에 제공하는 것이 중요.
  • 무엇을, 누구에게, 어떤 맥락을 제시해야 하는지 신중하게 고려.
  • 예를 들어 재생 목록의 커버 이미지를 보여줄 때 문화권에 맞춘 정보를 제공.
• 인간
  • 스포티파이는 기술에 뿌리를 두고 있지만, 모든 것은 사람을 위한 것.
  • 인간의 논리로 생각하고 감정을 나누기.
  • 지나치게 영리하거나 기술적, 기능적인 것은 인간처럼 보이지 않음.
  • 예를 들어, 프로필 사진을 설정할 때 본인의 프로필 사진을 넣을 수 있도록 한다던가, 키즈 프로필에 재밌는 캐릭터를 사용하는 방법을 활용.
• 통일성
  • 디자인하는 모든 것이 스포티파이처럼 보이게 하기.
  • 제품 안에서의 일관된 경험을 통해 친숙함과 신뢰를 구축.
  • 디자인 시스템을 사용하는 이유.
  • 새로 발명하기보다는 재사용하는 방법을 추천함.
  • 경험을 재사용하고, 일관성을 유지.
  • 예를 들어, 마케팅할 때 오프라인의 경험과 스포티파이의 앱 경험이 이어지도록 하는 것.

페이스북

Facebook Design Principles 보기

• 보편적인
  • 페이스북의 사명은 전 세계를 더 개방적으로 만드는 것.
  • 모든 사람, 모든 문화, 모든 언어, 모든 디바이스, 삶의 모든 단계를 위해 디자인되어야 함.
  • 소수에게만 작동하는 기능을 경계하고, 90%의 사용자에게 작동하는 제품을 만듬.
• 인간
  • 사용자는 주변의 다른 사람들과 함께하기 위해 페이스북에 들어옴.
  • 제품의 목소리와 비주얼은 앞에 나서지 않고 사용자를 먼저 보일 수 있도록 하기.
• 깔끔한
  • 사용자가 생활할 빈 캔버스를 만들기 위해 페이스북은 깨끗하고 절제된 비주얼 스타일을 고수해야 함.
  • 최소한의 밝은 공간으로 사용자의 참여와 투명한 의사소통을 장려.
  • 깔끔한 디자이은 쉽지 않음. 활용할 수 있는 스타일의 수가 줄어들 수록 여백과 활자, 색상 등이 더 중요해짐.
• 일관적인
  • 유사한 요소들이 비슷한 방식으로 동작할 수록 사용성이 향상.
  • 패턴을 활용하여 시간을 절약하기.
  • 제품 안에서의 일관된 인터렉션은 사용자와의 신뢰를 만듬.
  • 매번 새롭게 디자인하지 말고, 재사용하기.
• 유용한
  • 페이스북은 오락물 보다 유용함. 반복되는 일상 중 하나로 효율적인 가치를 제공.
  • 따라서, 핵심 인터렉션은 간소화하고 불필요한 클릭과 낭비를 줄여야 함.
• 빠른
  • 페이스북은 사용자들의 시간을 중요하게 생각함.
  • 더 빠른 경험은 효율적이고 사용자의 노력을 줄여줌.
  • 사이트의 성능을 사용자가 알아채지 못할 정도로 빠르게 동작해야 함.
• 투명한
  • 사용자는 자신의 신원, 사진, 생각과 대화로 페이스북을 신뢰함.
  • 최대한 정직하고 투명하게 보답하기.
  • 지금 무슨 일이 일어나고 있고 왜 일어나는지 명확하고 솔직하게 설명해야 함.