모던 웹사이트 디자인 요소 11가지
여러분도 이미 아시다시피 깔끔하고 모던한 분위기의 디자인을 적용한 전문 웹사이트는 방문자에게 강렬한 첫인상을 남기는데요. 모던 웹사이트 디자인 요소는 트렌디하고 세련되며 오늘날의 사용자들에 맞게 조정될 수 있습니다. 즉, 깔끔하고 보기 좋은 웹사이트 경험을 선사하는 기능을 포함하는 것입니다.
온라인으로 18억 8천 개의 사이트가 운영되고 있는 오늘날의 디지털 세상에서 웹사이트 디자인이 돋보이기 위해서는 훌륭한 사용자 경험과 최신 트렌드에 맞는 시각 요소들을 포함하는 것이 필수입니다. 웹상에서 사람들의 마음을 완전히 사로잡고 Wix 웹사이트 어워드에서 우승한 Dopple Press처럼 말이죠.
그럼 이제부터 모던한 웹사이트 디자인을 하는 방법을 알아볼까요? 이 글에서 우리는 모던 웹사이트 요소의 이점을 살펴보고 Wix에서 제작한 모범 사례 및 예시를 살펴보겠습니다.
모던 웹사이트 디자인이란 무엇이고 왜 이것을 선택해야 할까요?
모던 웹 디자인이란 트렌드 요소 및 디자인 원칙을 활용하여 미적 품질과 사용성을 강조한 웹 디자인입니다. 2000년대 초기의 오래된 웹사이트가 어떤 모습인지 상상해 보세요. 해상도가 낮은 스톡 이미지와 Comic Sans 글꼴을 포함한 웹사이트를 떠올릴 수 있을 것입니다. 그리고 모던 웹사이트는 그 정반대라고 할 수 있지요.
여러분이 비즈니스를 시작하든, 기존의 브랜드를 리브랜딩하든 혹은 단순히 사이트를 새롭게 재편성하든, 세련되고 트렌디하며 전문적인 분위기가 특징인 모던 웹사이트 디자인으로 사이트를 최적화한다면 다음과 같은 이점들을 얻는 데 도움이 될 것입니다.
모던 웹사이트 디자인 요소
영감을 얻어 내 사이트에서 직접 실행에 옮길 수 있는 11가지 일반적인 모던 웹사이트 디자인 요소는 다음과 같습니다. 여기에는 훌륭한 최신 디자인 기능 일부를 성공적으로 적용한 Wix에서 제작한 라이브 사이트가 포함되어 있습니다.
01. 여백
여백은 사이트 구조를 아우르는 모던 웹사이트 디자인 관행입니다. 여백을 통해 페이지의 콘텐츠 간에는 시각적 계층구조가 생깁니다.
이미지, 글 콘텐츠, CTA(콜투액션)와 같은 시각 요소들 간의 순서를 구분하게 해주는 여백을 활용하면 사용자가 내 사이트의 핵심 부분에 주목하도록 유도할 수 있습니다. 여백의 색상은 반드시 흰색일 필요는 없으며, 여백을 적절하게 배치만 잘 한다면 다양한 색상으로 이러한 모던 효과를 꾀할 수 있습니다.
Festela 의류 컬렉션은 사이트에 여백을 완벽하게 적용한 좋은 사례가 됩니다. 웹사이트 배경의 여백은 기업명, 형형색색의 타이포그래피 및 고해상도의 깔끔한 이미지가 가운데에 배치되도록 함으로써 모던한 분위기를 자아냅니다.
02. 스크롤 효과
멈춰 있는 정적인 섹션에 이별을 고할 때가 된 것 같습니다.
독특한 스크롤 효과를 통해 깔끔한 디자인 위로 인터랙티브한 브라우징 경험을 제공할 수 있습니다. 패럴랙스 스크롤 효과와 같은 움직임과 매끄러운 흐름의 통합은 재미 요소와 모던한 퀄리티를 더해주며, 방문자가 사이트에서 더 많은 부분을 탐색하도록 유도합니다.
다음은 Wix 에디터를 통해 적용할 수 있는 다양한 유형의 스크롤 효과입니다.
패럴랙스 스크롤: 사이트에서 스크롤을 내리면 배경이 변합니다. Ivy Chen의 사이트가 좋은 예입니다.
스크롤 트리거 애니메이션: 스크롤하면 애니메이션이 나타나지만 나머지는 동일하게 유지됩니다.
가로 스크롤: 페이지가 아래가 아닌 오른쪽 또는 왼쪽으로 움직입니다.
롱 스크롤: 한 페이지 내에서 평소보다 더 긴 기간 동안 스크롤합니다.
무한 스크롤: 페이지가 고리처럼 형성되어 아래로 스크롤하면 결국 상단에서 다시 시작하게 됩니다.
03. 대담한 색상
대담하고 밝으며 다채로운 색상은 모던 웹사이트의 핵심 요소입니다. 반드시 내 브랜드의 톤에 어울리는 웹사이트 색상 구성표를 선택하세요. 특정 색상은 특정한 감정을 불러일으킬 수 있다는 점을 기억하세요. 예를 들어, 파란색은 확신, 안도감, 신뢰할 수 있는 권위와 연관이 있기 때문에 SNS 업계의 많은 브랜드가 파란색을 브랜드 색상으로 선택합니다.
망설이지 마세요. 관심을 확 끌 수 있는 것이라면 뭐든지 시도해 보세요. 그것이 바로 모던 웹사이트 디자인입니다. Mariela Mezquita는 대담한 오렌지 색상의 배경 색상을 적용하여 지적인 위험을 감수하고, 디자인에 도형을 효과적으로 사용했습니다. 그리고 상단에는 산세리프 글꼴을 더하여 깔끔한 모던 디자인을 완성했습니다.
04. 대형 타이포그래피
웹사이트에 사용자가 방문한 즉시 커다란 텍스트로 따뜻한 환영의 인사를 건네세요. 매혹적인 레터링 스타일을 활용하여 모던한 감성을 손쉽게 더할 수 있습니다. 오늘날의 수많은 웹디자이너가 사이트의 특징을 나타내는 한 단어 또는 구문으로 웹사이트 최 상단 부분의 전체를 덮을 것입니다. 이렇게 하면 텍스트가 가장 처음 주목을 받을 수 있고, 처음 방문하는 사용자에게 컨텍스트를 제공할 수 있습니다.
Tiffany Cruz의 포트폴리오 웹사이트에 있는 트렌디한 세리프 글꼴과 같이 내 사이트를 경쟁업체의 사이트와 차별화할 수 있는 독특한 글꼴을 선택할 수도 있을 것입니다. 홈페이지의 첫 번째 폴드 전체를 Tiffany의 이름으로 가득 채움으로써 그녀의 웹사이트라는 것을 강력하고 명확하게 나타냅니다. 타이틀이 작고 사이트의 공간을 덜 차지했던 2000년대 초기와는 확연하게 다릅니다.
05. 기기 간의 일관성
전 세계 웹 트래픽의 절반이 모바일 기기에서 발생하기 때문에 데스크톱 전용 사이트를 제작하는 것은 한 물 간 관행입니다. 모던 사이트의 핵심은 깔끔하고 사용자 친화적인 모바일 웹사이트에 대한 사용자들의 기대치를 충족하는 것입니다. 웹사이트 소유주의 목표는 기기의 유형에 관계없이 사용자 경험을 일관되게 유지하는 것입니다.
기본 Wix 모바일 에디터를 사용하면 웹사이트의 모바일뷰를 최적화할 수 있으므로 코딩 기술이 없어도 어느 기기에서도 사이트가 보기 좋도록 제작할 수 있습니다. 적절한 예시: 헤어 제품 라인인 Babe Formula는 모바일과 데스크톱 모두에서 동일하고 일관성 있게 탐색이 용이한 모던 웹사이트 디자인을 적용했습니다. 아래에서 볼 수 있듯이 두 버전 모두에서 이미지와 섹션이 정렬되어 있어 동일하게 전문적이면서도 친근한 사용자 경험을 선사합니다.
06. 모션
애니메이션 웹 디자인으로도 알려진 모션은 방문자가 클릭하거나 스크롤하거나 마우스를 올렸을 때 사이트를 더 인터랙티브하게 만들어주는 모던 웹사이트 디자인 요소입니다. 사람의 눈은 움직임을 추구하고 행동에 집중하는 경향이 있기 때문에 모션 요소는 의심할 여지없이 눈길을 사로잡습니다. 대체로 애니메이션과 모션은 발랄한 분위기를 자아냄으로써 사람들이 웹사이트에서 더 많은 시간을 머무르도록 하는 정교한 기능입니다.
다음은 모던 웹사이트 디자인의 일부로 애니메이션을 추가하는 방법에 대한 몇 가지 아이디어입니다.
장난스러운 커서 또는 버튼 추가: 피자 레스토랑 웹사이트라면 커서를 피자 한 조각으로 바꿀 수 있을 것입니다(마우스오버 상자 효과를 활용하여 변경 가능).
회전 이미지: 여행사 웹사이트라면 다양한 여행지 이미지를 포함한 휴가 패키지를 보여주거나 Jennifer Xiao 웹사이트에서처럼 단순히 아이콘이 위로 튀어나온 것처럼 보이게 만들 수 있습니다.
회전 이동 요소: 온라인 쇼핑몰에서 ‘구매’ 버튼을 클릭하면 개체가 움직여서 장바구니로 들어갈 수 있습니다.
내비게이션 메뉴 애니메이션: 메뉴에 있는 다양한 항목은 한 식품 마케팅 사이트의 한 입 베어 문 버튼처럼 마우스를 가져다 대면 변경됩니다.
3D 모션: 3D 이동 요소를 추가하는 데 관심이 있으시다면 Wix의 투명배경 동영상 도구를 사용하여 이러한 유형의 모션을 사이트에 추가할 수 있습니다.
Extraweg의 크리에이티브 웹사이트는 3D 웹디자인 트렌드를 중점적으로 활용했습니다. 아티스트인 Oliver Latta는 자신의 홈페이지에서 애니메이션 3D 비주얼을 나타냅니다. 이를 통해 웹사이트 그래픽에 깊이와 음영을 더하고 모던한 수준의 상호작용을 더했습니다.
07. 미니멀리즘
모던 웹사이트 디자인에서도 ‘적을수록 더 좋다(less is more)’가 적용됩니다. 화려한 기능이 없는 미니멀리즘 디자인을 선택하는 것이 때로는 더 안전한 디자인 방법이 될 수 있으며, 더 전문적으로 보일 수도 있습니다. 방해 요소가 거의 없이 가장 관련성이 높은 요소만 깔끔하고 미니멀하게 더한 웹사이트에서는 방문자가 핵심 요소들을 더 쉽게 찾을 수 있습니다.
벽지 데코 쇼핑몰인 Maco Wallshop은 밝은 톤의 뉴트럴톤 색상과 더불어 미니멀한 디자인을 적용했습니다. 사이트에 어수선한 요소들이나 작은 텍스트가 없기 때문에 미니멀하면서도 모던한 느낌을 줍니다.
08. 깔끔한 웹사이트 레이아웃
응집력 있는 시각적 경험을 구축하는 것은 모던 웹 디자인의 일부입니다. 오늘날 많은 크리에이티브가 실험적인 비대칭 디자인을 활용하지만 고전적인 대칭 웹사이트 레이아웃을 활용하면 콘텐츠를 깔끔하고 조직적인 구조로 분할할 수 있습니다.
이러한 레이아웃에는 다음과 같이 2가지의 아이디어가 있습니다.
카드 형태 레이아웃은 포트폴리오 웹사이트에 적합한데요. 콜라주와 조금 비슷한 이 레이아웃은 탐색이 간단하고 화면 전체에 일관성이 유지되며 모든 이미지를 작은 크기로 만듭니다.
카드 형태 웹 디자인을 활용한 Blanca Mora의 일러스트 포트폴리오 웹사이트를 확인하실 수 있습니다. Blanca의 놀라운 모든 작품은 직사각형 틀 안에서 빛을 발하는 고유한 순간을 가지면서도 서로 보완함으로써 모던하고 응집력 있는 웹 경험을 선사합니다.
화면 분할 레이아웃은 사용자가 효과적으로 탐색할 수 있게 만듭니다. 이러한 인터페이스 레이아웃은 홈페이지를 2개 이상의 수직 부분으로 분할하여 특징이 있는 하위 페이지의 탐색 환경을 빠르게 만듭니다.
예를 들어, Loukaa의 화면 분할의 한 쪽에는 ‘Shop Women’ 버튼에 있고 다른 한 쪽에는 ‘Shop Kids’ 버튼이 있습니다. 대부분의 사용자가 이 두 가지 작업을 수행하기 위해 사이트에 방문한다는 사실을 알고 있기 때문에 그 의도에 따라 사이트를 디자인하는 것이 모던한 디자인 선택입니다.
09. 명확한 내비게이션
웹사이트 내비게이션에는 웹사이트 링크 및 메뉴 구성이 포함됩니다. 내비게이션 메뉴는 서로 다른 페이지 간의 연결과 방문자가 페이지를 얼마나 손쉽게 찾을 수 있는지에 영향을 줍니다. 모던 사회에서 사람들은 사이트의 A 지점에서 B 지점으로 이동하는 방법을 간소화하려고 할 것입니다. 직관적이지 않은 사이트에 머무를 남는 시간이 있는 사람은 없기 때문이죠.
반려견 목줄 쇼핑몰인 Hound Squad는 메뉴 드롭다운 기능과 같은 웹사이트 내비게이션 모범 사례를 적용했습니다. 둘째, 로고에 링크를 걸어 홈페이지를 연결함으로써 방문자가 쉽게 첫 페이지로 돌아갈 수 있도록 했습니다. 이는 메뉴 정리가 덜 되어 지나치에 옵션이 복잡했던 과거의 웹사이트와는 다릅니다.
10. 홈페이지 동영상
검색 엔진 최적화(SEO)의 측면에서 보면 ‘동영상을 활용하는 것은 웹사이트의 유기적인 검색 트래픽을 157%까지 증가’시키며 ‘사이트에 동영상을 포함한 경우, Google의 검색 결과 첫 페이지에 노출될 확률이 53배 더 높습니다’ 이것만으로 충분하지 않나요? 동영상은 모던 웹사이트 디자인 측면에서도 도움이 됩니다. 동영상은 텍스트보다 처리가 더 빠르기 때문에 결과적으로 더 적은 단어로 많은 것을 말할 수 있습니다.
Five Field의 모던하고 우아한 레스토랑 동영상은 사이트 방문자가 도착하기 전에 레스토랑에서 만끽할 수 있는 것들을 ‘맛보기’ 할 수 있게 해줍니다. 동영상이나 모션 이미지가 없는 과거의 웹사이트와는 달리 모던 웹사이트에서 동영상은 천 마디 말의 가치가 있습니다. 다양한 동영상을 홈페이지 최상단 폴드에 배치하여 레스토랑 외관과 요리에 사용하는 최고의 재료를 보여줍니다.
11. 고해상도 이미지
우리는 긴 텍스트를 읽는 것보다 비주얼적인 측면이 더 중요한 세계에 살고 있습니다. 웹 디자인에 매력적인 이미지를 포함하면 모던한 느낌을 원하는 고객들의 관심을 끌 수 있고 많은 설명이 없어도 제품을 잘 나타낼 수 있습니다.
고해상도 이미지를 활용할 때에는 무엇을 고려해야 할까요? 좋은 조명에서 촬영한 고품질 사진에는 흥미로운 이야기가 담겨 있습니다. 인물이 없는 제품 이미지라도 배치 장소, 촬영 방식 및 주변 소품들을 통해 이를 보는 방문자에게 메시지를 전달할 수 있습니다.
프랑스풍 의류 라인인 Hors-D’œuvre는 고품질 이미지를 활용하여 웹사이트 디자인에 활기를 불어넣었습니다. 사진은 다양한 각도 및 거리에서 촬영되어 모던한 경험을 향상시킵니다. 가장 중요한 것은 다양한 이미지를 통해 방문자가 의류를 구매하기 전에 실제 느낌을 상상해 볼 수 있다는 것입니다.
By 조윤정
SEO & 블로그 전문가
