Do it! 웹 사이트 기획 입문

어제도 화면 정의서를 쓴 12년 차 선배의 일대일 과외 수업!

이정원 지음

이지스퍼블리싱 2017년 08월 25일 출간 종이책 : 2017년 08월 29일 출간

작품소개

책소개

고객은 못 보는 관리자용 화면 정의서까지, 쇼핑몰 설계도를 모두 공개!

실무 2년보다 이 책 한 권이 낫다! 꼭꼭 눌러 담은 웹 기획의 정석을 만나라! 글로 배워서는 자전거를 탈 수 없다. 기획도 마찬가지. 저자는 기획이란 누구나 배워 익힐 수 있는 실무적인 기술이기 때문에 직접 해 보는 것이 가장 효과적인 학습 방법이라고 주장한다. 이 책에서는 기획자가 쓰는 문서 양식과 쇼핑몰 웹 사이트를 만드는 전 과정과 공개했다. 한 단계씩 순차적으로 실습하면 진짜 웹 기획자의 일을 구체적으로 배울 수 있도록 설계한 것이다. 장과 절이 끝날 때마다 실무에서 맞닥뜨릴 수 있는 과제를 ‘도전! 웹 기획 실무’와 ‘돌발! 의뢰인의 변심’ 코너로 구성한 것도 눈에 띈다.

게다가 이용자용 화면 정의서는 물론, 일반인은 못 보는 관리자용 화면 정의서까지 통으로 담았으니, 이 책, 말 다 했다. 양이 많다고 걱정 마시라. 저자의 12년 실무 노하우가 담긴 화면 정의서 작성 방법과 꼼꼼한 해설은 자전거를 배울 때 뒤를 잡아 주는 아빠의 손처럼 든든하다. 웹 기획 분야 취업 준비생부터 웹 기획자로 전직하길 원하는 디자이너와 개발자 그리고 웹 사이트를 발주하는 클라이언트까지, 웹 사이트를 제대로 만들고 싶은 사람이라면 꼭 읽어야 할 책!

목차

첫째마당 | 웹 기획자로 로그인하기

01 웹, 기획을 만나다 12
01-1 웹 사이트만 만들면 끝? 13
01-2 웹 기획자가 필요한 이유 16
01-3 기획자답게 사고하기 18
도전! 웹 기획 실무 상품 결제 방법을 수정하는 개념도 그리기 27

02 웹 사이트 제작 과정 이해하기 28
02-1 웹 사이트는 어떻게 만드는 걸까? 29
02-2 웹 기획자는 어떤 일을 할까? 31
02-3 디자이너, 퍼블리셔 그리고 개발자 41
02-4 한 번은 꼭 써먹게 되는 협업의 기술 44
도전! 웹 기획 실무 카테고리별로 상품 진열하기 49
스페셜 01 웹 사이트 구동 원리와 기본 용어 50

둘째마당 | 웹 쇼핑몰 기획하기

03 웹 사이트와 웹 쇼핑몰 56
03-1 웹 쇼핑몰, 다른 웹 사이트와 뭐가 다른가요? 57
03-2 웹 쇼핑몰을 설계할 때 꼭 알아야 할 필수 개념 60
도전! 웹 기획 실무 메인 화면의 주요 콘텐츠를 기획해 보세요 65

04 웹 기획 필수 문서 작성하기 66
04-1 사업 계획서 살펴보기 67
04-2 기능 정의서 작성하기 70
04-3 정책 정의서 작성하기 73
04-4 일정표 만들기 77
도전! 웹 기획 실무 필요한 기능과 정책을 정의해 보세요 80

05 웹 사이트 구조와 글로벌 내비게이션 설계하기 81
05-1 웹 사이트 구조 설계하기 82
05-2 글로벌 내비게이션 설계하기 86
도전! 웹 기획 실무 라라펜션 홈페이지의 GNB를 만들어 보세요 92

