디자인 트렌드 사이트 - dijain teulendeu saiteu

웹디자인 매니아들이 업계를 발전시킬 트렌드가 무엇이며 어떤 트렌드가 지는지 평가하는 한 해의 흥미로운 시기가 다시 도래했습니다.

"WOW(Wix 시각 혁신 팀)의 크리에이티브 프로덕트 매니저인 아디 후리(Adi Huri)는 "올해에는 새로운 웹디자인 트렌드가 불러 일으키는 추진력을 막을 수가 없다."라고 말합니다. 아디는 우리가 2022년에는 어떤 트렌드가 떠오를 것인지 논의할 때 이렇게 말하며 더 많은 것들을 설명했습니다.

3D 디자인 요소를 이용한 실험, 높아지는 애니메이션에 대한 의존도, 오래된 미학의 개편 등을 볼 수 있을 것으로 기대합니다. 하지만 트렌드의 가속도가 한 발 앞서는 동안 오늘날의 웹사이트 디자인은 브라우징 경험에도 동일한 조명을 비추는 요소에 대한 전부라고 할 수 있습니다.

2022년 웹디자인 트렌드 TOP 10

매일 50만 개의 새로운 사이트가 온라인에 생겨납니다. 그렇다면 2022년에 여러분이 웹사이트를 제작할 때 내 사이트가 돋보이게 하기 위해서는 어떻게 해야 할까요? 아래에 소개하는 웹디자인 트렌드는 아디와 제가 올해 여러분이 웹사이트 제작에 창의력을 발휘할 수 있는 방법을 보여드리고자 직접 고른 것입니다.

1. 깔끔한 디자인

2. 대칭 레이아웃

3. 세리프 & 얇은 타이포그래피

4. 차분한 원색(네온 색상으로 포인트 주기)

5. 현실적인 사람들의 이미지

6. 3D 모션 요소

7. 초현실적 시각 요소 조합

8. 흐림 효과

9. 메쉬 그라데이션

10. 놀라운 인터랙션

01. 깔끔한 디자인

한 줄 요약: 2021년의 맥시멀리즘을 정리하고 있습니다.

올해의 웹디자인 트렌드는 맥시멀리즘과 같은 번잡한 개념을 밀어낼 것입니다. 2021년에는 맥시멀리즘이 성행했지만 이제 우리는 미니멀리즘적인 특성과 더불어 섬세한 시각적 요소에 무게를 둔 웹사이트를 강조하려고 합니다.

그렇다고 해서 이를 완전한 미니멀리즘 그 자체로 오해하지는 마세요.

아디는 이것이 예전에 유행하던 미니멀리즘과 다르다고 말합니다. "2022년은 웹디자인의 역동성을 유지하면서도 날렵함이 중요하기 때문에 올해에는 복잡하 것을 모두 치우려고 합니다." 우리는 웹이 더 정교하면서도 덜 복잡하고 더 원활한 브라우징 환경을 목표로 하는 정교한 효과를 여전히 기대할 수 있을 것이라고 예상하고 있습니다.

이에 덧붙여서 아디는 "우리는 블랙 앤 화이트의 미니멀리즘에 익숙하지만 이제는 'Less is more(적을수록 더 좋다)' 개념에 색상이 포함된다는 것을 알 수 있을 것입니다. 지저분한 층을 제거하고 대담한 디자인에 사고를 주입함으로써 콘텐츠의 본질을 깊게 파고드는 웹사이트들이 남을 것입니다."

02. 대칭 레이아웃

한 줄 요약: 대칭이 전부입니다.

한 가지는 확실합니다 훌륭한 웹사이트를 제작하려면 조화로운 구성이 필요합니다. 디자인 원칙에 따르면 균형은 대칭 또는 비대칭 웹사이트 레이아웃을 사용한 두 가지 방식으로 이루어질 수 있다고 합니다. 지난 해 유기적인 혼돈에 대한 집착으로 비대칭 디자인이 인기가 있었던 반면에 올해의 웹사이트 레이아웃 테마는 단순함입니다.

다빈치의 비트루비안 맨 처럼 2022년의 웹디자인 트렌드는 완벽하게 대칭적인 균형을 이끌어낼 것입니다. 페이지 분할 및 그리드 레이아웃에서 부터 이미지 또는 텍스트를 이용한 균형적인 디자인에 이르기까지 말이죠.

