달콤한상상

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)도 함께 정해두셔야 합니다.
네이밍룰이란 필요한 내용들의 문서에 대한 이름들을 나름대로 규칙을 짜서 만들어 놓으면 정리하기도 편하고 찾기도 쉬운 이점이 있습니다.

 

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

 

-> 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강의에서 하나하나 단계별로 예시를 들면서 설명을 해드리도록 하죠 ^^ 시간이 허락하는한 ㅋㅋ

안녕하세요?
디지탈디자인의 백종수입니다.
이번에 새롭게 웹디자인 방법론 강좌를 진행하게 되었습니다. 오늘 강좌는 앞으로 진행될 강좌에 대한 내용을 미리 살펴보고 왜 웹을 디자인하는 방법을 배워야 하는가에 대한 이야기를 하려고 합니다.

1-1. 왜 웹을 디자인하는 방법을 배워야하나?

국내에는 많은 웹디자이너들이 있습니다. 제가 굳이 언급하지 않아도 이 강좌를 보시는 분이라면 다 아실 것입니다. 중요한 것은 `왜 웹디자이너가 많은가` 라는 것입니다. 여러분들도 이런 생각을 한번쯤 해보셨을 것입니다. `나와 같은 일을 하는 웹디자이너 너무 많구나!` 하는 생각..., 이런 생각을 하다보면 자기 자신도 모르게 웹디자인 일에 무기력해지고 정체성을 느끼게 되기도 합니다. 저도 그런 경우가 있었습니다.

이에 대한 해답은 웹디자인 교육에 있습니다. 대부분의 예비 웹디자이너들은 웹을 디자인하기 위해 학원을 다니고, 그 속에서 다양한 웹디자인 방법을 배웁니다. 포토샵, 일러스트레이터, 플래시, 드림위버, HTML, Javascript 등과 같은 것을 배우죠. 그러나 정작 배워야할 것을 못배운 채 웹디자인을 시작하게 됩니다. 하지만 웹디자이너로써 사회적 생명은 짧고, 회사를 옮기는 경우가 빈번하게 일러나는 것이 현재 웹디자인 업계의 현실입니다.

웹디자인 업계의 현실이 이렇게 된 것은 웹을 디자인하는 방법을 배우기 전에 툴 다루는 것을 먼저 배웠기 때문입니다. 그렇다면 툴을 다루는 것을 배우기 전에 무엇을 배워야 한다는 말인지 의문이 들 것입니다. 그것은 다름아닌 HTML입니다.

제가 HTML라고 해서 놀라지 않으셨는지요? 그 시시한 것을 뭐하러 배우냐고 반문하실 분도 계실 것이고, 나모나 드림위버를 이용하면 척척 다알아서 코딩해주는 데 HTML을 배우면서 시간을 낭비하는 것이 아니냐고 의문을 제기할 수도 있을 것입니다. 그러나 저는 조금 다르게 생각합니다. 지금 HTML은 거의 찬밥 신세나 다름없습니다. 너나할것 없이 보수 좋고, 사회적 생명력이 웹디자인보다 긴 웹 프로그램을 배우느라 정신이 없는 시기이기 때문이죠. 그러나 HTML을 모르고는 웹디자인도 웹 프로그램도 할 수 없다는 것을 알아야합니다. 겉이 번지르하다고 해서 좋은 웹사이트가 아니기 때문이죠.

그렇다면 왜 HTML을 배워야 할까요? 우리가 알고 있는 HTML은 웹페이지를 만든데 가장 기본이 되는 프로그램 언어라고 요약할 수 있습니다. 이 말에 이의를를 제기하는 사람은 없을 것입니다. 왜냐하면 맞는 말이기 때문이죠. HTML이 웹페이지를 만든다는 말은 다시 말해 웹을 디자인한다는 말과 같습니다. 그렇다면 웹을 디자인하는 것을 배운다는 것은 바로 HTML 배우는 것으로 결론지을 수 있을 것입니다. 바로 HTML로 웹페이지를 디자인하는 방법을 배워야 한다는 것입니다.

제가 HTML로 웹을 디자인하는 배워야한다는 것은 나모나 드림위버와 같은 툴을 전혀 사용하지 않고 웹페이지를 만들어야 한다는 것은 아닙니다. 또한 HTML 태그와 속성을 다 외워야 한다는 말도 아닙니다. 그럼 무엇이냐고 성급하게 물어보실 분도 계실 것입니다. 그것은 다름아닌 HTML에 담긴 철학과 원리에 대한 이해를 배워야 한다는 것입니다. 철학과 원리는 포토샵으로 웹페이지의 시안을 만드는 것과 아무런 관련이 없습니다. 또한 플래시 에니메이션을 구현하는 데에도 아무런 도움이 되지 않습니다. 그러면서도 배워야 한다는 것은 지금과 같은 상황을 만들지 말아야 한다는 것과 앞으로 웹디자인에 대한 가치를 높이기 위해서입니다. 그리고 늦은 만큼 제대로 웹을 디자인 하는 방법을 알아야 한다는 것입니다.


1-2. 웹을 디자인 하는 것이 아니라 정보를 디자인하는 것이다.

많은 웹디자이너들이 실수하는 말 중에 하나가 `웹을 디자인한다` 는 말입니다. 이 말의 의미는 `제품을 디자인 한다` 라는 말과 다를게 없습니다. 즉, `웹 = 제품` 이라는 등식을 자연스럽게 만들어 내는 것이죠. 그러나 웹은 제품이 아닙니다. 웹에서 수익이 발생한다 해서 웹 자체가 제품이 될 수는 없는 것입니다. 그것은 HTML과 다른 길을 가는 것입니다. 웹은 정보를 전달하는 하나의 매체로 인식되어야 합니다. 이것이 HTML의 철학입니다. 다시 말하자면, HTML은 정보를 디자인하기 위한 언어라는 것입니다. `정보를 디자인 한다` 는 것은 누구든지 원하는 정보를 쉽게 찾을 수 있도록 만든다는 것입니다.

