디자인 기술 없이 웹사이트 레이아웃과 디자인하는 방법

클라이언트를 위한 프리랜스 웹사이트를 제작하거나 자신의 포트폴리오를 쌓으려고 할 때, 누구나 한 번쯤 마주치는 고민이 있습니다.

"웹 디자인 기술이 없는데 대체 어떻게 웹사이트를 만들 수 있을까?"

일반적으로 생각할 수 있는 선택지는 다음과 같습니다:

• 웹 디자이너를 고용해 디자인을 맡긴다 — 하지만 실력 있는 디자이너는 결코 저렴하지 않습니다.
• Fiverr이나 Upwork에서 저렴한 디자이너를 찾는다 — 하지만 품질 면에서 위험이 따를 수 있습니다.
• 무료 또는 유료 테마·템플릿을 다운로드한다 — 하지만 원하는 기능을 전부 지원하지 않는 경우가 많습니다.

또 하나의 방법은 웹사이트 레이아웃과 디자인의 기본기를 직접 배워서 프런트엔드를 스스로 완성하는 것입니다.

물론 이 글을 읽는 짧은 시간 안에 훌륭한 디자이너가 되지는 못합니다. 복잡한 웹사이트라면 전문 디자이너와 협업해야 할 수도 있습니다.

하지만 대부분의 소규모 비즈니스에 충분히 어울리는 간단한 웹사이트를 스스로 기획하고 디자인하는 능력은 충분히 익힐 수 있다고 믿습니다.

이 방법의 핵심은 두 가지입니다:

• 웹사이트가 시각적으로 어떻게 구성되는지 기본 원리를 익히고,
• 기존의 웹 디자인 사례를 조사해 영감과 아이디어를 얻는 것.

실제로 필자가 Coder Coder 웹사이트를 만들 때 사용한 전략이 바로 이것입니다. 물론 화려한 디자인은 아니고 꽤 심플한 편이지만, 때로는 심플함만으로도 충분합니다.

웹 레이아웃과 디자인의 기본을 알게 되면, 포트폴리오용이든 클라이언트 작업용이든 커스텀 웹사이트를 직접 만들 수 있게 됩니다.

그리고 무엇보다, 만드는 웹사이트 하나하나가 곧 경험이 됩니다. 꾸준히 연습하다 보면 점점 더 복잡하고 세련된 디자인도 만들어낼 수 있게 됩니다.

이 과정의 주요 단계는 다음과 같습니다:

• 웹사이트의 기본 방향 정하기
• 웹사이트 레이아웃 계획하기
• 디자인 요소 확정하기
• 최종 결과물 제작하기

모든 단계는 '리서치'에서 출발합니다. 다른 웹사이트들이 어떻게 구성되어 있는지 살펴보고, 내 사이트에 활용할 만한 요소들을 추려내는 것이죠.

중요한 당부 하나: 남의 CSS나 이미지를 몰래 가져다 쓰라고 권하는 게 아닙니다. (애초에 복사-붙여넣기로는 아무것도 배울 수 없습니다.) 여기서 말하는 것은 창의적인 아이디어와 컨셉을 얻어, 이를 참고해 나만의 결과물을 만들어내는 것입니다.

1단계: 웹사이트의 기본 방향 정하기

색상이나 폰트를 고르기 전에, 먼저 웹사이트에 대한 근본적인 질문들에 답해야 합니다.

① 어떤 비즈니스를 위한 웹사이트인가?

피자 가게일까요, 사진 스튜디오일까요, 서점일까요? 어떤 종류의 비즈니스든 웹사이트가 있다면 도움이 되므로 무엇이든 좋습니다.

이 글에서는 'Central Coffee'라는 가상의 커피숍으로 정해보겠습니다. 커피를 좋아하지 않는 사람은 없으니까요!

② 어떤 페이지가 필요한가?

일반적으로 홈페이지, 소개(About) 페이지, 연락처(Contact) 페이지, 그리고 해당 업종 특성에 맞는 페이지들이 필요합니다.

필요한 페이지와 전체적인 구조를 파악하는 가장 좋은 방법은 온라인에서 빠르게 리서치를 해보는 것입니다.

2단계: 기존 웹사이트 조사하기

같은 업종의 기존 웹사이트들을 찾아보세요. 3~4개 정도의 사이트를 살펴보며 어떤 페이지들이 있는지 확인합니다.