"대칭 웹사이트 레이아웃은 의도적인 공간에 관심을 끌 수 있게 해주는데 이것이 대칭 레이아웃이 유행하는 하나의 이유"라고 아디는 덧붙였습니다. "예를 들어, 웹페이지가 하나는 비주얼 블록, 다른 하나는 텍스트 블록인 두 개의 콘텐츠 블록으로 나뉘어 있다면 이는 포커스를 분할하여 완전한 이야기를 들려줄 수 있는 깔끔한 방법입니다."

이러한 트렌드와 관련하여 디자이너들은 웹사이트 콘텐츠를 나누기 위해 섬세한 요소들에 관심을 가질 것입니다. 아디는 덧붙여서, "얇은 라인이 섹션, 메뉴, 화면을 분할하는 것을 볼 수 있을 것입니다. 이는 질서를 만드는 방법으로 일반적으로 깔끔한 디자인을 지향하는 움직임과 관련이 있습니다." 라고 말했습니다.

03. 세리프 & 얇은 타이포그래피

한 줄 요약: 중요한 단어는 굵게 표시하되 타이포그래피는 정교하게.

현대적인 분위기에 걸맞은 세리프 글꼴은 2022년 웹디자인 트렌드로 자리잡고 있습니다. 타이포그래피 체계에서 세리프 서체는 Times New Roman, Garamond, Georgia와 같이 글자 획의 끝에 돌출선이 있는 서체입니다.

주위를 둘러보면 우리는 세리프 서체를 사용하여 우아함을 강조하는 수많은 브랜드들을 확인할 수 있습니다. 인쇄물을 연상시키는 세리프 서체에는 유형적인 측면도 있기 때문에 올해의 디자인 트렌드 목록에 클래식한 분위기를 가져왔습니다.

미니멀리즘 트렌드에 발맞추어 아디는 세리프 외에도 더 많은 디자이너들이 얇은 타이포그래피를 디자인에 적용하고 있다고 설명합니다. "텍스트 사이즈는 크지만 정교합니다. 다채로운 미니멀리즘이라는 컨셉에 맞게 올해는 색상과 서체 선택에서 전혀 새로운 대담함이 등장할 것입니다."

아디는 이러한 트렌드에서 더 나아가 "많은 웹사이트 디자이너들이 미적 경험의 균형을 맞추기 위해 이미지 또는 배경 위에 얇은 서체를 사용하여 한 단어 또는 한 구절로 웹사이트의 전체 폴드를 대신할 것."이라고 설명합니다.

04. 차분한 원색(네온 색상으로 포인트 주기)

한 줄 요약: 지속가능성은 트렌드와 색상에 영향을 미칩니다.

자연이 다시 유행하고 있으며 원색의 유행도 다시 돌아왔습니다. 올해 웹디자인 트렌드에 미묘한 분위기를 가져오며 땅에서 영감을 받은 웹사이트 색상 배열이 2022년에 등장하고 있습니다.

지속가능성에 대한 문화적 강조의 영향을 받아 우리는 자연 자형 디자인에 대한 전반적인 초점을 보게 될 것입니다. "사회의 지속가능성 추구 및 기후 보존은 웹디자인 산업에도 스며들었습니다. 우리가 기대하는 것은 자연에서 영감을 얻은 색상과 기본 원색을 혼합하여 조화를 이루는 것입니다."라고 아디는 말합니다.

그럼에도 불구하고 우리는 여전히 21세기를 위한 디자인을 하고 있음을 상기시킵니다. 스타일리시한 네온 색상 계열과 혼합하여 일류의 미학이 되지는 않지만 소소한 재미 요소를 더해준다고 하는데요. "예를 들어, 메뉴의 네온 색상 아이콘이나 구성을 돋보이게 하는 작은 형형색색의 라인들과 같이 밝은 강조를 볼 수 있습니다. 그래도 2022년에는 여전히 모든 것이 섬세하며 차분할 것입니다."

05. 현실적인 사람들의 이미지

한 줄 요약: 이제는 실제 이미지를 사용할 때입니다.

아름다움에 대한 이상적 기준은 10년마다 바뀝니다. 문화, 역사, 사회에서 영감을 받아 2022년에는 웹에 새로운 표준이 등장했음이 명백합니다. 바로 다양성이죠.

아디는 "포용성은 웹디자인 세계의 안팎에서 뉴노멀로 자리 잡았습니다. 더 많은 브랜드에서 다양한 배경, 인종, 연령대를 표현하며 포용성을 강조하는 이미지를 사용하고 있습니다."라고 말합니다.

