[UI/UX 원칙 #4] 좋은 캐러셀 디자인을 위한 가이드 5가지 UX 원칙 가이드라인

좋은 캐러셀 디자인을 위한 가이드 5가지 

Nick Babich의 Designinga User-Friendly Homepage Carousel 소개하고자 합니다

캐러셀은 이미지 로테이터, 슬라이더 등 다양한 이름으로 불리는데, 특히 이커머스 웹사이트 메인 페이지에서 가장 흔하게 볼 수 있습니다. 사람들에게 메인 페이지에 있는 캐러셀이 실제 사용자에게 도움이 되는 방법인지 아니면 그저 콘텐츠를 쉽게 처리하는 방법에 불과한 건지 물어보면, 캐러셀은 비생산적인 디자인 패턴이라고 답할 것입니다. 이미 캐러셀에 대한 부정적인 주장이 퍼져 있기 때문입니다. 가령 Erik Runyon의 연구에 따르면 전체 사이트 방문자 중1%만 캐러셀을  클릭하며 그중 84%는 첫 번째 이미지를 선택한다고 합니다.

1) 캐러셀이란 무엇인가

캐러셀은 메인 페이지에서 마케팅 정보를 보여주는 한 가지 방법으로, 사용자가 스크롤을 내리지 않고도 볼 수 있는 정보의 양을 극대화하기 위해 디자이너들이 주로 사용합니다.

캐러셀 다음과 같은 특징을 갖고 있습니다. 

- 메인 페이지 상단에 위치하며, 일명 ‘above the fold’ 영역의 상당 부분을 차지합니다

- 같은 공간에 하나 이상의 콘텐츠를 보여주며, 한 번에 하나씩만 보이고 각각은 이미지와 약간의 텍스트로 구성되어 있습니다.

- 캐러셀에 하나 이상의 콘텐츠가 있음을 보여주는 표시가 있습니다.

2) 캐러셀 장점

캐러셀은 다음과 같은 장점을 가지고 있습다.

- 메인 페이지에서 가장 중요한 영역에 하나 이상의 콘텐츠를 보여줄 수 있습니다.

- 페이지 상단 쪽에 더 많은 정보가 보일수록 사람들이 볼 확률이 더 높아질 수 있습니다.

3) 캐러셀 단점

반면, 단점은 다음과 같습니다.

- 사람들은 자주 캐러셀과 그 콘텐츠를 보지 못하고 넘어갈 수 있습니다 (심지어 캐러셀이 자동으로 돌아갈 때도 마찬가지)

디자이너는 캐러셀을 여러 이미지의 모음으로 생각하지만, 사용자는 하나의 이미지로 보았다고 생각하게 됩니다.

4) 좋은 캐러셀 디자인을 위한 가이드 1. 콘텐츠가 최우선

캐러셀이 보여주는 콘텐츠 자체가 나쁘면 아무리 캐러셀을 좋게 만들어도 소용이 없습니다. 

캐러셀 콘텐츠와 관련한 몇 가지 룰을 다음과 같습니다.

- 콘텐츠 자체가 사용자에게 흥미롭거나 유용하지 않다면(예: 사용자가 신경 쓰지 않는 홍보성 정보) 캐러셀을 쓰지 않아야 합니다. 

- 캐러셀의 콘텐츠는 광고처럼 보이면 안 됩니다. 광고처럼 보이면 사용자는 무시해 버립니다. 사이트와 전반적으로 매치되는 이미지와 서체를 사용해야 하고, 광고가 아닌 사이트의 일부로 보여야 합니다.

- 슬라이드 순서를 심사숙고하여 결정해야 합니다. 첫 슬라이드가 나머지 슬라이드보다 훨씬 더 노출 확률이 높기 때문에 중요도 순으로 배치해야 합니다. 특히 첫 슬라이드에서 가장 중요한 콘텐츠를 보여줘 다음 슬라이드를 보고 싶게 끔 만들어야 합니다.

