웹기획이란?

웹기획이란 말 그대로 웹사이트를 만들기 위해서 전반적인 기획을 하는 것을 말합니다. 웹기획을 잘 하려면 다양한 방면으로 지식을 축적해 두는 것이 좋으며 전반적인 인터넷 기술에 대해 알고 있어야 합니다. 즉, 사이트를 만들고 운영하는데 있어서 필요한 HTML, 디자인, 프로그램, 데이터베이스, 서버관리 등에 대해서 깊이 있게는 몰라도 기본적인 지식은 가지고 있어야 한다는 것입니다. 웹기획을 하고 사이트를 구성하는 순서는 아래와 같습니다. 1. 사이트의 목적을 정확하게 파악 2. 유사 사이트 벤치마킹 3. 컨텐츠 기획, 사이트의 규모와 성향 기획 4. 메뉴구성, 디자인 컨셉, 사이트 정책결정, 컨텐츠 구성 등 5. 사이트 제작(디자인, 프로그램) 웹기획에 대해 제대로된 강좌를 하려면 웹기획자가 되는 방법부터 사이트 분석, 컨텐츠 기획, 프로그램 기획, 디자인 기획 등에 대해서 자세히 기술해야 하겠지만 본 강좌에서는 웹기획 중 기본이 되는 메뉴구성 및 페이지 구성, 사이트 제작 시 필요한 기본 코딩규칙 및 프로그램 구성 규칙에 대해서 알아보도록 하겠습니다. 앞으로 기술되는 부분들이 웹기획의 정석은 아닙니다. 아사달에서 여러 사이트를 제작하고 운영해 오면서 익힌 부분들이고, 현재 아사달에서 이렇게 하자고 규칙을 세워 놓은 것들입니다. 여러분들도 웹사이트를 기획할 때 참고하시면 여러모로 도움이 될 것 같습니다.

단일메뉴

순차적 메뉴 구조를 선형구조라고도 하며, 연속된 일련이 정보를 순차적으로 볼 수 있게 구성하는 것을 말합니다. 예) 도메인검색 --> 신천서 작성 --> 카드결제 --> 등록완료

트리메뉴

최상에 있는 홈페이지로부터 이어져 내려오는 방식이 피라미드 구조와 같은 개념의 계층을 말합니다.

네트웍 구조

선형 구조와 계층구조 어울어져 만들어진 구조를 말합니다.

홈페이지 및 프로그램의 구성은 메뉴(menu) 방식으로 합니다. 즉, 독립적인 웹 페이지가 존재하면 반드시 메뉴에 추가하고 링크를 걸어 줍니다. 메뉴 방식에 대한 설명은 전 단계인 "메뉴 구조의 종류" 부분을 참조하시기 바랍니다.

단, 예외적으로 쇼핑몰에서 물건을 구입한다거나 회원가입을 한다거나 할 때와 같이 순차적인 구성이 필요할 경우에는 선형(line) 구조를, 팝업 창에는 함정(pitfall) 구조 등을 사용할 수 있습니다.

? 선형구조 : 연속된 일련이 정보를 순차적으로 볼 수 있게 구성하는 것을 말합니다. 예) 도메인검색 -> 신청서작성 -> 카드결제 -> 등록완료 ? 함정구조 : 팝업창과 같이 현재의 웹페이지와 연동성이 없이 독립적으로 구성하는 것을 말합니다.

메뉴를 클릭 시 새 창을 띄우지 않고 페이지 넘김 방식으로 처리합니다. 단, 예외적으로 새 창 띄우기 를 한 경우에는 반드시 "닫기" 버튼을 만들어 넣어줍니다.

새 창으로 띄워야 할 경우 아래와 같이 새 창에 닫기 버튼을 두어 새로 뜬 창을 닫을 수 있도록 해 줍니다. 이러한 작은 부분들이 사이트에 방문하는 고객들을 위한 배려인 것입니다.

메뉴의 넓이(메뉴의 개수)는 5~10개 사이로 합니다.

보통 사람들이 가장 기억하기 좋은 개수가 7개라고 합니다. 따라서 메뉴 개수는 7개 ± 2~3개 정도인 5~10개 사이로 하는 것이 좋습니다.

메뉴의 깊이는 전체 페이지 수를 고려하여 다음과 같이 정하는 것이 좋습니다.

