웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



GUESTROOM
Leaders Story
HOME GUESTROOM Leaders Story
웹사이트 개발 프로세스
Posted by 김행남 | 2003.07.29 | Hit : 1477
목록보기이전보기
모든 사람들이 홈페이지를 만들때 어떠한 홈페이지를 만들어야 겠다 생각하고 그 생각속에서 자신의 홈을 만들어 가기 시작합니다. 하지만 머리속에 생각만을 가지고 하다보면 한계에 부딧치는 것이 아주 많습니다. 화가가 그림을 그릴때도 붓이 가는대로 그냥 그리는 사람은 거의 없죠..
요즘은 행위예술속에서 걍 페인트 통째로 부어버리는 사람도 많지...^^;; 밑 그림을 그리지 않고 그냥 그리는 화가는 처음에 1층짜리 전원주택을 생각하다가 마지막에 3층짜리 고급주택으로 마무리 하게됩니다.

사실상 이런한 일은 우리가 만드는 홈페이지 속에서도 많이 일어납니다.
개인적인 홈페이지를 만들때에도 계획이 필요한것입니다. 저 또한 초창기 홈페이지를 만들때 생각한 것은 아주 작은 것이였지만.. 만들면서 이러 저러한 웹사이트를구경하다보니 이쁜것도 많고 신기한 소스도 많아서 그것들을 모두 사용하고 싶은 욕심도 생기고 그랬었죠.
마지막에 태어난것은 방대한(?) 컨텐츠를 보유한 홈페이지였습니다. 신기한 소스도 아주 많이 사용되어서 저에게도 놀라움이였고.. 당시 컴맹들인 친구들이 볼때는 더욱 신기한 일이였었죠.
하지만 개발자가 볼때는 아주 조잡한 홈페이지에 지나지 않았습니다. 방대한 컨텐츠도 이것 저것을 모두 하려는 욕심에서 시작하다보니 어느거 하나 완벽하게 서비스를 하는것도 없고.. 소스들도 번작스러워서 홈페이지를 더욱 산만하고 홈페이지를 찾아오는 유저들에게는 이 홈페이지가 뜻하는 것이 무엇인지 알 수 없는 의도를 모르는 홈페이지가 되었죠. 초창기 어떤 웹사이트 검색엔진에 등록하려하다가 무참히(?) 짤리는 아픔이 있었는데..그땐 내가 왜 짤려야 했는지 몰랐습니다.
이것은 바로 계획없이 생각속에서 만들어진 홈페이지를 제작하려는 욕심에서 나온 의도를 알수없는 홈페이지 였기때문이였습니다.
그래서 오랜 시간이 지난 지금도 그 홈페이지는 지우지 않고 그냥 두고 있습니다....^^
가끔 산만할때 맘을 잡아주는 충격요법으로 아주 그만입니다.....^^;;

그래서 필요한 것이 웹 개발 프로세스 입니다.

일반 웹사이트를 계획하고 나아가는데 개발자들이 실무에서 사용합니다.
이것은 개인 홈페이지를 만들때도 다른것이 없습니다. 그대로 적용해서 나간다면.. 마지막엔 생각했던 의도대로 아주 멋진 홈페이지가 완성될거라 생각됩니다.

[ 웹 사이트 개발 프로세스 ]

1.concept  
웹사이트의 정의(defination)이라는 용어도 많이 쓰는데 어떤 웹사이트를 만들것인가에 대한 근본 적인 문제로 다음과 같이 단순화 시킬 수 있습니다. 사용자에게 무엇을 제공하는 웹사이트인가?  

2. contents  
어떤 웹사이트를 만들것인가에 대한 컨셉이 세워졌으면 웹사이트를 채울 자료나 정보를 모아야 합니다. 컨텐츠가 없는 웹사이트는 무용지물입니다  

3. information architecture

자료가 다 모아졌으면 이 자료들을 가지고 어떻게 웹사이트를 구성할 것인가에 대한 문제가 남아있습니다. 바로 information design 부분인데, 자료들을 어떻게 분류하고 어떻게 이름 지을 것이며(labeling) 어떤 기능을 사용하고 유지보수는 어떻게 할 것인지등등에 대한 계획을 세워야 합니다. 또 전체 네비게이션은 어떻게 디자인 할 것인가와 서브화면은 몇단계로 구성할 것이며, 서브화면들간의 네비게이션은 어떻게 할 것인지도 설계해야 함니다. 여기서의 네비게이션 디자인은 그래픽적인 부분이 아닌 사용자가 가장 쉽고 빠르게 웹사이트를 브라우징 할 수 있는 메뉴를 어떻게 설계할 것인가의 문제입니다. 인포메이션 디자이너는 이렇게 결정된 사항들을 종합하여 스토리 보드(화면 설계도)를 만들어야 합니다  

