Skip to main content

여러분은 웹사이트를 만들 때 어떤 식으로 체크리스트를 만들어 운용하셨나요? 웹 사이트 구축 관련 콘텐츠는 이미 많이 존재하지만, 이 글 하나로 여러 글을 돌아다니실 필요를 줄여드리고 싶습니다. 하나의 체크리스트로 필요한 사항들을 모두 체크하기 좋게끔 마스터 체크리스트로 쓸 수 있게끔 요약한 체크리스트를 정리했습니다.

전 세계 다양한 웹사이트 포트폴리오를 총망라하는 사이트 Visual Objects의 조사에 따르면, 소비자의 76%는 주변 상점 등에 방문 전, 미리 인터넷으로 정보를 찾아본다고 합니다. 이제 사업을 위해선 02로 시작하는 전화번호보다 .com 으로 끝나는 웹사이트가 더 중요해졌다는 것을 의미합니다.

하지만, 전문적인 지식이나 예산 없이는 혼자 또는 소수의 팀으로 웹사이트를 만드는 것이 여간 어렵지 않습니다. 사이트 구축, 웹 개발자, 디자이너 등 적절한 팀이 갖춰져야 만들 수 있을 것처럼 보입니다. 하지만, 우리가 어떤 사이트를 만들지 따라 그렇게 많은 시간과 예산이 소요되지 않을지도 모릅니다.

만일 웹 에이전시에 웹사이트 제작을 맡기는 경우라도 아래 체크리스트를 미리 확인하여 준비한다면 더 명확한 업무 범위와 견적 등을 확인하실 수 있습니다. 웹사이트 견적을 맡길 때에도 페이지당 가격 등으로 웹 사이트 구축 견적이 책정되지 않는다는 사실은 이제 많은 분들이 알게 되었습니다. 얼마나 많은 내용이 들어가고, 특별한 기능이 있는지 등 다양한 요소들을 고려해야 합니다.

 

우선 고려해야 할 큰 카테고리는 다음과 같습니다.

 

  1. 웹사이트 기초
  2. UX / UI
  3. 사이트 기본 구성 요소
  4. 내부 콘텐츠

 

아래는 해당 카테고리를 조금 더 세분화하여 정리한 내용입니다.

  1. 웹사이트 기초
    1. 이전 사이트 분석 (해당하는 경우)
    2. 기간
    3. 방법
    4. 예산
  2. UX / UI
    1. 목표
    2. IA
    3. 시각 요소 디자인
    4. 추가 마케팅 Needs 반영
    5. 기능 요소 구현
  3. 사이트 기본 구성 요소
    1. 도메인 이름
    2. 파비콘
    3. 헤더와 푸터
  4. 내부 콘텐츠
    1. 사이트에 최적화된 콘텐츠 작성
    2. SEO 최적화

 

웹사이트 기초

 

이전 웹사이트 분석 (해당하는 경우)

새로운 웹사이트 디자인에 대한 디자인 목표를 정의합니다.

 

  • 현재 웹사이트가 다루기 어려웠으며 사용 편의성이 필요하였음
  • 기존 사이트에서 수행하지 못했던 불편했던 점
  • 새로운 디자인과 브랜딩이 내부 조직과 외부 방문자들에게 어떠한 영향을 주고자 하는지
  • 이전 웹사이트가 최신 트렌드와 동떨어진 디자인
  • 검색엔진(구글, 네이버) 등에 잘 노출되지 않기 때문에 더 나은 UX과 기술적인 영역에서의 구조가 충족되어야 함

 

구축 기간

혼자 만드는 웹사이트라고 하더라도 무한정 사이트를 만들 순 없습니다.

주요하게는 투자, 프로젝트, 내부 인력, 보고 일정, 목표 등 사정에 따라 웹 구축 기간이 정해집니다.

개인 웹사이트일 경우 아래 체크리스트 항목 등을 고려하여 대략적인 일정을 마련합니다.

일반적으로 웹사이트를 구축할 때 포함하는 구축 프로세스는 공통적으로 아래와 같습니다.

사이트의 구축 범위에 따라, 조금씩 프로세스는 줄어들 수 있습니다.

 

  • 사이트 구축 전략 및 디지털 전략 수립
  • UX / UI 전략 수립 및 사이트 구조 정의
  • 인터페이스 & 와이어프레임 설계
  • UI 디자인 프로토타입 & 목업
  • HTML 퍼블리시 또는 CMS 빌드
  • (FrontEnd개발 – 커스텀 개발 또는 CMS 구축 시 Optional)
  • (BackEnd개발 – 커스텀 개발 또는 CMS 구축 시 Optional)
  • 통합 테스트 및 오픈

 

구축 방법
  • 웹사이트 빌더? / CMS?

