(DAY10) 디자인 심리학, 디자인 기초 챕터 마무리.

 

안녕하세요 :)

오늘은 디자인에 사용되는 UX 심리학에 대해 배웠습니다. 

지난 3월에 UX 인지심리학 스터디에 참여했던 경험이 있어서 재밌게 들었습니다.

그리고 오늘은 그동안 배웠던 디자인 기초를 마무리 짓는 날입니다.

내일부터는 다음 챕터로 넘어간다고 하더라구요. 😮

내일 수업이 기대 됩니당✨

 

---

 

 

 

✏️오늘의 학습

디자인을 더 좋게 만드는 심리학 법칙 알기

→ 제이콥의 법칙, 힉의 법칙, 밀러의 법칙, 피크/엔드 법칙, 폰 레스토프 효과, 게슈탈트 이론

 

실습 1) 지금까지 배운 모든툴 활용하여 나만의 퍼스널 브랜딩 작업하기

            웹페이지 1장 (1920x1080) , 카드뉴스 1장 (800x800)

실습 2) 심리학 법칙 분석 및 사례 조사하기

 

 

 

 

 

 

📖오늘의 핵심

좋은UX란 인지부하를 줄이는 것, 배려에 대해 사용자가 눈치채지 못하는 것.

진짜 좋은UX는 사용자에게 아무것도 안남기는 것이다.

 

 

 

 

 

" 인생은 경쟁이 아니라 다른 사람과 함께 플레이하는 것이다.

질투는 당신의 막힌 욕망과 꿈이다.

사람 쫓아다니며 에너지를 낭비하지 마세요. "

(렛뎀 이론 中)

 

 

💡멜로빈스 인터뷰 내용 중에서 "질투의 홍수를 멈추는 법을 몰랐다." 는 말에 공감했다. 그거 어떻게 멈추는 건데...

비교는 자연스러운 것임을 인정하자. 대신 건강한 마인드로 부러우면 부럽다고 솔직하게 말하고, 그들의 좋은 점을 배우자.

 

 

📝수업 내용 메모장

 

앱 사용감이 불편한 이유?
디자이너가 사람의 마음을 놓쳐서.  감정을 잘 캐치하는 것이 충성 고객을 확보하는 길이다.

 

 

 

제이콥의 법칙
익숙한 것이 중요! 멘탈모델 고려하기
사용자의 기본적인 흐름과 패턴을 지켜줘야 한다. → 이 얘기 듣고 디자인시스템가이드 공부해야겠다는 생각이 들었다.

★익숙함 속에서 차별화하기
뛰어난 디자인은 종종 새로움보다 익숙함에서 나온다. 

 

힉의 법칙
단순함의 중요성!
사용자에게 선택을 할 옵션을 많이 줄수록 반응의 시간도 증가한다
필요한 순간에 필요한 옵션만 제공하는 것이 핵심!

 

힉의 법칙 사례 : 당근마켓 앱 동네 설정 기능
(가까운동네 ~ 먼동네를 4단계로만 제공함)
제한된 선택을 주는것같지만 '너가 이 화면을 통제할 수 있어.' 와 같은 사용자에게 통제감도 줄 수 있음

 

밀러의 법칙
정보 묶음이 중요함. 7+-2개 → 5 ~ 9개가 적당하다.
ex) 온보딩 페이지 만들 때 막 12장씩 하면 기억못함
→ 의미있는 덩어리(chunk)로 그룹화해서 기억하게끔 해준다.
ex) 결제 내역 화면을 날짜별로 그룹핑했다.

 

피크/엔드 법칙
강렬한 순간의 중요성. 가장 강렬한 순간과 마지막 순간에 대한 것을 중심으로 기억함

예시 사례) 이케아 매장 경험
맛있는 미트볼+딸기잼으로 기억을 미화시킴

★ 피크엔드법칙 활용하는 법 ★
강렬한 순간이 있어야 좋은 디자인 !
내 디자인의 하이라이트, 마지막 단계의 느낌을 잘 설계하면 좋은 디자인이라는 경험을 준다!
(포트폴리오에 활용하기★★)

 

 

폰 레스토프 효과
중요한 정보를 더 돋보이게 해!
여러 비슷한 항목 중에서 유독 다른 특징을 가진 하나가 기억에 남음.

ex) 구독서비스 프리미엄/스탠다드/베이직 중에 스탠다드를 팔고 싶으면 스탠다드에 색상으로 강조를 주기
ex 2) 알림 뱃지 (카톡 쌓이면 우측상단에 빨간 동그라미)

 

