디자인 업계가 빛의 속도로 빠르게 변화하고 있으므로 변화의 연장 선상에서 이와 관련한 신속한 대응책을 마련하는 것이 중요합니다. 트렌드에 민감하지 않더라도 디자이너로서 업계에서 일어나고 있는 변화 추세에 대해 인식할 필요가 있습니다.  2017년 가장 중요한 디자인 트렌드로 부상할 것으로 예상하는 10가지 디자인을 소개합니다.

1.미니멀한 디자인의 진화

2017년에도 미니멀한 레이아웃을 계속 사용하게 될 것이고 복잡성을 최소화한 디자인이 대거 등장할 것입니다. 미니멀한 디자인은 UI보다는 사용자 콘텐츠가 가장 먼저 눈에 들어오도록 주의를 집중시킴으로써 명확한 시각적 커뮤니케이션을 통해 사용자의 집중과 관련된 문제 해결을 목표로 합니다.

https://blogsimages.adobe.com/creativedialogue/files/2017/01/1-168x300.jpg 168w, https://blogsimages.adobe.com/creativedialogue/files/2017/01/1-190x338.jpg 190w" width="319" />

Sky 앱은 산만한 요소를 제거하여 콘텐츠에 집중하게 합니다.

간결한 유저 인터페이스와 뛰어난 사용성의 결합은 동작과 관련된 측면에서도 보다 신속함을 더해주는데 이처럼 내비게이션이 편리하면서도 간단한 앱은 매우 강력한 커뮤니케이션의 형태가 될 수 있습니다.

간결한 라인, 넉넉한 여백, 미니멀한 그래픽 요소는 아무리 복잡한 주제의 내용이라도 간결하게 보여줍니다.

출처: 제이쿱 안탈리크

2.마이크로인터랙션의 증가

2016년 인터넷에서 마이크로인터랙션에 대한 수많은 논의가 이어졌고 2017년에도 트렌드가 지속될 전망입니다. 일반적으로 섬세한 애니메이션의 형태로 구현되는 마이크로인터랙션은 UX 디자인의 핵심적인 역할을 할 것이며, 특히 고객이 앱을 사용할 때마다 수천 개의 마이크로인터랙션에 동참하게 되는 모바일 디바이스의 경우 그 역할은 더욱 커질 것입니다.

마이크로인터랙션을 통해 사용자는 현재 상황을 파악합니다. 출처: 콜린 가벤

마이크로인터랙션은 상태 및 변경 사항에 대한 정보를 전달하고 특정 영역에 주의를 집중시키며 해당 동작을 완료하는 데 필요한 피드백을 제공하는 등 사용자의 기억에 남을 만한 경험을 만드는 데 기여합니다.

마이크로인터랙션은 사용자 행동에 대한 시각적 피드백을 전달하는 매우 간편한 형태입니다. 출처: 허난 사르토리오

3.동영상이 대세로 등극

시각은 인간의 모든 감각 중 가장 강력한 감각으로 알려져 있습니다. 이미지는 오랫동안 유저 인터페이스 디자인의 주된 요소였으며 이미지로 거둔 성공은 동영상으로 점차 발전하는 데 자연스러운 발판이 되었습니다. 이미지는 천 마디의 단어를 대변하고 동영상은 10배의 단어를 대변한다고 합니다. 여기에는 타당한 이유가 있는데 기존의 이미지는 정적인 데 비해 동영상은 역동적이라는 점입니다.

동영상은 사용자의 이목을 끄는 능력이 탁월하므로 시각적 스토리텔링의 도구로 사용됩니다. 특히 동영상이 홈 페이지 배경으로 사용된 경우 처음부터 사용자의 이목을 집중시킵니다.

https://blogsimages.adobe.com/creativedialogue/files/2017/01/4-1024x576-300x169.png 300w, https://blogsimages.adobe.com/creativedialogue/files/2017/01/4-1024x576-600x338.png 600w" width="955" />

