1. 기획단계
1) 목표 설정
왜 사이트를 구축하며, 원하는 목표가 무엇인지를 명확히 하는 일은 사이트를 구축하는데 있어 근본적인 방향을 제시해 준다.
(1)클라이언트(고객)가 원하는 사이트의 목적과 기능은 무엇인가?
(2)사이트를 통해서 어떤 커뮤니케이션을 달성할 것인가?
(3)사이트를 구축해서 얻게 되는 기대효과와 이익은 무엇인가?
(4)어떤 방향으로 확장해 나갈 것이며, 향후 발전 방향은 무엇인가?
2)타켓 설정
모든 사람을 대상으로 서비스하고 모든 사람들이 방문해 주길 바랄 수는 없다
(그럼에도 불구하고 모든 사람이 볼 수 있었으면 하는 막연한 욕심과 기대는 누구에게나있다.) 타켓설정, 즉 사이트의 주된 사용자층을 정의하는 것은 사이트의 방향성을 더욱 분명하게 만들고, 제작 범위의 기준을 수립하는 일이다. 특정 그룹을 사용자층으로 지정하되 처음부터 너무 좁은 범위로 제한을 하는 것은 모험이 따를 수 있으므로 가능성을 최대한 열어놓은 상태에서 설정하도록 하자.
(1) 어떤 사용자층이 이 사이트를 보게 될 것인가?
(주된 사용자층의 나이, 성별, 직업, 성향, 관심분야 등)
(2) 사이트에 관심을 가질 만한 잠재적인 사용자층은 무구인가?
(3) 어떤 사용자층이 사이트의 구현 목적에 가장 잘 부합되는가?
(4) 타겟 사용자층에 맞는 시스템 환경, 기술수준의 범위, 인터랙티브한 요소의 사용 유무와
한계, 브라우저의 종류 및 버전, 해상도, 전송 속도 등을 결정한다.
3) 경쟁 사이트와 시장 분석
(1)현재 가장 유력한 경쟁 사이트는 어디이며, 경쟁 사이트의 장점과 단점은 무엇인가?
(2)경쟁 사이트보다 유리한 점과 취약한 점은 무엇인가?
(3)인터넷 이외의 다른 미디어에 같은 서비스를 하고 있는 업체가 있는가?
(4)유행하고 있는 디자인, 기술 경향은 무엇인가?
(5)예상 사용자층에게서 다양한 방법을 통해 의견을 수렴한다.
①.경쟁 사이트를 방문하게 한 후, 느낀 소감이나 가장 관심이 쏠렸던 부분에 대해 표현하도록 한다.
②.기존의 사이트를 운영하고 있는 경우라면, 여러 가지 항목을 대상으로 사이버 투표 등을 통해 네티즌들의 의견을 물어본다.
③.예상 사용자층을 모아 사이트 전반에 대한 개요를 설명하고, 다양한 아이디어를 수렴한
다.
4) 전략 세우기
(1)사이트의 컨셉을 정의한다.
① 조사, 분석된 사항들을 토대로 팀원들간에 브레인스토밍(Brainstorming)을 한다.
② 사이트가 어떤 구조를 가지고, 어떤 기능을 하며, 어떤 흥미를 느끼게 할 것인지 함축적 인 단어나 은유적인 형용사 등을 동원해 자유롭게 표현한다.
③ 각자의 상상에 따라 가장 이상적이라고 생각되는 사이트의 시나리오를 작성하고 발표한다.
④ 사이트에서 가장 관심이 집중되고, 가장 중요하게 생각되어야 할 기능을 세밀하게 따져 본다.
⑤ 사이트의 목적과 기능에 부합되는 독창적이며 신선한 컨셉을 고르고, 이에 대한 의견을 좁혀간다.
(2) 외형적인 스타일을 결정한다.
그래픽적인 요소들을 기준으로 사이트의 외적인 모습을 어떤 스타일로 추구할 것인지 결정한다.(전체적인 분위기, 기조색 등)
(3) 메시지 표현의 주된 수단을 결정한다.
텍스트 위주로 할 것인지, 그래픽 이미지 위주로 할 것인지, 사진으로 할 것인지, 사운드로 표현할 것인지 등등...
(4) 사이트의 서비스 범위를 설정한다.
서비스하게 될 기술적인 자원들을 설정한다.(예 : 데이터 베이스, 오디오 파일의 스트리밍, 쇼핑에 필요한 장바구니와 견적서, 메일링 리스트, 회원 로그인, 인터넷 채팅등)
(5) 업데이트 주기와 유지, 보수의 밀도를 정한다.
매일 업데이트를 할 것인지, 월별, 계절별로 업데이트를 할 것인지, 또한 업데이트의 범위를 텍스트에 한할 것인지 그래픽 요소와 멀티미디어 요소를 포함할 것인지 등에 대한 전략을 수립한다.
<참조> 브레인스토밍(Brainstorming)이란?
브레인스토밍이란 아이디어를 모으는 방법의하나이다. 여러 사람이 모여서 어떤 주제에 대해 떠오르는 아이디어를 거침없이 말하고, 뱉어진 아이디어에 자극을 받아 더 많은 아이디어를 쏟게 만드는 일종의 영감 자극 기법이다.
브레인스토밍을 할 때에는 틀리는 것, 다른것, 이치에 맞지 않는 것에 대한 두려움을 없애야한다. 판단한 후 말하지 말고 생각이 흐르는 것을 낚아채어 숨김없이 말하는 것이 중요한다.
일상적인 사고를 버리자. 최대한 머리를 자유롭게 만든 상태에서 기발하고 엉뚱한 생각을
마음껏 한다. 마치 정신이 나간 사람처럼.
5) 정보 설계
컨텐츠의 종류가 다양하고 그 양도 방대해지면서 사용자들은 자신들이 원하는 정보를 찾기위해 전보다 더 많은 시간을 헤매야 하는 경우가 빈번해졌다.
또한 제작자 스스로도 엉성하고 산만한 컨텐츠 체계 때문에 사이트의 특성을 살리지 못하고문제에 부딪히면 손을 놓을 수밖에 없는 상황에 직면하기도 한다.
뿐만 아니라 운영자들은 사이트를 유지하는데 있어서 지속적인 어려움을 겪게 된다. 때문에사이트의 정보를 체계적으로 정리하고 조직하는 것은 사용자나, 제작자, 운영자 모두의 편의와 작업 효율을 높이기 위해 꼭 필요한 일이다.
(1)컨텐츠의 분류 및 체계화
컨텐츠를 분류하고 체계화하는 것은 까다로운 일이다. 또한 사이트의 특성에 따라 그 방법도 달라 질 수 있지만, 가장 보편적으로 고려해야 할 방법들을 열거해 보면 다음과 같다.
① 정보의 우선 순위를 정한다. 중요하게 노출되어야 할 정보 순위를 매긴다.
② 연관성 있는 정보끼리 묶는다. (예 : 직업별, 주제별, 기능별, 품목별...)
③ 사용자들이 정보에 효율적으로 접근할 수 있도록 객관적인 시각으로 분류한다.
④ 묶을 것은 묶고, 세분화 시킬 것은 명확하게 세분화 시켜서 컨텐츠의 밀도를 높인다.
⑤ 분류된 컨텐츠가 서로 배타적이면서도 일관성이 있도록 배치한다.
⑥ 사이트의 목적에 맞게 컨텐츠를 재구성하고 조합한다.
⑦ 이미 명확한 체계가 잡혀 있는 객관적인 컨텐츠라면 그 흐름을 깨지 않는 것이 좋겠고,
주관적이고 애매한 컨텐츠하면 납득할 만한 기준을 제시하여 그에 따른 체계를 잡아 나가야 하겠다.
(2) 정보의 조직화
분류된 컨텐츠를 조직화하여 한눈에 구조를 볼 수 있도록 플로우 챠트로 만든다.
(3)레이블링(Labeling)작업
적절하게 분류된 컨텐츠에 이름을 붙여 메뉴로 만들고, 주요 내용에 제목을 붙여주어 정보 구조를 명확하게 확립하는 작업이다. 전문적인 용어를 배제하고 사용자들이 쉽게 이해할 수 있는 용어를 선택해야 하며, 푠현법에 일관성을 유지해서 사용자들이 빠르게 적응할 수 있도록 만드는 것이 좋다.
레비블링을 어떻게 하느냐에 따라 같은 컨텐츠라도 사용자들의 호기심을 자극할 수 있으며, 정보의 전달력에 차이를 가져오게 한다. 또한 사이트의 수준을 가늠하게 하므로 적절하고 객관적이며 참신한 단어의 선택이 뒷받침되어야 하겠다.
(4)네이밍(Naming)공유
사이트 전체에 걸친 디렉토리 구조와 이름, 파일명의 체계와 규칙등을 정해서 팀원들끼리
공유해야 한다. 웹디자이너 마음대로 이미지나 HTML문서의 이름을 생각나는 대로 정한다든지, 대소문자를 혼용한다든지, 디렉토리 구조를 체계적으로 잡지 않고 편리한 대로 파일을 몰아 넣는다든지 하는 일들은 사이트를 구축하는데 치명적인 방해 요소가 된다.
사이트 구축에 투입된 인원이 많아질수록 네이밍의 문제는 중요해진다. 자신이 만든 파일들을 다른 팀원들도 사용해야 하기 때문에 혼자만 알아 볼 수 있는 네이밍 룰을 대책 없이 적용하는 것은 파일을 단독으로 점유하는 처사와 같다. 서로 작업 능률이 떨어지게 된다. 체계가 없으므로 유지, 보수, 문제점을 해결하는데 많은 시간을 낭비해야 하거, 제작자와 운영자가 다를 경우 운영자는 구조 파악에 상당히 어려움을 겪게 도니다. 그러므로 파일 이름 뿐 아니라, 폼 양식 등이 삽입되고 프로그래밍이 연동되는 경우에는 변수이름, 폼이름 등에도 규칙을 정해야 한다.
네이밍의 예를 들면 '용도_세부이름_일련번호.확장자' 또는 '메인분류_하위분류_일련번호.확장자'등의 형식으로 사용을 할 수 있고, 복잡하지 않을 경우에는 이보다 짧게 만들어 쓸 수 있다. 용도와 조류가 같은 파일일 경우 'news_m_1.html/news_m_2.html'등으로 앞부분의 이름은 갗게 하고 일련번호를 붙여서 구별하면,탑색기를 사용하거나 FPT를 사용할 때 연관된 파일을 수차적으로 볼 수 있어서 편리하다. 또한 FTP로 파일을 업로드할 때 잘못된 네이밍 때문에 파일이 제대로 덮어 씌워지지 않는 경우도 생기므로 주의해야 한다. (예:확장자의 대소문자를 통일하지 않고 쓰거나, html과 htm을 구분 없이 쓸 경우 등등)신속하고 효율적인 사이트 구축을 위해 차일 이름만 보고도 그 속성을 알아차릴 수 있도록 네이밍을 고유하고, 이를 문서화 시며서 유지, 보수 과정에서 파참고할 수 있게 만들어야겠다.
6) 일정관리
사이트 구축에 필요한 예산, 시간, 인력, 작업 진행 스케줄, 고객과의 미팅에 대해 구체적으로 계획하고 진행시킨다. 작업 리스트를 자세히 기록하고, 각 과정별로 소요되는 날짜를 정해 이를 단계졀로 추진시킨다.
또한 각 단계에서 미팅과 보고의 형태로 작업 진척도를 점검해야 한다. 만약 예상치 못했던 시행착오나 문제가 발생했을 경우, 이를 수습하고 수정할 수 있는 시간과 예산을 확보할 수 있도록 미리 융통성 있는 대책을 마련해야 한다.
2. 개발 단계
1)그래픽 인터페이스 디자인
드디어 좁은 의미에서의 웹 디자인의 단계에 접어들었다. 정보 설계를 토대로 체계화 된 컨텐츠를 시청각적으로 표현하고, 사용자들이 즐겁고 편리하게 서핑 할 수 있도록 직관적인인터페이스를 만드는 일이다.
(1) 메타포 선정
인터페이스 디자인을 효과적으로 수행하고, 커뮤니케이션의 전달력을 강화시키기 위해서는메타포(Metaphor)는 은유적인 표현법을 지칭하는 말이다. 어떤 대상을 연상하게 만드는 상징들을 케타포라고 할 수 있다. 시에서의 은유법, 비유법을 떠올리면 된다.
'내 마음은 호수요'에서 추상적인 '마음'을 표현하기 위해 사용된 메타포는 '호수'가 도니
다. 이와 마찬가지로 '자연'을 시각적, 청각적으로 표현한다고 가정해 보자. 자연을 표현할 수 있는 상징에는 어떠한 것이 있겠는가? 푸른하늘, 초록색 나뭇잎, 파도소리, 새소리, 비 내리는 강가의 풍경, 꽃밭, 과일 등등... 우리를 둘러싸고 있는 직접적이고 구쳊거인 사물을 끄집어 낼 수 있다.
이러한 것들이 디자인에 채택되었을 때 '자연'을 표현하기 위해 동원된 메타포가 되는 것이다.
메타포에는 예를 든 것처럼 비교적 구체적이고 객관적인 것들도 있지만, 주관적이면서 상당히 추상적인 것들도 있다.
'자연'을 표현하는 메타포로 '맨발'은 어떻겠는가. 신발을 벗어 들고 맨발로 땅을 딛고 있는사람의 모습을 '자연'을 연상시키는 메타포로 사용할 수도 있다 그러나 이것은 하늘, 나뭇잎 등의 상징에 비한다면 주관적이고 함축적인 것이다. 때문에 의도한 대로 사용자들이 받아들이지 못한다면 의미를 명확히 전달하는데 방해가 될 수도 있다.
반대로 흥미를 유발하는 측면에서는 익히 보아왔기 때문에 식상함이 느껴지는 일반적인 상징보도 높은 점수를 얻을 수 있다.
한 가지 더 예를 들어보자. 사이트 디자인에 가장 흔하게 적용되는 메타포로는 서류철 모양을 딴 메뉴를 꼽을 수 있다. 이미 일상 생활에서 서류철 모양에 익숙해져 있기 때문에 사용자들은 직관적으로 메뉴로 인식을 하게 된다.
그러나 너무 흔하게 쓰이는 메타포이다 보니 별 느낌을 받지는 못한다. 어쩌면 자주 만나게되는 메타포라 싫증을 느끼고 있을 지도 모른다.
반대로 기하학적인 모양의 버튼과 아이콘이 있다고 하자. 처음 보는 것이라 눌러 보고 싶은마음은 들지만 막상 어떤 것을 눌러야 원하는 페이지로 이동을 하게 되는지 몰라 난감해 할 수도 있다.
이렇듯 일반적이고 구체적인 메타포로 사용의 편의성을 높이느냐, 기발하고 의외성이 강한 메타포로 흥미와 미적인 면을 부각시키느냐에 대한 선택은 쉽게 결정할 일이 아니다. 때론 전혀 메타포가 필요하지 않은 경우도 있다. 그러므로 메타포 선정의 잣대는 사이트의 컨셉과 커뮤니케이션의 목적, 페이지 용량의 적정 수준 등을 고려해서 유연하게 바뀌어야 할 것이다.
(2)네비게이션 시스템 구축
사이트에 머무는 동안 사용자의 이동 경로에 관여하며, 정보에 대한 접근을 용이하게 만들어 주는 모든 요소들을 통틀어 네비게이션 시스템(Navigation System)이라 할 수 있다. 사이트에서 길을 잃지 않게 하는 것에서부터, 넓게는 정보에 빠르고 쉽고 편안하게 도달할 수 있도록 사용자들에게 편의를 제공하는 요소들의 집합이 네비게이션 시스템이다.
사이트를 평가하는 항목에도 항상 네비게이션 시스템이 포함된다. 그 이유는 네비게이션 체계가 사이트의 견고함을 대변해 주기 때문이다. 네비게이션 시스템이 잘 되어있는 사이트는 도로망이 효율적으로 정비죈 도시와 같다. 아무리 컨텐츠가 유용하고 인터페이스가 훌륭하다 해도 네비게이션 시스템이 받쳐 주지 못하면 사용자들이 정보에 접근하기가 어려워진다.
첨단 시설이 갖추어진 건물이라 해도 도로 사정이 열악하면 제 기능을 하지 못하듯이... 따라서 성공적인 사이트를 구축하기 위해서는 네비게이션 시스템을 제대로 깔아 두어야 한다.
더불어 네비게이션 시스템을 계획하고 배치하는 일은 그래픽 인터페이스 디자인의 핵심이다. 사이트의 구조를 쉽게 이해할 수 있고, 사용하기 편하고, 게다가 시각적으로도 아름답게 표현해야 하는 까다롭고도 비중 있는 작업이다. 그러므로 최적화된 네비게이션 시스템을 구축하기 위해서는 무엇보다 정보 설계의 단계부터 차근차근 밟아 나가야 한다. 설계도 하지 않고 길을 뚫을 수는 없기 때문이다.
① 네비게이션 시스템을 이루는 요소
네비게이션 시스템을 이루는 요소에는 여러 가지가 있다. 이 요소들을 적절하게 어울리고 계산되었을 때 기능적, 시각적으로 훌륭한 네비게이션 시스템이 된다.
가. 네비게이션 바(Navigation Bar) : 네비게이션이란 단어를 들었을 때 가장 먼저 떠오르는 형태이고, 네비게이션 시스템의 주축이 되는 요소이다. 이미지로 만들 수도 있고, 텍스트로 만들수도 있는데 컨텐츠에 변동이 많을 경우에는 텍스트로 만드는 것이 효율적이고, 직관적인 선택을 유도하기 위해서는 이미지로 만드는 것이 좋겠다.
나. 풀다운(Pull down)메뉴 : 컨텐츠의 분류가 많을 때 일일이 메뉴를 거치지 않고도 원하는 페이지로 이동할 수 있기 때문에 네비게이션 바와 함께 제공되는 경우가 많다. 다. 로컬 검색엔진 : 원하는 검색어를 입력하면 사이트 내에 있는 컨텐츠를 빠르게 찾아 준다. 특히 데이터 베이스가 구축되어 있을 때 유용하게 사용할 수 있다.
라. 버튼과 아이콘 : 각종 버튼과 아이콘은 네비게이션 바와 더불어 각 페이지에 공존하게 되는데 디자인 컨셉에 맞게 제작해서 잡동사니 같다는 느낌을 주지 않아야 한다.
마. 사이트 맵(Site Map) : 사이트의 구조를 시원하게 알려주는 지도. 바. 링크 걸린 텍스트 : 링크가 걸린 하이퍼텍스트는 가장 단순하면서도 기초적인 네비게이션 요소이다. 요즘은 이미지가 많이 쓰이면서 링크 걸린 텍스트를 소홀히 하는 경향이 있지만, 기능으로 보자면 여전히 강력한 요소이다. 하이퍼텍스트의 장점은 방문한 페이지와 그렇지 않은 페이지를 쉽게 구분할 수 있다는 데에 있다.
②형태에 따른 네비게이션 메뉴의 종류
네비게이션 바를 포함한 메뉴 체계는 정해진 형태가 없지만 가장 보편적으로 쓰이고 있는 형태를 중심으로 살펴보자면 다음과 같이 나누어 볼 수 있다.
가. 롤오버 메뉴 : 단순한 바 (Bar)의 형태를 띄면서 버튼 이미지가 롤오버 되는 형태, 간결하고 제작하기 쉽기 때문에 가장 많이 사용된다.
나. 팝업(Pop up)메뉴 : 상위 메뉴를 클릭 하거나 마우스를 갖다 대었을 때 하위 메뉴가 나타나는 형식으로, 좁은 공간에서 많은 메뉴를 수용할 수 있으며 클릭의 횟수를 줄여주고 기대감을 갖게 하는 등 상당히 매력적인 형태이다.
다. 풀다운(Pull down)메뉴 : 켄텐츠의 분류가 다양하고 그 체계가 복잡할 때 네비게이션 바와 함께 제공되어서 빠르게 레벨을 이동할 수 있도록 도와준다. 또한 복수의 풀다운 메뉴를 두어서 메뉴를 조합시키는 형태로 응용될 수도 있다.
라. 이미지 맵을 이용한 메뉴 : 버튼이나 아이콘 형태가 아니라 이미지 자체에 맵을 적용시
켜서 메뉴의 역할을 하게 만든 경우에 해당한다. 마. 기타 : 일반적인 형식에 얽매이지 않고 자유롭게 인터페이스와 조화를 이룬 형태.
③ 기능에 따른 네비게이션의 분류
가. 글로벌 네비게이션
사이트 전체에 걸쳐 영향력을 행사하는 네비게이션 시스템 사이트의 초기 화면에서부터 모든 페이지에 노출되어 있어서 언제든 상위 메뉴로 접근할 수 있게 도와주는 최상위 메뉴
나. 로컬 네비게이션
하위 레벨로 이동했을 때, 그 속에서 다시 컨텐츠가 나뉘어져 있다면 또 다른 네비게이션이 필요하게 된다. 이때의 네비게이션은 글로벌 네비게이션처럼 항상 같은 메뉴를 표시하는 것이 아니라, 레벨마다 다른 메뉴를 표시하게 된다. 이처럼 각각의 서브 사이트에서만 영향력이 있는 네비게이션을 로컬 네비게시션이라 한다. 대부분의 사이트에서는 글로벌 네비게이션을 축으로 하고, 상황에 맞게 로컬 네비게션으로 보조하는 시스템을 사용한다.
④ 이상적인 네비게이션 시스템을 위해 점검해야 할 사항
가. 가장 먼저 로딩되는가 : 네비게이션 바나 버튼 등은 가능한 적은 용량으로 만들어서 빠르게 로딩되도록 만든다.
나. 간결한가 : 사용자들이 오래 보아도 질리지 않도록 거추장스러운 요소를 없앤다.
다. 사이트의 구조를 한눈에 알 수 있는가.
라. 입력된 텍스트가 선명하게 보이는가 : 이미지로 만들 경우 좁은 공간에 텍스트를 입력했을 때 텍스트가 깨져 보이는 경우가 허다하다. 특히 한글의 경우는 더욱 심각하다. 이럴 때에는 네비게이션 메뉴의 제작 과정에서 텍스트에 안티앨리어싱 옵션을 끄고, 폰트의 선택을 신중하게 하도록 하자.
마. 일관성이 있는가 : 네비게이션의 모든 요소가 일관성이 있는지, 특히 디자인의 컨셉에 잘 어울리는지.
바. 현재 나의 위치를 알 수 있도록 설계되어 있는가 : 사용자가 위치해 있는 곳이 사이트의 어느 부분인지 일말의 단서를 주어야 사용자는 방향을 잃지 않는다.
사. 브라우저의 네비게이션 시스템을 적절하게 이용하고 있는가 : 넷스케이프나 익스플로러 모두 기본적인 네비게이션 시스템을 포함하고 있고, 인식하지 못한 상태에서 우리는 그 시스템에 많은 부분을 의지한다. 예를 들어 [뒤로], [앞으로]버튼이나, [즐겨찾기], [목록보기], URL입력 부분등이 그것인데 이를 잘 이용하도록 세심한 부분에 신경을 쓰는 것이 현명하다. 반대로 [뒤로],[앞으로]버튼만을 의지하고 페이지에 어떠한 링크(이를테면 돌아가는 화살표 같은 )도 주지 않는다면 사용자는 당황하게 될 것이다.
아. 너무 많은 길을 내어서 산만하지 않은가 : 지하철역에서 같은 방향이 표시되어 있는 두 갈래 길을 본적이 있을 것이다. 이 두 갈래 길은 어느쪽으로 가든 같은 지점에 도착하게 되어 있지만 표지판을 본 입장에서는 잠시 주춤하게 된다. 어느 쪽이 맞는 거야? 마찬가지로 너무 많은 요소를 배치해서 (예를 들면 한 페이지 안에 네비게이션, 텍스트 링크 등) 가능한 표시는 클릭으로 원하는 페이지에 도달하도록 만드는 것은 좋지만, 때론 이러한 장치가 서핑를 산만하게 만들 수 있다는 사실도 염두에 두자.
(3) 스토리보드 작성
네비게이션 시스템을 뼈대로 하여 페이지의 레이아웃을 스토리보드로 만든다. 스토리보드는 실제 작업에 들어가기 전의 최종 설계도하고 할 수 있다. 사이트를 시각적으로 표현해서 전체적인 윤곽과 흐름을 파악할 수 있게 하며, 계획했던 레이아웃과 아이디어에서 멀어지지 않도록 잡아주는 역할을 한다. 아이디어를 총 정리한 다음, 그림과 텍스트의 위치와 비율,프레임 구조, 페이지의 연결 관계 등을 각 페이지 별로 그린다. 인터렉티브한 요소를 삽입한다면 그에 대한 설명과 동작되는 원리를 첨부해 넣는다.
스토리보드를 작성할 때 개발의 기준이 되는 모니터 해상도에 맞춘 용지를 만들어서 작성하면 이미지를 배치하는 대 실질적인 계획을 세울 수 있다 .
(4)디자인 스케치
구상하고 있는 이미지의 구체적인 그림을 스케치한다. 아웃라인을 자세히 그리고, 타이틀에쓰일 폰트, 색상배합 등에 대해 계획한 내용을 표시한다.(아이디어를 구체적으로 스케치 해보지 않은 채 그래믹 프로그램을 열면 시간도 많이 걸릴 뿐 아니라. 엉뚱한 그림을 정성껏 그리고 있는 자신을 발견하게 될 것이다.
(5) 시안작성
사이트의 초기화면을 3가지 정도 제작해서 클라이언트나 팀원들과 의견을 조율한다.
(6) 제작
① 채택된 시안을 바탕으로 그래픽 인터페이스를 제작하고 이미지를 최적화시킨다. 다음은 그래픽 인터페이스를 제작하면서 꼭 짚어봐야 할 사항들이다.
② 기능성을 충분히 살리고 있는가 : 심미성을 추구하는라 기능성과 사용 편의성을 무시하고 있지 않은지 살펴보자.
③ 업데이트를 용이하게 하고 있는가 : 기껏 힘들게 만들어 놓은 페이지를 얼마 지나지 않아 폐기 시키는 것을 본 적이 있다. 문제는 배너 광고를 삽입할 공간이 없다는 것이었다. 이처럼 컨텐츠가 추가될 경우 페이지에 융통성이 있는지, 업데이트는 쉬운지 점검해 보자.
④ 일관성을 유지하고 있는가 : 디자인의 일관성을 유지하는 것은 사이트의 아이덴티티를 확립시키는 일이다.
⑤ 컨텐츠를 충분히 이해하고 있는가 : 컨텐츠에 대한 이해 없이 그에 맞는 디자인을 할 수는 없다. 컨텐츠 따로, 디자인 따로는 아닌지 점검해 보자.
⑥ 고객의 요구나 디자인의 컨셉을 임의대로 해석하고 있지 않은가 : 기획 과정에서 충분한 의견 교환이 없었을 경우, 웹 디자이너의 판단에 따른 디자인을 해서 나중에 문제가 될 수
도 있다. 지자인 방향을 마음대로 해석하고 있지는 않은지 다시 한번 생각해 보자.
⑦ 독창적인 디자인인가 : 당연한 얘기지만 유명한 사이트조차 외국의 디자인을 모방하거나, 어디서 많이 본 듯한 인상을 풍겨서 실망을 주는 경우가 의외로 많다. 독창적인 디자인인지
스스로에게 반문해보자.
2) 멀티미디어 요소 디자인
사이트에 삽입될 사운드 동영상, 플러그인 소스(플래시 무비, 쇽웹이브 무비 등)를 제작한다.
전문적인 춤질을 필요로 하는 경우, 외주 업체에 의뢰하거나 사운드 디렉터, 동영상 디렉터 등 전문가들로 팀을 구성해 제작한다.
3)스크립팅 및 프로그래밍
HTML을 코딩하고 바바스크립트 VB스크립트 등을 삽입하며, CGI등 사이트에서 구동될 각종 응용 프로그램을 개발한다.
3.검증
제작된 사이트를 시험 가동해서 사용 편의성 등에 대한 테스트를 하는 과정이다.
① 성능평가 : 사이트의 구현 목적을 잘 수행하도록 제작되었는지 평가한다.(디자인, 기능, 사용 편의성등)
② 유연성, 호환성 테스트 : 개발 기준으로 삼았던 브라우저, 전송속도, 해상도 등에서 제대로 구현되는지 사용자 환경을 만들어 테스트하고, 기준의 상위 환경, 하위 환경 등에서 어떻게 구현되는지 유연성을 테스트한다.
③ 링크 테스트 : 페이지의 연결, 다는 URL과의 연결고리가 모두 정상적으로 되어 있는지
테스트 한다.
④ 수정 및 보완 : 테스트 과정에서 문제점으로 지적된 부분에 대해 수정하고 보완한다.
4.오픈 (공표)
검증이 끝난 사이트를 인터넷에 오픈 하는 단계이다.
① 서버에 올리기
② 감색엔진에 등록(검색엔진에 자동으로 노출시키기 위해서 기본적으로 메타 태그에 Keywords, Descriptions를 삽입했는지 꼼꼼하게 살펴본다.
③ 홍보 : 사이트 개설 기념 이벤트를 실시한다거나 배너 이미지를 제작하여 배포하는 등 사이트 홍보를 위해 다각적인 방법을 모색한다. 특히 인터넷 비즈니스와 관련된 사이트라면 마케팅 전문가를 영입해서 구체적인 홍보 전략을 세우는 것이 좋겠다.
5.유지 및 보수
사이트의 생명은 어떻게 유지하고 보수하는가에 달려 있다.
사이트를 구축하는 것 보다 더 많은 투자를 하고 더 철저한 게획을 세워야하는 부분이 유지와 보수이다. 그러나 아직까지 많은 사람들이 이 분분에 대한 중용서을 체감하지 못하고 있는 것이 현실이다.
사이트는 제2기업이다. 사이트를 구축하려고 계획을 세웠다면 유지와 보수를 위한 예산과 인력에 대한 계획도 그에 못지 않게 충분히 세워야 한다. 그렇지 않으면 아무리 잘 만들어진 사이트라 할지라도 반짝 하고 사라지는 혜성과 다를 바 없는 운명에 처하고 만다
조은영님의 저서 '아름다운 홈페이지를 위한 웹디자인'에서 발췌한 글입니다.