(1) 10 페이지 정도 : 1단 깊이 (2) 30 페이지 정도 : 2단 깊이 (3) 100 페이지 정도 : 3단 깊이 (4) 1000 페이지 정도 : 4단 깊이

메뉴의 깊이는 최대한 줄여 클릭수를 최소화할 수 있도록 기획하는 것이 좋습니다. 아래와 같이 3단 구조에서 조금만 구조를 변경하면 2단 구조로 줄일 수 있는데도 불구하고 불필요하 게 3단 구조로 하는 것은 좋지 않습니다.

각 메뉴가 시작하는 부분에 첫페이지(index page 또는 gate page)를 만들어 줍니다.

첫 페이지인 index.htm 페이지를 만들어 두면 해당 메뉴에 대한 전체적인 설명을 간략하게 해 놓을 수도 있고 주요한 메뉴로 바로 이동할 수 있게 구성해 놓을 수도 있어 좋습니다.

단, 첫 페이지를 따로 만들지 않은 경우에는 유동 포워딩 방식으로 처리합니다.

위와 같이 해당 메뉴에 대한 간략한 정보들을 index.htm 페이지를 만들어서 넣어두면 좋으나 굳이 index 페이지를 별도 구성해야 할 만큼 해당 메뉴에 내용이 많지 않거나 해당 페이지까지 만들 여유가 없을 때에는 유동 포워딩 방식으로 처리하는 것이 좋습니다. 아래의 그림과 같이 1차 메뉴로 프로그램을 선택하고 2차 메뉴로 아사폴을 선택할 경우 아사폴 메뉴의 링크는 아래와 같이 설정합니다. http://asadal.com/program/poll/index.htm 이 때, 별도의 첫 페이지인 index.htm 파일이 없는 경우에는 index.htm 파일에 아래와 같이 해당 페이지로 포워딩을 설정해 둡니다. 이렇게 해 두면 해당 메뉴를 클릭했을 때 연결할 페이지가 다른 페이지로 변동되어도 일일이 메뉴 이미지에 링크된 경로를 수정하지 않고도 쉽게 index.htm 파일의 수정만으로 변경할 수 있어 관리상 편리합니다.

아래의 내용들은 현재 아사달에서 사용하고 있는 파일 관리 규칙들입니다. 고객 여러분께서 반드시 아래의 사항을 따라야 하는 것은 아닙니다. 다만, 어떤 웹페이지든 일정한 규칙을 가지고 파일을 관리하도록 나름대로의 규칙을 세워 보시기 바랍니다.

파일명은 한글이나 특수문자를 사용하지 않고 쉬운 영어단어를 사용합니다.

(예) 서비스신청.htm (X), order.htm (O)

파일명을 한글로 할 경우 브라우저의 옵션에 따라 페이지가 보이지 않는 경우가 있습니다. 따라서 파일명은 항상 영문으로 하는 것이 좋습니다.

파일명에 아라비아 숫자를 사용하지 않습니다.

단, 예외적으로 파일이 연속적으로 이어지는 경우 또는 연도나 학번 등 숫자로 구성해야 하는 경우에는 파일명에 숫자를 사용할 수 있습니다. 파일명을 정하기 어려울 때 보통 숫자를 붙이는 경우가 많습니다. 하지만, 조금 귀찮더라도 해당 메뉴에 맞는 파일명으로 구성해 두면 관리상 좋고 URL에 보여지는 파일명도 보기 좋습니다.

파일명은 영문자 소문자를 사용합니다.

단, 예외적으로 프로그램 이름이나 마케팅을 위해 필요한 경우에 대문자를 사용할 수 있습니다. 파일명에 대문자와 소문자를 섞어서 사용할 경우 링크를 잘못 걸어 링크가 깨지는 실수를 하기 쉬우며, 웹브라우저에 URL을 칠 때에도 불편함이 있습니다.

파일명에 특수문자를 사용하지 않습니다.

단, 부득이하게 사용해야 할 경우라면 옆줄(-, hyphen)을 사용하지 않고, 밑줄(_, under bar)을 사용합니다.

파일명의 길이는 점(.)과 확장자를 제외하고 10자를 넘지 않게 합니다.