우리는 이것이 웹에 정상적인 지각을 가져다준다는 점에서 매우 기쁘게 생각합니다. 새로운 표준들은 모든 사람들에게 반향을 불러일으키고 2022년의 웹사이트는 LGBTQ+ 공동체와 더불어 장애인, 노인, 다양한 피부 톤 및 체형을 가진 개인들을 대표하는 이미지를 포함해야 합니다.

아디는 "우리는 이것이 지난 몇 년 간 업계의 중요한 부분이 되었다는 것을 알 수 있습니다."라고 주장합니다. "하지만 공식적으로 규정에 명시되어 있습니다. 우리는 쇼와 광고에 모델이나 전문가가 아닌 현실적인 사람들을 데려오는 많은 패션 하우스와 주요 브랜드들을 볼 수 있습니다."

고객 또는 고객의 친구, 가족과 유사한 현실적인 인물의 이미지를 사용함으로써 브랜드는 공감대를 형성할 수 있습니다. 특히 온라인 쇼핑몰의 경우, 이러한 웹디자인 트렌드를 적용하면 더 많은 사람들이 여러분의 제품을 사용하는 스스로의 모습을 상상할 수 있기 때문에 현명한 브랜딩 결정이라고 할 수 있습니다.

06. 3D 모션 요소

한 줄 요약: 모든 웹사이트는 그들만의 고유한 3D 개체를 가질 자격이 있습니다.

이미 지난 해에 엄청난 인기를 누렸음에도 불구하고 아디는 3D 요소의 트렌드가 아직 최고조에 달하지는 않았다고 말합니다. 텍스트 구성 요소 및 추상적인 시각 요소에서 부터 투명배경 동영상에 이르기까지 모든 영역을 아우르는 3D요 요소는 자체 디자인 요소로 사용되어 아주 특이한 효과를 나타낼 수 있습니다.

이것이 발전된 트렌드입니다. 2021년에 맥시멀리즘 아이디어에 대한 과장 광고의 결과로 다양한 스타일의 모션 요소와 투명배경 동영상을 사용하는 웹디자인이 나타났습니다. 하지만 2022년에는 모션이 3D 시각 요소의 대명사가 될 것이며 더 정교하게 적용될 것입니다.

"우리는 이러한 요소를 사용하여 미니멀리즘에 우위를 두고 있습니다."라고 아디는 목록에 있는 다른 웹디자인 트렌드와 관련하여 말합니다. "3D 요소를 적용한 투명배경 동영상과 미니멀리즘 웹사이트의 깔끔한 기능을 제대로 결합하면 놀라운 효과를 얻을 수 있을 것입니다."

Yonson의 웹디자인 예시

07. 초현실적 시각 요소 조합

한 줄 요약: 시각 요소는 우리를 다른 차원으로 데려갈 것입니다.

많은 웹사이트가 2022년에는 완전히 비범하지 않은 것을 만들어 낼 것이며 초현실적인 시각 요소 조합의 놀라운 효과를 추구할 것입니다. 우주 속 온라인 쇼핑몰, 이상한 시각 환경 등 달리 스타일의 상상력을 발휘해보세요.

이러한 '다른 차원'의 구성은 방문객의 시선을 사로잡고 디자인에서 놓칠 수 있는 주요한 잠재력을 가지고 있습니다. 우리는 최근에 이러한 트렌드를 사설로 발전시키고 있는 대형 패션 하우스에서 이를 발견했습니다. 훌륭한 예시는 아래의 Balenciaga의 22SS 캠페인으로 인상적인 창의력으로 브랜드의 컬렉션을 더욱 돋보이게 합니다.

웹디자인에 이를 어떻게 적용할 것인가를 고민하던 아디는 이러한 트렌드에 대해서 "꼭 동영상이어야 할 필요는 없다. 이러한 초현실적인 경험은 사이트에 생생한 이미지를 사용하고 인터랙션과 결합하여 예상치 못한 인상을 만들어 냄으로써 생성할 수 있습니다."라고 말합니다.

하지만 이 웹디자인 트렌드는 모두가 적용할 수 있는 것은 아니라고 말하며 다음과 같이 덧붙였습니다.

"이는 그야말로 부가적인 것이고 모두에게 적합한 것은 아닐 것입니다. 정말 고급스럽거나 세련된 브랜드는 초현실주의 트렌드의 혜택을 받을 수 있겠지만 매우 섬세하고 정교하게 다뤄져야 합니다."

08. 흐림 효과

한 줄 요약: 흐릿한 레이어를 추가하는 것이 올해의 웹디자인 트렌드입니다.

