웹사이트 기획에서 제작까지

■ 웹사이트 기획에서 제작까지

웹사이트 기획에서 가장 중요한 점은 홈페이지의 구축 목적입니다.
"왜 만드는가" "이용자층은 누구인가?" "어떤 내용을 담을 것인가" 등의 정확한 사이트의 성격을 정해놓아야 기획이
쉽습니다.

웹디자인은 디자인을 위한 디자인이라기 보다는 웹을 이용하는 사람들을 위한 보다 편리한 User Interface와 사이트의 특성에 맞는 개성있는 표현, 그리고 이용이 편리하고 보기에 좋은 화면구성을 하는 것입니다.
홈페이지를 자신의 미적감각의 표현대상이라 생각하고 그저 예쁘게만 만들려고 하는 것보다 홈페이지의 기본 원리에서 벗어나지 않는 최대한 절제된 표현이 중요합니다.

1. 주제설정
만들고자 하는 사이트의 주제를 파악해야 합니다. 주제를 정해야 디자인의 컨셉(concept)을 잡고 그에 맞는 디자인을 할 수 있기 때문이지요.
주제에 따는 홈페이지 제작의도 또한 파악해야 합니다. 사이트에서 강조하고 싶은 것은 무엇인지(예 : 회사홍보, 제품소개, 전자상거래 등),주요 이용고객의 Target은 누구인지 (예 : 학생, 주부, 직장인, 각분야의 전문가 등)에 따라 디자인의 경향이 많이 달라지게 됩니다.

2. 자료조사
자료가 충분히 준비된 상테에서 진행을 해야 순조롭게 이루어집니다.
필요한 내용들을 text로 모두 준비 해 두고, 이미지들도 Scanning 해 두어 필요할 때 바로 꺼애어 쓸 수
있어야 합니다.

웹에서 글씨를 읽는 것은 책보다는 집중성이 떨어지고 쉽게 포기 해 버리는 경우가 많기 때문에 필요이상의 많은 자료보다는 중요한 부분만을 요점으로 간단명료하게 준비 해 두는 것이 좋습니다.
오타검사 또한 중요합니다.

3. 메뉴분류
메뉴를 크게 몇가지로 나눌 것인지, 그 나뉜 메뉴는 또 몇개의 sub로 나뉠지를 결정합니다.
메뉴가 너무 많게 되면 혼란스러우므로 적당히(5~7개가 적당) 나누고, 메뉴의 이동이 너무 잦지 않도록 분류를 잘 나누어야 합니다.
sub메뉴들이 3단계(Three depths) 이상으로 계속 나뉘게 되면 화면상 배치하기도 어렵고 자칫 어지러워질 수 있으므로 간결하고 분명하게 구분하여 나누어야 합니다.
메인메뉴는 7개 이상이 넘어가면 화면 분배상, 이용상 좋지 않습니다. 가장 이상적인 메뉴는 5개 이지요.
그리고 Home, E-mail, Sitemap, English 등의 메뉴는 메인메뉴와는 구분지어 다른 디자인으로 꾸미는 것이
좋습니다.

4. 구조도 작성
메인메뉴과 서브메뉴 등을 정리하여 표로 만든 구조도가 필요합니다.
이때 이미지나 HTML 의 네이밍룰(Naming Rule)도 함께 정해두셔야 합니다.
네이밍룰이란 필요한 내용들의 문서에 대한 이름들을 나름대로 규칙을 짜서 만들어 놓으면 정리하기도 편하고 찾기도 쉬운 이점이 있습니다.

5. 화면레이아웃
디자인 작업에 들어가기 전에 레이아웃을 정해야 합니다.
메뉴프레임은 어떤 모양으로 할 것인지, 메인메뉴와 서브메뉴는 어느곳에 배치 시킬지 등이지요.
이런 스케치들을 러프스케치(Rough Scatch)라고 합니다.

6. 디자인 작업
디자인 작업에 주로 쓰이는 툴은 Adobe Photoshop입니다.
우선 프레임 디자인(메뉴가 있는 부분)을 꾸며봅니다. 이‹š 프레임은 어떻게 나눌 것인지를 염두에 두면서 작업해야 합니다.
이미지는 어떻게 쪼갤것인지, 백그라운드로 쓸 것인지, 그냥 이미지로 얹을 것인지 모두 고려해야 합니다.

7. 그림쪼개기
결정된 디자인을 웹에 띄우기 위해서는 그림을 GIF나 JPG로 저장 해야 합니다.
이 때 큰 그림의 경우는 여러조각으로 쪼개어 Table에 정렬하여 올리게 됩니다.
또한 　Javascript　나 여러 효과를 위해서도 이미지를 쪼개야 하는 경우가 많이 생깁니다.

8. 웹에 올리기
HTML(Hyper Text Markup Lanague)을 이용하여 준비된 내용들을 브라우져에 실제로 띄우는 작업입니다.
직접 메모장에서 HTML을 만드는 경우도 있고 Editor(Frontpage, 나모 웹에디터, Dreamweaver, Golive 등)을 이용하여 만들기도 합니다
전문가들은 주로 기본 틀을 에디터에서 잡고 메모장으로 소스를 추가하여 정리하는 방법으로 작업합니다.

9. Scripting
화면을 좀더 Intractive하게 만들어 주기 위한 방법으로 　Javascript　, Java applet, dHTML 등이 있습니다.
이런 작업들을 추가하여 동적이고 화려하게 만들어 줍니다.

10. 테스트
링크된 곳은 제대로 연결이 되어있는지, 모든 브라우져에서 무리없이 잘 보이는지, 에러나는 부분은 없는지 전체 페이지를 모두 테스트 해 봅니다.

11. 오류수정
테스트를 거쳐 발견된 오류들을 수정합니다.

12. 서버올리기
웹에 바로 연결되어 있는 서버로 올립니다.
FTP는 주로 ws_ftp나 cute ftp를 많이 씁니다.
디렉토리 구조도 제대로 확인 한 후에 올리도록 합니다.