brunch

라이킷 37 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 생각하는 에밀리 Aug 16. 2022

2023 디자인 트렌드 분석(2)

UI/UX 디자이너 입장에서 보는 디자인 트렌드에 대한 나의 생각

지난 게시글에서는 2023 디자인 트렌드 10가지 중 5가지에 대해서 먼저 살펴봤는데, 이번 게시글에서는 조금 더 익숙한 개념의 5가지 트렌드를 소개해보려 한다.

6. 미니멀리즘과 단순화

잘 알려진 선도적인 회사의 제품과 기술을 살펴보면 간편하고, 유익하며, 단순함(minimul, 미니멀리즘)을 추구하는 인터페이스를 추구하고 있습니다. 이 트렌드는 해가 지날수록 커지고 있으며, 점점 더 많은 브랜드가 활용할 것으로 예상됩니다.

미니멀리즘의 개념은 스마트폰이 생겨난 이후로 꾸준히 중요도가 증가하고 있다. 아무래도 모바일이라는 작은 환경 속에 데이터를 제공하다 보니 생겨난 개념이 아닐까 싶다. 단순한 UI는 사용자에게 전달하고자 하는 정보의 직관성을 높인다. UI를 단순하게 하면서 불필요한 부분을 적절한 UX로 대체하면 더욱더 완벽하게 미니멀리즘을 표현할 수 있다. 대표적인 서비스는 토스이다. 기존 주식 앱들을 보면 차트와 숫자로 화면이 복잡하게 표시되어 있었는데, 토스는 그런 내용을 보다 미니멀리즘하게 표현하여 직관적인 UI를 제공하였다. 많은 디자이너들의 머릿속을 느낌표 100개로 만들었다.

지난 게시글에서 다뤘듯이 모바일 환경에서 아이콘 등이 3D 캐릭터나 입체적으로 변화되고 있기는 하지만 전체적인 구성의 미니멀리즘은 꽤 오래 지속될 듯하다.

7. 에어 제스쳐 컨트롤

에어 제스처 컨트롤 (Air Gesture Control)은 사용자가 신체 몸짓으로 공기를 움직여 기기를 사용할 수 있도록 하는 터치리스 장치입니다. 흔들기, 꼬집기, 손바닥 벌리기, 밀기, 스와이프 같은 움직임이 기기를 작동하고 제어하는데 사용됩니다. 예를 들어 사용자가 휴대폰 카메라를 열고 전면에서 손바닥을 보여 자동으로 셀카를 찍는 것도 여기에 해당합니다. 코로나19로 인한 변종 바이러스의 끊임없는 공격으로 터치리스 상호작용이 주목받는 상황이며, 에어 제스처 컨트롤 기술이 산업에 전반적으로 시도될 것입니다.

어떤 에어 제스쳐 컨트롤이 추가로 생겨날지 궁금하다. 손을 이용한 제스쳐는 이미 많이 사용되고 있기 때문에 한계가 있을 것 같은데, 머리, 표정(?)등을 이용한 제스쳐가 생긴다면 활용 방법이 무궁무진할 것 같기도 하다. 예를 들면 윙크를 한다던지, 고개를 위아래로 끄덕인다던지. 다만 에어 제스쳐 컨트롤을 사용자에게 각인시키고 생활화하는 것은 꽤 시간이 걸리는 일 같다. 제일 많이 사용되는 제스쳐는 흔들기(코로나19로 인해 QR코드를 찍을 때), 손바닥으로 사진 찍기, 아이패드에서 손바닥 벌리기로 실행 중인 앱 확인하기 등은 자주 쓰고 있으나 그 밖의 제스쳐는 어떤 게 있는지도 잘 모르는 실정인 듯하다. 각 OS나 제조사 별 기능이 아닌 모두 합의된 제스처 컨트롤 기능으로 만들면 더 좋을 것 같다.

8. 고급 마이크로 인터랙션

창의적이고 인터랙티브한 애니메이션은 사용자의 관심을 얻는 데 도움이 될 뿐만 아니라 참여도를 높이기 때문에 내년에도 많이 사용될 것입니다. 애니메이션 하위 분야 중 앞으로 남을 UX 트렌드는 사용자가 제품을 이용할 때 아주 작은 것이라도 피드백을 제공하는 마이크로 인터랙션입니다. 사용자가 제품을 사용할 때 작은 애니메이션을 사용해 가이드를 제공해주는 방식입니다. 이런 움직이는 애니메이션과 마이크로 인터랙션은 사용자와 인터페이스를 감정적으로 연결해줍니다. 움직이는 일러스트레이션은 활기찬 느낌을 주고, 가장 효과적인 스토리텔링 방식으로 사용되어 왔으며, 곧 크게 주목받게 될 것입니다. 마이크로 인터랙션은 모든 소프트웨어 응용 프로그램에 존재합니다. 우리는 응용 프로그램들 사이에서 이를 매번 사용합니다. 인스타그램의 '좋아요' 기능과 트위터의 '리트윗'은 마이크로 인터랙션의 대표적인 예시입니다.