06 화면 설계하기 93
06-1 기획자는 화면 정의서로 말한다 94
06-2 화면 정의서 구성 요소 이해하기 99
06-3 화면 정의서 작성 방법 익히기 104
도전! 웹 기획 실무 로그인 화면의 디스크립션을 완성해 보세요 114
스페셜 02 웹 기획자 취업 길라잡이 115

셋째마당 | 화면 정의서 작성하기

07 파워포인트에 파워모크업 설치하기 122
07-1 파워모크업이란? 123
07-2 파워모크업 설치하기 125
07-3 더 많은 도형 다운로드하기 127
07-4 나만의 라이브러리 관리하기 130
07-5 정식 버전으로 업그레이드하는 방법 139
도전! 웹 기획 실무 파워모크업으로 웹 사이트 스케치하기 142

08 이용자 화면 정의서 작성하기 143
08-1 헤더와 푸터 144
[돌발! 의뢰인의 변심] 연관 사이트를 푸터에 추가해 주세요 151
08-2 회원 가입 프로세스 152
[돌발! 의뢰인의 변심] 어떻게 하면 이용자가 약관 내용을 꼼꼼히 읽을까요? 162
[돌발! 의뢰인의 변심] 회원 가입 단계에서 경고창을 띄우지 말아 주세요 163
08-3 회사 소개 164
[돌발! 의뢰인의 변심] 회사 소개 내용을 하나의 화면 안에 전부 담아 주세요 168
08-4 스타일 숍 상품 소개 169
[돌발! 의뢰인의 변심] 상품 상세 보기 화면에 추가 기능이 필요합니다 183
08-5 오픈 숍 상품 소개 184
[돌발! 의뢰인의 변심] 상품 상세 보기 화면에 ‘좋아요’ 기능을 추가해 주세요 194
08-6 상품 구매 프로세스 195
[돌발! 의뢰인의 변심] 배송지를 여러 곳으로 설정할 수 있도록 수정해 주세요 205
08-7 상품평 206
[돌발! 의뢰인의 변심] 상품평 작성 방법을 개선해 주세요 211
08-8 이벤트 게시판 212
[돌발! 의뢰인의 변심] 이미지가 강조될 수 있게 이벤트 화면을 수정해 주세요 216
08-9 고객센터 217
[돌발! 의뢰인의 변심] 비회원도 상품 문의를 할 수 있도록 수정해 주세요 231
08-10 마이 페이지(1) 쇼핑 이용 정보 232
[돌발! 의뢰인의 변심] 소멸 예정 포인트가 궁금합니다 243
08-11 마이 페이지(2) 오픈 숍 상품 관리 244
[돌발! 의뢰인의 변심] 구매자와 판매자가 다투는 일이 자주 일어납니다 255
08-12 마이 페이지(3) 게시판 이용 내역 256
[돌발! 의뢰인의 변심] 1:1 문의 답변에 다시 문의하고 싶어요 262
08-13 마이 페이지(4) 개인정보 수정, 회원 탈퇴 263
[돌발! 의뢰인의 변심] 개인 정보 내용에 배송지 정보도 추가해 주세요 268
08-14 메인 화면 269
[돌발! 의뢰인의 변심] 메인 화면을 개인 맞춤형으로 구성해 주세요 278

