con spirito - eunmi choi's...

Con spirito

Social movier

모바일 웹 어플리케이션

사용자 매뉴얼

PM : 200824415 김다정

팀원 : 200824407 경주리

200824429 김소담

200824543 최은미

Ver 1.0

2012년 12월 5일

Social movier 영화 예매 시스템 사용자매뉴얼

2012년 컴퓨터종합설계 페이지 1/17

제,개정내역

버전/릴리스 작성일자 개요

1.0 2012.12.5 신규제정

작성자

기능명 이름

로그인, 로그아웃

탈퇴하기

SNS추천하기

SNS댓글리뷰작성

영화관검색

김다정, 최은미

영화검색

영화예매

영화예매 내역 조회/취소

경주리,김소담

그외 공동



목 차

1. 모바일 웹 어플리케이션 접속방법 ..................................................................................................... 3

1.1. 주소 ............................................................................................................................................. 3

2. 모바일 웹 어플리케이션 사용방법 ..................................................................................................... 4

2.1. 메인메뉴 ...................................................................................................................................... 4

2.2. 상세메뉴 ...................................................................................................................................... 5

2.2.1. 로그인, 로그아웃 ................................................................................................................. 5

2.2.2. 탈퇴하기 ............................................................................................................................. 7

2.2.3. SNS추천하기 ...................................................................................................................... 8

2.2.4. SNS댓글리뷰작성 ............................................................................................................... 9

2.2.5. 영화 검색 .......................................................................................................................... 11

2.2.6. 영화관 검색 ....................................................................................................................... 13

2.2.7. 영화 예매 .......................................................................................................................... 16

2.2.8. 영화 예매 내역 조회/취소 .................................................................................................. 30



1 . 모바일 웹 어플리케이션 접속방법

1 . 1 . 주소

주소창에 아래의 링크를 입력한다.

http://socialmovier.cafe24.com

http://socialmovier.cafe24.com/index.jsp



2 . 모바일 웹 어플리케이션 사용방법

2 . 1 . 메인메뉴

메인메뉴는 영화/영화관 검색, 빠른 예매하기, 마이페이지, 로그인/로그아웃으로 구성되

어 있으며 중앙에는 현재 상영중인 영화를 볼 수 있다.

영화, 영화관 중 사용자가 원하는 것을 검색 할 수 있다. 검색옵션으로 ’영화’를 선택하여

영화를 검색하여 영화를 예매할 수 있고,‘영화관’을 선택하여 영화관을 검색하여 영화를 예

매할 수 있다.

[검색옵션: ‘영화’ 선택시 화면] [검색옵션: ‘영화관’ 선택시 화면]



2 . 2 . 상세메뉴

2.2.1. 로그인, 로그아웃

Index.jsp페이지에서 맨 아래의 로그인버튺을 선택하면 로그인을 할 수 있다.우리 시스

템은 특별한 회원가입이 필요하지 않고, 이미 가입된 SNS 중 facebook계정으로 간단히

로그인 할 수 있다. 한번 로그인 하면 시스템에 간단한 회원정보(facebook계정의 아이디,

이름, 이메일 주소)가 자동으로 저장이 된다. Main2.jsp페이지에서 로그아웃을 할 수 있

다.

1) Index.jsp페이지의 하단 로그인 버튺을 누른다.

2) facebook 로그인 페이지로 넘어가서 이미 가지고 있는 facebook계정의 id,

password를 텍스트박스에 입력하고 로그인을 누른다.

3) Main2.jsp페이지로 이동하여 Welcome!___:-)에서 자신의 이름이 뜨며 로그인 되었

음을 알 수 있다.

4) 로그아웃을 원할 경우 Main2.jsp페이지의 하단 로그아웃 버튺을 누른다.

5) Index.jsp페이지로 이동한다.



[index.jsp페이지 로그인 버튺 클릭] [facebook계정 id, password 입력]



[main2.jsp페이지 로그아웃 버튺 클릭] [index.jsp페이지]

2.2.2. 탈퇴하기

Main2.jsp페이지에서 마이페이지 버튺을 클릭하면 myPage.jsp페이지로 이동한다. 이

페이지에서 탈퇴하기 버튺을 누르면 회원탈퇴를 할 수 있다. 회원탈퇴를 하면 저장된 회원

의 정보와 예매내역들이 모두 삭제된다.

1) Main2.jsp페이지의 가운데 마이페이지 버튺을 누른다.

2) myPage.jsp페이지에의 탈퇴하기 버튺을 누른다.

3) 저장된 회원정보와 예매내역들이 탈퇴처리와 동시에 삭제된다.



[myPage.jsp페이지 탈퇴하기버튺 클릭] [myPage.jsp페이지]

2.2.3. SNS추천하기

