DAY+10 [ 디자인 이론과 심리학 ]

안녕하세요, 주-주스 입니다! 🍹

 

(っ˘▿˘)(˘▿˘)˘▿˘ς)
 !! 캠프 10일차  !!

*⋆꒰ঌ(⁎ᴗ͈ˬᴗ͈⁎)໒꒱⋆*

 

오늘은!! 

 

디자인 이론과 심리학디자이너로서

알아야하는 각종 디자인 이론과 심리학에 대해 공부한 내용을 포스팅하겠습니다!!

 

---

UX 디자인 필수 법칙 5가지 + 3가지 : 사용자의 마음을 사로잡는 심리학

 

사람의 마음을 놓치면 놉놉! 이성적이고 싶지만..사실 그 이성적인 결정 조차 심리에서 나온것..?

 

1. 제이콥의 법칙
2. 힉의 법칙
3. 밀러의 법칙
4. 피크/엔드 법칙
5. 폰 레스토프 효과

 

뛰어난 UX(사용자 경험) 디자인은 단순히 아름다운 인터페이스를 넘어, 사용자의 심리와 행동 패턴을 이해하는 데서 시작됩니다. 사용자가 우리 서비스를 어떻게 느끼고 기억할지를 예측하고 설계할 수 있다면, 평범한 제품도 특별한 경험으로 바꿀 수 있습니다.

디자인과 심리학의 만남: 사용자의 마음을 사로잡는 8가지 디자인 법칙

웹사이트 디자인은 단순히 시각적으로 아름답게 만드는 것을 넘어, 사용자가 가장 편안하고 효율적으로 정보를 얻고 목표를 달성하도록 돕는 과정입니다. 이때 심리학은 사용자의 무의식적인 행동과 인지 과정을 이해하는 강력한 도구가 됩니다.

오늘은 웹사이트 디자인에 적용되는 핵심 심리학 원리 8가지를 소개합니다.

---

