brunch

매거진 디자인 뉴스레터 디독

라이킷 73 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김자유 Jul 11. 2019

2019 상반기 웹디자인 트렌드(하)

해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv

디독

page.stibee.com

14. 개성 있는 색채조합

이 트렌드는 주요 디자인 요소로 색채조합 자체를 사용한다. 우리는 모든 제품 경험 전반에 걸쳐서 지속해서 적용되는 개성 있는 색채조합 대해 이야기하고 있다.

일반적으로 우리는 2, 3개의 원색과 다양한 2차 색상을 가진 조합을 보게 된다. 특징적으로 채도가 높은 색이나 파스텔색이 결합하면 높은 대비 효과를 발현한다. 또 사진, 타이포그래피 및 일러스트레이션이 있는 배경은 평범하고 선명한 색상이 사용된 많은 예를 찾을 수 있다.

Frans Hals Museum by Build in Amsterdam

15. 2d & 3d 요소 혼합

3D 애니메이션은 지난 몇 년 동안 디자인에 큰 영향을 끼쳤다. 블렌더나 시네마 4D와 같은 소프트웨어는 많은 창작자들이 3D 애니메이션을 창작 가능하게끔 만들었다. VR, AR, 3D 프린팅은 3D 디지털 콘텐츠 생산을 다시 활성화하고 있다.

전설적인 parallax effect는 Z축이 다른 2D 평면에 의해 만들어진 가짜 3D를 사용하였다. 이 3차원 효과를 모방하는것은 CSS 애니메이션에서 매우 흔하다. 이러한 경향의 기본 개념은 대조를 찾는 것, 평면 위 3D 요소 또는 3D 가짜 시나리오를 만드는 2D 평면이다.

16. 편집 스타일의 레이아웃

CSS 그리드와 플렉스 박스(flexbox)는 혁신적으로 표준화되고 있다. 우리는 반응형의 구분 점(breakpoint)을 위해 다른 열로 재구성할 필요가 없고 그리드에 얽매이지 않는 "자유"로운 레이아웃을 구현하고 있다. 반응형 웹 디자인의 환상은 버려야 한다. 단 하나의 디자인이 10개의 디바이스에 유연하게 반응할 수 있다고 기대하는 사람은 없다.

Emergency Magazine by Studio AIRPORT

⚡️�AI, PWA, UX 글쓰기, 음성 인터페이스 등…

17. UX 글쓰기, 마이크로카피 및 브랜드 개성

지난 몇 년 동안, 우리는 기업의 메시지와 의사소통 방식, 그리고 비즈니스에 생긴 큰 변화를 목격했다. 목소리와 어조는 본질적인 것이 되었다. 브랜드는 클라이언트를 상대하는 것보다 친구와의 대화를 연상시키는, 좀 더 인간적이고 일상적인 어조를 사용하려고 하고 있다.

이전에 보기 힘들었던 마이크로카피는 이제 특별히 브랜드를 위해 디자인된 목소리와 어조를 특징으로, 전체 사용자 경험에서 스타일과 일관성을 유지하기 위해 더 세심해졌다.

당신이 쇼핑카트와 상호작용할 때 건방지듯 "고마워 베이브!"라고 하며 받는 것은 매우 흐뭇한 일이다. 미디엄(Medium)에서 "당신은 운명을 믿어요?"라는 메시지를 누가 거부할 수 있겠는가? 이 "콜 투 액션(call to action)"을 클릭하지 않는 건 불가능하다.

우리는 인터페이스에서 반복적으로 표준화된 규율을 선택하면서, 수년동안 이 규율을 어떻게 제쳐두었을까?

Thanks Babe! by Wonderland

유머는 여기서 핵심이 된다. 왜냐하면 유머는 사용자와 공감하며 유쾌한 시간을 사이트에서 보낼 수 있게 만드는 탁월한 방법이기 때문이다.

UX 라이터는 매우 중요한 역할을 한다. 즉 사이트를 이해할 수 있게 만드는 책임을 수행하여, 사용자가 주목적인 제품이나 서비스의 소비량을 달성하려고 노력하는 동안 인터페이스, 콘텐츠 및 다른 모든 것을 발견하도록 돕는다.

18. PWA는 새로운 반응성 웹 디자인이다

