[내일배움캠프] UX/UI 6기 Day 5 - 디자인 원칙의 실제 사례 찾아보기

---

 

[수업 목표]

• 사용성을 지키면서 심미적인 UI와 인터렉션을 구현할 수 있는 비주얼 역량을 기릅니다.
• 게슈탈트 심리학이 무엇인지와 세부 원리들을 이해합니다.
• UX 비주얼 디자인 원칙을 이해하고 디자인 원칙을 활용할 수 있습니다.
• UX/UI 심리학 법칙의 유용성을 알고 필요한 원칙을 찾아 학습할 수 있습니다.

---

 

💡디자인 원칙이란?

👉 인지심리학의 관점에서 디자인할 때 지켜야 할 규칙을 정해놓은 것

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

 

☑️ 디자인 원칙의 종류

• 게슈탈트 심리학
  • 게슈탈트 심리학은 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론
  • 유사성의 원리, 근접성의 원리, 폐쇄성의 원리, 연속성의 원리, 공통성의 원리 등
• UX 비주얼 디자인 원칙
  • UX에 영향을 끼치는 시각 디자인의 원칙을 정리한 것
  • 스케일, 시각적 위계, 균형, 대비 등
• UX/UI 심리학 법칙
  • 심리학 법칙은 사람이 어떻게 행동하고, 왜 그런 행동을 하는지를 설명한 법칙
  • 제이콥의 법칙, 피츠의 법칙, 힉의 법칙, 밀러의 법칙 등
• 기업의 디자인 원칙
  • 기업의 철학을 담고, 심미성과 사용성이 높은 제품을 만들 수 있도록 제시하는 가이드
  • 구글, 페이스북, 에어비앤비, 스포티파이 등 규모가 큰 기업에서는 디자인 원칙을 정한 후 이러한 원칙 아래에서 제품을 만들고 있음

 

💡 게슈탈트 심리학이란?

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

- 대상의 의미가 전체의 특성에 따라 달라진다

 

☑️ 게슈탈트 심리학의 원리에는 이런 것들이 있어요

1. 유사성의 원리 The law of similarity
   👉 크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향
      - 색상을 사용한 유사 관계 형성은 유사성의 원리 중에서 가장 강력
      - 모양이 유사한 컴포넌트는 자연스럽게 하나의 그룹이라는 느낌을 줌
      - 정보의 그룹화가 잘되면 사용자가 내용을 파악하기가 편함
2. 근접성의 원리 The law of proximity
   👉 가까운 것끼리 묶어서 지각하려는 경향
      - 색상을 사용한 유사 관계보다 여백을 사용한 근접 관계가 더 큰 힘을 가짐
3. 폐쇄성의 원리 The law of closure
   👉 공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향
      - 도형의 일부가 끊어져 있거나, 이어져 있지 않더라도 완벽한 형태로 인식
4. 연속성의 원리 The law of continuance
    👉 연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하는 경향
       - 직선이나 곡선을 따라 배열된 대상을 하나의 단위로 인식
5. 공통성의 원리 The law of common fate
    👉 같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식하는 경향
       - 주로 모션 그래픽에서 자주 사용

💡 UX 비주얼 원칙이란?

👉 UX에 영향을 끼치는 시각 디자인의 원칙을 정리한 것

 

☑️ UX 비주얼 디자인 원칙의 힘

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

☑️ UX 비주얼 디자인 원칙에는 이런 것들이 있어요

1. 스케일 Scale
   👉 상대적인 크기를 사용하여 구성의 중요도와 순위를 표시하는 것
      - 시각적으로 보기 좋은 디자인은 일반적으로 3가지 이하의 크기를 사용
2. 시각적 위계 Visual hierarchy
   👉 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것
      - 크기, 색상, 간격, 배치 등을 통해 표현
      - 명확한 시각적 위계를 만들기 위해서는 2~3개 정도의 텍스트 크기를 사용
      - 중요하다고 생각되는 요소는 채도가 높고 색상 대비가 크게, 덜 중요한 요소에는 채도가 낮고 색상 대비가 크지 않       도록 적용
3. 균형 Balance
   👉 디자인 요소 간에 적당한 배열이나 비율을 주는 것
     ☑️ 균형에 활용할 수 있는 요소들
   1. 대칭
      
      • 디자인 요소가 가상의 중심축을 기준으로 대칭으로 분포하는 것
      • 안정적이고, 정적인 느낌을 주고 싶을 때 사용
   2. 비대칭
      
      • 디자인 요소가 가상의 중심축을 기준으로 비대칭으로 분포하는 것
      • 역동적이고 신선한 느낌을 주고 싶을 때 사용
   3. 방사형
      
      • 중앙의 점을 기준으로 원형으로 배치한 것
      • 시선을 중앙에 집중시키고 싶을 때 사용
