외국 디자이너에게서 배운 웹사이트제작 프로젝트 진행방법

"내 블로그에 포스팅 할 것이다. 자세히 설명해 달라."

라고 해서 설명받은 것이기 때문에 참고자료들은 (영어 or 러시아어) 입니다. 

먼저 요약 하자면 다음과 같습니다. 

이제 이것을 설명해 드리죠.

1. 먼저 고객을 만납니다. or 의뢰를 받습니다.

의뢰자 분들은 단순합니다. 

난 "자동차 커뮤니티를 만들고 싶어!" 라던지, 난 "뽐뿌 같은 사이트를 만들고 싶어!" 라는 막연한 말을 합니다.

네 좋아요. 의뢰를 받고 안받고는 당신의 선택입니다.

좋은 일을 받는 것도 능력입니다. 하지만 경험이 많지 않고서는 좋은 일인지 아닌지 구분하기란 쉽지 않습니다.

라엘이는 배가 불러서 그런지 일을 깐깐하게 받습니다. 

이건 라엘이의 현재 일을 받는 기준입니다.

1) 의뢰자가 돈이 있는가?

- 일부 의뢰자는 '지분'이나 '수익쉐어' 같은 달콤한 미끼를 던집니다. 고객과 대화하는 중 앞의 두 단어중 하나라도 들었다면 가차없이 거절합시다.

- 일부 의뢰자는 '착수금' 정도만 가지고 있습니다. 아예 완납금을 줄 생각이 없는 겁니다. (사실은 줄돈이 없죠)

깐깐하게 따져보세요. 제일 중요한 겁니다.

2) 의뢰 가격이 합당한가?

- 합당한 가격(!)을 하시면 안됩니다. 작업자(개발자 라고 하죠)가 이익을 보는 가격을 하셔야 합니다. 합당한 가격이라면 일을 할 필요가 없습니다. 다른 사람 찾아보라고 하세요.

- 싼 가격(!)은 더 하면 안됩니다. 의뢰 가격이 낮다고 의뢰자의 요구사항이 그리 '간단하지 않습니다'. 박리다매(싸게 많이 팔아서 이윤을 남긴다 라는뜻)로 영업하시는 분도 있는데 웹사이트는 공산품(물건)이 아니므로 팔고 끝난다는 이론이 통하지 않습니다. 이걸 명심합니다.

- 작업자가 이익을 보는 가격에 하세요. 작업기간과 인원의 투자비에 2를 곱하시면 됩니다. (비율은 적당히 정하세요.) 만약 이렇게 하지 않는다면 당신의 인생은 이 굴레에서 빠져나올 수 없습니다. 돈이 안남으니까 계속 이 자리에 있겠죠.

3) 의뢰가 가능한가?

- 이제 일을 파악합니다. 기간과 작업자의 능력을 파악하는 것이죠.

- 부유한 well-paid work 이라고 해도 본인의 능력을 초과하는 것은 받으면 안됩니다! (이것 또한 명심. 명심. 신뢰를 쌓는게 중요해요.)

의뢰자가 돈 줄 능력이 있고 지불의사가 확실하고 

일을 하면 돈이 많이 남는 작업이고

나의 (나의 팀이) 능력이 된다면 의뢰를 받고 진행을 합니다.

2. 정보를 수집합니다. (sorted information)

의뢰자가 정말로 어떤 사이트를 만들고 싶은지 확실히 파악해야 합니다.

애매 모호한 표현을 쓰거나 목적이 불확실한 의뢰자라면 지금단계에서라도 프로젝트를 중단하고 일을 취소 하시면 됩니다.

확실한 요구사항들을 리스트로 정리합니다.

그리고 기존사이트 들을 검색하면서 트랜드를 파악합니다. 유저들은 익숙한 것을 좋아하므로 업계의 느낌과 사이트들의 느낌을 파악합니다.

3. 정보를 구조화 합니다. (drawing structure)

사이트맵을 그린다고 보시면 되는데요. 작업별로 세세하게 나누셔야 합니다.

이 작업방법을 설명해준 디자이너는 Microsoft 사에서 만든 Mindjet MindManager 라는 구조화 프로그램을 사용하더군요.