게슈탈트 이론
전체는 개별요소의 합보다 크다.
사람들이 사물을 개별적인 요소로 보는 것이 아니라, 전체적인 패턴이나 구조로 인식하는 방식을 설명하는 이론임.

 

    근접성의 원리

    근접한 정도에 따라 구분짓고, 그룹짓는 사람들의 심리 때문에 근접성의 원리 라고 함
    근접성 원리 핵심은 '거리'.
     요소들 간에 거리를 가깝게 하거나 멀게 하여 그룹을 명확하게 구분해줌

 

    유사성의 원리

     사람들은 유사성 안에서 패턴을 찾는다
     사람들은 무엇을 볼 때, 그 안에 유사한 요소들을 찾고 그것들을 그룹화 하려는 경향이 있다.

 

    대응의 원리

  같은 방향으로 움직이는 요소들은 같은 그룹으로 인식된다.
   Mapping = 대응.   두 요소간의 관계성을 뜻함
   무언가를 작동할 때 그로 인한 결과가 어떻게 될지 쉽게 예측이 가능하도록 해주는 것
     ex) 실제 세상의 사물을 UI에 활용하는 것들... 파일삭제 의미 아이콘은 늘 휴지통임.
         실제 사물과 기능을 대응시킴
         ex 2) 우버 : 물리적인 세상을 디지털세계에 맵핑해놨음

 

    연속성

     연속적으로 이어져 직선 또는 곡선을 이루는 시각적 요소를 인지하는 경향.

    폐쇄성

     시각 요소에서 일부가 누락되어도 기존의 관념과 연결하여 하나의 형태로 묶어 지각하는 경향

    전경 - 배경
     형태를 지각할 때 시각적 주목성이 있는 부분을 전경으로, 그 외의 부분을 배경으로 지각하려는 경향
     ex) 모달, 레이어 팝업

 

 

 

 

인지심리학 (인지부하와 디자인)
좋은 UX → 인지부하를 줄이는 것
배려에 대해 사용자가 눈치채지 못하는 것
그들이 눈치채지 못하게 문제를 예방하고 수백가지 중요한 결정들이 설계 단계에서 이뤄져야 한다.

 

인지과부하 
혼란스러운 옵션, 인터페이스 등 사용자가 끊임없이 문제 해결을 해야 하는 압박을 받음. 

이 과도한 생각을 '인지과부하' 라고 부른다.

 

 

 

 

실습 1) 지금까지 배운 모든툴 활용하여 나만의 퍼스널 브랜딩 작업하기

 

 

(왼쪽) 레퍼런스 이미지, (오른쪽) 실습 결과물

 

 

🍀왼쪽 레퍼런스 이미지를 선택한 이유

: 자연 중에서 숲을 좋아하고, 초록색을 좋아하는데 그 느낌이 잘 살려 있었고, 아래에는 바다 사진을 활용해서 바다처럼 넓고 무한한 가능성을 가진 디자이너라는 것을 표현할 수 있을 것 같아서 마음에 들었다. 평소에 어떤 시각적인 작업물을 볼 때 현실과 판타지의 적절한 조합을 좋아하는 편인데, 저 레퍼런스 이미지는 현실에 있는 자연 이미지 위에 올라간 하얀 캘리그라피 느낌의 펜선이 살짝 비현실적인? 디지털 세계에 한 획을 슥 그은 것 같은 무드가 마음에 들어서 내 퍼스널 브랜딩 무드로 선택했다.

 

 

 

 

사실 퍼스널 브랜딩과 포트폴리오의 차이점을 명확히 몰랐다.

그래서 퍼스널 브랜딩 하는 법에 대해 ai에게 물어봤다.

 

(사용 툴 : 퍼플렉시티, 답변 👇🏻)

✨퍼스널 브랜딩 하는 법

핵심 시작 단계
자신이 추구하는 브랜드의 정체성과 원하는 이미지를 확실히 정의해야 한다.
주요 타깃(관객)뿐 아니라 본인만의 가치와 전문성을 시각적으로 표현할 테마와 스타일을 구상한다.
이 과정에서 본인의 삶의 스토리나 독창적인 작업물·성공 경험 등을 녹여, 브랜드의 메시지와 감성을 요약해보는 것이 효과적이다.

웹 메인페이지 디자인 원칙
방문자가 가장 먼저 보게 되는 첫 화면에서 개성과 진정성을 드러내는 인트로 이미지, 자기소개, 대표 슬로건을 배치하는 것이 좋다.
깔끔하고 직관적인 네비게이션, 포트폴리오 섹션, 서비스 안내, 연락처, 고객 후기 등 핵심 콘텐츠를 여백과 함께 배열하라.
색상과 폰트, 이미지 등 시각 요소는 브랜드의 독특함과 통일성을 강조하도록 선택한다.

 