4. application design

애플리케이션 디자인은 설계된 information design에 맞춰 DB는 어떻게 구성하고, 서버는 무엇을 사용하며, 서버프로그램은 어떤 것을 사용하고, 검색엔진이나 asp등의 cgi설계등 프로그래밍 전반에 관한 설계를 하게 됩니다.  

5. prototyping

웹그래픽 디자이너는 설계된 네비게이션 디자인과 정보설계를 참조하여 본격적으로 화면 디자인을 하게 됩니다. 이 때 한가지 메뉴를 수직적으로 선택하여 메인화면에서 부터 서브화면의 마지막 depth까지 한 세트를 프로토 타입으로 디자인하는 것이 좋습니다.  

6. interface design

웹디자이너는 결정된 디자인스타일을 바탕으로 모든 화면의 화면 디자인을 하게 됩니다. 이 때 웹디자이너는 웹사이트 디자인을 규격화 시켜 유지보수가 쉽게 될 수 있도록 신경써야 하며, 스타일 가이드도 함께 제작하여야 합니다. 또 화면디자인은 프로그래머들이 디자인을 완벽하게 구현할 수 있도록 브라우저에서 보이는 그대로 디자인해줄 필요가 있습니다. <화면 디자인과 실제 구현된 화면의 비교> 그렇지 않으면 서로간의 커뮤니케이션에 애를 먹을 수 있습니다.  

7. implementation

화면 디자인이 모두 끝난 뒤 다시 부가적인 기능들(자바스크립트이나 플래쉬등 비주얼적인 요소를 강조하는)을 감안하여 HTML작업을 하게 됩니다. 이 작업은 웹디자이너가 할 수도 있고 따로 전문적인 developer(혹은 editor)하 할 수도 있습니다. HTML작업이 완성된 뒤 프로그래머들에 의해 application이 HTML에 붙게 됩니다. 이 일련의 모든 과정에서 웹디자이너는 계속적으로 올바르게 디자인이 구현되고 있는지를 검토하고 체크하여야 합니다. (이 부분이 웹디자이너들과 프로그래머들이 잘 다투는 부분입니다. 여러분은 서로의 고충을 이해하시길...)  

8. beta testing

implementation 과정이 끝난 뒤 어느정도의 시간동안 베타테스팅을 하게 됩니다. 이는 링크나 프로그램, 오타등 웹사이트 전반에 문제점을 찾아내어 수정하는 과정입니다.  

9.launching

위의 모든 과정이 완료되면 드디어 웹사이트를 런칭하게 됩니다.  

10.maintenance

웹사이트가 런칭된 후에도 지속적인 업데이트가 필요합니다. 여기서 웹 디자이너는 웹사이트가 계속 일목요연한 디자인을 유지하고 있도록 신경써야 합니다.  

maintenance 부분은 저도 할말이 없는 부분이네요..이렇게 해서 완벽한 웹사이트가 탄생했다하더라도
지속적인 업데이트와 일목요연한 디자인을 유지하지 않으면 찾아왔던 유저들은다시 발길을 돌리게 됩니다.
지금 저의 칼럼의 회원수가 줄어가는 것처럼..말이죠...ㅡㅡ;;;

이 프로세스를 적용시켜서 멋진 홈페이지를 완성하시길 바랍니다.

# 예전에 어떤 분이 글을 올리셨는데 제가 이 곳으로 옮겼습니다.

Posted by 김행남 | 2003.07.29 | Hit : 1477
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=InfoTip&no=279

COMMENT
목록보기 이전보기
GUESTROOM
Leaders Story
Download Review
Practical Use Tip
IT Information & News
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
평판 보편디자인 로고디자인 접근성 CIP 구글 사람 프로젝트 드라이브 디자인 UI 진화 세상 모바일 디자인차트 리더십 한글 홈페이지 이해 웹기획 애플 PC 브랜드 윈도우7 Parallax Scrolling 마크업 레이아웃 폰트 노트북 익스플로워 Parallax 다룸 아이패드 비즈니스 폰트 디자인 이벤트 오페라