[DAY13] 05. 서비스 기획부터 런칭,운영,회고까지 - 와이어프레임/스토리보드, 상세기획

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

오늘의 공부완료 오공완 DAY13

05. 서비스 기획부터 런칭,운영,회고까지
 
07.와이어프레임

• 정의
  • 앱/웹 서비스를 만들 때 동선,구조를 제안하기 위한 화면 설계도
  • 디자인 요소가 들어가기 보다는 선(Wire)을 이용해 윤곽(Frame)을 잡는 것을 말함
  • 기획자의 요구사항, 서비스의 기능 요소를 모두 파악하여 전략적으로 설계 필요
  • 와이어프레임은 디자이너, 개발자 등과 의사소통을 위한 수단
• 제작 방법
  • 펜과 종이를 사용한 스케치
  • 파워포인트
  • 그래픽 툴 활용
• 와이어프레임에 포함할 내용
  • 화면에 어떤 정보가 나타나야 하는지
  • 어떤 레이아웃, 모습을 보여줘야 하는지
  • 세부컨텐츠가 있다면 어떻게 표현해야 하는지
  • 다음 화면으로는 어떻게 이어지는지
  • 공통영역(내비게이션, 푸터 등)은 적절히 기능을 하는지
• 추천툴
  • 스케치 : Mac에서만 사용 가능한 툴
  • 피그마 : 2016년말에 시작한 툴로, 협업이 용이한 툴이며 웹으로 사용 가능(os에 독립적)
  • 어도비 Xd : 친숙한 인터페이스와 os에 독립적
• 프로토타입(Prototype)
  • 정의
    • 본격적으로 개발에 들어가기 전, UI/UX 상호작용을 시뮬레이션 하기 위해 동적으로 만드는 모형
    • 정적인 화면으로 설계된 와이어프레임 보다, 사용자들의 경험에 대한 테스트를 진행 가능
  • 툴
    • Proto

08.스토리보드(상세기획서)

• 정의
  • 일반적으로 기획서라고 칭하는 문서(서비스기획 문서의 최종 산출물)
  • 스토리보드 = 상세기획서 = 화면설계서 등의 용어로 불려짐
  • 최종적으로 유관부서에게 공유하는 문서
• 구성요소
  • 서비스개요
    • 목표,주요기능
  • 서비스 구성
    • IA, 서비스 정책
    • 주요 서비스 프로세스
  • 상세 기획
    • 화면(UI) 시나리오
    • 화면별 와이어프레임 + 기능 상세설명
• 서비스개요
  • 목표, 주요기능 등을 작성(표지/개요) - 파일의 버전과 작성일 기입하기, 변경이력/목차페이지도 작성(대규모 프로젝트)
  • 서비스 정책, 서비스 프로세스 작성 - 정책, 프로세스(e.g. 회원관리,가입정책 등)
  • 화면(UI) 시나리오, 와이어프레임에 기능 상세설명 작성 - 특정 기능의 화면 시나리오를 제공하여 설명 추가

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다