웹사이트 빌더 또한 결국 포괄적으로는 CMS에 포함되므로 둘 사이가 명확히 구분되지는 않습니다.

결론은, 완성된 웹사이트를 쉽고 빠르게 만들고 싶으시다면 웹사이트 빌더, 비즈니스에 적합한 콘텐츠 배치, 디자인 등을 세부적으로 하고 싶다면 CMS를 선택하는 것이 좋을 수 있습니다.

웹사이트와 CMS의 차이는 아래와 같습니다.

웹사이트 빌더

월별/연간 구독료를 지불하고 도메인, SSL 인증서, 템플릿 등을 패키지로 활용하며 대표적으로는 Wix가 있습니다.

다양한 형태의 웹 사이트를 만들 수 있도록 템플릿을 제공합니다. 별도의 호스팅 서비스를 사용할 필요 없이 계정을 활용하는 방식입니다.

코딩에 대한 사전지식이 없거나, 간편한 활용이 필요하다면 완제품 형태의 웹사이트 빌더를 활용하는 것이 가성비가 좋을 수 있습니다. 이미 디자인이 완성된 템플릿, 이미지 등을 사용하기 때문에 디자인 공수가 줄어들 수 있으며, 기본적으로 드래그 앤 드랍 방식으로 활용하기 때문에 쉽기로 유명한 CMS 만큼 제작에 진입장벽이 낮습니다.

CMS

Contents Management System의 약자로, 대표적으로는 WordPress(워드프레스)가 있습니다.

여러 CMS가 있지만, 배우기 쉽고 초보자에게 적합한 CMS로는 WordPress가 대표적입니다. CMS로 웹사이트를 만들기 위해서는 별도의 도메인 이름과 웹 호스트를 구매해야 합니다. 따라서, 원하는 도메인 이름을 직접 선택하여 구매할 수 있다는 장점이 있습니다.

또한, WordPress만 하더라도 셀 수 없이 많은 무료 플러그인과 테마가 있으므로 원하는 테마 등을 선택해서 원하는 웹 사이트를 만들 수 있습니다. 일반적으로 웹사이트 빌더가 아닌 CMS를 활용하는 이유는 CMS에서 더 많은 기능과 디자인을 구현할 수 있기 때문입니다. HTML과 CSS를 기본적으로 사용할 수만 있더라도 CMS에서 굉장히 많은 기능과 디자인 요소를 구현하실 수 있습니다.

 

구축 예산

구축해야 할 사이트의 역할에 따라 비용이 가장 크게 달라집니다.

 

  • 저 예산 소규모 웹사이트
  • 브랜드 저널(블로그, 뉴스) 등을 포함한 중규모 웹사이트
  • 다양한 기능(예약, 온라인 구매 등)이 포함된 고급 사이트
  • 온라인 쇼핑몰

사이트 구축을 에이전시에 맡겨 진행할 경우에는 내부 프로젝트 담당 TFT 또는 구축 예산이 수립되어있는지, 웹사이트 기획은 어느 정도 수준으로 진행하는지 등에 따라 달라집니다.

세부 브랜딩과 디자인은 내부 디자인팀에서 진행하게 되는지, 이미지 제작과 브랜딩도 사이트 구축과 함께 만들어져야 하는지 등을 고려해야 합니다.

또한, 도메인/호스팅 형식에 따라서도 고려해야 할 예산이 달라질 수 있습니다. 어떤 도메인을 사용하는지, 도메인을 여러 개 사용해야 하는지, 호스팅은 어떻게 하게 되는지를 고려할 수 있습니다.

 

UX/UI (IA)

 

목표 정의

홈페이지를 만드는 데 있어, 가장 중요한 영역입니다.

사이트 구축 시엔, 그 역할을 명확히 정의하고 목표 달성을 최우선으로 필요한 사항들을 점검하는 것이 매우 중요합니다.

 

  • 웹사이트를 통해 콘텐츠 발행
  • 웹사이트의 검색 결과 상위 노출
  • 브랜드 및 제품 소개
  • 잠재고객 확보

웹 사이트는 어떤 잠재고객/대상이 방문하는지에 따라 톤앤매너가 달라집니다. 방문자의 페르소나를 정의하여, 어떠한 대상에게 어떤 정보를 보여줄 것인가를 정의합니다.

예) 나이, 성별, 관심사 등을 정의할 수 있습니다.

 

IA 정의

사이트에 어떤 페이지가 포함되어야 하는지 IA를 정의합니다.

IA(Information Architecture, 정보 구조)는 쉽게 생각하면 홈페이지 카테고리입니다. Depth를 나눠 페이지를 어떻게 구성할 것인지 계층 구조를 나눕니다.