09 관리자 화면 정의서 작성하기 279
09-1 사이트 맵과 로그인 화면 280
[돌발! 의뢰인의 변심] 관리자 계정 신청 방법을 개선해 주세요 284
09-2 주문 관리 285
[돌발! 의뢰인의 변심] 스타일 숍 주문 관리 화면의 검색 기능을 개선해 주세요 298
09-3 게시판 관리 299
[돌발! 의뢰인의 변심] 고객 감사 이벤트를 기획해 주세요 314
09-4 회원 관리 315
[돌발! 의뢰인의 변심] 전 고객에게 라라마켓 소식지를 발송해 주세요 324
09-5 메인 상품 및 배너 관리 325
[돌발! 의뢰인의 변심] 메인에 띄울 수 있는 알림창 생성 기능을 추가해 주세요 330
09-6 상품 관리 331
[돌발! 의뢰인의 변심] 상품 등록 기능을 개선해 주세요 343
09-7 통계 344
[돌발! 의뢰인의 변심] 방문자 수를 직관적으로 확인하고 싶어요. 351
09-8 기본 정책 관리 352
[돌발! 의뢰인의 변심] 이용 약관 관리 화면에 히스토리 기능을 추가해 주세요 358
09-9 메인 화면과 사내 게시판 관리 359
[돌발! 의뢰인의 변심] 휴가 관리 기능을 추가해 주세요 362

10 화면 정의서 이후 웹 기획자의 역할 363
10-1 디자인, 퍼블리싱, 개발 진행 및 검토하기 364
10-2 웹 사이트 테스트하기 374
10-3 웹 사이트 오픈 후 웹 기획자의 역할 380
스페셜 03 1+2 반응형 웹 화면 정의서 작성 방법 383

책 속으로

“12년 차 선배에게 배우세요.”
- 신입 사원에게 설명한다 생각하고 알기 쉽게 정리했습니다
첫째마당에서는 실무 현장이 기획자에게 요구하는 업무 능력을 체계적으로 배운다. 디자이너, 퍼블리셔, 개발자의 역할과 협업 방법부터, 웹 사이트를 만드는 과정까지 신입 사원에게 설명하듯 알기 쉽게 정리했다. 업무가 앞뒤로 어떻게 연결되는지, 웹 기획자는 구체적으로 어느 시점에 어떤 일을 하는지, 누구와 함께 일하는지, 어떤 언어로 소통하는지를 알면, 돌발 상황에 유연하게 대처하고 시행착오를 줄일 수 있을 것이다.
웹 기획자는 PM(Project Manager)의 여러 역할을 겸하는 경우가 많다. 이 책을 통해 전체를 조망하는 넓은 시야와 하나의 팀으로 일하는 방식을 흡수하길 바란다.

“기획자가 일하는 방식을 그대로 배우세요.”
- 웹 기획 문서 양식과 쇼핑몰 제작 전 과정을 수록했습니다.
둘째마당에서는 벤치마킹 보고서, 기능 정의서, 정책 정의서 등 웹을 기획할 때 꼭 사용하는 문서와 그 작성 방법을 구체적으로 배운다. 웹 기획자에게 문서는 업무의 결과물이자 팀원과 고객을 설득하는 커뮤니케이션 도구이다. 각 문서의 의미와 방법까지 깊이 있게 배워야 어떤 프로젝트를 만나든 자유자재로 쓸 수 있다.
언제, 어떤 문서를, 어떻게 사용할지는 ‘라라마켓’이라는 가상의 웹 쇼핑몰 기획 과정을 그대로 따라가면 자연스럽게 익힐 수 있다. 이처럼 실무에서 쓰는 문서와 일하는 방식을 그대로 담았기 때문에 초보자라도 이 책 한 권을 통해 하나의 프로젝트를 진행한 경력자가 될 수 있다.

“진짜 웹 사이트를 의뢰받은 기획자처럼!”
- 일반인은 볼 수 없는 관리자용 화면 정의서까지 공개합니다
셋째마당에서는 이용자 화면 정의서와 관리자 화면 정의서를 둘 다 배운다. 일반인이 관리자용 화면 정의서를 접하기는 쉽지 않다. 그러나 이 책은 쇼핑몰 관리자가 어떤 화면을 보고 주문을 접수받고 회원을 관리하는지 하나도 빠짐없이 보여 준다.
화면 정의서는 디자이너, 퍼블리셔, 개발자의 작업 지침서이자 둘째마당에서 작성한 필수 문서가 전부 반영된 웹 기획자의 최종 산출물이다. 그렇게 때문에 디자이너, 퍼블리셔, 개발자에게 어떤 정보를 어떻게 전달해야 하는지 웹 기획 과외를 하듯 차근히 설명했다. 화면 정의서를 작성할 때 무엇을 유의해야 하는지 업계 선배의 마음으로 집필했고, 로그인 화면부터 게시판 하나까지 입문자 입장에서 궁금할 내용이라고 생각되면 지면을 많이 할애해서라도 책에 꼭 넣었다.