- 캐러셀에서 보이는 콘텐츠를 캐러셀에서만 보여주지 말고 사이트의 다른 영역에서도 접근할 수 있게 만들어야 합니다. 사용자가 캐러셀의 모든 콘텐츠를 봐야만 한다면, 캐러셀을 이용하면 안 됩니다.

5) 좋은 캐러셀 디자인을 위한 가이드 2. 슬라이드의 수를 제한한다

캐러셀에 5개 이하의 슬라이드를 넣어야 합니다. 그 이상은 사용자가 보지 않을 것이고, 나중에 사용자가 캐러셀에서 봤던 콘텐츠를 다시 찾을 때 발견하기 쉽게 만들어 줘야 하기 때문입니다.

6) 좋은 캐러셀 디자인을 위한 가이드 3. 진행률을 표시한다

7) 좋은 캐러셀 디자인을 위한 가이드 4. 모바일에 최적화

슬라이드 콘텐츠가 모바일에서도 읽기 쉬운지 확인해야 합니다. 모바일이 무시할 수 없는 존재가 되었기 때문에 모바일에서 보이는 캐러셀의 이미지와 텍스트를 최적화하는 것이 최우선 과제입니다.

8) 좋은 캐러셀 디자인을 위한 가이드 5. 내비게이션 컨트롤 디자인

캐러셀 상의 내비게이션 컨트롤을 디자인할 때 고려해야 할 몇 가지 사항입니다.

- 내비게이션 컨트롤이 있음을 캐러셀 내부에서 명확하게 보여줘야 합니다.

- 링크와 버튼은 명확히 구분할 수 있고 충분히 크게 만들어 줘야 합니다.

- 모바일 디바이스에서는 스와이프 제스처를 추가로 지원해 줘야 합니다.

Case 1. 내비게이션 컨트롤이 있음을 캐러셀 내부에서 명확하게 보여주기

Case2. 링크와 버튼의 명확한 구분

Case3 모바일 디바이스 환경을 고려한 스와이프 제스처

9) 자동 로테이션을 위한 팁

캐러셀에서 자동 로테이션을 이용할 때 다음 네 가지 세부사항을 고려해야 합니다.

- 모바일 사이트에서는 가능한 자동 로테이션을 이용하지 않아야 합니다. 슬라이드가 넘어가 버려 사용자가 잘못된 슬라이드를 탭 할 수 있기 때문입나다.

- 슬라이드가 너무 빠르게 돌아가지 않게 만들어야 합니다. 물론 너무 느려도 지루해진다는 문제가 있지만, 너무 빠르면 정보를 읽을 수 없습니다. 적절한 타이밍은 테스트를 통해 알아내고, 각 정보마다 다른 타이밍을 적용하는 것도 고려해 볼 수 있습니다.

- 사용자가 통제권을 가져야 합니다. 일시정지 버튼 등을 예로 들 수 있습니다. 통제권은 신뢰를 만들어 주기 때문입니다.

- 마지막 슬라이드에서 멈추지 않아야 합니다.

10) 캐러셀의 가장 좋은 대안

메인 페이지에 뜨는 캐러셀이 가장 흔하게 갖는 문제점은 ‘맥락 부족’입니다. 즉, 사용자는 보통 다음 슬라이드에 무엇이 보일지 왜 관심을 가져야 하는지 전혀 알 수가 없기 때문에 그다음 슬라이드로 넘겨보지 않으려 한다는 겁니다. 캐러셀과 비교했을 때 ‘영웅 이미지’를 사용하는 것도 좋습니다. 영웅 이미지를 사용하면 사용자가 하나의 이미지에 집중할 수 있고, 디자이너도 심사숙고하여 제품이나 서비스를 대표하는 이미지 하나만 선택할 수 있어 더 효과적입니다.

==================================

[모집중] "UX 원칙 가이드라인" 강좌 소개합니다.

선착순 10명 !!! "4주 완성! UX 원칙 가이드라인" 🌟10월7일(월) 개강 !!!

