2019 웹 디자인 트렌드 (번역본)
UI 디자이너가 알아야할 2019 웹디자인 트렌드
이 게시물은 Thedesign.com의 채널의 'Web Design Trends for 2019' 라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했기 때문에 정확하지 못한 표현이 있을 수 있습니다.
https://www.theedesign.com/blog/2018/web-design-trends-2019
시작하는 글
웹 디자인 트렌드를 최신으로 유지할수록, 웹사이트 역시 성공할 가능성이 높습니다. 그 이유는 매년마다 시각적 표현방식이나, 알고리즘, 개발 방식 등 - 모범사례에 대한 해답이 매번 달라지기 때문입니다. 제 아무리 트렌드를 쫓는다해도, 단 몇 달 만에 트렌드가 변화해버리면 사이트가 낡아빠진것처럼 보일 수도 있다는 거죠. (이는 매우 과장된 표현입니다) 그렇기 때문에 웹 사이트를 디자인할 때 디자인 트렌드 속 일시적인 유행과, 진짜 중요한 요소의 차이가 무엇인지를 알아야합니다.
2019년에는 웹 디자인 추세가 속도향상과 모바일 디자인, 비대칭 레이아웃을 기반으로 하는 경우가 많아질겁니다. 또한 속도를 해치지 않으면서도 간결한 디자인. 몰입감 있는 비디오 배경 등이 UX를 위해 중요한 요소가 될 전망입니다.
빠른 속도 (Speed)
잠재고객들에게 가장 좋은 인상을 주는 것들 중하나는 바로 웹페이지의 반응 및 로딩속도입니다. 약 3초도 걸리지 않는 순간에 한 사이트와 서비스에 대한 인상이 결정됩니다. 단지 속도 하나만 갖고도 말이죠.
인터넷에 사용자들은 로딩시간이 길어지는걸 좋아하지 않습니다. Akamai 및 Gomez.com이 수행한 연구에 따르면, 50%의 사용자는 사이트를 클릭할 때 2초 이내에 로딩이 끝나야한다고 생각했습니다. 또한, 로딩에 3초 이상이 걸리면, 거의 즉시 사이트를 닫아버릴 생각을 하기 시작한다고 밝혔습니다.
제 아무리 아름다운 웹사이트라하더라도, 데이터가 너무 많아서 다운로드 시간이 너무 오래 걸리면, 아무도 여러분의 사이트를 쳐다보지 않게 될겁니다. 이는 자연히 많은 손실로 연결되겠죠. 게다가 2018년 7월 구글 스피드 업데이트가 발효되면서 구글이 다른 사이트보다 빠르게 로딩되는 사이트의 순위를 우선 순위를 매기기 시작했습니다. 이 속도는 당연히 검색엔진의 결과값에 반영될 가능성이 높고. 이런 흐름은 다른 검색 엔진들도 곧 따라올 가능성이 높습니다. 그렇기에 앞으로는 웹사이트 로딩 속도를 위해 설계상에서, 디자인보다 속도를 우선시해야할겁니다.
플랫 디자인 (Flat Design)
2017년에 디자이너와 개발자들은 모바일 성능을 향상시키기 위해 깨끗하고 간단한 웹 사이트를 만들기 시작했습니다. 그 이후로, 모바일 검색의 수는 계속해서 증가해 왔고, 앞으로도 늘어날 것입니다. 그렇기에 웹 사이트를 설계할 때, 모바일을 우선시하는 설계는 단순한 옵션이 아니라 필수라고 해도 좋을겁니다. 앞에서 설명한 것처럼 이미지가 많은 웹 사이트는 느리게 로드되고 모바일 사용자에게 불편함을 주기 충분하죠.
깨끗하고 최소한의 요소만 갖는 미니멀리즘 디자인, 혹은 플랫 디자인은 속도에 있어 큰 강점을 가집니다. 현재 유행하는 디자인인 플랫 디자인과 미니멀리즘 디자인은 두 가지 중요한 이유로 바람직합니다.
첫째, 모바일 사용자와 데스크톱 브라우저 모두 웹 사이트를 빠르게 로딩할 수 있습니다.
둘째, 높은 SEO 값을 유지할 수 있습니다. (검색엔진에서 걸리기 쉬운 간결한 구조를 유지한다는 의미)
플랫 디자인은 사이트가 검색 엔진이 요구하는 많은 속도 요구 사항을 충족하는 데 도움이 됩니다. 이것이 바로 플랫 디자인이 인기를 끌기 시작한 이유이며, 이런 경향은 2019년까지 계속해서 유행할 것으로 보입니다.
플랫 디자인은 모든 것이 2차원으로 단순화된다는 의미가 아닙니다. 최소한의 필수정보만을 갖고있다는 것이고, 사용성에 깊게 연관된 이야기입니다.필요한걸 없애고, 웹 사이트의 핵심내용에 초점을 맞추는 디자인 방식이죠. 밝은 색상과 깔끔하고 명확한 윤곽. 그리고 빈 공간을 효과적으로 공간을 활용하는 플랫 디자인은 - 고해상도 사진 이미지를 기반으로한, 느린 속도의 디자인보다 훨씬 효과적이죠.
(이 필자는 미니멀리즘과 플랫디자인은 결코 뻔하거나 지루한 디자인이 아닙니다 - 라고 주장하고있습니다. 다만 단순 규격화된 디자인이다보니 당연히 상대적으로 다 거기서 거기. 똑같아보이기 쉽다는 점을 부정하려고하는군요.)
플랫 디자인은 매력적인 사진에 의존하지 않는 경우가 많습니다. 그래서 사용자가 페이지로 이동할 때 로딩속도가 매우 빠르고, 추가적인 자원소모도 많지 않습니다. 이 부분은 웹사이트를 운영하는 실소유주에게 두가지 혜택을 줍니다.
첫째, 사용자들은 PC와 모바일 양쪽에서 - 웹사이트에서 느러터진 로딩으로 고민하는 일은 절대 없을겁니다.
둘째, 가벼운 데이터와, 빠른 로딩을 위한 설계는 페이지 속도와 최적화를 훨씬 더 빠르게 만들어 줍니다.
이는 Google, Bing 등의 모든 검색엔진이 검색 최적화를 위해 아주 바람직한 상황이죠. 위에서 이야기한것과 같이, 로드 시간이 빨라지면 검색 결과에서 좋은 순위에 오를 확률이 높아집니다. 또한 정보성이 명확하기 때문에 사용자가 사이트에서 더 오래 머무르며, 구매의사에 대한 변환 확률도 더 높아집니다.
모바일 환경을 우선하기 (Mobile First)
2015년부터 모바일 검색은 전체 PC기반 검색을 앞지르기 시작했습니다. 이로서 모바일 검색은 전세계에서 가장 많이 사용되는 환경이 되었죠. 이에 따라 Google은 자신이 가장 먼저 인덱싱하는 사이트를 변경했습니다. 즉, 모바일에 우호적이지 않은 사이트보다 모바일 사이트를 우선시한다는 이야기입니다.
(이는 비 반응형웹이나, 지나치게 무거운 PC웹, 옛 플러그인을 그대로 사용하는 웹들도 동일하게 적용되는 이야기입니다.)
이런 상황에서 모바일 환경을 우선시하는 설계가 유행하는건 당연한 결과입니다. 이 경우,웹 디자인은 웹 사이트가 디자인되는 방식을 근본적으로 바꾸게됩니다. 이전에는 사이트가 PC나 노트북에 최적화된 형태로 설계되었습니다. 그 이후에 모바일에서도 접속하기 좋은 형태를 살짝 추가하는 정도였죠. 하지만 모바일 환경을 우선시한 설계는 그 반대입니다. 이제는 모바일에서 최적화된 웹페이지를 만들고, 반대로 PC에서도 접속할 수 있는 식으로 디자인을 설계해야합니다.
모바일 환경을 우선시하는 유행의 이유가 단순히 SEO (검색엔진 최적화)에만 있는건 아닙니다. 사용자들의 사용성에 있어서도, 정보를 효과적으로 검색하고, 원하는 결과를 바로 확인할 수 있기 때문에. 사용성 영역이 크게 향상될 것입니다. 적어도 모바일 환경을 대체할 무언가가 나오기 이전까지는, 이러한 디자인 경향은 앞으로도 계속 유지될 전망입니다.
끊어진 그리드 / 비대칭적 배치 (Broken Grid / Asymmetrical layout)
2019년의 웹 디자인 트렌드는 그리드를 벗어나는 방향으로 나아가고있습니다. 의도적으로 끊어진 그리드와 및 비대칭적 레이아웃은 웹 디자인 산업에 큰 영향을 주고 있습니다. 많은 웹 디자이너들은 플랫디자인에 빠른 속도를 가진 웹을 만들고 있지만, 미니멀한 요소들을 갖고 - 독특한 레이아웃을 시도하고있습니다.
끊어진 그리드는 신문, 인쇄, 옥외 광고 등 모든 종류의 배치에 수십 년 동안 사용되어 온 그리드 시스템을 의도적으로 끊어버립니다. 역사적으로 그리드를 사용하지 않거나 "의도적인 뒤틀기"를 시도하지 않는 건. 그만큼 정보의 직관성과 레이아웃을 파괴하여, 사용성을 떨어뜨리기 때문이었습니다. 하지만 플랫 디자인과 미니멀리즘적 디자인의 대두로 인해, '고유한 상징성'을 갖기가 매우 힘들어졌습니다. 그렇기에 이런 상황에 맞게 - 비대칭과 깨진 그리드가 이러한 대안으로 나왔다고 보면 좋을듯 합니다.
끊어진 그리드나, 비대칭적 구조라해서 그걸 아무렇게나 사용할 수 있는 건 아닙니다. 신중하게 그리드 패턴을 끊어내고, 계획된 영역 내에서 비대칭적 구조를 사용해 야하죠. 빠른 로딩속도와, SEO (검색엔진) 친화적인 구조를 위해 다른 요소를 더 추가할 수 없기 때문에 만들어진 결과입니다. 특이한 배치와, 다른 색상과 질감을 가진 계층구조. 불규칙한 패턴의 반복과 백색 여백 사용. 그리고 타이포의 창의적 사용은 그리드 기반 레이아웃에서 보통 찾을 수 없는 독특한 결과를 만들어냅니다.
도형들 (Shapes)
플랫 디자인과 미니멀리즘, 끊어진 그리드와 의도된 비대칭성에 의해 만들어진 또다른 흐름은. 바로 기하학적 도형을 사용하는 경우가 잦아졌다는 겁니다. 우리가 초,중학교에서 배웠던 삼각형, 육각형, 원과 같은 단순한 기하도형을 생각하면 이해가 쉽습니다.
단순한 도형들은 디자인에 쉽게 녹여낼 수 있기 때문에, 플랫디자인과 비대칭형 레이아웃의 빈자리를 손쉽게 채울 수 있습니다..밝은 색상의 단순한 기하도형들은 흥미로운 패턴을 만들어낼 수 있고. 단순한 형태이기 때문에 속도에도 지장을 주지 않습니다. 기하도형을 사진과 타이포와 함께사용하여 반복 패턴을 만드는 디자인은 기존에 없었던 새로운 깊이감을 만들어내기에 충분합니다. 그리고 이것이 얼마나 효과적일지는 여러분의 브랜드가 추구하는 미적 감각에 달려있습니다.
싱글 페이지 디자인 (Single Page Design)
(이 single page design은 - Single Page app과는 다른 개념입니다. 아래로 쭉 내리면 모든 내용을 한번에 읽을 수 있는 단순한 디자인 규격을 말하는 것입니다.)
싱글페이지 디자인은 미니멀리즘과 속도에 대한 이슈가 등장하면서 더욱더 필요해진 방식입니다. 싱글 페이지 디자인은 함축적인 한장의 내용 안에 거의 모든 내용을 담아냅니다. 여러 개의 서비스 페이지나, 길고 긴 블로그 기사 대신 한 페이지만 있는 웹 사이트를 하나하나 연결한 계층구조아래 연결해내는 것이 특징입니다. (개별 페이지의 단순화 + 규격화)
싱글페이지 디자인의 예 : 한 화면. 한 스크롤로 거의 모든 화면을 한번에 볼 수 있다.
기존의 SEO 디지털 마케팅 관점에서 볼 때, 이런 방식은 문제가 될 수도 있습니다. 많은 양의 텍스트를 보유하고있지 못하니, 검색엔진에서 높은 우선순위를 갖기가 힘들어집니다. 자연스럽게 기존의 고급 SEO를 수행하기위한 기본요건도 채우지 못하게 됩니다. 하지만 여전히 이런 선택에는 또다른 장점이 따라오게됩니다.
속도에 대한 내용과, 플랫 디자인에서 이야기했던 것 처럼. 빠르고 쉽게 모바일 기기로 검색할 수 있는 것이 - 최근 검색엔진의 흐름입니다. 그렇기 때문에 깨끗하고 간단한 웹 사이트를 선호하고있죠. 페이지수가 적고, 함축적인 디자인은 속도와 내용을 위해 모든것을 희생합니다. HTML, CSS, Javascript 및 이미지마저도, 다운로드할 데이터가 많지 않아야 사이트 검색이 빨라지고. 사용자들에게 극명한 사용성을 전달할 수 있습니다.
(결국 기존처럼 쓸데없이 말 길고, 맥락에 별 도움도 안되는 이미지만 잔뜩 붙여놓고 - 검색엔진 최적화를 했던 녀석들은 다 죽게된다는 이야기입니다. 얼마나 사용자가 원하는 핵심적인 내용을 함축적으로, 빠르게 보여줄 수 있는가가 우선시된다는 이야기죠.)
구조가 단순하고 정보가 간결한 설계는. 변경하거나 업데이트할 항목이 거의 없습니다. 그렇기에 업데이트에 대한 시간소요도 적어지고, 웹사이트를 유지보수하느라 고생할 일도 사라지죠. (기존 웹 만들던 업체들은 더이상 유지보수에 대한 수요마저도 잃게된다는 이야기입니다.)
기업의 입장에서는, 페이지수가 적은 사이트를 사용할수록, 구매전환률이 높아지는 경향이 있습니다. 기존의 웹페이지들은, 키워드 검색을 통해 사용자를 붙잡고, 그 사용자를 당신의 사이트에 착륙시키고 , 문의 페이지나 전화번호로 연결하는게 대부분이었습니다. 하지만 이제는 사용자에게 바로 구매할 수 있는 곳으로 향하도록, 더 단순한 구조를 만들어나가고있죠. 이러한 이유에서 단일 페이지 디자인은 웹 디자인의 미래라고 말할수는 없더라도. 지속될 가능성이 높은 디자인 방식입니다.
영상 배경 (Video Background)
미니멀리즘, 빠른 로딩시간, 플랫 디자인의 추세에도 불구하고, 비디오 배경은 앞으로도 지속적인 인기를 끌 전망입니다. 일반적으로 보면 동영상의 무거운 트래픽이 사이트에 해를 끼칠 거라고 생각하기 쉽습니다. 하지만 현실은 영상배경이 있는 사이트는 상대적으로 이용률이 증가되는 경향이 있습니다.
영상이 주된 컨텐츠가 되는건 비단 웹사이트뿐 아니라. 페이스북같은 SNS에서도 동일하게 이어지는 유행입니다. 문자나 이미지보다 훨씬 더 매력적이고, 보기도 쉽죠. 비디오 게시물은 다른 종류의 게시물에 비해 인기가 좋습니다. 또한 여러 소식을 확인 할 때 스크롤할 때 음소거에서 자동 재생하여 동영상을 보다 쉽게 볼 수 있죠. (페이스북의 예)
사용자가 사이트에 접속해 동영상이 배경에서 재생되는 경우, 비디오가 주의를 끌기 때문에 사용자는 사이트에 머무는 시간을 늘리게됩니다. 이렇게 늘어난 체류시간은 구매가 일어날 가능성을 높이게되죠. 또한 사이트의 평균 체류시간이 높을수록 검색엔진은 해당 사이트를 '유용하다고' 판단합니다.
영상의 힘은 텍스트보다 더 강한 메시지 전달력에 있습니다. 핵심 메시지를 빠르고 효과적으로 전달하기 위해 채 10초도 필요치않죠. 사용자에게 복잡한 메시지를 전달해야하고, 그 내용을 이해하기가 어려운 상황에는 영상이 더욱 효과적입니다.
마이크로 애니메이션 (Micro Animation)
웹 디자인에서 미묘하지만 눈에 띄는 경향중 하나는, 바로 마이크로 애니메이션입니다. 마이크로 애니메이션은 사용자가 웹 사이트를 탐색할 때 직관적이고 만족스러운 경험을 제공할 수 있는 강력한 방법입니다. 버튼에 대한 반응을 추가한다거나, 새로운 화면을 보여주거나, 입력한 결과값이 변화하는 등 - 사용 중간중간에 작지만 효과적인 애니메이션을 통해 사용성을 증가시키는 것이죠.
대부분의 사용자는 데스크톱과 모바일 검색 플랫폼 모두에서 이러한 마이크로 애니메이션을 경험하게 됩니다. 이러한 애니메이션은 사용자의 입력에 대해 '당신이 원하는 결과가 제대로 나오고있다'는걸 실시간으로 알게해줍니다. 어떤 데이터를 입력하고, 제출 버튼을 누르셨나요? 클릭했을 때 색이 변했습니다. 페이지를 새로 고치길 원하세요? 아래로 스와핑하면 새로 고침 작업이 일어나고있음을 알리는 당김 동작이 발생합니다.
우리는 동영상과 같은 매체를 이동했을 때, 사용성이 얼마나 증가하는지에 대한 이야기를 했었습니다. 영상과 마찬가지로 이런 작은 애니메이션은 사용자의 시선을 사로잡고 사이트를 탐색할 때 풍부한 경험을 만들 수 있습니다. 마이크로 애니메이션을 적절하게 사용할수록 웹 페이지에 시각적 계층 구조가 만들어지고. 일종의 보상처럼 - 사용자의 입력에 대한 결과값을 내어주는 것이죠.
(마치 게임처럼, 사용자의 움직임에 대해 '반응해주는 것'에서 재미나, 즐거움을 느끼고, 정보 인식에 도움이된다고 말하고있는것 같네요.)
마이크로 애니메이션이 사용자가 양식에서 제출을 클릭할 때 그 노력을 "보상"할 수 있다는 말이. 그렇게 와닿으시진 않을 수도 있습니다. 하지만 '로봇이 아님을 증명하는 Capcha 시스템만 생각해보더라도. 이해가 가실겁니다. (물론 '자동차 찾으라던가, 신호등 찾으라던가 하는 인증방식인 - 캡챠도 짜증나긴 매한가지지만, 이상하게 일그러진 이미지에서 숫자나 알파벳 찾아서 입력하는 것보다는 낫다는 이야기네요.) 이러한 이유에서라도, 앞으로 마이크로 애니메이션은 계속해서 유행할 예정입니다.
챗봇 / 머신러닝 (Chat bot / Machine Learning)
지난 몇 년 동안, 봇(bot)과 교류하고 소통하는 경우가 많아지고있습니다. 디지털 미디어 전반에 걸쳐 웹 사이트 및 마이크로 인터랙션에서 점점 더 많은 수의 챗봇이 보편화되고 있죠. 그 예로 모바일 통신사 직원과 통화하신게 언제쯤인지 한번 기억해보세요. 대부분의 경우 봇과 대화하시거나, 단순화된 flow를 따라가게 만들어둔 것이 대부분일겁니다.
(실제로 한국의 통신사들도 직접적인 AS상담보다 보이는 ARS나, 질문지 형식의 대응 등 - 다양한 방식을 사용하고있습니다. 다만 미국에 비해서는 훨씬 인력상담이 싸게먹히니, 그런 방향성이 여전히 유지되는 경우가 많긴 하죠.)
봇은 20년 전에 처음 출시되기 시작했을 때만해도 별로 도움이 되질 않았습니다. 그러나 현재엔 많이 달라졌죠. bot은 우리의 생활 속에서도 밀접한 일을 하기 시작했습니다. 우리가 검색 표시줄에 입력을 시작할 때, 개인화된 자동 검색어를 추천해주는 것도 이런 봇들이 하고있는 일입니다.
페이스북이 우리를 잘 아는 이유 역시 봇에 있습니다. 페이스북 내에서 동작하는 봇들은 우리가 어떻게 생겼는지를 기억하고, 우리가 사진에 태그 달기를 원하는지 물어보는 데 도움을 줍니다. 또한 GPS 위치 데이터를 사용해서, 우리가 페이스북 피드를 읽는 습관이나, 패턴을 학습했습니다. 그렇기에 어떤 광고나 이벤트 정보를 보여줘야 흥미를 가질지도 정확히 알고있죠.
대부분의 챗봇이 가진 자동응답 기능은 여러 사용자에게 재빠른 맞춤형 서비스를 제공할 수 있습니다. 게다가 상담원과는 다르게 여러명을 동시에, 쉬지 않고 상대할 수도 있죠. 이런 이유에서 앞으로 챗봇과 머신러닝기술은 - 사용자를 상대로하는 웹 사이트의 사용성을 계속 강화시킬 겁니다. 이를 통해 잠재 고객과의 관계를 단단히 하고, 실제 구매 상담을 하기 전에 영업 팀은 고객의 관심사에 대한 정보를 수집할 수도 있는것이죠.
2019년에는 챗봇기술이 거의 완성단계에 다다를 것이고, 대부분의 기업 웹사이트에 통합적용될 겁니다. 고객과의 과거 대화내용을 손쉽게 분석해서, 상대가 원하는 내용을 정확히 캐치해내는 웹 사이트를 한 번 상상해보세요. 이런 새로운 기술 덕분에 웹을 통한 고객 서비스는 매일 매일 - 더 빠르고 더 효율적으로 변화하고 있습니다. 여러분의 웹 디자인에서도 이런 내용들을 간과하지 마세요.
웹 디자인 2019 - 미니멀리즘과 눈을 사로잡는 비주얼?
2019년은 웹 디자인에 있어 야누스의 얼굴같은 한 해가 될 수도 있을겁니다. 한쪽은 끊어진 그리드 레이아웃과, 영상 배경의 독특한 트렌드가 있습니다. 다른 한 쪽에는 플랫 디자인과 싱글 페이지 디자인의 - 아름답고 실용적인 모습입니다. 트렌드가 변화하면 산업도 변합니다. 이러한 변화에 대해 인식하고, 웹 사이트를 항상 아름답고, 최신의 모습으로 유지해보세요. 분명 좋은 결과가 생길겁니다.
만약 2018년의 웹디자인 트렌드가 알고싶다면, 다음 영상을 확인하시면 됩니다.
https://www.youtube.com/watch?v=KFdBnNxqwwY
-
글 쓴 사람이 동의반복이나, 쓸데없는 미사여구를 넣은게 많아서. 번역과정에서 많은 텍스트를 변형하여 직관적으로 변경했고, 때로는 문단 자체를 삭제하였습니다. 내용 자체는 사실 크게 별다른 내용이 많은것도 아닌데 - 양이 엄청 많았어요. 심지어는 해당 내용을 제대로 설명하는 시각물이 없는 경우가 있어, 직접 검색해서 추가한 경우도 있습니다.
기존의 웹사이트들에 비해 내용이 많이 줄고, 더 함축적으로 되어야한다고 말하는 게시글이. 정작 스스로는 장황하기 그지없는 얘길 하다니. 좀 재미있는 상황이긴 하군요.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