우리는 공식적으로 PWA가 새로운 표준이라고 말할 수 있다. PWA는 그들이 대표하는 진보적 성향을 나타내는 새로운 반응성 웹 디자인이다. 모바일 버전은 축소 버전이 아니며, 이는 우수한 성능과 색인화 및 변환을 위해 최적화될 수 있고 또 최적화 되어야 하는 다른 경험을 말한다.

프로그레시브 웹 앱(PWA)을 통해 개발자와 디자이너는 풀스크린과 맞춤형 내비게이션 바에서의 네이티브 앱과 같은 경험의 전형적인 웹 기술을 기반으로 애플리케이션을 만들 수 있다. 더불어 자동 업데이트, 다른 URL을 로드하지 않는 섹션 간의 전환, 홈 스크린의 액세스 아이콘, 오프라인 작업 및 알림을 수신할 수 있다.

그러나 가장 좋은 점은 그들이 SEO와 검색 엔진에 의한 색인화 같은 웹 앱의 긍정적인 특성을 유지하는 것인데, 여기서 다른 기술로 앱을 복제하는 노력을 하지 않는 게 중점이다. Google 개발자 팀과 함께 출판한 "프로그레시브 웹 앱 - 모바일 웹의 미래(Progressive Web Apps - The future of the Mobile Web)" 책을 참고하자.

19. 디자인 시스템

디자인 시스템은 브랜드의 모든 단일 디지털 표현을 확장할 수 있고 응집력 있게 만드는 이점을 실현하려는 많은 회사에게 점점 더 인기를 얻고 있다. 이는 디자인 팀을 위한 기본적인 도구이고, 개발자들과의 의사소통을 가능하게 한다.

디자인 시스템은 디자인의 모든 측면에서 요소를 재사용하며, 작업을 반복하는 새로운 콘텐츠의 생성에 내포된 프로세스를 나타낸다. 이는 카피, 음성과 톤, 모션 등의 글쓰기 스타일과 같은 포인트를 다룬다. 디자인 시스템에는 스타일 가이드와 패턴 또는 컴포넌트 라이브러리가 수반된다.

패턴 라이브러리는 버튼, 폼 필드, 경고창(alert), 모든 요소의 호버 상태 등과 같은 그래픽 사용자 인터페이스(GUI)의 모든 요소를 수집한다.

스타일 가이드는 타이포그래피, 두께 및 크기, 여백, 패딩, 그리드, 아이콘 및 색상 팔레트의 모든 용도를 수집한다. 이러한 정의에는 각 요소에 적용된 CSS 스타일이 포함되므로 프론트 엔더와 직접 소통하고 향후 변경 작업을 보다 수월하게 수행할 수 있다.

20. AI는 모든 곳에, 프라이버시와 안전을 위한 디자인

인공지능 알고리즘이 당신의 성격을 예측하는데 있어 당신의 엄마만큼 정확하기 위해선 고작 100개의 좋아요 기록이 필요하다. 중국 인공지능 회사인 센스타임(SenseTime)은 대규모로 인구를 스캔하고 분류하고 있는데, 콘서트에서 실시간 얼굴 인식 시스템 덕분에 범죄자를 체포하기도 했다. 인공지능은 이미 모든 곳에 존재하기 때문에 인공지능의 모든 용도에 있어서 프라이버시, 안전, 투명성을 갖고 설계해야 한다.

우리는 우리가 봇과 대화하거나 AI 어시스턴트가 우리의 개인적인 일을 밝히지 않은 채 수행하도록 하는 다크 패턴의 사례들을 보아왔다. 대기업은 우리의 개인적인 세부정보를 무차별적이고 안전하지 않은 방식으로 사용하면서 홍보물을 통해 그들의 수익을 최적화하기 위한 특허 제도를 시행하고 있다. 마찬가지로 봇은 선거를 조작하면서 여론에 영향을 미치는 용도로 사용되고 있다.

eBook "AI Driven Design"에서 읽을 수 있듯이, AI의 실수로 인종 차별적이거나 성 차별적인 사례가 많이 있다. 그러나 다른 한편으로는 Google Computer Vision을 사용하여 유방암을 발견하고 인간 병리학자가 발견한 62%와 비교하여 99%의 경우에서 전이 패턴을 정확하게 식별하는 LYNA와 같은 수많은 긍정적인 예도 있다.

21. 웹 기술을 통한 머신러닝

