웹사이트 제작할 때 알아야 할 웹디자인의 모든 것

(*출처: PNT 머티리얼즈)

좋은 웹사이트 웹디자인이란?

1. 사업목적이 명확한 디자인

디자인은 순수미술의 영역과는 다르게 실용성을 필수로 여깁니다. 그래서 좋은 디자인을 하기 위해서는 반드시 갖추어야 하는 다섯 가지 요소를 살펴보도록 하겠습니다.

1) 심미성 

2) 목적성 

3) 경제성 

4) 독창성

5) 유용성

이 중에서 저는 목적성이 가장 중요한 요소라고 생각합니다. 웹사이트 특성상 사업의 성격과 목적이 뚜렷하게 드러나야 하기 때문입니다. 디자이너는 이를 정확히 파악하고 좋은 결과로 만들어 낼 수 있도록 첫 설계 단계에서 컨셉, 분위기, 이미지 등을 잘 선택하여야 합니다.

(*출처: 미모던피부과)

2. 정체성이 명확히 드러나는 디자인

정체성이란 본질을 깨닫는 성질 또는 그 성질을 가진 독립적 존재라는 뜻으로 ‘우리는 이러한 서비스를 만들고 상품을 만듭니다’라는 것을 나타내는 것입니다. 웹사이트는 경쟁사와는 다른 나만의 정체성을 표현하는 게 중요합니다. 그럼, 가장 중요하게 생각해야 하는 것은 의뢰인이 제시하는 ‘기업에 부합하는 이미지’가 아닐까요? 조금 더 자세히 알아보도록 하겠습니다.

1) 가독성

2) 컬러  

3) 스토리

첫째로 가독성, 말 그대로 가독성이 높은 디자인이 좋은 디자인입니다. 그렇다면 가독성을 올리기 위해서는 가장 중요한 건 ‘폰트’가 아닐까요? 폰트는 웹디자인뿐만 아니라 시각디자인 작업물, 기획서 등 다양한 곳에서도 중요한 요소로 정보전달에 있어서 가장 중요한 요소이기 때문입니다.

또한 디자이너와 의뢰인의 소통에서도 힘을 많이 들이는 게 폰트입니다. 의뢰인들은 ‘예쁜 폰트를 사용하면 예쁜 디자인이 된다, 혹은 글씨체가 굵고 크고 진하면 가독성이 높아진다’라고 생각하는 경우가 많은데 이 부분에 있어서는 강약 조절이 필수입니다.

둘째로 색감입니다. 색감은 한눈에 상표 인지도를 결정하는 데에 큰 역할을 합니다. 채도가 높은 노란색을 떠올리면 안전과 관련된 표지판이나, 어린이보호구역, 혹은 발랄한 이미지가 생각나고 푸릇한 초록색을 떠올리면 마음에 안정감을 주는 것처럼, 색채가 주는 이미지는 머릿속에서 이미지를 심어주기에 아주 선명하게 작용합니다.

디자인의 기초가 되는 작업을 할 때, 메인 색감을 정하는 것은 매우 중요합니다. 사업의 성격에 따라 중심 색상이 정해지며 대부분 브랜드 색감을 이용하여 디자인됩니다. 브랜드 컬러를 적절히 활용하여 브랜드의 이미지를 높여야 합니다. 컬러는 설계 단계에서부터 중요한 키포인트입니다. 브랜드 컬러에 포인트 색채가 필요하지만, 이 포인트 색채를 선택함에 있어서 신중할 필요가 있습니다.

세 번째로는 서사입니다. 웹사이트는 정보를 전달하는 시각물이기에 이야기 구성은 필수입니다. 시각적으로 명확하게 전달하는 바를 확인할 수 있도록 적절한 강약 조절과 한눈에 알아볼 수 있는 이미지 선택, 이미지를 여백과 일관성 있게 배치하는 것 또한 중요합니다.

(*출처: 왼 프레드 피자ㅣ오:에뛰드 글로벌)

