[기획/아이디어]웹사이트 제작 프로세스와 기획의 필요성


"혼자 웹 빌더를 사용해 사이트 제작하려면 기간이 얼마나 걸리나요?"

"한달 정도의 기간이 소요됩니다."

"아... 꽤 오래 걸리네요."


사람들은 사이트 제작을 시작하기 전에는 한달이라는 제작 기간이 길다고 느낍니다. 웹사이트가 만들어져야 광고나 마케팅을 시작해 판매가 가능하다는 사실을 알기 때문입니다. 그런데 일단 사이트 제작이 시작되고 1주일 정도의 시간이 지나면 어김없이 사이트 제작이 지연되기 시작합니다.

문제의 이유는 다양할 것입니다. 일단 웹사이트를 스스로 제작하려는 고객은 1인 기업가가 많습니다. 1인 기업가는 제품/서비스 관리, 고객 관리, 마케팅, 세무/회계 등등 모든 업무를 거의 혼자 도맡아 합니다. 그러니 시간이 없어 웹사이트에 신경 쓸 여력이 없습니다.

혹은 중소기업에서 디자인 업무 (대부분 그래픽 디자이너) 또는 완전히 관련 없는 업무를 하시던 분이 본의 아니게 웹사이트 제작까지 맡게 된 경우입니다. 사이트 제작은 처음이라 뭐부터 해야할지 모르겠고 난감합니다.


1인 기업가들은 바쁩니다 (ㅠㅠ) via GIPHY


네, 문제의 핵심은 바로 이것입니다. '사이트 제작의 전반적인 과정을 모르고, 무엇을 준비해야 하는지 모르겠다'는 거죠.

이 포스트에서는 이런 문제를 해결하는데 조금이나마 도움이 되었으면 하는 마음으로 '사이트 제작 프로세스와 기획의 필요성' 에 대해 적어보겠습니다.


     누구에게 필요한 정보인가요?

  • 스스로 웹사이트 제작이 처음인 사람
  • 웹 빌더를 사용해 홈페이지를 제작해보려는 사람
  • 쇼핑몰 제작이 계속 딜레이 되는 사람
  • 회사 홈페이지를 제작해보라는 업무를 받은 사람




1. 사이트 제작 프로세스

웹사이트를 제작하려면 웹 에이전시에 제작을 의뢰하거나, 아임웹 Imweb 과 같은 웹 빌더를 사용하거나, 가능한 경우 직접 개발해 만들 수 있습니다. 여기서는 사용자가 웹 빌더를 활용해 직접 웹사이트를 제작한다는 가정 하에 대해 말씀드리겠습니다.

이런 경우는 개발이 필요하지 않아 웹사이트 제작이란 결국 사이트 기획과 웹디자인을 의미합니다. 보통은 다음 4단계를 거치게 됩니다.


기본 웹사이트 제작 프로세스


1단계, 사이트 기획
직접 웹사이트를 제작할 때 이 단계를 거치지 않고 바로 시안부터 잡는 경우가 많습니다. 그러나 디자인 전에는 반드시 웹사이트를 기획하는 작업이 필요합니다. 웹사이트 기획은 웹사이트에 들어갈 콘텐츠(글, 그림, 영상 등)를 결정하고 전체적인 디자인 컨셉을 잡는 단계입니다.


2단계, 메인 페이지 시안 잡기
방문자가 웹사이트에 방문하면 가장 먼저 보게 되는 페이지가 바로 메인 페이지 입니다. 가장 눈에 들어오니 매우 중요한 페이지라고 할 수 있습니다. 메인 페이지를 작업을 하면서 실제 페이지 디자인이 기획 단계에서 구상했던 컨셉과 잘 어울리는지 확인해봅니다.


3단계, 서브 페이지 제작
나머지 서브 페이지들은 대부분 게시판, 쇼핑, 입력폼, 갤러리 등을 사용해 콘텐츠를 추가해갑니다. 여기서부터는 노가다입니다. 각 메뉴에 맞는 콘텐츠를 삽입하고 디자인하며, 빠르고 효율적으로 작업을 해나갑니다.


4단계, 최종 검수
세세한 수정 작업을 몇차례 거치고 모바일과 태블릿 화면까지 원하는대로 잘 나오는지 확인하고 나면 웹사이트 제작이 완료 됩니다.



 

2. 왜 기획서가 필요한가?

대부분의 사람들은 웹사이트 제작이라고 하면 바로 [시안 작업]부터 생각하는 경향이 있습니다. 아직 웹사이트에 들어갈 내용이 정해지지도 않았는데 디자인을 할 수는 없습니다. 설사 시안 작업을 마쳤다 하더라도 문제가 생겨납니다.

