뜨고 있는 최신 UI 디자인 트렌드 10가지
10 Newest and promising UI design trends
원문 바로가기
본 포스팅은 해외 디자인 아티클을 번역하며, 추가 정보와 링크를 덧붙인 글입니다.
뜨고 있는 최신 UI 디자인 트렌드 10가지
새로운 뉴모피즘 / 파스텔, 기하학, 쓸만한 팁 등등!
최근 어떤 UI 디자인이 뜨고 있는지에 대한 방향을 찾아보곤 했다. 몇 가지 아주 창조적이고, 유망하고, 영감을 주는 트렌드를 발견했는데, 내가 보기에 이들은 곧 UI 디자인 경향이 될 것이다.
내가 발견한 10가지 트렌드:
1. 새로운 뉴모피즘
왼쪽부터: Fireart Studio, Ionutzamfir (IG), Dawid Tomczyk, Ui8net (IG)제대로 읽은 게 맞다! 뉴모피즘은 서서히 변화하고 있으며, 내가 보기에 현재는 (좋든 싫든) 이 정도의 느낌인 것 같다. 이는 처음 등장했을 때의 형태에서 머물지 않고, 더욱 세련되고 직관적인 방향으로 변화한다. 스큐어모피즘에 가깝지만 신선하고, 현대적이고, 더 예술적인 느낌이다.
2. 소프트 그라데이션
왼쪽부터: Dominik Bednarz, Mufidul.design (IG), Halolabteam, Ariuka_dsgn (IG), Sajon007 (IG)그라데이션은 여전히 적용된다! 사실 나는 버튼, 카드, 그래픽과 같은 UI 요소의 배경으로 그라데이션이 적용된 것을 경우를 많이 본다. 2가지 이상의 컬러를 블러 처리하여 섞은 배경 또한 많이 볼 수 있다.
3. 기하학적 요소
왼쪽부터: Victor.niculici (IG), Sun, Ashik, Interfacely.net, Halolabteam기본 배경 또는 테마, 혹은 디자인을 더 흥미롭게 만드는 디테일에 사용되는 기하학적 요소는 더욱 증가하고 있다. 이 요소들은 종종 모자이크처럼 섞여 나타나 그 결과는 매우 멋져 보인다!
4. 파스텔색 배경
왼쪽부터: Emy Lascan, Zerotoone.de, DesigningUI.com, jajadesign (IG), Flowstudio나는 이 트렌드가 맘에 든다. 그동안 많은 놀랍고, 가볍고, 미학적으로 괜찮아보이는 섬세하고 밝은 파스텔 톤의 디자인을 봐왔다.
이는 디자인을 아주 현대적이고, 거슬리지 않고, 신선하고 섬세하게 보여주며, 내용 외 나머지는 모두 부차적인 배경으로 만들어 내용에 집중할 수 있도록 한다.
5. 일러스트레이션과 3D
왼쪽부터: batcz (IG), tranmautitram (IG), Purrweb_design (IG), Izmahsa (IG), tranmautritram (IG)일러스트레이션은 여전히 대유행이다. 다른 스타일, 다른 컬러 배합, 각기 다른 추상화 정도로 그들은 프로덕트의 성격이 잘 어울린다. 플랫 스타일뿐만 아니라, 3D처럼 보이는 스타일 또한 그렇다. 이전 몇 년 간은 지구상의 디지털 프로젝트에 스톡이미지를 사용하곤 했었는데, 멋진 변화라고 생각한다.
심플 일러스트레이션을 어떻게 그려낼 것인지에 대한 몇 가지 팁을 제시한다:
6. 추상적인 형태
왼쪽부터: Vladimir Gruev, c.sen_ (IG), Eddie Lobianovsky, cmarixtechnolabs (IG)배경과 UI 요소들에 사용한다. 추상적인 형태는 인터페이스를 더 “유기적”이고 재미있게 보여주는 좋은 방식이라 생각한다. 펜툴로 가장 기본적인 형태(네모, 타원)를 그릴 때 다른 테두리 각도를 주고, 다른 컬러 및 그라데이션을 적용하면 아주 흥미로운 결과물을 만들 수 있을 것이다. 혹은 Blobmaker라는 간단하지만 놀라운 툴을 사용해서 몇 분의 시간을 아껴보아라.
7. 다크 모드
왼쪽부터: UXdesignlabs (IG), dragonlee_design (IG), JIANGGM, reyiands (IG), Saepul Rohman다크 모드는 인터페이스의 색상 전환 버전인데, 심야 시간에 더욱 인기 있다. 나는 전형적인 야행성 타입이라, 잠들기 전에 내가 좋아하는 앱들을 다크 모드로 전환해서 사용하곤 한다. 다크 모드를 만들 때는 원래 버전의 요소와 타이포그래피의 대비 정도를 유지해야 하는 걸 기억해라.
8. 비스듬한 요소
왼쪽부터: Hype4.com, nickelfoxstudio, purrweb_design (IG), Vadim Drut, UI8netDribbble의 이미지에서 뿐만 아니라, 웹사이트의 다른 성격의 콘텐츠를 표현하는 비공식적인 방법으로도 많이 사용되는 방식이다. 뭔가 콘텐츠를 더 흥미롭고 시선을 사로잡게 만드는 것 같다. 어떻게 이런 효과를 더 빨리 낼 수 있을까? 우선, 요소들을 0°로 놓아라. 그리고 그룹으로 묶어라. 그리고 그 그룹의 각도를 30° 내지 50°로 돌리기만 해라! 이런 방식으로 작업하면, 각 요소를 일일이 각도를 주어 돌리지 않아도 된다.
9. 소프트 쉐도우
왼쪽부터: Cuberto, Fireart Studio, Dogstudio, Hype4.com, Prakhar Neel Sharma내가 좋아하는 또 다른 트렌드이다. 소프트 쉐도우(옅은 그림자)는 UI를 더 깊이 있어 보이게 만든다. 그 효과는 종종 부수적이지만 심미적으로 만족스럽다. 일반적으로 그림자는 UI 요소들을 더 “클릭하고 싶게” 만들며, 다른 내용 및 요소들과의 위계를 차별화하는 데 도움을 준다.
여기에서 그 방법에 대한 내용을 자세히 배울 수 있다:
10. 심플하고 굵은 타이포그래피
왼쪽부터: andreisimon.design (IG), Shakib Ali, Felixlesoeuf (IG), Glebich (IG), Tranmautritram (IG)얇은 폰트를 좋아한 적 없어서(윽, iOS7 시대), 이 트렌드의 시대가 온 게 행복하다. 지금 나는 (거의 사각형으로 보이는) 더 두껍고, 간단한 형태의 합리적인 폰트를 사용법을 모색하고 있다. 이들은 인터페이스를 훨씬 현대적이고 세련되게 만든다. 이런 폰트를 찾는다면 Poppins, Montserrat (무료) 혹은 Gilroy, Sofia Pro, Proxima Nova (유료)를 사용해보라.
번역 후기
원문에 제시된 리딩시간은 5분(원어민 기준).
가볍게 읽을 수 있는 글이지만, 한국어 문장으로 풀어쓰려니 어색한 표현들이 몇 있었다.
윤문은 못했지만 최대한 읽히도록 풀어봄 :)
번역하며 유의했던 표현
stumble across ~을 우연히 발견하다
evolving 서서히 전개되는
craze (특히 일시적인) 대유행
