|
1) 프로젝트 매니저(Project Management)
프로젝트를 총괄하고 책임을 지는 역할을 하는 사람입니다. 우리가 흔히 PM이라고 부르고 있지요.
그럼 PM은 구체적으로 어떤 일을 할까요?
① 프로젝트 총 책임
② 클라이언트와의 협의
③ 진행 일정 체크
④ 팀원 관리
⑤ 진행상황 보고
좋은 음악을 연주하기 위해서는 각각의 연주자들의 실력도 물론 중요하지만 지휘자가 없으면 아름다운 음악이 나올 수 없듯이, PM의 역할은 모든 팀원들의 진행상황을 관리하고, 클라이언트와의 협의를 통하여 의견을 제시 또는 수렴하고, 일정과 상황을 보고하는 중요한 역할을 맡고 있습니다. 모든 팀원들은 PM에게 자신의 진행상황을 보고하고, PM은 앞으로의 진행에 대해 계획하고, 조정하는 중추적 역할을 하게 되는 것입니다.
PM급의 관리자가 되기 위해서는 모든 작업과정에 대한 풍부한 지식과, 의견을 잘 협의해 나갈 수 있는 회의 능력과, 풍부한 진행 경험이 필요합니다.
2) 기획자(Planner or Director)
PM이 모든 진행을 총괄하는 관리자라면, 기획자는 웹사이트를 기획하고 방향을 설정하는 실무 책임자라고 할 수 있습니다. 작은 프로젝트의 경우 기획자와 PM을 한 사람이 맡아 하는 경우 있습니다.
① 웹사이트 기획
② 관련사이트 벤치마킹
③ 자료 수집과 정리
④ 디자인과 프로그램 산출물 점검
기획자는 디자이너 출신들이 많이 있습니다. 경력을 많이 쌓은 디자이너들은 기획자가 되기 위해 더욱더 노력합니다. 이렇게 기획자는 디자인과 많은 관련이 있으나, 디자인 감각와 실무 지식은 물론, 웹사이트 전체를 기획할 수 있는 능력과, 웹사이트들에 대한 수많은 지식과, 프로그래밍 관련 정보까지 실무에 관한 거의 모든 부분을 이해하고 수행할 수 있어야 합니다.
3) 웹디자이너(Web designer)
디자이너 없이 훌륭한 홈페이지를 만들 수 있을까요? 만일 웹사이트를 제작하는 데 한 사람만이 맡아 해야 한다면 그 사람은 디자이너일 것입니다. 이처럼 실제로 디자이너 한 사람의 웹사이트를 혼자 제작하는 경우도 많이 있습니다. 웹사이트를 만드는데 가장 중추적인 역할을 하는 실무자이기 때문입니다.
① 디자인 컨셉 결정
② 그래픽 작업
③ HTML 작업
디자이너는 프로젝트 성격에 적합한 웹페이지를 만들기 위해서 수 십개의 디자인 시안을 만들게 됩니다. 나중에는 어떻게 해야 할 지를 몰라 난감해 하고, 스트레스를 받는 디자이너들이 많이 있습니다.
중요한 것은 자신이 만든 디자인에 대한 명확한 자기 컨셉(Concept)이 있어야 한다는 것입니다. 왜 그렇게 만들었는지, 무엇을 위해 그렇게 만들었는지, 그 효과는 어떠할 것인지를 분명히 설명할 수 있어야 합니다.
4) 웹코더(Web Coder)
HTML만으로 코딩하던 시대는 지났습니다. HTML 외에 DHTML(Dynamic HTML), CSS(Cascading Style Sheet), Java script 등 한 층 발전된 코딩기법으로 전문 코더들의 역할이 날고 커져 가고 있습니다. 이들의 역할에는 무엇이 있는 지 구체적으로 알아봅시다.
① HTML
② 디렉토리 구조와 네이밍 룰 관리
③ 스타일 시트로 표준 만들기
④ 홈페이지 공통영역 Coding
전문 코더들이 만든 HTML문서는 확실한 차이를 보입니다. 깨끗한 코딩을 하는 것도 차별화 할 수 있는 좋은 방법입니다. 한 HTML문서를 보더라도 정렬이 잘 되어 있고, 주석도 잘 설명되어 있으며, 효과적인 방법으로 Script를 사용한 HTML 문서는 대충 만든 HTML과 질적으로 큰 차이를 보일 수 있습니다.
5) 프로그래머(Programmer)
디자이너와 함께 빼놓을 수 없는 실무자가 바로 프로그래머입니다. 웹사이트의 규모가 크고 기능이 많을수록 프로그래머의 역할은 더욱 커집니다. 요즘은 개발환경과 프로그래밍의 종류가 다양해짐에 따라 각 분야의 전문가가 따로 있습니다.
① 웹서버 구축
② 웹 프로그래밍 개발
웹프로그래밍의 종류에는 ASP, CGI, PHP, JAVA, JAVA SCRIPT 등이 있습니다. 이런 프로그래밍은 OS 환경이나 데이터베이스의 종류에 따라 적절한 선택을 합니다. 보통 프로젝트를 시작하고 인원
을 구성하기 전에 웹프로그래밍의 방향을 결정하고 그 방면의 전문가를 팀원으로 구성하게 됩니다.
프로그램이 적용되는 기능들을 대략적으로 알아보자면 회원관리, 게시판, 메일링서비스, 데이터베이스 연동, 검색 기능, 관리자 기능 등을 들 수 있습니다.
6) 클라이언트(Client)
클라이언트(Client)는 의뢰인이라는 뜻으로, 프로젝트를 발주한 회사의 실무 담당자들을 칭합니다.
디자이너들이 클라이언트를 무서워하는 이유는 디자인의 검수를 그들이 해야 하기 때문입니다. 아무리 멋진 디자인이라도 클라이언트의 맘에 들지 않으면 소용이 없는 것이지요.
클라이언트는 프로젝트의 원활한 진행을 위해 회사의 제반 사항들에 대한 지원을 해 주는 역할을 합니다.
① 자료 수집, 정리
② 기획 방향 조정
③ 작업내용 검수
④ 진행상황 체크
일정에 차질이 생길 수 있는 문제를 사전에 체크하여 원활한 진행이 가능할 수 있게 해야 합니다. 부족한 부분이나 필요한 사항들을 늘 검토하여 나중에 큰 문제가 없도록 해야하겠습니다.
이밖에도 웹마스터(Webmaster), 시스템 엔지니어(System Engineer), 웹마케터(Web Marketer)등이 있을 수 있으나, 모두 중복된 분야가 많이 있으므로 일반적으로 구성되는 팀원을 기준으로 설명을 드렸습니다.
스케쥴 짜기
웹사이트를 만드는 데 걸리는 시간은 짧게는 한달에서 길게는 3달까지 걸리게 됩니다. (일반적인 기업 사이트의 경우) 자칫하면 1달이면 끝낼 수 있는 작업이 두달이 넘게 지체되기도 합니다. 이렇게 되는 가장 큰이유가 계획없이 진행되기 때문이지요.
작업 시작 전에 스케쥴을 명확히 짜 놓고, 작업측과 클라이언트 측과의 상호 협조 하에 진행이 되어야만 예상된 기간 안에 성공적으로 끝낼 수 있게 됩니다.
일반적인 웹사이트 리뉴얼 프로젝트에서 소요되는 작업별 기간을 알아보도록 할까요?
다음의 그림은 웹사이트를 새롭게 만드는 과정을 세분화 하고 그 작업별 중요도와 기간별 비중을 표현 한 것입니다.
|
|
보시는 바와 같이 웹사이트의 제작 과정은 크게 기획/디자인/검수 및 완료 이렇게 세 단계로 나눌 수 있으며 그 비율은 30 : 60 : 10 정도가 됩니다.
이러한 일련의 제작 단계별로 적절한 기간에 맞게 진행할 수 있도록 스케쥴을 짜는 것이 아주 중요한 일이며 이 것이 잘 되어야 첫 단추를 잘 끼게 되는 것입니다.
제작 과정을 차례로 정리해서 그 기간별로 맞추어 미리미리 준비하고, 쌍방의 상호 협조 하에 각 과정별로 명확히 종료시점을 구분하고 다음단계로 넘어가야 나중에 다시 원점으로 돌아가는 일이 발생하지 않는 것이지요.
어떤 경우에는 디자인 스타일이 모두 결정되고 본작업에 들어간 상태에서 다시 메뉴가 변경되고 디자인이 변경되는 경우가 있을 수 있는데, 이렇게 되는 이유는 스케쥴대로 진행이 되지 않았거나 기획 단계를 명확히 종료하고 검수하는 과정을 거치지 않았기 때문입니다.
위의 작업단계처럼 세분화 하고 스케쥴을 미리 준비 해 놓는 것이 디자이너들 입장에서는 훨씬 분명하고 쉽게 일할 수 있는 수단이 딜 수 있습니다.
스케쥴은 이렇게 나뉜 단계별로 업무의 분량과 인원의 수에 따라 기획자가 적절히 조정하면 되는 것인데, 자칫 너무 타이트하게 일정을 잡게 되면 부작용이 있을 수 있으므로 최대한 실속있고 합리적인 스케쥴을 짜는 것이 중요합니다. |
작업환경 셋팅
자, 이제 스케줄이 모두 짜여졌으면 하드웨어적인 작업환경의 셋팅이 이루어져야 하겠지요. 대형 프로젝트의 경우 그 회사쪽으로 아예 컴퓨터를 들고 들어가 작업하게 되는 경우가 있습니다. 이런 것을 흔히 “상주”한다고 말하죠~.
이처럼 먼저 상주 작업을 할 것인지, 비상주 작업을 할 것인지가 먼저 결정되어야 합니다. 상주와 비상주 작업은 각각 장단점이 있지만, 어쨌든 중요한 것은 상주를 할 경우에는 모든 팀원들이 다 같이 들어가 작업을 하고, 비상주라면 다 같이 비상주로 해야 한다는 것입니다. 다시 말하자면 팀원이 흩어져서 작업을 해서는 결코 안된다는 뜻입니다. ^^;; (뭉쳐야 산당~~~)
이 것이 결정되는 각 디자이너와 개발자의 컴퓨터 셋팅과 함께 네트웤(작업그룹 형성) 생성과 작업 공유폴더 설정을 하게 됩니다. 여러 사람들이 함께 사이트를 개발 할 경우에는 중복되는 작업이나 파일의 혼란함을 위해 미리 파일 업로드나 작업물 업데이트에 대한 상호 협의가 이루어져야 합니다.
또 중요한 것은 서버환경의 셋팅입니다. 큰 웹사이트의 경우 테스트 서버와 실제 운영서버, 그리고 백업(Back up)서버 등의 세 가지 서버로 나뉠 수 있으며, 운영체제(UNIX, LINUX, NT)에 따른 작업 환경도 고려하여야 합니다.
이렇게 업무 스케쥴을 짜고, 작업환경을 셋팅 완료하고 나면…. 어느정도 성공적인 프로젝트를 예감할 수 있으리라 믿습니다.
1. 네비게이션(Navigation) 측면
‘가로스크롤은 정말 싫어’. ’풀스크린.. 짱나~’, ‘로딩 왜케 길어’ 등등..
유저들은 보다 적극적으로 사이트에 반응합니다. 매일 인터넷을 마주 하는 2000만 유저들을 위해 우린 그들의 접근이 용이한 사이트를 제작해야 합니다.
1) 인터페이스가 직관적이며 분명한가?
아직 인터넷이란 환경에 미숙한 유저들도 보다 능동적으로 참여할 수 있는가를 살펴보아야 합니다.
예를 들자면 디자이너의 심미적인 안목으로 제작된 아이콘이라든지 버튼들이 때때론 유저들에겐 방해도 될 수 있단 말이겠죠. 아름답기만한 사이트는 보기좋은 사이트지 무조건 훌륭한 사이트는 아닌 법이죠.
2) 사용하기 편리한가?
웹사이트의 가장 큰 역할이자 목적은 정보전달입니다. 사이트에 처음 들어온 유저가 보다 빠르고 정확하게 얻으려는 정보에 도달할 수 있게 편리한 지름길이 되어 줄 수 있는 사이트는 유저입장에서 가장 좋은 사이트겠죠.
3) 사용자가 필요한 부분이 눈에 잘 띄는가?
쇼핑몰 사이트들을 이용하다 보면 내가 사고자 하는 물품이 어디에 있는지 헤매기도 하고 세로 스크롤이 어쩔 순 없지만 유저의 입장에서 각 컨텐츠, 메뉴의 중요도 순서의 재배치가 참 필요하겠죠.
그 외에도각 사이트 페이지의 레이아웃이 연관성이 있으며 명확한가?, 화면구성이 너무 복잡하지는 않은가?,메뉴의 구분이 확실한가? 등의 여러가지 측면을 생각해야 합니다.
서핑을 하다가 ‘내가 지금 어디에 있나?’하는 현 위치파악이 전혀 되지 않아 back버튼을 연신 눌렀던 경험들이 다 있으실 겁니다. 네비게이션의 표시는 물론이고 home버튼과sitemap버튼들은 어디에 숨은 것인지 도통 알 수 없는 미노스왕의 미로같은 사이트들…
‘가가 가가 아이가?’식의 각 페이지마다의 개성이 너무도 뚜렷한 연관성이라곤 하나 없는 다양한 레이아웃역시 유저들의 정신을 혼미케 합니다.
다음의 그림은 디자인포유에서 진행했던 프로젝트 중에서 기존의 사이트를 네비게이션 측면에서 분석 해 본 자료입니다.
|
|
이런 기본 분석자료를 바탕으로 다음과 같은 개선 방향을 제안하게 됩니다.
|
|
2. 컨텐츠(Contents) 측면
1) 컨텐츠의 접근이 용이한가?
점점 더 대형화 되어가는 웹사이트는 이제 예전에 좌측 프레임으로 나뉘어 4~5개의 메뉴로 구성되어 단 한번의 클릭으로 이용할 수 있는 간단한 사이트는 보기 힘듭니다. 이처럼 복잡하고 많은 내용으로 구성되어 있는 컨텐츠들을 어떻게 합리적으로 구성을 하고, 그 이용을 좀더 용이하게 할 수 있을 지를 생각해 보아야 합니다.
2) 각 정보와 연관성 있는 그래픽 및 이미지를 사용했는가?
해당하는 메뉴를 선택했을 때 그 메뉴와 연관된 이미지를 사용하여 직관적으로 그 메뉴에 대한 이해를 도울 수 있어야 합니다.
디자인만을 강조한 너무 작은 글씨, 디자이너의 극히 개인적인 취향만으로 제작된 그래픽과 이미지들, 필요이상의 무분별한 플래시 남용.. 위에서도 말씀드렸지만 유저들이 끝까지 ‘훌륭한걸~’이라고 할 수 있는 사이트는 이런 것이 아니겠죠. 여기까지 말씀드리니 저희도 쫌~ 반성해야 할 부분들이 많네요. 디자이너의 욕심이 지나쳐 유저들의 정보전달을 방해해선 안되겠지요~
3. 심미적인 측면
1) 처음부터 끝까지 한 컨셉으로 일관성 있게 꾸며졌는가?
한 사이트를 방문했을 때 그 사이트만의 Identity를 가지고, 일관된 구성과 이미지를 표출하고 있는지는 그 사이트의 가치를 평가하는 데 상당히 중요한 역할을 하게 됩니다. 아무리 화려한 사이트라 하더라도 일관성 있게 표현되지 않는다면, 그 목적에 알맞지 않는 사이트라고 할 수 있습니다.
2) 적절한 디자인구현이 이루어 졌는가?
‘보기 좋은 떡이 먹기도 좋네~’라는 말이 있죠 물론 웹에서도 통하는 만고의 진리입니다. 심미적인 디자인은 일단 방문자들의 시선을 즐겁게 하며 사이트에 몰입할 수 있는 시간을 벌어주지요. 어떤 부분은 플래시 애니메이션을 이용하여 동적이고 화려하게 표현하는가 하면, 어떤 부분은 깔끔한 텍스트로 표현하는 것이 훨씬 보기 좋을 수 있기 때문에 그 상황에 맞는 디자인 구현이 참 중요합니다.
개성적인 레이아웃과 파격적인 색감으로 이목을 집중시킬 수 있지만 단 1픽셀 오차의 깔끔하지 못한 마무리, 통일성없는 stysheet, 정말 다양한 title은 디자인을 저해하는 요소가 될 수 있습니다.
오늘은 네비게이션, 컨텐츠, 심미적 측면에서의 사이트 분석에 대해 알아보았습니다. 이러한 여러가지 측면을 충분히 고려하고, 문제점을 찾아내고, 그 개선방향을 도출하고 나면 사이트 기획의 첫 테이프는 성공적으로 끊었다고 할 수 있겠습니다.
1) 기존 컨텐츠 분석
여러분들은 지금 기존에 가지고 있던 사이트를 새롭게 다시 만드는 과정을 배우고 계십니다.
기존의 웹사이트가 아주 오래 전 만들어져 정말 볼 것 없고, 이용할 것 없는 사이트가 있기도 하고, 여러 개편을 거쳐 안정적인 구조와 메뉴를 가지고 있지만, 아직도 정확한 답을 찾지 못한 사
이트도 있을 것입니다.
먼저 기존 웹사이트의 사이트 맵을 뽑아봅니다. 그리고 나서 필요 없는 메뉴와, 보충이 필요한 메뉴, 다른 메뉴와 합쳐야 할 메뉴, 분리해야 할 메뉴들을 걸러냅니다.
|
|
위에서 보시는 그림과 같이 전체적인 메뉴의 맵을 트리구조로 뽑아, 재가공할 컨텐츠들을 찾아내는 것입니다. 이렇게 해서 보충해야 할 컨텐츠들을 중심으로 새로운 컨텐츠 개발을 위한 기본 자
료로 활용을 하는 것입니다.
이 때 컨텐츠의 충실도와 적절한 메뉴 네이밍도 이루어져 있는 지 살펴보아야 할 것입니다.
|
2) 컨텐츠 재정리 및 추가
이렇게 걸러낸 기존 컨텐츠들과 함께 새로 보완해야 할 메뉴들도 기획해야 합니다.
제조업의 경우 제품 안내쪽에 신제품이 추가될 수도 있고, 그 제품에 대한 좀더 상세한 자료까지 보여줄 것인지의 여부도 결정해야 하는 것이지요.
기존의 컨텐츠에서 추가해야 할 메뉴들을 선별하여 어떤 카테고리어 어떻게 잘 끼워(?)넣을 지를 생각해야합니다.
|
|
3) 컨텐츠 확정안 만들기
이렇게 정리된 컨텐츠들을 어떻게 잘 가공할 것인지가 컨텐츠 확정안 만드는 마무리 작업이라고 할 수 있습니다.
먼저 다음과 같은 사항들을 확인해야 합니다.
첫째, 메뉴명을 한글로 할 것인지, 영어로 할 것인지를 결정한다.
기업사이트의 경우 일반적으로 한글 사이트를 기본으로 영문까지 제작하는 경우가 많습니다.
이런 다국어 사이트의 경우에는 메인메뉴를 영어로 만들어 한/영 모두에서 사용하기도 합니다.
반면에 쇼핑몰이나 포탈사이트의 경우에는 직관적으로 메뉴를 이해할 수 있도록, 한국어로 제작하기도 합니다.
이처럼 메인메뉴와 서브메뉴를 어느 언어로 네이밍 할 것인지를 결정해야 합니다.
둘째, 메뉴의 깊이(Detph)를 결정한다.
메인메뉴의 갯수를 결정함은 물론 메뉴별 Depth를 결정해야 합니다.
메인메뉴 > 1단계 메뉴
서브메뉴 > 2단계 메뉴
서브서브메뉴 > 3단계 메뉴
이렇게 깊게는 3단계까지 사용하는 경우가 대부분이지만, 쇼핑몰과 같이 카테고리가 많은 사이트의 경우에는 더 하위메뉴까지 분류될 수도 있습니다.
이 때에는 최하위 메뉴까지 들어갔을 때 메뉴를 헷갈리지 않고, 다시 원하는 컨텐츠로 찾아 돌아올 수 있도록 메뉴의 구조설계를 잘 짜야 합니다.
셋째, 메뉴의 가변성을 따져본다.
웹사이트는 카탈로그처럼 단발성에 그친 작업이 아닙니다. 지속적인 업데이트를 통해 운영 및 유지보수를 해야하기 때문에 구축 당시만 생각해서는 안됩니다.
예를들면, 한 기업 웹사이트에서 그 기업에 구축 6개월 후에 코스닥에 상장하여, 투자관련 컨텐츠(Investor Relationship)을 추가해야 한다면, 기존 레이아웃에서 컨텐츠된 컨텐츠를 충분히 흡수할 수 있는 레이아웃과 메뉴구조가 되어야 합니다.
이를 위해서 첫 구축시 너무 빽빽하게 하지 말고, 확장성과 가변성을 고려하여 작업해야 할 것입니다. | |