아래 링크 클릭시, 강좌 소개 페이지로 이동됩니다.

https://ebprux.liveklass.com/cu/qzJvCEEK

실무에 필요한 모든 내용을 담았습니다 🗂️

UX 실무에 필요한 모든 UX 원칙을 담았어요! UX 디자인 원칙까지 실무에서 바로 활용할 수 있도록 ✏️

PM이라면 반드시 알아야 하는 UX 원칙 가이드라인 원칙

본 강의는 UI, 인터랙션에서 UX 디자인 원칙까지 실무에서 바로 활용할 수 있는 내용들을 정리한 강의입니다. UX 실무에 필요한 모든 UX 원칙을 담았습니다!

UX 원칙 가이드 다양한 실무 Case Study 외 관련 이론에 대한 UX 원칙 가이드 개념을 명확히 정립하는 시간을 갖게 됩니다.

이런걸 배워요

[챌린지] UX 디자인 가이드라인 수강 신청 시 주의 사항

플립드 러닝(Flipped Learning) 수업 방식으로 인해, 선착순 10명입니다. (수업 관련 외 Case Study 강의 및 Q&A 집중!!!! 소수 정예 수업!!!)

[챌린지] UX 디자인 가이드라인 프로그램 소개

폼 입력 행위 작업 줄이기, Context 내비게이션, 행동유도버튼의 어포던스, 간결성, 주목성, 인식성 등 필수!!!! 깊게 강의할 예정입니다.

총 4회, 총 12시간, 줌 Live 강의 형태로 진행합니다 🔥

(1주차 Live 수업: 3시간)
(2주차 Live 수업: 3시간)
(3주차 Live 수업: 3시간)
(4주차 Live 수업: 3시간)

매회 Live 수업은, [VOD 커리큘럼 관련] 수업 관련 외 Case Study 및 Q&A 중심으로 수업이 진행됩니다.

개인 사정으로 인해 Live 수업 미참석를 위해  강의 종료 후 24시간 이내 녹화본 제공합니다.  

수업 당일 라이브클래스에  강의 자료 PDF 제공합니다. 

수강 정원: 선착순 10명입니다. 

수강료 : 98,000원

VOD & Live 수업 녹화본(다시보기) 영상 시청 기간은, 수강 신청 이후 365일 입니다

[챌린지 혜택 !!!!]

챌린지 도전에 성공한 수강생 모두에게, 다른 챌린지 UX 과정 50% 할인 쿠폰 드립니다.
(예. 98,000원 > 챌린지 도전 성공한 수강생에게 드리는 할인 쿠폰 50% 적용 시 > 49,000원) 

[챌린지 성공 시, 50% 할인 쿠폰 적용, 또 다른 챌린지 UX 수강 과정은 다음과 같습니다]

챌린지 1. 휴리스틱 평가 (10월 오픈 예정) 
챌린지 2. 사용성 테스트 (10월 오픈 예정) 
챌린지 3. UX 리서치 (11월 오픈 예정) 
챌린지 4. UX 인지심리학 A-Z (11월 오픈 예정) 
챌린지 5. UX 디자인 설계 A-Z (11월 오픈 예정) 
챌린지 6. UX 디자인 첫걸음 (11월 오픈 예정) 

[챌린지  > 성공 기준]

아래 3가지 조건, 모두 충족되어야 합니다

1. VOD(총 209개) 80% 이상 수강

2. Live 수업 총 4회 중 3회 이상 출석 
(사정상 Live 수업 참석 못하는 경우, Live 녹화본 다시보기 완료시 출석 인정) 

3. 총 4회 Live 수업 중 1회 이상 질문하신 분
(VOD 강의 내용 중 궁금한 것 미리 체크한 후 !!!! Live 수업할 때 강사님께 질문 하면 됩니다 ㅎㅎ)

[챌린지] UX 디자인 가이드라인 과정은 플립드 러닝(Flipped Learning) 수업 방식으로 진행됩니다.