물론 반드시 10자를 넘으면 안 된다라는 의미는 아닙니다. 되도록이면 짧은 영어단어를 사용하는 것이 좋으며 의미상 파일명이 10자를 조금 넘는 경우에는 사용해도 무방합니다.

HTML 파일의 확장자는 ".html"이 아니라 ".htm"으로 합니다.

단, 외부에서 제작된 프로그램 등 고치기 어려운 경우에는 ".html"을 사용할 수 있습니다. (예) list.html (X), list.htm (O)

이 조항은 현재 아사달에서 사용하는 방법으로 누구나 반드시 htm으로 해야 한다는 것은 아닙니다. 다만, html이든 htm이든 어느 하나로 통일해서 사용하는 것이 좋습니다.

PHP, Java 등 프로그램이 포함된 파일의 경우, 메뉴에 있는 파일은 ".htm"을 사용하고, 메뉴에 없는 파일은 ".php", ".sql", ".jsp" 등을 사용합니다.

이 부분 역시 통일성 있는 웹페이지 관리를 위해서 입니다. 메뉴에 링크되는 파일들의 확장자를 통일하는 것이 좋습니다.

유사한 기능의 웹 페이지라고 할지라도 메뉴에 별도로 존재하는 경우에는 각각 별개의 독립적인 파일 로 만듭니다.

(예) list.htm?code=service (X), service.htm (O)

물론 위의 첫번째 예와 같이 구성하는 것이 훨씬 편리할 것입니다. 하지만 조금만 정성을 들이면 고객이 좀더 쉽게 접근할 수 있도록 웹페이지를 구성할 수 있습니다. 위의 두번째 예에서 service.htm을 구성할 때에는 list.htm 파일의 내용을 그대로 복사해서 넣어두는 것이 아니라 list.htm을 그냥 인클루드(include)해 사용하면 관리하는 데에도 전혀 문제가 없습니다.

이미지 파일은 해당 폴더 밑에 "해당폴더/image/"라는 별도의 폴더를 만들어 모아 둡니다.

이미지 파일은 별도의 폴더를 만들어서 넣어두어 html 파일과 별도 관리하는 것이 좋으며 html 파일이 있는 해당 폴더 밑에 이미지 폴더를 두면 폴더 이동 시 문제없이 이동할 수 있어 좋습니다.

아이콘 등 색상 수가 적은 이미지는 확장자를 ".gif"로 하고, 사진 등 색상 수가 많은 이미지는 확장자를 ".jpg"로 합니다.

작업 중 임시로 만든 파일이나 사이트 개편으로 인해 더 이상 필요가 없게 된 파일은 남겨두지 않고 모두 삭제합니다.

단, 따로 보관할 필요가 있는 파일인 경우에는 별도의 폴더를 만들어 옮겨둡니다.

임시로 만든 파일이나 불필요해진 파일들을 그때 그때 정리하지 않으면 사이트에 필요없이 많은 파일들이 쌓여 관리상 좋지 않습니다.

웹 페이지는 조립식으로 구성합니다. 반복되는 부분일 경우 다른 페이지에서 불러와 사용할 수 있도록 웹 페이지를 구성할 경우에는 그림과 같이 해당 페이지의 레이아웃을 고려하여 조립식으로 구성합니다. 예전에는 이런 조립식 구성 방법으로 프레임 방식을 사용했으나 최근에는 웹페이지를 프레임으로 구성하지 않고 반복되는 부분을 인클루드(include)함으로써 하나의 페이지처럼 보이게 하되, 관리는 프레임 방식일 때처럼 편리하게 할 수 있는 조립식 구성방식을 사용하고 있습니다.

다른 웹 페이지와 공통적으로 사용되는 부분을 처리하기 위해 프레임(frame)을 사용하지 않고 인클루 드(include)를 사용합니다. 단, 다른 웹 사이트의 내용을 불러오는 경우 등 불가피한 경우에는 프레임 을사용할 수 있습니다.

위 1번의 첫번째 그림과 같은 형식의 웹페이지를 구성할 경우 공통적인 부분을 아래와 같이 프레임을 사용하여 구현할 수도 있고 인클루드 방식을 사용하여 구현할 수도 있으나 예외적인 경우를 제외하고는 인클루드 방식으로 구현합니다. 프레임 방식의 경우 해당 첫 페이지가 뜰 때 프레임을 사용하지 않은 페이지에 비해 1-2초 가량 느린 단점이 있습니다.