동영상은 더욱 발전된 차원의 역동적인 경험을 사용자에게 제공하게 될 것이며 2017년은 사용자 참여와스토리텔링의 도구로서 리치 미디어 성격의 인터랙티브한 기능을 겸비하고 전체 화면으로 전환 가능한 동영상이 무수히 제작되는 한 해가 될 것입니다. 출처: 영화 라이프오브파이

4. 풍부한 색감과 감각적인 타이포그래피

풍부한 색조로 유저 인터페이스 색상이 많이 밝아진 상태지만 2017년에는 선명한 색상으로 인터페이스가 더욱 밝아질 전망입니다. 또한 사용자는 내년에 여러 UI에서 더욱 선명한 색상 팔레트, 이중톤 및 대담한 그레이디언트 색상을 더 많이 접하게 될 것입니다.

https://blogsimages.adobe.com/creativedialogue/files/2017/01/10-1-1024x501-300x147.png 300w, https://blogsimages.adobe.com/creativedialogue/files/2017/01/10-1-1024x501-600x294.png 600w" width="955" />

색감이 풍부하고 선명하며 짙은 색은 시각적으로 강렬한 인상을 줍니다. 출처: 피오르드 트렌드

독창적인 색상과 마찬가지로, 타이포그래피는 감정을 자아내고 제품의 특성을 규정짓는 유용한 도구가 될 것입니다. 타이포그래피가 단순히 읽기 위함이 아닌 제품 홍보의 수단으로 사용됩니다. 타이포그래피를 사용하여 시선을 사로잡는 매력적인 컴포지션을 만들 수 있습니다.

https://blogsimages.adobe.com/creativedialogue/files/2017/01/5-2-1024x499-300x146.png 300w, https://blogsimages.adobe.com/creativedialogue/files/2017/01/5-2-1024x499-600x292.png 600w" width="955" />

타이포그래피는 브랜드 아이덴티티를 표출하고 텍스트 콘텐츠의 의미 전달을 향상시킬 수 있는 기회 요소입니다.

출처: 호크 앤 헨

5. 맞춤형 일러스트레이션

기존의 사진보다 개성을 더 잘 표현하기 위해 일러스트레이션을 대안으로 선택하는 추세가 뚜렷해지고 있습니다. 이들은 브랜드나 제품의 고유한 색조 및 특성을 실제로 캡처한 시각 언어를 만들어냅니다. 또한 시각 언어는 개념을 이해하기 쉬운 비주얼로 압축함으로써 메시지를 명확하게 전달할 수 있습니다.

https://blogsimages.adobe.com/creativedialogue/files/2017/01/8-1-1024x571-300x167.png 300w, https://blogsimages.adobe.com/creativedialogue/files/2017/01/8-1-1024x571-600x335.png 600w" width="955" />

독창적인 일러스트레이션은 감성과 특성을 전달합니다. 이미지 출처: 미디엄

일러스트레이션은 디자이너에게 애니메이션과 같은 창의적인 효과를 위한 보다 자유로운 수단이 되기도 합니다.

https://blogsimages.adobe.com/creativedialogue/files/2017/01/9-1024x657-300x192.gif 300w, https://blogsimages.adobe.com/creativedialogue/files/2017/01/9-1024x657-527x338.gif 527w" width="955" />

애니메이션은 일러스트레이션을 더욱 흥미롭게 만드는 요소입니다. 출처: 인터콤

6.긴 스크롤 및 패럴랙스 기법의 웹 사이트

긴 스크롤이나 무한 스크롤이 웹 사이트의 표준이 될 것으로 예상합니다. 스크롤은 페이지 넘기기와 같은 형식에 반대되는 개념이 아니라 내비게이션의 발전된 형태로 받아들여야 합니다. 이 기법은 모바일 디바이스에 바람직하며(작은 화면은 더 많은 스크롤을 의미하고 스크롤 형식은 터치 컨트롤과 잘 연동됨) 여기에는 사용자의 시선을 사로잡을 수 있는 더 많은 가능성이 내재되어 있습니다(사용자가 중단 없이 하나의 모션으로 많은 양의 콘텐츠를 신속하게 스캔할 수 있음).