플립드 러닝(Flipped Learning) 수업이란? 플립드 러닝은 전통적인 수업 방식과 반대로, 수강생들이 수업 전에 비디오나 자료를 통해 기본 개념을 사전에 학습하고, 수업 시간에는 그 내용을 바탕으로 심화 학습, 토론, 문제 해결 등을 진행하는 방식입니다. 이 접근법은 수강생들이 능동적으로 참여하고, 개인의 학습 속도에 맞춰 공부할 수 있도록 돕습니다.

플립드 러닝(Flipped Learning) 수업 방식을 적용했을 때 수강생이 얻는 기대효과

1) 기본 이해도 향상
VOD 영상을 통해 수업의 기본 개념이나 내용을 미리 학습함으로써, 수강생은 Live 수업에서 다루어질 내용을 더 잘 이해할 수 있습니다. 이는 수업에 대한 자신감을 높입니다.

2) 질문 준비
VOD를 시청한 후, 수강생은 궁금한 점이나 이해가 안 되는 부분을 정리할 수 있습니다. 이를 통해 Live 수업에서 더 효과적으로 질문하고, 강사와의 상호작용을 극대화할 수 있습니다.

3) 시간 활용의 효율성
VOD 영상을 통해 수업의 기본 내용을 미리 습득하면, Live 수업에서는 더 심화된 내용이나 사례 중심의 활동에 집중할 수 있습니다. 이는 수업 시간을 더 효율적으로 활용하는 데 도움이 됩니다.

4) 개별 학습 속도 조절
수강생은 자신의 속도에 맞춰 VOD를 시청할 수 있으므로, 개념을 천천히 이해하고 반복해서 학습할 수 있습니다. 이는 각자의 학습 스타일에 맞춰 학습 효과를 극대화할 수 있게 합니다.

5) 집중력 향상
미리 VOD를 시청한 수강생은 Live 수업에서 이미 알고 있는 내용을 반복적으로 듣지 않게 되어, 더 집중할 수 있습니다. 새로운 정보나 심화된 내용을 듣는 데 더 많은 에너지를 쏟을 수 있습니다.

6) 상호작용의 질 향상
미리 학습한 수강생들은 Live 수업 중 보다 적극적으로 참여할 가능성이 높습니다. 이는 강사와의 상호작용을 더욱 풍부하게 만들어, 전체적인 수업의 질을 높이는 데 효과적입니다.

이제부터 [UX 원칙 가이드 1기] 플립드 러닝(Flipped Learning) 세부 커리큘럼에 대해 알아볼까요?

[1주차]

챌린지 플립드 러닝(Flipped Learning) VOD 수업:

"UX 디자인 가이드라인 개념"

1. PM에게 있어 UX 디자인 가이드 원칙이 중요한 이유는?

2. UI/UX 분석(UX 디자인 가이드 원칙) 대분류 모형에 대해 알아볼까요!

3. 단축성이란?

4. 반응성이란?

5. 사전방지성이란?

6. 오류발생감지성이란?

7. 오류회복성이란?

8. 가독성이란?

9. 논리성이란?

10. 이해성이란?

11. 기억성이란?

12. 변화제시성이란?

13. 사용자주도권이란?

14. 시스템주도권이란?

15. 대체성이란?

16. 다중성이란?

17. 친숙성이란?

18. 예측가능성이란?

19. 외부적일관성과 내부적 일관성이란?

[1주차] 챌린지 줌 Live 수업:

"UX 디자인 가이드라인 개념"

10월7일(월) PM 21시 - PM 23시 59분 (3시간)

1부. 1주차 수업 관련 핵심 내용 및 Case Study 강의 (2시간 30분)

2부. 1주차 수업 관련 Q&A_무엇이든지 물어보세요 (30분)

[2주차] 챌린지 플립드 러닝(Flipped Learning) VOD 수업:

"단축성, 반응성"

1. [VOD] [단축성 > 검색절차 줄이기] 상세 검색

2. [VOD] [단축성 > 검색절차 줄이기] 인기검색

