라이트브레인 CX컨설팅그룹 조성봉 이사의 최신 UX/UI 트렌드 발표 자료를 공개해 드립니다. 소개해드릴 2022년 최신 UX/UI 트렌드는 다음과 같습니다. 1. 친근하지만감칠맛나는워딩 2. 더정교해진 Forgiving Input 3. Scrollytelling 4. Parallax Scrolling 5. Split Screen Design 6. 큐레이션태그 7. Contextual Search 8. Advanced Personalisation 9. Deep Customizing 10. Inclusivity 11. Meta IA 12. Ethical design 13. 3D 요소활용 14. Y2K 15. Abstract art 16. 다소어려운트리거를동원한Micro Interaction 17. Air Gesture Control 18. Wait-worthy loading screens

2. Content
1. 친근하지만 감칠맛 나는 워딩
2. 더 정교해진 Forgiving Input
3. Scrollytelling
4. Parallax Scrolling
5. Split Screen Design
6. 큐레이션 태그
7. Contextual Search
8. Advanced Personalisation
9. Deep Customizing
10. Inclusivity
11. Meta IA
12. Ethical design
13. 3D 요소 활용
14. Y2K
15. Abstract art
16. 다소 어려운 트리거를 동원한 Micro Interaction
17. Air Gesture Control
18. Wait-worthy loading screens

3. 3
UX/UI Design
디지털 서비스에서 말(Wording)이 갖는 중요성이 증대되고 있는 가운데, 최근에는 쉽게 읽히고 친근하게 느껴지는 표현과 더불어 읽었을
때 감질맛 나는 (약간의 익살과 능청스러움이 결합된?) 형태의 워딩이 유행이다
친근하지만 감칠맛 나는 워딩
UX/UI Trend

4. 4
UX/UI Design
Case Study
친근하지만 감칠맛 나는 워딩
UX/UI Trend
시사 상식 정보 제공
“재미있슴” - 캐릭터 이름을 이용한 어미 처리(~슴)나 은유적인 표현(피자스테이션) 사용
NEWNEEK
MZ세대가 많이 찾는 트렌디한 쇼핑몰
숫자를 이용한 중의적인 표현 방법으로 신선함과 재미를 선사함
29CM

5. 5
UX/UI Design
Case Study
친근하지만 감칠맛 나는 워딩
UX/UI Trend
여행에 필요한 다양한 서비스를 찾을 수 있음
“나도 기다렸어~” - 대화체의 친근한 말투
마이리얼트립
다양한 사람들이 작성한 글을 읽거나 내가 직접 글을 쓸 수도 있는 공간
“내 서랍엔 무슨 책이 있더라” – 오프라인 단어를 사용하거나 동사를 명사처럼 사용
브런치

6. 6
UX/UI Design
Case Study
친근하지만 감칠맛 나는 워딩
UX/UI Trend
다이어트 앱. 채팅창에서 사용할 수 있는 메뉴명이 친근한 대화체로 되어있음
밸런스프렌즈

7. 7
UX/UI Design
사용자가 잘못 입력하거나 서비스가 요구하는 규칙을 따르지 않을 때, 서비스가 이를 자동으로 교정해주는 것
더 정교해진 Forgiving Input
UX/UI Trend

8. 8
UX/UI Design
자동 교정
더 정교해진 Forgiving Input
UX/UI Trend
구글 검색
오타를 자동으로 인식하여 수정된 단어의 검색
결과를 노출

9. 9
UX/UI Design
입력시 필요 조건 안내
더 정교해진 Forgiving Input
UX/UI Trend
티맵
닉네임 설정 시 입력에 대한 필수 입력 및 최소 글자 수에 계좌 연결 중 동의 항목 미선택시 다음단계로 넘어가기 직전 그 예시 화면을 보여주고 사용자가 원한다고 답한다면 대신
토스

