디자인, 심리학을 만나다

오늘도 강의는 웜업 겸 멜 로빈스 영상을 보면서 시작했다.

타인과의 관계: 진정한 성장을 돕는 법

다른 사람을 억지로 끌고 가려 하는 것은 좋은 의도일 수 있지만, 오히려 그들의 독립심과 자신감을 해칠 수 있다. 진정한 성장을 돕는 것은 그들을 믿고 스스로 해낼 수 있도록 공간을 주는 것에서 시작된다. 진정한 사랑과 신뢰는 '네가 해낼 수 있다'는 믿음을 보여주는 것이다.

질투: 나를 위한 신호

질투는 단순히 나쁜 감정이 아니라, 내가 진정으로 원하는 것이 무엇인지 알려주는 중요한 신호이다. 이는 '막힌 욕망'과 같아, 무엇인가를 이루고 싶어 하는 마음이 표현된 것이다. 또한 비교는 나쁜 것이 아니라, 어떻게 사용하느냐가 중요하다. 남의 성공을 보며 고통을 느끼는 대신, '나도 저렇게 될 수 있다'는 동기 부여의 기회로 삼을 수 있다. 세상의 성공과 사랑은 한정된 '제로섬' 게임이 아니라는 것을 기억하자.

느낀 점
멜 로빈스의 Let Them 이론이 살아가는데에 정말 좋은 스탠스인 것 같다.
최근에 느낀 것인데, 내가 통제할 수 없는 부분에 대해서는 스트레스 받지 않는 것이 좋다.
이전에는 내 탓을 하고, 나에게서 이유를 찾으면서 스트레스 많이 받았었는데,
요즘은 다양한 이유가 있겠지~ 그사람이 다른 거겠지 하고 많이 마음이 가벼워진 것 같다 😯

디자인 심리: 사용자의 마음을 읽는 5가지 법칙

디자인에서 가장 중요한 것은 사용자의 마음이다. 사용자가 느끼는 불편함은 논리적인 문제보다 감정적인 영역에 가깝다. 다음 5가지 심리학 법칙은 사용자의 감정을 이해하고 더 나은 디자인을 만드는 데 도움이 된다.