3. [VOD] [단축성 > 검색절차 줄이기] 자동완성 검색어

4. [VOD] [단축성 > 검색절차 줄이기] 초성 검색

5. [VOD] [단축성 > 검색절차 줄이기] 최근 검색

6. [VOD] [단축성 > 검색절차 줄이기] 통합 검색

7. [VOD] [단축성 > 검색절차 줄이기] 정렬 검색

8. [VOD] [단축성 > 검색절차 줄이기] 연관 검색

9. [VOD] [단축성 > 검색절차 줄이기] 기간 검색

10. [VOD] [단축성 > 선택 행위 최소화] 버튼

11. [VOD] [단축성 > 선택 행위 최소화] 긍정적 버튼

12. [VOD] [단축성 > 선택 행위 최소화] 주요 액션 버튼

13. [VOD] [단축성 > 선택 행위 최소화] 삭제 버튼

14. [VOD] [단축성 > 선택 행위 최소화] 드롭다운 메뉴

15. [VOD] [단축성 > Context 내비게이션] 링크

16. [VOD] [단축성 > Context 내비게이션] Top 버튼

17. [VOD] [단축성 > Context 내비게이션] 추천 정보

18. [VOD] [단축성 > 반복적 행위 최소화] 이전 입력 행위 최소화

19. [VOD] [단축성 > 반복적 행위 최소화] 공통적 입력 행위 추천

20. [VOD] [단축성 > 반복적 행위 최소화] 개별 입력 추천

21. [VOD] [단축성 > 반복적 행위 최소화] 필수 입력 사항 자동 저장

22. [VOD] [단축성 > 반복적 행위 최소화] 즐겨찾기

23. [VOD] [단축성 > 반복적 행위 최소화] 팝업

24. [VOD] [단축성 > 입력 행위 최소화] 입력 필드

25. [VOD] [단축성 > 뎁스 최소화] 주요 서비스

26. [VOD] [단축성 > 뎁스 최소화] 자주 이용하는 서비스

27. [VOD] [반응성 > 다음 선택 행위 유도] 행동유도 버튼 (CTA 버튼)

28. [VOD] [반응성 > 다음 선택 행위 유도] 시그니파이어

29. [VOD] [반응성 > 다음 선택 행위 유도] LNB 메뉴

30. [VOD] [반응성 > 다음 선택 행위 유도] 더보기 버튼

31. [VOD] [반응성 > 다음 선택 행위 유도] 재생 버튼

32. [VOD] [반응성 > 다음 선택 행위 유도] 옵션 버튼

33. [VOD] [반응성 > 다음 선택 행위 유도] 토글 버튼

34. [VOD] [반응성 > 다음 선택 행위 유도] 링크

34 [VOD] [반응성 > 다음 입력 행위 유도] 키패드 입력

35. [VOD] [반응성 > 다음 입력 행위 유도] 화면 인터랙션 전환

36. [VOD] [반응성 > 다음 입력 행위 유도] 리뷰

37. [VOD] [반응성 > 즉각적 선택 행위 인지] 아이콘

38. [VOD] [반응성 > 즉각적 선택 행위 인지] 재생 행위

39. [VOD] [반응성 > 즉각적 선택 행위 인지] 필드

40. [VOD] [반응성 > 즉각적 선택 행위 인지] 키패드

41. [VOD] [반응성 > 현재 위치 상태 인지] 페이지 이름

42. [VOD] [반응성 > 현재 위치 상태 인지] 단계(Step)

43. [VOD] [반응성 > 현재 위치 상태 인지] 로그인 전/후

44. [VOD] [반응성 > 현재 위치 상태 인지] 내비게이션 탭바

45. [VOD] [반응성 > 현재 위치 상태 인지] 탭

46. [VOD] [반응성 > 현재 위치 상태 인지] 새창

47. [VOD] [반응성 > 현재 위치 상태 인지] 시그니파이어

48. [VOD] [반응성 > 현재 위치 상태 인지] 구간 선택