10. 10
UX/UI Design
고객 행위 최소화
더 정교해진 Forgiving Input
UX/UI Trend
틱톡
개인정보 설정에서 이메일 변경 시 주요 도메인 노출
삼성스마트TV

11. 11
UX/UI Design
사용자가 Scroll을 함에 따라 동적 애니메이션 또는 마이크로 인터렉션이 전개되면서 짧막한 인상, 메시지, 스토리텔링을 전달하는 것
Scrollytelling
UX/UI Trend

12. 12
UX/UI Design
좀 더 구체적인 정보로의 이동
Scrollytelling
UX/UI Trend

13. 13
UX/UI Design
공간적인 체험을 통한 감각적 경험 전달
Scrollytelling
UX/UI Trend

14. 14
UX/UI Design
공간적인 체험과 이야기의 결합
Scrollytelling
UX/UI Trend

15. 15
UX/UI Design
추상화된 시각정보 속에서 제품의 USP, 메시지 전달
Scrollytelling
UX/UI Trend

16. 16
UX/UI Design
모바일 화면 위에서 사용자가 Scroll을 하는 위치에 따라서 화면 내 시각적 요소의 반응이 규칙적으로 변화되는 것
Parallax Scrolling
UX/UI Trend

17. 17
UX/UI Design
스크롤 과정에서의 각 UI 블록 단위로 상태변화(Transition)을 차별화
Parallax Scrolling
UX/UI Trend

18. 18
UX/UI Design
카피 또는 Key Message의 전환 효과
Parallax Scrolling
UX/UI Trend

19. 19
UX/UI Design
Scrollytelling과 Parallax Scrolling의 결합
Parallax Scrolling
UX/UI Trend

20. 20
UX/UI Design
화면 위에 레이어를 부여하여 각 레이어의 역할을 명확하게 구분한 다음, 사용자의 조작에 따라서 각 레이어 위 정보들이 UX적으로 조화를
이루는 방식
Split Screen Design
UX/UI Trend
제품 이미지 화면 위에 제품 정보 레이어
자라

21. 21
UX/UI Design
지도 + 위치 또는 길안내
Split Screen Design
UX/UI Trend
장소 탐색 시 지도 화면, 상단의 주요 시설(장소), 바텀시트의 장소 정보로 총 3개의 레이어가
함께 정보를 제공함
에어비앤비
숙소 탐색 시 지도 화면, 상단의 숙소 유형 및 편의시설 등 필터, 바텀시트의 숙소 정보로 총 3
개의 레이어가 함께 정보를 제공하며, 사용자의 조작에 따라 지도가 Zoom-in / out 되어 조화
를 이룸
티맵

22. 22
UX/UI Design
미디어 + 댓글 or 추천
Split Screen Design
UX/UI Trend
유튜브 상단에 영상이 재생될 때 하단의 유사 영상 추천 영역이 별도로 움직임. 가로보기 시 영상 옆에 댓글 창이 떠있어서 영상을 보면서 동시에 댓글을 확인
유튜브

23. 23
UX/UI Design
고객의 의도에 따라서 보여지는 정보가 달라지는 3단 레이어 : 바탕(배경, 개요), 시각 정보 or 내비게이션, 구체적인 정보
Split Screen Design
UX/UI Trend

24. 24
UX/UI Design
맥락에 따라서 레이어들이 교차
Split Screen Design
UX/UI Trend
나이키 런 클럽
러닝 프로그램. 내 위치 중심 지도 화면 위에 러닝 가이드 레이어, 러닝 시작 버튼 레이어

25. 25
UX/UI Design
정보를 탐색해 나가는 과정에서 이전보다 태그의 비중이 높아지고 있는 가운데, 사용자의 탐색 경로에 미리 큐레이션 태그를 배치하여 탐
색 경험을 보다 풍부하게 하는 경향
큐레이션 태그
UX/UI Trend

