2017년 디자인 트랜드 전망
UX 디자인 배우기 #99
Tdoday UX 아티클
2016년 12월 27일 Web Designer Wall에 올라온 Nick La의 글 Design Trends in 2016 & What to Expect in 2017을 원저자의 허락을 받아 번역한 글입니다.
2017에는 SVG를 지원해주는 범위가 더 넓어질 것으로 보이며 CSS4를 사용하는 것이 많아짐에 따라 CSS로 할 수 있는 새로운 것들이 많아질 것으로 예상되어 때문에 디자인 분야에선 정말 신나는 한 해가 될 것 같습니다.
2016년에 어떤 것들이 큰 인기를 끌었는지, 2017년에 무엇을 기대할 수 있는지 살펴보며 신선한 아이디어와 영감을 얻으면서 2017년을 새롭게 시작하실 수 있게 되길 바랍니다.
2016년도에는 흔히 사용되는 UI 패턴들이 계속 사용되어 익숙한 레이아웃과 인터랙션을 볼 수 있었습니다. Bootstrap과 Material Design Lite와 같은 프레임워크 덕분에 테마 마켓에서 특히나 많이 볼 수 있었는데 꼭 나쁜 것이라고만 볼 순 없습니다. 어쨌든 이미 입증되었으며 널리 사용되고 있는 패턴들이기 때문입니다. 2016년에 디자이너들은 이러한 패턴들을 개선하면서도 좀 더 흥미롭게 만들 방법을 찾으려고 노력하였습니다. 그 결과 비주얼 임팩트와 마이크로인터랙션이 두드러지게 보였습니다. 이번 글에서는 탑 브랜드와 디자이너들이 2016년에 만들어낸 것들을 모아봤습니다.
고화질 비주얼 히어로 이미지(hero image)와 풀 스크린 인트로 트렌드는 오랫동안 계속될 것으로 보입니다. 시각적 문구, 풀 모션, 고해상도, 사진 사용 등과 같은 디자인이 발전하고 있는 방향성을 모두 갖추고 있기 때문입니다. 포트폴리오에서만 강렬한 이미지를 사용하는 것은 아닙니다.
이커머스 사이트부터 시작해서 여행 사이트까지 다양한 웹사이트에서 이용되었습니다. ‘풀 스크린 인트로’는 브랜드를 즉시 폭발적으로 인지할 수 있게 해주며, 인터랙티브 한 경험, 포트폴리오, 긴 스크롤링 페이지로 넘어갈 분위기를 잡아줍니다. 특히 복잡한 UI를 제거하는 경향이 보였습니다. 일부 웹사이트의 경우 내비게이션이나 행동유도 요소를 아예 없애고 이미지 자체가 메시지를 전달할 수 있도록 만들었습니다.
Case 1
Case 2
Case 3
Case 4
이러한 풀스크린 히어로 이미지 또는 헤더 트렌드는 시네마그래프(cinemagraphs), 미묘한 애니메이션, 배경 영상 등을 활용하면서 더 흥미롭게 발전하고 있습니다.
Case 5
Case 6
인터랙티브 내비게이션
전반적으로 모바일 우선(mobile-first) 디자인으로 넘어가는 추세에 따라 2016년도에는 미니멀 유저 인터페이스가 점점 더 인기가 많아지고 있습니다. 햄버거 메뉴는 주요 요소가 되긴 했지만, 일부 UX 디자이너는 정말 싫어해서 이제는 그만 사용해야 한다고 주장하고 있으며 그렇게 되어야 합니다. 하지만, 2016년에 점점 더 많은 사이트에서 미니멀 내비게이션의 답으로 다른 걸 내놓았습니다. 가령 사이트 경계에 세로 텍스트를 쓰거나 하단에 스티키 메뉴(sticky menu)를 넣거나, 인터랙티브 하게 내비게이션을 보여주는 방식을 택했습니다.
Case 1
Case 2
Case 3
Case 4
Case 5
Case 6
스플릿 스크린 레이아웃
최근 몇 년 동안, 카드 디자인이 점점 더 인기가 많아지면서 벽돌 쌓기 식 포트폴리오와 블로그 레이아웃이 보다 익숙한 패턴이 되었습니다. 2016년에는 전형적인 대형 비주얼과 행동유도 요소를 담은 풀 스크린 랜딩 페이지 인터페이스가 새롭게 변형된 형태가 등장했습니다. 바로 듀오 레이아웃(duo layout)입니다. 이러한 나뉜 레이아웃은 방문자에게 선택권을 주며 대형 슬라이더 혹은 히어로 헤더(hero header)를 보여줍니다.
스플릿 스크린은 여백에 강렬한 색상 혹은 타이포그래피를 결합한 미니멀리스트 웹 디자인에 가장 잘 어울립니다.
Case 1
Case 2
Case 3
Case 4
Case 5
Case 6
Case 7
워드 프레스에서는 Themify Split를 사용해서 이런 디자인을 쉽게 만들 수 있습니다.
Case 8
레트로
지난 몇 년간 우리는 빈티지하고 소박한 디자인을 좋아했지만, 최근에는 70년대와 80년대의 톡톡 튀는 디자인 쪽으로 취향이 많이 바뀌었습니다. 듀오톤, 기하학적 모형, 밝은 컬러는 신중하게 선택한 폰트와 조합해서 이러한 설득력 있는 디자인을 만들어냈습니다.
Case 1
Case 2
Case 3
Case 4
Case 5
Case 6
Case 7
추상적인 디자인
CSS 그리드는 페이지 구조를 만들어내는 강력한 툴을 새롭게 제공할 것으로 보입니다만 그렇다고 디자인이 예전에 상자 형태를 쓰던 때로 돌아갈 거란 예상은 잘못된 예상입니다. 웹디자인은 그 어느 때보다 훨씬 유연해졌으며 디자이너들은 그 한계를 시험해보기 위해 올 한 해 프린트 디자인에서 단서를 얻어냈습니다. 그리하여 예술적이고 흥미로운 레이아웃과 타이포그래피 효과를 만들어냈습니다. 여기서 보통 정렬과 테두리는 덜 중요하게 사용했으며 프레젠테이션과 패럴랙스를 더 잘 사용하고 있습니다.
Case 1
Case 2
Case 3
Case 4
Case 5
애니메이션&마이크로인터랙션
2016년도에 가장 이목을 끌었던 웹 디자인 대부분에는 위 트렌드 중 하나 이상의 트렌드가 섞여 있었지만, 전부 애니메이션 혹은 마이크로인터랙션을 사용하고 있었습니다. 이렇게 디테일에 집중하는 디자인은 우아한 호버 효과만큼 미묘하거나 드래그-앤-풀(drag-and-full) 내비게이션만큼 중점적이기도 했지만, 전부 사용자 경험을 강화해주었으며 우리의 호기심을 자극하는 디자인이었습니다. 애니메이션은 그 자체로는 별로 새롭지 않지만 디자이너들은 점점 애니메이션을 보다 의미 있고 목적성 있게 적용하는 방법을 배우고 있어서 보다 나은 퍼포먼스를 내면서도 내용에 방해가 되지 않는 방향으로 발전하고 있습니다.
Case 1
Case 2
Case 3
Case 4
Case 5
Case 6
앞으로 기대할 수 있는 것
정리하자면, 웹 디자인은 효율적으로 시각적 단서와 스토리를 전달에 집중하는 것만큼 세부 내용과 정보 전달에 집중하고 있진 않습니다. 긴 스크롤은 한동안 계속 사용될 것으로 보입니다. 왜냐하면 임팩트가 큰 타이포그래피, 여백, 밝은 컬러를 사용한 조합과 모바일 브라우징에서 긴 스크롤이 잘 사용되고 있기 때문입니다.
Gif, 시네마그래프, 영상 등은 추가적으로 솜씨를 부릴 수 있는 요소들이기도 합니다. 그라데이션과 큰 글 유행이 돌아왔으며 더 많은 듀오톤과 스탭 사진이 2017년에 기본적인 비주얼 스타일로 많이 사용될 것으로 보입니다. 그런지(grunge) 스타일이 변형된 형태로 다시 유행을 할 것으로 보이는 데 보더라도 놀라지 마시고, 브루탈리즘 트렌드(Brutalism trend)도 놓치지 마세요.
프런트엔드 개발 세계에서는 2017년도에 참신한 AI 기반 웹사이트 빌더가 많아질 것으로 보이며, CSS가 눈부시게 발전하고 속도를 높이기 위해 webp 지원이 더 나아질 것으로 보입니다.
이 모든 것들이 벅차 보이거나 여러분이 할 수 있는 능력 밖이라면, 다음 비주얼 스토리텔링 프로젝트를 시작할 때 워드프레스의 Themify Float를 써서 모던 마이크로인터랙션, 패럴랙스, 추상적 레이아웃 등을 만들어보세요.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