만약 오프라인 매장을 오픈한다고 가정해보겠습니다. 전체적인 톤은 어떻게 할지, 의자와 식탁은 어떻게 배치할지, 간판은 어떤 위치에 달 것인지 정하지 않은 상태에서 일단 의자 따로, 식탁 따로, 간판 따로 구매해놓으면 어떻게 될까요? 아마도 전체적인 톤과 레이아웃에 맞지 않는 가구나 소품은 쓸모없게 될 것입니다. 어느 공간은 알록달록, 어느 공간은 빈티지한 어울리지 않는 것들로 대단히 산만할 것입니다. 제각각 예쁜 것은 의미가 없습니다.


모아놓고 보니 엉망이 되었다 (...) via GIPHY


웹사이트도 마찬가지 입니다. 웹사이트는 온라인 상의 회사 또는 매장이라고 할 수 있습니다.

오프라인은 무엇이든 변경이 쉽지 않기 때문에 신중하게 결정합니다. 하지만 웹사이트는 변경이 쉬우므로 신중하게 결정하지 않고 일단 시안부터 보고 결정하자는 경우가 많은 것 같습니다. 전체적인 사이트의 컨셉이 없다면 메뉴 하나, 텍스트 위치 하나를 계속해서 변경하기 일쑤입니다. 이렇게 하나 하나 바꾸다보면 웹사이트 제작은 계속해서 지연됩니다.

따라서 웹사이트를 제작하기 전 [사이트 기획]이 반드시 필요합니다. 혹여나 아임웹이 아닌 다른 웹 빌더를 사용하거나 웹 에이전시에 제작대행을 맡기더라도 결국 사이트 기획은 의뢰자의 몫입니다. 경험이 많은 전문가가 도와줄 수 있지만 전체적인 컨셉 그리고 각 페이지에 들어갈 내용, 원하는 디자인은 최종 결정자인 의뢰자가 해야하기 때문입니다. 나중에 완성본을 보고 '이건 내가 원한 사이트가 아니다' 라고 수정에 수정 또 최종 수정을 요청하게 될 수도 있습니다. 처음부터 제대로 원하는 바를 정확히 정리하는 단계가 필요하고 그것이 바로 [사이트 기획] 입니다. 그렇다면 도대체 사이트 기획은 무엇을 의미하는 걸까요?

다음 단계에서 기획의 의미와 요소에 대해 알아보도록 하겠습니다.




3. 사이트 기획하기

사이트 기획이란 결국 온라인 공간, 즉 웹사이트에서 누구에게 어떤 것을 보여줄 것인지 결정하는 과정입니다. 불특정 다수에게 보여주고 싶은 모든 것을 한 페이지에 다 넣었다간 스크롤을 계속해서 내려야 하는 참사가 벌어지겠죠? 그렇다면 도대체 어떤 요소들을 결정해야 하는지 알아보도록 하겠습니다. 


1) 목적과 타겟

일단 만들고자 하는 사이트의 목적은 무엇인지 생각해보세요. 목적을 분명히 하면 내가 해야할 말과 안 해도 될 말을 구별할 수 있습니다. 또한 누가 이 사이트에 들어올 것인지 예상 방문자를 생각해보세요. 타겟층은 구체적일 수록 좋습니다.


어떤 사람들이 내 온라인 매장에 방문하나 탐색하자


해외 바이어에게 회사와 제품에 대해 소개해줘야 하나요?
20대 마른 여성을 타겟으로 하는 쇼핑몰 인가요?
내가 지금까지 무슨 작품들을 만들어왔는지 보여줘야 하나요?


목적과 타겟 ,이 2가지는 가장 기본적으로 사이트의 내용과 스타일을 결정짓기 때문에 디자인이 들어가기 전에 충분히 고려되야 합니다.


2) 참고 사이트

목적과 타겟이 명확해졌다면 비슷한 목적과 비슷한 타겟층을 대상으로 하는 웹사이트들을 리서치 합니다. 주로 동종업계에 있는 웹사이트들을 검색해보면 어떤 디자인 또는 구성이 좋은지 파악할 수 있습니다. 또 주로 어떤 메뉴와 무슨 내용들이 공통적으로 있는지 참고해 내 사이트맵을 구성할 때 인사이트를 얻을 수도 있습니다.

아임웹을 통해 사이트를 제작하시는 분들은 디자인과 구성이 좋은 사이트 또는 매출이 높은 사이트 들을 모아둔 제작 사례를 꼭 확인해보시기 바랍니다.