IA를 정의하는 데에는 다양한 방법이 있고, 고려해야 할 요소 또한 많지만 IA 정의 기준을 위해 고려해야 할 가장 중요한 것은 UX(User Experience, 사용자 경험) 입니다. 방문자가 필요한 정보를 찾기 쉽게끔 페이지들 간의 연결 구조를 만들어야 하며, 좋은 웹사이트란 보기에 이쁘기보단 필요한 정보를 잘 전달할 수 있는 웹사이트입니다.

아래와 같은 페이지들이 일반적으로 구성되고, 하위에 상세 카테고리 분류가 추가될 수 있습니다.

 

  • 메인 페이지
  • 회사 정보
  • 문의하기 (FAQ)
  • 제품/서비스
  • 블로그
  • 개인정보 정책

구성되는 페이지는 아래의 요소들을 포함하고 있어야 합니다.

  • 페이지 제목
  • 메타 설명
  • URL
  • 이미지 대체 텍스트

웹사이트는 위 세 가지 요소가 모두 적절히 포함되어야 검색엔진에서 노출될 수 있습니다. 이는 곳 SEO(Search Engine Optimization, 검색엔진최적화)와도 연결됩니다. 각 항목에 대해 상세한 사항을 확인하려면 아래 글을 확인해주시면 좋습니다.

 

SEO 마스터가이드 1편 : https://www.hellodigital.kr/blog/seo-guide-1/

SEO 마스터가이드 2편 : https://www.hellodigital.kr/blog/seo-guide-2/

 

시각 요소 디자인

물론, 트렌디하고 현대적인 디자인이 필요하기 때문에 시각적인 요소를 무시할 순 없습니다.

  • 정보를 파악하기 쉬운 레이아웃
  • 읽기 쉽고 깔끔한 글꼴 (Sans Serif / Serif)
  • 쉽고 짧은 링크 구조
  • 모바일 반응형 구조
  • 페이지별 컬러 일관성
  • 고대비 색상 활용
  • 맞춤법 검사
  • 적절한 공백 활용

 

추가 마케팅 Needs

웹사이트 내에 Markeitng 요소가 포함되어야 하는지 정의합니다.

일반적으로는 추가 광고비를 외부로 집행하지 않더라도 홈페이지에 쌓인 콘텐츠로 많은 잠재고객이 유입되도록 하는 인바운드 마케팅을 지향하는 경우 아래와 같은 마케팅 요소들을 고려합니다.

 

  • 마케팅 목표와 계획
  • 내부 마케팅팀의 현재 업무 및 Pain-Point
  • 웹사이트에 들어가야 할 Marketing 요소 (CTA, Form 등)

 

기능 요소

웹사이트 내에서 고려할 수 있는 옵션입니다. 블로그를 웹사이트 내에서 활용하시는 경우에 더 유용한 기능일 수 있습니다.

 

  • 댓글 (블로그, 뉴스 등 콘텐츠 위주)
  • 검색창
  • 사이드바 (최신, 인기 콘텐츠, CTA 등)
  • 소셜 공유 기능
  • 조회수, 추천 기능

 

사이트 기본 구성 요소

 

도메인 이름

일반적으로는 짧을수록 좋으나, 적절한 구성이라면 길어도 좋습니다.

  • example
    • g2.com
    • naver.com

.com 도메인이 일반적으로는 도메인의 정식이지만, 전 세계 큰 브랜드들 중 .com 도메인을 사용하지 않는 곳들도 많습니다. .com에 강박적으로 얽매이지 않아도 좋습니다.

하지만, 의류 소핑몰인데 .pizza 와 같은 도메인을 쓰기보단 최대한 우리의 비즈니스와 잘 어울리거나 대안으로써 적절한 신뢰감을 줄 수 있는 대안을 찾으시는 것을 추천합니다.

 

  • .io:  기술 웹사이트 및 스타트업에서 많이 사용
  • .net:  .com과 비슷한 신뢰도를 가지는 .com의 뛰어난 대안
  • .blog & .shop:  이 두 개의 떠오르는 최근 많이 사용되며, 특히 랜딩페이지에서 많이 사용
  • .co.kr : 한국에서의 .com과 같은 영향력을 가짐

.com의 대안으로써의 도메인을 사용하는 경우는 아래와 같습니다.

  • daum.net
  • notion.so
  • bit.ly/
  • twitch.tv

 

Favicon

당연히 우리의 비즈니스를 잘 드러낼 수 있는 이미지가 들어가야 합니다.

파비콘이라는 용어 자체가 생소하신 분들도 계실 거라 생각합니다.

사이트 구축 - 파비콘

👆 이게 바로 파비콘입니다.

보통, 회사 홈페이지라면 로고가 위치합니다.

