2021년에 놓치지 말아야 할 9가지 인기 웹디자인 트렌드


윅스의 인기 웹디자인 트렌드 블로그 메인 이미지


웹사이트를 제작한다는 것은 강렬한 첫 인상으로 방문자를 사로잡을 수 있는 기회를 만든다는 뜻입니다. 온라인에는 온갖 자극적인 정보가 넘쳐나고 있기 때문에 사람들의 관심을 끌기 위해서는 돋보이는 웹사이트를 제작해야 합니다. 가장 중요한 것은 사람들이 내 웹사이트에 참여하게끔 유도 함으로써 내 콘텐츠를 소비하게 하는 것입니다.

분야에 상관없이 웹사이트 디자인에는 반드시 지켜야 할 황금률이 있습니다. 사용하기 쉽게 만들어야 하고, 심미적으로 아름다워야 하며, 내 이야기를 하기 위해서 모든 관련 정보를 포함해야 한다는 것이죠. 무엇보다도 웹사이트 디자인 제작 과정은 영감을 줄 수 있어야 한다는 점을 잊지 마세요. 우리 주변의 영향력 있는 웹사이트들을 보면서 영감을 줄 수 있는 웹디자인이란 어떤 것인지 살펴보는 것이 많은 도움이 될 겁니다.

그러한 목적으로 저희는 매년 웹디자인 트렌드를 주시하고 있습니다. 2021년의 웹디자인 트렌드는 과거의 경계를 넘어설 것입니다. 직관적인 도구와 혁신적인 기술이 더해져서 더욱 자유로운 디자인이 가능하다는 장점이 생겼기 때문에 2021년에는 독창성, 새로운 솔루션, 높은 심미성, 반응형 디자인이 트렌드의 주를 이룰 것으로 예상하고 있습니다.

이제부터 웹디자인 트렌드를 살펴보며 영감을 받고, 2021년에 가장 눈에 띄는 웹사이트를 만들어 보도록 합시다.


  1. 비대칭 레이아웃

  2. 극단적인 미니멀리즘 또는 맥시멀리즘

  3. 디자인 요소 - 동영상

  4. 벡터 아트

  5. 도형 및 추상적인 디자인

  6. 애니메이션

  7. 블랙 & 파스텔 색상

  8. 접근성

  9. 스크롤 효과

01. 비대칭 레이아웃

웹사이트 레이아웃은 시각 요소를 배열하는 구조를 형성합니다. 사실 대칭은 디자인의 기본 규칙입니다. 대칭 구조를 사용하면 웹사이트가 질서 있고 안정적으로 보이기 때문입니다. 그렇다고 해서 디자인 세계에서 무조건 대칭 구조만을 고집하는 것은 아닙니다.

비대칭 레이아웃은 다른 이점을 줄 수 있습니다. 대칭 레이아웃을 사용했을 때보다 더 역동적이고 대담한 분위기를 자아낼 수 있으며 디자인의 자유도가 높아집니다. 비대칭 레이아웃의 사용을 균형 감각의 부족으로 여기는 것은 오해입니다. 그러니 웹사이트에 과감하게 비대칭 레이아웃을 적용해 보셔도 좋습니다. 굳이 대칭 레이아웃을 적용하지 않아도 시각적으로 균형감을 줄 수 있습니다.

페이지의 각 요소에 대한 무게감을 계산하면서 디자인을 한다면 비대칭 레이아웃으로도 충분히 시각적인 조화를 이룰 수 있습니다. 각 구성 요소들을 배열하기 전에 색상과 사이즈, 움직임을 고려하세요. 웹디자인의 비대칭 레이아웃 트렌드를 내 사이트에 적용하는 데 도움이 필요하다면 언제든지 웹사이트 템플릿을 사용할 수 있습니다.

비대칭 레이아웃을 적용한 윅스 웹사이트의 이미지


비대칭 레이아웃을 적용한 윅스 웹사이트의 예시


02. 극단적인 미니멀리즘 또는 맥시멀리즘

2021년에는 다양한 극단 웹사이트들을 볼 수 있을 텐데요. 예전에는 미니멀리즘과 맥시멀리즘이 모두 각자의 자리에서 스포트라이트를 받았다면 올해에는 이 둘을 같은 무대에서 볼 수 있을 것으로 예상됩니다.

미니멀리즘 웹디자인은 단순함을 강조하며 과도한 디자인 요소를 피합니다. 하지만 ‘적을수록 더 좋다(less-is-more)’ 접근방식은 여전히 사람들에게 매력적으로 다가옵니다. 이 원칙을 내 웹사이트 디자인에 올바르게 적용한다면 쉬운 사용자 경험을 선사하는 매력적인 결과를 가져올 것입니다.

이제 미니멀리즘과는 완전히 다른 맥시멀리즘 웹사이트 디자인에 대한 얘기를 해볼까요?