사이트가 어떻게 디자인되었는지 관찰하며 다음 사항들을 메모해 보세요.

• 어떤 페이지들로 구성되어 있는지
• 전체적인 스타일은 어떤지
• 탐색과 정보 검색이 얼마나 쉬운지
• 그 외 흥미를 끄는 요소가 있는지

예시 사이트를 찾기 좋은 곳 중 하나는 Theme Forest입니다. 무료·유료 웹사이트 템플릿과 WordPress 테마가 정말 많습니다. 인기 테마 위주로 살펴보면, 대체로 잘 만들어진 디자인 사례들을 접할 수 있습니다.

제가 발견한 테마 중 하나의 커피숍 예시입니다.

The7

페이지:
원페이지 사이트로, Home / About / Location / Offers / Menu / News / Press / Blog Posts 섹션으로 구성

스타일:
모던하고 깔끔하며, 사진 퀄리티가 좋음

탐색성:
메뉴 탐색이 쉬움

그리고 "시카고 커피숍"으로 검색해서 찾은 실제 웹사이트들입니다.

The Wormhole Coffee

페이지:
홈페이지, 블로그, 위치/연락처, 채용 정보

스타일:
현대적인 편이며, 매장 사진들은 좀 더 감성적·추억을 자극하는 분위기

탐색성:
커피숍이라는 점이 처음에는 잘 드러나지 않고, 사이트 탐색이 다소 어려움

Caffe Streets

페이지:
원페이지 사이트로, Home / Caffe(소개) / Menu / Roasting / Time Machine(주스) / 문의 폼 섹션으로 구성

스타일:
심플하고 모던함 (Squarespace 제작)

탐색성:
탐색이 매우 쉬움. 상단 고정(sticky) 메뉴바를 누르면 해당 섹션으로 스크롤되는 점이 특히 마음에 듦

Build Coffee

페이지:
원페이지 사이트로, Homepage / About / Hours / Location / Shop / Catering / Events / Contact 섹션으로 구성

스타일:
심플하며, 흰 배경 텍스트 섹션 사이사이에 풀와이드(full-width) 사진을 배치한 구성

탐색성:
탐색이 꽤 쉬움

Sawada Coffee

페이지:
Homepage / About / Food & Drink / Press / Contact & Hours / Our Restaurants / Jobs

스타일:
사진 중심의 디자인으로, 텍스트는 부수적인 요소처럼 느껴짐

탐색성:
탐색이 다소 어려움. 오른쪽 상단 모서리의 햄버거 메뉴를 거의 놓칠 뻔했음

3단계: 내 웹사이트를 위한 메모 정리하기

여러 커피숍 웹사이트를 살펴보고 나면, 어떤 요소들이 공통적으로 사용되는지 훨씬 잘 파악하게 됩니다. 무엇이 효과적이고 무엇이 그렇지 않은지에 대한 감도 생기죠.

리서치 결과를 바탕으로, 이제 내 사이트를 위한 메모를 정리해 봅시다.

Central Coffee는 심플한 원페이지 사이트로 가고, 다음과 같은 섹션 구성을 선택했습니다.

• Header(헤더)
• Home(홈)
• About(소개)
• Menu(메뉴)
• Location/Contact(위치/연락처)
• Footer(푸터)

4단계: 웹사이트 레이아웃 계획하기

사이트의 뼈대를 정했으니, 이제 각 페이지·섹션에 들어갈 요소들을 구체화해야 합니다. 이렇게 만드는 레이아웃 초안을 와이어프레임(wireframe)이라고 부릅니다.

와이어프레임 단계에서는 아직 디자인 자체를 하는 것이 아닙니다. 폰트, 색상, 사진 같은 것은 일절 없습니다. 어떤 콘텐츠를 넣을지, 그리고 그것이 페이지의 어느 위치에 대략적으로 들어갈지만 정하는 단계입니다. 이 시점에서는 설계도나 도면에 가깝다고 생각하면 됩니다.

Header(헤더)

Seven Coffee 데모 페이지와 Caffe Streets 사이트에 있는 상단 내비게이션 바가 마음에 듭니다.

다만 두 사이트 모두 내비게이션이 가운데 정렬되어 있는데, 저는 로고를 맨 앞에 두고 섹션 메뉴가 뒤따르는 좌측 정렬을 선호합니다.

