성공적인 홈페이지 제작을 위해 점검해야 될 사안

홈페이지를 성공적으로 제작하기 위해서는 다양한 항목들을 점검해야 한다. 디자인, 프로그래밍과 같은 기본사항부터 마케팅, SEO, 콘텐츠 등 부수적인 항목들까지 다양한 부분들을 점검함으로써 보다 완벽한 홈페이지에 가까워 질 수 있다.

1. 도메인
2. 호스팅
3. 디자인
4. 개발(프로그래밍)
5. 개발(프로그래밍)비용을 줄여야 하는 경우
6. 네비게이션 & UI(User Interface)
7. 메인화면(index page)
8. 콘텐츠
9. 마케팅
10. 검색엔진최적화(SEO, Search Engine Optimization)
11. 크로스 브라우저, 크로스 디바이스 – 호환성
12. 모바일 버전 vs 반응형 웹
13. 이미지/폰트 저작권 관련
14. 제작 후 점검사항
15. 예산/비용

1. 도메인

가장 먼저 사이트의 존재를 알리는 것이 도메인이다.
방문 전의 잠재고객은 도메인을 보고 사이트의 내용을 짐작한다.

• 도메인은 짧고 외우기 쉬운 것이 좋다
• 최상위 도메인은 .com 혹은 .co.kr을 사용한다.
• 도메인에 ‘키워드’를 포함시킨다.
  • 예) www.bluejeanshop.com
    청바지 전문몰인 경우 핵심키워드인 ‘bluejean’을 포함시킨다.
  • 도메인만 봐도 어떤 사이트인지 알수 있다. 이해가 쉬운만큼 기억하기도 쉽다
  • 검색결과 상위노출에 유리하다
    • 검색엔진은 검색어가 ‘청바지’일때 ‘bluejean(청바지)’이 포함된 도메인이 연관성이 크다고 본다.
• 하위 경로에도 키워드를 포함시킨다.
  • 예) www.bluejeanshop.com/skinnyjean/
    폴더(경로)명 또한 해당 키워드를 활용한다.
  • 경로만 봐도 제품 카테고리, 현재위치를 알 수 있다.
  • 검색결과 상위노출에 유리하다
• URL scheme 의미론적이어야 한다.
  • 카테고리명과 폴더명을 같게 한다.
  • 카테고리명과 폴더명 모두 연관성 있는 키워드를 적용한다.
• 가급적 하이픈(-)이나 숫자는 포함시키지 않는다.

2. 호스팅

호스팅의 선정기준은 속도와 안정성이다. 그외에 개발/운영시 필요한 기능, 프로그램 지원여부, 부가서비스 등을 고려해서 선택한다.

• 다국어 제작시 문자셋은 uft-8로
  • 일어, 중국어 등 외국어 버전까지 운영할 계획이라면 euc-kr 대신 utf-8 서버를 선택한다.
  • euc-kr 사용시 한글과 영어 외의 언어는 글자가 깨진다.
• 자동백업 기능
  • 자동으로 파일을 백업하여 실수로 파일이 삭제된 경우 몇일전 상태로 복원시키는 기능.
• 회선속도/로딩속도
  • 호스팅 회사의 호스팅 서비스를 이용중인 사이트를 방문해서 실제 로딩속도를 점검한다.
• 서버 OS버전, 지원 프로그램, DB환경, 이메일 계정 지원 여부 등 개발/운영 환경에 따른 고려가 필요하다

3. 디자인

시각적인 아름다움과 함께 정보전달, 편의성을 고려한다.

• 미학적으로 아름다운가?
  • 이미지 요소의 질이 높을 수록 좋다.
  • 이미지 요소 = 사진, 일러스트, 아이콘, 타이포크라피
• 디자인 컨셉이 사이트 목적에 부합하는가?
  • 사용자에게 줘야 하는 느낌, 사용자가 가져야 할 감흥을 명확히 규정한다.
    • 캐주얼복을 판매하면서 어둡고 고풍스러운 느낌을 줘선 안 된다.
    • 앤티크 가구를 판매하면서 가볍고 발랄한 느낌을 줘선 안 된다.
