웹디자이너가 신입으로 입사하면 간단한 팝업이나 서브페이지부터 디자인을 시작해 그 디자이너가

메인페이지를 디자인하기까지는 오랜시간이 걸린다.
물론 작은 회사는 입사하자마자 홈페이지 하나 만들라고 하는 미션을 던져주지만^^;;

 

 

어쨌든 홈페이지 메인페이지를 디자인하기 전 제대로 된 절차를 밟으려면 웹기획부터 들어가야한다.
간단한 홈페이지야 바로 메인페이지부터 디자인 들어가서 그 페이지를 보여주며 고객과 상담하기도 하지만
어느정도 규모의 홈페이지라면 전체적인 틀을 짜고 컨텐츠를 확립하는 이 단계는 매우 중요하다.

고객의 의도가 맞는지... 프로그램 개발에 가능한 범위인지... 컨텐츠가 빠진것이 없나 체크하고 수정해줘야

하는것이다.

 

이 스토리보드와 메인시안만 제대로 나온다면 홈페이지 제작은 일사천리로 진행된다.
메뉴가 어떠어떠한 것이 들어가야 하는지, 이 페이지에 들어가는 컨텐츠가 어떠한 것인지,

버튼은 어떤게 필요하며 위치까지도 다 지정되어 있으면
디자인은 말 그대로 컨셉을 잡아 예쁘게 다듬고 색만 입히면 되니 작업속도가 빨라지는건 당연하다.

게다가 한 홈페이지에서는 디자인의 컨셉이 메인을 기준으로 각 페이지마다 버튼이나 폰트 등이

비슷비슷하게 들어가기 때문이다.

 

 


어쨌든 기획자가 따로 있어 고객이 원하는 방향으로 전체적인 컨셉과 프로세스, 페이지 구성을

스토리보드로 제작해준다면야 디자이너는 그 의도에 맞게 메인 페이지를 디자인하면 되지만
웹디자이너가 어느정도 위치에서 관리까지 맡고 있다면 웹기획도 할 줄 알아야 한다고 본다.

 

기획자가 따로 있지 않은 곳에선 이 역할을 메인 디자이너가 해야되기 때문이다.

 

 

 

스토리보드는 간단히 말해 홈페이지를 편집툴로 예쁘게 미화시키기 전 각 페이지마다 들어갈

사이트 화면 설계(사용자 인터페이스 설계-U.I)라 보면 된다.
이 버튼을 클릭하면 어느 페이지로 이동하고, 이 버튼은 팝업이 뜨고,

이 페이지에서는 갤러리 리스트가 어떤 방식으로 보여지고 등등의

적용 가능한 홈페이지의 모든 스토리를 담는 것.
 
디자인 전, 이 화면설계가 제대로 되야 나중에 프로세스가 꼬이지 않는것이다.
디자인 다 해놨더니 프로그래머가 이 방식으로 개발이 불가능하다고 하면

결국 다 뜯어고쳐야 되는 사태가 발생하기 때문에...

 

 


만일 초보 웹디자이너가 홈페이지 디자인을 맡게 됐을 경우 무조건 포토샵을 켜고 이것저것 시도해보기 전

홈페이지 전체의 스토리보드는 무리라해도 일단 제작하려는 페이지의 화면구성 정도는 짜 보라고 권하고 싶다.
하얀 백지에 뭐부터 시작해야 할지 몰라 헤매는 것보다 이는 디자인에 훨씬 도움이 된다.

 

 

 

 

 

 

 

일단 스토리보드를 제작할 때 가장 많이 사용하는 프로그램은 파워포인트이다.
나중에 프리젠테이션에 사용하거나 포트폴리오로 사용하기 용이하기 때문이지만 뭐 본인이 따로 더 편한 방법이 있다면 사용해도 무방하다.

 

딱히 정해진 방식은 없지만 보통 좌측에는 화면구성, 우측에는 기본 프로그램 정보, 기술정보 등을 텍스트로

기록하여 누가 보더라도 쉽게 이해할 수 있게 만드는게 좋다.

 

 

 

 

 

아래 스토리보드는 몇년 전 내가 정부과제로 만들었던것의 일부인데 참고 정도로만 보시길...

 

 

사실 스토리보드는 한번만 제대로 만들어두면 회원가입이라든가 여기저기 가져다 쓸만한게 많기 때문에