대충 보시고 파악하세요.

사이트 하나를 작업화면 단위로 구조화 시키고 작업에 소요될 시간을 적습니다.

예를 들어 포럼이라고 하면 글보기, 글쓰기 같이 세부로 나눠야 겠죠.

이때 작성된 구조도 를 의뢰자에게 보여주고 작업비의 정당성을 표현 할 수도 있습니다.

4. 3번에서 만든 구조도가 의뢰자에 의해서 승인(confirm)되었으면 흰색과 검은색으로 이루어진 기초모델(프로토타입)을 만듭니다. (drawing B/W prototype)

B/W(검은색과 흰색) 으로 만드는 이유는

색을 넣어버리면 의뢰자는 짜증을 내는 경향이 있습니다. 선호하는 색이나 배치가 이상하다고 하는 것이지요.

지금 단계는 structure(구조)에서 page(화면)을 만드는 단계입니다. 아직 의뢰자 취향 맞출 단계가 아니에요. 

따라서 최대한 간결하고 단순하게 프로토타입을 만듭니다.

(그림 : 메인페이지)

(그림 : 포럼페이지)

(그림 : 이벤트페이지)

정말 대강 만들면 됩니다.

구조나 위치 같은 것이지요. 

여러분이 위의 프로토타입을 봤을 때 느낌이 어떠세요?

"그런 가보다. " 라고 수긍하지 않으셨나요?

아마 색을 넣었다면 여러분이 수긍하지 만은 않았을 겁니다.

프로토 타입 예제 입니다.

https://cdn04.lael.be/datalink/lael.be/513/01_main.png

https://cdn04.lael.be/datalink/lael.be/513/02_forum.png

https://cdn04.lael.be/datalink/lael.be/513/03_events.png

https://cdn04.lael.be/datalink/lael.be/513/04_foto.png

https://cdn04.lael.be/datalink/lael.be/513/05_vopros-otvet.png

https://cdn04.lael.be/datalink/lael.be/513/06_contact.png

https://cdn04.lael.be/datalink/lael.be/513/07_my_room.png

이 상태에서 의뢰자에게 프로토타입까지 승인(confirm)을 받습니다.

의뢰자는 "아 나의 작업이 잘 진행되고 있구나" 라는 느낌을 받을 것이고

작업자는 "일의 진행방법" 이 명확해진 것이지요. (작업이 나눠져 있고 작업 시간이 정해져 있고 작업화면도 정해져 있는 것이죠)

5. 프로그래머와 디자이너의 동시 작업진행 (parallel working)

순전히 프로토타입을 가지고 작업을 합니다.

기존 방식이 '디자이너가 모든 디자인이 끝나기 전까지' 프로그래머가 멍하니 대기하고 있다고 한다면

이 방식은 프로토타입을 기반으로 작업을 동시에 진행하는 것입니다.

1) 디자이너는 프로토타입을 더 구체화 합니다. (최종 화면을 만듭니다.) 이렇게 하면서 주로 의뢰자와 계속 연락합니다.

- 배치는 정해졌으니 사용할 색상을 정해요. 의뢰자와 함께

- 색이 정해졌으면 사진과 아이콘을 배치합니다. 능력에 따라 다른데, 이 디자이너는 거의 대부분 그리거나 직접 디자인하더군요. 본인이 생각한 느낌이 있으니까요.

물론 폰트도 정해요. 이때 중요한 점은 이미지메뉴나 이미지버튼을 사용자제 하는 것입니다. 웹폰트 사용하세요.

그러면 대충 아래와 같은 시안이 나옵니다.

https://cdn04.lael.be/datalink/lael.be/513/Main_design.png

https://cdn04.lael.be/datalink/lael.be/513/News.png

https://cdn04.lael.be/datalink/lael.be/513/News_Inside.png

2) 프로그래머는 프로토타입을 최종시안으로 생각하고 코딩을 실시합니다.

후에 디자인을 코딩에 입힌다>  가 있는데, 이건 현실에 맞춰서 잘 하시면 됩니다.

6. 이렇게 되면 모두가 만족하는 웹사이트 제작이 됩니다.