웹 디자인에서 가장 중요한 노하우 6가지 2023

디자인 테크

2022. 09. 18

조회수

3,019

웹 디자인은 프리랜서 마켓에서 수요가 높은 분야 중 하나입니다. 기업은 자사의 웹사이트를 방문하는 고객 및 잠재 고객에게 더욱 편리한 온라인 경험을 제공함과 동시에 긍정적인 인상을 남기기 위해 투자를 아끼지 않기 때문이죠. 따라서 유능한 웹 디자이너라면 최신 트렌드에 정통해야 하며, 단순히 미적인 요소에만 집중할 것이 아니라 사용자의 경험을 향상할 수 있는 UX 측면에서 함께 접근해야 할 것입니다.

웹 디자인이란?

| 웹 디자인(Web design)의 정의

웹 디자인은 인터넷 웹사이트를 목적에 맞게 디자인하고, 구축 및 관리하는 것을 뜻합니다. 웹사이트의 외관, 레이아웃 또는 콘텐츠까지도 웹디자이너의 작업 범위에 포함됩니다. 외관은 사용된 색상, 글꼴 및 이미지와 관련이 있으며, 레이아웃은 정보가 구조화되고 분류되는 방법을 나타냅니다.

‘디자인'이라는 것은 단순히 심미적인 측면에서 아름답게 꾸미는 것만을 뜻하지 않습니다. 그와 동시에 사용자 경험 측면에서 편의성과 쾌적함을 제공할 수 있어야 하며, 기업 또는 브랜드 등 웹사이트 소유주에 대해 좋은 인상을 남길 수 있어야 합니다. 결국 사용자가 해당 웹사이트에서 원하는 정보를 쉽게 찾고, 브랜드에 대한 호감을 느껴야 기업에서 원하는 액션(거래, 캠페인 참여 등)을 취할 수 있기 때문이죠.

| 오늘날의 웹 디자인

데스크톱 & 모바일/태블릿

과거에는 웹 디자인에서 데스크톱 브라우저용 웹사이트를 디자인하는 데 중점을 두었습니다. 하지만 2010년대 중반 이후, 스마트 기기의 발명 및 보급으로 스마트폰 등을 사용해 웹사이트에 접속하는 방문자의 비율이 높아짐에 따라 모바일 및 태블릿 브라우저의 디자인이 점점 더 중요해지고 있습니다. 오늘날 많은 기업이 데스크톱과 모바일에서 모두 잘 작동하는 웹 사이트를 구축하는 것에 공을 들이는 이유죠.

반응형 vs. 적응형

데스크톱 및 모바일에서 잘 작동하는 웹 사이트를 디자인하는 가장 일반적인 방법에는 반응형 웹 디자인(Responsive web design, RWD)과 적응형 웹 디자인(Adaptive web design, AWD) 두 가지가 있습니다. 반응형으로 구축한 웹사이트는 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 콘텐츠의 화면 크기가 자동으로 변합니다. 반면, 적응형 웹 디자인에서는 웹 사이트 콘텐츠가 일반적인 화면 크기와 일치하는 레이아웃 크기로 고정됩니다.

웹 디자인 가이드라인 총정리

1. 심플하게!

불필요한 디자인 요소(기능 면에서 목적이 없는 것)가 많으면 방문자가 원하는 것을 달성하기 어렵습니다. 조작에 필요한 기능과 UX(사용자 경험)의 관점에서 ‘심플함’은 선택이 아닌 필수입니다. 페이지에 필요한 요소만 모두 갖추어져 있으면 됩니다. 그렇다면 어떻게?! 바로 다음의 사항을 지키면 됩니다!

Tips ❙ 심플한 웹 디자인을 위한 필수 법칙

색상 : 너무 많은 색상을 사용하지 않습니다. 최대 5가지 컬러(±2)를 사용하도록 권장합니다.
서체: 서체는 읽기 쉬워야 합니다. 너무 예술적이거나 알아보기 어려운 서체는 가독성을 해치므로 사용을 지양합니다. 폰트 컬러의 경우에도 최소한의 색상으로 유지하고, 눈에 잘 띄도록 배경색과 대비되는 색으로 선택합니다. 최대 3가지 종류의 폰트를 최대 3개 사이즈로 사용할 것을 권장합니다.
그래픽: 그래픽은 사용자가 특정 기능을 수행하거나 작업을 완료하는 데 도움이 되는 경우에만 사용합니다. (아무 목적 없이 추가하지 마세요)