• 중요한 요소들이 부각되고 있는가?
  • 중요한 요소일 수록
    • 눈에 잘 띄어야 한다.
    • 사이즈가 커야 한다.
    • 색상이 강렬해야 한다.
    • 볼륨감 있어야 한다.
    • 반복적으로 보여야 한다.
• 테마가 되는 색상이 정해져 있으며 일관되게 적용되고 있는가?
• 강조, 기능을 위한 색상 규칙이 정해져 있으며 잘 지켜지고 있는가?
• 링크가 걸려 있는 텍스트가 밑줄이나 색상 등 외형적으로 강조되고 있는가?
• 텍스트의 가독성이 충분히 확보되어 있는가?
• 중요한 문장들이 위치, 크기, 색상에 의해 시각적으로 부각되고 있는가?

4. 개발(프로그래밍)

정보전달 위주의 사이트인지 기능(서비스) 위주의 사이트인지에 따라 개발 유무, 개발 규모가 결정된다.

• 기능(게시판, 회원제 등)이 필요 없고 단순히 이미지와 글을 보여주는 정도라면 html 만으로 제작이 가능하다.
• 기능이 요구된다면 사이트의 규모, 운영목적 등을 고려하여 적합한 개발언어를 선택한다.
• 저예산의 소규모 사이트라면 기능/보안 문제로 고민하기보다 비용기준으로 선택해도 큰 문제가 없다.
  • 주로 사용되는 언어들(php, asp, java 등)은 기능/보안 상에 치명적인 취약점을 가지지 않는다.
  • 비용이 저렴한 php의 경우 상대적으로 기능/보안에 취약점이 있다고 하지만 야후나 페이스북, 워드프레스 등의 제작에 사용되고 있다.

5. 개발(프로그래밍)비용을 줄여야 할 경우

저예산으로 프로젝트를 진행할 경우 개발비용을 줄이기 위해 아래의 옵션들을 선택할 수 있다.

• 웹사이트에 기능을 포함시키지 않는다.
• wordpress, XE 등 설치형 블로그나 CRM을 사용한다.
• 호스팅社에서 제공하는 ‘홈페이지 빌더’를 사용한다.

참고 게시물 : 무료로 홈페이지 만들기 – 홈페이지 빌더

6. 네비게이션 & UI(User Interface)

네비게이션 & UI는 철저하게 사용자 입장에서 체크되어야 한다.
어떤 화면에서도 원하는 다른 화면으로 손쉽게 이동할 수 있어야 하고 필요한 정보를 직관적으로 발견할 수 있어야 한다. 사용자 편의성에 기초한 점검사항들을 확인해 보자.

• UI 기본원칙은 일반적으로 통용되는 방식을 따르는 것이다.
  • 로그아웃 버튼은 보통 화면 상단에 위치한다. 대부분의 사이트가 따르는 이 원칙을 어기고 엉뚱한 곳에 배치할 경우 사용자는 로그아웃 버튼을 찾아 헤맨 시간만큼 이 사이트를 싫어하게 된다.
• 네비게이션의 메뉴명이 정확한 의미를 보여주는가?
  • 메뉴명이 ‘위탁판매’라면 위탁받은 제품을 팔겠다는 건지 제품을 위탁받겠다는 건지 불분명하다
  • ‘위탁판매제품’, ‘위탁판매접수’와 같이 메뉴명의 의미를 명확히 해줘야 한다.
  • 불분명한 메뉴명은 클릭률이 떨어진다.
• 앵커텍스트가 정확한 의미를 보여주는가?
  • 링크가 걸려 있는 텍스트(앵커텍스트) 또한 의미가 명확해야 클릭률이 높아진다.