그렇다면 HTML이라는 것이 어떻게 만들어 졌는지 잠시 살펴볼까요? HTML에서 M은 Markup을 의미합니다. 인쇄 업계에서는 `활자 지정` 이라는 말로 사용됩니다.

디지탈디자인

위 코드는 HTML에서 `디지탈디자인` 이라는 텍스트를 굵은 스타일로 지정하라는 것입니다. 이 코드를 웹브라우저가 읽어 들여 굵은 스타일의 글씨를 만드는 것입니다. 여기서~를 Markup Tag라고 합니다. 그러나 인쇄에서는 원고에 `디지탈디자인` 이라는 글씨에 b 또는 bold라고 표시하면 조판을 하는 사람이 이 원고를 보고 굵은 스타일의 활자로 조판을 하게 됩니다. 따라서 HTML의 원리는 조판의 원리를 그대로 차용한 것이라 할 수 있습니다.

이처럼 HTML에서 사용되는 모든 태그와 속성의 원리는 인쇄의 조판과 거의 흡사하다는 것을 알아야 합니다. 또한 HTML과 함께 사용하는 CSS라는 스크립트가 있습니다. CSS는 HTML이 가지는 조판의 한계를 해결해 주는 역할을 하는 스크립트입니다. 예를 들자면, 줄간격을 설정하거나, 폰트의 크기를 자유자재로 조절하는 기능을 수행합니다. 인쇄가 조판에서 DTP로 발전한 것과 비슷하다고 보면 됩니다.

HTML의 원리가 조판과 유사하다면, HTML의 철학은 무엇일까요? 그것은 다름아닌 누구나 정보를 쉽게 찾는다는 것에 있습니다. 본 인터넷 방법론을 끝까지 수강하다보면 자연히 HTML의 철학에 대해 알게 되겠지만, 미리 말씀을 드리자면 철학의 핵심은 `누구나`에 있습니다. 남자건 여자건, 아이이건 노인이건, 일반인이건 장애인이건 간에 누구나 웹에서 정보를 찾고 얻을 수 있게 하는 것이 HTML의 철학입니다.

예를 들자면, 하이퍼 링크가 설정된 텍스트는 파랑색이고 밑줄이 그어집니다. 파랑색은 색맹이 구별할 수 있는 색상이고 하이퍼링크가 설정되지 않은 파랑색 텍스트와 구별하기 위해 밑줄이 그어집니다. 보통 강조하기 위해 밑줄을 긋는 경우가 있는데, HTML에서는 하이퍼링크가 설정된 텍스트와 구별하기 위해 밑줄 대신 굵은 스타일의 텍스트를 사용합니다. 야후나 네이버와 같은 대형 포탈 사이트에서 하이퍼 링크가 설정된 텍스트가 파랑색의 밑줄이 그어진 기본값을 사용하는 이유가 여기에 있습니다.

1-3. 이 강좌에서 다루려고 하는 것들은....

본 강좌는 웹디자인 방법론입니다. 그러나 디자인 원론에 대해서는 다루지 않습니다. 즉 색상이 어떻고, 이미지의 디자인이 어떻고 하는 이야기는 하지 않는 다는 말입니다. 그런 이야기 말고도 웹을 디자인하기 위한 이야기는 많습니다. 예를 들자면, `야후의 메인 페이지에는 왜 로그인 입력란이 없을까?`, `야후는 왜 GIF 이미지만 사용하는가?`, `플래시 파일이 웹페이지에 미치는 영향`, `메뉴는 왜 왼쪽에 있나? 오른쪽에 있으면 큰일 나는가?` 등과 같은 웹을 디자인하며 한번 쯤 고민해 보았을 그런 문제를 HTML 관점에서 풀어갑니다.

본 웹디자인 방법론에서 다룰 이야기들은 다음과 같습니다.

먼저, 웹을 디자인 하는 방법에 대한 이야기를 다음 강좌부터 진행합니다. 웹에 대한 정확한 이해와 웹을 디자인하는 세가지 방법론에 대해 이야기할 것입니다.
그 다음으로 웹페이지 디자인, HTML 객체 디자인, 사이트 디자인에 대해 세부적으로 다룰 예정입니다.
웹페이지 디자인은 메뉴, 네이블링 시스템, 그리드, 페이지 안전영역, 프레임, 페이지 배경 등에 대해 다룰 것입니다.
HTML 객체 디자인은 HTML에서 사용되는 객체 중에 텍스트, 이미지, 테이블, 멀티미디어 객체에 대해 다룰 것입니다.
마지막으로 사이트 디자인은 웹사이트 진행과정, 디자인 프로세스, 웹 인터페이스, 인포메이션 아키텍쳐, 웹 아이덴티티에 대해 다룰것입니다.

앞서 말씀 드린대로 본 강좌는 웹에서 `왜`로 시작되는 의문에 대한 원리를 이해하는 강좌입니다. 본 강좌를 끝까지 수강하시면 그 원리를 이해하실 수 있고 보다 나은 웹을 디자인하는 초석이 될것입니다. 덧붙이자면 본 강좌는 HTML을 배우는 강좌가 아님을 명확히 밝혀둡니다.


웹디자인 방법론
백종수 | webmaster@ddcom.co.kr