<웹 사이트 기획 입문> 후기

1. 웹 기획자로 로그인하기

 

기획력

웹 사이트의 목적을 생각

습관 : 눈에 보이는 모든 것을 웹 사이트로 상상/ 웹 사이트를 방문할 때마다 왜라고 묻고 나라면이라고 답하기

나온 것이 아니라 새로운 것을 만드는 차별화

당연한 것을 의심

이용자의 행동 특성을 정확하게 이해

디자인, 따라잡지 말고 거스르기

​

이용자의 모든 이용 행태를 파악하는 예측성

정상/변칙/수정-> 여러 가능성을 나눠봐야 함!

변칙 이용 방지를 위한 이용 행태 설계하기

이용자의 실수를 스스로 바람잡을 수 있도록 설계하기

​

웹사이트 제작단계

​

분석단계

핵심 업무 : 요구 사항 분석하기/ 벤치마킹하기/ 기능과 정책 정의하기/ 일정 산출하기

설계단계

핵심 업무 : 사이트 구조 설계하기/ 사이트 맵 만들기/ 화면 정의서 작성하기

구현 단계

핵심 업무 : 디자인,퍼블리싱,개발업무 관리하기/ 테스트 진행하기/ 산출물 정리하기/ 안정화하기

​

분석단계

요구사항 분석하기 : 실현 가능한 요구 사항인가?-> 요구한 기능과 유사한 기능이 이미 있는가? -> 클라이언트가 요구한 기능보다 더 좋은 방법은 없는가?

벤치마킹하기: 이용자층 분석, 디자인/레이아웃, 서비스, 마케팅, 종합 평가

​

설계업무

사이트 구조 설계하기 (IA)

디자인 콘셉 정하기

화면 정의서 작성하기

​

웹구현업무

진행하기

테스트하기

모니터링하기

​

한 번은 꼭 써먹게 되는 협업의 기술

-가로 사이즈 1024픽셀로 만들어 주세요

-삭제하지 말고 주석으로 처리해 주세요

-아직 링크 주소가 없으니까 #으로 처리해 주세요

-드롭다운 말고 라디오 버튼으로 만들어 주세요

​

태그 input

속성 type = “text”(텍스트를 한 줄 입력 할 수 있음)

속성 type = “password”(문자나 숫자가 특수문자로 ● 표기됨)

속성 type = “checkbox”(체크 박스는 여러 항목을 중복해서 선택할 수 있음)

속성 type=“radio”(라디오 버튼은 하나만 선택할 수 있음)

속성 type = “file”(파일 첨부할 수 있음)

속성 type = “date” (날짜를 선택하는 태그, 크롬 브라우저에는 달력으로 표기)

​

태그 textarea ( 텍스트를 여러 줄로 입력할 수 있음)

태그 select (드롭다운 메뉴는 나열된 항목 중에서 하나만 선택)

alert 함수 (이용자가 알아야 하는 안내 사항을 전달하는 경고창을 띄움)

confirm 함수 (이용자의 의사를 확인할 수 있는 선택창을 띄움)

prompt 함수 (사용자로부터 문자 정보를 받을 수 있는 입력창을 띄움)

​

-모든 화면의 글꼴을 나눔 고딕으로 바꿔 주세요

-카테고리 정보를 기준으로 삼으면 이러한 상품 정렬 기능도 개발할 수 있겠죠

​

​

웹 사이트 구동 원리와 기본 용어

도메인 주소 입력-> 네임서버를 통한 ip주소 전달-> ip접속-> 화면 송출

​

네임서버: ip와 도메인 정보를 저장하고 있는 서버

서버: 웹 호스팅/서버 호스팅/ 코로케이션

FTP: 파일을 주고 받는 전송 규약, 실무에서는 웹 호스팅, 서버 호스팅, 코로케이션 등의 서버에 접속하여 파일을 업로드하거나 다운로드할 수 있는 프로그램.

​

​

​2. 웹 쇼핑몰 기획하기

 

​웹 사이트 종류

홍보형

커뮤니티형

쇼핑몰형-다루는 제품과 서비스의 특징에 맞게 필요한 기능을 잘 구현하는 것이 중요, 음원 스트리밍 서비스를 제공하는 웹 사이트에서 1분 미리 듣기 기능을 제공하는 것처럼.