“전문가의 화면 설계 도구를 배우세요.”
- 당신의 첫 번째 웹 프로토타이핑 도구, 파워모크업의 활용법을 최초로 소개합니다
업계에서 가장 많이 쓰는 웹 프로토타이핑 도구는 파워포인트이다. 기능이 뛰어난 전문 유료 프로그램도 많지만 협업하는 팀원이나 클라리언트도 같은 프로그램을 써야 호환이 되기 때문에 이용자는 그리 많지 않다. 이 책에서 실습할 파워모크업(PowerMockup)은 파워포인트의 대중적인 강점은 그대로 유지한 채 조금 부족했던 스케치 기능을 보완해 주는 애드온(add-on) 프로그램이다. 간단한 설치만으로 당신의 파워포인트를 전문 웹 기획자의 도구로 바꿀 수 있다. 사용법은 파워포인트와 같아서 별도로 사용법을 익힐 필요가 없다는 점도 장점이다. 파워포인트만 있으면 누구나 파워모크업을 덧붙여 쓸 수 있기 때문에 입문자부터 숙련자까지 사용층이 매우 넓다. 파워모크업은 7장에서 실습을 통해 자세히 배울 수 있다.

“반응형 웹 기획 방법까지 한번에 배우세요.”
- 기획의 원리는 같다! 모바일용 웹 화면 기획도 문제없습니다.
반응형 웹을 만들 때는 모바일 화면을 먼저 기획할까? PC 화면을 먼저 기획할까? 정답은 후자다. PC 화면을 먼저 기획한 후 모바일 화면은 화면 크기를 고려해서 PC 화면의 기능 중 일부를 생략하는 등 간결하게 수정하는 방식으로 기획한다. 하지만 모바일 기기가 갖고 있는 몇 가지 특징만 추가로 고려할 뿐 PC와 모바일 둘 다 기획의 원리는 다르지 않다. 따라서 PC 화면을 기획할 수 있다면 모바일 화면도 수월하게 기획할 수 있다. 모바일 화면을 기획할 때 유의할 점은 셋째마당의 스페셜 코너에서 별도로 소개한다.

“돌발! 의뢰인의 변심! 도전! 웹 기획 실무!”
- 실습 비중을 높였습니다. 학원, 대학 교재로도 좋습니다.
실무에서 경험할 수 있는 다양한 업무를 미리 연습할 수 있도록 실습 과제의 비중을 높였다. 입문자라도 실전 감각을 울 수 있게 [도전! 웹 기획 실무] 코너를 배치했다. 화면 정의서를 본격적으로 작성하는 8, 9장에서는 절마다 [돌발! 의뢰인의 변심] 코너가 느닷없이 등장하여, 독자에게 생각거리를 끊임없이 던져 준다. 독자는 의뢰인의 요구 사항을 분석하여 화면 정의서에 어떻게 반영할지 고민해야 한다. 의뢰인의 요구 사항을 기획자답게 해결해 보며 기획 역량을 키울 수 있다. 이렇듯 스스로 생각해 볼 거리가 많기 때문에 교재로도 손색이 없다.

출판사 서평

지금까지 웹 사이트 설계도를
모두 공개한 책은 없었다!

쇼핑몰 제작 전 과정을 따라 하며
웹 기획자의 일을 구체적으로 배우는 책!

