올 초에 회사에서 팀원들과 공유하기 위한 목적으로 디자인 트렌드 리서치를 진행했습니다.
스터디한 내용을 정리하다 보니 더 많은 분과 나누면 좋을 것 같아 블로그에 공개 배포해봅니다.
(조금 다듬어서 올려야지 하고는 미루다가 결국 한해의 절반이 다가오고 있네요. 😅)
포스팅은 분량을 적절히 배분하기 위해 UI/UX와 GUI 파트를 나눠서 업로드하였습니다.
* 아래 PDF 파일을 다운받으시면 정리한 내용을 보기에 더 편하실 것 같습니다. 🙏🏻
Design Trend Research 2022
[ 02. GUI Design Trend : UX 트렌드를 따르는 그래픽 표현 방법 리서치 ]
{ 절제 위에 강렬한 시각화 + 경험의 확장과 연결 }
- Minimal Interfaces / Bold Typography
- Claymorphism 3D / Illustration + Depth
- Glassmorphism / Smooth Gradient / Layer + Shadow
- Holographic / Neon
- Flat Brutalism
- 90’s retro
- Emojis Everywhere
- Dark Mode
- UX Writing and Microcopy
1. Minimal Interfaces / Bold Typography
강한 것은 더 강하게! 약한 것은 더 약하게. 사용자 경험을 향상시키기 위한 여백이라는 트렌드와 함께 미니멀리즘으로 돌아가고 있습니다.
이는 불필요한 요소들을 줄이고, 절제하여 의도된 UX의 특정 액션에 더욱 집중할 수 있도록 시각적인 환경을 마련해 줍니다.
2. Claymorphism 3D / Illustration + Depth
가상과 현실의 경계가 통합된 메타버스의 등장으로 디지털 생태계가 새롭게 변화하면서 플랫 디자인의 유행에 더해 사람들은 보다 사실적이고 대화형 콘텐츠를 즐기게 되었습니다. 이에 따라 평면 속에서도 살아 숨쉬듯 사실적인 질감 묘사와 생동감 넘치는 일러스트의 적절한 활용은 중요한 콘텐츠를 더욱 강조하고, 심미적인 리듬감을 더해주는 역할을 합니다. 입체적 그래픽이 트렌드로 돌아오며 자연스러운 볼륨감과 질감이 느껴지는 일러스트레이션이 자주 활용되는 것을 볼 수 있습니다.
3. Glassmorphism / Smooth Gradient / Layer + Shadow
점토를 빚은 듯한 입체감있는 Claymorphism과 유리질감을 연상시키는 Glassmorphism이 그래픽 디자인의 주요한 흐름으로 나타나면서, 동시에 자연스레 색상의 부드러운 그라디언트 효과와 그림자로 입체감을 표현하는 방식을 쉽게 찾아볼 수 있습니다.
4. Holographic / Neon
홀로그래픽과 네온 그래픽 스타일은 메타버스, VR, 홀로그램 등 사이버와 현실 세계가 융합하는 시대에 룩앤무드가 잘 맞아 떨어지는 표현 방식 중 하나입니다. 홀로그래픽은 가상 세계와 미래적인 분위기에 맞게 새로운 가능성에 대한 영감을 줍니다. 최근 트렌드에서 추상적이고 둥근 형태, 홀로그램처럼 느껴지는 선명하고 빛나는 색상과 질감을 활용한 인터페이스를 어렵지 않게 찾아볼 수 있습니다.
5. Brutalism
브루탈리즘은 20세기 초 모더니즘 건축의 뒤를 이어 1950년대부터 70년대 초반까지 융성했던 콘크리트 건축 양식입니다. 이제 이 양식을 디지털로 옮겨와 플랫한 디자인, 진한 아웃라인, 대비되는 컬러, 두꺼운 폰트 사용, 실제 이미지와 함께 타이포그래피를 강조하는 방식입니다. 기존 브루탈리즘 디자인은 그리드의 정돈과 강조 요소가 없는 것처럼 보여 다소 정리되지 않은 화면처럼 보일 수 있습니다. 근래엔 다양한 서비스에서 브루탈리즘의 특성과 동시에 표준적인 레이아웃을 사용해 좀 더 정돈된 인상을 줍니다. 이렇게 잘 융화된 브루탈리즘 디자인은 한번 보면 쉽게 잊히지 않는 강점을 갖고 있습니다.
6. 90’s Retro Style / Throwback Design
90년대 레트로 스타일은 다채롭고 질감있는 복고풍 모티프를 가져온 방식입니다. 이는 그 시대를 지나온 사람들에겐 노스텔지어로, 젊은 세대에겐 빈티지에 대한 참신한 매력으로 작용하여 디자인 트렌드의 한 주축으로써 사랑 받아왔습니다. 90년대 디자인의 생생한 색상과 실험적인 타이포그래피, 텍스쳐 배경, 격자를 벗어난 레이아웃, 틀에 얽매이지 않는 이미지와 기발한 일러스트레이션 사용은 올해도 많은 이목을 끌 것으로 보입니다.
7. Emojis Everywhere
우리가 정보를 소비하는 방식도 수년간 변화해 왔습니다. 텍스트 단어보다 상징에 초점을 맞추는 것에 익숙해 졌으며 아이콘과 이모티콘은 국제적으로 알려진 의사소통 수단이 되었습니다. 연구에 따르면 우리는 대화에서 사용되는 이모티콘을 바탕으로 사람과 목소리의 톤을 판단하기도 한다고 합니다. 이모지 또한 우리가 정보를 인지하고 읽는 방법에 영향을 미칩니다. 이를 이용해 서비스의 아이덴티티와 콘텐츠의 특성을 사용자들이 이해하기 쉽게 전달해줄 수 있습니다. 따라서 최근 어디서나 쉽게 쓰이고 읽히는 이모지는 올해에도 GUI 디자인 트렌드로써 작용할 것으로 보입니다.
8. Dark Mode
(1) 다크모드 사용시 고려해야할 사항
- 다크모드를 기본으로 할 경우, 타이포그래피 가독성과 대조를 특히 고려해야 합니다.
- 타이포그래피의 대조, 절제된 색상과 충분한 여백이 필요한 다크모드는 결국 미니멀리즘과 연결됩니다.
- 어떤 것이든 사람들의 선호도를 예측할 수 없기 때문에, 최근 앱 트렌드는 사용자의 기호에 따라 선택의 기회를 제공합니다.
- WCAG(Web Content Accessibility Guidelines)는 3:1 이상의 대비율을 가져야 하는 대규모 텍스트를 제외하고 "텍스트의 시각적 표현은 4.5:1 이상의 대비율을 가져야 할 것”을 요구합니다. 따라서 설계자는 어두운 모드에서 콘텐츠를 쉽게 읽을 수 있는지 확인해야 합나다.
- 다크모드 고려할 사항 : https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6
8 Tips for Dark Theme Design
Dark theme is one of the most requested features over the past few years. Both Apple and Google made a dark theme an essential part of UI…
uxplanet.org
- 다크모드 Google Material : https://material.io/design/color/dark-theme.html#behavior
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
(2) 다크모드의 강점
- 눈의 피로를 덜어주고 효율적인 전력 사용
주변 조도에 맞는 화면 설정은 눈의 피로를 덜어주며 배터리를 효율적으로 사용할 수 있습니다. 야간 이용율이 높은 사용자들에게 라이트 모드는 장시간 사용 시 눈이 불편할 수 있습니다. 기술이 발달하면서 보다 밝고 선명해진 디스플레이는 어두운 곳에서 눈에 피로감을 더욱 가중시키기 때문에 최근 앱 트렌드는 다크모드의 UI를 사용자 환경과 기호에 따라 선택의 기회로 제공합니다.
- 영상 콘텐츠 주목도 향상
장시간 화면을 봐야하는 영상 콘텐츠 서비스에서는 다크모드에서 사용자들의 눈을 더욱 편안하게 하고, 영상에 더욱 몰입감을 주는 강점을 가집니다.
- 고급스럽고 무게감 있는 분위기
어두운 색감이 주는 무게감은 프리미엄 서비스, 혹은 비밀스러운 인상을 줍니다. 블랙 컬러가 부정적인 이미지를 띄었던 이전과 달리 최근에는 고급스럽고 세련된 이미지로 재인식 되면서 다양한 브랜드 기업들이 프리미엄 서비스, 고급 이미지를 형성하기 위해 블랙 마케팅으로 활용합니다. 또한 어두운 바탕에 흰색 텍스트는 눈에 띄어 기억하기 쉬워 사용하기 편리하며, 트렌디한 분위기를 나타냅니다.
(3) 다크모드를 활용하면 좋은 경우
- 어두운 환경 : 야간에 사용하는 엔터테인먼트 앱처럼, 맥락과 용도에 적합한 경우
- 접근성 향상 : 저시력자 혹은 밝은 빛에 예민한 사용자들에게 선택의 기회 제공
- 콘텐츠 주목도 향상 : 인상적이고 드라마틱한 외관 연출로 콘텐츠에 강한 몰입감을 주고 싶은 경우
- 심플한 요소 : 디자인을 채우는 요소들과 콘텐츠의 유형이 많지 않을 때
(4) 다크모드를 권장하지 않는 경우
- 텍스트의 양이 많을수록 가독성이 떨어짐
- 다양한 유형의 콘텐츠가 혼합되어 사용되고 있을 때
- 디자인에서 다양한 색상이 필요한 경우
[ Insight in Trend ]
What is influencing the trends of 2022?
2022 트렌드에 영향을 미치고 있는 것은 무엇인가?
모두가 대유행의 세계에 직면하게 되면서 짧은 시간 동안 트렌드가 크게 변화하고 있습니다. 강제 폐쇄와 고립 등이 디지털 세계에도 큰 영향을 미쳐 왔습니다. 메타버스의 등장으로 다양한 서비스와 제품들은 현실과 가상 세계를 융합하여 우리 삶 자체에 새로운 방식으로 접근하고 있습니다. 이에 따라 기존 현실의 삶과 맞닿는 새로운 세계 간의 경계가 흐려지고 있으며, 통합된 세계관 안에서 새로운 가치를 창출하게 되었습니다.
비대면 협업, 가상 자산 거래, 원격 회의, 재택근무 등 통신플랫폼은 다양한 형태로 급속히 성장하고 있습니다. 항상 그렇듯 급변하는 시기에는 기술과 디자인 트렌드가 변화하는 시대적 가치와 고객의 요구를 반영합니다. 따라서 앞으로 UX/UI 트렌드는 고도화된 콘텐츠를 더욱 효율적으로 시각화하여, 모바일 중심에서 점차 다양한 디바이스로 확장되어 메타버스로의 다양한 접근법이 시도될 것입니다.
덧붙여 메타버스로 현실과 가상의 장벽이 낮아지며 두드러지는 개인 정보 유출과 프라이버시 침범 등 보안 이슈를 방지하기 위한 다양한 기술적 연구와 새로운 환경에 대응하는 사회적 제도 마련 또한 더욱 중요해질 것으로 보입니다.
디자인 트렌드 리서치 2022 (1) - UI/UX 편
올 초에 회사에서 팀원들과 공유하기 위한 목적으로 디자인 트렌드 리서치를 진행했습니다. 스터디한 내용을 정리하다 보니 더 많은 분과 나누면 좋을 것 같아 블로그에 공개 배포해봅니다. (조
design-zip.tistory.com
'Blog > Product Design' 카테고리의 다른 글
| 2편) DDC 2023: DESIGN DAY 디자인 컨퍼런스 요약 (0) | 2023.01.30 |
|---|---|
| 1편) DDC 2023: DESIGN DAY 디자인 컨퍼런스 요약 (2) | 2023.01.30 |
| 디자인 트렌드 리서치 2022 (1) - UI/UX Design Trend (2) | 2022.05.10 |
| 가볍게 훑어보는 UX History (1950년대부터 현재까지) (0) | 2020.11.05 |
| 우리는 어떤 디자이너입니까? (feat. 우아한 형제들) (0) | 2019.03.21 |