편안함과 질서에 대해 크게 신경 쓰지 않는 젊은 디자인 트렌드인 조악한 웹사이트에 대한 미련이 덜 공격적인 방식으로 발현되기 시작했습니다. 2021년의 맥시멀리즘 웹사이트 디자인에서는 질서보다 창의적인 표현을 중시하여 어떤 수단을 써도 상관없는(no-holds-barred) 접근 방식을 강조할 것으로 보입니다.

“올해에는 더 많을수록 더 즐거워질 것입니다. 다양한 효과, 동영상, 벡터 아트, 애니메이션, 예상치 못한 레이아웃을 사용하는 것을 두려워하지 마세요. 내 웹사이트에서 주목받기 원하는 부분을 더 강조하고 싶다면 맥시멀리즘 디자인을 활용해 보세요. 나랑 맞지 않는 것 같다면 미니멀리즘 디자인을 적용하면 됩니다. 오히려 미니멀리즘 접근방식이 나한테 더 적합할 수도 있으니까요.”

- 아디 후리(Adi Huri), 제품 마케팅 담당자, Wix 에디터


2021년 트렌드가 될 맥시멀리즘 디자인을 잘 활용하는 방법은 무엇일까요? 글꼴 변형, 큰 타이포그래피, 시각적 요소들 겹치기, 레이어, 플로팅 효과와 같은 다양한 스킬을 사용할 수 있습니다. 이 트렌드를 수용함으로써 얻을 수 있는 이점은 아이디어를 전달할 때 생길 수 있는 자유도 제한을 줄인다는 것입니다. 다만 사용자가 너무 부담스러워 하지 않도록 주의하세요.

맥시멀리즘이 표현된 윅스 웹사이트의 예시


미니멀리즘이 적용된 윅스 웹사이트의 예시


03. 디자인 요소 - 동영상

동영상은 거의 모든 웹사이트에서 볼 수 있는 디자인 요소인데요. 홍보 동영상 또는 인터뷰 동영상을 가지고 있다면 웹사이트에 추가해보세요. 중요한 정보를 강조하며 전달하면서도 방문자들이 참여하도록 유도할 수 있는 좋은 방법입니다.

최근 몇 년 동안 동영상은 웹디자인 분야에서 새로운 역할을 맡게 되었습니다. 예전에는 순수하게 정보를 전달하는 기능적인 역할만 했다면 이제는 동영상 자체가 디자인 요소로 인정받고 있습니다. 어떻게 그럴 수 있었던 것일까요? 이걸 궁금해하시길 기다리고 있었답니다.

끊임없이 개발되는 신기술 덕분에 예전과는 다른 새롭고 흥미로운 방식으로 웹사이트에 동영상을 삽입할 수 있게 되었기 때문입니다. 동영상 상자같은 도구를 사용하면 레이어를 추가하여 동영상 재생 방식을 선택할 수 있는데요. 예를 들어, 동영상이 자동으로 재생될지, 무한 반복으로 재생될지, 슬로우 모션으로 재생될지 등을 선택하는 것이지요. 동영상 상자의 가장 독보적인 기능을 하나 뽑자면 단연 동영상 마스크일 것입니다. 다양한 모양의 틀대로 동영상을 잘라내어 독특한 디자인을 연출할 수 있는 혁신적인 기능이기 때문이지요. 동영상 상자 도구를 활용하여 플로팅 요소를 추가하여 역동적인 느낌을 줄 수 있습니다.

Wix의 투명배경 동영상 역시 기존의 MP4 형식 동영상의 스트리밍의 한계를 극복해낸 특별한 기능인데요. 일반적으로 동영상은 높은 품질을 유지하면서도 배경을 투명으로 유지하는 데 한계가 있었습니다. 하지만 이 투명배경 동영상 기능을 사용하면 기존에 있었던 품질 문제를 해결할 수 있습니다. 풍부한 투명배경 동영상 컬렉션은 전 세계의 전문 크리에이터들이 제작한 것으로 사용자 지정하여 웹사이트 어디에나 배치하여 개성을 더할 수 있습니다.

동영상이 들어간 윅스 웹사이트 이미지


동영상을 추가한 윅스 웹사이트 예시


04. 벡터 아트

웹사이트에 독특한 그래픽을 추가하는 것은 가장 기본적이고 효과적인 웹디자인 방식입니다. 그래픽 이미지를 삽입한다고 해서 품질이나 로딩 시간에 영향을 주는 것은 아니지만 웹디자인에 적절한 그래픽을 찾는 것은 어려울 때가 많습니다. 하지만 벡터 아트 기능을 사용하면 실질적으로 이러한 문제점들을 해결할 수 있습니다. SVG 형식의 파일을 사용하면 사용자들이 이미지의 사이즈를 필요에 따라 변경할 수 있고, 사이즈를 변경해도 고해상도를 유지할 수 있습니다.