2. 비주얼 계급도를 지키자

시각적 요소에도 계급이 있습니다! 즉, 어떤 것을 더 강조하고 싶은지 우선순위가 존재하며 방문자들에게 중요한 비주얼 요소들을 순서대로 배열하여 정돈하는 것입니다. 특정 요소의 위치, 색상 또는 크기를 조정하여 사용자가 해당 요소에 먼저 끌리도록 웹사이트를 구성할 수 있습니다. 이는 방문자가 브랜드(또는 웹사이트 오너)에서 원하는 액션을 취하도록 유도함과 동시에, 좋은 사용자 경험이 될 수 있도록 최적화하는 것이 목표입니다. 다음의 예시를 통해 비교해 볼까요?

예시 1) 프리미엄 카테고리의 랜딩 페이지 최상단에 회원가입 및 구독을 유도하는 CTA를 배치한 스포티파이

예시 2) 신제품을 강조하는 대형 이미지와 구매를 유도하는 CTA를 메인 페이지 최상단에 배치한 애플

3. 내비게이션은 쉽게

웹사이트 방문자가 원하는 것을 쉽게 찾을 수 있으려면 직관적인 내비게이션(navigation)을 디자인하는 것이 중요합니다. 예를 들어, 페이지에 방문한 사용자가 다음에 어디를 클릭해야할지 모르거나, 카테고리나 검색 필터 또는 검색창을 찾기 힘든 경우 등 모두 내비게이션이 불량한 것으로 구분됩니다. 방문자가 A 지점에서 B 지점으로 이동하는 데 걸림돌이 없도록 매끄러운 디자인을 설계하도록 합니다. 다음은 사이트 탐색을 최적화하기 위한 몇 가지 팁입니다.

기본 탐색구조를 단순하게 유지합니다. (추천 위치: 페이지 상단 부근)
사이트 최하단부(footer)에 내비게이션 바를 포함합니다.
모든 페이지(홈페이지 제외)에서 브레드크럼을 사용하는 것을 검토합니다.
사이트 상단에 검색창을 포함하면 방문자가 키워드로 검색할 수 있습니다.

참고 | 브레드크럼 (Breadcrumb)

웹페이지 상단에 앞서 방문한 페이지의 링크를 가로로 나열해 사용자가 이전의 특정 페이지로 손쉽게 들어갈 수 있도록 하는 기능. 이를 통해 유저는 웹사이트 내에서 자신의 현재 방문 위치를 파악할 수 있으며, 상위 카테고리의 페이지로 쉽게 이동할 수 있습니다.

4. 일관성을 유지하자

전체적인 외관과 느낌, 즉, “룩 앤드 필(look and feel)”이 웹사이트 내의 모든 페이지에서 비슷해야 합니다. 이는 가용성 및 UX(사용자 경험)에 긍정적인 영향을 미치는 영역으로 배경, 컬러, 서체, 심지어 글의 어조까지 일관성을 유지해야 합니다. 예를 들어, ‘도움말’ 페이지의 레이아웃을 통일하면 사용자는 해당 섹션 내의 다른 소 카테고리로 이동하더라도 페이지 내에서 필요한 정보가 어디에 위치하는지 쉽게 파악할 수 있습니다.

5. 대세는 반응형

Statista에 따르면, 오늘날 스마트폰이나 태블릿과 같은 모바일 기기에서 발생한 인터넷 트래픽이 전체 웹 트래픽의 약 55% 이상을 차지하며, 아시아 시장의 경우 웹 페이지 조회수에서 이보다 더 높은 수치를 기록했다고 합니다. 이러한 통계 자료가 시사하는 요점은 간단합니다. 고품질의 사용자 경험을 제공하려면 방문자가 사용하는 다양한 장치와 호환되어야 합니다!