좋은 웹디자인의 트렌드 및 예시

유행보다는 브랜드를 이해하는 디자인

디자인에 트렌드는 확실히 있습니다. 하지만 유행을 무작정 따라가기에 보다는 브랜드를 정확히 이해한 디자인이 가장 좋은 디자인입니다. 물론 브랜드를 이해했다고 해서 시대에 뒤처진 디자인을 하자는 것은 아닙니다. 브랜드를 이해하고 트렌드에 맞게 이용자에게 강한 인상을 남기는 것이 가장 중요합니다.

그래서 2024 웹디자인 트렌드 8가지를 알아보도록 하겠습니다. (*참조자료)

1. 벤토 그리드 레이아웃 (Bento Grid Layouts)

벤토 그리드 레이아웃은 새로운 것이 아닙니다. 그들은 수십 년 동안 존재해 왔으나 최근 애플의 온라인과 IOS에서 채택해 인기가 폭발적으로 증가했습니다. 벤토 그리드 레이아웃은 현대적이고 유쾌한 느낌을 줍니다. 또한, 그리드 형태이기 때문에 단순하여 사용하기 쉽습니다. 하나의 예시로, 아이폰 14 Pro와 애플카드를 표시하는 페이지에 벤토 그리드 레이아웃을 사용하기로 한 애플의 결정은 인기를 더욱 높였습니다.

2. 플루이드 레이아웃 (Fluid Layouts)

플루이드 레이아웃은 완전히 확장할 수 있는 ‘유동적인' 디자인입니다. 웹사이트가 사용자의 뷰포트(*실제 이용자가 볼 수 있는 웹페이지 화면)에 비례하여 확장되므로 장비에 구애받지 않고 일관된 경험을 보장합니다. 디자인 측면에서 더 이상 픽셀 기반을 사용하지 않고 백분율을 사용하는 것을 의미합니다. 그리드 내 요소는 비례적으로 조정되므로 레이아웃이 다양한 크기에 맞게 조정됩니다. 이는 웹사이트가 모든 기기에서 더 멋지게 보이도록 하는 가장 효과적인 방법인데요, Galaxy Z Fold와 같은 접이식 화면이 있는 스마트폰과 같은 새로운 디바이스가 등장함에 따라 방문자가 사용하는 디바이스와 관계없이 웹사이트가 완벽하게 반응하도록 하는 것이 중요해졌습니다.

3. AI 생성 이미지 (AI-Generated Imagery)

AI가 생성한 이미지의 유행은 향후 몇 년 안에 폭발적으로 증가할 것입니다. 이는 웹사이트 디자인과 이미지에 큰 영향을 미치는데요, 이러한 추세는 2023년 3월 ‘MidJourney V5 출시’와 함께 시작되었으며 AI 이미지 생성 도구가 지속해서 개선됨에 따라 더욱 속도를 낼 것으로 예상됩니다. ‘Dalle-3’는 현재 알파버전으로 출시되었으며 2023년 Open-AI 구독자들에게 출시되었습니다.

아래는 AI가 생성한 이미지의 예시입니다. 이미 현실주의의 정점에 이르렀기 때문에 곧 구별이 불가능해질 수도 있습니다. 그러나 여기에는 윤리적인 문제가 있습니다. 그럼에도 AI 이미지가 2024년 주요 트렌드로 여겨지는 건 부정할 수 없는 사실입니다. 사용이 간편한 것은 물론이며 과거 평면적인 디자인에 의존했던 웹사이트가 이제는 이미지를 사용할 가능성이 더 높아졌다는 것을 의미하는데요. 또한, AI 생성 비디오도 지난 1년 동안 AI 이미지와 동일한 방식으로 개선되기 시작하여 비디오 및 애니메이션 콘텐츠의 사용이 증가할 것으로 예상됩니다.

3. 접근성에 대한 새로운 초점 (Renewed focus on accessibility)