• 네비게이션 구조, 카테고리 구조가 직관적이고 논리적인가?
• 네비게이션이 이미지나 플래쉬로 되어 있다면 하단쪽에 사이트 전체에 대한 텍스트 링크를 걸어 주는 것이 좋다.
• 각 페이지마다 제목 바로 밑에 현재위치(bread crumbs)가 표시되어 있는가?
• 깨진 링크, 없는 페이지에 접속이 시도된 경우 자체 제작된 404 page를 통해 대체 페이지 혹은 메인페이지로의 링크롤 제공하는 것이 좋다.
• 아크로뱃이나 어도비, 자바 등의 미디어 재생을 위해 플러그인이나 응용프로그램이 필요한 경우 해당 프로그램의 링크를 걸어 준다.
• 텍스트 위주의 콘텐츠인 경우 본문에 대한 ‘인쇄’ 버튼을 제공한다.
• 사이트맵을 제공한다.(가급적 이미지가 아닌 텍스트 링크를 사용하는 것이 SEO에 유리하다)
• 사이트 규모가 클 경우 ‘사이트 내 검색’ 기능을 포함시킨다.

7. 메인화면(index page)

메인화면은 사이트 내용을 요약해 보여주면서도 구성이 간결한 것이 좋다.

• 화면 구성이 무조건 간결해야 하는 것은 아니다.
  • 방문 목적이 다양하다면 목적에 부합하는 항목들로 다양하게 구성하는 것이 더 효율적이다.
    • 방문 목적이 상담이라면 상담전화 번호가 표시되어야 한다
    • 방문 목적이 구매라면 주요 제품에 대한 바로구매 버튼이 있어야 한다
    • 이벤트 참여가 목적이라면 이벤트 안내가 보여져야 한다.
    • 배송정보가 목적이라면 ‘배송확인’ 아이콘이 보여져야 한다.
  • 메인화면이 간결한 경우는 방문자들의 목적이 거의 한쪽으로 편중된 경우다.
• 신규방문자를 위해 ‘우리가 누구이고’, ‘무슨 일을 하며’, ‘무엇을 제공할 것인지’를 알려줘야 한다.
• index page (메인페이지)만 보고도 사이트 주요내용을 알수 있도록 명확한 메시지를 전달해야 한다.
• 메인페이지에서 중요한 페이지로 연결되는 링크를 시각적으로 부각시켜야 한다.

8. 콘텐츠

온라인 상에서의 콘텐츠는 대부분 ‘텍스트(글)’로 되어 있다. 이미지와 영상은 보조적인 역할을 한다. 좋은 정보를 담고 있는 양질의 글은 그 정보가 필요한 사람들을 웹사이트로 불러들인다.

참고 게시물 : 콘텐츠의 품질이 마케팅 비용을 낮춘다

• 문구는 간결하면서도 정확하게 정보를 전달해야 한다.(길고 난해한 문장을 찾아서 알기 쉽게 수정할 것)
• 문단의 구분, 제목, 소제목, 강조문구 등의 역할
  • 대충 훑어 봐도 이해가 가능해야 한다.
  • 본문 전체를 훑어 볼 때 문단, 제목, 소제목, 강조문구 등이 요약된 내용을 전달한다.
• 정보나 주장에 대한 근거를 뒷받침 하는 간단한 인용문이나 인용원문에 대한 링크를 제공한다.
• 소셜공유, RSS피드를 통해 콘텐츠를 전파한다.
• 사이트 내에서의 블로그 운영
  • 주소도 다르고 인터페이스도 다른 블로그를 운영할 경우 블로그 방문자를 웹사이트로 유입시키기 어렵다.
    • 예) 사이트 주소가 www.bluejeanmall.co.kr 이고 블로그가 blog.naver.com/bluejeanmall 일 경우 웹사이트와 블로그 사이에 거리감이 있다.
    • 예) 사이트 주소가 www.bluejeanmall.co.kr 이고 블로그가 www.bluejeanmall.co.kr/blog 일 경우 웹사이트와 블로그가 같은 도메인과 인터페이스를 가지므로 거리감이 없다.
    • 블로그 방문자는 콘텐츠(정보) 소비자이고 웹사이트 방문자는 제품소비자다. 블로그 방문자를 콘텐츠 소비자에서 제품 소비자로 전환(conversion)시키는데는 웹사이트 내에서 블로그를 운영하는 것이 더 유리하다.
    • 그럼에도 불구하고 마케팅 측면에서는 사이트 내의 블로그보다 네이버 블로그가 더 유리하다. 사이트 내에서 운영되는 블로그보다 네이버 블로그가 네이버에서 더 많이 노출된다.
    • 반대로 사이트 내에서 운영되는 블로그가 구글 상위노출에 유리하다.

