Do it! 웹 사이트 기획 입문 (18년 차 기획자가 알려주는 화면 UI 설계의 모든 것! | 전면개정판)

이정원

웹 에이전시 근무를 시작으로 18년 차 웹 기획자로 일하고 있다. 제조, 유통, 식품, 비영리 재단 등 다양한 분야의 웹 사이트 기획 · 제작 · 마케팅 경험이 있다. 주요 경력으로 LG유플러스 웹하드 사이트 운영 · 관리를 5년간 담당했고, LG전자 스마트월드 앱, 농협 B2B 쇼핑몰 리뉴얼 프로젝트에 참여했다. 현재 웹 기획 전문 회사에서 UI · UX 연구와 플랫폼 서비스 기획을 담당하고 있으며, 웹 기획 입문자를 위한 멘토링도 병행하고 있다.

블로그 sitemade.co.kr

첫째마당 기획, 첫발을 내딛다
01 IT 기획의 필수 개념 알기
01-1 IT 기획자로 생각 전환하기
01-2 웹 사이트의 유형별 개념 이해하기
01-3 웹 서비스의 구현 과정 파악하기
01-4 웹 사이트의 구조 설계하기
01-5 기획에 필요한 4가지 주요 문서
기능 정의서 | 정책 정의서 | 화면 정의서 | 일정 산출표

02 화면 정의서의 기본 익히기
02-1 기획자는 화면 정의서로 말한다
02-2 화면 정의서의 구성 요소 이해하기
02-3 화면 정의서 작성 방법 익히기
02-4 공통 UI 구성하기
02-5 글로벌 내비게이션 바(GNB)

둘째마당 화면 정의서 작성하기
03 화면 정의를 위한 준비
03-1 라라마켓 서비스 기획서 살펴보기
03-2 화면 정의서 작성 도구 소개
04 이용자 화면 설계
04-1 헤더와 푸터
헤더 | GNB 서브 메뉴 | 푸터
04-2 회원 가입
회원 가입 프로세스 | 약관 동의 화면 | 회원 정보 입력 화면 | 회원 가입 타당성 검증 화면 | 본인 인증 화면
04-3 회사 소개
소개 화면
04-4 스타일 숍 상품 소개
상품 목록 화면 | 상품 상세(소개) 화면 | 상품 상세 - 상품 구매 버튼 및 탭 메뉴 | 상품 상세 - 상품 리뷰 탭 화면 | 상품 상세 - 상품 문의 탭 화면 | 상품 상세 - 배송 안내/교환 및 반품 탭 화면
04-5 오픈 숍 상품 소개
상품 목록 화면 | 상품 상세(소개) 화면 | 상품 상세 - 허위 상품 신고 팝업 | 상품 상세 - 댓글 기능
04-6 상품 구매 프로세스
주문 및 결제 - 구매 목록 화면 | 주문 및 결제 - 주문자/배송 정보 입력 화면 | 주문 및 결제 - PG사 연결 화면 | 주문 완료 화면
04-7 상품 리뷰
상품 리뷰 목록 화면 | 상품 리뷰 작성 팝업
04-8 이벤트 게시판
이벤트 목록 화면 | 이벤트 상세 보기 화면
04-9 고객센터
공지사항 목록 화면 | 공지사항 상세 보기 화면 | 커뮤니티 게시판 목록 화면 | 커뮤니티 게시판 상세 보기 화면 | 커뮤니티 게시판 글쓰기 화면 | 자주 묻는 질문 화면 | 상품 문의 화면 | 아이디 찾기 화면 | 비밀번호 찾기 화면
04-10 마이 페이지(1) 쇼핑 이용 정보
마이 페이지 서브 메뉴 화면 | 장바구니 화면 | 주문 내역/배송 조회 목록 화면 | 주문 내역/배송 조회 상세 화면 | 교환 신청 팝업 화면 | 교환/환불 신청 내역 목록 화면 | 교환/환불 신청 내역 상세 화면 | 포인트 이용 내역 조회 화면
04-11 마이 페이지(2) 오픈 숍 상품 관리
상품 등록 화면 | 거래 상품 목록 화면 | 주문 관리 목록 화면 | 주문 관리 상세 화면
04-12 마이 페이지(3) 게시판 이용 내역
1:1 문의 목록 화면 | 1:1 문의 상세 화면 | 1:1 문의 작성 화면 | 나의 상품 리뷰 화면 | 나의 상품 문의 화면
04-13 마이 페이지(4) 개인정보 수정, 회원 탈퇴
비밀번호 확인 화면 | 개인정보 수정 화면 | 비밀번호 변경 화면 | 회원 탈퇴 화면
04-14 메인 화면
메인 배너 기능 | 상품 호출 기능 | 게시판 글 호출 기능 | 검색 결과 화면 | 로그인 화면

