두번째 섹션으로 고객을 홈페이지로 유입한 후 어떻게 전환율을 최적화 시킬 수 있을 지에 대해서 알아보기 위해
UI/UX 최적화에 대해서 말씀드리도록 하겠습니다.
다음은 최신 UI/UX 트렌드 TOP8입니다.
뉴모피즘에서 부터 페럴렉스 스크롤링까지 8개의 트렌드를 설명드리도록 하겠습니다.
첫번째 트렌드는 뉴모피즘입니다.
뉴모피즘은 UI에 공간감을 주는 것이 어떨까 라는 생각에서 시작되었습니다.
점차 표현해야 할 정보의 양은 늘어났고 평면적인 디자인은 비슷한 레벨의 정보 구분이 어렵기 때문에 오히려 복잡해 보이기 때문입니다.
이런 상황을 해결하기 위해 정보의 위계를 Depth로 보여주고 이전에 유행한 스큐어모피즘에 현대적인 해석이 더해져서 뉴모피즘이라는 트렌드가 형성되었습니다.
스큐어모피즘은 아이폰 1세대의 입체 아이콘을 생각하시면 되고 이후 플랫디자인이 지금까지 대세이고
스큐어모피즘+플랫디자인이 뉴모피즘으로 이해하시면 될 것 같습니다.
국내에서는 적용한 사이트는 많이 없고 이제 막 시작하는 단계입니다.
다음은 비정형 디자인입니다.
최근 대부분의 사이트는 모바일과의 사용성을 중요하게 생각하다 보니 반응형웹이라는 트랜드도 나왔고
이에 따라 대부분 그리드 기반의 디자인이 대세입니다.
작년부터 이런 일률적인 트렌드에 반해 웹사이트의 개성을 부각시키는 비정형 디자인이 나오게 되었습니다.
보통 비정형 디자인은 주로 타이포그래피와 함께 사용되어서 엣지있고 트렌드한 느낌을 줍니다.
다만, 고객의 사용성과 접근성을 고려한 균형감있는 디자인을 잊지 말아야 합니다.
다음은 UX라이팅(마이크로 카피)에 대한 트렌드를 말씀드리겠습니다.
여러분들이 잘 알고 계시는 카피라이팅이 단 시간 내 사람들의 시선을 사로 잡는 것이라면
UX 라이팅은 메시지를 오해없이 정확히 전달 하고자 하는 목적입니다. 즉, UX의 목적인 사용성에 대한 부분에 속합니다.
좋은 UX 라이팅은 적은 비용으로 개발 비용을 줄이고 고객의 로열티를 높일 수 있다는 장점이 있습니다.
특히, 예제에 있는 "얼마를 보내시겠어요?"와 같은 웹이나 앱의 팝업 창, 전송버튼 등에 사용되는 카피를 마이크로 카피라고 합니다.
멀티 페르소나 사례로 가장 많이 보신 UX는 넷플릭스일 것입니다.
넷플릭스 처럼 하나의 계정에 부계정을 여러개 두어 사용하거나
FLO처럼 멀티캐릭터를 지원해서 취향이나 상황에 따라 캐릭터에 어울리는 음악을 추천해주거나 소규모 네트워크를 형성하는
다양한 사례가 나오고 있습니다.
페럴렉스 스크롤링은
한 화면에 다양한 스토리를 담아 사용자들에게 호기심을 불러일으키고 웹사이트에 생동감을 부여하는 기법입니다.
그 결과로 고객은 재미와 편리함을 느끼게 되고 페이지 이탈률이 줄어들어 검색엔진이 좋아하는 사이트가 되지만
반대로 단일 페이지로서는 검색엔진에 잘 노출되지 않는 문제점이 있습니다.
이를 극복하기 위해서는 홈페이지 설계 시 단일 페이지로 설계 할 것이 아니라
페럴렉스 스크롤링의 각 부분 별로 세부 페이지로 연결되도록 해서
최소 10페이지 이상 페이지가 설계 되도록 해야 SEO에 유리한 홈페이지로 제작할 수 있습니다.
국내 사례로 더현대 서울의 홈페이지는 보통 백화점 홈페이지는 고급스런 느낌을 주로 강조하는데 비해 감각적인 레이아웃과 스크롤링 효과를 보여주고 있습니다.
https://www.thehyundaiseoul.com/
외국 사례로 탄산음료 사이트에서는 탄산의 특징을 기포의 움직임으로 페럴렉스 스크롤링과 함께 탁월하게 표현했습니다.
https://drinkcann.com/
홈페이지가 일방적인 정보전달을 넘어서서 콘텐츠 경험 중심이 트렌드화 되면서 스토리텔링 기법이 웹에 적용되는 사례가 많이 늘고 있습니다.
사용자가 제품 또는 서비스의 일부분으로 느끼게 하는 경험을 제공해서 강한 브랜드 이미지를 구축하고 있습니다.
가장 스토리텔링을 잘 하는 사이트를 들자면 애플스토어 에어팟 프로 소개 페이지가 있습니다.
https://www.apple.com/kr/airpods-pro/
클릭해보시면 제품을 사람들의 경험, 재미, 다양한 스토리와 함께 페럴렉스 스크롤링을 통해 보여주고 있는 것을 보실 수 있습니다.
보통 스토리텔링을 구성할 때에는 카피라이팅, 타이포그래피, 애니메이션, 대화형 인터랙션, 페럴렉스 스크롤링 등이 많이 사용됩니다.
3D, 증강현실, 가상현실에 대한 트렌드를 말씀드리겠습니다.
https://redlight.dev/ 레드라이트라는 외국 사이트를 보시면
좌측은 MP4 영상 우측은 카피가 보이는 데요.
페럴렉스 스크롤링으로 마우스 휠을 스크롤 하면 1~3번까지 메시지가 전환되면서 영상도 함께 전환이 됩니다.
https://vx.lgdisplay.com/kr/publicTour/Rest?type=vr&zone_pk=1
LG디스플레이의 가상 전시관에서는 빨간+박스를 클릭하면 화면이 전환되면서 설명이 나오고 영상이 디스플레이 됩니다.
이케아 플레이스에서는 거실에서 다양한 가구를 디스플레이해서 내 집에 맞는 인테리어를 쉽게 할 수 있도록 증강현실을 활용하고 있습니다.
고급개인화는 사용자의 위치 또는 검색기록을 분석해서 데이터를 제공하는 트렌드인데요.
사용자의 취향을 분석해서 영화를 추천하는 넷플릭스를 생각하시면 됩니다.
그외 글로벌 음원 서비스 No1.스포티파이도 사용자 취향기반 음원을 추천하거나 새로운 취향을 발굴해주기도 합니다.
그외 국내외 UIUX트렌드 요약으로 이커머스/브랜딩&정보/서비스 부분은 다음과 같은 사례를 추가적으로 제공해드리오니
참고하셔서 자사 웹사이트에 적용해 보시면 좋은 결과가 있으리라 생각합니다.
29CM / 비정형 디자인, UX라이팅
https://www.29cm.co.kr/home/
인테리어 제품 쇼핑몰 / 스토리텔링 기법
https://rhythmofnature.armadillo-co.com/
더 현대 서울 / 패럴렉스 스크롤링
https://www.thehyundaiseoul.com/
NC소프트 / 3D
https://kr.ncsoft.com/kr/index.do
블록체인 개발 업체 / 3D, 스토리텔링 기법
삼성전자 갤럭시 / 패럴렉스 스크롤링, 3D
https://www.samsung.com/sec/smartphones/galaxy-s21-ultra-5g/
그 곳 판문점 / 3D, 스토리텔링
https://news.joins.com/Digitalspecial/290
유니세프 /스토리텔링, 비정형 디자인
https://www.unicef.or.kr/event/unicef-team2-2/
기아 EV6 / VR
https://worldwide.kia.com/kr/ev6#visualizer
LG 디스플레이 Virtual Exhibiton / VR
https://vx.lgdisplay.com/kr/publicTour/Rest?type=vr&zone_pk=1
소프트웨어 개발 스튜디오 / 3D
애플 스토어 / 패럴렉스 스크롤링, 3D
https://www.apple.com/kr/airpods-pro/
구글스토어 / 패럴렉스 스크롤링, 3D
https://store.google.com/us/product/pixel_buds?hl=en-US
Jeep / VR
사바나 미술관 / VR 전시
http://www.savinamuseum.com/kor/exlist.action?exdgb=VR
어반베이스 / VR 가상 인테리어
구글 클라우드 쇼케이스 / 3D
https://showcase.withgoogle.com/demo/cloud-city
넷플릭스 / 개인화 서비스
https://www.netflix.com/browse
금융 서비스 / 3D, 시차 애니메이션
지금까지 디지털고객여정, 검색엔진/서버속도 최적화, UIUX 트렌드에 대해서 알아보았습니다.
더 궁금하신 점 있으시면 silverti@next-t.co.kr로 연락주시면 답변드리도록 하겠습니다.
<참고 블로그>
다음 블로그 및 유튜버 분들께 감사드립니다. ^^
https://chaeyeon-chaeyeon.tistory.com/23
블로그, chaeyeon, <2021년도를 이끌어 갈 10가지 UIUX 디자인 트렌드 정리하기>
https://brunch.co.kr/@outlines/41
브런치, Jiyoon, <다시 돌아온 스큐어모비즘>, 2019. 09.10
https://brunch.co.kr/@cliche-cliche/102
브런치, 우디, <더 나은 마이크로 카피를 위한 몇 가지 팁>, 2021. 01. 17
https://brunch.co.kr/@xpleat/49
브런치, X PLEAT, <2020 UX 디자인 트렌드>, 2020. 01. 17
https://www.emotion.co.kr/magazine/17/
매거진, <이모션글로벌이 바라 본 2021년 UI/UX 디지털 트렌드>, 2021. 01. 25
https://www.youtube.com/watch?v=-__BnT_JnY4
Youtube, 쌩스터 티비, <당신이 꼭 알아야 할 디지털 디자인 트렌드 2021>
https://www.youtube.com/watch?v=Y1a-X-P6n7Y
Youtube, from. designer, <UX/UI 디자인 트렌드 2021>, 2021. 02. 24
https://www.youtube.com/watch?v=1YUE1FIfQLc
Youtube, Webflow,
아래를 클릭하시면 이전 글을 보실 수 있습니다.
3. ✔︎ 2021 UIUX 디자인 트렌드