실질적 행동 가이드
먼저 ‘브랜드 아이덴티티 보드’부터 만들자. 컬러, 폰트, 본인의 시각적 페르소나, 메시지 등을 한눈에 볼 수 있도록 정리한다.
자신의 스토리와 작업물을 바탕으로 디자인 콘셉트(테마, 분위기, 감성)을 시각화하며, 초안 스케치를 반복하면서 점차 구체화한다. 이미 성공한 퍼스널 브랜드 웹·카드뉴스 사례를 참고해 트렌드와 본인의 차별화 포인트를 조합하자.

전문가 팁
일관된 시각적·언어적 스타일을 유지하면 브랜드 인지가 높아진다.
본인의 개성과 실력을 가장 잘 보여주는 대표 작업 이미지를 메인에 두어 첫인상을 확실히 각인시키라.
브랜딩 스타일 가이드(컬러, 로고, 메시지 등) 문서를 만들어 이후에도 일관성 있는 디자인을 유지하자.
이 모든 과정을 통해 명확한 자기 콘셉트와 차별화된 디자인 감각을 바탕으로, 브랜드의 첫인상과 전문가적 면모를 동시에 효과적으로 전달할 수 있다.

 

퍼스널 브랜딩을 진행하기 위해 챗GPT에게 퍼스널 브랜딩을 위해 내게 필요한 질문을 뽑아내서, 그 질문에 대해 답변하는 시간을 초반에 가졌다. 내 답변을 분석해서 나오는 키워드를 바탕으로 전체적인 내용과 감성을 잡아서 디자인을 진행했다.

 

"Design with empathy, grow with creativity, connect with sincerity."

라는 슬로건이 만들어졌고, 내가 추구하는 작업 방식의 의미를 담았다.

 

웹페이지는 만들어 본 적이 없어서 감을 잡기가 좀 어려웠다. 최대한 수업시간에 피드백을 받고 싶어서 중간에 봐준다고 했을 때 급하게 냈다.ㅋㅋㅋㅋㅋㅋㅋ

위에 결과물은 숲 사진에 그라디언트로 좀 어둡게 해보라는 피드백을 반영해서 수정한 수정본이다. 아주 살짝 변하긴 했지만, 그 작은 차이들이 퀄리티를 좌우하는 것 같다.

 

다른 분들께서 해외 포트폴리오 같다고 해주셔서 넘 감동이었다 😭

사실 예전부터 반응형 웹페이지 제작에 관심이 많았는데, 이번 기회에 포트폴리오 웹페이지를 제대로 만들어보고 싶다.

 

 

 

 

 

(왼쪽) 레퍼런스 이미지, (오른쪽) 실습 결과물

 

 

카드뉴스는 Canva에서 마음에 드는 템플릿의 폰트 무드를 가져왔고, 전체적인 레이아웃과 디자인은 핀터레스트에서 레퍼런스 이미지를 찾아서 거의 똑같이 만들어본다는 느낌으로 진행했다.

 

파이어플라이로 나를 상상하면서 프롬프트를 적어서 인물을 뽑아냈다. (자연스러운 진갈색 머리, 진초록의 후드티, 캐주얼하면서 창의성을 추구하는 사람) 그리고 포토샵에서 자동 배경제거 기능을 썼고, 포토샵 기초시간에 배웠던 펜툴로 누끼따기 권법(?)으로 인물의 얼굴을 따서 플랫하게 처리했다. 그리고 그대로 일러스트레이터로 가져와서 텍스트와 나머지 라인 작업을 진행해줬다.

 

카드뉴스에도 아까 위에서 웹페이지 디자인할 때 잡았던 컨셉에서 가져와서 초록색, 나라는 사람은 누구인지, 현실 + 디지털 그래픽 한스푼 추가의 느낌을 넣고 싶었다.

 

💡 전반적으로 나는 굵은폰트에 대비가 강한, 딥한 초록색을 좋아하는 것 같다. 오늘 나를 조금 더 알게된 것 같다.

 

 

 

 

 

실습 2) 심리학 법칙 분석 및 사례 조사하기

 