https://blogsimages.adobe.com/creativedialogue/files/2017/01/6-1-1024x650-300x190.png 300w, https://blogsimages.adobe.com/creativedialogue/files/2017/01/6-1-1024x650-532x338.png 532w" width="955" />

핀터레스트와 같이 긴 스크롤이 구현되는 웹 사이트를 사용하면 사용자를 구매 경로로 쉽게 유도할 수 있습니다.

그뿐만 아니라 패럴랙스 스크롤이 구현되는 사이트가 더욱 늘어날 것으로 예상됩니다. 패럴랙스 기법이 적용된 웹 사이트에서는 전경 콘텐츠와 배경 콘텐츠가 서로 다른 속도로 스크롤되므로 입체감이 생겨납니다. 패럴랙스가 제대로 구현되면 시각적인 입체 효과를 낼 수 있습니다. 요소를 화면 위로 띄워 올려서 다이내믹한 3D 효과를 만듭니다. 따라서 디자이너는 그래픽 요소를 사용하여 스토리를 효과적으로 전달할 수 있는데 모두가 아는 대로 스토리텔링은 인간이 가진 본성의 일부입니다.

https://blogsimages.adobe.com/creativedialogue/files/2017/01/7-1024x538-300x158.gif 300w, https://blogsimages.adobe.com/creativedialogue/files/2017/01/7-1024x538-600x315.gif 600w" width="955" />

패럴랙스 스크롤은 배경 이미지가 전경의 콘텐츠보다 더욱 느리게 스크롤되므로 입체감과 몰입감을 더해줍니다.

이미지 출처: 스퀘어스페이스

7. 카드는 여전히 중요한 요소

카드는 하나의 주제와 관련된 모든 정보를 하나의 컨테이너에 담을 수 있다는 개념을 전제로 합니다.

카드를 사용하면 많은 양의 콘텐츠를 적절한 규모로 나누어 구성할 수 있습니다. 출처: 한나 정

카드를 사용하면 유연한 UI를 만들어 작은 화면부터 큰 화면에 이르기까지 모든 크기의 화면에 사용할 수 있습니다. 사용자의 관점에서 카드는 직관적이기 때문에 부가 설명 없이도 쉽게 이해할 수 있습니다.

https://blogsimages.adobe.com/creativedialogue/files/2017/01/11-1-300x203.png 300w, https://blogsimages.adobe.com/creativedialogue/files/2017/01/11-1-498x338.png 498w" width="640" />

카드 레이아웃은 다양한 중단점에 맞춰 자동으로 간편하게 재구성됩니다.

8. 대화형 인터페이스의 등장

“챗봇(Chatbot)”은 현재 우리 업계에서 가장 활발한 논의가 일어나는 주제 중 하나입니다. 꽤 오랫동안 챗봇 기술은 소비자 앱에 통합되어 있었지만 이제는 피자 주문과 같이 일상적인 업무를 수행할 때 사용자의 부담을 더는 데 일조하고 있습니다.

https://blogsimages.adobe.com/creativedialogue/files/2017/01/12-1024x506-300x148.jpg 300w, https://blogsimages.adobe.com/creativedialogue/files/2017/01/12-1024x506-600x296.jpg 600w" width="955" />

피자헛 챗봇은 페이스북 메신저를 통해 대화형 주문을 수행합니다.

2017년에는 보다 많은 업계가 챗봇 기술과 대화형 인터페이스를 채택할 것으로 예상합니다. 구글 홈과 같은 종합적인 대화형 솔루션 및 제품을 제작하는 데에 수많은 기회와 업계의 관심이 쏠릴 것이며, 시리(Siri)는 자연스럽게 챗봇의 다음 단계가 될 것입니다.