검색된 영화의 자세한 정보를 보는 페이지(resultmovie.jsp)와 검색된 영화의 자세한

정보를 보는 페이지 (resultTheater2.jsp)에서 특정 영화나 영화관을 예매하기 버튺 밑의

페이스북 ‘좋아요’버튺을 눌러 자신의 페이스북에 게시하여 추천할 수 있고 ‘보내기’버튺을

눌러 친구들에게 메시지를 보내 추천할 수 있다.

1) 특정 영화나 영화관의 정보를 보는 페이지에서 예매하기 버튺 아래 페이스북 ‘좋아요’

버튺을 클릭한다.

2) 해당 영화나 영화관 정보가 자신의 페이스북 페이지에 업로드ㄴ되어 나의 페이스북 친

구인 사람들에게 추천이 된다.

3) ‘보내기’버튺을 누를 경우 특정 친구에게 메시지를 보내 해당 영화나 영화관을 추천할

수 있다.



[특정 영화 정보 페이지] [특정 영화관 정보 페이지]

2.2.4. SNS댓글리뷰작성

검색된 영화의 자세한 정보를 보는 페이지(resultmovie.jsp)와 검색된 영화의 자세한

정보를 보는 페이지 (resultTheater2.jsp)에서 가장 맨 하단 소셜댓글을 클릭하여 특정 영

화나 영화관에 대해 리뷰를 작성할 수 있고 특정 리뷰 글에 대해 답글을 쓸 수 있고 ‘좋아

요’를 클릭할 수 있고 자신이 쓴 소셜 댓글을 삭제할 수도 있다.

1) 특정 영화나 영화관의 정보를 보는 페이지의 제일 하단의 소셜 댓글을 클릭한다.

2) 텍스트박스에 특정 영화나 영화관에 대한 리뷰를 작성하고 댓글달기 버튺을 클릭한다.

3) 해당 영화나 영화관의 정보를 보는 페이지에 작성한 리뷰 댓글이 최근 순서대로 업로

드 된다.



4) 다른 사람이 작성한 리뷰 댓글에 대해 답글을 쓰고 싶을 경우 답글달기 버튺을 클릭하

여 답글을 쓸 수 있다.

5) 다른 사람이 작성한 리뷰 댓글 하단의 좋아요 버튺을 누를 경우 다른 사람이 작성한 글

을 추천할 수 있다.

6) 후에 자신이 쓴 리뷰 댓글을 삭제하고 싶을 경우 자신이 쓴 글의 오른쪽 상단의 X삭제

버튺을 누르면 삭제를 할 수 있다.



[특정 영화 정보 페이지] [특정 영화관 정보 페이지]

2.2.5. 영화 검색

메인페이지(main2.jsp)에서 상단의 검색옵션으로 ‘영화’를 선택한 상태에서 입력창에

‘007’이라는 영화 제목 키워드를 입력하고 검색버튺을 누르면 키워드와 일치하는 영화리

스트를 최근작 우선순위로 볼 수 있다.

1) Main2.jsp페이지의 상단 검색옵션으로 ‘영화’를 선택한다

2) 텍스트박스에 검색하고 싶은 영화 이름을 나타내는 음절이나 어절을 입력하고 검색 버

튺을 누른다.

3) 일치하는 영화 리스트를 최근작 순서대로 볼 수 있다.

4) 영화 이름 목록 리스트 중 하나를 선택하면 선택한 영화의 자세한 정보를 볼 수 있는

개별 영화 정보 보는 페이지(resultmovie.jsp)로 이동한다.



[메인페이지의 검색옵션’영화’선택] [키워드와 일치하는 영화검색리스트]

개별영화정보보기 페이지(resultmovie.jsp)에서 간단한 영화정보는 물롞 주요 영화정보

(줄거리, 평점), 사진, 예고편, 소셜 댓글 세부항목 제목을 터치하여 펼치면 자세한 영화정

보를 볼 수 있다.

5) 개별 영화 정보 보는 페이지(resultmovie.jsp)에서 영화이름, 포스터, 영화 상영된 날

짜, 감독, 주연배우, 영화장르, 영화 관람가, 상영시간, 예매하기버튺, 추천된 횟수등을

볼 수 있다.

6) 세부항목 제목(주요 영화 정보, 사진, 예고편, 소셜댓글)을 터치하면 더 자세한 영화정

보를 볼 수 있다.



7) 예매를 원할 경우 현재 상영중인 영화에 한해 예매를 할 수 있다.

[간단한 영화정보페이지 세부메뉴클릭] [자세한 영화정보페이지 펼쳐짐]

2.2.6. 영화관 검색

메인페이지(main2.jsp)에서 상단의 검색옵션으로 ‘영화관’을 선택하면 영화관 검색을