​

설계할 때 알아야 할 필수 개념

상품 카테고리 : 상품 카테고리는 메뉴가 아님/ 상품 카테고리는 관리가 편리해야 함.

데이터 호출 : 화면 레이아웃은 하나만 만들기/ 데이터 중복 호출 가능/ 데이터 호출, 제목만 바꿔도 새로운 콘텐츠가 됨.( 이부분 굉장히 새롭! 같은 정보를 가공하여 새로운 콘텐츠를 만드는 것)

프로그램 연동: 본인 인증프로그램 연동/ 결제 시스템 연동

​

​

사업 계획서

사업의 필요성

시장 분석

고객 분석

쇼핑몰 소개

쇼핑몰 특징

쇼핑몰 이용 방법

매출 계획

경쟁사 분석

디자인 계획

마케팅 계획

제작 계획

​

​

기능정의서

​기능코드

뎁스 : 반드시 웹 사이트의 구조를 의미하는 것은 아님, 웹 사이트 구조는 화면 단위로 구성, 그러나 한 화면에는 여러 기능이 담길 수 있기 때문에 다양한 뎁스를 가질 수 있음.

구현대상,작업요소, 관리자 연동

기능 정의

​

​

정책정의서

회원 가입 및 상품 구매 정책

게시판 정책-사용자와 기능을 구분하여 접근 권한을 표기

​

​

정책별 작성 요령

한 번에 모든 정책을 정의할 수 는 없음. 정책 정의서는 주기적으로 업데이트하는 것이 좋음. 화면 정의서를 작성하다가도 새로 발견되는 정책이 많음. 하지만 개발 단계 전에는 반드시 완료!

​

포인트정책, 배송정책, 교환/반품.환불 정책, 게시판 정책, 고객 관리 정책 등

​

일정표 만들기(wbs)

파트/업무/시작일,완료일/완료여부/담당자/일정

​

웹사이트 구조 설계

기능을 화면 단위로 바꾸기

하나의 기능을 하나의 화면으로 설계

하나의 기능을 여러 화면으로 설계

여러 기능을 하나의 화면으로 설계

​

​

​

글로벌 내비게이션 설계

​

이용자의 동선 고려하기

내비게이션 설계하기-사이트 맵의 대분류가 반드시 내비게이션 메뉴가 되는 것은 아니다.

글로벌 내비게이션-어느 화면에서든 한 번에 접근 할 수 있어야 함.

서브 내비게이션-해당하는 특정 화면에만 제공되는 내비게이션

​

화면정의서

구성요소-표지/문서 이력/사이트 맵/본문

표지: 웹 사이트 이름, 작성자,버전, 작성 기간 등

​

본문작성순서

순서대로 모든 화면을 대략 스케치

모든 화면의 디스크립션 작성

이용자 행태를 반영하여 스케치와 디스크립션을 구체화

화면 이름과 URL을 작성하여 완성

​

스케치 작성 요령

스케치는 검정 계열 색상

도형에 힘 빼기

문구는 실제 내용과 가깝게 적기

시각적인 요소 활용

데이터를 호출할 때는 중괄호 사용

화면이 길면 슬라이드로 나누어 설계

설명이 필요하면 번호 표기

화면 구성에 따라 슬라이드 구분

관리자 화면을 고려

​

​

디스크립션 작성 요령

분할된 화면의 위치 표기

번호 순서대로 제목과 내용을 작성

작업자에게 전달할 내용은 제목을 넣어 별도로 구분

기능 설명은 웹에서 동작되어야 하는 상황 그대로를 설명하면 됨.

정책 정의서에 작성된 내용이 기능의 정의될 수 있음

버튼과 배너에는 링크 주소와 링크 형태를 작성: 링크된 화면을 여는 방법에는 셀프와 블랭크가 있음. 자신의 웹 사이트 안에 있는 화면으로 링크한 경우에는 현재 화면이 바뀌도록 정의, 외부 웹 사이트로 링크한 경우에는 새 창이 열리도록 정의

경고창, 선택창은 이용자의 편익을 고려해서 사용: 경고창을 직접 스케치/ 표로 표현/디스크립션에 기술

데이터 호출 정보는 사실적으로 표현

​

​

​