마이크로 인터랙션은 점점 더 화려해지는 추세인 듯하다. 기존의 웹 디자인 환경에서 마이크로 인터랙션은 Hover, Active 등 간단한 애니메이션이었다. Hover, Active 등의 상태를 다르게 표시해줌에 따라 사용자가 어떤 상태이며, 어떤 행동을 하는지 시각적으로 알리고 유도하기 위해서 사용되었다. 그러나 모바일 환경에서는 Hover를 사용하기 어려워졌다. Hover란 마우스를 해당 버튼 영역 위에 올려놓았을 때 표시되는 것인데, 모바일은 손으로 누르면 대체적으로 바로 화면 이동을 하거나 비선택/선택의 상태를 표시하기 때문에 Hover 상태를 표현할 수 없다. 그 결과로 인터랙티브한 애니메이션이 생긴 것 같다. 이전의 인터랙션이 '좋아요' 버튼을 눌렀을 때 라인 아이콘에서 색이 채워지는 아이콘이 되었다면, 요즘은 색이 채워지는 것에서 멈추지 않고 마구 흔들어재끼는(?) 애니메이션이 추가되어 더욱더 사용자에게 강렬하게 인식시킨다. 사용자의 관점으로 매우 바람직하고 재미있는 요소라고 생각한다.

다만 디자이너의 관점으로 생각할 때는 매우 어렵다. 어떻게 만들어야 할지. 예전이라면 디자이너가 포토샵, 애프터이펙트 등의 프로그램으로 gif로 만들어서 개발자가 적용을 했을 텐데, 요즘은 gif보다는 개발자들이 코드로 직접 적용하는게 훨씬 자연스럽고 좋은 모션 샘플이 많은 것 같다. 최근 프로젝트 작업에서 로딩 이미지를 모션 CSS Sample을 서칭하고 전달해서 퍼블리셔가 그 코드를 적용하는 방식으로 작업했는데, 더 많은 마이크로 인터랙션을 적용하고 싶은데 다른 디자이너나 개발자 분들은 어떻게 작업하는지 너무 궁금하다.(혹시 의견 있으신 분들은 댓글로 공유 부탁드립니다. 너무 궁금해요!)

9. 마이크로카피와 UX 라이팅

마이크로카피는 여러분의 UI/UX 디자인을 향상하는 좋은 수단입니다. 웹사이트에 독특한 분위기를 주면서 사용자에게 친근하게 다가갈 수 있도록 돕기 때문입니다. 다만 기업의 정체성을 잘 대표하도록 디자인되어야 합니다. 브랜드에 맞게 구체적이고, 고도로 개별화되어야 합니다. 이런 작은 문구들이 브랜드 정체성과 밀접하게 연관되어 있지 않으면, 방문자를 끌어들이는데 실패할 수 있기 때문입니다.

마이크로카피와 UX 라이팅이라는 문구를 듣자마자 떠오른 것은 '카피라이터(copywriter)'이라는 직업이다. 2012년도에 광고 대행사에서 인턴을 했을 때, 회사에 카피라이터가 1명 계셨었는데 그때 처음 카피라이터라는 직업을 알게 되었다. 광고에 중요한 것은 매력적으로 분위기를 형성해서 고객의 마음을 사는 것일 테니까 사내에 카피라이터가 있고 없고의 차이가 꽤 클 것이다. 광고 대행사 인턴을 마치고 난 후로는 스타트업이나 중소기업에서 근무를 했기 때문에 카피라이터가 존재하지 않았다. 종종 내가 카피라이터의 역할을 하곤 했다.

사료 구독 서비스 모바일 디자인 프로젝트를 진행할 때, 앱 전반의 분위기를 강아지와 소통하는 듯한 느낌을 주고자 했었다. 구독 중인 사료가 없을 때에는 빈 그릇과 강아지 일러스트를 넣어서 '구독 중인 사료가 없어요.'라는 문구를 넣고, 사료를 검색하는 화면에는 '내가 먹는 사료를 검색해 주세요'라고 표기했었다. 카피는 서비스의 전반적인 분위기를 좌우할 수 있기 때문에 앞으로 카피라이터를 더 많은 회사에서 만날 수 있으면 좋겠다.

10. 다크/라이트 전환을 허용하는 적응형 UI

화면 크기마다 달라지는 반응형 디자인은 상대적인 단위를 지정해 사용하는 기술(예: 픽셀 대신 REM 사용하는 등) 등을 이미 수용했습니다. 반면 적응형 UI는 어느 앱이나 브라우저에서도 똑같은 디자인이 보일 수 있도록 만들어야 했습니다. 그래서 다크/라이트 전환 기능은 이러한 표준화의 일부가 될 것입니다. 디자이너들과 개발자들은 사용자가 하루 중 어느 때나 일관된 경험으로 쾌적하게 제품을 사용할 수 있도록 노력하고 있기 때문입니다.