https://blogsimages.adobe.com/creativedialogue/files/2017/01/13-1024x576-300x169.jpg 300w, https://blogsimages.adobe.com/creativedialogue/files/2017/01/13-1024x576-600x338.jpg 600w" width="955" />

구글 홈과 같은 제품은 미래의 인터랙션이 버튼에만 국한되지 않는다는 사실을 입증하고 있습니다.

이미지 출처: 더버지

9. 증강 현실/가상 현실

대화형 인터페이스 외에도 2017년을 장식할 흥미로운 기술이 있습니다. 디자이너들이 앞다퉈 증강 현실과 가상 현실에 뛰어들 것으로 예상하는데 이러한 기술이 새로운 차원의 몰입형 참여를 제공할 것이기 때문입니다. 또한 VR용 UI를 디자인하는 것은 완전히 다른 문제입니다. 조나산 라바즈가 자신의 글에서 밝힌 것처럼, “VR 디자인은 단순히 2D 작업을 3D로 바꾸는 것이 아닌 새로운 패러다임의 모색을 의미하게 될 것입니다.”  증강 현실과 가상 현실 플랫폼의 등장은 최첨단 인터랙션과 시각 디자인 영역에 지대한 영향을 미칠 것입니다. 제스처에 모든 관심이 집중될 것이고 실제 세상과 유사한 의미를 지닌 자연스러운 제스처가 가상 세계의 액션 변환 과정에 기여할 것입니다.

마이크로소프트 홀로렌즈는 가상 현실과 증강 현실을 수용하여 새로운 현실인 혼합 현실을 구현합니다.

이미지 출처: 3D프린팅인더스트리

2017년이 아직 ‘가상 현실의 해’가 되지는 않을 것입니다. 그렇지만 VR 디자인으로 허용되는 것과 그렇지 않은 요소가 결정되는 한 해가 될 것입니다.

10. 프로토타이핑의 활성화

2017년 UX와 UI 디자이너의 경계는 계속해서 모호해질 것이고 더욱 통합된 디자인 프로세스로 발전될 것으로 예상합니다. 아이디어를 구현하기는 훨씬 수월해지고 프로토타이핑은 모든 디자인 과정의 일부가 될 것입니다. 새로운 프로토타이핑 툴은 디자이너의 워크플로우를 상당한 수준으로 향상시켜 디자이너가 매번 처음부터 시작하는 것이 아니라 최종 사용자가 무엇을 원하는지에 대해 생각하는 데 더 많은 시간을 투자할 수 있게 될 것입니다.

디자이너는 레이아웃이 아니라 인터랙션에 더욱 집중하게 될 것입니다. 새로운 프로토타이핑 툴을 사용하면 단순히 화면에 나타났다 사라지는 프로토타입이 아니라 이해 관계자에게 실제로 사용되는 앱을 실행함으로써 앱이 지닌 비전을 입증할 수 있는 프로토타입을 제작할 수 있습니다.

https://blogsimages.adobe.com/creativedialogue/files/2017/01/16-1-1024x576-300x169.png 300w, https://blogsimages.adobe.com/creativedialogue/files/2017/01/16-1-1024x576-600x338.png 600w" width="955" />

어도비 익스피리언스 디자인을 사용하면 디자이너는 레이아웃만이 아니라 인터랙션에 집중할 수 있습니다.

결론

모든 트렌드와 마찬가지로 어떤 트렌드는 등장했다가 금방 사라지고 어떤 트렌드는 오랫동안 지속되어 모든 것의 토대가 되기도 합니다. 그러나 한 가지 확실한 것은 2017년은 기술은 물론이고 인터페이스 디자인 측면에서 매우 흥미로운 한 해가 될 것이라는 점입니다.