4. 대비 Contrast
   👉 눈에 띄게 구별되도록 강조하기 위해 두 요소 간의 차이를 두는 것
      - 특정 부분을 사용자에게 돋보이게 하고 싶을 때 사용
      - 크기나 색상을 사용해 두 디자인 요소 간에 뚜렷한 차이를 줌
      - 주로 명암의 차이를 주거나 색상의 차이를 주는 방법을 많이 사용
      - 너무 흐릿한 글자는 사용성을 떨어뜨림

💡 UX/UI 심리학 법칙이란?
👉 심리학 법칙은 사람이 어떻게 행동하고, 왜 그런 행동을 하는지를 설명

☑️ 심리학 법칙의 힘

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

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

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

💡 기업의 디자인 원칙이란?
👉 기업의 철학을 담고, 심미성과 사용성이 높은 제품을 만들 수 있도록 제시하는 가이드

• 기업과 제품의 비전을 공유
• 공통된 느낌을 주는 일관된 원칙을 제시
• 심미적인 UI와 인터렉션을 구현하는 동시에 사용성을 지키는 방법을 안내
• 의사결정 기준이 되고 시간을 절약

---

 

[숙제] 디자인 원칙의 실제 사례 찾아보기

 

1️⃣ 게슈탈트 심리학에서 3가지를 골라 실제 사례를 찾아보세요.

1. 유사성의 원리
   - 페이스북: 페이스북은 여러 기능을 비슷한 아이콘 디자인으로 통일함
   모든 '좋아요' 버튼은 동일한 모양과 색상으로 표시되어 사용자가 쉽게 인식하고 사용할 수 있다
   모든 알림 아이콘도 동일한 색상과 형태로 표시되어 사용자가 빠르게 중요한 알림을 확인할 수 있다
2. 페쇄성의 원리
   - 월트 디즈니 로고: 월트 디즈니 로고의 "D"와 "W"는 복잡한 곡선과 함께 불완전한 형태로 표현되지만 보는 사람은 완전한 문자로 인식
3. 공통성의 원리
   - 구글 드라이브: 파일 유형별로 아이콘을 통일하여 사용자가 파일을 쉽게 구분
   문서, 스프레드시트, 프레젠테이션 등의 파일은 각자 다른 색상과 아이콘으로 표시되지만, 동일한 스타일로 디자인되어 시각적으로 그룹화됨

2️⃣ UX 비주얼 디자인 원칙에서 3가지를 골라 실제 사례를 찾아보세요.

1. 시각적 위계
   - 넷플릭스
   콘텐츠 추천: 넷플릭스는 사용자의 선호도에 따라 주요 콘텐츠를 상단에 큰 이미지로 배치하여 시청을 유도
   부가 콘텐츠: 관련 콘텐츠나 보조 정보는 하단에 작게 배치되어 사용자가 메인 콘텐츠에 집중
2. 균형
   - 구글 홈페이지
   대칭적 균형: 구글의 홈페이지는 간단하고 대칭적인 디자인을 사용
   검색창이 화면 중앙에 배치되고, 좌우의 버튼이나 링크들이 대칭적으로 배열
   
3. 대비
   -구글 검색 결과 페이지
   링크 색상 대비: 구글 검색 결과에서 링크는 파란색, 설명 텍스트는 검은색으로 표시
   광고와 결과의 대비: 광고는 연한 색상의 배경과 테두리로 표시되어 검색 결과와 구분

3️⃣ [심화] 아래에 1가지를 골라 좋은 사례라고 생각되는 제품의 화면을 찾아보고 그 근거를 게슈탈트 심리학, UX 비주얼 디자인 원칙, UX/UI 심리학 법칙을 활용해서 설명해 보세요.

 

Youtube의 로딩 화면

 

• 게슈탈트 심리학: 간결하고 명확한 디자인으로 사용자의 기대를 충족시키고, 불안감을 줄이는 데 도움
  사용자가 로딩 중인 동안에도 불필요한 정보를 제공하지 않아, 사용자의 집중도를 높이고, 로딩 시간이 짧아 보이게 함
• UX 비주얼 디자인 원칙: 간단한 색상과 아이콘을 사용하여 시각적으로 불편함을 줄이고, 사용자의 시선을 쉽게 이끔
  로딩 중인 상태를 명확하게 표시하여 사용자가 로딩이 진행되고 있는 것을 느낄 수 있음
• UX/UI 심리학 법칙: 사용자의 기대를 충족시키고, 짧은 로딩 시간을 제공하여 사용자의 경험을 개선
  로딩 화면이 간단하고 명확하게 디자인되어 사용자가 쉽게 이해