26. 26
UX/UI Design
Case Study
큐레이션 태그
UX/UI Trend
홈 화면 검색 메뉴
오늘의 집
검색입력 화면 하단 ‘사진 추천 키워
드’ 제공
검색입력 화면 하단 ‘노하우 추천 키
워드’ 제공
홈 화면 검색 메뉴
에이블리
검색입력 화면 하단 ‘추천 검색어’ 제
공
Scroll

27. 27
UX/UI Design
Case Study
큐레이션 태그
UX/UI Trend
홈 화면 하단 키토크 검색 영역 터치
마이버킷리스트
여행자들의 버킷리스트를 수집하
여 AI가 인기 버킷리스트 추천
Scroll시 별도 검색 없이 인기 버
킷리스트별 추천 여행지 제공

28. 28
UX/UI Design
Case Study
큐레이션 태그
UX/UI Trend
홈 화면 상단 검색 영역 터치
에어비앤비
유연한 검색 선택 상단 다양한 테마항목 배치

29. 29
UX/UI Design
여러 서비스에 걸쳐서 처음 입력한 검색어를 가지고 검색 결과를 찾아다니거나, 중간에 태그/조건을 추가하면서 검색을 이어갈 수 있는 경
향
Contextual Search
UX/UI Trend

30. 30
UX/UI Design
선택한 필터 내에서 Searching
Contextual Search
UX/UI Trend
메가박스
홈 화면 ‘극장별 예매‘ 선택 원하는 극장 3개 선택 선택한 3개의 극장을 번갈아 탐색하며 하단 원하는 영화 선택

31. 31
UX/UI Design
마이 필터  개인화로 연계
Contextual Search
UX/UI Trend

32. 32
UX/UI Design
기존 프로파일 기반의 개인화보다 한 발 앞선 형태의 초개인화. 고객 성향, 서비스 활동 이력, 맥락 영향도 등을 파악해서 고도화된 개인화
를 제공한다. 고객 입장에서는 탐색 대신 서비스가 제공하는 콘텐츠가 얼마나 자신의 의도에 부합하는 지가 '좋은 UX'의 척도가 된다
Advanced Personalisation
UX/UI Trend

33. 33
UX/UI Design
Cleo : AI 기반의 통합자산관리 핀테크 서비스
Advanced Personalisation
UX/UI Trend
a.예산관리 b.혹평 피드백 c.소비관리 d.머니 퀴즈

34. 34
UX/UI Design
디지털 서비스의 전반적인 환경을 사용자 스스로 설정할 수 있도록 자유도를 높이는 흐름. 단순한 배경화면이나 테마, 아이코노그래피 등을
바꾸는 것에서부터 취향 분석을 통해서 서비스를 맞춤화하거나 소유한 가전기기, 서비스, 콘텐츠를 등록한 뒤 그에 기반하여 서비스를 제공
하는 형태도 있다
Deep Customizing
UX/UI Trend

35. 35
UX/UI Design
홈화면이나 내비게이션의 맞춤화
Deep Customizing
UX/UI Trend
카카오페이 신한PLAY

36. 36
UX/UI Design
웹접근성 보다 한 차원 높은 단계의 보편적 디지털 서비스 제공 흐름. 장애 뿐만 아니라 인종, 문화, 종교, 성, 연령 등 거의 모든 이슈에 대
응하여 서비스를 제공한다
Inclusivity
UX/UI Trend

37. 37
UX/UI Design
좀 더 상세한 개인 취향의 설정
Inclusivity
UX/UI Trend
개인화된 영양 생활 방식을 위한 영양정보 앱
문화, 종교, 신념 등의 이유로 비건식을 하는 사용자를 위해 비건 옵션 제공
Heali

38. 38
UX/UI Design
서비스 내의 정보 뿐만 아니라, 서비스 외부 또는 서비스 영역 단위에서의 탐색을 돕는 Meta IA들이 등장하고 있다
Meta IA
UX/UI Trend