1. 익숙함의 존중: 제이콥의 법칙 (Jakob's Law)

"사용자는 자신이 이미 알고 있는 것과 유사한 경험을 가진 서비스에서 더 편안함을 느낍니다."

사람들은 대부분의 시간을 다른 웹사이트나 앱에서 보냅니다. 따라서 새로운 서비스를 만났을 때, 이미 익숙해진 패턴과 행동 방식을 그대로 적용하려 합니다. **사용자의 멘탈 모델(Mental Model)**을 존중하는 디자인이 중요한 이유입니다.

• 적용 사례: 웹사이트의 로고를 클릭하면 홈으로 이동하기, 검색창에 돋보기 아이콘 사용하기 등은 사용자가 이미 학습한 익숙한 패턴을 존중하는 디자인입니다.

---

2. 단순함의 힘: 힉의 법칙 (Hick's Law)

"사용자가 선택할 수 있는 옵션의 수가 늘어날수록, 결정을 내리는 데 걸리는 시간도 비례해서 증가합니다."

이 법칙은 선택지가 너무 많으면 사용자가 인지 부하를 느껴 **'결정 마비(Decision Paralysis)'**에 빠질 수 있음을 경고합니다. 복잡한 결정을 쉽게 만들도록 도와주는 것이 핵심입니다.

• 적용 사례: 복잡한 필터링 옵션을 한 번에 보여주기보다, 핵심 옵션만 먼저 보여주고 '상세 필터' 기능을 통해 추가 옵션을 제공하는 방식이 좋습니다.

---

3. 정보 그룹화: 밀러의 법칙 (Miller's Law)

"인간이 한 번에 처리하거나 기억할 수 있는 정보의 양은 7 ± 2개 정도입니다."

우리 뇌는 5~9개 정도의 정보 덩어리(Chunk)를 가장 효율적으로 처리합니다. 이 한계를 넘어서는 순간, 사용자는 정보를 제대로 기억하지 못하고 피로감을 느끼게 됩니다.

• 적용 사례: 신용카드 번호를 4자리씩 끊어 입력하게 하는 것, 웹사이트 메뉴를 '회사소개', '제품', '고객지원' 등으로 범주화하는 것이 대표적인 예입니다.

---

4. 경험의 절정: 피크-엔드 법칙 (Peak-End Rule)

"사람들은 경험의 전 과정을 기억하는 대신,
가장 강렬했던 순간(Peak)과 마지막 순간(End)의 감정에 따라 전체 경험을 판단합니다."

이 법칙은 사용성이 약간 떨어져도 좋은 평가를 받을 수 있는 이유를 설명합니다. 사용자는 사소한 불편함보다 가장 좋았던 순간의 감정과 마지막 순간의 깔끔함을 더 강하게 기억하기 때문입니다.

• 적용 사례: 결제를 완료했을 때 긍정적인 애니메이션과 메시지를 보여주거나, 회원가입 시 예상치 못한 환영 쿠폰을 제공하는 것은 사용자의 기억에 좋은 인상을 남깁니다.

---

5. 돋보임의 힘: 폰 레스토프 효과 (Von Restorff Effect)

"비슷한 여러 개의 항목 중에서 유독 다른 하나가 있을 때, 그 항목이 더 잘 기억됩니다."

이 법칙은 특정 정보를 효과적으로 강조하여 사용자의 주의를 끌어야 할 때 매우 유용합니다. 하지만 무분별한 강조는 오히려 혼란을 초래할 수 있습니다. **"모든 것을 강조하면 아무것도 강조되지 않는다"**는 것을 기억해야 합니다.

• 적용 사례: 여러 개의 구독 플랜 중 '가장 인기 있는' 플랜에만 특별한 색상이나 라벨을 붙여 강조하는 것.

---

6. 전체는 부분의 합보다 크다: 게슈탈트 이론 (Gestalt Theory)

게슈탈트 이론은 "전체는 개별 요소의 합보다 크다"는 핵심 원리를 담고 있습니다. 인간의 뇌는 개별적인 요소들을 따로 인식하기보다, 이들을 하나의 의미 있는 **'전체'**로 묶어 인식하려는 경향이 있습니다. 이 이론은 여러 원리로 나뉘어 디자인에 적용됩니다.

6-1. 근접성의 원리 (Proximity)

"서로 가까이 있는 요소들은 하나의 그룹으로 인식됩니다."

• 적용 사례: 상품 이미지, 이름, 가격, '장바구니 담기' 버튼을 서로 가깝게 배치하여 사용자가 이들이 하나의 정보 묶음이라는 것을 직관적으로 이해하게 합니다.

6-2. 유사성의 원리 (Similarity)

"모양, 색상, 크기 등이 비슷한 요소들은 하나의 그룹으로 인식됩니다."

• 적용 사례: 동일한 기능을 하는 버튼들을 같은 색상으로 통일하거나, 같은 유형의 정보를 같은 글꼴과 크기로 표시하여 사용자가 쉽게 정보를 분류하도록 돕습니다.

6-3. 연속성의 원리 (Continuity)

"시각적으로 끊어지지 않고 이어지는 요소들은 하나의 그룹으로 인식됩니다."

• 적용 사례: 회원가입 폼의 진행 막대(Progress Bar)를 사용하면, 사용자는 현재 진행 상황을 연속적인 과정의 일부로 인식하고 다음 단계로 나아갈 동기를 얻습니다.

6-4. 폐쇄성의 원리 (Closure)

"일부 정보가 없더라도, 뇌는 전체적인 형태를 완성하여 인식합니다."

• 적용 사례: 로딩 애니메이션의 원이 다 채워지지 않은 반원 형태라도, 사용자는 이를 '돌아가는 원'으로 인식합니다. 카드 레이아웃에서 반쯤 잘린 카드는 '뒤에 더 많은 콘텐츠가 있다'는 힌트가 됩니다.

6-5. 공통 영역의 원리 (Common Region)

"하나의 시각적 경계 안에 있는 요소들은 하나의 그룹으로 인식됩니다."

• 적용 사례: 뉴스 웹사이트에서 '주요 뉴스'를 테두리나 배경색이 있는 박스 안에 묶어 놓으면, 사용자는 그 내용들이 서로 연관되어 있음을 쉽게 파악합니다.

6-6. 공통 운명의 원리 (Common Fate)

"같은 방향으로 움직이는 요소들은 하나의 그룹으로 인식됩니다."

• 적용 사례: 메뉴 버튼을 클릭했을 때 하위 메뉴들이 부드럽게 한 방향으로 펼쳐지는 애니메이션은 사용자가 이들이 하나의 그룹으로 함께 작동한다고 인식하게 합니다.

---

7. 현실의 반영: 대응의 원리 (Principle of Correspondence)

"실제 세계의 사물이나 개념에 대한 사용자의 멘탈 모델을 디자인에 반영해야 합니다."

사용자가 물리적인 세계에서 이미 알고 있는 경험과 시각적 단서를 디지털 인터페이스에 적용함으로써, 새로운 것을 배우지 않고도 직관적으로 서비스를 사용할 수 있게 됩니다.

• 적용 사례: 파일 삭제를 '휴지통' 아이콘으로 표현하거나, 음량 조절에 '슬라이더'를 사용하는 것, 우버 앱에서 지도 위의 작은 차량 아이콘을 통해 주변 택시를 파악하는 것이 이에 해당합니다.

---

8. 전경과 배경: 전경-배경 원리 (Figure-Ground)

"사람은 사물을 인식할 때 집중하는 부분(전경)과 그 뒤에 깔린 부분(배경)을 구분해서 봅니다."

시각 디자인에서 무엇이 전경이고 무엇이 배경인지 명확하게 해줘야 사용자가 중요 정보를 쉽게 파악할 수 있습니다.

• 적용 사례: 버튼이 배경과 확실하게 대비되는 색상으로 만들어져야 사용자가 '이건 누를 수 있는 거구나'라고 인식합니다. 모달 팝업이 떴을 때 뒷배경을 어둡게 처리하여 사용자의 주의를 모달에 집중시키는 것도 이 원리를 활용한 것입니다.

---

 

최고의 사용자 경험(UX)은 사용자가 디자인에 대해 생각하지 않도록 만드는 것입니다. 사용자는 자신이 어떤 행동을 하는지조차 의식하지 못할 만큼 자연스럽고 부드러운 흐름 속에서 목표를 달성할 때, 최고의 만족감을 느낍니다. 이는 사용자의 뇌가 정보를 처리하는 데 드는 정신적 노력의 양, 즉 인지 부하(Cognitive Load)를 최소화하는 것에서 시작됩니다.

인지 부하란 무엇인가?

인지 부하란 우리 뇌가 정보를 처리하는 데 드는 정신적 노력을 의미합니다. 웹사이트나 앱이 복잡하고 혼란스러울수록, 사용자는 '이 버튼은 무슨 기능이지?', '이 정보는 어디에 있지?'와 같은 질문을 끊임없이 던지게 됩니다. 이처럼 사용자가 목표를 달성하기 위해 불필요하게 많은 생각을 하도록 만드는 것이 바로 과도한 인지 부하입니다.

훌륭한 UX 디자인은 사용자가 문제를 해결하도록 강요하는 것이 아니라, 문제가 생기지 않도록 미리 예방합니다. 마치 잘 설계된 도로처럼, 사용자가 어디로 가야 할지 고민할 필요 없이 자연스럽고 부드러운 흐름을 따라 목표에 도달하게 하는 것이죠.

인지 부하를 줄이는 디자인 원칙

디자이너는 사용자의 여정(User Journey)을 세밀하게 분석하여, 사용자가 어려움을 겪을 만한 잠재적 장애물을 찾아내고 설계 단계에서 이를 제거해야 합니다. 인지 부하를 줄이기 위한 핵심 원칙들은 다음과 같습니다.

• 복잡한 옵션 제거: 힉의 법칙(Hick's Law)처럼, 너무 많은 선택지는 사용자를 결정 마비에 빠뜨립니다. 핵심적인 옵션만 보여주고, 나머지는 숨겨두는 것이 인지 부하를 줄이는 방법입니다.
• 명확한 시각적 단서: 게슈탈트 원리(Gestalt Theory)처럼, 시각적으로 명확한 계층 구조와 그룹화를 통해 사용자가 정보를 쉽게 인식하도록 돕습니다.
• 예측 가능한 인터페이스: 제이콥의 법칙(Jakob's Law)처럼, 사용자가 이미 익숙한 패턴과 멘탈 모델을 존중하여 새로운 학습에 대한 부담을 덜어줍니다.

인지 부하 최소화의 성공 사례: 구글과 아마존

'생각하게 만들지 마라'는 원칙을 가장 잘 실현한 서비스로는 구글 검색이 있습니다. 사용자는 구글을 사용할 때 '어떻게 검색해야 하지?'라고 고민하지 않습니다. 그저 자연스럽게 검색창을 찾아 키워드를 입력합니다. 이처럼 사용자가 의식적인 노력 없이도 목표를 달성하게 만드는 것이 바로 인지 부하를 최소화하는 디자인의 힘입니다.

아마존(Amazon) 역시 인지 부하를 최소화하여 사용자 경험을 최적화한 훌륭한 사례입니다.

• '1-Click' 주문: 아마존은 복잡한 결제 과정을 단 한 번의 클릭으로 단순화하여 사용자의 인지 부하를 극적으로 줄입니다.
• 정보의 그룹화 및 계층화: 밀러의 법칙(Miller's Law)을 충실히 따라, 수많은 상품 정보를 효율적으로 그룹화하고 중요한 정보를 눈에 잘 띄는 곳에 배치하여 사용자가 원하는 정보를 쉽게 찾도록 돕습니다.
• 개인화된 추천: 힉의 법칙(Hick's Law)을 적용한 AI 추천 시스템은 사용자가 수백만 개의 상품 중에서 무엇을 골라야 할지 고민하는 '선택 과부하'를 방지합니다.

아마존은 디자인을 통해 사용자에게 "우리는 당신이 원하는 것을 알고 있으며, 그것을 쉽게 찾도록 도와줄게요"라고 말합니다. 이는 사용자가 디자인 자체에 대해 생각하는 대신, 자신의 목표(상품 구매)에만 집중할 수 있도록 돕습니다.

결론적으로, 디자이너는 사용자의 뇌 용량을 초과하는 정보를 제공하지 않도록 노력해야 합니다. 사용자가 디자인에 대해 고민하는 시간이 적을수록, 그들은 자신이 원하는 목표에 더 집중할 수 있게 됩니다. 사용자 경험의 완성은 사용자가 아무것도 남기지 않는 것에서 시작됩니다.

 

---

오늘의 실습 !

1. 퍼스널 브랜딩 기획서로 파이어플라이, 익스프레스, 포토샵, 일러스트 중 원하는 툴을 사용하여 나만의 브랜딩

=( 본인 브랜딩 주-주스 https://joojuice.tistory.com/ )

⬇️ 웹 메인페이지1개 (1920*1080px)

 

편집툴 : Adobe Pothoshop 
이미지, 심볼/로고 : Gemini

1. 프로젝트 개요

프로젝트명: 퍼스널 브랜딩 웹 메인 페이지 디자인
브랜드명:주-주스 (JOOJUICE)
컨셉: 열정이 식지 않는 오렌지 주스

본 프로젝트는 '추진력'과 '열정'이 넘치는!  컨셉으로 브랜딩하여,
긍정적이고 신뢰할 수 있는 프로덕트 디자이너로서의 이미지를 구축하고자 기획되었습니다.

2. 디자인 컨셉 및 의도

① '오렌지 주스' 컨셉 시각화
웹사이트의 메인 화면은 '주-주스'라는 브랜드 아이덴티티를 명확하게 보여주는 데 집중했습니다. Pantone 14-1142 'Marigold'와 **'Tangerine Tango'** 색상을 메인 컬러로 사용하여, 상큼하고 활기 넘치는 '오렌지 주스'의 느낌을 시각적으로 표현했습니다. '주-주스' 로고와 '주수현' 이름, 그리고 열정이 식지 않는 주스처럼, 꾸준히 성장하겠습니다! 는 슬로건을 배치해, 방문자가 한눈에 브랜드의 핵심 메시지를 이해할 수 있도록 했습니다!

② 프로덕트 디자이너로서의 전문성
'오렌지 주스' 컨셉이 자칫 가볍게 느껴지지 않도록, Pantone 19-3908 'Moonless Night' 색상을 사용하여 전문성과 신뢰성을 더했습니다. 메인 화면의 오른쪽에 배치된 노트북 이미지와 손으로 타이핑하는 모습은 '주수현'님이 가진 실행력과 추진력을 상징합니다. 화면 속 UX/UI 와이어프레임은 프로덕트 디자이너로서의 실무 역량을 직관적으로 보여주며, 컨셉과 전문성을 동시에 확보했습니다.

③ 글꼴 및 레이아웃
제목에는 힘 있고 가독성 높은 글꼴을 사용해 이름을 강조했습니다. '여기어때 잘난체'로 굵고 간결한 글꼴을 사용하여 역동적인 느낌을 주었으며, 그 아래의 본문에는 'Gmarket Sans TTF' Light 글꼴과 같이 안정적인 서체를 사용해 내용의 가독성을 높였습니다. 전체적으로 깔끔하고 미니멀한 레이아웃을 통해 방문자가 원하는 정보에 쉽게 접근할 수 있도록 설계했습니다.

++ 손 이미지는 포토샵 내 ai채우기로 펜을 잡은 손을 만들어서 클릭을 유도하기 위해 웹사이트에 넣어봤습니다!

 

⬇️ 카드뉴스 (800*800px)

 

2. 심리학 법칙 분석 및 사례 조사

수업에서 배운 심리학 법칙 중 하나를 선택하여,
해당 법칙이 실제 디자인에 어떻게 적용되고 있는지 구체적인 사례를 조사하고 분석

• 선택한 심리학 법칙
• 구체적인 사례
• 법칙 적용 설명
• 평가 및 특징

구체적인 사례 :  버거킹 모바일 맵

버거킹 모바일 앱은 '킹오더'와 메뉴 UI를 통해 사용자의 직관적인 메뉴 탐색 및 주문 과정을 강점으로 내세웁니다! 이 앱은 **게슈탈트 원리**를 효과적으로 적용하여 사용 편의성을 극대화하고 있습니다.

 

 

가.  근접성(Proximity)의 원리: 직관적인 메뉴 UI

• 원리 적용 설명: 버거킹 앱의 메뉴 화면은 각 메뉴의 '제품 이미지', '메뉴명', '가격', 그리고 '주문/상세보기 버튼'을 하나의 시각적 그룹으로 묶어 배치하고 있습니다. 각 그룹은 충분한 여백을 통해 다른 메뉴 그룹과 명확하게 분리되어 있어, 사용자는 각 메뉴의 정보를 한눈에 파악할 수 있습니다. 사용자는 화면을 스캔할 때, 각 정보를 별도로 인지하는 대신, 근접성에 따라 하나의 메뉴에 대한 정보로 즉시 인식합니다.
• 사용자 경험 개선 및 특징: 이러한 그룹화된 정보 인식은 사용자가 원하는 메뉴를 찾는 데 필요한 인지적 부하를 최소화하고 탐색 시간을 단축시킵니다. 모든 관련 정보가 한곳에 모여있으므로, 사용자는 메뉴를 비교하고 선택하는 과정을 더 빠르고 효율적으로 진행할 수 있습니다. 이는 복잡한 패스트푸드 메뉴를 '쉬운 주문' 경험으로 재구성하는 핵심적인 역할을 합니다.

나.  폐쇄성(Closure)의 원리: 원클릭 결제

• 원리 적용 설명: 버거킹의 '킹오더' 시스템은 복잡한 결제 과정을 하나의 행동으로 '폐쇄'시켜, 사용자가 불필요한 인지적 노력을 들이지 않고 빠르고 완결된 경험을 하게 만듭니다.
• 사용자 경험 개선 및 특징: 이는 장바구니 이탈률을 현저히 낮추는 데 효과적입니다. 사용자는 길고 복잡한 결제 단계를 거치는 대신, 마치 하나의 완결된 행동처럼 간단하게 주문을 완료할 수 있습니다.

다.  유사성(Similarity)의 원리: 일관된 인터페이스

• 원리 적용 설명: 버거킹 앱의 UI는 전반적으로 일관성을 유지하고 있습니다. 메뉴 커스텀 옵션을 이미지나 버튼으로 시각화하여 사용자가 헷갈리지 않고 선택할 수 있도록 돕습니다. 또한, 모든 메뉴 버튼이 유사한 형태와 색상으로 구성되어 있습니다.
• 사용자 경험 개선 및 특징: 이러한 일관성은 사용자가 앱의 다양한 기능을 혼동 없이 사용할 수 있도록 돕습니다. 복잡한 커스텀 메뉴 옵션이 사용자 친화적인 형태로 통일성 있게 재구성되어, 사용자는 앱의 사용법을 빠르게 익히고 직관적으로 조작할 수 있습니다.

---

[ 평가 및 특징 ]

버거킹은 2021년 리브랜딩을 통해 브랜드의 본질인 '불맛'과 '진정성'을 시각적으로 명확하게 드러냈습니다. 동시에 모바일 앱에서는 게슈탈트 심리학 원리를 적용하여 디지털 사용자 경험(UX/UI)을 크게 개선했습니다. 특히, 근접성의 원리를 활용한 메뉴 UI는 사용자의 인지 부하를 줄여 '쉬운 주문'이라는 강력한 경쟁 우위를 확보하는 데 성공했습니다.

 

성공적인 리브랜딩 안착을 위해, 'Flame Sans' 서체와 따뜻한 색감을 활용한 온/오프라인 캠페인을 지속적으로 전개하여 브랜드의 새로운 이미지를 확고히 할 것을 제언합니다. 이는 '진정성 있는 헤리티지'라는 메시지를 소비자에게 각인시키고, 디지털과 오프라인 경험을 완벽하게 연결하는 중요한 역할을 할 것입니다.

---

[ 10일차 소감 🌻 ]

 이번 학습을 통해 성공적인 디자인은 사용자의 심리를 깊이 이해하고, 그들의 무의식적인 행동까지 예측하여 설계하는 과정이라는 점을 크게 깨달았습니다! 특히, 게슈탈트 원리와 같은 심리학 이론들이 복잡한 사용자 경험을 단순하고 직관적으로 만드는 데 얼마나 중요한지 알게 되었습니다. 앞으로는 이러한 원리들을 잘 응용하여, 사용자가 생각하지 않아도 편안하고 만족스럽게 사용할 수 있는 디자인을 만들고 싶습니다~! 그리고 웹페이지를 만들 때 진짜 많은 레퍼런스를 봤는데도.. 크게 만족 하진 않지만 열심히 만들어 봤습니다! 생각보다 시간에 쫓기는 게 느껴졌고 학습내용을 정리하기도 전에 시간이 다가서 허탈했습니다 ㅠㅠ 그래도!! 마무리를 깔끔하게 했으니 나름 만족합니다 ㅎㅎ 다음엔 더 손빠른 디자이너가 되겠죠!! 1일차부터 10일차까지 1챕터가 지났다고 합니다!! 성실하게 과제를 끝냈으니 너무 성취감이 큽니다!!

 

그리고 무려.. 스터디도 운영하게 되었습니다 우와아앙~! ♪(๑ᴖ◡ᴖ๑)♪

 

사실.. 팀장 역할은 지이인짜 많이 했는데 이렇게 스터디를 주최하는 건 태어나서 처음이라.. 만들면서도 아.. 무도 안 오면 어쩌지.. 하고 주저했지만 열심히 커릴큘럼 짜고 어떻게든 해냈답니다!! 많은 분들이 관심 가져주셔서 감사했어용!! 

 

조금더 캠프 내 사람들과 친해질 수 있는 계기도 되고 이미 내적친밀감 가득하신 분들도 계시고 네트워킹 데이처럼 대면으로 만나고 싶습니다 ㅠㅠ 프로덕트 디자인의 인맥(!)이 넓혀지겠죠 헤헤 다 같이 공부하며 포기하지않고 목표를 향해 나아가보고 싶네용~🥰

 

---

= 오늘의 한 마디(?) =
비교= 동기부여 / 영감 / 새로운시야
기본적인 흐름과 패턴!
익숙함 속에서 차별화 하기