05 관리자 화면 설계
05-1 IA 설계와 로그인 화면
IA 설계 | 로그인 기능 | GNB | 서브 화면 레이아웃
05-2 주문 관리
스타일 숍 주문 - 주문 관리 목록 화면 | 스타일 숍 주문 - 주문 관리 상세 화면 | 스타일 숍 주문 - 주문 취소 관리 목록 화면 | 스타일 숍 주문 - 주문 취소 관리 상세 화면 | 스타일 숍 주문 - 교환 신청 관리 목록 화면 | 스타일 숍 주문 - 교환 신청 관리 상세 화면 | 오픈 숍 주문 - 주문 현황 목록 화면 | 오픈 숍 주문 - 주문 현황 상세 화면 | 오픈 숍 주문 - 포인트 지급 현황 화면
05-3 게시판 관리
스타일 숍 공지사항 관리 화면 | 고객센터 공지사항 관리 화면 | 커뮤니티 관리 화면 | 상품 문의 관리 화면 | 1:1 문의 관리 화면 | 상품 리뷰 관리 화면 | 자주 묻는 질문 관리 화면 | 이벤트 관리 화면 | 허위 상품 접수 관리 화면 | 게시판 구분 관리 화면
05-4 회원 관리
회원 목록 화면 | 회원 정보 상세 화면 | 탈퇴 회원 목록 화면 | 메일 관리 화면 | SMS 관리 화면 | 대량 메일 발송 화면
05-5 메인 상품 및 배너 관리
메인 상품 관리 화면 | 배너 관리 화면
05-6 상품 관리
스타일 숍 - 상품 등록 화면 | 스타일 숍 - 상품 목록 화면 | 스타일 숍 - 상품 카테고리 관리 화면
05-7 통계
통계 화면 준비사항 | 방문자 수 통계 화면 | 회원 수 통계 화면 | 상품 조회 수 통계 화면 | 카테고리 조회 수, 상품 판매 순위 통계 화면 | 포인트 통계 화면 | 탈퇴 사유 통계 화면
05-8 기본 정책 관리
약관 관리 화면 | 정책 관리 화면 | 결제 방법 관리 화면 | 메뉴 접근 권한 화면
05-9 메인 화면과 사내 게시판 관리
메인 화면 | 사내 게시판 화면

셋째마당 일 잘하는 기획자로 거듭나기
06 화면 설계 이후 웹 기획자의 업무
06-1 디자인, 퍼블리싱, 개발 진행 및 검토
06-2 완료된 웹 사이트 검증하기
06-3 사이트 오픈 후 웹 기획자의 운영 업무

07 웹 기획자로서 역량 강화하기
07-1 웹 기획자답게 생각하기
07-2 온라인 사업 준비 단계의 업무 알기
07-3 웹 기획자의 메일 작성 방법
마치며
찾아보기

‘IT 기획자는 뭘 해야 하나요?’ 막막한 걱정은 그만!
이 책만 읽어도 화면 정의서를 혼자 뚝딱 만들 수 있도록 실력을 길러 줍니다!

신입 기획자 또는 기획자로 취업을 준비하는 취준생은 이런 걱정을 할 거예요. “도대체 IT 기획이란 게 뭐지?” 저자도 같은 상황이었습니다. 기획자로 취업하고, 기획 일을 덜컥 맡았을 때 ‘IT 기획’의 개념조차 명쾌하게 알려 주는 사람이 없었습니다. 그래서 그때부터 입문자를 위한 책을 만들어야겠다고 다짐했습니다. 그래서 첫째마당에서 IT 기획자가 꼭 알아야 할 기본 개념, 기본 상식을 준비했습니다. IT 기획의 개념과 기획자의 종류와 역할, 기획자의 산출물인 기능 정의서, 정책 정의서, 화면 정의서, 일정 산출표에 관해 배울 수 있습니다. 특히 ‘화면 정의서’는 기획자의 가장 큰 무기라고 할 수 있습니다. 화면 정의서의 기본적인 작성 방법을 먼저 배워 보세요!
------------------------------------------------------
실무에서 일하는 순서대로 배워서 더 현실감 있게 느껴져요!
쇼핑몰 화면 정의서를 한 땀 한 땀 작성하며 배우는 웹 사이트 기획!