아임웹 사이트 제작 사례 보러가기 


3) 사이트맵

다음은 사이트에 들어갈 내용을 카테고리화 하세요. 이 카테고리가 사이트의 메뉴가 될 것입니다. 다음과 같이 표를 이용해 사이트맵을 정리해보면 보다 시각적으로 사이트의 메뉴 구조를 이해할 수 있습니다. 주메뉴와 각 주메뉴에 들어갈 서브 메뉴를 적어보세요. 이 사이트맵만 정해도 전체적으로 어떤 페이지들이 필요한지 정리가 됩니다.

사이트맵 예시


4) 내용 정리

사이트맵에서 나에게 필요한 메뉴를 모두 정리했다면 그 메뉴에 들어갈 내용과 이미지들을 문서로 정리해보세요. 각자 주로 사용하는 운영체제와 소프트웨어가 달라서 예시를 보신 다음, 편하게 사용하는 도구로 응용하시면 될 것 같습니다.

예를 들어, 1인 기업가에게 코워킹 스페이스를 제공하는 회사 소개 홈페이지를 만든다고 가정해보겠습니다. 메인 페이지에는 퀄리티 높은 공간 이미지가 들어가고 한눈에 어떤 공간과 혜택을 제공하는지 파악할 수 있어야 할 것 같습니다. 공지사항을 적을 게시판과 제휴 문의 등을 받을 입력폼도 필요해 보입니다. 그래서 주메뉴는 Home, Space, Gallery, Board, Contact 이렇게 5개를 사용하기로 결정했습니다. 그리고 메뉴명을 이름으로 한 폴더를 만들었습니다.

 

주메뉴를 폴더로 구성


각 폴더 안에는 해당 페이지에서 설명할 내용이 담긴 문서와 이미지 파일을 넣어 놓습니다. 예시의 내용은 워드를 사용해 작성했고 이미지는 jpg 파일로 저장해두었습니다. 이렇게 메뉴별 (폴더별) 로 들어갈 내용과 이미지를 준비해 놓으면 실제 사이트 제작 시에는 순수하게 레이아웃과 같은 디자인적인 요소만 생각하면 되기 때문에 제작 기간이 단축됩니다.   


1번 메뉴인 홈에 들어갈 이미지와 텍스트 파일


메뉴 홈에 들어갈 텍스트 내용 예시



+ 컬러와 폰트

컬러와 폰트는 디자인적 요소가 강해 기획 단계보다 메인 페이지 시안을 작업해보면서 결정하는 것이 좋으나 기획 단계에서도 어느 정도 컬러와 폰트에 대한 고려가 필요합니다. 만약 브랜드 컬러(기업을 상징하는 고유의 색상)가 정해져있다면 브랜드에 어울리는 색 조합을 찾아두는 것이 좋습니다.

폰트는 가독성과 심미성이 좋은 폰트 2가지 정도를 제목과 본문 등에 적절히 배치하시는 것이 좋습니다. 3개 이상의 폰트를 사용하는 것은 웹사이트의 심미성과 기업의 브랜드 인지도에 좋지 않은 영향을 끼치지 때문에 지양하는 것이 좋습니다.




맺으며

지금까지 사이트 제작 프로세스, 기획서의 필요성, 기획의 요소에 대해 알아보았습니다. 혼자 사이트를 처음 만들어보시는 분들은 어떤 것부터 시작해야할지 막막할 것입니다. 일단 메인 페이지부터 만들어보자는 마음에 메뉴를 만들어놓고 텍스트와 이미지 몇 개 넣고 제작을 중단한 분들도 많을 것입니다. 그런 분들은 대부분 [사이트 기획] 단계가 마무리 되지 않은 분들입니다.



혼자 웹사이트를 제작한다는 것은 여간 힘든 일이 아닙니다.

특히 시간이 부족한 1인 기업가가 웹사이트 기획과 디자인까지 하는 것은 많은 노력이 요구되는 일이죠. 그렇지만 사이트 기획을 하다보면 내 사업의 목적과 타겟, 산업 리서치 등 브랜드 정립에 필수적인 요소들을 고민해보는 계기가 됩니다.


사이트 기획을 완료하시면 웹사이트를 론칭하자마자 곧바로 다가오는 고난과 시련의 마케팅을 하실 때도 도움이 될 것입니다. 탄탄한 사이트 기획을 통해 내 사업 목적을 다시 한 번 확립하고 멋진 웹사이트(쇼핑몰)을 만들어 보시기 바랍니다.