9. 마케팅

마케팅 요소들을 적소에 배치해서 방문자가 웹사이트를 주변에 알리거나 제품을 구매하도록 유도할 수 있다.
버튼이나 아이콘, 링크, 네비게이션 등 고객의 행동을 유도하는 장치(콜투액션:call to action)와 고객에게 신뢰를 주는 내용이 이런 역할을 한다.

• 콜투액션을 통해 고객의 기대행동을 분명하게 제시 혹은 유도하고 있는가?
• 페이지 타이틀과 본문의 도입부 : 검색결과에 제목과 미리보기 형태로 보여지므로 클릭을 유도할 정도로 흥미로운 문구를 작성해야 한다.
• 고객의 피드백 창구가 충분한가?
• 방문자에게 신뢰를 주고 있는가?
  • 주소, 연락처, 블로그, 소셜은 물론 회원증, 인증서, 수상경력, 연혁, 거래처, 협력사, 연도별 실적, 포트폴리오 등 신뢰를 줄수 있는 항목을 누락시키지 말것
• 즐겨찾기 버튼
  • 즐겨찾기 해놓고 사이트에 접속하는 직접 방문자 많은 경우 검색엔진 상위노출에 유리하다
  • 즐겨찾기 버튼은 일종의 ‘콜투액션’이다. 즐겨찾기 등록을 유도한다.
•  파비콘
  • 즐겨찾기모음에서 파비콘은 시각적으로 두드러지고 사이트의 존재감을 높인다.
• SNS 공유 버튼
• 홈페이지빌더로 제작할 경우 sitemap.xml 파일 업로드나 로그분석, 전환추적을 위한 스크립트의 삽입을 제한하고 있는지 확인할 필요가 있다.
• 구글/빙 웹마스터 도구 등록, 네이버/다음 사이트 등록
• 구글 애널리틱스 등록
• RSS피드 등록

참고 게시물 : 웹 로그분석이란?
참고 게시물 : 웹 로그분석으로 매출 늘리기
참고 게시물 : 홈페이지 제작 후 할 일 – 검색엔진, 포털 등록

10. 검색엔진최적화(SEO, Search Engine Optimization)

검색엔진최적화는 아래의 기술적인 항목들에 의해 구현되지만 보다 중요한 것은 콘텐츠의 질을 높이고 웹페이지를 부지런히 알리는 것이다.

• title, h1 태그 안에 연관성 있는 키워드 포함
• 키워드 연구
• 메타태그 – title, description, keyword
• semantic markup (h1 등)
• sitemap.xml
• robots.txt
• User-friendly & Search Engine-Friendly
• Alt 태그
• 구글 웹마스터도구 등록
• 구글 애널리틱스 등록
  • SEO는 제작단계에서 시작하는 것이 좋다.
  • 도메인, 카테고리명, 제목, 본문, UI 등 대부분의 사이트 구성요소가 SEO의 영향을 받는다.
  • 제작 후에 SEO를 진행하면 사이트 구조 자체를 변경해야 할 수도 있다.
• 검색엔진 최적화의 본질적인 부분은 태그가 아니라 콘텐츠와 홍보에 있다.
  • 양질의 콘텐츠를 생성하고 카페, 커뮤니티, 동호회 등 연관성 있는 사이트에 링크를 퍼뜨린다.
  • 생성된 콘텐츠는 사이트, 블로그, 트위터, 페이스북, 카페 등 다른 매체에 재활용한다.
  • 블로그의 경우 구글 대상 블로그(워드프레스)와 네이버 대상 블로그(네이버 블로그)를 같이 운영하고 하나의 콘텐츠를 중복 게재하는 것이 효과적이다. 서로간의 크롤링이 배타적인 관계에 있다. 구글에는 네이버 블로그가, 네이버에는 워드프레스가 서로 잘 노출되지 않는다.

