지금까지 웹 사이트 설계도를 모두 공개한 책은 없었다! 쇼핑몰 제작 전 과정을 따라 하며 웹 기획자의 일을 구체적으로 배우는 책! “ 단언컨대, 실무 2년보다 이 책 한 권이 낫습니다. ” “12년 차 선배에게 배우세요.” - 신입 사원에게 설명한다 생각하고 알기 쉽게 정리했습니다 첫째마당에서는 실무 현장이 기획자에게 요구하는 업무 능력을 체계적으로 배운다. 디자이너, 퍼블리셔, 개발자의 역할과 협업 방법부터, 웹 사이트를 만드는 과정까지 신입 사원에게 설명하듯 알기 쉽게 정리했다. 업무가 앞뒤로 어떻게 연결되는지, 웹 기획자는 구체적으로 어느 시점에 어떤 일을 하는지, 누구와 함께 일하는지, 어떤 언어로 소통하는지를 알면, 돌발 상황에 유연하게 대처하고 시행착오를 줄일 수 있을 것이다. 웹 기획자는 PM(Project Manager)의 여러 역할을 겸하는 경우가 많다. 이 책을 통해 전체를 조망하는 넓은 시야와 하나의 팀으로 일하는 방식을 흡수하길 바란다. “기획자가 일하는 방식을 그대로 배우세요.” - 웹 기획 문서 양식과 쇼핑몰 제작 전 과정을 수록했습니다. 둘째마당에서는 벤치마킹 보고서, 기능 정의서, 정책 정의서 등 웹을 기획할 때 꼭 사용하는 문서와 그 작성 방법을 구체적으로 배운다. 웹 기획자에게 문서는 업무의 결과물이자 팀원과 고객을 설득하는 커뮤니케이션 도구이다. 각 문서의 의미와 방법까지 깊이 있게 배워야 어떤 프로젝트를 만나든 자유자재로 쓸 수 있다. 언제, 어떤 문서를, 어떻게 사용할지는 ‘라라마켓’이라는 가상의 웹 쇼핑몰 기획 과정을 그대로 따라가면 자연스럽게 익힐 수 있다. 이처럼 실무에서 쓰는 문서와 일하는 방식을 그대로 담았기 때문에 초보자라도 이 책 한 권을 통해 하나의 프로젝트를 진행한 경력자가 될 수 있다. “진짜 웹 사이트를 의뢰받은 기획자처럼!” - 일반인은 볼 수 없는 관리자용 화면 정의서까지 공개합니다 셋째마당에서는 이용자 화면 정의서와 관리자 화면 정의서를 둘 다 배운다. 일반인이 관리자용 화면 정의서를 접하기는 쉽지 않다. 그러나 이 책은 쇼핑몰 관리자가 어떤 화면을 보고 주문을 접수받고 회원을 관리하는지 하나도 빠짐없이 보여 준다. 화면 정의서는 디자이너, 퍼블리셔, 개발자의 작업 지침서이자 둘째마당에서 작성한 필수 문서가 전부 반영된 웹 기획자의 최종 산출물이다. 그렇게 때문에 디자이너, 퍼블리셔, 개발자에게 어떤 정보를 어떻게 전달해야 하는지 웹 기획 과외를 하듯 차근히 설명했다. 화면 정의서를 작성할 때 무엇을 유의해야 하는지 업계 선배의 마음으로 집필했고, 로그인 화면부터 게시판 하나까지 입문자 입장에서 궁금할 내용이라고 생각되면 지면을 많이 할애해서라도 책에 꼭 넣었다. “전문가의 화면 설계 도구를 배우세요.” - 당신의 첫 번째 웹 프로토타이핑 도구, 파워모크업의 활용법을 최초로 소개합니다 업계에서 가장 많이 쓰는 웹 프로토타이핑 도구는 파워포인트이다. 기능이 뛰어난 전문 유료 프로그램도 많지만 협업하는 팀원이나 클라리언트도 같은 프로그램을 써야 호환이 되기 때문에 이용자는 그리 많지 않다. 이 책에서 실습할 파워모크업(PowerMockup)은 파워포인트의 대중적인 강점은 그대로 유지한 채 조금 부족했던 스케치 기능을 보완해 주는 애드온(add-on) 프로그램이다. 간단한 설치만으로 당신의 파워포인트를 전문 웹 기획자의 도구로 바꿀 수 있다. 사용법은 파워포인트와 같아서 별도로 사용법을 익힐 필요가 없다는 점도 장점이다. 파워포인트만 있으면 누구나 파워모크업을 덧붙여 쓸 수 있기 때문에 입문자부터 숙련자까지 사용층이 매우 넓다. 파워모크업은 7장에서 실습을 통해 자세히 배울 수 있다. “반응형 웹 기획 방법까지 한번에 배우세요.” - 기획의 원리는 같다! 모바일용 웹 화면 기획도 문제없습니다. 반응형 웹을 만들 때는 모바일 화면을 먼저 기획할까? PC 화면을 먼저 기획할까? 정답은 후자다. PC 화면을 먼저 기획한 후 모바일 화면은 화면 크기를 고려해서 PC 화면의 기능 중 일부를 생략하는 등 간결하게 수정하는 방식으로 기획한다. 하지만 모바일 기기가 갖고 있는 몇 가지 특징만 추가로 고려할 뿐 PC와 모바일 둘 다 기획의 원리는 다르지 않다. 따라서 PC 화면을 기획할 수 있다면 모바일 화면도 수월하게 기획할 수 있다. 모바일 화면을 기획할 때 유의할 점은 셋째마당의 스페셜 코너에서 별도로 소개한다. “돌발! 의뢰인의 변심! 도전! 웹 기획 실무!” - 실습 비중을 높였습니다. 학원, 대학 교재로도 좋습니다. 실무에서 경험할 수 있는 다양한 업무를 미리 연습할 수 있도록 실습 과제의 비중을 높였다. 입문자라도 실전 감각을 울 수 있게 [도전! 웹 기획 실무] 코너를 배치했다. 화면 정의서를 본격적으로 작성하는 8, 9장에서는 절마다 [돌발! 의뢰인의 변심] 코너가 느닷없이 등장하여, 독자에게 생각거리를 끊임없이 던져 준다. 독자는 의뢰인의 요구 사항을 분석하여 화면 정의서에 어떻게 반영할지 고민해야 한다. 의뢰인의 요구 사항을 기획자답게 해결해 보며 기획 역량을 키울 수 있다. 이렇듯 스스로 생각해 볼 거리가 많기 때문에 교재로도 손색이 없다. “취준생부터 클라이언트까지 웹 사이트를 제대로 만들고 싶은 사람의 필독서!” ● 웹 기획자가 되고 싶은 취준생 ● 물어볼 사수가 없어서 막막한 웹 기획 신입사원 ● 웹 기획자로 전향하길 원하는 디자이너 또는 개발자 ● 웹 사이트 제작 프로젝트를 맡은 PM ● 새로운 웹 서비스를 준비하는 창업가 ● 웹 사이트를 의뢰해야 할 클라이언트

첫째마당 | 웹 기획자로 로그인하기 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장에서는 절마다 [돌발! 의뢰인의 변심] 코너가 느닷없이 등장하여, 독자에게 생각거리를 끊임없이 던져 준다. 독자는 의뢰인의 요구 사항을 분석하여 화면 정의서에 어떻게 반영할지 고민해야 한다. 의뢰인의 요구 사항을 기획자답게 해결해 보며 기획 역량을 키울 수 있다. 이렇듯 스스로 생각해 볼 거리가 많기 때문에 교재로도 손색이 없다.