이 책에서는 ‘라라마켓’이라는 가상의 웹 쇼핑몰을 기획, 설계하는 과정을 차례대로 배웁니다. 보통 화면 정의서를 만든다고 하면 ‘이용자 중심’으로 생각합니다. 하지만 실무에서 기획자는 ‘관리자’ 화면 정의서까지 생각해야 합니다. 그래서 둘째마당에서는 이용자 화면 정의서와 관리자 화면 정의서를 세세하게 설명합니다. 버튼명 설정 규칙, 정책 정의 방법, 기능 정의 방법까지 다룹니다. 이 과정을 그대로 따라가면 자연스럽게 웹 사이트를 어떻게 기획해야 하는지 감을 잡을 수 있을 거예요.
화면 정의서에 관한 설명뿐만 아니라 책 곳곳에 ‘기획자 상식 사전’ 코너를 배치해 두었습니다. 지금 하는 작업은 무엇 때문에 하는지, 혹은 기획자로서 알아 두면 좋을 지식과 상식을 알려 드립니다. 그리고 각 화면을 설계한 후 실무에서 당황하지 않도록 ‘퇴근 전 의뢰인의 메일’이라는 코너로 돌발 상황에 대처할 수 있는 힘을 길러 드립니다. 선배의 조언을 확인해 보세요!
------------------------------------------------------
다른 부서와 업무 소통하는 방법도 알려 드려요!
책 한 권으로 직장 생활의 노하우까지 배운다!

기획 업무를 하다 보면 다른 부서와 소통할 일이 자주 발생합니다. 화면 정의서에 모든 내용을 담아 표현하는 것이 가장 좋지만, 소통의 문제는 항상 발생합니다. 셋째마당에서는 이런 문제를 해결할 수 있도록 기획자의 능력을 길러 주는 내용을 다룹니다. 화면 설계 업무 이후 디자인, 퍼블리싱, 개발 진행 검토 방법과 사이트 검증 방법, 운영 업무 방법도 간단하게 살펴봅니다. 또한 기획력을 높이기 위해 웹 기획자로서의 역량을 강화시키는 방법도 알려 드립니다. 심지어 이메일 작성 방법까지 배울 수 있으니 이 책으로 기획자가 하는 모든 일을 체험해 보세요!
------------------------------------------------------
AS까지 해준다고?! 이 책을 구매한 독자를 위한 혜택!
현업에서 뛰고 있는 저자가 독자의 화면 정의서를 직접 피드백해 드립니다!

책으로 공부를 마쳤는데 내가 잘 한 건가? 스스로 평가하기 어렵다면, 이 책의 독자에게 제공하는 혜택인 ‘저자에게 피드백 요청’을 해보세요! 한 달에 한 분을 선정해 18년 경력의 저자가 직접! 화면 정의서를 피드백해 드립니다. 피드백 결과는 ‘이지스퍼블리싱 IT 블로그’와 ‘이정원 저자의 개인 블로그’에서 확인할 수 있습니다. 자세한 사항은 책에서 확인하세요!
------------------------------------------------------
"책을 통해 성장하는 지적인 독자들을 만나 보세요!"
배우고, 나누고, 함께 성장하는 [Do it! 스터디룸]

혼자 공부하기 부담스럽다면 스터디 카페인 [Do it! 스터디룸]에 방문해 보세요. 같은 책으로 공부하는 독자를 만날 수 있습니다. 또한 [Do it! 공부단]에 참여해 나의 공부 계획을 올리고 실천하면 책 선물도 받고 꾸준히 공부하는 습관도 기를 수 있습니다.
- Do it! 스터디룸 카페: cafe.naver.com/doitstudyroom → [Do it! 공부단] 메뉴
-----------------------------------------------------