6개월 주 학위 프로그램 중 3개월이 끝나고 포트폴리오 프로젝트를 시작할 것입니다.
포트폴리오를 만들면서 상품화를 위해 만들어 보고 싶었습니다.
계획을 제대로 세우고 싶어서 자습을 통해 계획에 대해 조금이라도 배워보려고 합니다.
개발 중 기획에 대한 이해가 있다면 기획자의 의도와 요구사항을 이해하는 데 도움이 됩니다.
(계획 단계부터 참여해야 하는 상황이 있을 수 있습니다…)
댓글에 부정확한 내용이나 오타를 남겨주시면 보다 정확한 글을 작성하는 데 도움이 됩니다.
-훈수 환영-
웹 제작 단계
1. 서비스 컨셉
웹사이트의 필요성을 인식하고 어떤 유형의 웹사이트를 구축할지 브레인스토밍
2. 시장 조사
인터넷 사용자 요구 사항, 경쟁자 유무, 시장 규모 등을 파악합니다.
시장 조사 과정에서 벤치마킹을 통해 제공할 서비스의 기본을 정립하는 것도 중요합니다.
3. 서비스 확인
기획/개발 관점이 아닌 사용자 관점에서 서비스를 만들어야 합니다.
따라서 보다 세부적인 관점에서 사용자 경험을 포착하고 사용자 친화적인 웹을 만들기 위한 단계입니다.
4. 계획 문서 작성
4.1 IA 설계
화면과 메뉴의 정보 구조를 개략적으로 기술하고 사용자의 화면 흐름을 시각화한 문서입니다.
화면이 복잡하고 작업을 우선시해야 할 때 디자이너 및 개발자와 함께 작업할 때 관련성을 제공하기 위해 만들어졌습니다.
– 깊이: 화면의 깊이를 의미합니다. IA의 핵심 요소인 Main을 기준으로 0 depth로 시작하며, depth가 높으면 마무리해야 할 단계가 많다는 것을 의미하며, 깊이가 깊지 않게 시공하는 것이 좋습니다.
4.2 메뉴 구조도
페이지에 구성된 메뉴와 서비스를 구조를 쉽게 이해할 수 있도록 시각화한 문서입니다. 예) GNB가 열렸을 때 사이트맵에 표시되는 화면
4.3 화면 목록
모든 화면의 목록이며, IA와 화면 목록을 따로 만들면 각 화면에 대한 정보가 많은 IA보다 표시하기 쉽고 ID를 기준으로 화면 목록을 표시하여 작업하기가 더 쉽기 때문에 효율적으로 작업할 수 있습니다. 가능합니다.
-스크린 ID: CS101010S
CS -> 1~2 뎁스메뉴 약칭 (모바일 – MO, PC – PC, 보험상품 – IP, 백오피스 – BO)
101010 -> 깊이 분류 코드
S -> 화면 종류별 구분 기호(Tab – T, Pop Up – P, Single Page Application – S)
4.4 정책 기능 정의
닉네임, 비밀번호 등을 포함한 모든 규칙과 지침은 가능한 한 자세하게 정의되어야 합니다.
4.5 순서도
화면에 움직이는 선을 만들고 각 프로세스를 완료하는 데 필요한 일련의 단계와 결정을 일반적으로 사용되는 기호를 사용하여 시각적으로 표현합니다.
*diagram.net으로 순서도를 쉽게 생성
4.6 와이어프레임
사용자 중심 인터페이스의 상위 개요로 기획/설계/개발 직원의 상위 레이아웃을 지정하는 디자인으로 기능에 중점을 둡니다.
4.7 스토리보드
웹사이트 작업의 기본으로 화면의 세부 UI부터 모든 움직임과 기능이 포함되어 있습니다.
5. 테스트
출시 전 테스터 선정을 통한 내부 테스트 및 테스트
6. 마케팅 및 운영