39. 39
UX/UI Design
Case Study
Meta IA
UX/UI Trend
SSG 닷컴
좌측 상단 버튼을 통해 신세계 계열 브랜드 및
서비스 메뉴로 이동
롯데 ON
좌측 상단 버튼을 통해 롯데 계열 브랜드 및 서
비스 메뉴로 이동
StyleShare
좌측 상단 버튼을 통해 주요 대표 서비
스 메뉴로 이동

40. 40
UX/UI Design
디지털 상에서 경험은 점점 더 정보 등록과 인증, 데이터 제공, 사회적 소통을 강요하고 있다. Ethical design은 이러한 스트레스들로부터 해
방되어 (예를 들어 등록 없이도, 데이터도 제공하지 않고, 추적당하지 않으면서..) 좀 더 편안한 가운데 사용자경험을 누릴 수 있도록 하는
디자인 경향이다
Ethical design
UX/UI Trend

41. 41
UX/UI Design
데이터를 제공하지 않을 권리
Ethical design
UX/UI Trend

42. 42
UX/UI Design
회원 가입 없이 이용 가능한 서비스
Ethical design
UX/UI Trend

43. 43
UX/UI Design
스크롤 또는 스와이핑시 화면내 3D 요소가 반응하면서 2차원 스크린의 공간적 한계를 극복하려는 경향. 정보의 입체적 다면성, 공간적 특
성, 사용자 조작과의 매칭을 표현한다. 3D 모델 엔진의 발달/대중화와 더불어 갈수록 더 보편화될 것으로 전망된다.
3D 요소 활용
UX/UI Trend

44. 44
UX/UI Design
3차원 공간 간접 체험
3D 요소 활용
UX/UI Trend
직방의 3D단지투어-매물 실외 직방의 3D단지투어- 매물 실내
직방

45. 45
UX/UI Design
가상 체험관
3D 요소 활용
UX/UI Trend

46. 46
UX/UI Design
인터넷 초창기에 선보였던 거친 비주얼, Dot 이미지, 밝고 선명한 색상, 두껍고 볼드한 텍스트 등의 Retro 스타일을 현대적으로 구현하는 경
향. 스트리밍 음악이 대세이지만, 레코드 턴테이블(Vinyl)이 유행하고 있는 현실과 빗댈 수 있다. 단지 복고주의풍이라기 보다는 갈수록 현
실과 디지털의 차이가 불분명해지는 것에 대한 저항, 다양한 감성의 추구라고 볼 수 있다.
Y2K
UX/UI Trend

47. 47
UX/UI Design
Case Study
Y2K
UX/UI Trend
웹사이트 어워드인 awwwards의 컨퍼런스 사이트
Lo-fi 이미지들
플러스 : 바디케어 제품 및 디스펜서 판매 브랜드 사이드
강렬한 색체 대비와 볼드한 라인

48. 48
UX/UI Design
추상적이고 기하학(geometry)적인 그래픽 요소들을 도입하여 특별한 의미 부여보다는 전체적인 조화와 리듬감을 추구하려는 경향
Abstract art
UX/UI Trend

49. 49
UX/UI Design
약간의 집중을 필요로 하는 마이크로 인터랙션을 통해 사용자의 조작 감각을 높임으로써 경험을 훨씬 더 풍부하고 보람차게 만들어 줌
다소 어려운 트리거를 동원한 Micro Interaction
UX/UI Trend

50. 50
UX/UI Design
2020년 이후 Google Pixel 4, iPhone 11 pro 등장에 탑재된 radar/lidar 모션감지 센서를 활용하여 화면을 터치하지 않고도 흔들기(wave),
벌리기(pinch), 스와이프 등의 간단한 동작으로 화면내 기능을 조작하는 것
Air Gesture Control
UX/UI Trend

51. 51
UX/UI Design
기다리는 시간 동안 짧은 애니메이션을 통해서 감성을 전달하는 경향
Wait-worthy loading screens
UX/UI Trend