2019 상반기 웹디자인 트렌드(상)
해외 디자인 아티클 번역 뉴스레터 <디독>이 어제 1주년을 맞이했습니다!
본업으로 바쁜 바람에 이렇다 할 이벤트도 못 했지만 괜히 둘이서 감격하고 그랬네요... 애정 갖고 운영하는 만큼 많은 분들께 알려졌으면 하는 바람입니다.
앞으로도 열심히 달려보겠습니다!
좋은 일 지속할 수 있도록, 주변에 알려주세요. 공유도 많이 부탁드려요. ^^
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
목차
1.일러스트레이션을 이용한 단일 음성(Singular Voice) 제작
2.타이포그래피에 기반한 레이아웃
3.가변폰트
4.장식적이고, 커진 단락
5.애니메이션: 보조적 요소 & 유기적 모션
6.아기자기한 마이크로인터랙션과 미니 게임들
7.브루탈리즘(Brutalism)과 맥시멀리즘(Maximalism)
8.이미지 효과, 왜곡과 파동효과의 저주
9.누른 상태(Press & Hold) = ...?
10.독립 디자이너 + 창조적인 개발자의 시대
11.맞춤형 커서 & � 마우스 효과
12.히어로(Hero) 메뉴
13.믹싱 스크롤링(Mixing Scrolling)
우리는 특별한 방식으로 수집한 ‘2019년 웹 디자인 트렌드’ 아티클을 발표하게 되어 매우 기쁘다. 여러분은 우리의 새 책 “NOW. A Contemporary Landscape for Digital Thinkers 2”에서 다른 트렌드들을 더 많이 읽어볼 수 있다. 이 책은 마치 초현대적인 꿈에서 깨어나는 것과 같다. 지난 1년 동안 우리를 놀랍게 했던 모든 것을 모아 요약했다. 더불어 웹 디자인, UX 글쓰기, 비주얼 리서치, AI 봇, 5G, 퍼비(Furbys), 포트나이트, 그리고 머신 러닝을 이용해 셔츠를 입는 방법에 대한 트렌드를 분석하였다.
이 글은 주로 비주얼과 인터랙션 분야에서 관찰한 트렌드에 초점을 맞추었다. 따라서 사용자들이 일상적으로 프로젝트에 필요한 영감을 받는 데에 유용할 것이다. (디지털 버전도 7.95달러에 구해볼 수 있다) 우리는 소셜 모빌리티(social mobility), 공유경제(sharing economy), 음성 인터페이스(voice interfaces), 이미지 검색, 또 웹 기술기반의 머신러닝 등의 사회적, 기술적인 본질에 대해 많은 주제를 수집했다.
"트렌드"라는 말은 때때로 좋은 의미로 받아들여지지 않을 수 있다. 그러나, 최신의 발전을 알고 실험하는 것은 그것이 나타나고 발전함에 따라 새롭고 더 많은 기술, 그리고 서로 다른 스타일을 즐거운 방식으로 사용하는 것으로 이어진다.
우리는 재밌고 이상한 미래를 꿈꾸기 좋아한다. 따라서 순전한 방관자의 입장에서 아래와 같은 창의적인 웹사이트를 놀랍도록 분석했다. 훌륭한 기술이 매일 말문을 막히게 하는 그런 시대에 사는 것은 정말 행운이다.
이제 움직일 때다. 여기 "2019년의 웹 디자인 트렌드 리스트"를 주목해보자.
�️시각디자인 & 인터랙션
1. 일러스트레이션을 이용한 단일 음성(Singular Voice) 제작
일러스트레이션은 문화적으로 예술의 배타성을 상기시켜주는 차별적 요소로 사용된다. 기술 산업에서 번성하고 있는 일러스트레이션 시대에서, 우리는 사용자에게 더 쾌적한 대기과정(waiting process)을 만들고 감정과 브랜드 가치를 전달하기 위한 방법으로 서로 다른 디자이너와 예술가들의 작업을 보여주는 슬랙, 에어비앤비, 메일침프, 드롭박스, 위트랜스퍼(WeTransfer)의 예를 들었다.
더 많은 예시: Illustrations for Slack, Mailchimp, Kikk 2018, Airbnb.design
오늘날 일러스트레이터와의 콜라보레이션은 흔한 일이다. 우리가 슬랙과 글리치(Glitch)에서 볼 수 있듯이, 디자인 시스템에서 일러스트레이션은 종종 메시지를 전달하는 부가적인 표현 방법으로 사용된다.
더 많은 예시: Gucci glasses, GLITCH, Mariano Pascual, Eat Genesis
2. 타이포그래피에 기반한 레이아웃
타이포그래피는 언제나 디자인에서 기본이 되어왔다. (기술이 허용하지 않을 때는 그다지 많지 않았다.) 이제 우리는 높은 수준의 자유와 표현, 실험을 할 수 있으며 타이포그래피도 합당한 위치를 차지하고 있다. 폰트가 희소한 웹디자인 원시 시대에, 가독성과 호환성의 문제로 수년간 고통받던 자신의 모습을 즐겁게 되찾는 것처럼 말이다.
요즘은 개성 있는 글자가 많다. 하지만 글자나 그 조합을 선택하는 것은 그리 중요하지 않다. 심미적인 주요 요소로서 의미론적 "단어"를 많이 사용하기 때문이다. 단어는 이제 디자인에 물리적인 존재감을 가지며, 나머지는 구성요소들의 플로우(composition flows) 요소가 된다.
글자나 그 조합을 선택하는 것은 그리 중요하지 않다. 심미적인 주요 요소로서 의미론적 "단어"를 많이 사용하기 때문이다.
강조해야 할 타이포그래피의 용례와 효과 중 하나는 레터 폼을 그래픽 요소로 취급하는 것이며, 변형, 효과 및 애니메이션은 물론 다양한 스타일과 가중치를 볼드(Bold), 이탤릭(Italic), 세리프(Serif), 산세리프(San-serif)와 결합하여 동일한 단락에서 함께 존재하는 모든 것을 만족스럽게 요약한 것이다.
타이포그래피가 강조하는 사용 효과 중 하나는 레터폼(Letterforms)을 그래픽 요소로 사용하는 것이다. 더불어 다양한 스타일과 굵기를 볼드(Bold), 이탤릭(Italic), 세리프(Serif), 산세리프(San-serif)와 결합하여 모든 것을 동일한 단락에서 만족스럽게 요약했다.
더 많은 예시: Beyond Beauty, Agnes Lloyd Platt, Louis Ansa, Aristide Benoist
3. 가변폰트
최근에 가변폰트는 브라우저 지원이 충분하지는 않지만 학습해야할 기술 리스트에 있다. 가변폰트는 오픈타입(OpenType) 글꼴 규격의 진화형이다. 하나의 글꼴 파일은 여러가지 변형된 서체를 포함할 수 있다. CSS를 사용하면 스타일 간에 이러한 베리에이션과 애니메이션 트랜지션으로 접근할 수 있다.
아래 예시에서 우리는 굵기와 세리프의 매개 변수를 바꾸는 가변폰트를 볼 수 있는데, 이는 애니메이션뿐만 아니라 폰트의 여러가지 변형을 만들 수 있게 한다.
참조: Variable Fonts, Variable fonts guide
우리는 대부분 CSS에서 폰트의 축을 압축하거나 확장하면서 애니메이션을 만들 수 있다. 하지만 또 다른 특성(형태학을 가리키는 특성)은 서체 디자이너에 의해 결정된다. 이를테면 데이빗 버로우(David Berlow)의 다중형식(multi-style)으로 장식한 가변 폰트 Decovar는 여러 속성을 매개변수로 디자인한 좋은 예다.
4. 장식적이고, 커진 단락
단락은 더는 단순히 컬럼(column) 분배나 기하학적 폼으로 포장된 것들로 규정되지 않는다. 현재와 미래의 단락은 더 커지고, 호버(hover), 이모지(emoji)�, 이미지, 스타일 변화, 마이크로 인터랙션, 그리고 표현이 곧 왕이 되는 이상한 분포로 가득 찰 것이다.
단락의 크기는 매우 커졌으며 폰트에 장식적인 스타일을 결합할 때도 우리는 망설이지 않는다. 큰 단락은 트렌드의 핵심용어 중 하나이기 때문이다.
5. 애니메이션: 보조적 요소 & 유기적 모션
보조적 요소의 애니메이션화는 과도한 자원을 사용하지 않고도 사이트를 시각적으로 풍성하게 하는 좋은 방법이다. 이에 따라 로딩시간도 증가한다. 이처럼 애니메이션은 종종 마이크로 인터랙션의 일부를 형성하여 유동적인 사용자 경험을 만들어 낸다.
로티(Lottie)와 바디무빙(Bodymovin)같은 도구를 쓰면 더 복잡하고 유동적이며 유기적인 애니메이션이 살아난다. 물론 CSS와 Javascript는 인터페이스 애니메이팅을 위한 많은 가능성을 제공한다. 하지만 매개 변수, 곡선, 블렌딩 모드, 필터, SVG 모핑(morphing) 등을 쉽게 제어하려면 많은 기술이 필요하다.
우리는 종종 유기적 형태, 액체나 끈끈한(gooey) 효과를 본뜬 인터페이스와 마이크로 인터랙션으로 애니메이션화 된 벡터 요소를 찾는다. 물론 타이포그래피도 이러한 유형의 애니메이션과 변형에서 제외되지 않는다!
6. 아기자기한 마이크로인터랙션과 미니 게임들
앞서 언급했듯이, 구어체적인 표현의 필요성은 많은 브랜드의 목소리와 어조의 일부분으로 나타난다. 이 필요성은 일반 텍스트, 마이크로 카피 및 움직이는 마이크로 인터랙션의 세부사항에도 적용된다.
더 많은 예시: Femme illustration microinteraction In UI Animation and Microinteractions
한 걸음 더 나아가 유머와 장난기를 더하면, 콘텐츠가 로드되는 동안 사용자가 대기 시간을 더 즐겁게 만드는 데 사용되는 자원인 미니게임을 발견할 수 있다. 동시에 디자이너와 개발자의 기술과 사용자와의 친밀하고 재미있는 관계를 구축하려는 의도를 보여준다.
더 많은 예시: Interactive click typography scatter In UI Animation and Microinteractions
7. 브루탈리즘(Brutalism)과 맥시멀리즘(Maximalism)
지난 몇 달 동안 우리는 웹 디자인에서 브루탈리즘의 강한 영향을 받으며 지냈다. 이는 레이아웃, 텍스트, 인터랙션을 통해 관류했다. 그러나 그 스타일은 점차 인터페이스의 사용성을 위해 길들여질 정도로 개선되었다.
더 많은 예시: Search filter and colorful product scroll navigation In Brutalism
8. 이미지 효과, 왜곡과 파동효과의 저주
GLSL 셰이더의 저주(Curse of the GLSL Shaders)로 인해 2018년에 만들어진 모든 페이지는 어딘가에 몇몇 종류의 왜곡이나 효과를 포함해야 했다. 그렇게 지난 한 해 동안 이미지와 텍스트 또는 비디오에 대한 셰이더 효과의 수많은 예를 우리에게 남겼다. 앞으로 몇 달 동안 계속 만나겠지만, 과용으로 인해 그들은 완전히 지쳐있다.
GLSL 셰이더의 저주(Curse of the GLSL Shaders)로 인해 2018년에 만들어진 모든 페이지는 어딘가에 몇몇 종류의 왜곡이나 효과를 포함해야 했다.
더 많은 예시: Zoom transition In Filters and Effects
9. 누른 상태(Press & Hold) = ...?
지금까지 숨겨져 있던 내비게이션이다. 처음에는 흥미로워 보이지만, 참신함이 떨어지면 재미없다. 발견 가능성의 관점에서 누른 상태는 잘못된 선택이다. 요약하자면, 비록 실험적인 사이트 중 일부에서 특색을 보일 수 있으나, 일반적인 트렌드로 환영받아서는 안 된다.
10. 독립 디자이너 + 창조적인 개발자의 시대
최근에 우리는 대형 에이전시와 스튜디오가 프로젝트를 위탁한 독립 프로필 급증을 발견했다. 일반적으로 독립 디자이너와 창조적인 개발자 사이에서 우리는 마이크로 인터랙션 방식으로 세심한 이미지, 타이포그래피, 작은 디테일에 기초한 최소한의 포트폴리오를 발견한다.
더 많은 예시: Aristide Benoist, Martin Silvestre, Robin Mastromarino, Pier-Luc Cossette
11. 맞춤형 커서 & � 마우스 효과
맞춤형 커서는 오래되고 잘 알려진 자취 효과(trail effect) 이후 진화하여 참신하게 사용된다. 가령 겹치는 요소에 따라서 커서의 색상과 불투명도를 수정하는 혼합효과(blending effect)처럼 말이다. 이러한 "반응 커서"는 사용자의 다른 요소나 행동에 대응하여 모양, 크기, 불투명도, 색상 또는 애니메이션을 변경한다. 유기적 모션은 커서가 돌아올 때 볼 수 있는 또 다른 공통적인 특징이다.
더 많은 예시: Typography follow cursor - ContraryCon
12. 히어로(Hero) 메뉴
단락과 마찬가지로 메뉴의 크기 역시 커졌다. 2005년부터 시작된 픽셀 폰트의 작은 메뉴를 기억하는가? 몇 년 동안 우리가 이렇게 반대편 끝에 도달했다는 것은 믿을 수 없는 일인 것 같다. 이렇게 유행은 정말 자주 변한다.
메뉴의 크기도 모바일 패턴의 영향을 받는다. 예컨대 모바일 인터페이스 디자인에서 인터페이스는 터치 기반이지만, 사용자가 더 작은 터치 화면을 누르기 어렵기 때문에 전체 화면의 오버레이 메뉴를 사용하는 게 일반적이다.
이렇게 단락의 발자국을 따라가 보면, 크기뿐만 아니라 장식적인 요소, 호버, 그리고 모든 종류의 마이크로 인터랙션과 효과와 연관이 있다.
더 많은 예시: Bersi Serlini Menu with Hover Effects
13. 믹싱 스크롤링(Mixing Scrolling)
긴 스크롤을 사용하는 레이아웃은 흔한 방식이다. 그러나 이것은 "원 페이지 레이아웃"이 아닌 분할 섹션을 갖고 있지만, 콘텐츠 안의 특정 부분은 분리되어 있다. 물론 패럴랙스와 같은 섬세한 효과를 유지해오면서, 스크롤 트리거 애니메이션(scroll triggered animations)과 스크롤 공개 콘텐츠도 많이 사용했다.
badass.shoes-up.com에서는 다른 방향으로 움직이는 스크롤을 이용한 삽화 사용의 예를 볼 수 있다. 이 내비게이션은 수직과 수평의 스크롤을 원 페이지 레이아웃으로 결합했다.
더 많은 예시: Mixing Horizontal and Vertical Scroll
하 편에서 계속.
저자 : awwwards
원문 링크: https://www.awwwards.com/web-design-trends-2019.html
*무단 전재 및 재배포 금지(링크 공유 가능)
하편 보러가기
https://brunch.co.kr/@thinkaboutlove/275
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
