[25.02.24] UI 디자인의 모든 것 + TIL

🗓️ 오늘의 일정

- 강의 내용 정리~

- 과제 진행

- 독서하기

---

✏️ 디자인 카타

🔷 디자이너스: URL 주소 버튼의 위치

📢 전체 화면 상단 vs QR 코드 하단

 

A

• QR 코드 스캔 시 시선과 가까운 위치에 있어 URL을 쉽게 인식할 수 있지만, 클릭하려면 손가락을 많이 이동해야 한다.
• 버튼이 상단에 있어 화면 레이아웃이 안정적이며, 공공기관이나 금융 정보처럼 신뢰도가 중요한 경우 적합하다.
• 클릭 유도가 약해 즉각적인 행동을 요구하는 광고, 마케팅 QR 코드에는 다소 불리할 수 있다.

B

• 사용자는 사진을 찍을 때 일반적으로 화면 중앙에 main object(예: QR 코드)를 배치한다. 이 경우 엄지손가락이 쉽게 닿는 하단에 위치해 빠른 클릭이 가능하며, 즉각적인 행동 유도가 필요한 경우 효과적이다.
• QR 코드와 버튼이 가까워 사용자가 직관적으로 인식하고 클릭할 수 있으며, 전환율(CTR) 증가에 유리하다.
• 따라서 즉각적인 클릭이 중요한 광고, 이커머스, 마케팅 분야나 할인 쿠폰, 이벤트 페이지, 구매 링크와 같은 URL에 적합하다.

추가 의견

• QR 코드의 위치에 따라 버튼이 변동될 경우 사용자가 원하는 위치에서 찾기 어려울 가능성이 있다.
• 따라서 일관된 사용자 경험을 위해 고정된 위치에 URL 링크 버튼을 제공하되, 터치 영역 내에 있는 화면 하단에 고정하여 배치하는 게 적절해보인다. (A+B)

---

✏️ 강의 제목 + n주차 + n회차

🔷 강의 요약

📢 사용자 중심 디자인 (User-Centered Design, UCD)
- 사용자의 문제를 이해하고 공감하여 해결책을 제시하는 접근 방식.
- 직관적이고 쉬운 UI 설계를 통해 처음 사용하는 사람도 쉽게 이해할 수 있도록 함.

📢 UI 디자인 핵심 원리
① 직관적인 디자인
- 사용자 행동 유도: 버튼과 링크의 색상, 위치, 대비를 활용해 클릭을 유도.
- 정보의 시각적 표현: 아이콘, 픽토그램 등을 활용해 정보를 빠르게 전달.
- 핵심 요소: 대비 높은 색상, 간단한 레이아웃, 유연한 인터페이스.

② 일관된 디자인
- 다양한 상황에서도 동일한 경험을 제공하여 신뢰감 형성.
- 핵심 요소:
  - 디자인 시스템 구축: 컬러, 타이포그래피, 버튼 등의 일관성 유지.
  - 사용자 피드백 반영: 지속적인 개선을 통해 친숙한 경험 제공.
  - 대표 사례: 애플 (디바이스 간 연동, HIG 가이드라인 구축)

③ 가독성을 고려한 디자인
- 여백 활용: 불필요한 요소를 줄이고 정보에 집중할 수 있도록 함.
- 콘텐츠 그룹화: 비슷한 정보끼리 묶어 가독성 향상.
- 크기와 비율 조정: 핵심 정보를 강조하고 시선의 흐름을 자연스럽게 유도.
- 계층 구조: 중요한 정보는 크게, 덜 중요한 정보는 작게 배치.

④ 명확한 피드백 제공
- 사용자의 행동에 대한 즉각적인 반응을 제공하여 신뢰도를 높임.
- 방법:
  - 버튼 클릭 시 색 변화, 파일 업로드 진행 상태 표시 등.
  - 오류 메시지나 알림을 통해 사용자와의 상호작용 강화.

⑤ 접근성을 고려한 디자인
- 모든 사용자가 정보에 접근할 수 있도록 보장.
- 핵심 요소:

  - 텍스트 + 아이콘 병행 사용

  - 입력 필드 오류 시 명확한 안내 제공

  - 충분한 명도 대비 (텍스트와 배경 4.5:1 이상)

📢 사용자 경험을 향상시키는 방법
① 직관적인 네비게이션
- 명확한 메뉴 구조 제공 (예상 가능한 카테고리, 최소한의 Depth 유지)
- 픽토그램, 활성화 효과를 통해 현재 위치를 인지할 수 있도록 함.

② 다양한 디바이스 지원
- 반응형 디자인: 모바일, 태블릿, 데스크톱에서도 최적화된 UI 제공.
- 터치 최적화: 버튼과 아이콘 크기를 적절히 조정 (최소 44~48px).

③ 사용자 피드백 반영
- 피드백 수집 방법: VOC 분석, 설문 조사, 사용자 인터뷰.
- 사용자의 요구를 반영해 UI/UX 개선.

---

🗒️ TIL

오늘은 너무 졸렸다ㅠㅠ 나도 모르게 졸았다… 강의 복습을 다시 해봐야 할 것 같다!