Transcript 템플릿 디자인 Store Web Page 설계 (계속)

Cyber Shopping Mall 구축
-
CD New -
안소연,박지윤,박종봉,정영은
목 차
 Item 선정
 Business Rule 정의
 Store Web Page 설계
- 기본 concept
- 요구범위 / 구현 범위
- 템플릿 디자인
- 상점 흐름도
구 현
 Staging System상에서의 시험
 Implementation
Item 선정
 Item 선정 배경
- 단기간 구현 가능한 Item인가?
- 자료를 구하기 쉬운가?
- 해당 Item에 대한 서비스를 하고 있는 곳이 있는가?
- 팀원들이 Item에 대한 기본 지식이 있는가?
음반 CD
 상점명
Business Rule 정의
 회원에게만 구매권한 부여
 회원등록 시 필요한 정보
- 성명, 주소, 청구지 주소, iD, password
 shopping cart 유지기간 (Long Time Transaction)
-2주
 결제방법 선택
- 지로청구, 자금이체, 신용카드 (SET)
Store Web Page 설계
 기본 concept
- 단순화 (simple)
- 과도한 이미지 처리를 지양하고 text 중심으로
- 복잡한 기술을 자제한 최소한의 기술 구현
많은 소비자 접속을 가능케하는
최소한의 환경 구현
Store Web Page 설계 (계속)
 요구 범위 / 구현 범위
요구 범위
구현 범위
• 각 쟝르 구분
• 쟝르별 최신 CD 목록
• search engine
• shopping 목록 보기
• 회원 가입 / 관리 db
• 신용카드 사용가능환경 구현
• demo 음악
•북마크 설정 기능
• 소비자의 feedback
O (가요, 팝, OST, 클래식)
O (가나다 순)
X
O (쇼핑백 보기)
O
X
O (ra file)
X
O (e-mail)
Store Web Page 설계 (계속)
 템플릿 디자인
– 소비자 이용 기능 정의
. 최신음반 정보/구매
. 최신 연예가 정보 : 각종 링크 제공
. 최신 인기 가요 순위 : 각종 링크 제공
– 초기 상점 운영 이벤트 정의
1. 가입 회원에게 각장르별 (pop, 가요, classic, 영화음악, jazz)
옴니버스 앨범 증정
2. 시대의 스타 서태지의 공연 을 국내 단독으로 개최
(회원에게 입장권 2장을 우송)
3. 회원에 가입 후 1달 내 앨범을 최대 5장 구입하면 원하는
앨범 1장 무료 증정
4. 회원의 생일에 축하 선물로 최신 앨범 우송
Store Web Page 설계 (계속)
 템플릿 디자인 (계속)
– 상점 로고 및 프레임 디자인
로고
프레임
Store Web Page 설계 (계속)
 템플릿 디자인 (계속)
– 고객관리 정보 정의
. Id, Password, 이름, 주민등록 번호,
배달/청구 주소를 회원 가입 시 요구
– 결제 수단 정의
– 상품의 수량 및 분류 정의
. 음악 쟝르(가요, pop, OST, 클래식)별 분류
. 각 분야별 3~5개 정도의 간략한 음반 소개
Store Web Page 설계 (계속)
 상점 흐름도 (일반)
상품 정보
(Product Catalog)
상점입구
(storefront)
장바구니
(basket)
주문, 지불
(Order, Payment)
(Login, Service, Event, Hot deal,....)
Store Web Page 설계 (계속)
 상점 흐름도 (CD New)
•(주문번호 발행)
주문확인
•고객 예치금
•온라인 입금
•배달시 지급
......
등록확인
카드정보
신규등록
신용카드선택
등록확인
배달지 주소선택
배달지 주소변경
지불방법선택
장바구니
login
프로파일보기
•불러오기
상품
장바구니목록
현재까지
장바구니보기
상품목록
프로파일수정
Service list
카테고리
•Personalizing Shop
상점
상
기획상품
점
장바구니
프
론
회원등록
트
서비스
•Navigation bar
구 현
구현에 사용된 기술 I
 CGI (Common Gateway Interface)
– 정적인 Web에 동적인 작업을 위한 기술
– 사용자의 입력을 프로그램에 전달하고 프로그램
의 결과(Html 출력)을 사용자에게 전달한다.
 Form의 사용
– 사용자의 입력을 받는 방법으로 사용자가 입력을
하고 확인하면 사용자의 입력이 서버로 전달된다.
– 전달되는 방법은 GET과 POST방법이 있다.
구현에 사용된 기술 II
 쿠키 (Cookie)
– CGI가 사용자에게 연속성을 부여할 수 없다는 단
점을 극복하기 위한 방법
– 서버가 쿠키를 브라우저로 전달하여 클라이언트
쪽에 정보를 저장하고 브라우저는 자신이 저장한 쿠
키를 다시 서버로 보내서 연속성을 유지한다.
– 보통 사용자의 ID와 같은 정보를 쿠키에 저장하고
이를 사용하여 서버 쪽에 있는 정보를 가져오는 방
법을 사용한다.
사용자와 서버의 통신
처음 상품 바구니에 넣기
다른 상품 바구니에 넣기
상품 주문
사용자 확인
)
사용자 ID로 이용
서
버
)
사용자 ID 부여
CGI Program(
Web Browser(
클
라
이
언
트
임시 ID 부여
임시 ID의 장
바구니 생성
임시 ID의 장
바구니에 넣
는다.
사용자가 확
인되면 상품
주문 등록
사용자의 상태 변화
받은 Cookie정보가 없다.
익명의 사용자
사용 종료
Browser
상
품
신
청
임시 ID 사용자
임시 ID에 대한 Cookie
를 서버로부터 받는다.
현재까지 받은 Cookie정보
를 모두 삭제한다.
종
료
사용자 확인
등록된 ID 사용자
등록된 ID에 대한 Cookie
를 서버로부터 받는다.
서버에 저장되는 정보
 임시 ID에 대한 장바구니 정보
– 현재까지 등록된 임시 ID 각각에 대한 장바구니의
상태를 저장하는 정보이다.
 등록된 ID에 대한 장바구니 정보
– 등록이 확인된 ID에 대한 장바구니 정보이다.
 사용자 정보
– 현재까지 시스템에 등록된 사용자들의 정보이다.
 주문 등록 정보
– 등록된 사용자가 실제로 주문한 물품의 정보이다.
결론
 쇼핑몰 구축 시 어려운 점
– 디자인 (사용하기 쉽고 깔끔한 인터페이스)
– 데이터베이스 정보 구축 (상품 정보, 사용자 정보)
– WWW 프로그래밍
– 전자 지불 시스템의 부족
 전자 지불 시스템
– 국내에서는 아직 쓸만한 전자 지불 시스템이 없으
므로 계좌이체를 사용하지 않고 카드 등으로 결제를
하는 쇼핑몰을 구축하는 것이 어렵다.
– 서울은행과 바라 인터내셔날㈜ 이 공동 제작한
Paylink Wallet beta 1.0의 사용예