여기서 "$DOCUMENT_ROOT"는 해당 도메인 계정의 최상위 폴더를 의미하는 PHP 변수입니다. 예를 들어 도메인명이 mydomain.com이라면 <? include "http://mydomain.com/top.htm" ?>이라고 하는 것보다는 <? include "$DOCUMENT_ROOT/top.htm" ?>이라고 변수를 사용하여 표시하는 것이 더 좋습니다.

다른 웹 페이지와 공통적으로 사용되는 부분을 따로 떼어 머리말(begin.htm) 파일과 꼬리말(end.htm) 파일을 만들고 각각 해당 페이지에서 불러와 사용합니다.

보통의 경우 상단 메뉴와 저작권 부분은 어느 페이지나 공통으로 사용되는 경우가 많습니다. 따라서 이렇게 공통으로 사용되는 부분은 위와 같이 별도로 머리말/꼬리말 형태로 별도 구성하여 다른 웹페이지에서 불러와 사용할 수 있도록 하는 것이 좋습니다.

다양한 페이지 유형(type)이 존재하는 웹 사이트의 경우, 각 파일의 맨 위에 페이지 유형을 표시하는 변수를 넣어주고, 머리말 파일과 꼬리말 파일에서 해당 변수에 맞게 처리하도록 합니다.

페이지 유형에는 여러가지 유형이 있을 수 있습니다. 아래의 경우 외에도 다양한 유형이 있을 수 있으나 일반적으로 많이 사용되는 유형 4가지는 아래와 같습니다.

변수를 사용하기 어렵거나 이미 배포하여 사용 중인 솔루션의 경우에는 전체 머리말 및 꼬리말 파일과 별도로 해당 분류에 공통적으로 사용되는 부분을 따로 떼어 내부 머리말 및 꼬리말 파일을 만들어 사용 할 수 있습니다.

예를 들어 아사보드의 경우 아래와 같이 begin/end가 구성되어 있습니다. /AsaBoard/begin.htm // 전체 begin.htm /AsaBoard/end.htm // 전체 end.htm /AsaBoard/bn/게시판이름/begin.htm // 내부 begin.htm /AsaBoard/bn/게시판이름/end.htm // 내부 end.htm

여러 페이지에서 공통적으로 사용되는 부분을 표시하기 위해 다음의 파일을 따로 만들고 해당 페이지 에서 불러와 사용할 수 있습니다. (예) menu.htm, left.htm, right.htm.

웹 문서를 코딩할 때에는 영문 대문자가 아니라 소문자를 사용합니다.

웹 문서의 헤드(head) 부분에 <title> 태그와 <meta> 태그를 포함시킵니다.

한글 페이지일 경우 위와 같이 메타 태그로 charset을 euc_kr로 지정해 주어야 한글이 깨지지 않고 보여집니다. 타이틀 태그 또한 지정해 주어 해당 웹페이지가 어떤 페이지인지 제목을 붙여주는 것이 좋습니다. 방문자가 "즐겨찾기"에 등록할 경우 타이틀 태그에 쓴 제목이 그대로 즐겨찾기에 저장됩니다.

하나의 파일은 왼쪽 처음부터 빈칸 없이 바로 시작합니다.

아래와 같이 begin.htm을 include할 때 begin.htm의 파일 끝과 현재 파일의 처음의 정렬을 맞추기 위해 들여쓰기를 하는 경우가 있는데 이런 경우 들여쓰기를 하지 않고 처음부터 시작하는 것을 원칙으로 합니다.

웹 문서는 탭(tab)과 엔터(enter)를 적절히 사용하여 보기 좋게 정렬합니다.

예를 들어, 표를 그릴 경우 아래와 같이 코딩합니다.

<tabel>과 <tr>은 같은 열에 엔터로 구분하여 적고, <td>는 탭으로 한칸 들여쓰기 하여 적습니다. </td></tr>의 닫는 태그는 내용 끝에 엔터 없이 붙여서 적으며, </table>의 닫는 태그는 엔터로 구분하여 적습니다.

링크 시에는 절대경로를 사용하지 않고 상대경로를 사용합니다.

링크 시 상대경로를 사용하기 어려운 경우에는 변수명을 사용하여 경로를 설정합니다.