• 선택한 심리학 법칙: 폰 레스토프 효과, 게슈탈트 이론
• 구체적인 사례: 지하철 노선도 환승역 표시
• 법칙 적용 설명: 폰 레스토프 효과를 활용하여 비슷한 역 표시 중에서 유독 다른 특징을 가지게 환승역을 표기하여 어디서 갈아타야 할 지에 대한 고민을 줄여준다.
• 평가 및 특징: 기존에 태극 문양으로 표기되던 환승역이 최근에 신호등 방식의 표기로 개선되었다. 게슈탈트 이론 중, 대응(Mapping)을 활용하여 직관성을 더한 것 같아서 잘 개선되었다고 생각한다.

 

 

 

+ 러닝 코치님 피드백 받은 내용👇🏻

실습 1 피드백
- 웹 메인페이지 : 웹페이지 잘 작업해주셨어요! 중간의 사인 이미지로 무드 전환을 준 점이 흥미로웠습니다. 다만 전체적으로 그린, 오렌지, 블루 톤이 함께 들어가다 보니 시선이 조금 분산돼 보여요. 상단 버튼 컬러를 오렌지 대신 다른 톤으로 맞추면 통일감이 생길 것 같고, 하단 자기소개 디스크립션은 서체 크기를 키우고 배경 채도나 텍스트 컬러를 조정하면 가독성이 더 좋아질 것 같습니다.

- 카드뉴스 : 민지님의 카드뉴스 소개 잘 봤습니다ㅎㅎ creative product designer만 텍스트를 면으로 채워줘서 한눈에 잘 읽히도록 표현해주신 것도 의도가 잘 느껴졌어요! 사람 이미지는 본인인걸까요?ㅎㅎ 얼굴 위 스킬 표현도 재미있어요! 다만 하단 CTA 버튼이 후드티 끈과 겹쳐 처음엔 잘 보이지 않았는데, 색상 면을 채우거나 다른 효과로 분리하면 시각적으로 더 명확해질 것 같아요.


실습 2 피드백
폰 레스토프 효과를 지하철 노선도와 연결해 잘 설명해주셨어요. 특히 환승 구간을 색상별로 차별화해 사용자의 인지 부담을 줄였다는 분석이 좋았습니다. 실제 노선도 예시 이미지를 함께 첨부하면 더 설득력이 높아질 것 같아요.

추가로, 요즘 ‘프로덕트 디자이너’는 단순히 화면을 예쁘게 설계하는 것을 넘어 비즈니스 관점에서 사용자의 체류시간과 구매 전환율을 높이는 전략까지 고민해야 한다는 점도 함께 기억해두시면 좋겠습니다. 

(예: 쿠팡의 ‘밀어서 결제’로 구매율 상승, 배달의민족의 ‘함께 주문’ 기능으로 단체 주문 효율성 강화)


🍯 꿀팁
IT업계 면접에서는 AI를 활용해본 경험이나 관심 여부를 자주 묻습니다.
또, 본인이 생각하는 좋은 UX 사례도 단골 질문이에요.
따라서 내가 어떤 툴을 배우고 어떻게 활용했는지, 그리고 좋은 UX 사례는 무엇이라고 생각하는지 미리 2~3줄 정도 정리해 두시면 큰 도움이 될 거예요!

 

---

 

💡느낀점

퍼스널 브랜딩 작업 하느라 시간을 다써서 심리학 법칙 분석 사례조사는 사실 좀 대충했다..ㅎㅎㅎ

지난 3월에 홍대에서 UX 인지심리학 스터디에 참여한 경험이 있어서 심리학 이론은 이미 공부했다고 생각해서, 안해본 웹페이지 디자인 작업에 시간을 몰빵했다. 사례조사를 좀 설렁설렁 했다고 아무도 뭐라고 안하겠지만, 나만 아는 양심의 가책이 느껴졌달까..ㅎ

 

시각적인 무언가를 만들어내는 작업이 참 재밌다. 나는 역시 디자이너 해야 하나보다.ㅋㅋㅋㅋㅋㅋ

오늘은 사실 디자인 기초 파트의 '최종'과제라는 말을 듣고 나도모르게 어깨에 힘이 뽝 들어갔다...

그동안 작업한 것들보다 좋은 퀄리티를 내야해..! 하는 부담감 같은걸 받았던 것 같다. (아무도 부담 안줬는데 말이다..)

 

이로써 10일 간의 디자인 기초 수업이 마무리됐다.

디자인을 완전히 처음 접해보는 사람과 비교하면 나는 디자인기초가 있는 사람이라고 볼 수 있는데, 그럼에도 10일동안 얻은 것들이 생각보다 많았다. 어떤 분야건 기초라는 건 탄탄할수록 좋은 자원이 된다고 생각한다. 이번 기회를 통해서 전보다 조금 더 기반을 다진 것 같아서 마음 속이 든든해지는 느낌을 받았다. 🍀