머신러닝을 통해 무엇을 모델로 이해할 수 있는가? ML은 어떻게 시작하는가? 어떻게 배우며 어떻게 구현할 수 있을까? 다행히도, 올해는 AI로 작동하는 웹 실험의 예시가 가득하다. 이들 중 다수는 TensorFlow.js와 같은 JS 라이브러리를 기반으로 하기 때문에 프로젝트에서 쉽게 사용할 수 있거나 다른 실험의 프로토타입으로 사용할 수 있으며, 특별히 복잡한 서버 아키텍처(server architecture)가 필요하지 않다. TensorFlow.js는 Node.js에 기반을 둔 매우 강력한 도구이다. 기존의 자바스크립트 ML 모델과 함께 사용하거나 심지어 자체 모델을 만들 수 있다.

브라우저에 직접 연결된 센서에서 가져온 데이터를 사용하여 기존 모델을 훈련하거나 재훈련하여 기존 자바스크립트 ML 모델과 함께 사용하거나 자체 제작할 수 있다. 우리는 오직 고객 측과만 상호작용하는데, 이는 반응이 매우 빠르다는 것을 의미한다.

Move Mirror. Find images based on your movements.

22. 가상 어시스턴트의 해

올해 가상 어시스턴트들은 대중에게 도착하여 소비재로서의 입지를 굳혔다. 시리(Siri)와 구글 어시스턴트 (Google Assistant)는 이미 모바일 기기에 널리 사용되고 있으며, 곧 필수 가전제품으로 변모했다. 구글 홈 및 특히 알렉사(Alexa)는 구글과 상호 작용하여 제품 및 서비스에 통합할 수 있는 막대한 생태계를 개발하고 있다.

2018년 9월 1일에 발행된 아마존 리포트에 따르면, 이미 그동안 5만 개 이상의 알렉사 기술이 개발되었다.

휴대 전화는 인터넷에 액세스하는 주요 기기이므로 음성 명령 인터페이스로의 진화는 쉽고 자연스러운 다음 단계가 될 것이다. 모바일 키보드에 텍스트를 소개하는 것은 복잡하고 지루한 많은 실수를 유발한다.

23. 애플리케이션 감소 및 멀티 플랫폼 통합 향상

가상 도우미는 우리가 관리해야 하는 앱과 플랫폼의 수를 줄인다. 머지않아 우리는 "기술"과 많은 시간을 절약할 수 있는 좀 더 포괄적인 일을 하게 될 것이다. 우리는 API를 통해 이러한 모든 플랫폼과 소통하고, 콘텐츠가 디자인으로부터 훨씬 더 독립적인 미래를 향해 나아갈 것이다.

24. 음성 명령 인터페이스

음성 명령 인터페이스 또는 대화형 기기는 소통의 시간과 노력을 줄이기 때문에 서로 관련이 있다. 음성 명령을 통해 우리는 플랫폼에 로그인할 수 있고, 암호 기억과 입력, 응용 프로그램 탐색, 인터페이스, 콘텐츠 구조 이해 등의 번거로움을 덜어줄 수 있다. 곧 수백 개의 모션을 구현할 수 있을 것이며, 간단한 단어를 트리거로 사용할 수 있을 것이다.

새로운 기술에 대한 유명한 Gartner 보고서에 따르면 2020년 웹 페이지 방문의 30%는 음성으로 이루어질 것이며, ComScore는 같은 해 음성이 전체 검색의 50%를 차지할 것으로 예측했다.

25. 시각 검색

카메라는 새로운 검색 창이므로 많은 애플리케이션은 Snapchat, Pinterest Lens , AliExpress 및 Google Lens에서 이미 발견된 검색 시스템을 도입할 것이다.

아마존은 2014년에 ‘플로우’ 기능을 갖춘 시각 검색의 선구자였다. 현재 비활성 상태인 플로우는 이미지를 인식하여 제품을 찾는 데 사용했다.

스냅챗은 AR의 얼리어답터로서 시각적 검색을 놓치지 않았다. 이들은 2018년 9월 아마존과의 전략적 제휴를 통해 새로운 기능을 발표했다. 새로운 스냅챗 기능은 사용자가 카메라를 사용하여 바코드를 "스캔"할 수 있게 해주었다. 결과가 긍정적일 경우, 다른 유사한 제품과 구매 버튼이 있는 아마존 카드의 형태로 추가 제품 정보가 표시되거나 "발행"된다.

Visual Search with Google Lens

26. 미래는 3D이다

