Ⅱ. 프론트샵 구축 가이드
Ⅰ. 프론트샵 개발 프로세스 1. 개발 가이드 2. 개발 프로세스 1단계. 내용설계 : 컨텐츠 그룹핑, 메뉴 결정 1) 리더로서의 기획자 역할에 충실한다. 2) 상세한 기획서를 작성하라. - 기획서는 기획자, 디자이너, 개발자간의 Communication Tool이다. - 잘 정리된 기획서는 이후의 훌륭한 참고자료가 된다. 3) 기획자, 디자이너,개발자는 변경사항에 대해 항상 공유한다. 4) 스케줄 조율을 수시로 하여 개발기한에 차질이 없도록 한다. 5) 정책의 지연, 변경에 대해 각오한다. 2. 개발 프로세스 1단계. 내용설계 : 컨텐츠 그룹핑, 메뉴 결정 2단계. 상품 카테고라이징 3단계. 사이트 구조설계 4단계. 모듈별 항해설계 5단계. UIㆍ화면구조설계 6단계. 각 페이지 설계 + 컨텐츠 수집 7단계. 페이지 디자인 8단계. 웹프로그래밍 9단계. 디버깅 10단계. 오픈 프론트샵 구축 가이드
Ⅰ. 프론트샵 개발 프로세스 내용설계 프론트샵에 게재할 모든 요소의 결정 - 정적 컨텐츠(개념, 정책, 프로세스 등) - 동적 컨텐츠(서비스, 커뮤니티 등) 컨텐츠 그룹핑 SWOT, STP 분석을 통해 추론된 전략의 적극 반영 상품 카테고라이징 대/중/소 분류 소비자 시각에서의 카테고라징 구조설계 컨텐츠의 조직화 사용성평가 통한 고객의 행동적 측면 고려한 설계가 포인트 넓고 얇게 설계 * 항해설계 회원가입, 주문, 상품검색 등의 모듈별 프로세스 설계 STOP Motion 기법 활용 요구 ※ 추천서적 : 성공적인 웹 사이트를 위한 웹 네비게이션/Jennifer Fleming/한빛미디어 * UI(User Interface)설계 Where am I? + Where is it? * 화면설계 각 페이지별 상세 설계로 기획의도가 디자인, 개발에 최대반영 될 수 있도록 한다. 프론트샵 구축 가이드
Ⅱ. 프론트샵 개발 산출물 3. 개발산출물 1) 사이트 구조도 * 용도 : 사이트 전체를 한눈에 * 유형 : 너비와 깊이를 고려 * 관리 가능한 규모 채택한다. * 사용자의 입장에서 조직화한다. * 컨텐츠 간의 균형 있는 너비와 깊이를 유지한다. <예제1. 사이트 구조도> 프론트샵 구축 가이드
Ⅱ. 프론트샵 개발 산출물 3. 개발산출물 2) 프로세스 정의서 * 용도 : 각 모듈별 프로세스를 담당자가 이해 기획,디자인, 개발의 편의 도모 * 각 모듈별 이동경로페이지를 표시 <예제2. 프로세스정의서> 프론트샵 구축 가이드
Ⅱ. 프론트샵 개발 산출물 3. 개발산출물 3) 화면 구조도 * 화면의 공간분리 * 공통사용 컨텐츠의 종류, 위치 결정 * 화면 구조도 설계 대상 - 초기화면 - 공통, 변형으로 사용할 프레임/페이지 * 통일성, 사용자 편의성, 명료성 고려 <예제3. 화면구조 설계도> 프론트샵 구축 가이드
Ⅱ. 프론트샵 개발 산출물 3. 개발산출물 4) 상세화면 설계 * 화면에 담을 컨텐츠 준비 * 디자인적 측면, 개발측면 협의 * 고객, 관리자의 편의 모두 고려 * 업데이트, 확장성 고려 * HTML, DB연동부분 고려 * 무리한 욕심은 버린다. * 문제점은 빨리 해결하거나, 넘어간다. <예제4. 상세화면 설계도> 프론트샵 구축 가이드
Ⅱ. 프론트샵 개발 산출물 3. 개발산출물 5) 요구사항 정의서 * 디자인, 개발과정에서 참고할 내용기록 * 정확한 커뮤니케이션을 위해 사용 * 상세하게 기록함으로써 누락위험 방지 <예제5. 요구사항정의서> 프론트샵 구축 가이드
Ⅱ. 프론트샵 개발 산출물 3. 개발산출물 6) 네비게이션 설계도 * 네비게이션은 동선이다. * 모듈의 사용목적과 사용빈도수를 고려 * 대상 : 플로우, 메뉴, 링크, 배너 등 <예제6. 네비게이션 설계도> 프론트샵 구축 가이드
Ⅱ. 프론트샵 개발 산출물 3. 개발 산출물 7) UI 설계 적용사례 프론트샵 구축 가이드
Ⅱ. 프론트샵 개발 산출물 3. 개발산출물 8) 디자인 시안 메인 화면 카테고리MD 상품페이지 컨텐츠 인트로화면 프론트샵 구축 가이드