1. 제이콥의 법칙 (Jacob's Law):

: 익숙한 것이 편안함을 준다.

사람들은 새로운 서비스라도 기존에 익숙한 방식으로 작동하기를 기대한다. 사용자가 이미 학습한 멘탈 모델을 존중하고, 익숙함 속에서 차별점을 만드는 균형이 중요하다. 뛰어난 디자인은 종종 새로움보다 익숙함에서 탄생한다.

2. 힉의 법칙 (Hick's Law):

: 단순함이 핵심이다.

선택지가 많을수록 결정을 내리는 데 더 많은 시간이 걸린다. 넷플릭스가 수많은 작품을 모두 보여주지 않고, AI 추천 시스템으로 필요한 순간에 필요한 옵션만 제공하는 것이 좋은 예시이다. 즉, 선택지를 줄이면 사용자의 반응 시간이 빨라진다.

3. 밀러의 법칙 (Miller's Law):

: 정보 묶음이 중요하다.

인간은 한 번에 약 7(±2)개의 정보만 기억할 수 있다. 전화번호나 신용카드 번호를 몇 자리씩 끊어서 보여주는 것처럼, 정보를 묶어서 제공하면 사용자가 훨씬 쉽게 인지하고 기억할 수 있다.한 번에 처리할 수 있는 정보의 양은 한계가 있다. 시각적 계층에 따라 정보를 묶어줄 수 있다.

4. 피크-엔드 법칙 (Peak-End Rule):

: 가장 강렬한 순간과 마지막 순간이 전체 경험을 결정합니다.

사람들은 경험의 모든 순간을 기억하는 것이 아니라, 가장 좋거나 나빴던 순간(Peak)과 마지막 순간(End)을 중심으로 기억한다. 이케아가 쇼핑의 피로를 잊게 하기 위해 출구 근처에 음식을 파는 것이 좋은 예이다. 사용자는 강렬한 경험을 전체 경험에 대한 평가로 적용하기 때문에, UX/UI 디자인에서도 모든 불편함을 제거할 수 없다면, 중요한 순간에 좋은 경험을 제공하는 것이 중요하다.

5. 폰 레스토프 효과 (Von Restorff Effect):

중요한 정보를 돋보이게 해라.

여러 비슷한 항목들 중에서 유독 다른 특징을 가진 하나가 더 잘 기억에 남는다. 목록에서 특정 버튼의 색깔을 다르게 하거나, 중요한 문구를 강조하면 사용자의 시선을 효과적으로 끌 수 있다.

인간 심리와 디자인의 관계

디자인과 인간 심리는 깊은 관계가 있다. 색채 심리학이 대표적인 예시이다.
레스토랑 인테리어에서 빨강, 주황색이 식사를 빠르게 유도하고, 초록색이 신뢰감을 주는 것처럼,
색채를 통해 브랜드의 정체성을 확립하고 사용자의 행동을 유도할 수 있다.

또 다른 예시로는 게슈탈트 이론이 있다.

게슈탈트 이론

: 사람들은 사물을 개별적인 요소가 아닌, 전체적인 패턴이나 구조로 인식하는 경향이 있다.
➡️ 전체는 개별요소의 합보다 크다.

1. 유사성: 색상, 크기, 모양이 비슷한 요소는 한 그룹으로 인식

2. 근접성: 가까이 있는 요소들은 한 그룹으로 인식 (예: 에어비앤비 UI)

3. 연속성: 부드럽게 이어지는 선이나 곡선을 하나의 형태로 인지하는 경향

4. 폐쇄성: 일부가 없어도 전체적인 형태로 인지

5. 전경-배경: 시각적 주목성이 높은 부분을 '전경'으로, 나머지를 '배경'으로 인식

인지 심리학

: 사용자의 인지 부하를 줄이는 것이 중요하다. 뇌가 피곤하면 사용자는 쉽게 떠나기 때문이다. 사용자가 배려받고 있다는 것을 인지조차 못할 만큼 자연스럽고 편안한 경험을 제공하는 것이 좋은 디자인이다.

과제

오늘은 디자인기초 섹터의 최종 과제였다.
지금까지 배운 디자인 툴과 AI로 주어진 과제를 해결하는 것이 주 목표!

1. 퍼스널 브랜딩 기획서로 나만의 브랜딩

1-1. 웹 메인페이지1-2개 (1920*1080px)

제작과정:

1. 레퍼런스 탐색 : 레이아웃 및 스타일
핀터레스트 레이아웃 참고, 웹페이지에 많이 사용되는 깔끔하면서 모던한 글래스모피즘 선택

이후 모바일로도 쉽게 적용할 수 있는 블록 형식 채택

2. 전체적인 기획 Grok 과 함께 작성 : 질의응답으로 기획서 완성.

프롬프트: 
나에 대한 가상의 퍼스널 브랜드 웹페이지를 제작하고자 해.
질의응답 방식을 통해서 먼저 브랜딩해보고 싶어.
필요한 질문을 해줘.

그록과의 작성한 기획서 Zena, Online 포트폴리오 웹페이지 기획서

프로젝트 개요
프로젝트명: Zena, Online
목적: 프로덕트 디자이너를 꿈꾸는 Zena의 포트폴리오 웹페이지로, 디자인 수업 과제, 블로그 링크, 취미 등 다양한 프로필을 소개하며 개인 브랜드를 구축.

핵심 메시지: "So many weapons. The deadliest is your faith." (가장 강력한 무기는 바로 네 신념이야) – 신념과 열정을 강조한 브랜드 이미지.

타겟 오디언스: 디자인 수업 동료 학생들 및 선생님.

목표
프로덕트 디자인에 대한 열정과 신념을 시각적으로 표현.
아직 프로젝트가 없더라도 과제와 프로필을 통해 잠재력을 보여줌.
모던하고 세련된 글래스모피즘 디자인으로 타겟 오디언스의 관심을 끌기.
간결하고 접근 가능한 포트폴리오로 Zena의 개성을 전달.

디자인 방향
시각적 스타일:
글래스모피즘: 투명한 배경, 블러 효과, 부드러운 테두리로 현대적이고 몽환적인 느낌.
색상: 블루(#3b82f6), 보라(#8b5cf6), 핑크(#ec4899) 그라데이션 배경.
폰트: 현대적이고 깔끔한 sans-serif 폰트 (예: Inter, Poppins).
레이아웃: 단일 페이지 스크롤 구조.
계층 구조: 로고 → 핵심 메시지 → About → Portfolio → Contact.
레퍼런스: Pinterest 이미지 – 중앙 정렬 텍스트, 간결한 섹션, 부드러운 그라데이션.

콘텐츠 구조
헤더 (Header): "Zena, Online" 로고 (텍스트 기반, 글래스모피즘 스타일로 투명 효과).
목적: 브랜드명 강조, 첫인상 전달.

메인 섹션 (Main Message):
내용: 핵심 메시지 "So many weapons. The deadliest is your faith." (영문 + 한글 번역: "가장 강력한 무기는 바로 네 신념이야").
디자인: 글래스모피즘 카드에 중앙 정렬, 큰 폰트로 강조.
목적: 브랜드 가치와 Zena의 신념을 강렬히 전달.

About 섹션:
내용: Zena의 간단한 소개 (프로덕트 디자인 꿈, 신념, 취미 등).
예시 텍스트: "안녕하세요, 저는 Zena입니다! 프로덕트 디자이너를 꿈꾸며, 신념과 열정을 바탕으로 창의적인 작업을 하고 있어요. 다양한 취미와 디자인 수업 과제를 통해 제 이야기를 공유합니다."

Portfolio 섹션:
내용:디자인 수업 과제 (예: UI/UX 스케치, 프로토타입).
블로그 링크 (디자인 관련 생각 공유).
디자인: 카드 형태로 작업물 배치, 각 카드는 글래스모피즘 스타일.
목적: 아직 프로젝트가 없어도 Zena의 잠재력과 다양성을 보여줌.

Contact 섹션:
내용: 이메일 (예: zena@example.com), 블로그 또는 소셜 미디어 링크.
디자인: 간결한 텍스트와 링크 버튼, 글래스모피즘 스타일.
목적: 타겟 오디언스가 쉽게 연락할 수 있도록.

3. 배경 Freepik Ai 이미지 생성으로 생성

포토샵 내부 생성형 채우기를 통해서 중앙 사각형 제거 및 주변 오브제 추가

4. 인물 이미지 Google Gemini로 생성

프롬프트: 이 사진의 주인공을 판타지 애니메이션 그림체로 바꿔줘.
사진에는 머리가 없지만 머리까지 모두 나오고, 상반신으로 제작해줘.
옷은 더 게이머처럼 만들어줘. 사이버펑크 느낌으로. 멋있게.

이후 포토샵에서 피사체선택으로 배경 제거 및 레이어마스크로 블록에 삽입

5. 포토샵으로 배치 및 작업
글래스모피즘 효과 넣는 법 서치 후 적용, 자료배치, 내용 입력 등

느낀 점
레퍼런스 서치가 정말 큰 도움이 된다. 컨셉을 잡을 때나 작업을 할 때나 모두!
또 Ai 툴이 정말 많은 도움을 주었다. 수많은 정보나, 내 생각들을 잘 정리해서 체계화해주고, 자료 수정도 용이하게 할 수 있었다!

1-2. 카드뉴스 (800*800px)

제작과정: 수업 중 배운 캔바에 글래스모피즘을 검색하여, 제작한 웹페이지와 비슷한 무드의 템플릿을 찾아 제작하였다.

느낀 점
템플릿이 편하긴 하지만, 실제 사용범위가 궁금했다. 실무에서 어떻게 사용하고 있는지 더 찾아보고 싶어졌다!

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

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

심리학 법칙 분석 및 사례 조사: 게슈탈트 이론

구체적인 사례: 넷플릭스 (Netflix) 웹사이트 및 앱 UI

법칙 적용 설명:

넷플릭스는 게슈탈트 이론의 여러 원칙들을 효과적으로 활용하여 사용자 경험을 최적화하고 있습니다. 특히 '유사성 (Similarity)', '근접성 (Proximity)', '연속성 (Continuity)', '완결성 (Closure)' 원칙이 두드러지게 나타납니다.

1. 유사성 (Similarity):

   • 적용: 넷플릭스 메인 화면에서 추천 콘텐츠들은 장르, 시청 기록, 인기도 등에 따라 비슷한 썸네일 디자인, 텍스트 스타일, 크기를 가집니다. 예를 들어, '새롭게 추가된 콘텐츠'는 특정 색상이나 아이콘으로 표시되어 다른 콘텐츠와 시각적으로 구분되지만, 해당 카테고리 내에서는 유사한 레이아웃을 유지합니다.
   • 영향: 사용자들은 유사한 시각적 요소를 가진 콘텐츠들을 하나의 그룹으로 인식하고, 특정 카테고리에 속하는 것으로 빠르게 이해합니다. 이는 정보 탐색 시간을 단축시키고, 사용자가 원하는 콘텐츠를 더 쉽게 찾을 수 있도록 돕습니다.

2. 근접성 (Proximity):

   • 적용: 넷플릭스는 각 콘텐츠의 썸네일, 제목, 간단한 설명(예: 시청 시간, 장르, 매칭률)을 서로 가깝게 배치하여 하나의 정보 묶음으로 인식하게 합니다. 또한, 각 콘텐츠가 가로 스크롤 섹션 내에서 다른 콘텐츠와 일정 간격을 유지하며 나열되어 있습니다.
   • 영향: 사용자들은 가깝게 배치된 요소들을 하나의 의미 있는 단위로 묶어서 인지합니다. 이는 콘텐츠의 상세 정보를 한눈에 파악하고, 각 콘텐츠가 독립적인 항목임을 직관적으로 이해하는 데 도움을 줍니다.

3. 연속성 (Continuity):

   • 적용: 넷플릭스의 콘텐츠 목록은 가로 스크롤 방식으로 끊임없이 이어지는 것처럼 보입니다. 화면의 끝부분에 다음 콘텐츠가 부분적으로 노출되어 있어, 사용자에게 '더 많은 콘텐츠가 있다'는 기대를 심어줍니다.
   • 영향: 사용자들은 자연스럽게 시선을 이동하며 다음 콘텐츠를 탐색하게 됩니다. 이는 사용자가 넷플릭스 플랫폼에 더 오래 머무르도록 유도하고, 다양한 콘텐츠를 발견할 기회를 제공합니다.

4. 완결성 (Closure):

   • 적용: 넷플릭스는 종종 인기 시리즈의 에피소드를 시청한 후 다음 에피소드를 자동으로 재생하거나, 끝까지 보지 않은 콘텐츠에 '다시 시청' 버튼을 제공하여 미완의 상태를 해소하려는 심리를 자극합니다. 또한, 각 콘텐츠의 썸네일은 전체 이미지가 아니더라도 사용자가 전체를 유추하여 인식하게 합니다.
   • 영향: 사용자들은 불완전한 것을 완전하게 만들려는 경향이 있어, 콘텐츠 시청을 마무리하거나 다음 에피소드를 보고 싶다는 동기를 부여 받습니다. 이는 사용자의 몰입도를 높이고 지속적인 이용을 유도하는 강력한 요소입니다.

평가 및 특징:

• 사용자 경험 개선:
  • 직관적인 정보 탐색: 유사성, 근접성 원칙을 통해 복잡한 콘텐츠 라이브러리 속에서도 사용자가 정보를 빠르고 직관적으로 이해하고 탐색할 수 있도록 돕습니다.
  • 지속적인 사용 유도: 연속성 원칙을 통해 끊임없는 탐색 경험을 제공하고, 완결성 원칙으로 시청 지속 동기를 부여하여 사용자의 이탈을 줄이고 플랫폼 사용 시간을 늘립니다.
  • 시각적 편안함: 명확하게 그룹화되고 정돈된 레이아웃은 사용자의 인지 부하를 줄여 시각적인 편안함을 제공합니다.

• 유사 사례와의 차별점:
  • 콘텐츠 중심의 UI: 다른 스트리밍 서비스들도 게슈탈트 원칙을 사용하지만, 넷플릭스는 특히 '콘텐츠' 자체를 가장 강력한 시각적 요소로 부각시키고, 이를 게슈탈트 원칙과 결합하여 사용자에게 끊임없이 새로운 콘텐츠를 발견하고 소비하도록 유도합니다.
  • 개인화된 연속성: 사용자의 시청 이력과 선호도를 기반으로 개인화된 추천 목록을 생성하고 이를 게슈탈트 원칙에 따라 배치함으로써, '나만을 위한 연속적인 콘텐츠 경험'을 제공한다는 점에서 차별점을 가집니다.
  • 예측 가능한 경험: 익숙한 UI 패턴과 게슈탈트 원칙의 일관된 적용은 사용자가 어떤 화면에서든 다음 행동을 예측하고 쉽게 적응할 수 있게 하여, 학습 곡선을 낮추고 편리함을 제공합니다.

느낀 점
심리학 이론이 실제 우리가 사용하는 많은 제품과 서비스에 적용되어 있다는 것을 알게되었다. 디자인을 할 때 심리학 이론을 근거로도 사용하고, 문제를 발견할 때도 근거로 사용할 수 있다는 것을 깨달았다!

회고

프로덕트 디자인이란 사용자 경험을 기반으로 디자인하는 것이기 때문에, 사용자의 심리와 밀접한 관계가 있다. 머릿 속에 조금씩 인지하고 있던 내용이라서 이론으로 배우는 것이 재미있었고, 실제 데이터와 함께 디자인에 좋은 근거가 될 수 있다고 생각한다.! 이제 한 섹터가 끝났는데, 앞으로도 부트캠프 여정이 기대된다 ㅎㅎ 화이팅 ~

#넌 할 수 있어