49. [VOD] [반응성 > 현재 위치 상태 인지] 이미지 선택

[2주차]

챌린지 줌 Live 수업:

"단축성, 반응성"

10월14일(월) PM 21시 - PM 23시 59분 (3시간)

1부. 2주차 수업 관련 핵심 내용 및 Case Study 강의 (2시간 30분)

2부. 2주차 수업 관련 Q&A_무엇이든지 물어보세요 (30분)

[3주차]

챌린지 플립드 러닝(Flipped Learning) VOD 수업: "사전방지성, 오류발생감지성, 오류회복성"

1. [VOD] [사전방지성 > 입력 실수 방지] 개념

2. [VOD] [사전방지성 > 입력 실수 방지] 주의사항

3. [VOD] [사전방지성 > 입력 실수 방지] 플레이스 홀더 텍스트

4. [VOD] [사전방지성 > 입력 실수 방지] 시각적 단서

5. [VOD] [사전방지성 > 입력 실수 방지] 필드

6. [VOD] [사전방지성 > 입력 실수 방지] 제한

7. [VOD] [사전방지성 > 잘못된 실수 방지] 비활성화 버튼

8. [VOD] [사전방지성 > 잘못된 실수 방지] 버튼

9. [VOD] [사전방지성 > 잘못된 실수 방지] 메뉴

10. [VOD] [사전방지성 > 잘못된 실수 방지] 페이지네이선

11. [VOD] [사전방지성 > 잘못된 실수 방지] 링크

12. [VOD] [사전방지성 > 잘못된 실수 방지] 필수, 선택 옵션

13. [VOD] [사전방지성 > 잘못된 실수 방지] 드롭다운 버튼

14. [VOD] [사전방지성 > 재확인] 입력

15. [VOD] [사전방지성 > 재확인] 전송 정보

16. [VOD] [사전방지성 > 재확인] 검색 조건

17. [VOD] [사전방지성 > 재확인] 개인정보 보호

18. [VOD] [사전방지성 > 재확인] 챗봇

19. [VOD] [사전방지성 > 지능형 실수 알림] 개념

20. [VOD] [오류발생감지성 > 실시간 알림] 개념

21. [VOD] [오류발생감지성 > 실시간 알림] 인라인

22. [VOD] [오류발생감지성 > 실시간 알림] 피드백 아이콘

23. [VOD] [오류발생감지성 > 실시간 알림] 대화창

24. [VOD] [오류발생감지성 > 메시지] 간결한 용어

25. [VOD] [오류발생감지성 > 메시지] 친절한 표현

26. [VOD] [오류회복성 ] 원상태 회복

27. [VOD] [오류회복성] 되돌아가기 (이전 행위 페이지)

28. [VOD] [오류회복성] 임시저장

29. [VOD] [오류회복성 > 취소] 전송

30. [VOD] [오류회복성 > 취소] 행위

31. [VOD] [오류회복성 > 취소] 클리어 아이콘

32. [VOD] [오류회복성 > 취소] 친절한 표현

33. [VOD] [오류회복성 > 취소] 새창 모달

34. [VOD] [오류회복성 > 취소] 키패드

35. [VOD] [오류회복성 > 초기화] 상세 검색

36. [VOD] [오류회복성 > 초기화] 전체 동의 해제

37. [VOD] [오류회복성 > 초기화] 홈으로 이동

38. [VOD] [오류회복성 > 문제 해결 대안 제시] 재시도

39. [VOD] [오류회복성 > 문제 해결 대안 제시] 사용자 대처 방안

40. [VOD] [오류회복성 > 문제 해결 대안 제시] 시스템 자동으로 오류 수정

41. [VOD] [오류회복성 > 문제 해결 대안 제시] 상세한 설명

42. [VOD] [오류회복성 > 문제 해결 대안 제시] 오프라인 지원 서비스 연계

[3주차] 챌린지 줌 Live 수업: 

"사전방지성, 오류발생 감지성, 오류회복성"

10월21일(월) PM 21시 - PM 23시 59분 (3시간)