웹사이트 접근성은 새로운 것이 아니지만, 올해 동안 새로운 개발이 이루어지면서 웹사이트 접근성이 어느 때보다 더 많은 관심을 받고 있습니다. 웹사이트가 다양한 수준의 접근성에 도달하기 위해 공식 요구사항을 명시하는데요, 최근 WCAG2.2에 대한 지침을 업데이트한 표준입니다. 웹 콘텐츠 접근성 지침(WCAG)은 웹 접근성을 확보하기 위한 국제 표준으로, 다양한 장애를 가진 사용자들이 웹 사이트에 쉽게 접근하고 이용할 수 있는 가이드라인이라고 보면 됩니다. WCAG는 4가지 원칙, 13가지 지침, 78가지 성공 기준으로 구성되어 있습니다.

영국에서는 모든 공공부문 웹사이트가 2018년부터 WCAG AA 접근성 표준을 준수해야 합니다. WCAG지침이 업데이트됨에 따라 웹 디자인 팀도 2024년에 접근성을 새롭게 고려하고 이전보다 더 접근성이 좋은 웹사이트를 구축할 것으로 예상됩니다.

4. 레트로/노스탤지어 (Retro/Nostalgia)

패션은 주기적으로 움직이며, 현재는 90년대 초반 트렌드가 의도적으로 레트로 스타일로서 연출되기도 합니다. 웹디자인도 예외는 아닙니다. 일부 웹사이트는 90년대 또는 2000년대의 흐름을 디자인에 적용하고 있습니다. 예를 들어, 노팅엄 컨템포러리 아트 갤러리는 새로운 웹사이트에 레트로 향수를 불러일으키는 90년대풍 디자인을 선보였습니다. 재미있고 기발하며, 다른 사람들과 차별화된 디자인으로 트렌드는 예측할 수 없고 항상 한 방향으로만 가는 것은 아니라는 것을 보여주기도 합니다.

5. 대형 타이포그래피 히어로 이미지 (Large Typographic Hero Images)

‘히어로 이미지'는 웹디자인에서 하나의 강력한 이미지로서 제품을 선보이는 방법입니다. 아티스트 Martine Syms의 웹사이트는 방문자에게 강렬한 인상을 주기 위해 히어로 이미지 대신 초대형 타이포그래피를 사용했다. ‘Numiko’는 영웅 이미지 대신 초대형 타이포그래피를 사용하고 타이포그래피를 마스크로 사용하여 마스크 된 비디오를 추가하는 자체 웹사이트에 이 트렌드를 적용했습니다.

6. 마이크로인터렉션 (Microinteractions)

웹디자인의 마이크로인터렉션은 사용자 참여와 경험을 향상하는데 상호작용을 하는 요소입니다. 피드백을 제공하고 사용자 행동을 안내하며 로딩 표시, 양식 유효 검사, 게임화와 같은 다양한 기능을 제공합니다.

이러한 작은 디자인 요소는 브랜드 아이덴티티에 중요한 역할을 하며 웹사이트와 디지털 애플리케이션에서 사용자 만족도와 유용성에 기여합니다. 상호작용 자체는 상태 변경을 나타내는 버튼의 단순한 애니메이션일 수 있지만 이러한 작은 움직임 요소는 웹사이트에 생기를 불어넣는 데 도움이 됩니다.

7. 굵고 맞춤형 타이포그래피(Bold and Custom Typography)

굵은 타이포는 크고 인상적인 글꼴을 사용하는 것이 특징입니다. 즉각적으로 시선을 끌고 시각적 계층을 구축하며, 상표 인지도를 전달하는 역할을 합니다. 이러한 추세는 가독성을 높이고 디바이스 반응형에 잘 적응하며 미니멀리스트 디자인 원칙을 보완한다. 디자이너는 창의적인 표현을 위해 맞춤형 글꼴을 사용하는 경우가 많으며 애니메이션 및 상호작용과 결합하면 매력적인 웹사이트를 만들 수 있습니다. 그러나 포괄적인 사용자 경험을 보장하려면 접근성을 고려해야 합니다.