지난 몇 년 동안 3D 자원의 주식과 커뮤니티는 엄청나게 성장했으며 미래는 더욱 밝아졌다. 시네마 4D, 블렌더, 유니티와 같은 도구들로 쉽게 만들어진 모바일 앱 시장을 위한 게임들이 생겨났고, 3D 인쇄의 등장은 성장의 또 다른 계기가 되었다. 오늘날 스케치팹(Sketchfab)과 같은 수많은 커뮤니티가 있다. 예컨대 스케치팹은 어떤 미디어, WebGL, 게임 및 3D 인쇄에 사용되는 모델을 다운로드하거나 구입 및 판매할 수 있는 훌륭한 자원을 제공한다. 틸트브러시(Tilt Brush), 구글블록 등 VR 도구로 만들어진 장면도 무제한이다. 또 다른 주목할 만한 커뮤니티는 웹 GL, VR, AR에 적합한 낮은 폴리 3D 리소스를 다운로드할 수 있는 탁월한 리소스인 구글의 Poly from Google이다. 또한 Vectary는 지역 공동체와 같이 MyMinifactory, Thingiverse, CGTrader를 포함한 많은 3D 디자인 도구를 오픈 소스 3D프린팅으로 맞추고 있다.

Littlest Tokyo - Download Free 3D model by glenatron - Sketchfab

The teeniest tiniest Tokyo! ~80,000 tris without the outline. 3 textures. 乾杯! (If you don’t see textures: try switching from LD to HD)

sketchfab.com

Littlest Tokyo by glenatron on Sketchfab

27. 증강현실 변화와 콘텐츠 제작자의 낙원

이제 우리는 새로운 증강현실 세계에 질 좋은 콘텐츠를 공급하기 위한 중요한 도전 과제를 갖고 있다. 우리에게는 디지털 크리에이티브로서 "미래는 증강된다"라는 멋진 상황이 있다. 주변 환경의 모든 요소는 다양하고 수많은 정보를 가질 것이며, 우리는 다양한 정보 계층과의 상호 작용으로 세계를 복제하고 있다.

우리는 서로 다른 정보 및 상호작용 계층으로 세계를 복제하고 있다.
제작자들에게는 황금 같은 기회다.

AR, VR 및 융합 혼합 현실(MR) 및 확장 현실(XR)과 같은 기술은 인터페이스 및 콘텐츠 설계 측면에서 많은 작업이 필요한 정보계층을 추가할 것이다. 간단히 말해서 제작자들에게는 황금 같은 기회다.

* 포트나이트
포트나이트가 제목에 포함된 이유를 묻는 모든 사람에게, 우리 책에는 기술과 디지털 영역이 우리의 사회적 상호 작용에 미치는 변화를 설명하는 짧은 장이 있다. 포트나이트는 디지털 세계 안팎에서 수백만 명의 사용자에게 엄청난 영향을 주는 패러다임의 게임이다.

내 인생을 바꿀 놀라운 책을 어떻게 얻을 수 있을까?
이 글이 끝난 후 당신은 우리의 새 책을 보고 싶어 할 거라고 생각한다. 그렇지 않은가? 불행히도, 인쇄판은 완전히 없어졌다. 만약 당신이 사본을 받고 싶다면, 당신은 2019년 샌프란시스코나 뉴욕에서 열리는 우리의 다음 컨퍼런스 중 하나에 참석해라. 우리는 컨퍼런스를 환영하는 모임의 일부로 참석자들에게 줄 것이기 때문이다. 혹시 망설여진다면, 당신은 여기서 디지털 버전으로 볼 수있다.

Awwwards web design Trends Hot Right Now. A Contemporary Landscape for Digital Thinkers: Volume 2

저자 : awwwards

원문 링크: https://www.awwwards.com/web-design-trends-2019.html

상편 보러가기

https://brunch.co.kr/@thinkaboutlove/273

2019 상반기 웹디자인 트렌드(상)

해외 디자인 아티클 번역 뉴스레터 <디독>이 어제 1주년을 맞이했습니다! 본업으로 바쁜 바람에 이렇다 할 이벤트도 못 했지만 괜히 둘이서 감격하고 그랬네요... 애정 갖고 운영하는 만큼 많은 분들께 알려졌으면 하는 바람입니다. 앞으로도 열심히 달려보겠습니다! 좋은 일 지속할 수 있도록, 주변에 알려주세요. 공유도 많이 부탁드려요. ^^ 해외 디자인 아

brunch.co.kr/@thinkaboutlove/273