2020년 주목해야 할 웹 디자인 트렌드 7가지



수시로 울리는 푸시 알림과 갑자기 떠오르는 팝업창에 정신을 빼앗겨 하려던 일을 깜빡한 경험, 한 번쯤 있으시죠? PC에서나 모바일에서나 우리의 관심을 끌기 위한 경쟁은 점점 치열해지고 있습니다. 이에 따라 올해는 직관적이고 명료한 사용자 인터페이스를 강조한 웹 디자인이 각광받을 것으로 예상됩니다. 자, 2020년에 주목해야 할 웹 디자인 트렌드 7가지를 알아보고, 웹사이트를 제작할 때 최신 트렌드를 어떻게 적용하면 좋을지 고민해보세요.


2020년 웹 디자인 트렌드 Top 7

  1. 오버사이즈 활자와 요소

  2. 화면 분할 레이아웃

  3. 단색 블록

  4. 여백의 미

  5. 그리드와 창의 노출

  6. 여러 겹으로 겹치는 레이어

  7. 모션과 상호작용성

01. 오버사이즈 활자와 요소(Oversized type and elements)

웹 사이트 방문자와 명확하고 즉각적인 의사소통을 하기 위해서는 눈에 잘 띄는 오버사이즈 디자인이 효과적입니다. 오버사이즈 트렌드는 크고 굵은 타이포그래피에서부터 전체 화면 이미지 및 동영상, 메뉴 아이콘까지 모든 요소에 적용될 수 있습니다. 오버사이즈 요소는 사이트 방문자의 시선을 사로잡으며, 방문자가 사이트 내용을 직관적으로 이해할 수 있도록 도와줍니다. 또한, 화면 크기와는 상관없이 모든 기기에서 잘 보이죠. 다만, 오버사이즈 요소를 돋보이게 하려면 한 페이지에 디자인 요소를 너무 많이 넣지 않도록 주의해야 합니다. 그렇지 않으면 방문자에게 피로감을 줍니다.

적용 꿀팁> 웹사이트 첫 화면을 큼직한 타이포그래피와 함께 전체 화면 이미지 또는 동영상으로 구성해 보세요. 이 레이아웃은 사이트 방문자에게 메시지를 분명하게 전달할 수 있는 힘을 가지고 있습니다.





02. 화면 분할 레이아웃(Split screen content)

전달할 메시지는 2개 이상인데 주어진 화면은 하나일 때, 어떻게 하면 좋을까요? 답은 간단합니다. 화면 정중앙을 반으로 나누면 됩니다. 깔끔한 룩을 유지한 채 2개 이상의 콘텐츠를 효과적으로 전달할 수 있죠. 다시 말해, 화면 분할 레이아웃은 사각형의 화면을 2개의 영역으로 나누는 것입니다. 여기에 약간의 재미를 더하고 싶다면, 스크롤 효과를 넣어 반으로 나뉜 각 화면이 서로 다른 속도로 움직이게 만들어보세요. 적용 꿀팁> 분할된 디자인에 시각적 계층 구조를 만들기 위해서는 두 영역이 만나는 화면 중앙에 추가 요소를 배치하세요. 로고, 클릭 유도(CTA) 버튼 및 메뉴 헤더(Header)를 추가 요소로 활용하면, 여기로 초점이 맞춰지면서 화면의 균형을 잡아주는 역할을 합니다 .





03. 단색 블록(Solid color blocks)

화면 분할 유행이 계속되면서 일부 웹 사이트에서는 단색 블록(색상으로 구분되는 서로 다른 크기의 정사각형 및 직사각형)을 이용해 컨텐츠를 더 많은 부분으로 나누려는 시도를 보여줍니다. 이 룩은 여러 메시지를 한 번에 응집력 있는 방식으로 표현할 때 빛을 발합니다. 예를 들어 섹션마다 사진이나 짧은 몇 줄의 텍스트를 넣으면, 사이트 방문자가 각 정보를 한눈에 쉽게 소화할 수 있습니다. 구성을 좀 더 흥미롭게 만들려면 웹사이트의 색상 배합(color scheme)에서 다양한 음영을 선택하여 블록의 색을 다채롭게 입혀보세요. 적용 꿀팁> 직관적이고 이해하기 쉬운 디자인 연출을 원한다면 색상 블록의 구성을 일관성 있게 유지하세요. 마구잡이식의 콜라주처럼 보이지 않으려면 색상 블록이 서로 깔끔하게 정렬됐는지(그리드가 유용하게 사용될 수 있음), 각기 다른 시각 효과로 서로를 보완하고 있는지를 반드시 확인해야 합니다.





04. 여백의 미(Plenty of whitespace)