참고 게시물 : SEO 검색엔진최적화의 효과

11. 크로스 브라우저, 크로스 디바이스 – 호환성

어떤 환경에서 접속하더라도 화면이 깨지거나 UI 편의성, 기능요소들이 나빠지지 않도록 한다.

• 호환성 점검항목
  • 화면 레이아웃이 깨지지 않는지
  • 글자가 너무 크거나 작지 않은지
  • UI(User Interface)가 편의성을 제공하는지
  • 기능요소(게시판, 입력폼)가 제대로 기능하는지
  • 이미지, 동영상이 옳바로 로드되지 않을 때 대체요소가 사용되고 있는지
    • 이미지 대체요소 – alt, title 태그
    • 동영상 대체요소 – caption 태그
• 호환성 점검 대상
  • 브라우저 : Internet Explorer, Chrome, Safari, FireFox 등(버전 별로도 체크 필요)
  • 디바이스 : 데스크탑, 태블릿, 스마트폰
  • 운영체제(OS) : Windows, Linux, Mac 등
  • 해상도 : 태블릿, 노트북 등 화면해상도가 작을 때 div의 overflow 속성에 의해 콘텐츠가 영역 밖으로 새나가거나 숨어버리는 현상이 생기지 않는지 체크.

12. 모바일 버전 vs 반응형 웹

모바일 접속에 대비하는 두 가지 옵션이 있다. 모바일 사이트를 별도로 제작하는 것과 반응형 웹으로 제작하는 것.
모바일 사이트는 PC사이트와는 별개의 사이트를 운영하는 것이고 반응형 웹은 기기별 스타일(CSS)만 다르게 적용시켜서 레이아웃, 글꼴 속성, 이미지크기 등이 화면 해상도에 대응하게 만드는 방식이다. 각각의 장단점을 파악해 보자.

• 모바일 버전
  • 별도의 모바일 버전 사이트를 운영
    • pc 버전과 UI, 레이아웃, 콘텐츠, 도메인 모두 다르다
  • 낮은 해상도에서 보기 편한 레이아웃, 폰트 스타일(주로 크기), 콘텐츠
  • pc버전과 별개로 제작, 운영해야 한다.
• 반응형 웹
  • pc버전, 모바일 버전 구분 없이 하나의 사이트 운영
  • 모바일로 접속할 경우 낮은 해상도에 적합하게 레이아웃, UI, 콘텐츠가 자동으로 변경된다.
  • 모바일 버전을 따로 제작하거나 관리해야 하는 불편함이 없어진다.

13. 이미지/폰트 저작권 관련

저작권 관련 분쟁은 저작권과 사용권으로 분리되면서 매우 복잡해 진다. 분명한 사실은 제작업체에서 저작권을 위반한 경우 의뢰업체도 곤란해 진다는 것이다.

• 제작업체가 유료 이미지/폰트를 무단 사용한 경우 제작업체에도 법적 책임이 따를 수 있다.
  • ‘저작권’ 위반에 대해서는 책임이 없으나 결과물의 ‘사용권’에 대해서는 외뢰업체에게 책임이 있을 수 있다.
• 이미지/폰트의 저작권, 사용권으로 인한 문제를 예방하려면
  • 계약서에 저작권 및 사용권에 문제에 관한 면책 조항, 진술 및 보증 조항을 포함시킨다.(이렇게 해도 100% 안전하지는 않다.)
  • 무료 폰트를 사용한다.(나눔, 맑은고딕 등)
  • 상업적으로도 사용가능한 이미지만을 사용한다.

참고 게시물 : 이미지 저작권 침해시 의뢰업체의 책임은?

14. 제작후 점검사항