이것은 데스크톱 버전 기준입니다. 태블릿과 모바일에서는 기본적으로 로고와 햄버거 메뉴만 헤더에 표시됩니다.

햄버거 메뉴를 클릭하면 오른쪽에서 슬라이드되어 나오는 오프캔버스(off-canvas) 메뉴가 열리고, 섹션 내비게이션을 확인할 수 있게 됩니다.

Home(홈)

원페이지 사이트이므로 '홈페이지'란 웹사이트를 불러왔을 때 화면에 처음 보이는 부분입니다. Seven Coffee처럼 이름 아래에 짧은 태그라인을 넣는 방식이 좋았습니다.

여기서는 Build Coffee처럼 배경에 이미지를 넣고 그 위에 텍스트를 올리는 형태로 하겠습니다. 데스크톱과 모바일 모두 동일하게 적용됩니다.

About(소개)

조사한 모든 사이트에 짧은 소개 섹션이 있었고, 일부는 사진도 함께 넣고 있었습니다. 카페에 대한 한 단락의 소개글과 함께 매장 내부 사진 몇 장을 넣어, 방문하고 싶은 마음을 불러일 계획입니다.

Menu(메뉴)

각 사이트마다 메뉴를 처리하는 방식이 달랐습니다.

• Seven Coffee는 가격이 표시된 메뉴 아이템 그리드를 사용,
• Caffe Streets는 아이템 목록만 나열,
• Build와 Sawada는 PDF 메뉴판으로 연결.

개인적으로 모바일에서 웹사이트를 둘러보다가 PDF를 다운로드해야 하는 상황은 싫습니다. 그래서 음료와 음식 아이템을 담은 간소화된 메뉴를 직접 페이지에 넣고, 사진 몇 장도 함께 추가하기로 했습니다.

Location/Contact(위치/연락처)

위치, 영업시간, 연락처 정보는 웹사이트 맨 아래에 배치하고 싶습니다. 사용자는 보통 사이트 최상단에서 시작해 아래로 스크롤해 내려오기 때문입니다.

행동 유도(Call to Action) 요소를 맨 아래에 배치하면 "그래서 지금 뭘 해야 하지?"라는 질문에 답해 줍니다. 방문자가 실질적인 행동, 즉 카페까지의 길찾기를 하고 방문까지 이어지도록 돕는 것이죠.

Footer(푸터)

푸터는 최대한 미니멀하게 갑니다. 저작권 정보만 담은 작은 바(bar)면 충분합니다.

5단계: 완전한 와이어프레임 만들기

아래는 웹사이트의 데스크톱 버전과 모바일 버전에 대한 완성된 와이어프레임입니다. Mockflow라는 무료 온라인 툴로 제작했는데, 프로젝트 하나는 무료로 만들 수 있고 그 이상이 필요하면 유료 플랜을 이용하면 됩니다.

사용법이 꽤 쉽고, 손그림(sketchy) 스타일 옵션이 재미있어서 개인적으로 좋아합니다 🙂

(썸네일을 클릭하면 새 탭에서 전체 이미지를 볼 수 있습니다.)

6단계: 기본 디자인 사양 정하기

역시 여기서도 지나치게 디테일하고 화려한 스타일을 만들 필요는 없습니다. 다만 기본적인 사항들은 정해야 합니다.

컬러 팔레트

컬러 팔레트란 웹사이트에서 사용할 색상들의 조합을 말합니다. 집을 꾸미는 것에 비유하면 이해하기 쉽습니다. 대부분의 공간에는 회색이나 흰색 같은 뉴트럴 톤을 쓰고, 링크나 버튼처럼 돋보여야 하는 중요한 요소에는 밝은 포인트 컬러 한두 가지를 사용하는 것이 일반적입니다.

컬러 영감이 필요하다면 Canva에서 샘플 컬러 팔레트를 체험해 볼 수 있습니다.

Central Coffee 웹사이트에는 앞서 소개한 Canva 링크의 'Fall Collection(가을 컬렉션)' 팔레트를 사용하겠습니다. 브라운 톤을 기반으로 한 따뜻한 색감의 팔레트입니다.

커피숍을 떠올리게 하는 그 추억 같고 아늑한 분위기를 연출하고 싶기 때문입니다.

폰트