원하는 대로 수정할 수도 있는 수천 개의 벡터 아트 파일이 준비되어 있으니 2021년의 웹디자인 트렌드에서는 기발한 일러스트를 많이 볼 수 있을 것으로 기대하고 있습니다. 맥시멀리즘 디자인을 선호하든 미니멀리즘 디자인을 선호하든 각 방식에 맞는 적합한 SVG 이미지 파일을 찾을 수 있을 것입니다. 그렇지 않다면 내가 직접 만든 이미지를 올리는 것도 좋은 방법입니다.



그래픽 아트를 이용한 윅스 웹사이트 이미지


그래픽 아트를 이용한 윅스의 웹사이트 예시


05. 도형 및 추상적인 디자인

추상적인 디자인과 다양한 도형은 올해의 웹디자인 트렌드에서 강한 영향력을 가질 것으로 예상됩니다. 도형은 너무 기본적인 것이라 디자인 요소의 하나로 볼 수 없다고 생각할 수도 있습니다. 하지만 기본 형태는 작은 시각적 장식 역할을 할 수 있습니다. 간단한 도형을 화면에 삽입하거나 혹은 색을 입혀 배경화면으로 사용하거나, 균형을 잡기 위해 도형을 추가할 수도 있고, 프레임 콘텐츠의 역할을 하거나 텍스트를 돋보이게 하기 위한 장식 요소로 활용할 수 있습니다.

비슷한 맥락에서 추상적인 일러스트들도 많은 주목을 받고 있습니다. 나만의 추상적인 디자인을 구상하고 웹사이트에 추가함으로써 독특하고 고유한 브랜드 아이덴티티를 더 굳건하게 할 수 있습니다. 브랜드 색상과 시각적인 스타일을 통합하고, 도형 및 추상적인 디자인을 활용하여 브랜드를 트렌드에 맞게 감각적으로 표현해보세요.



추상적인 이미지를 사용한 윅스 웹사이트 예시


도형과 기하학적무늬를 사용한 윅스 웹사이트 예시


06. 애니메이션

애니메이션은 최근 몇 년 동안 웹디자인에서 많이 쓰여진 디자인 요소이며, 이 인기는 앞으로도 이어질 것으로 보입니다. 그럴 법도 한 것이 웹디자인 애니메이션의 잠재성은 더욱 높아지고 있기 때문에 올해의 웹디자인 트렌드에서도 유용하게 활용될 수 있을 것입니다.

애니메이션은 단순한 정보를 제공하는 것보다 더 탁월한 사용자 경험을 제공할 수 있는데요. 애니메이션 효과를 적용한 선 또는 텍스트에서부터 배경 전체가 애니메이션인 효과에 이르기까지 웹사이트 방문자의 시선을 사로잡기에는 이만한 것이 없습니다.

웹디자인의 목표가 순수하게 심미적인 것일 수도 있지만 애니메이션 효과를 적용하면 사용자들이 특정한 행동을 하도록 유도할 수 있다는 점을 기억하세요. 애니메이션을 활용하여 사용자들이 관심을 가졌으면 하는 부분을 강조할 수 있습니다. 트리거 애니메이션이 한 가지 예시가 될 수 있는데요. 트리거 애니메이션은 사용자가 어떤 행동을 했을 때 요소의 색상, 모양 또는 속도와 같은 성질이 바뀌도록 만드는 것입니다. 트리거 애니메이션을 콜투액션(call-to-action) 버튼에 적용했다고 가정해보겠습니다. 사용자는 버튼의 고유한 애니메이션에 흥미를 느낄 때 해당 버튼을 클릭할 가능성이 높아집니다.



애니메이션 기술이 접목된 윕스 웹사이트 이미지

애니메이션 기술이 접목된 윅스 웹사이트 이미지

07. 블랙 및 파스텔 색상


요즘 사람들은 모니터 화면을 보는 데 많은 시간을 보내고 있습니다. 그렇기 때문에 2021년에는 더 많은 웹사이트 디자인들이 차분한 색상을 사용할 것으로 예상됩니다. 이런 트렌드를 따르기 위한 방법 중 하나는 파스텔 톤을 웹사이트 색상 배열에 적용하는 것입니다. 파스텔 톤의 차분한 분위기가 은은하게 보이는 효과를 가져와 사이트 방문자에게 섬세한 경험을 제공할 수 있습니다. 파스텔톤 계열에는 다양한 색상이 있기 때문에 아늑한 색상 조합을 만들어서 브랜드의 고유한 느낌을 살리는 데도 문제가 없을 것입니다.