오픈하기전 마지막으로 링크, 기능, 맞춤법 등을 체크하는 시간을 가진다.
마지막 점검단계에서 구성이나 콘텐츠를 바꾸는 큰 수정은 가급적 피하도록 한다. 수정할 기회는 오픈 이후에도 얼마든지 있다.

• 깨진 링크가 없는지
• 메일로 여결되는 링크의 메일 주소, 통화로 연결되는 링크의 전화번호 확인
• 기능요소들 정상 작동 여부
  • 게시판, 입력폼, 예약 등
• JavaScript 에러 체크
• 호환성 체크 : 브라우저, 디바이스, OS, 해상도
• 맞춤법 체크
  • 국문 맞춤법 및 문법 체크
    • 크롬 확장프로그램 ‘바른 말씨’ 아래 링크에서 설치 가능
    • https://chrome.google.com/webstore/detail/%EB%B0%94%EB%A5%B8-%EB%A7%90%EC%94%A8/jbeblnocjjhgkbdeocekdmdipkifpakk?hl=ko
  • 영문 스펠링 체크
    • 크롬 확장프로그램 ‘Spell Checker for Chrome’ 아래 링크에서 설치 가능
    • https://chrome.google.com/webstore/detail/spell-checker-for-chrome/jfpdnkkdgghlpdgldicfgnnnkhdfhocg?hl=ko

15. 예산/비용

디자인비 + 개발비(프로그래밍) + 기획/콘텐츠 제작비 + SEO

• 디자인 비용
  • 이미지 구매 비용
    • 제작업체가 보유한 라이센스에 따라 비용이 달라진다.
      • 제작업체가 외주 작업용 라이센스를 가지고 라이센스 범위 내에서 작업하는 경우 비용이 발생하지 않는다.
      • 제작업체의 외주 작업용 라이센스 외에 다른 이미지를 사용할 경우 그 이미지의 라이센스에 따라 비용이 발생한다.
    • 이미지 라이센스에 대한 자세한 설명은 아래 링크 참조
    • 참고게시물 : 이미지 저작권 침해시 의뢰업체의 책임은?
  • 디자이너 작업비
• 개발(프로그래밍) 비용
  • 기능요소가 포함될 경우 개발비용이 발생한다.
  • 기능요소 없이 단순히 정보전달이 목적이라면 개발비용이 발생하지 않는다.
  • 기능요소의 비중이 적고 특별한 기능이 요구되지 않을 경우 오픈소스나 홈페이지빌더를 활용해서 개발을 대신할 수 있다.
• 기획/콘텐츠 제작 비용
  • 소규모 프로젝트에서는 작업인원 중 일부가 업무와 상관없이 처리하기도 하지만 규모가 커지면 전문 기획자, 콘텐츠 제작자가 참여해야 한다.
•  SEO(검색엔진최적화)
  • SEO 없이도 홈페이지를 완성할 수 있다.
  • SEO가 반영되면 마케팅이 강화된다.
    • SEO마케팅, 콘텐츠마케팅, 바이럴마케팅 등
  • 참고게시물 : SEO 검색엔진최적화의 효과
  • 프로젝트 종료 후 SEO를 반영할 경우 적지않은 비용이 발생하므로 SEO 계획이 있다면 제작단계에서 진행하는 것이 좋다.
    • SEO 작업 중 홈페이지 제작과 연계되는 것들
      • 도메인, 하위 폴더
      • 카테고리명
      • 콘텐츠에 사용되는 키워드, 키프레이즈
      • 각종 tag의 값 예)keyword, description, title, img

모든 항목을 충족시키는 것은 어려운 일이고 프로젝트의 목적이나 환경에 맞게 선별적으로 적용할 필요가 있다. 특히 예산에 따라 포기할 부분은 과감하게 제외시키는 것이 현명한 방법이다. 예를 들면 콘텐츠 외주제작이나 마케팅, SEO 등은 차후 진행이 가능한 작업들이다. 그외에 필수적인 작업들은 위 항목들을 가이드라인 삼아 작업의 완성도를 높일 수 있을 것이다.