1부. 3주차 수업 관련 핵심 내용 및 Case Study 강의 (2시간 30분)

2부. 3주차 수업 관련 Q&A_무엇이든지 물어보세요 (30분)

[4주차] 챌린지 플립드 러닝(Flipped Learning) VOD 수업:"가독성, 논리성, 이해성, 기억성, 변화제시성, 사용자주도권, 시스템 주도권, 대체성, 다중성, 친숙성, 예측가능성, 일관성"

1. [VOD] [가독성 > 간결성] 레이아웃

2. [VOD] [가독성 > 간결성] 여백

3. [VOD] [가독성 > 간결성] GNB

4. [VOD] [가독성 > 간결성] 하단 내비게이션

5. [VOD] [가독성 > 간결성] 버튼 제공 최소화

6. [VOD] [가독성 > 간결성] 폼 필드 최소화

7. [VOD] [가독성 > 간결성] 최소한의 정보 제공

8. [VOD] [가독성 > 간결성] 메뉴 목록

9. [VOD] [가독성 > 간결성] 색상 적용 최소화

10. [VOD] [가독성 > 간결성] 옵션

11. [VOD] [가독성 > 간결성] 안내 문구 최소화

12. [VOD] [가독성 > 간결성] 메시지

13. [VOD] [가독성 > 간결성] 대화창

14. [VOD] [가독성 > 간결성] 썸네일 이미지

15. [VOD] [가독성 > 간결성] 아이콘

16. [VOD] [가독성 > 간결성] 검색창 영역 최소화

17. [VOD] [가독성 > 간결성] 검색 결과 목록 최소화

18. [VOD] [가독성 > 주목성] 정보의 강약

19. [VOD] [가독성 > 주목성] 버튼

20. [VOD] [가독성 > 인식성] 로고 영역

21. [VOD] [가독성 > 인식성] 브랜드 메시지

22. [VOD] [가독성 > 인식성] 상단 메뉴 영역

23. [VOD] [가독성 > 인식성] 하단 내비게이션

24. [VOD] [가독성 > 인식성] 탭

25. [VOD] [가독성 > 인식성] 유틸리티 영역

26. [VOD] [가독성 > 인식성] 검색창 영역

27. [VOD] [가독성 > 인식성] 레이아웃

28. [VOD] [가독성 > 인식성] 링크

29. [VOD] [가독성 > 인식성] 버튼

30. [VOD] [가독성 > 인식성] 폼

31. [VOD] [가독성 > 인식성] 텍스트

32. [VOD] [가독성 > 인식성] 옵션

33. [VOD] [가독성 > 인식성] 이미지

34. [VOD] [가독성 > 인식성] 캐러셀 디자인

35. [VOD] [가독성 > 인식성] 색상

36. [VOD] [가독성 > 인식성] 아이콘

37. [VOD] [가독성 > 인식성] 숫자

38. [VOD] [가독성 > 인식성] 날짜

39. [VOD] [가독성 > 인식성] 블릿

40. [VOD] [논리성 > 정보 제공의 우선 순위] 상단 메뉴, 유틸리티 메뉴

41. [VOD] [논리성 > 정보 제공의 우선 순위] 탭 메뉴

42. [VOD] [논리성 > 정보 제공의 우선 순위] 메뉴 목록

43. [VOD] [논리성 > 정보 제공의 우선 순위] 검색 결과

44. [VOD] [논리성 > 정보 제공의 우선 순위] 화면 영역

45. [VOD] [논리성 > 정보 제공의 우선 순위] 화면 위치

46. [VOD] [논리성 > 유사 속성 그룹핑] 메뉴

47. [VOD] [논리성 > 유사 속성 그룹핑] 폼

48. [VOD] [논리성 > 유사 속성 그룹핑] 화면 영역

49. [VOD] [논리성 > 화면 요소의 시각적 우선순위] 자주 찾는 서비스

50. [VOD] [논리성 > 유사 속성 그룹핑] 기능