디자인 용어로 여백을 '화이트 스페이스' 또는 '네거티브 스페이스'라 합니다. 즉 디자인 요소 사이의 빈 공간을 의미합니다. 텍스트 줄이나 열 사이의 간격, 시각 요소 및 페이지의 주변 공간을 가리키는 마진도 여백에 포함됩니다.


여백은 사이트 페이지나 화면에 넓고 균형 잡힌 느낌을 줍니다. 흰색이 가장 일반적이긴 하지만 다른 배경색으로도 여백을 구성할 수 있습니다. 언뜻 빈 공간으로 남겨진 여백이 비효율적인 공간 낭비로 보일 수 있지만, 여백이 지닌 힘을 잘 모르기 때문에 드는 생각. 여백은 텍스트의 가독성을 높여주고, 클릭 유도(CTA) 문구 같은 중요 요소를 강조하는 데 탁월합니다. 또한, 독립적인 섹션을 분리하면서 전체적으로 깔끔하고 세련된 모습을 만들어냅니다.

적용 꿀팁> 항상 중요한 디자인 원칙으로 여겨져 온 여백은 2020년에는 더 강조되고, 도드라질 것으로 보입니다. 특히 다채롭고, 과감한 오버사이즈 비주얼들 간 조화를 이루기 위해서는 여백이 반드시 활용돼야 합니다.




05. 그리드와 창의 노출(Exposed grid and windows)

최근 웹 디자인은 기술 자체에서 영감을 얻고 있습니다. 통상적으로 그리드와 그 가이드라인은 표면에 드러나지 않는 작업으로 여겨졌으나 오늘날 웹 디자이너들은 화면 분할과 블록 구성을 강조하면서 그리드와 창을 과감하게 노출하고 있습니다. 팝업창, 브라우저 창을 연상시키는 해당 룩은 이질감 없이 페이지 자체의 일부분으로 보이기까지 합니다. 이는 우리가 친숙하게 느끼는 형태를 상기시키며, 컴퓨터 초기 시절을 참조한 재치 있는 디자인으로 콘텐츠를 유쾌하게 전달하는 매력을 발산합니다.

적용 꿀팁> 직사각형, 획, 가는 선은 화면을 여러 섹션으로 분리하는데 사용되며, 방문자의 눈길을 의도하는 방향으로 유도하기에 좋습니다. 훑어읽기(Skim reading)가 요구되는 곳에 해당 트렌드를 구현해 보세요.





06. 여러 겹으로 겹치는 레이어(Overlapping layers)

웹 페이지 내에서 여러 요소를​ 레이어링 하는 것은 밋밋한 2D 화면에 깊이를 더해주는 매력적인 방법입니다. 레이어 효과는 시각적 요소를 서로 겹치게 쌓아 부분적으로 보이지 않게 하거나, 클릭 시 또 다른 콘텐츠가 떠오르게 하는 것으로 이루어집니다. 해당 룩은 겹겹이 쌓인 요소들로 시각적인 풍부함을 주지만 자칫하면 정신없어 보일 수 있습니다. 하지만 잘 구현한다면 질서 있고 보기 좋은 결과물이 완성될 겁니다.

적용 꿀팁> 라이트박스패럴랙스 스크롤 효과를 사용하거나 이미지 혹은 텍스트를 서로 겹치게 배치하는 방법을 시도해보세요.


07. 모션과 상호작용성(Motion and interactivity)

동영상과 애니메이션은 웹에서 전혀 새로운 것이 아닙니다. 그러나 모션은 사이트 방문자의 관심을 끌 수 있는 확실한 방법임에 틀림없습니다. 특히 콘텐츠에 흥미를 잃어가는 사람들을 타깃으로 할 때 그 역할을 톡톡히 해냅니다. 우리는 본능적으로 움직이는 요소에 시선을 빼앗기며, 이 생물학적 사실은 방문자가 페이지를 인식하는 방식을 제어하는 데 활용될 수 있기 때문입니다. 현재 웹 디자인 세계에는 여러 형태의 모션이 존재합니다. 마우스를 올려놓거나 클릭할 때 피드백을 주는 마이크로 애니메이션부터 화면을 가로지르는 타이포그래피, 투명배경 동영상 또는 전체 화면 동영상 헤더에 이르기까지 다양합니다. 적용 꿀팁> 모션과 상호작용성 트렌드를 효과적으로 활용하려면 방문자의 이목을 내 사이트 어느 영역에 가장 집중시키고 싶은지 고려해보세요. 모션을 잘못 사용하면 오히려 산만하게 보입니다. 그러므로 사이트의 스토리텔링을 강화할 수 있는 전략적인 장소에만 배치하는 것이 좋습니다 .





By Wix 팀






홈페이지 만들기