2019년, 7가지 웹디자인 기술 트렌드 (번역본)
2019년에 UI 디자이너가 알아야할 웹디자인 기술 트렌드
이 게시물은 Inkbot Design이라는 사이트의 '7 Cutting Edge Web Design Trends to Follow in 2019' 라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했기 때문에 정확하지 못한 표현이 있을 수 있습니다.
https://inkbotdesign.com/web-design-trends-2019/
2019년, 7개의 웹 디자인 기술 트렌드 (7 Cutting Edge Web Design Trends to Follow in 2019)
세상 모든 디자이너들은 - 웹 디자인 세계에서 새로운 기술과 해결법을 배우는데 열광하는 이들이죠. 게다가 새로운 디자인을 만들어나갈때는 새로운 트렌드를 알아두는 것 역시 매우 중요합니다. 2019년에는 다음과같은 내용들이 매우 큰 인기를 끌 예정입니다.
1. 그림자와 뎁스값 (Drop Shadows and Depth)
그림자를 사용하는건 예전에도 그랬잖아요? 근데 뭐가 달라졌다는거죠? 그건 바로 '3차원적인 깊이'에 대한 내용입니다. 현재 플랫디자인이 계속해서 유행세를 타고있습니다. 하지만 플랫디자인이 생각보다 지루하고, 단조로울 수 있다는것도 기억하실겁니다. 그 해결책으로 나온것 중 하나가 바로 그림자로 3차원적 깊이감을 주는 형식입니다.이 형식을 사용하면, 디자인 요소가 페이지 위에 떠 있는 것처럼 보이고, 툭 튀어나온것처럼 강조표기를 할 수 있습니다. 가상의 깊이감을 내어, 고저차이를 주는 방식으로 여러가지 시각적 효과를 만들어낼 수 있죠.
심지어 그리드와 패럴랙스 레이아웃을 함께 사용할 경우 -굉장히 독특한 결과값을 만들어낼 수 있습니다. 또한 색상적으로 강렬한 그라데이션과 함께 사용할 경우 더욱더 효과적입니다.
(사실상 플랫디자인의 한계를 극복하기위해 나온 방식 중에 하나가 3차원 그림자효과라는 이야깁니다. 여기에 패럴랙스 스크롤, 레이아웃 등을 합쳐서 어떻게든 '다르게 보이는' 효과를 내고자 노력한다는 이야기네요.)
2. 모바일 친화적 디자인 (Mobile Friendly Version)
스마트폰 사용률은 이미 PC 사용률을 넘어선지 오래입니다. 수많은 사람들이 스마트폰을 통해 웹을 탐색하고, 스마트폰으로 쇼핑을 합니다. 10년전만 해도 어려웠던 일이, 이제는 현실로 다가온 것이죠. 덕분에 디자이너들은 혼란에 빠졌습니다. 어떻게 하면 모바일 상의 작은 화면에 PC 웹의 상단메뉴와, 서브메뉴, 그리고 개별 페이지 메뉴를 배치할 수 있을까요?
스마트폰의 발전으로 UI 디자인은 UI 화면을 최대한 뺴고 내용만을 남기는 - Zero UI의 개념을 향해 걷기 시작했습니다. 압축된 펼침메뉴는 이제 너무나 당연한 것이 됐고. 메뉴 는 눌리기 전에는 항상 숨겨져있게 되었죠.
스마트폰의 속도와 사용성을 위해 큰 용량과 화소의 사진들은 더이상 필요치않게 되었습니다. 하지만 아이콘들의 더욱더 효율적이고 널리 퍼지게되어서. 왠만한 사람들은 대부분의 아이콘의 이미에 대해서 이해하고, 사용에 문제를 겪지 않게 되었죠. 덕분에 UX 설계시에 생길 수 있는 문제는 대부분 매우 손쉽게 해결될 수 있게 되었습니다.
(말 그대로 메뉴 자체를 최대한 숨기고. 그마저도 간결하게 원페이지 레이아웃으로 변경되고. UI 자체를 최소화하는 시대가 왔다는 이야기입니다. 사진의 형상화인 아이콘은 더이상 사용상 아무런 문제가 없어졌고. 모든걸 현실적으로 표현해야할 이유가 사라졌다는 이야기이도 합니다. 제로 UI의 개념에 대해서는 추후 번역을 해서 올리도록 하겠습니다)
3. 크고, 굵직한 타이포 (Big, Bold TypoGraphy)
타이포그래피는 단순히 내용을 전달하는 것 이상의 역할을 합니다.
1) 시각적 완성도로 사이트에 대한 신뢰도를 향상시킨다
2) 전달하고자하는 내용을 압축적으로 전달하여, 사용자의 흥미를 이끌거나, 정보를 찾는데 도움을준다.
타이포그래피는 기기 해상도와 압축적 레이아웃에 영향을 받고있습니다. 기기해상도는 계속해서 늘어나고있고, 단순하고 압축적인 형태로 사용되는 레이아웃이 권장되고 있기 때문에 - 앞으로는 다양한 서체 사용이 크게 늘어날 것으로 보입니다. IE (인터넷 익스플로러) 외에도 대부분의 브라우저는 CSS를 통해 여러 서체를 지원합니다. 그런 서체들 중에는 이제 손글씨체나, 캘리그라피같은 서체도 사용이 가능해질겁니다. 또한 산세리프체와 세리프체가 모두 지원되어, 실시간으로 강한 대비를 줄 수 있고. 다양한 서체의 조합이 사용될 수 있을 것으로 기대됩니다.
(기존에는 좁은 화면에 가시성을 위해서 서체에 제한이 있었으나, 화면의 표현력이 올라갔기 때문에, 더 섬세한 손글씨 체나, 캘리그라피같은 서체도 사용할 수 있게 되었다는 의미입니다. 게다가 압축적인 타이틀은 검색엔진 최적화 - SEO 에서도 권장되는 내용이니. 해당 내용만 확실하다면, 서체는 뭘 쓰던간에 별 상관이 없어졌다는 이야기죠 )
4. 감성을 자극하고, 공감대를 이끌어내는 디자인
(Designs that Elicits & Conveys Emotion)
웹사이트가 각자가 갖고있는 내용보다도, 감성적 설득을 먼저 추구하는 시대가 왔습니다. Mailchimp의 아론 월터가 작성한 - 감성적 인터페이스 디자인 : 고객들을 열광하게 만드는 방법 - 이란 기사를 한번 읽어보시죠. 이런 트렌드는 사용자들을 설득하고, 사용률을 올리며, 구매율을 상승시키는데에 큰 영향을 줍니다. 이런 감성적 디자인은 SEO 검색엔진 최적화와도 연관이 있습니다. 감정적 공감대를 사고, 한 브랜드에 대해 감정적 동일시를 하게될 경우 - 여러가지 장점이 생겨납니다.
- 고객들은 해당 제품이나 사이트를 서로 공유하려하게되며
- 자발적으로 자신의 컨텐츠를 제공하거나, 컨텐츠 제작에 도움을 주게 됩니다.
- 회사나 제품, 사이트에 스스로 도움이되려하고
- 더 연결되어있으려합니다
- 신뢰감을 유지하고
- 친숙하기 때문에 더 자주 이용하게됩니다
- 당연히 더 다양한 서비스를 찾아보려하게되죠.
자연스럽게 감성적인 연결은 검색엔진 최적화인 SEO에 1,2차적인 효과를 낳게 됩니다.
(더이상 차별화된 서비스가 존재하지 않으니 - 껍데기를 개선하고. 감정적으로 연결시켜서 고유한 팬으로 만들어라 - 라는 식의 이야기인데요. 대표적인 사례로 카카오프렌즈의 캐릭터상품들을 생각하시면 이해가 쉬울듯 합니다. 이걸 현재 마케팅 업계에서는 6차산업이니 뭐니 하고 말들이 많습니다. 결국 기능에 이끌리는 사람들은 많지 않으니 - 귀엽고, 예쁘고, 내 감정을 대리해주는것 같은 착각을 제공할만한 . 일러스트와 스타일, 캐릭터와 컨셉을 팔게 된다는 이야기입니다. 여러모로 씁쓸해지는 내용이네요.)
5. 매력적이고 연결 가능한 인포그래픽
(Attractive and Embeddable Infographics)
요즘 웹 생태계에서는 인포그래픽 링크를 통한 유입이 유행하고있습니다. 사실 여기에는 별다른 금액이나 비용이 드는것도 아니죠. 대부분의 사람들은 압축적인 정보가 들어있는 인포그래픽을 좋아합니다. 각각의 통계는 출처에 따라 다를 수 있지만, 블로그 포스트보다 인포그래픽을 통한 정보전달이 사람들에게 더 인기를 끌곤합니다. 그이유는 상대적으로 더 정확한 정보규격을, 보기쉬운 형태로 보여주기 때문입니다. 그래서 SNS에서 더 많이 공유되곤하죠.
시중에는 SNS에서 손쉽게 쓰일만한, 인포그래픽을 위한 도구가 많이 있습니다. 이런 도구들을 잘 사용하기만 한다면 - 웹사이트로 연결되는 정보들만으로도 우수한 인포그래픽을 만들어낼 수 있습니다. 이런 인포그래픽들이 충분히 설득력을 가진다면, 더이상 웹 유입을 늘리기 위한 고민은 하지않아도 되겠죠.
(대부분의 회사들은 사용자들을 자사 컨텐츠나 서비스로 연결하기 위해서 다양한 시도를 하고있습니다. 블로그 포스트도 그 방법중 하나인데요. 대부분의 포스트들은 각자의 주관에 의해서 써지는 경우가 많고, 내용을 압축적으로 전달하는 경우가 많지 않습니다. 그렇기 떄문에 인기가 적은 편이고, 결과적으로 자사 컨텐츠나 서비스로 연결하기도 어려워지죠. 그래서 카드뉴스에 이어 동영상의 시대가 온 것이기도 합니다. 그러나 이 글에서는 여전히 블로그 포스트를 통한 전달 방식 중 - 인포그래픽은 사용할만하다 -라고 말하고있습니다.
다만 이게 개별 회사의 홍보범위에서 말하는 것인지. 아니면 인포그래픽을 위주로하는 컨텐츠를 메인 아이템으로 가져가라는 내용인지는 명확치가 않네요.)
6. 가속화된 모바일 페이지 AMP (Accelerated Mobile Pages)
AMP. 가속화된 모바일 페이지는 모바일 기기에서 페이지의 로딩 속도를 높이기 위해 고안된 기능입니다. 웹 페이지를 몇초 만에 불러올 수 있으며, 특히 3G또는 4G에서 검색할 때 유용합니다. 최근 구글 업데이트에서 SEO순위는 가속화된 모바일 페이지를 갖고있을수록 유리하게 설정된다고합니다. 그렇기에 - 회사 웹 사이트에서 AMP를 설정하냐 마느냐가 구글 키워드 광고에서 더욱 우위를 가질 수 있는 조건이 되었습니다.
AMP를 사용하면 다양한 장치의 배포 플랫폼을 통해 빠르며 성능이 뛰어난 서비스와 광고를 만들 수 있습니다. 회사는 AMP기능을 사용하여 모바일 사용자의 트래픽을 높이고 최적화할 수 있게 되겠죠.
(위의 내용을 보면 - 마치 AMP라는 신규기술이 나온것처럼 이야기하는 것 같지만. 이건 반만 맞는 표현같네요. 정확히는 모바일에서 읽기 쉽게 HTML 코드를 뼈대만 남겨서 보낼 수 있게 - 제거해버리는 방식에 대한 이야기입니다. 이 부분에 대해서는 추후 좀 더 자세하게 다룬 개별 문서를 번역할 예정입니다. )
AMP의 전반적인 내용과 규격에 대해서는 하단의 링크를 참조하시면 됩니다.
https://www.ampproject.org/docs/getting_started/create/basic_markup
7. 음성검색 최적화 (Keep an eye on Voice Search Optimization)
최근들어 음성 검색에 대한 이야기가 많이 나오고있습니다. 예로, 아마존에서는 Alexa, 마이크로소프트에서는 Cortana, Apple에는 Siri. 구글에서는 음성검색을 본격적으로 지원하고있죠. 이러한 흐름은 웹 전반의 트렌드이기도 합니다. 음성 검색을 사용하여 웹 사이트를 최적화할 경우소비자에게도 어필할 수 있는 시대가 오고있는 것이죠.
음성검색은 웹서비스 전반에 사용되기보다는 - 제안 및 질의사항. 고객관리 쪽에서 더 효과적으로 사용될 수 있습니다. 게다가 앞으로는 고객관리를 넘어, 더 다양한 방면에서 사용될 것으로 보입니다. 예를 들어 방문자를 대상으로하는 웹사이트에 - 음성기반 검색으로 원하는 결과값을 찾게 만들 수도 있는 것이죠. 검색에어 회사나, 제조사의 이름이 인용된 경우 - 당신의 웹 사이트로 연결되게한다면 SEO 검색 엔진 최적화 등급에도 영향을 주게 될 겁니다.
( 여기에서 말하는 음성기반 검색 기능을 - 어떻게 구현할 것인지. 그리고 그게 얼마나 효과적인지는 좀 더 다양한 케이스확인이 필요할듯 합니다. 특히나 음성기반 검색의 결과값이 더 높다는 것이 과연 '어떤 수치에 기반했는지.'는 팩트체크를 위해서라도 꼭 확인이 필요할듯하네요.)
결론 (Conclusion)
2019년에는 서비스만 좋다면, 소규모 회사들도 사용자들에게 인기를 끌 수 있는 환경이 만들어지고있습니다. 하지만 반대로 - 잠재 고객에게 부정적인 경험을 하게 만든다면 - 정반대의 상황이 만들어질수도 있겠죠. 온라인의 발전으로 고객들은 업계의 경영과 서비스 운영방식에 커다란 영향을 주고있습니다. 또한 소비자가 원하는 바와 체감한 내용들이 직접적으로 피드백되고, 전략 선택에 큰 영향을 미치고있죠. 현재의 고객들은 기존처럼 '대체할 수 있는 서비스를 찾지 못해' 기존의 서비스를 이용하지 않습니다. 다른 대체 서비스를 선택하거나, 기존의 서비스에대한 충성도를 쉽게 잃어버리죠.
그렇기에 각각의 회사들은 2019년에 웹 디자인의 트렌드를 고려하여 - 보다 편리하고 친숙한 환경을 제공해야 합니다. 그렇지않고서는 앞으로 고객을 유지하거나, 업계에서 살아남을 수도 없을 테니까요.
-
전반적으로 디자인의 영역이라기보다는 - 기술 키워드에 대한 내용이 많네요. 게다가 기술에 대한 이해도가 그리 높지 않은 사람이 쓴 내용이라는 느낌이 드는게 - 해당 내용을 어떤 기술기반으로. 어떤 맥락에서 사용하는지보다 - '이게 유명하니까 너희도 이거써. 이거쓰면 좋대' 라는 식의 권유 투의 내용이 많습니다. 게다가 쉽게 쓸 수 있는 말들을 괜히 어렵게 - 긴 문장으로 풀어놔서 번역에 더 오랜 시간이 걸린 것 같네요.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
