<aside>

사용자 중심 디자인

<aside> 📌

**사용자 중심 디자인(User-Centered Design, UCD)**은 제품이나 서비스를 설계할 때 사용자를 공감하여 사용자의 문제를 이해하고, 이를 해결하기 위한 개선안을 제공함으로써 사용자에게 만족스러운 경험을 제공하는 접근 방식

</aside>

• 사용자 입장에서 깊이 있는 공감이 필요
• 사용자의 목적, 행동, 상황, 니즈 등을 지속적으로 파악하여 어떤 문제를 겪고 있는지 구체적으로 파악할 수 있어야 함
• 제품이나 서비스를 처음 사용하는 사용자도 쉽게 이해하고 사용할 수 있도록 직관적인 UI로 설계 </aside>

<aside>

UI디자인 핵심 원리

UI 디자인 원리를 통해 제품이나 서비스가 제공하는 기능과 정보를 사용자에게 명확하게 전달하기 위함

<aside>

1️⃣ 사용자 이해하기

• 디자인의 목적은 사용자 경험을 향상 시키고 참여를 유도하는 것

→ 지속적으로 제품에 대한 긍정적인 인상과 신뢰감을 줄 수 있어야 한다.

→ 사용자가 원하는 정보를 쉽게 탐색하고, 제품이나 서비스를 사용할 때 어려움이 없어야 한다.

→ 이러한 긍정적인 경험이 쌓여야 사용자가 우리 서비스가 좋은 디자인이라고 느끼기 시작함!

• 모든 의사 결정은 사용자의 니즈와 기대를 중심으로 이루어져야 함 </aside>

<aside>

2️⃣ 직관적인 디자인

1. 사용자의 행동 유도

   • 버튼

     배경색 혹은 콘텐츠와 대비되는 컬러를 사용하여 버튼을 강조

     흐름에 맞게 필요한 위치에 배치하여 쉽게 사용할 수 있어야 함

     

   • 링크

     일반적으로 웹에서는 파란색이 링크를 나타냄

     링크된 텍스트에 밑줄을 넣어 클릭이 가능함을 전달함

     

2. 정보를 시각적으로 표현

   • 픽토그램

     사용자가 정보를 더 쉽고 빠르게 이해하기 위해 시각적으로 디자인

     픽토그램이나 아이콘을 활용하여 사용자의 이해를 돕고 핵심 정보를 강조하여 빠르게 전달할 수 있음

     

   • 아이콘

     문화적, 언어적 차이를 넘어 사용자가 즉각적으로 이해할 수 있음!

     예) 😊(스마일, 웃는 얼굴) ♥️(하트, 좋아요) 🗑️(휴지통, 삭제)

</aside>

<aside>

3️⃣ 일관된 디자인

💡사용자가 환경이나 상황에 구애 받지 않고 동일한 서비스 경험을 느낄 수 있게 하는 것은 중요함!

• 일관된 사용자 경험의 중요성

  1. 신뢰성 향상

     · 제품의 인터페이스를 숙지하고 지속적으로 긍정적인 경험을 하면 제품을 신뢰하게 됨

     · 사용자가 원하는 정보를 탐색하고 과업을 수행할 때 만족도 향상 가능

  2. 업무 효율성 증대

     · 일관된 경험을 통해 업무 시간을 단축시키고 빠른 결과물 도출 가능

     · 새로운 기능이 업데이트 되어도 익숙한 상호작용으로 빠르게 이해하고 적응 가능

• 일관된 디자인 핵심 요소

1. 디자인 시스템 구축

   컬러, 타이포그래피, 아이콘, 버튼 등 시각적인 요소와 ****레이아웃, 그리드, UX 라이팅, 인터랙션, 브랜드 메세지 등 요소의 기준을 명확히 해 일관된 디자인이 가능

2. 사용자 피드백

   사용자로부터 지속적으로 피드백을 받아 분석하고 이를 디자인에 적용하여 사용자에게 친숙하고 일관된 경험을 전달할 수 있음

<aside>

🔗 대표적인 사례

• 애플
• 그 외 플랫폼 </aside>

</aside>

<aside>

4️⃣ 가독성을 고려한 디자인

💡텍스트는 쉽게 읽을 수 있도록, 정보는 명확하고 간결하게 전달되어야 한다. 적절한 폰트 크기·간격·대비 등을 고려하여 디자인 되어야 함!

• 여백(=화이트 스페이스) 활용

  화면에서 비어있는 공간의 의미함

  적절한 여백의 활용은 가독성을 높일 수 있음

  깔끔하고 정돈된 느낌을 줄 수 있고 중요한 요소를 더 돋보이게 강조 가능

  

• 콘텐츠 그룹화

  상대적으로 가까이에 있는 요소들은 하나의 그룹으로 보이게 됨

  비슷한 의미, 주제를 갖고 있는 콘텐츠를 그룹화하여 사용자의 편의성을 높일 수 있음!

  

  가까이 있는 요소들끼리 그룹으로 묶여 보인다.

  

  충분한 여백을 두고 작업해야 정보의 혼란을 막을 수 있다!

  

  리스트를 이루고 있는 콘텐츠의 요소인 이미지, 텍스트, 아이콘을 가깝게 배치하여 사용자가 정보를 빠르게 확인할 수 있다. 리스트의 콘텐츠는 반복되기 때문에 여백을 두어 각 콘텐츠를 그룹화하여 가독성을 향상 시킴

• 크기와 비율

  요소의 중요도에 따라 크기를 조절하여 배치하면 자연스럽게 시선을 끌 수 있음

  중요도에 따라 요소의 크기와 비율을 조정하여 콘텐츠의 계층 구성 가능

  요소의 중요도는 같지 않기 때문에, 더 중요한 요소는 강조해서 눈에 띄게 표시하여 중요도에 따른 정보를 확인할 수 있어야 함

  

• 계층 구조

사용자가 중요한 정보를 빠르고 쉽게 확인할 수 있도록 시각적 계층 구조를 설정해야 함

→ 텍스트의 크기, 컬러, 위치 등을 활용할 수 있음

<aside>

왼쪽 타이틀이 강조되어 시선의 흐름을 위→아래, 왼쪽 → 오른쪽으로 자연스럽게 유도

타이틀은 텍스트를 크게, 굵게 설정하고 컬러를 넣어 강조

본문은 상대적으로 크기를 작고 채도를 낮춤

</aside>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside> 📌

</aside>

</aside>

<aside>

</aside>