기획
기획#
실제 달성해야 할 목적을 바로 세우는 일이 중요하다.
기획 체크 리스트#
- 웹 사이트가 왜 필요한가?
- 왜 이 웹사이트 여야 하는가?
- 사용자에게 어떤 유익을 줄까? 를 끊임 없이 생각한다.
수 읽기#
- 웹 기획자가 의도한 대로 이용에서 닷한 경우
- 회원가입시 아이디는 8자를 초과할 수 없는데, 이용자가 8자 이내로 입력함
- 웹 기획자가 의도한 대로 이용하지 않는 경우
- 비밀번호에 특수문자를 넣어야 하는데, 이용자가 특수문자를 넣지 않음
- 웹 기획자가 의도한 대로 이용했지만, 이용자의 입장에서 결과를 다시 되돌리고 싶은 경우
- 정상적으로 결제를 완료했지만, 결제를 취소하거나 상품 수량을 바꾸고 싶음
웹사이트 개발 단계#
분석#
- 요구사항 분석
- 벤치마킹
- 기능과 정책 정의
- 일정 산출하기
설계#
- 사이트 구조 설계
- 사이트 맵 만들기
- 화면 정의서 작성하기
구현#
- 디자인/퍼블리싱/개발 업무 관리하기
- 테스트 진행하기
- 산출물 정리하기
- 안정화하기
모니터링#
디자이너, 퍼블리셔, 개발자#
웹 디자이너#
일러스트 프로그램을 이용해 웹 퍼블리셔가 웹으로 구현할 화면을 디자인한다.
- 화면 정의서의 선, 도형, 문구를 해석하여 메뉴, 버튼, 글꼴, 크기, 색상 등을 결정
웹 퍼블리셔#
- 웹 디자이너가 작업한 웹 화면 이미지를 HTML CSS JQuery 등과 같은 웹 프로그래밍 언어를 이용하여 웹 브라우저가 읽고 해석할 수 있는 웹 전용문서로 만든다.
웹 개발자#
- 웹 사이트가 실제 작동하도록 만든다.
- 데이터 베이스 관련 작업을 한다.
기획자가 요청하는 질문#
To 디자이너#
- 이미지의 픽셀을 지시한다
To 프론트엔드#
- Doc 주석 요청
- 링크가 없을 땐 href=# 요청
- 브라우저의 UI ...
정의서 작성#
- 정책 정의서 (권한)
- 사이트 구조
- 사이트 맵
화면정의서#
- 웹 기획의 최종 산출물. 반드시 검토하는 습관
- 깔끔하게 작성한다
- 작업자(웹디자이너, 개발자 등) 를 고민하게 만들면 안된다.
본문 작성 순서#
- 순서대로 모든 화면을 대략 스케치 한다.
- 떠오르는 아이디어를 메모한다
- 모든 화면의 설명을 작성한다.
- 기능 메뉴 이용방법 작업 요청사항
- 이용자의 행태를 반영하여 스케치와 설명을 구체화
- 화면이름과 URL 을 작성한다.
스케치 작성 요령#
- 검정 계열의 색상만 사용
- 도형에 힘을 뺀다. (연하게)
- 문구는 실제 내용과 가깝게
- 게시글의 내용을 예시로 'ㅁㅇㅁㄴㅇ' 같이 적지 않는다.
- 시각적인 요소 활용
- 아이콘
- 데이터 호출과 관련된 부분은 중괄호 {상품명} 를 사용한다.
- 화면이 길면 슬라이드를 나누어 설계한다
- 물결 표시를 쓴다.
- 설명이 필요하면 번호로 표기한다
- 스케치를 가리지 않게 배치한다.
- 화면 구성에 따라 슬라이드를 분류한다
- 관리자 화면을 설계한다.
- 상황에 따라 나타나는 경고창을 표로 표현할 수 있다.
Reference#
Do it 웹사이트 기획 입문