단, 예외적으로 머리말(begin.htm) 파일 등 인클루드(include) 방식으로 다른 파일에 삽입되는 파일의 경우에는 링크 시 절대경로를 사용할 수 있습니다.

이미지 파일을 수정한 경우 방문자 컴퓨터에 캐시(cache)가 남아 있어서 수정한 이미지가 보이지 않 는 문제가 생길 수 있으므로, 이미지 파일명을 변경하여 업로드(upload)합니다.

방문자가 알기 쉽게 예를 들어 설명하는 경우 개발자의 성명이나 별명을 사용하지 않는 것이 좋습니다.

필요한 곳에 한글로 주석을 붙여 다른 사람이 봐도 쉽게 알 수 있게 합니다.

개별 프로그램이 전체 웹 페이지를 생성하는 방식이 아니라, 웹 페이지에서 해당 프로그램을 불러오는 방식으로 처리합니다.

위의 예와 같이 가급적이면 프로그래밍을 할 때 아사보드와 같이 아사보드 페이지에 머리말, 꼬리말을 붙여서 페이지를 구성하는 것이 아니라 아사폴과 같이 해당 페이지에 인클루드해서 사용할 수 있도록 짭니다.

각각의 프로그램은 다른 프로그램과 충돌하지 않도록 자신이 관여하는 범위에 한하여 제어해야 합니다.

아사멤버, 아사보드, 아사스탯, 아사폴 등 어떤 프로그램을 만들 때에는 다른 프로그램과 충돌하지 않도록 변수나 함수 등을 고려해서 제작해야 하며, 반드시 한 페이지에 해당 프로그램을 모두 붙여 보고, 서로 충돌나는 부분이 없는지를 테스트해 봅니다.

프로그램 소스에 한글로 주석을 붙여서 알아보기 쉽게 만습니다. 주석은 간단 명료하게 작성하고, 띄어쓰기와 맞춤법을 지킵니다.

프로그램에서 사용하는 변수명은 다른 변수명과 충돌하지 않도록 길더라도 정확하게 표현합니다.

변수명에 특수문자를 사용하지 않습니다. 단, 부득이하게 사용해야 할 경우라면 옆줄(-, hyphen)을 사 용하지 않고, 밑줄(_, under bar)을 사용합니다.

변수명에 프로그램 개발자의 성명이나 별명을 사용하지 않습니다.

변수명에 프로그램 개발자의 성명이나 별명, 또는 애인의 이니셜 등 변수의 쓰임새와 관계없는 개인적인 문자를 사용하지 않습니다.

자주 사용하는 기능은 매번 반복해서 만들지 않고, 별도의 라이브러리(library)에 추가한 뒤 불러와서 사용합니다.

예) 우편번호 검색, 게시판 페이지 이동, 후이즈 조회 등

테이블은 아래와 같이 구성합니다.

1. 표의 맨 위쪽에 전체 데이터 개수와 해당 시기의 개수 등 기본 통계를 보여줍니다. 2. 표의 위쪽 부분에 검색 창을 붙입니다. 검색할 내용은 표의 항목을 기준으로 설정하며 그 순서 또한 항목의 순서와 같게 합니다. 3. 표의 오른쪽 윗부분에 한 페이지 당 보여줄 가로줄(line)의 수(목록수)를 선택할 수 있게 합니다. (1) 기본값(default)은 30으로 설정합니다. (2) 목록수의 개수는 5~100까지 5 단위씩(5, 10, 15, 20 …100) 끊어서 설정하여 사용자가 목록수 를 선택할 수 있게 합니다. 4. 필요한 경우 표의 오른쪽 윗부분에 “추가하기” 버튼을 만듭니다. 5. 표에 윗부분에 있는 항목을 클릭 시 해당 항목을 기준으로 정렬되어 보이게 합니다. 한 번 더 클릭 할 경우에는 역순으로 정렬되어 보이게 합니다. 6. 표의 아랫부분에 페이지 이동 기능을 만듭니다. 페이지 이동 기능은 위의 그림과 같이 첫 페이지와 마지막 페이지를 숫자로 표시하여 숫자를 클릭하면 해당 페이지로 이동할 수 있게 합니다. 7. 항목 끝에는 “관리” 항목을 두어 해당 라인의 자세한 정보 확인 및 수정, 삭제 등을 할 수 있게 구성합니다.