오랫동안 타이포그래피 트렌드는 단순성을 강조했고, 세리프체는 사라졌으며 헬베티카를 가장 많이 사용했으나 지금은 상황이 달라졌습니다. 세리프가 돌아왔고 디자이너들은 더 눈에 띄기 위해 흔하지 않은 글꼴을 사용하여 타이포그래피를 더욱 창의적으로 사용하고 있습니다. 전자상거래 상점 aiaiai는 타이포그래피 기반 디자인을 사용해 많은 사람 사이에서 눈에 띄는 웹사이트를 만들었습니다.

시선을 사로잡는 웹디자인의 특징

웹디자인이란 이야기를 전달하는 것

디자인은 시각적으로 이야기를 전달하는 것입니다. 디자인하다 보면 열심히 하더라도 주목받는 디자인을 만들어 내기는 쉽지 않습니다. 그 이유는 내가 생각하는 좋은 디자인과 객관적으로 모두가 좋아하는 디자인은 명확한 차이가 있기 때문입니다. 그렇다면 객관적으로 모두가 좋아하는 디자인을 만들기 위해서는 어떠한 것이 필요할까요?

1. 조화로움

2. 일관성

디자인이 필요한 이유는 정확한 메시지를 전달하기 위함입니다. 화려하게 꾸미고 좋은 것을 모두 넣었다고 해서 정확한 메시지를 전달할 수 없습니다. 그래서 정확하게 메시지를 전하고 전체적인 조화로움을 이뤄야 합니다. TPO가 중요하듯 브랜드와 맞지 않는 웹사이트는 적절한 디자인이 아닙니다. 또한, 부분마다 아무리 좋은 디자인을 했다고 하더라도 그 부분들이 합쳐져 하나가 된다면 과연 좋은 디자인일까요? 일관성 없는 디자인은 따로 보기에 아름다울지 몰라도 시선을 고정하기 힘들 것입니다.

웹디자인, 크몽 서비스가 필요한 이유

어떤 사업을 하든 더 신경 써야 하는 나만의 업무가 있습니다. 사업의 수익 측면과 같이 집중해야 하는 것들이 많은데 웹디자인이라는 사소한 걱정거리까지 떠안게 되고 사내 직원을 고용해 이를 해결하려 한다면 프로젝트가 끝나고 난 뒤 이 직원의 거취도 문제가 됩니다.

이러한 문제점들을 전문 서비스 크몽을 이용한다면 수많은 전문적이고 경험이 많은 웹 디자이너들에게 접근이 가능합니다. 또한 크몽 서비스를 이용해 제작할 경우 동일한 양과 동일한 작업에 대해 더 적은 비용으로 작업이 가능하며 크몽서비서의 디자이너들은 항상 UIUX 트렌드 기술을 업데이트하고자 노력하기에 기업은 훌륭한 포트폴리오를 가진 사람이나 팀을 고용할 수 있습니다.

마지막으로 누구나 홈페이지를 만들 수는 있지만 사용자들의 관심을 끌 수 있는 홈페이지를 만든다는 것은 어려운 일입니다. 고객에 대한 서비스 제공으로, 기업의 이미지 증진을 위한 홍보 수단으로, 마케팅을 통한 판매증진의 수단으로 사용되는 홈페이지에 웹디자이너는 필수적인 역할을 담당합니다.

시간과 공간에 제약이 없다는 장점으로 웹사이트는 필요하며, 수많은 웹사이트가 쏟아지면서 정보뿐만 아니라 세련된 디자인이 강조되면서 디자이너의 역량은 더욱 중요해지고 있습니다. ‘이럴 때 정말 필요한 건 크몽 서비스가 아닐까?’라는 생각해 봅니다.

staccatovivace

프리랜서 히어로(크몽 블로그 필진)

원하는 맞춤형 디자인해 드립니다.

디자인 뿐아니라 웹퍼블리싱까지.

저렴하고 고퀄리티의 홈페이지를 보장합니다.