조사했던 사이트들을 다시 훑어보면, 거의 모든 사이트가 산세리프(sans-serif) 폰트를 사용합니다. 타이포그래피 용어로 세리프란 글자 끝에 붙는 장식 선을 의미하는데, 산세리프는 이 장식이 없는 깔끔한 서체를 말합니다. 본문 대부분에는 심플한 폰트를 선택하고, 제목과 헤드라인에는 굵은 굵기(weight)의 폰트로 약간의 변화를 주는 것이 좋습니다.

Google Fonts는 웹사이트에 무료로 적용할 수 있는 폰트를 찾기에 아주 좋은 곳입니다. 단, 폰트를 너무 많이 쓰지는 마세요. 폰트 패밀리, 굵기, 스타일이 추가될 때마다 사이트 로딩 부담이 커집니다.

이미지/사진

해당 비즈니스 유형에 어울리는 전반적인 스타일과 분위기를 정하세요. 커피숍이라면 부드러운 조명의 아늑한 사진, 감성적인 매장 내부 컷, 카페에서 대화하고 여유를 즐기는 사람들의 모습, 음식과 음료 이미지 등이 잘 어울립니다.

일러스트와 로고의 경우, 웹사이트에 사용할 수 있는 이미지를 제공하는 무료 온라인 그래픽 디자인 툴들이 있습니다. 대표적인 예는 다음과 같습니다.

• Canva
• Vectr
• Snappa

7단계: 웹사이트 제작하기!

이제 전체 레이아웃을 알려주는 와이어프레임도 있고, 프런트엔드 스타일 작업의 방향을 잡아줄 디자인 레퍼런스도 준비되었습니다.

디테일한 PSD 파일을 만들어줄 디자이너가 없으므로, 방금 그린 와이어프레임을 기준으로 바로 웹사이트 제작에 들어가겠습니다.

제가 평소 웹사이트 프런트엔드를 만들 때 사용하는 접근 방식은 다음과 같습니다.

1. 웹사이트 파일을 세팅한다
2. 폴더와 파일을 생성하고 구조를 잡는다
3. 태스크 러너(task runner)를 실행한다 (이 프로젝트에서는 Gulp를 사용)
4. 각 템플릿마다 별도의 HTML 파일을 만든다

그다음 각 HTML 템플릿마다 다음 순서로 진행합니다.

1. 기본 HTML 요소로 뼈대 구조를 만든다
2. 페이지 요소를 하나씩 완성해 나간다
3. 각 요소에 CSS 스타일을 추가하되, 먼저 각 섹션의 레이아웃이 올바른지 확인한다
4. 작업하면서 브라우저에서 페이지가 어떻게 보이는지 수시로 확인하고 계속 수정한다

반응형 여부를 반드시 확인하세요

사이트를 만드는 동안에는 스타일이 데스크톱, 태블릿, 모바일에서 모두 매끄럽게 보이는지 확인하는 것이 좋습니다.

데스크톱 스타일은 자신의 컴퓨터에서 여러 브라우저로 쉽게 확인할 수 있습니다. 모바일은 Chrome 개발자 도구를 사용하면 다양한 모바일 기기에서의 화면을 에뮬레이션해 볼 수 있습니다.

단, 어떤 에뮬레이션 도구도 실제 폰이나 태블릿과 100% 동일하지는 않다는 점을 기억하세요. 스타일 테스트를 마치려면 결국 웹사이트가 인터넷에 올라간 상태에서 실제 폰으로 확인하는 과정이 필요합니다.

웹사이트 표시를 테스트할 때 활용할 수 있는 기기 에뮬레이터는 다음과 같습니다.

• Responsinator.com (무료)
• Screenfly by Quirktools (무료)
• Browserstack (유료) — 실제 기기 위의 가상 머신에서 테스트할 수 있는 서비스입니다.

완성된 결과물!

완성된 Central Coffee 웹사이트의 스크린샷입니다.

실제 사이트는 필자의 Github.io 페이지에서 직접 확인해 보실 수 있습니다.

이렇게 디자이너를 고용하지 않고도 웹사이트를 디자인하고 제작할 수 있었습니다.

이 글이 도움이 되었기를 바랍니다. 의견이 있다면 아래 댓글로 알려주세요.

새 글이 올라올 때 놓치고 싶지 않다면? 아직 구독하지 않으셨다면 여기를 클릭해서 블로그의 새 포스트 알림을 받아보세요.