“
단언컨대,
실무 2년보다 이 책 한 권이
낫습니다.
”

“12년 차 선배에게 배우세요.”
- 신입 사원에게 설명한다 생각하고 알기 쉽게 정리했습니다
첫째마당에서는 실무 현장이 기획자에게 요구하는 업무 능력을 체계적으로 배운다. 디자이너, 퍼블리셔, 개발자의 역할과 협업 방법부터, 웹 사이트를 만드는 과정까지 신입 사원에게 설명하듯 알기 쉽게 정리했다. 업무가 앞뒤로 어떻게 연결되는지, 웹 기획자는 구체적으로 어느 시점에 어떤 일을 하는지, 누구와 함께 일하는지, 어떤 언어로 소통하는지를 알면, 돌발 상황에 유연하게 대처하고 시행착오를 줄일 수 있을 것이다.
웹 기획자는 PM(Project Manager)의 여러 역할을 겸하는 경우가 많다. 이 책을 통해 전체를 조망하는 넓은 시야와 하나의 팀으로 일하는 방식을 흡수하길 바란다.

“기획자가 일하는 방식을 그대로 배우세요.”
- 웹 기획 문서 양식과 쇼핑몰 제작 전 과정을 수록했습니다.
둘째마당에서는 벤치마킹 보고서, 기능 정의서, 정책 정의서 등 웹을 기획할 때 꼭 사용하는 문서와 그 작성 방법을 구체적으로 배운다. 웹 기획자에게 문서는 업무의 결과물이자 팀원과 고객을 설득하는 커뮤니케이션 도구이다. 각 문서의 의미와 방법까지 깊이 있게 배워야 어떤 프로젝트를 만나든 자유자재로 쓸 수 있다.
언제, 어떤 문서를, 어떻게 사용할지는 ‘라라마켓’이라는 가상의 웹 쇼핑몰 기획 과정을 그대로 따라가면 자연스럽게 익힐 수 있다. 이처럼 실무에서 쓰는 문서와 일하는 방식을 그대로 담았기 때문에 초보자라도 이 책 한 권을 통해 하나의 프로젝트를 진행한 경력자가 될 수 있다.

“진짜 웹 사이트를 의뢰받은 기획자처럼!”
- 일반인은 볼 수 없는 관리자용 화면 정의서까지 공개합니다
셋째마당에서는 이용자 화면 정의서와 관리자 화면 정의서를 둘 다 배운다. 일반인이 관리자용 화면 정의서를 접하기는 쉽지 않다. 그러나 이 책은 쇼핑몰 관리자가 어떤 화면을 보고 주문을 접수받고 회원을 관리하는지 하나도 빠짐없이 보여 준다.
화면 정의서는 디자이너, 퍼블리셔, 개발자의 작업 지침서이자 둘째마당에서 작성한 필수 문서가 전부 반영된 웹 기획자의 최종 산출물이다. 그렇게 때문에 디자이너, 퍼블리셔, 개발자에게 어떤 정보를 어떻게 전달해야 하는지 웹 기획 과외를 하듯 차근히 설명했다. 화면 정의서를 작성할 때 무엇을 유의해야 하는지 업계 선배의 마음으로 집필했고, 로그인 화면부터 게시판 하나까지 입문자 입장에서 궁금할 내용이라고 생각되면 지면을 많이 할애해서라도 책에 꼭 넣었다.