약간씩만 변형한다면 다른 스토리보드를 만들 때도 용이하다.

 

홈페이지 전체를 구성하는 이 기획단계에서 개발이 필요한부분이 있다면 당연히 개발자와도 충분한 협의가

필요하다.

개인적으로 홈페이지는 디자인보다는 사용자 편리를 위한 기능이 더 우선시되야한다고 생각되기 때문에...

아무리 예쁜 디자인이라도 사용자가 불편하다면 그 사이트가 과연 좋은 사이트일까?

 

 

 

물론~ 다른걸 다 떠나 고객이 그걸 원한다면야 해주는게 맞다고 보는데

며칠 전 재미있는 얘기를 들었다.

고객이 이 색상을 써달라고 하는데 디자이너가 그 색상은 촌스러워사용할 수 없다며 고객과 싸웠다는 것이다.

결국 그 고객은 기분나빠 못하겠다고 계약을 취소했다.

그 디자이너가 상당한 프라이드를 가지고 있는 연륜있는 디자이너였다는데 나는 참 이 상황이 의아스럽다.

 

디자이너로서의 프라이드가 모든 상황의 우선이 되는걸까...

그건 순전히 자기 만족을 위한 디자인이 아닐까...

그게 과연 훌륭한 디자이너인걸까...

 

 

 

디자인이란게 워낙 주관적인 관점이 작용하며 정답이 없다보니 항상 고객의 기호에 맞는

디자인을 찾아내기란 힘들다.

그렇다고 내 생각이 전혀 반영되지 않는다면 그 또한 디자이너로서의 가치가 떨어지는 느낌이다.

 

고객과 디자이너의 타협점을 찾는 것.

끊임없이 풀어야할 숙제가 아닌가 싶다.

 

 

 

 

 
 
 

 

