[좋은 PR 이야기]

 2015.11.05.


좋은 PR 소야,
홈페이지 기획에서 제작까지


소야는 홍보물 디자인 뿐 아니라, 웹 기획과 홈페이지 개발 분야에서도 여러 고객사들과 함께 일하고 있습니다.
특히 비영리기관들의 홈페이지 제작 경험을 바탕으로, 복지, 청소년, 사회공헌 관련 분야의 기관 홈페이지 제작 및 유지보수를 진행하고 있습니다.

올 하반기에 개발 완료하고, 현재 유지보수 운영 중인  ‘안산온마음센터 홈페이지’의 제작, 구축 과정을 정리해 보겠습니다.

홈페이지 구축, 개편을 고민 중이신 기관이나, 홍보담당자들은 참고가 되실 거라고 생각합니다.




▐  홈페이지 제작 과정 대충 살펴보기


 [제작 의뢰] - [회의] - [조사 분석] - [제작 기획안 작성과 조정] - [설계 확정] -

 [원고 작업] - [구성 컨셉 및 메인 디자인 시안] - [메인 시안 확정] - [서브 페이지 디자인] -

[서브 페이지 디자인 확정] - [기능 개발 및 오픈소스 커스터 마이징] - [기능 탑재 및 디자인 확정] -

[코딩 ] - [테스트 및 임시오픈] - [보완 및 안정화] - [완료보고] - [유지보수]


** 이 절차는 홈페이지 제작을 하는 동안 거치는 과정들을 가급적 순서대로 정리해 본 것입니다. 이 과정이 꼭 순서대로 진행되는 것이 아니고, 동시에 진행되어야 하는 것들도 많답니다. 이러한 과정들을 참고하시면 홈페이지 구축 시에 조금 도움이 될 겁니다. ^^




▐ 제작 의뢰를 받고 기획안을 만들기까지


안산온마음센터에서 홈페이지 구축의뢰를 받고, 기관을 방문, 구체적인 일정과 구축 방향 등등을 논의했습니다.
기존에 있는 홈페이지는 기관이 처음 생길 때 웹페이지 5개 정도로 간단하게 구축된 상태였다.
수 차례 미팅을 거친 후에 센터에서 필요한 기능과 필요한 담아야할 정보들, 스타일 등에 대해 조율해 나갔습니다.
이 모든 과정을 스토리보드(진행 일람표)에 하나씩 담아나가기 시작했습니다. 
스토리보드에는 홈페이지 제작 진행되는 모든 과정을 매일 매일 담아나갑니다.


스토리보드 일부 이미지입니다.


0001.JPG


0002.JPG


0003.JPG



관련 사이트, 참고 사이트를 조사하고,
센터에서 요청한 것과 가장 근접한 홈페이지들을 찾았으며,
국내는 물론 해외 사이트까지 뒤져가면서 홈페이지 컨셉을 고민했습니다.


아울러, 내부 직원들이 원하는 홈페이지 특성과 기능, 방향에 대해 조사하고, 이를 반영하려 했습니다.

홈페이지가 제대로 진행되려면, 제대로 된 기획안이 나와야 합니다.


이런 과정을 거쳐서, 기획안이 만들어졌습니다.
사진은 기획안 일부입니다.

0004.JPG


0005.JPG


0006.JPG


0007.JPG

* 이 이미지들은 기획안의 일부입니다. 원본에는 더 많은 내용들이 있겠지요. ^^


이 기획안에는 홈페이지 전체 구성도와 각 메뉴별 서브 메뉴, 서브 메뉴별로 담을 내용들, 기능 개발이 필요한 게시판 종류와 게시판 속성 등이 담겨 있으며,  진행 스케쥴과 자료 요청 등도 담겨있습니다.

이 기획안에 대해서 다시 몇 차례 회의를 가졌습니다.
그리고 계속해서 설계를 수정, 변경해 나갔습니다.


이 과정에서, 구성안이 몇 번씩 바뀌었고,
관련 원고와 자료를 보완했습니다.


0008.JPG


0009.JPG





▐ 메인 컨셉과 디자인 진행


구성안에 대한 검토와 몇 번의 수정 반복이 진행되는 동안,
홈페이지 메인 화면에 대한 구성과 디자인 작업이 진행되었습니다.

 

기획자가 메인에 들어갈 샘플 구성도를 넘기고
디자인팀에서 이를 바탕으로 5가지 정도 되는 메인 화면 컨셉 작업을 진행했습니다.


메인 디자인이 중요한 것은
홈페이지 전체 분위기를 결정하고,  서브 페이지 디자인의 가이드가 되기 때문입니다.


여러 메인 시안을 제작하고, 소야 내부적으로 검토 수정 작업을 거친 후에
총 3종의 시안에 대한 ‘1차 디자인 제안서’를 제출했습니다.


1차 디자인 제안서에는 3종의 메인 컨셉 디자인이 담겨 있고,
기획 의도와 각 부분별 설명을 첨부하였습니다.


