웹사이트 기획

목적 : 웹 사이트를 만드는 목적과 목표를 명시 (상세) => 기획안
분석 : 시장과 고객, 현재 사이트에 대한 분석 (트랜드, 고객 특성) => 벤치마킹 보고서, 유저 시나리오
설계 / 컨텐츠 구성 : 컨텐츠의 범위와 내용 계획, 시스템 구성, 요구 기능, 디자인 컨셉 => 컨텐츠 설계 문서
인포메이션 아키텍쳐 : 컨텐츠 구조화, 페이지 설계, 화면 레이아웃 설계, 네비게이션 설계, UI, 레이블링, 기능명세 (정보 배치, 우선순위) => 스토리보드, 플로우차트

요구사항 분석하기

고객이 원하는 것을 파악하여
어떤 타깃을 대상으로 어떤 비지니스 모델을 갖는지, 핵심 기능과 목적을 파악해야한다.
작업분량, 필요한 기능, 원하는 디자인 방향 파악.

요구사항 요소

구분	설명
데이터 요구	사용자 요구 모델과 객체들의 핵심 특성에 기반하여 데이터 객체를 정리 인터페이스에 영향을 줄 수 있으니 초기에 확인
기능요구	동사형으로 사용자의 목적 달성을 위해 실행해야 할 기능을 설명 기능 요구 목록으로 정리 최대한 철저하게 작성
제품, 서비스 품질	감성 품질과 데이터/기능 요구 외 제품 품질, 서비스 품질을 고려
제약사항	비용, 데드라인, 시스템 준수에 필요한 규제 등 사전에 제약 사항의 변경 여부를 확인

기획안 작성하기

작업자로 하여금 작업 범위가 명확해지기 때문에 거품가격이 줄어든다.
작업 명세서로 활용. 추후 분쟁시 근거자료로 활용.
상세한 내용을 작성해 개발자가 이해하기 쉽게 한다.

IA (Information Architecture)

프로세스를 정의하고 각 프로세스에 따른 특이사항을 기재.
정의된 프로세스 순서에 따라 작성.

와이어프레임

화면 설계에서 각 기능 또는 컨텐츠가 어떤 위치에 존재할 것인지를 대략적으로 만든 것
전체적인 레이아웃을 그린다.

• 첫 화면 상단에 가장 중요한 정보를 제공한다.
• 왼쪽 상단부터 오른쪽 하단 순으로 정보를 배치한다.

스토리보드

각기 화면의 동작과 전환을 확인하는 기획 문서.

• 작업이력 : 작성된 UI 스토리보드의 맨 앞장에 업데이트한 내용과 반영된 페이지, 날짜, 수정한 사람에 대해 서술
• 목차 : 넘버링 혹은 불렛 형태로 스토리보드의 목차를 작성한 후, 개별 목차에 해당 내용을 연결하여 쉽게 특정 페이지에 접근할 수 있도록 함
• 개요 : 서비스의 대상과 사용자에게 어떤 서비스를 전달하는지 알리고 정확한 개발 범위를 명시
• 화면 ID : 각 UI 화면 정의와 동작 흐름도를 보여주는 페이지에 ID를 붙여줌.
• IA : 서비스가 제공하는 메뉴 혹은 기능을 보여줌. 각 메뉴 혹은 정보의 레이블링과 구조감, 디스크립션 작성
• UI Flowchart : 각 화면의 전환과 흐름. 흐름도를 구성하는 요소들이 어떤 의미인지 알 수 있는 범례를 제공하여 편의성 증대.
• 정책
  • 시스템 연동 : 응답 코드, 응답 코드명, 응답 메시지에 대한 내용을 테이블 형태로 작성
  • 정보 노출 정책 : 사용자 액션에 따라 정보 노출이 다르게 함. 각 케이스 별로 노출될 수 있는 정보와 상태 값을 화면으로 그리거나 테이블 형태로 정리하여 작성. 케이스가 다양하지 않거나 레이아웃이 이해하기 어려운 경우, 직접 화면을 그리고 정보의 양이나 케이스가 많은 경우, 테이블 형태로 정리하면 좋음
  • 준법 사항 : 해당 되는 준수 사항이 있으면 명시해줌
  • 계산 산출 근거