| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- AWS
- 솔리디티
- k8s
- JavaScript
- 알고리즘
- CSS
- 백엔드
- next.js
- 컴퓨터공학
- TypeScript
- react
- 웹
- 이슈
- es6
- 타입스크립트
- 클라우드
- 가상화
- kubernetes
- 쿠버네티스
- 리액트
- 이더리움
- 자바스크립트
- BFS
- 프론트엔드
- 블록체인
- HTML
- node.js
- 파이썬
- docker
- 백준
- Today
- Total
즐겁게, 코드
[번역] : 모던 미니멀 UI 스타일 가이드 본문
프론트엔드 개발자로의 취업을 준비하는 과정에서 자연스레 UI/UX에도 많은 관심을 갖게 되었는데요, 그러던 중 Diana Malewicz 님의 글을 읽으면서 한국어로 옮겨본 내용입니다.
오탈자 및 오역 지적은 소중히 받겠습니다! 😄
모던 미니멀 UI 스타일 가이드 : A guide to the Modern Minimal UI style
기능, 가독성, 매끄러움, 매력을 모두 갖는 UI 디자인하기
저는 오래 전부터 기능 및 시각적으로 매혹적인 새 디자인이 나타나기를 기다려 왔는데요, 오늘 다룰 모던 미니멀 UI는 오랜만에 제 마음에 쏙 들었습니다.
많은 인터페이스들의 디자인 스타일 유형을 보아왔을 때 눈길을 끌면서도 가독성이 좋고, 친근하면서 너무 튀지도 않는 인터페이스가 바로 UI의 기능성과 디자인을 모두 잡은 성공적인 경우라고 생각하는데요, 왜냐면 이것이 바로 디자인 트렌드에서 가장 중요하게 생각하는 문제이기 때문입니다.
매일 사용하는 서비스에 뉴로모피즘과 글래스모피즘을 적용하는 것이 적절치 않다는 것에는 의심의 여지가 없듯, 정말 매력적인 디자인이라도 기능성이 중요한 서비스에 적용하기는 쉽지 않습니다.
그래서 저는 기능성과 디자인을 모두 잡은 디자인을 "모던 미니멀" 스타일이라고 부르기로 했습니다.
이는 다른 디자인과 비교했을 때 미니멀리즘을 추구하면서도 머터리얼 디자인이나 플랫 디자인처럼 고전적으로 보이지 않습니다.
"모던 미니멀" 스타일은 스큐어모피즘이나 글래스모피즘처럼 다른 디자인 스타일에서 영감을 받은 것을 확인하실 수 있을 텐데요, 곧 보시겠지만 이는 자연스럽게 어우러져 있으며 어느 수준 이상의 단순성을 유지합니다.
특징
가장 중요한 특징들을 보여드리기 위해, 모바일 화면에 적용된 미니멀 디자인 스타일을 예시로 보여드리겠습니다.
보통 모던 미니멀 스타일은 다음 특성을 포함합니다.
1. 밝은 배경과 흰 영역(whitespace) 사용하기
2. UI 요소들의 테두리에 약간의 굴곡 넣기
3. 크고 가독성이 좋은 헤딩 사용하기
4. 현실적인 사진 사용하기
5. 통일된 느낌의 색감 사용하기 (※ 원문은 thoughtful이나, 일관성을 통해 사용자를 배려한다는 느낌으로 해석했습니다.)
6. 색 대비에 초점 맞추기
7. 과한 효과 사용 자제하기
8. 아이콘, 이미지 등으로 작은 디테일 추가하기
예시
1. 밝은 배경과 흰 영역 사용하기
모던 미니멀 디자인에서 하얀 영역은 가장 중요합니다.
인터페이스 상의 모든 컨텐트는 하얗거나 매우 밝은 배경 위에서 나타나는 것이 좋은데요, 흰 영역을 잘 사용하면 인터페이스가 깔끔하고 새로워 보이면서 미학적으로 만족스럽게 보이게 됩니다.
2. UI 요소들의 테두리에 약간의 굴곡 넣기
모던 미니멀 디자인에서는 UI 요소들의 테두리를 약간 둥글게 디자인하는데요, 이는 UI가 보다 유기적이고 친근하게 보이도록 합니다.
만약 얼마 전에 유행을 일으켰던 클럽하우스라는 서비스를 알고 있다면 클럽하우스의 둥근 아바타 역시 보았을 텐데요, 이런 점들이 제품이 더 독창적이고 차별화된 느낌을 주곤 해 저 역시 개인적으로 둥근 테두리를 애용하곤 합니다. (각진 UI와 비교해 보았을 때 이는 우리 눈에도 더 만족감을 줄 수 있습니다).
조심할 점은 굴곡을 너무 남용하지 않고 버튼이나 컨테이너 등 특정 요소들에만 적용하는 것이 좋으며, 코너의 굴곡은 특정 값을 넘지 않아야만 합니다.
3. 크고 가독성이 좋은 헤딩 사용하기
저는 이런 크고 굵은 헤딩을 선호합니다.
이는 인터페이스가 더 모던해 보이도록 하는데요, 산세리프(돋움체 계열) 또는 세리프(바탕, 궁서체 계열) 중에서 고를 수 있지만 저는 인기있는 산세리프 계열 Gilroy, Sofia Pro, Lufga, Circular 또는 Pulp, Gordita, Visby, Konnect, Geliat, Galano, +Jakarta Sans 정도를 사용할 것을 추천합니다. (역주 : 한글 폰트는 Noto Sans KR, KoPub돋움, 나눔스퀘어 등이 이에 대응할 듯 합니다.)
4. 현실적인 이미지 사용하기
모던 미니멀 디자인에서는 현실적인 이미지를 사용합니다.
저는 예전 글에서 다시 현실적인 이미지를 사용하는 디자인의 유행이 돌아올 것이라고 예측했는데요, 모두가 유아스러운 3D 이미지나 납작한 이미지, 손으로 그린 낙서 이미지에 질려 가고 있었습니다. 현실적인 이미지는 하나의 큰 장점이 있는데요, 바로 실제처럼 보임으로써 디지털 제품에 현실성을 부여한다는 점입니다.
프로젝트에 대한 제 개인적인 연구에서는 사람들이 일러스트에 비해 사진을 선호하는 현상이 확연히 드러났는데요, 왜냐 하면 실제 사진을 사용하는 것이 더 진지하고 감정적인 측면에서도 실제 삶의 경험과 유사점이 있었기 때문입니다.
5. 통일된 느낌의 색감 사용하기
모던 미니멀 스타일에서는 최소한의 색을 사용하려 합니다.
따라서 보통 중요한 동작이나 요소를 강조할 때만 사용하며, 덕분에 알록달록한 아이스크림 이미지 따위가 없다면 인터페이스를 보기 편하다는 장점이 있습니다.
6. 색 대비에 초점 맞추기
모던 미니멀 디자인의 장점 중 하나는 시인성입니다. (반면 다른 스타일에서 가장 고생하는 특징이기도 합니다). 충분한 대비 효과를 넣는다면 배경과 요소들을 쉽게 구분할 수 있고, 시각적 계층과 인터페이스들을 간단히 식별할 수 있습니다.
7. 과한 효과 사용 자제하기
여러 스타일과 효과들의 특징을 가지는 모던 미니멀 디자인은 느낌을 적절히 확장하는 선에서 약간의 색을 입힌 그림자, 블러 효과를 추가한 오로라 배경, 엠보싱 및 글래스모픽한 느낌을 요소들에 적용합니다. 덕분에, 인터페이스의 시인성과 정돈성을 유지할 수 있습니다.
8. 아이콘, 이미지 등으로 작은 디테일 추가하기
제가 모던 미니멀 테마에서 가장 좋아하는 것 중 하나는 바로 디테일을 강조하는 것입니다.
모던 미니멀 디자인은 그 미니멀한 형태에도 불구하고 아이콘과 이미지, 패턴, 콜라주 등의 그래픽 요소들을 현실 이미지나 일러스트와 함께 사용하는데요, 이렇게 평소에도 자주 사용하는 아이콘이나 이모지를 적절히 활용함으로써 인터페이스를 보다 재미있고 친숙하게 꾸밀 수 있습니다.
요약
저는 모던 미니멀 스타일의 느낌을 정말 좋아합니다.
이는 UI 디자인에서 가장 어려운 인터페이스의 기능성, 친숙성을 모두 잡을 수 있도록 하며, 미니멀이라는 특징이 시인성을 해치지도 않음으로써 활용도가 높은(use on a daily basis) 제품에도 적용할 수 있도록 합니다.
저는 이미 회사에서 모던 미니멀 스타일에 영감을 받은 실제 프로젝트를 제작하기도 했고, 이는 실제로 좋은 결과를 가져왔습니다.
지금은 저희 웹 에이전시 페이지를 모던 미니멀 디자인을 적용해 재디자인하고 있기도 합니다.
인터페이스 디자인은 사용성을 감안해 최소화해야 하면서도 모든 종류의 긍정적인 감정을 포함해야 하는데, 이번에 다룬 모던 미니멀 스타일은 이 둘을 모두 충족시킬 수 있습니다.
이번 글이 여러분에게 새로운 도전을 할 수 있는 계기가 될 수 있길 바라며, 읽어주셔서 감사합니다.
- 즐거운 디자인 하세요!
'🇺🇸 번역' 카테고리의 다른 글
| [번역] : Git fetch와 pull, pull은 이제 그만! (0) | 2021.05.02 |
|---|---|
| [번역] : React Query - 왜, 그리고 어떻게 사용할 수 있을까? (3) | 2021.04.03 |