“전문가의 화면 설계 도구를 배우세요.”
- 당신의 첫 번째 웹 프로토타이핑 도구, 파워모크업의 활용법을 최초로 소개합니다
업계에서 가장 많이 쓰는 웹 프로토타이핑 도구는 파워포인트이다. 기능이 뛰어난 전문 유료 프로그램도 많지만 협업하는 팀원이나 클라리언트도 같은 프로그램을 써야 호환이 되기 때문에 이용자는 그리 많지 않다. 이 책에서 실습할 파워모크업(PowerMockup)은 파워포인트의 대중적인 강점은 그대로 유지한 채 조금 부족했던 스케치 기능을 보완해 주는 애드온(add-on) 프로그램이다. 간단한 설치만으로 당신의 파워포인트를 전문 웹 기획자의 도구로 바꿀 수 있다. 사용법은 파워포인트와 같아서 별도로 사용법을 익힐 필요가 없다는 점도 장점이다. 파워포인트만 있으면 누구나 파워모크업을 덧붙여 쓸 수 있기 때문에 입문자부터 숙련자까지 사용층이 매우 넓다. 파워모크업은 7장에서 실습을 통해 자세히 배울 수 있다.

“반응형 웹 기획 방법까지 한번에 배우세요.”
- 기획의 원리는 같다! 모바일용 웹 화면 기획도 문제없습니다.
반응형 웹을 만들 때는 모바일 화면을 먼저 기획할까? PC 화면을 먼저 기획할까? 정답은 후자다. PC 화면을 먼저 기획한 후 모바일 화면은 화면 크기를 고려해서 PC 화면의 기능 중 일부를 생략하는 등 간결하게 수정하는 방식으로 기획한다. 하지만 모바일 기기가 갖고 있는 몇 가지 특징만 추가로 고려할 뿐 PC와 모바일 둘 다 기획의 원리는 다르지 않다. 따라서 PC 화면을 기획할 수 있다면 모바일 화면도 수월하게 기획할 수 있다. 모바일 화면을 기획할 때 유의할 점은 셋째마당의 스페셜 코너에서 별도로 소개한다.

“돌발! 의뢰인의 변심! 도전! 웹 기획 실무!”
- 실습 비중을 높였습니다. 학원, 대학 교재로도 좋습니다.
실무에서 경험할 수 있는 다양한 업무를 미리 연습할 수 있도록 실습 과제의 비중을 높였다. 입문자라도 실전 감각을 울 수 있게 [도전! 웹 기획 실무] 코너를 배치했다. 화면 정의서를 본격적으로 작성하는 8, 9장에서는 절마다 [돌발! 의뢰인의 변심] 코너가 느닷없이 등장하여, 독자에게 생각거리를 끊임없이 던져 준다. 독자는 의뢰인의 요구 사항을 분석하여 화면 정의서에 어떻게 반영할지 고민해야 한다. 의뢰인의 요구 사항을 기획자답게 해결해 보며 기획 역량을 키울 수 있다. 이렇듯 스스로 생각해 볼 거리가 많기 때문에 교재로도 손색이 없다.

“취준생부터 클라이언트까지 웹 사이트를 제대로 만들고 싶은 사람의 필독서!”
● 웹 기획자가 되고 싶은 취준생
● 물어볼 사수가 없어서 막막한 웹 기획 신입사원
● 웹 기획자로 전향하길 원하는 디자이너 또는 개발자
● 웹 사이트 제작 프로젝트를 맡은 PM
● 새로운 웹 서비스를 준비하는 창업가
● 웹 사이트를 의뢰해야 할 클라이언트

작가정보

저자(글) 이정원

저자 이정원은 웹 에이전시 근무를 시작으로 12년간 웹 기획자로 일했다. 제조, 유통, 식품, 비영리 재단 등 다양한 분야의 홈페이지와 쇼핑몰을 기획·제작했으며 여러 중소기업과 LG전자의 신제품 웹 마케팅 기획에도 참여했다. 이후에는 LG유플러스의 웹하드 사이트를 운영·관리하며 신규 서비스 개발과 마케팅 업무를 5년간 담당했고, LG전자의 스마트월드와 농협의 B2B 전자상거래 웹 사이트를 리뉴얼하는 프로젝트를 진행했다. 현재는 프리랜서 웹 기획자로 활동하며 웹 기획 입문자를 위한 멘토링도 병행하고 있다.

블로그 sitemade.co.kr