네이버와 구글은 N, G 와 같은 회사 이름을 바탕으로 만든 로고를 활용하며 명확한 브랜딩을 전달합니다.

 

헤더와 푸터

전화번호, 회사 주소, CTA, 간단한 회사 소개, 로고, Copyright 등이 들어갑니다.

웹사이트에서 전달하고자 하는 정보가 함축적으로 들어가서 어떤 페이지를 방문하든 해당 정보를 확인할 수 있도록 구성합니다.

어떤 페이지에서든 헤더와 푸터는 동일한 경우가 대부분이기 때문에, 전체 사이트 디자인과의 통일성을 고려해야 합니다.

 

웹사이트 내부 콘텐츠

이제 웹사이트 구조와 디자인 등을 고려했으면, 그 안 메인 영역에 들어갈 콘텐츠를 채워나갈 차례입니다.

콘텐츠는 웹사이트를 오픈한 이후에도 계속해서 쌓을 수 있으므로, 우리의 브랜드, 비즈니스와 잘 융화되는 콘텐츠를 작성해야 합니다. 콘텐츠는 많다고 좋은 것도, 자주 올린다고 좋은 것도 아닙니다. 가장 좋은 콘텐츠 전략은 적절한 목표와 계획하에 체계적으로 관리되어야 합니다.

 

최적화된 콘텐츠 작성

회사 소개 페이지, 제품/서비스 소개 페이지, 블로그 등에 필요한 텍스트와 이미지 등 콘텐츠를 채워 넣습니다. 이 부분에선 다양한 이해관계자들과의 협업이 필요하기도 합니다.

전달하고자 하는 메시지, 톤앤미너, 적합한 키워드 등을 반영해야 하며, 콘텐츠는 아래의 순서대로 만들어집니다. 계획-실행-평가의 과정을 거치는 것이 여타 다른 업무와 크게 다르지 않습니다.

 

  • 콘텐츠 기획 및 전략 수립
  • 콘텐츠 제작 (윤문 및 편집)
  • 콘텐츠 분석

콘텐츠 전략과 관련한 추가적인 가이드는 아래 링크를 통해 더 자세히 확인하실 수 있습니다.

6가지 관점에서의 콘텐츠 전략 [5W와 1H] : https://www.hellodigital.kr/blog/contents-strategy-6w1h/

 

  • Who : 콘텐츠를 누가 읽을 것인가?
  • What : 우리 조직의 USP는 무엇인가? 콘텐츠의 USP는 무엇인가?
  • Where : 콘텐츠는 어떤 채널에 게시할 것인가?
  • When : 콘텐츠는 어떤 주기로 만들 것인가?
  • Why : 콘텐츠가 타겟의 어떤 문제를 해결하는가?
  • How : 콘텐츠 생성과 게시 등은 어떻게 관리하는가?

 

SEO

SEO는 아래와 같은 체크리스트 하에 생각하게 됩니다.

헬로디지털_SEO_체크리스트도식화된 위 순서에 따라, SEO가 필요한 단계라면 아래 SEO 요소를 고려하게 됩니다.

 

  • 핵심 키워드 선정
  • 핵심 키워드를 페이지 제목, 메타 설명, 내부 콘텐츠에 반영
  • SSL 인증서 적용
  • 페이지 로딩 속도 최적화
  • 사이트 내/외부 연결이 가능한 링크

이외에 더 많은 SEO를 고려할 때 체크해야 할 사항이 많지만, 이 글에선 여기까지만 다룹니다.

중요한 건 이게 끝이 아니라는 겁니다.

여기서 다룬 웹사이트 체크리스트에 세부 요소를 추가한다면, 이 글은 우리가 챙겨야 할 요소들의 10%도 채 다루지 않았습니다.

 

 

마무리

이 글에도 굉장히 많은 정보를 담았지만, 이는 웹사이트를 만들기 위해 고려할 수 있는 아주 기초적인 부분에 불과합니다. 사이트 구축에는 무수히 많은 다양한 요소들이 영향을 미치기 때문에 무엇보다 현 상태의 진단과, 필요한 요소에 대한 우선순위 및 달성하고자 하는 목표 선정이 중요합니다.

더 구체적으로는 사이트 구현에 사용한 CSS 최적화, 사이트의 브라우저 및 OS 호환, 백업, SEO 오류 검사 등 수행해야 할 사항이 아직 많이 남아있습니다. 하지만, 최우선적으로 고려해야 할 대표적인 요소를 큰 틀에서 이해하는 것이 중요하며, 제로베이스로 웹사이트를 구축하는 과정은 너무나도 막막합니다.

사이트 구축에 어떠한 요소가 추가로 더 필요할지 궁금하신 분들은 부담 없이 헬로디지털로 연락 주시면 필요하신 도움을 받으실 수 있습니다.