한편 다른 일부 웹사이트들은 2021년에 파스텔 톤과는 다른 트렌드를 따를 것으로 보이는데요. 바로 블랙 계열의 색상을 혼합한 색상 배열을 적용하는 것입니다. 어두운 색상 배열을 적용한 웹사이트는 보통 세련되고 클래식한 분위기를 주는 것으로 생각되는데요. 2021년에는 단순히 색상이 주는 분위기만 주목받지는 않을 것입니다. 블랙 색상 계열은 파스텔 톤과 마찬가지로 눈에 더 편하기 때문에

블랙 앤 화이트 요소만을 사용하여 미니멀리즘 색상 배열로 웹사이트를 디자인하면 근사한 디자인을 적용하는 동시에 사용자들이 편하게 볼 수 있는 디자인을 완성할 수 있습니다. 또한 밝은 색상을 곳곳에 추가하면 사이트의 다양한 요소를 강조할 수도 있습니다.



블랙 색 조합을 이용한 윅스 웹사이트 이미지


파스텔 색감을 이용한 윅스 홈페이지 이미지


08. 접근성

접근성은 가능한 한 많은 사용자가 내 웹사이트를 사용하도록 만드는 방법입니다. 단순한 트렌드를 넘어 신체가 불편한 사람도 손쉽게 사용할 수 있는 웹사이트를 디자인하는 것은 그만큼 사용자를 고려하고 있다는 것을 보여줄 수 있는 방법입니다. 전 세계 거의 10억 명의 사람들이 웹 탐색을 위해 접근성 기능을 의존하고 있습니다. 그래서 그 어느 때보다 웹디자이너들은 사용자 경험 측면을 많이 고려하고 있죠.

디자인 관점에서 봤을 때 강하게 고대비 색상 배열, 큰 텍스트, 고해상도 이미지 등과 같은 다양한 시각적 요소를 적용하면 사용자들이 웹사이트를 쉽게 살펴볼 수 있습니다. 백 엔드 작업에서 대체 텍스트를 추가하면 앞을 잘 보지 못하는 사용자들에게 관련 정보를 제공할 수 있습니다.

웹사이트 디자인 설계를 하는 데 있어서 포괄적으로 하는 것이 도움이 됩니다. 예를 들어, 이미지들의 대체 텍스트 설명이 페이지 컨텍스트에 값을 추가하지 않으면 이미지 자체가 속하지 않는다는 신호일 수 있습니다. 이러한 방식으로 이미지를 재구성하면 페이지에서 표현하고자 하는 메시지를 더욱 강화할 수 있고 전반적인 사용성을 개선할 수 있습니다.



접근성을 높여 제작된 윅스 홈페이지 이미지

접근성을 고려하여 제작한 윅스 웹사이트 이미지


09. 스크롤 효과

2011년에 패럴랙스 스크롤 효과가 급부상한 이후로, 고정 스크롤 효과가 웹사이트를 얼마나 더 인터랙티브하게 할 수 있는지 알게 되었습니다. 디자인 트렌드는 10년 후를 향해 빠르게 나아가고 있으며, 사이트 방문자들에게 재밌고 세련된 브라우징 경험을 제공하고자 스크롤 효과의 기능은 더욱 확장되고 있습니다.

스크롤 효과에는 참여, 전환, 상호 작용이 포함되는데요. 각 작업들은 사이트의 다른 요소 및 다이내믹한 스크롤 효과의 결합으로 증폭될 수 있습니다. 스크롤 효과의 잠재성에는 이미지 확대 또는 축소, 수평 스크롤, 한 섹션에서 다른 섹션으로 넘어가는 전환 효과 등이 포함됩니다.

패럴랙스 스크롤 효과는 이 중에서 가장 유명한 것이기도 한데요. 이 기술은 사용자가 더 빠른 속도로 배경을 스크롤할 때, 배경의 속도를 늦추는 것으로, 3차원을 보는 듯한 착각을 일으킵니다. 디자인 트렌드를 따르면 자연스럽게 내 웹사이트가 지루한 곳이 되지 않을 것입니다.

“우리는 급진적인 변화의 시대에 살고 있으며, 인간의 본성은 디자인을 통해 우리를 개선하고 적응하도록 만들고 있습니다. 팬데믹이 초래한 새로운 생활방식은 아직 익숙하지 않지만, 우리가 삶을 살아가고, 생각하고, 소비하는 방식을 바꾸어 놓았습니다. 우리는 이제 인터넷에서 더 많은 시간을 보내고 있고, 온라인에서 존재감을 높이는 것은 더 경쟁적으로 변했습니다. 결과적으로 우리는 웹사이트를 제작하고, 생각하고, 계획하고, 경험하는 방법을 다시 설계해야 합니다.”


- 아디 후리(Adi Huri), 제품 마케팅 담당자, Wix 에디터



스크롤 효과를 적용한 아름다운 윅스 웹사이트 예시2


스크롤 효과를 적용한 아름다운 윅스 웹사이트 예시



Wix팀




홈페이지 만들기