흐릿한 요소는 다양한 곳에서 사용되고 있으며 이러한 다양성으로 인해 떠오르는 웹디자인 트렌드로 자리잡고 있습니다. 시각적인 부분을 흐리게 하거나 이미지를 늘리거나 글래스모피즘 효과를 적용하는 등 흐림 효과의 강도는 다양하며 구성에 혼합되는 미묘한 뜻밖의 효과를 더할 수 있습니다.

아디는 이러한 트렌드에 대해 뭐라고 말해야 할까요? "웹디자인에서 보이는 것과 보이지 않는 것을 조절할 수 있는 능력이 바로 이러한 효과를 매력적으로 만듭니다. 트렌드를 통해 강조할 부분을 강조하면서도 다른 요소를 모호하게 만들어 흐릿하게 만들 수 있습니다.

또한 다음과 같이 덧붙였는데요. "이 효과를 적용하면 웹사이트 디자인에 정교한 차원을 더할 수 있으며 모험을 즐기는 웹디자이너라면 색상과 함께 사용하여 수준은 한 단계 더 높일 수 있습니다."

09. 메쉬 그라데이션

한 줄 요약: 더 나은 버전의 그라디언트가 만들어지고 있다는 것부터 알아 두세요.

포스터, 로고 디자인 및 웹사이트 배경 등의 인쇄 및 디지털 디자인 전반에 걸쳐 돋보이는 그라데이션은 영원한 트렌드입니다. 여러 가지 색상과 왜곡을 하나의 구성으로 혼합하는 이 다재 다능한 효과를 적용하는 웹 상의 브랜드들은 엣지있는 느낌을 자아낼 수 있습니다.

그라데이션 디자인은 90년대의 미학에 근간을 두고 있지만 아디가 짚었듯이 Wix는 2022년의 트렌드에 맞추어 '메쉬(Mesh)'라는 새로운 디자인을 내놓을 것입니다. -

"한 때 메쉬는 직접 커스텀 코딩을 해야만 적용할 수 있었지만 인쇄물, 포스터, 패션 전반에 걸쳐 이것을 본 후 우리는 메쉬에 푹 빠졌습니다. 저희는 혁신적인 방식으로 Wix의 모든 사용자들이 메쉬를 활용할 수 있도록 하고 싶습니다. 이러한 시각적 효과를 만드는 것은 커스텀 코딩으로만 가능하며 오프라인 디자인 소프트웨어에서 제공하는 기능이지만 저희가 웹사이트 구축 플랫폼에서 최초로 제공할 예정입니다."

그래서 메쉬란 무엇일까요? "그리드가 그물망으로 되어있고 그 그물망의 모든 지점에 특정 색상이 지정되어 있다고 상상해 보세요."라고 아디는 말합니다. "메쉬의 매력은 이렇게 색상을 지정한 지점들을 혼합할 수 있다는 것입니다." 자유로운 형태의 대응물과는 달리 메쉬 그라데이션은 더 계산적인 방식으로 적용됩니다.

10. 놀라운 인터랙션

한 줄 요약: 승리를 위한 인터랙티브 웹사이트.

'스크롤리텔링'에서부터 사이트 방문자의 행동에 반응하는 애니메이션 효과까지 웹사이트 인터랙션을 사용하는 것보다 더 원활한 사이트를 구축하는 좋은 방법은 없습니다. 2022년에는 많은 웹사이트 디자이너들이 움직이는 효과를 주목을 끌기 위한 도구로 사용한 것으로 보이지만 진정으로 트렌디한 것은 애니메이션을 사용하여 미니멀하면서도 예상하지 못한 웹디자인을 구축하는 것입니다.

아디는 예를 들어 이렇게 설명합니다. "정보는 방문자가 마우스를 올려서 드러나게 할 때까지 특정 시각 요소 뒤에 숨길 수 있습니다." 이러한 '숨바꼭질' 놀이는 웹사이트의 깔끔한 레이아웃과 정보를 유지하면서도 놀라운 효과를 나타낼 수 있습니다.

아디는 2021년에 취했던 'More is more(많을수록 좋다)' 접근법에서 벗어나 올해에는 이것이 인터랙션의 주요 목적이라고 지적합니다. "페이지들은 계속해서 더 미니멀하지만 역동적이고 부드럽게 발전할 것입니다. 애니메이션 보급에 있어서도 움직임이 깔끔하고 정보를 쉽게 소비하는 것을 목표로 할 것입니다."

Molton Brown의 웹디자인 예시

By 조윤정

SEO & 블로그 전문가