Posted by 두여자 Y&S

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. webdream

    정말 좋은 정보입니다 감사합니다.

    2013.05.10 11:32 [ ADDR : EDIT/ DEL : REPLY ]
  3. ts

    너무 감사합니다 진짜 큰 도움이 되었습니다
    님좀 짱이신듯!!!
    친하게 지내요
    저도 웹기획 신입인데 나이먹고 하려니 너무 겁이나지만 그래도
    자주 들릴께요~감사합니다!

    2013.05.15 09:54 [ ADDR : EDIT/ DEL : REPLY ]
    • 나이먹고 뭔가를 새로 시작하려면 항상두렵죠.
      그래도 늦었다고 생각할때가 가장 빠른듯해여...
      저도 그래서 요새 웹표준 html이랑 css같은걸 새로 배우고 있는중인데 이제서 배워 직종 변경을 할까 요새 고민이 많네여 ㅋ

      스토리보드는 사실 위처럼 자세하게 할 필요는없는데 저는 제출문서라 필요이상으로 디테일하게 해놓은거구요~
      만드는 사람들끼리 적당히 알아볼 정도면 되요.
      어차피 다 같이 협의하면서 진행하는거니까요.

      오늘 날씨도 좋은데 좋은하루되세요~~~^^

      2013.05.15 12:58 신고 [ ADDR : EDIT/ DEL ]
  4. 밀크티

    기획서가 꼭 필요하답니다.~~ 괜찮으시다면 폼을 메일로 받고 싶습니다.^^
    좋은 하루 되시고요~ yamee79@naver.com

    2013.05.16 17:01 [ ADDR : EDIT/ DEL : REPLY ]
    • 기획서를 만드는데 틀이 필요하시단건가요?
      죄송하지만 내용은 공유하는 파일이 아니라서요...ㅠㅠ
      참고하시라고 앞에 몇장만 보내드리겠습니다.

      2013.05.17 00:54 신고 [ ADDR : EDIT/ DEL ]
  5. 이송

    양질의 글 감사합니다!
    트랙백 해갈게요 :)

    2013.06.11 18:02 [ ADDR : EDIT/ DEL : REPLY ]
  6. 최동헌

    좋은 정보 감사합니다^^
    글을 읽고 궁금한 점이 몇가지 있어 질문드립니다.
    제가 일하는 곳에서 현재 홈페이지 제작을 하고 있는데요.
    현재 디자이너가 배정되었고, 메인페이지 시안을 해야되는 상황입니다..
    아직까지 이렇다할 컨셉이 잡히지가 않아 제작이 지연되고 있습니다;
    제가 이쪽으로 전공을 했던 것도 아니라 도무지 감이 잡히질 않는데요ㅜ
    메인페이지 컨셉을 어떻게 정해야 좋을까요?
    캐릭터(시안 있음)를 이용하여 메인페이지를 제작하여야 되는데, 여기에 부합하는 디자인 컨셉이 있을까요?
    참고로 저는 장애인단체 쪽에서 일하고 있습니다.
    번거로우시겠지만 my_object@naver.com 이 메일 주소로 답변해주시면 감사하겠습니다.^^

    2013.06.11 21:46 [ ADDR : EDIT/ DEL : REPLY ]
    • 헛 너무 어려운 질문이네요'';

      일단 컨셉에 가장 중요한 어떤 목적의 어떤 컨텐츠를 가지고 홈페이지가 제작될건지 저로서는 전혀 모를뿐더러 고객이 어떤느낌의 디자인을 원하는지도 전혀 알수없으니까요...
      단지 캐릭터를 이용한다고 하셨는데 캐릭터도 귀여운것부터해서 실사적인것까지 천차만별인데다 홈페이지에 어떻게 적용시킬것인지도 전혀 모르겠구요...


      컨셉은 무작정 어떤느낌으로 그냥 예쁘게 하고싶다...이런게 아니라 '왜?'라는게 상당히 중요합니다.
      왜? 이 색상을 메인컬러로 잡았는지...왜? 전체적인 느낌을 이렇게 잡았는지...등등 모든 정보를 바탕으로 일관되게 하나로 연결해 개연성을 부여해나가야 합니다.
      그래야 내가 짜놓은 컨셉에 설득력이 생기거든요.

      그러면 나중에 주도적으로 고객을 이끌어나가는데도 유리합니다.
      이러이러한 이유로 컨셉을 어떻게 잡았다고 자신있게 프리젠테이션 할수있다면 누군가를 설득하는게 쉬워지는것도 당연하겠죠.
      그게 고객이 원한 방향과 전혀 다른 방향만 아니라면 고객의 만족도는 높아집니다.
      처음에 그 방향을 제대로 설정하기위해 고객과 대화가 필요한거구요...

      만일 업체에 로고가 있다면 좀더 쉬울겁니다.
      보통 로고 하나에 그 업체의 많은것들이 담겨있거든요.

      저도 디자이너지 전문 기획자가 아닌지라 더이상 도움을 드리긴 어려울거 같네요.
      죄송합니다. ㅜㅜ

      2013.06.12 00:47 신고 [ ADDR : EDIT/ DEL ]
  7. little

    스토리보드에 대해서 이곳을 통해 자세히 알게 되었습니다 ^^
    정말 자료 감사드려요!!!
    개인공부할려고 네이버 블로그를 이제 좀 시작할까하는데.. 링크 걸어도 될까엽??

    2013.07.03 00:33 [ ADDR : EDIT/ DEL : REPLY ]
  8. shin's

    글 잘 읽어보았습니다 ^^ 많이 배우고가네요 ^^ 스토리보드는 어느정도 할 수 있겠는데 기획이라던지 제안하는 부분이 어렵네요.. ㅠ_ㅠ

    2013.07.03 15:52 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 어렵죠 ㅠㅠ
      그저 배운다고 되는것도 아닌거같아요...
      기획이 쉬워지는 그날까지 화이팅하세요^^

      2013.07.03 16:28 신고 [ ADDR : EDIT/ DEL ]
  9. 홀릭제이

    처음으로 UI 기획을 해야 하는 상황이었는데~ 도움이 많이 되네요^^ 감사합니다~

    2013.10.02 13:50 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 저도 처음에 뭘 어떻게 해야할지 모르겠더라구요.
      그나마 저는 그때 약간이나마 도움주실뿐이 있어지만...
      제 글이 도움되었다니 다행이네요.
      열심히 하세요~^^

      2013.10.02 17:26 신고 [ ADDR : EDIT/ DEL ]
  10. 개념잡기 참 좋은 내용입니다. 잘 보고 갑니다.^^

    2013.10.09 14:10 [ ADDR : EDIT/ DEL : REPLY ]
  11. rella

    최고다. 진짜 최고예요!!
    오늘 포스팅 하나하나 다 보다가 밤샐듯

    2013.11.14 19:57 [ ADDR : EDIT/ DEL : REPLY ]
    • 감사합니다^^
      여기에 도움이 되실만한 정보가 얼마나 있을지는 모르겠네요 ㅎㅎ

      좋은밤 되세요~

      2013.11.14 20:53 신고 [ ADDR : EDIT/ DEL ]
  12. 송디

    정말 유용한 게 많은거 같아요 ㅋㅋ
    많이 많이 올려주세요 ㅋㅌㅌ

    2014.06.08 13:36 [ ADDR : EDIT/ DEL : REPLY ]
  13. 마마몬

    감사합니다~~ 열심히 공부하겠습니다~

    2015.04.05 22:29 [ ADDR : EDIT/ DEL : REPLY ]
  14. 이앙

    사용하신 프로그렘은뭔가요?

    2015.04.18 14:08 [ ADDR : EDIT/ DEL : REPLY ]
  15. ^^

    도움이 정말많이되었습니다!!! 삭제하지말아주세요 ㅎㅎ!!

    2015.09.09 11:19 [ ADDR : EDIT/ DEL : REPLY ]
    • ㅎㅎ 네 제 글이 누군가에게 도움됐다니 좋네요~
      오랜만에 이 글을 다시 보니 저도 감회가 새로워요^^:;
      불금되시길...

      2015.09.11 09:44 신고 [ ADDR : EDIT/ DEL ]
  16. 모든 페이지의 레이아웃이 다 만드는게 스토리보드인가요?

    2015.11.07 19:54 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 보통은 이렇게까지 자세하게 안하고 대략적으로 중요한 페이지들만 만듭니다.
      앞으로 제작할 홈페이지의 대략적인 주요 레이아웃들을 보는 사람(디자이너 혹은 고객)이 이해할수 있도록 정리한 판이라고 보심 될거같네요.

      2015.11.10 09:08 신고 [ ADDR : EDIT/ DEL ]
  17. 비밀댓글입니다

    2016.09.08 12:25 [ ADDR : EDIT/ DEL : REPLY ]
    • 제가 너무 댓글을 늦게봤네요^^; 작년쯤에 외장하드 고장으로 자료가 날라갔어요 ㅠㅠ

      2016.11.03 10:42 신고 [ ADDR : EDIT/ DEL ]
  18. 좋은 글 감사합니다!! 정말 많은 도움이 되었어요!!

    2016.10.10 18:47 신고 [ ADDR : EDIT/ DEL : REPLY ]
  19. ㅁㅁ

    주인장님 혹시 이 레이아웃 구성을 하시기전에 기획서에 버튼의 구성이라든지 기능 설명을 다 명시하고시고 레이아웃을 짜신건가요? 제가 인턴 과제를 하고 있는데 후배 한놈이 겁나 답답한 놈이라서 중요한 기능 안중요한 기능에 대해서 구별을 못하고 전부 명시를 해야한다고 우겨서 그러는데 답변 부탁드립니다.

    2017.02.16 20:38 [ ADDR : EDIT/ DEL : REPLY ]
    • 아뇨 그렇게까지는 안했어요. 왠만큼 중요한 기능이아니면 그렇게까지 안해도 될거같은데요? 뭐 하는사람 마음이지만 실무에선 적당히 말로 설명하고 넘어가는부분이 훨씬 많습니다. 과제라서 정석적으로 하려고하는거같은데 그렇더라도 중요한 기능 위주의 설명만 넣으시면 될 거 같습니다.

      2017.03.24 19:37 신고 [ ADDR : EDIT/ DEL ]
  20. 비밀댓글입니다

    2017.02.21 16:38 [ ADDR : EDIT/ DEL : REPLY ]
  21. 뉴비

    웹 기획관련 공부를 위해 자료를 찾던 도중 참고할만한 사이트를 찾게 되서 감사하게 생각합니다.
    웹 기획 경험이 없기 때문에 아무것도 몰랐지만 보면서 대충 어떤 포맷으로 기획서를 짜면 될지 잣대가 세워진거 같습니다.
    감사합니다.

    2019.06.03 18:48 [ ADDR : EDIT/ DEL : REPLY ]