디자인 제안서에는
  1.진행 경과와 현재 상황, 2.디자인 컨셉 도출 과정, 3.디자인 컨셉 제안  4.실제 디자인 시안 등이 담겨 있습니다.

0010.JPG


0011.JPG


0012.JPG


0024.JPG




1안은
이미지와 컨텐츠 혼합형으로 최신 트렌드를 반영하였으며,
이미지로 안정감을 주고,
중요 정보들을 메인에 노출함으로써 정보접근성도 높이는 기획이었습니다.
제안서 1안의 일부를 만나보시죠.


0013.JPG


0014.JPG


0015.JPG


0015-02.JPG





2안은

이미지 중심의 기획안으로

메인에 최소 정보만 노출하여 깨끗한 느낌을 주었습니다.

정보 접근성이 떨어지는 부분을 보완하기 위하여 바로가기와 팝업존, 공지사항 등을 메인에 표출하였습니다.

메인 메뉴가 좌정렬이라 일반 홈페이지들과는 다른 느낌을 주고,

블로그처럼 편안하게 다가갈 수 있는 것이 장점인 컨셉입니다.

이 시안의 또 다른 장점은 일러스트를 통으로 바꿀 때마다, 새로운 느낌을 줄 수 있다는 것입니다.

이미지를 한 번 보실까요?


015.JPG


0017.JPG


0018.JPG


0019.JPG





3안은
동일한 일러스트 컨셉이지만,
2안이 사진 기반으로 재구성한 것이었다면,
3안은 통으로 일러스트화 작업을 진행한 내용이었습니다.
물론, 시안 차원이어서 완성본 일러스트를 첨부할 수 없어서 느낌만 가져왓습니다.
일러스트를 통으로 발주하려면 비용이 비싸서, 컨셉이 확정되면 추후 발주하는 것을 전제로 진행된 시안입니다.
색다른 홈페이지 느낌을 내기에 좋을 것이라고 생각했습니다.
이미지를 보세요.


0020.JPG


0021.JPG


0022.JPG


0023.JPG



제안서에는 이 디자인 시안 외에도
사진 기반으로 한 기타 제안도 몇 종 첨부했습니다.





이러한 1차 제안서에 대한 피드백이 왔습니다.
1안의 이미지를 2안에 들어간 이미지로 대체해서 보완하는 것과
2안은 그대로 가는 것으로
총 2개 안으로 다시 제안서를 보내 달라는 것이었습니다.
그 두 개 안으로 내부 직원 회의를 거치겠다고 했습니다.

0025.JPG


0026.JPG


위의 두 시안은 내부 회의용으로 구성해서 전달해 드린 내용입니다.


아래 이미지들은,

시안 1,2,3 외에 추가로 작업했던 것들 중 일부를 함께 보내드렸습니다.




0027.JPG


0028.JPG



이 메인 시안을 가지고,
안산온마음센터는 내부 회의를 해서  시안2로 최종 결정이 되었습니다.
대신에 2안이 이미지 하나로 가면 단조로우므로,
통 이미지를 3종으로 작업하고, 접속할 때마다 렌덤으로 뜰 수 있도록 했습니다.
하나의 홈페이지가 접속할 때마다 서로 다른 느낌이 나는 3개의 홈페이지 느낌이 나도록 하기로 했습니다.
그래서 추가 시안을 작업했습니다.


2안을 기준으로,
서브 페이지 디자인이 진행되었습니다.




▐ 기능 확정과 개발


홈페이지의 메뉴를 구성할 때,
웹페이지로 제작되는 정보페이지와 정보를 올리고, 운영 관리한은 게시판으로 구분해서 진행됩니다.


정보 페이지는 고객사의 정보 제공과 기획사의 조정 및 가공을 통해 최종 원고가 확정되면,
이를 웹디자인 작업을 하고,
다시 html로 코딩하여 웹에 띄우게 됩니다.


그런데 이와는 달리 게시판은
어떤 목적으로 누가 사용하느냐에 따라서 기능과 속성, 구성, 배열 등이 달라지게 됩니다.
기획 단계에서 기능 등을 조사했다고 하더라도, 최종적으로 기능에 대한 검토와 확정 작업을
한 번 더 진행해야 합니다.


기능에 대한 검토는 각 항목별로 치밀하게 진행됩니다.
항목별 검토 샘플이 아래의 이미지입니다.

0029.JPG



이렇게 기능이 확정되면,
개발에서 최종적으로 해당 기능들을 적용시키고,
디자인팀에서 잡은 게시판 스타일을 반영하게 됩니다.


이 과정까지 끝나고 나면,
메인, 정보페이지, 게시판(자료실 포함), 팝업존과 공지사항 등의 구축이 일단락 지어집니다.
완전하지는 않지만, 홈페이지 모습이 일단은 다 갖춰지는 것입니다.


물론, 그 정에 호스팅 신청하고, 도메인 확보하는 등
사전 작업도 완료됩니다.




▐ 1차 완료와 시연


홈페이지 구축이 일단락 되면,
오픈하지 않은 상태에서 시연회를 갖습니다.
시연회에서 나온 지적사항들을 반영하여 최종 작업을 하게 됩니다.


