[디자이너 부트캠프]19일차 UI디자인 실전

 

[디자이너 부트캠프]19일차 UI디자인 실전

 

 

 

“사람들이 원하는 것은 제품이 아니라, 만족스러운 경험이다.”

빌 모그리지

 

 

 

 

시간이 진짜 너무 빨라서 당혹스러울 정도..! 월요일이 엊그제 같은데 벌써 목요일....!

오늘도 화이팅해 보기로...

 

 

 

---

강의노트

---

 

 

1) UI 디자인의 3가지 핵심 원칙

1. 일관성 : 모든 화면에서 동일한 스타일과 인터랙션 유지

 

2. 가독성 : 텍스트와 아이콘이 쉽게 인식되도록 명확한 디자인

                  (ex.모바일텍스트는 14픽셀 아래로 내려가지 않게 할 것)

 

3. 직관성 : 사용자가 별도의 학습 없이 바로 사용할 수 있는 구조

 

 

2) 사용자 중심 디자인 (User-centered design)

: 사용자 입장(관점)에서 필요한 정보와 기능을 우선 제공

: 불필요한 요소 제거로 간결하고 깔끔한 UI유지

 

 

3) 반응형 디자인 (Responsive Design)

: 다양한 기기(스마트폰, 태블릿 등)에서 일관된 사용자 경험 제공

 

 

4) 앱 화면의 주요 구성 요소

1. 헤더(Header) : 화면 상단의  타이들과 주요 내비게이션

2. 메인 콘텐츠 영역(Main Contents) : 사용자가 가장 자주 상호작용하는 영역

3. 푸터(Footer) : 하단 네비게이션 또는 주요 버튼 배치

 

 

5) 핵심 화면 유형

1. 홈 화면(Home Screen) : 주요 기능과 콘텐츠 제공

2. 상세 페이지(Detail Page) : 특정 정보 또는 콘텐츠의 세부 내용 제공

3. 설정 화면(Settings) : 사용자 맞춤 설정 및 정보 관리

 

 

6) 디자인 프로세스 개요

1단계 : 사용자 요구 분석

2단계 : 와이어프레임 작성

3단계 : UI 스타일 가이드 적용

4단계 : 프로토타임 제작

 

 

7) 사용자 흐름(User Flow) 정의

: 앱 사용자의 동선과 주요 작업 시나리오 설계

  ex)   로그인  >  홈  >  상품 상세  >  결제

 

 

8) 사용자 흐름 설계 시 주의할 점

: 사용자가 최소한의 클릭으로 원하는 작업을 수행 할  수 있도록 경로 최적화

   >  사용자와 회사의 니즈를 파악하여 최적화된 경로 안내를 하는 것이 디자이너의 역할

: 오류 상황에 대한 예외 처리 (ex. 잘못된 입력 시 메시지 표시)

 

 

9) 메인 화면의 핵심 요소

1. 검색 바(search bar) : 사용자가 원하는 정보를 빠르게 찾을 수 있도록 배치

2. 카드 레이아웃(card layout) : 콘텐츠를 시각적으로 쉽게 인식할 수 있도록 구성

3. CTA (call-to-action) : 주요 행동을 유도하는 버튼 디자인 

 

 

10) 레이아웃 구성

: 그리드 시스템을 활용해 균형 잡힌 디자인 배치

: 버튼과 텍스트 크기 조정으로 가독성 유지

 

*실습*

> 모바일 공통마진 설정 = 16

> 전체 크기에서 공통 마진 빼기

> 콘텐츠 영역이 정해지면 컬럼 개수를 정한다.

> 사이트에서 풀영역, 컬럼개수를 지정한다.

Grid Calculator by Nicolaj Kirkgaard Nielsen

 

 

11) 디자인 스타일 가이드 적용

: 컬러/타이포그라피 스타일 적용

 

 

12) 상태 UI

1.  로딩 상태(Loading State) : 콘텐츠가 로딩 중일 때 사용자에게 피드백 제공

2. 에러 상태(Error State) : 오류 발생 시 사용자에게 명확한 안내 제공

3. 빈 상태(Empty State) : 사용 가능한 콘텐츠가 없을 떄 대체 메세지 제공

 

 

13) 알림 UI

1. 모달 창 : 중요한 정보를 사용자에게 전달

2. 팝업 창 : 이벤트 정보를 사용자에게 전달

3. 토스트 창 : 하단으로 부터 올라오는 창 (중요한정보, 이벤트 정보를 전달 시) >> 잠깐 떳다가 내려감

 

 

14) 상태 및 알림 UI의 중요성

: 즉각적인 피드백 제공 > 사용자 신뢰 향상

: 오류 상황을 최소화 > 사용자 행동 유도

 

 

15) 디자인 리뷰의 중요성

: 팀원 간 피드백을 통해 디자인의 완성도 향상

: 사용자 관점에서 오류 및 개선 사항 발견

 

 

16) 디자인 리뷰 프로세스

1차검토 : 기능적 오류 및 일관성 확인 >> 2차 검토 : 사용자 피드백 반영

 

 

17) 디자인 개선 전략

접근성 테스트 : 다양한 사용자 관점에서 테스트

최신 디자인 트렌드 반영

 

 

 

---

오늘의 과제 

선정 서비스 UI 화면 클론 디자인

---

 

 

드디어 클론디자인 홈화면 완성!

시간 너무 많이 걸리고 헷갈리지만 확실히 한 번 만들어 보고 나니 하기 전 보다 개념이 많이 잡힌 느낌!!

뿌듯~