할 수 있는 페이지로 이동하여 가장 먼저 지역을 선택하고 그에 따른 도시를 선택하고 주

요 영화관(롯데시네마, 메가박스, cgv)을 선택하면 해당 선택 옵션에 따른 영화관 리스트

를 볼 수 있다.

1) Main2.jsp페이지의 상단 검색옵션으로 ‘영화관’을 선택한다.



2) 영화관 검색 페이지(searchTheater2.jsp)로 넘어와서 지역선택 -> 도시선택 -> 영화

관 순서대로 select박스를 선택하고 검색 버튺을 누른다.

3) 선택 옵션에 따른 영화관 리스트를 볼 수 있다.

4) 영화관 리스트 중 하나를 선택하면 선택한 영화관의 자세한 정보를 볼 수 있는 개별 영

화관 정보 보는 페이지(resultTheater2.jsp)로 이동한다.

[메인페이지 검색옵션’영화관’선택] [키워드와 일치하는 영화검색리스트]

여기서 특정 영화관의 이름, 예를 들어 ‘메가박스 장산’을 클릭하면 해당 영화관 정보보

기 페이지(resultTheater2.jsp)로 이동하여 간단한 영화관 정보는 물롞 영화관 위치, 자세

한 영화관 약도(naver map), 주차/교통정보, 영화관 사진, 소셜 댓글 세부항목 제목을 터

치하여 자세한 영화관 정보를 볼 수 있다.

5) 해당 영화관 정보 보는 페이지(resultTheater2.jsp)에서 영화관 로고, 영화관 이름, 상

영관 이름, 홈페이지 주소, 전화번호, 추천횟수등을 볼 수 있다.



6) 세부항목 제목(영화관 위치, 영화관 약도, 주차/교통정보, 사진, 소셜 댓글)을 터치하

면 더 자세한 영화관정보를 볼 수 있다.

7) 예매를 원할 경우 현재 상영중인 영화에 한해 예매를 할 수 있다.

[영화관정보페이지 세부메뉴클릭] [자세한 영화관 정보페이지 펼쳐짐]



2.2.7. 영화 예매

영화 예매에 접근하게 되는 경우는 다양하다. 영화 검색 도중 검색된 영화 목록에서 ‘예매

하기’버튺을 누르거나, 영화관 검색 도중 검색된 영화관 목록에서 ‘예매하기’를 누르면 해당

영화,영화관이 선택된 상태에서 영화 예매를 진행할 수 있다.

예를 들면 아래의 왼쪽 그림과 같이 부산광역시의 롯데시네마중 부산본점의 ‘예매하기’버

튺을 누르면 오른쪽 그림과 같이 영화관에 롯데시네마/부산본점 정보가 포함된 상태로 예

매를 시작할 수 있다.

[영화관 검색 결과에서 예약하기 선택] [예약하기 화면에서 영화관 내용이 채워진

상태]



2.2.7.1. 시간, 영화관, 영화 정보 입력

[예매하기 첫 페이지]

하단의 시간. 영화관, 영화 버튺 중 사용자가 영화 예매 시 우선순위로 여기는 것을 선택

하여 정보를 입력할 수 있다.이 때에는 먼저 선택해 놓은 정보가 기준이 되어 다음에 선택

할 정보가 보여질 때 고려된다.

예를 들면 사용자가 시간을 16:00 로 입력한 후 영화관, 영화 버튺을 선택할 경우,

16:00 이후에 상영되는 영화관,영화를 보여주는 것이다.



2.2.7.2. 날짜, 시간 정보 입력

[시간]버튺을 선택한 화면

‘시간’버튺을 선택하면 예매하고자 하는 영화의 날짜, 시간정보를 입력할 수 있다.

1) ‘날짜를 선택해주세요’를 선택하면 달력이 나타나고 사용자는 특정 날짜를 선택할 수

있다. (2012년 11월 29일)

2) ‘날짜완료’버튺을 누르면 상단의 날짜 텍스트박스에 선택한 날짜가 입력된다.



[‘날짜를 선택하세요’를 누른 화면] [달력에서 특정 날짜 선택]



[‘날짜완료’를 선택하여 날짜입력이 완료된 상태]

3) 시간의 선택도 마찬가지 이다’

[‘시간을 선택하세요’를 누른 화면] [특정 시간 선택 후 ‘시간완료’까지 완료한 상

태]

이것으로 영화예매 중 시간정보 입력이 완료되었다.



2.2.7.3. 영화관 정보 입력

다음은 ‘영화관’버튺을 눌렀을 때의 화면이다. 지역,도시, 영화관별로 선택을 하여 사용

자가 원하는 영화관 정보를 입력할 수 있다.

[영화관]버튺을 선택했을 때의 모습 [지역, 도시, 영화관을 선택하고

특정 영화관 선택]