시연회는
 [개발 경과 보고  -  홈페이지 구축 내용  - 주요 기능 탑재 내용  - 실제 시연] 순서로 진행되었습니다.


0030.JPG


0031.JPG


0032.JPG


0033.JPG





완료보고 그리고 유지보수

 

시연회에서 나온 추가 요청사항과 건의사항,

수정사항을 반영하여

최종 완료하고

홈페이지를 오픈하였습니다.

그리고 최종 완료보고서를 제출하였습니다.

 

완료보고서에는

* 프로젝트 개요

* 프로젝트 배경 및 추진 방향

* 추진 경과

* 프로젝트 수행 내역

* 향후 계획

                  등이 담겨있습니다


0034.JPG


0035.JPG


0036.JPG


0037.JPG





이후에는 6개월 동안 하자보수를 진행하게 되며(지금도 하고 있으며)
이와는 별도로 운영과 관련하여
유지보수 계약을 체결하여
현재 유지보수도 소야가 진행하고 있습니다.




▐ 성공적인 홈페이지 구축 7계명


홈페이지 제작을 진행하고, 마무리한 뒤에 제가 내린 결론은 이렇습니다.


[성공적인 홈페이지 구축 7계명]


01. 서두르지 마라.
    : 너무 기한을 촉박하게 잡고 진행하기 보다, 충분히 조율하고 검토할 수 있도록 제작 기간에 어느 정도의 여유를 줘야 한다는 겁니다. 다행히 온마음센터는 기간이 많이 짧지는 않았습니다.


02. 내부 구성원들의 머릿속을 잘 정리해라.
   : 홈페이지를 가장 많이 활용하는 사람은 내부 직원들입니다. 내부 직원들이 업무적으로 어떻게 활용할지, 어떤 기능을 원하는지, 그들의 머릿속에 있는 것들을 최대한 꺼집어 내어야 합니다. 그럴 때 제작 업체도, 담당자도 최적의 기획과 결과를 낼 수 있습니다.


03. 컨셉에서 욕심을 빼라.
   : 시원시원한 이미지 중심의 컨셉을 원하지만, 또 정보가 많이 보여지는 것도 원한다면 디자인 컨셉을 확정하기 어렵습니다. 이미지나 느낌 중심인지, 정보 접근성 중심인지, 컨텐츠 중심인지, 기능 중심인지 하나만 취하려고 하자구요.


04. 이상형이 있으면 좋다.
   : 자신의 이상형이 있으면 연애할 때 우선으로 그런 스타일을 찾듯이 좋아하고 마음에 드는 스타일의 홈페이지를 찾아 놓으면 도움이 됩니다. 스타일, 디자인, 색상, 기능 등 이상형이 각 부분별로 있어도 좋습니다. 안산온마음센터는 두 개의 확실한 이상형을 제시해 주었습니다. 그래서 도움이 많이 되었지요.


05. 스피드 피드백
   : 회의, 요청, 검토, 제안, 원고, 시안 등등 고객사와 제작사는 수시로 의견을 주고 받고, 작업 내용에 대한 피드백을 받아야 다음으로 진행이 됩니다. 그런데 그 피드백이 빠르지 않고, 명확하지 않으면 제작사는 아무 것도 할 수 없이 기다리게 됩니다. 담당자는 내부 의견 조율, 자료 요청 등 피드백이 빨라질 수 있도록 최대한 노력해야 합니다. 그런 면에서 안산온마음센터는 최고의 피드백 스피드를 보여줬습니다. 땡큐......^^


06. 원고를 미리 준비하라.
  : 제작사가 기획안을 만들고, 이 기획안이 확정되면 각각의 메뉴에 담을 원고가 준비되어야 합니다. 제작사에서 글을 써줄 수 있는 여건이라 할지라도 기관의 정보는 기관이 가장 정확하게 쓸 수 있으므로, 각 페이지의 원고를 미리미리 준비해 놓는 것이 좋습니다. 기획, 컨셉 확정 후 원고가 있으면 바로 서브 페이지 디자인에 들어갈 수 있습니다. 그렇지 않으면 마냥 기다리게 됩니다.  원고는 담당자 혼자서 챙기지 마시고, 내부 구성원들에게 공식적으로 책임을 지워주시는 게 좋습니다. 팀장님들 선에서 결정이 되도록 말입니다.  


07. 제작사를 잘 골라야 한다.
  : 포트폴리오만 봐서는 좋은 제작사를 고르기 쉽지 않다. 가격도 중요하다. 무엇보다 말이 통해야 하고, 판단력과 기획력이 있어야 한다. 기술 개발 실력만 좋다고 좋은 제작사는 아니다. 모든 업무는 기획력이 생명력이다. 홈페이지도 기획력이 뒷받침이 되는지, 커뮤니케이션이 무리가 없는지 미팅을 통해 판단하는 것이 중요하다.



이상, 좋은 PR 이야기

소야의 강이사였습니다.

감사합니다. ^^