51. [VOD] [논리성 > 유사 속성 그룹핑] 부가 기능

52. [VOD] [논리성 > 유사 속성 그룹핑] 메시지

53. [VOD] [논리성 > 유사 속성 그룹핑] 타이틀

54. [VOD] [논리성 > 유사 속성 그룹핑] 날짜

55. [VOD] [논리성 > 유사 속성 그룹핑] 데이터

56. [VOD] [논리성 > 화면 요소의 시각적 우선순위] 버튼 배치순

57. [VOD] [논리성 > 화면 요소의 시각적 우선순위] 항목 및 옵션

58. [VOD] [논리성 > 화면 요소의 시각적 우선순위] 문맥

59. [VOD] [논리성 > 화면 요소의 시각적 우선순위] 아이콘 모양

60. [VOD] [이해성 > 직관성] 목적 지향성 안내

61. [VOD] [이해성 > 직관성] 하단 내비게이션

62. [VOD] [이해성 > 직관성] 메뉴

63. [VOD] [이해성 > 직관성] 메시지

64. [VOD] [이해성 > 직관성] 헤드 타이틀

65. [VOD] [이해성 > 직관성] 서브 타이틀

66. [VOD] [이해성 > 직관성] 검색어 타이틀

67. [VOD] [이해성 > 직관성] 버튼 레이블

68. [VOD] [이해성 > 직관성] 아이콘 레이블

69. [VOD] [이해성 > 직관성] 폼 레이블

70. [VOD] [이해성 > 직관성] 키패드

71. [VOD] [이해성 > 직관성] 로딩

72. [VOD] [이해성 > 직관성] 내용 전달

73. [VOD] [이해성 > 직관성] 전문적 의미 배제

74. [VOD] [이해성 > 직관성] 안내 레이블

75. [VOD] [이해성 > 직관성] 플레이스 홀더 텍스트

76. [VOD] [이해성 > 친절성] 내용 전달

77. [VOD] [이해성 > 친절성] 전문적 의미 배제

78. [VOD] [이해성 > 친절성] 안내 레이블

79. [VOD] [이해성 > 도움말] 플레이스 홀더 텍스트

80. [VOD] [기억성 > 나의 이전 행위 알려주기] 개념

81. [VOD] [기억성 > 입력 행위 부담 최소화] 개념

82. [VOD] [변화제시성 > 시스템 데이터 신뢰성] 개념

83. [VOD] [변화제시성 > 업데이트 시점] 개념

84. [VOD] [사용자 주도권 > 편집] 개념

85. [VOD] [사용자 주도권 > 조작] 개념

86. [VOD] [사용자 주도권 > 제어] 개념

87. [VOD] [사용자 주도권 > 개인화] 개념

88. [VOD] [시스템 주도권 > 행위 제한] 개념

89. [VOD] [대체성 > 다양한 유입 경로] 개념

90. [VOD] [대체성 > 다양한 조작 행위 방식] 개념

91. [VOD] [대체성 > 다양한 탐색 유형] 개념

92. [VOD] [다중성 > 다중 선택] 개념

93. [VOD] [다중성 > 동시 수행] 개념

94. [VOD] [친숙성 ] 개념

95. [VOD] [예측가능성 ] 개념

96. [VOD] [외부적 일관성 > 유사 패턴 ] 개념

97. [VOD] [외부적 일관성 > 제스처 행위] 개념

98. [VOD] [내부적 일관성] 개념

[4주차] 챌린지 줌 Live 수업:

"가독성, 논리성, 이해성, 기억성, 변화제시성, 사용자주도권, 시스템 주도권, 대체성, 다중성, 친숙성,예측가능성, 일관성"

10월28일(월) PM 21시 - PM 23시 30분 (3시간)

1부. 4주차 수업 관련 핵심 내용 및 Case Study 강의 (2시간 30분)

2부. 4주차 수업 관련 Q&A_무엇이든지 물어보세요 (30분)

https://ebprux.liveklass.com/cu/qzJvCEEK