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
여행에 필요한 다양한 서비스를 찾을 수 있음
“나도 기다렸어~” - 대화체의 친근한 말투
마이리얼트립
다양한 사람들이 작성한 글을 읽거나 내가 직접 글을 쓸 수도 있는 공간
“내 서랍엔 무슨 책이 있더라” – 오프라인 단어를 사용하거나 동사를 명사처럼 사용
브런치
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
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시 별도 검색 없이 인기 버
킷리스트별 추천 여행지 제공
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
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
43. 43
UX/UI Design
스크롤 또는 스와이핑시 화면내 3D 요소가 반응하면서 2차원 스크린의 공간적 한계를 극복하려는 경향. 정보의 입체적 다면성, 공간적 특
성, 사용자 조작과의 매칭을 표현한다. 3D 모델 엔진의 발달/대중화와 더불어 갈수록 더 보편화될 것으로 전망된다.
3D 요소 활용
UX/UI Trend
46. 46
UX/UI Design
인터넷 초창기에 선보였던 거친 비주얼, Dot 이미지, 밝고 선명한 색상, 두껍고 볼드한 텍스트 등의 Retro 스타일을 현대적으로 구현하는 경
향. 스트리밍 음악이 대세이지만, 레코드 턴테이블(Vinyl)이 유행하고 있는 현실과 빗댈 수 있다. 단지 복고주의풍이라기 보다는 갈수록 현
실과 디지털의 차이가 불분명해지는 것에 대한 저항, 다양한 감성의 추구라고 볼 수 있다.
Y2K
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