[서비스 기획] 웹 기획
앱 또는 웹 페이지(PC,MO)를 런칭 시점부터 시작해 본적은 없지만, 기존 웹 페이지에 새로운 기능을 추가하거나 개편하는 방식으로 기획을 했었습니다. 한 개의 카테고리를 기획한 사례를 공유하고, 이 자료는 웹 기획을 처음 접하는 여성 기획자들에게 도움이 되길 바랍니다.
0. 웹(앱) 기획자는 어떤 일을 할까?
웹(앱) 작업 전반에 걸친 디렉팅이라고 할 수 있습니다. 웹/앱 서비스를 만들고, 고치고, 컨텐츠 생산 가이드를 만들며 기획 의도대로 디자인과 프로그래밍될 수 있도록 커뮤니케이션도 해야 합니다. 만들어진 웹/앱 결과물을 테스트 작업을 하기도 하며. 웹/앱이 화면이 만들어진 후에는 운영자가 잘 사용할 수 있도록 매뉴얼을 만고 학습을 시키기도 합니다..
1. 웹 기획 시 고려사항 (https://durandot.blog.me/221024396344)
A. 어떤 것을 만들지 정한다.
예를 들어, 식품 주문 웹 서비스를 기획한다고 가정하겠습니다. 만들고자 하는 주요 서비스가 ‘웹으로 즉석식품을 주문하는’ 서비스라고 분명하게 정의해야 합니다. 만약 구현될 디바이스가 PC와 모바일 모두인 경우에 화면에 따른 UI를 모두 고려해야 하지만, 요즘은 모바일 이용률이 더 높으니 편리하고 효율성 있는 모바일 UI에 대한 고민이 필요하다. UX와 UI등의 세부적인 고려사항은 어떤 서비스에서 어떤 화면을 웹으로 구현할 것인지 정의 한 다음의 단계라고 할 수 있다.
B. 초 간단 구조와 필요한 사항들을 정한다. (유저의 footpath 도 상상해본다.)
바로 위에서 예시를 든, 유저가 ‘웹으로 즉석식품을 주문하는’ 장 간단한 구조를 상상해봅시다. ‘즉석식품 선택 – 주문 – 결제 – 후기작성’ 등의 구조가 가장 기본적이고 주요한 프로세스입니다. 화면의 가장 간단한 구조를 유저의 입장에서 생각해보면, 페이지에 꼭 필요한 사항이 무엇일지 떠오를 것입니다. ‘식품’을 고를 수 있는 카테고리와 주문/결제 시스템, 그리고 후기를 작성할 수 있는 항목 등이 가장 중요하게 필요한 항목이 되겠네요.
C. 생각을 도식으로 정리한다.
유저에게 제공할 서비스에 대한 초 간단구조와 항복들을 생각했다면 이것들을 표로 정리해봅시다. 보통 이 단계는 정보 구조 (IA, Information Architecture)라고 불리기도 하며 메뉴트리 (Menu tree) 또는 사이트 맵 (Site map)이라는 단계로 불립니다. 아래는 브런치 Digital wanderlust작가의 IA 참고자료입니다. 아래 표는 네이버 블로그 페이지를 기준으로 1st단계(메인 메뉴)에서부터 최종 ‘영화/문화/미술’ 관련 블로그에 이르는 Depth를 도식화 하였습니다.
2. 웹 기획을 해보자 (feat. 스토리 보드를 만들어보자)
A. 웹 기획 사례 (PC)
준비했던 도식(표나 순서도 등…)을 실제 화면으로 어떻게 구현을 할 지 그려보는 단계입니다. 예를 들어, 한 기업의 ‘소식(News)’을 게재하는 카테고리가 필요하고 그 페이지를 기획한다고 가정해보겠습니다. 큰 구조로는 News라는 게시판 안에, 컨텐츠들이 쌓여 있는 페이지라는 생각이 듭니다. 이 페이지에 올라오는 컨텐츠는 소식들이 계속 업로드 될 것이며, 이 사이트에 새롭게 유입되는 방문자들을 위해 ‘최신순’으로 컨텐츠를 정렬 해두는 게 좋을 것 같다고 기획자는 생각할 것입니다. (사이트 유저들의 특성에 따라, 혹은 회사의 특성에 따라 지금 말씀드린 가정은 모두 바뀔수도 있습니다.)
글 로는 실제 화면으로 구현해보는 ‘스토리보드’를 설명하기 좀 부족한 것 같아 실제 기획했던 PC페이지의 스토리보드 몇 장을 사례로 준비했습니다.
B. 어드민 웹 기획 사례 (PC)
방금 보신 PC 버전의 스토리 보드는 홈페이지의 운영자가 계속해서 새로운 컨텐츠를 올려야 하는 News 메뉴라고 할 수 있습니다. 지속적인 ‘운영’의 이슈가 있는 기획을 했을 경우 반드시 관리자 계정의 기획을 수반합니다.
3.웹 기획 후 협업에 관하여
수정/삭제하기 편리한 환경을 만드는 것이 목표입니다. 말 그대로 ‘관리’의 관점에서 기획을 해야 합니다. 위 참고자료와 같이 모든 화면 구성의 스토리보드가 완성이 되면, 이를 디자이너에게 전달합니다. PPT에 도형으로만 표현되었던 기획서가 디자이너에게 전달되면 정말 예쁘고 깔끔하고 판타스틱한 페이지로 탄생됩니다. 그리고 디자인 결과물은 개발자에게 전달이 되어, 개발자가 웹 페이지를 만들어내는 것입니다.
이 단계에서 웹 기획자는 타 팀과의 커뮤니케이션에도 원활해야 하고, 전체 스케줄 관리 또한 필요합니다.
기획자는 수정 사항이 발생한 경우 디자이너와 개발자들을 납득시키고 일을 진행할 수 있도록 커뮤니케이션 스킬이 필요하며, 전체 스케줄에 지연이 없도록 타이트한 관리를 해야 하는 사람이기도합니다.
4.결과물 테스트
마법사와도 같은 개발자들의 손을 거쳐 페이지가 탄생을 했다면? 개발이 완료된 페이지가 잘 작동되는지 인터넷 브라우저(크롬, 사파리, 익스플로러 등) 와 모바일 기기/OS버전 별로 QA테스트를 진행합니다.
5.완성 (및 끊임없는 피드백)
잘 작동되는지 테스트까지 완료하고 공식적으로 완성되었다면, 당신은 웹 기획자입니다! 그렇지만 기획한 웹 서비스 또는 웹 화면에 대해서 수정사항이 발생한다면 끊임없이 고민해야 할 것입니다.
Last updated