콘텐츠의 사이즈가 자동으로 변경되어 방문자가 사용하고 있는 디바이스의 치수에 맞게 화면이 변경되는 ‘반응형 디자인’을 고려해 보세요. 이는 곧 유연한 웹사이트 구조를 제공함으로써 사용자 경험 최적화에 투자하는 것입니다!

6. 트렌드 감각을 유지하자

웹 디자이너라면 핵심이 되는 기본 정석을 숙지하면서도 최신 트렌드에 정통해야 하는데요. 다른 디자이너들로부터 영감을 얻고, 웹 디자인 트렌드에 대해 파악하고 있으면 다양한 고객과의 협업에서 경쟁력 있는 작업 결과를 제시할 수 있습니다. 인스피레이션을 위해 웹 디자이너가 참고할 만한 다음의 추천 사이트를 확인해 보세요.

웹 디자인 참고 사이트 BEST 5

1. GDWEB (https://www.gdweb.co.kr/main/)

지디웹은 웹/모바일 디자인 우수작품들을 선정 및 발표하고, 이를 영구적으로 보존하는 국내 사이트입니다.

2. Behance (https://www.behance.net/)

비핸스는 Adobe 계열의 포트폴리오 공유 서비스로, 세계에서 가장 큰 규모의 크리에이티브 커뮤니티 중 하나로 꼽힙니다. 전 세계 웹 디자이너들의 우수한 작품을 통해 영감을 얻고, 자신의 작품을 공유할 수 있습니다. 해외 사이트이지만 언어 설정을 한국어로 변경할 수 있습니다.

3. Dribble (https://dribbble.com/)

드리블 역시 전 세계의 디자이너와 에이전시가 이용하는 해외 사이트입니다. 마음에 드는 작품이 있다면 작가의 정보를 확인하여 소통이 가능한 디자인 소셜 네트워킹 및 포트폴리오 공유 사이트입니다!

4. Awwwards (https://www.awwwards.com/)

어워즈는 메인 페이지 상단에 ‘오늘의 사이트(Site of the Day)’를 소개하는 흥미로운 해외 디자인 사이트로, 한국어를 지원합니다. 웹 전문가 배심원을 선정하고 각 사이트의 디자인, 가용성, 창조성, 및 콘텐츠를 고려해 각 카테고리에 점수를 매긴 후 합계 점수를 계산하는 채점제도가 있습니다! 일반 커뮤니티 멤버의 스코어도 상세 페이지에 표시됩니다. 우수한 작품을 스포트라이트 하는 큐레이션 형식의 사이트를 찾는다면 참고해 보세요.

5. siteInspire (https://www.siteinspire.com/)

프리랜서 웹 디자이너라면 특정 산업이나 비즈니스 분야에 대한 영감이 필요할 수 있습니다. 거대한 웹사이트 라이브러리를 자랑하는 해외 사이트 ‘사이트 인스파이어’를 참고해 보세요. 광범위한 태깅(tagging) 시스템으로 원하는 작품을 쉽게 필터링하여 검색할 수 있습니다. 여러 태그를 동시에 사용하면 원하는 웹 인스피레이션 유형에 가까운 검색 결과를 얻을 수 있으며, 다양한 조합을 통해 흥미로운 결과를 얻을 수 있습니다.

이랜서에서 선정, 개발자라면 알아야 할 시간 절약 꿀팁 모음

톡톡 튀는 디자인, 무료 아이콘으로 완성해보세요!

▶️ 무료 아이콘 사이트 15개 모음 가이드(2023)

전략적인 기획안을 표현하기 위한 무료 PPT 템플릿이 필요하다면

▶️ PPT 템플릿 무료 사이트 Top5, PPT 디자인 걱정은 이제 그만!

색다른 폰트로 디자인 감성을 표현하고 싶다면, 무료 폰트 사이트를 찾아보세요!

▶️ 무료 폰트 사이트 11개 모음 가이드 (2023)

이랜서 추천, 프로젝트 완성도를 높이는 필수 리소스!

▶️ 애자일 조직 구축을 위해 꼭 필요한 5가지 요소

▶️ KPI란 무엇인가?(Feat. 기업의 성과관리, 목표설정법)

▶️ MVP로 비즈니스 아이디어를 성공시키는 방법