달콤한상상

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

-> 물론 이정도는 다들 염두해 두셨을 거라 믿고 부가 설명없이 넘어가겠습니다. ^^

2. 자료조사
자료가 충분히 준비된 상테에서 진행을 해야 순조롭게 이루어집니다.
필요한 내용들을 text로 모두 준비 해 두고, 이미지들도 Scanning 해 두어 필요할 때 바로 꺼내어 쓸 수 있어야 합니다. 웹에서 글씨를 읽는 것은 책보다는 집중성이 떨어지고 쉽게 포기 해 버리는 경우가 많기 때문에 필요이상의 많은 자료보다는 중요한 부분만을 요점으로 간단명료하게 준비 해 두는 것이 좋습니다. 오타검사 또한 중요합니다.

-> 저는 사실 자료조사보다는 벤치마킹이 더 중요하다고 봅니다. 정말 좋은 싸이트가 있다면, 혹은 경쟁상대가 될만한(물론 혼자만의 생각이겠지만 ㅋㅋ) 싸이트가 있다면 그 싸이트의 전체 레이아웃부터 footer(카피라잇표시부분)까지 쫙 훌터 따라해 보면서 자기것으로 만들면 좋을것 같아요..물론 시간이 허락하는 만큼만이죠 ^^...모방은 창조의 어머니라는 말 거짓말 아닙니다!!!

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

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

-> 3번과 4번 5번을 붙여서 설명하는 것이 편하겠네요 ^^(저는 거의 동시에 이작업을 하거덩요)

 앞의 주제설정과 자료조사(혹은 사측 요구도조사) 및 다른 싸이트 벤치마킹이 끝나면 대충 이 싸이트에 들어갈 내용이 무엇일지 쭈루룩 나옵니다. 그것을 구조화시켜 표같은 걸로 작성하면 구조도가되는거죠 ^^ 저도 이번 작업때 한번 작성 해봤는데 프린터로 뽑아서 모니터옆에 붙여놓고 필요할때마다 수정, 추가 메모하니깐 헷갈리지않고 편해서 좋더군요 ^^..아래는 제가 짠 대충의 회사 홈피 구조도입니다.

1)메인페이지

왼쪽플레임(180px)            가운데플레임(470px)             오른쪽플레임(150px)

-----------------------------------------------------------------------------------------------

로그인                              주요사업/이벤트큰배너         싸이트내부검색

회원가입                           미니게시판1                        동맹싸이트배너

각종사업배너                     미니게시판2

-----------------------------------------------------------------------------------------------

Footer(로고 주소 전화번호 Fax 관리자이메일)

2)메뉴분류

소개 : 소개1, 사업, 연혁, 약도

주요컨텐츠1 : .....

주요컨텐츠2 : .....

열린광장 : 자유게시판, 사진자료, 문서자료, 링크

제가 대충 짠거인대 글자 문구하나, 픽셀하나까지 처음부터 정확하게 정해놓고 하는게 좋아요^^

그리고 실제로 할땐 이것 보다 훨씬 복잡하답니다. ㅠㅠ

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

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

-> 음 여기서 부터는 앞으로 나가게 될 포토샵 강의에서 하는 게 좋겠군요.. 저도 처음에 아무생각 없이 픽셀만 맞추면 되겠지 하고 시작했는데..전체적인 통일성을 맞추면 세부적인 부분이 안맞고,,하나하나신경쓰다보면 통일성이 깨지고..해서 아무래도 여기서 부터 흔이 말하는 감(感)이 필요한것 같아요 ㅋ

 그냥 여기서는 홈페이지 기조색을 2-3가지(RGB색상코드로 정확하게) 정해두면 통일감있고 좋겠다는 말 정도만 해둘게요^^ 

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

-> 요즘은 에디터가 잘 나와있어서 저장과 동시에 ftp에 올라간답니다. 참 편하죠?^^ 다시말해 컴퓨터에서 저장하는순간 웹에서도 바로 리뉴얼 된다는 말입니다. 저는 주로 텍스트편집할때는 울트라 에디터롤 사용하고 여기서 기본적인 구조 틀이 갖춰지고, 세세한 디자인적인 면들을 고칠때만 드림위버를 사용한답니다. 뭐 절대적으로 좋은 프로그램은 따로없고요..취향에 따라 쓰세요 ^^

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

-> 개인적으로 비추천입니다. ^^ 제가 컴공과를 다녀서 그런지(공부도 못하는게 땡고집은? -_-;;)..잘모르고 썼을때 에러의 주요 원인이 되고, 코딩자체가 지저분해지고 길어진답니다. ㅠㅠ 필요한부분 모두 html로 작성하시고.. 꼭 필요한 부분이 있다면 마지막에 덧붙이도록 합시다 ^^ 

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

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

-> asp나 자바스크립트 혹은 비쥬얼 베이직 등등의 에러의 경우 익스플로러의 메뉴 (보기)에서 (상태표시줄)을 선택하시면 브라우저 왼쪽 아래에 노란색 느낌표로 뜬답니다. 고놈을 더블클릭하면 에러가 뭔지 상세하진 않아도 대충은 에러가 난 코드의 줄번호까지 나옵니다. 울트라 에디트로 보면 줄번호가 표시 되기대문에 표시되는 줄번호를 찾아가 고쳐주면 된답니다. ^^

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

!!!물론 이걸로 강의가 끝난건 아닙니다. ^^ (혹시 걱정하는분이 계시다면..그럴리 없겠지만.-_-;;)

앞으로의 HTML강의에서 하나하나 단계별로 예시를 들면서 설명을 해드리도록 하죠 ^^ 시간이 허락하는한 ㅋㅋ