2.2.7.4. 영화 정보 입력

다음은 ‘영화’버튺을 눌렀을 때의 화면이다. ‘가나다순’, ‘인기순’중 원하는 순서대로 볼

수 있으며 이곳에 나타나는 정보는 앞서 선택했던 시간, 영화관정보가 고려된 영화 정보들

이다.

예를 들면 시간으로 사용자가 선택한 21:00 이후의 시간들 중 예매가 가능한 영화들이

나타나 있다.

[영화 버튺을 선택한 화면 - 인기순] [영화 버튺을 선택한 화면 - 가나다순]



(※텍스트박스의 오른편에 있는 ‘새로고침’ 아이콘을 클릭하면 칸이 비워지며 다시 값을

입력해 넣을 수 있다)

이것으로 시간, 영화관, 영화 정보가 모두 입력되었다. 매뉴얼 대로 시간,영화관,영화 순

서가 아닌, 사용자가 원하는 우선순위 대로 선택하여 예매가 가능하다.

상단의 날짜,시간,영화관,영화 정보가 모두 입력되면 좌석을 선택할 수 있는 화면으로

이동한다.

2.2.7.5. 좌석 선택

좌석 선택페이지로 넘어오면 이전에 입력했던 영화,시간,영화관 정보가 표시되어있

는 것을 볼 수 있다.

사용자가 원하는 좌석을 선택한 후 ‘다음’버튺을 누르면 결제페이지로 넘어간다. 이

때 선택했던 좌석을 한 번 더 선택하면 좌석선택 이 해제된다.

[좌석선택 화면]



2.2.7.6. 결제하기

결제를 시작하기 전 결제 방법을 선택하는 페이지이다. 영화, 영화관, 시간, 그리고

좌석까지 사용자가 선택했던 정보 모두가 상단에 표시되어 있다.

[결제방법 선택 화면]

총 결제 금액이 나타나 있고, 계좌이체, 신용카드 중 원하는 결제방법을 선택한다.



두 결제창 모두, 정확한 값이 입력되지 않았을 경우 결제가 완료될 수 없도록 유효성검

사를 하고 있다.

[‘계좌이체로 결제하기’]를 선택 [‘신용카드로 결제하기’]를 선택



[유효성 체크로 결제가 완료되지 않은 상태]

2.2.7.7. 결제완료

2.2.7.6의 결제내용 입력을 모두 마치고, 유효성 검사에서 문제가 발생하지 않는다면 결

제가 완료된다.

결제완료는 다음과 같은 페이지의 창으로 확인할 수 있다.



[결제완료 창]



1) ‘결제정보’선택 시 결제한 사람의 이름과, 결제 방법인 카드사, 카드번호를 확인

할 수 있다.

[‘결제정보’ 선택]



2) ‘확인’선택 시 자세한 예매 정보 확인이 가능하도록 마이페이지 창으로 이동한다.

[‘확인’선택 후 마이페이지로 이동]



2.2.8. 영화 예매 내역 조회/취소

영화예매 내역 조회로의 접근방법은 다양하다. 영화 예매 완료 후 예매정보를 확인하는

페이지로 이동하거나, 메인화면에서 마이페이지를 선택하여 예매정보를 확인하는 페이지

로 이동할 수도 있다.

[예매내역 페이지에 접근]

예매내역 페이지에서는 예매한 영화이름, 영화관, 상영관, 날짜, 시간, 좌석정보, 구매정

보들을 확인할 수 있다. 또한 자세한 ‘결제정보’, 실제 영화관에서 영화를 볼 때 사용될 바코

드가 들어있는 ‘티켓보기’, 영화예매를 취소할 수 있는 ‘취소하기’를 제공한다.



1) 결제정보 : 결제 방법 (신용카드로 결제 or 계좌이체로 결제), 결제자, 그리고

결제방법에 대한 간략한 정보를 나타낸다.

[‘결제정보’를 선택]



2) 티켓보기 : 실제 영화를 볼 때 매표소에서 제시할 바코드 정보를 포함하고 있다.

팝업창으로 나타나며 바코드외에도 영화예매에 대한 정보를 확인할 수 있다.

3) 취소하기 : 영화 예매를 취소할 수 있는 기능이며, 예매내역 DB와 결제내역

DB에서 해당 내용이 삭제가된다. 한번 더 삭제여부를 묻고, 사용자가 삭제를

원할 경우 예매 취소가 완료된다. 예매취소 이후에는 마이페이지 화면으로 이

동한다.

[‘티켓보기’를 선택]



[예매내역 페이지] [‘자칼이온다’영화목록의 ‘취소하기’버튺]

[취소 완료 후 마이페이지로 이동함] [예매취소가 완료되었음을 확인할 수 있다]

con spirito - eunmi choi's...

Documents