2022년 1학기 계원대 4CUT CAFE

https://www.are.na/block/1328720

TV보다는 스마트폰이나 태블릿 PC 같은 모바일 기기에 익숙하다.

(Visible) (Invisible)
,
, ,
, , ,
( ) ( )

😠 😞 😐 😄 😍
5
4
1
2
3

😐 😄 😄 😐 😞 😐 😍 😄 😄
😠 😞 😐 😄 😍
5
4
1
2
3

😄 😞 😐 😐 😄 😄 😍 😍 😄
😠 😞 😐 😄 😍
5
4
1
2
3

😄 😄 😍 😄 😄 😍 😐 😍 😄
😠 😞 😐 😄 😍
5
4
1
2
3

😞 😐 😄 😐 😄 😍 😄 😍 😄
😠 😞 😐 😄 😍
5
4
1
2
3

😐 😄 😄 😐 😍 😄 😐 😍 😄
😠 😞 😐 😄 😍
5
4
1
2
3

😐 😄 😄 😍 😍 😄 😄 😍 😍
😠 😞 😐 😄 😍
5
4
1
2
3

😠 😞 😐 😄 😍
😄 😐 😄 😄 😐 😍 😐 😍 😄
5
4
1
2
3

😐 😄 😍 😍 😄 😍 😄 😐 😄
😠 😞 😐 😄 😍
5
4
1
2
3

😞 😐 😄 😍 😄 😍 😍 😍 😍
😠 😞 😐 😄 😍
5
4
1
2
3

😐 😄 😐 😄 😐 😐 😍 😄 😄
😠 😞 😐 😄 😍
5
4
1
2
3

😠 😞 😐 😄 😍
😐 😄 😄 😐 😄 😍 😍 😍
5
4
1
2
3

😠 😞 😐 😄 😍
😐 😄 😄 😐 😍 😄 😍 😄
5
4
1
2
3

😠 😞 😐 😄 😍
😐 😄 😐 😄 😍 😄 😐 😍
5
4
1
2
3

😠 😞 😐 😄 😍
😞 😐 😐 😐 😄 😍 😐 😄
5
4
1
2
3

😠 😞 😐 😄 😍
😐 😄 😄 😄 😐 😐 😍 😄
5
4
1
2
3

😠 😞 😐 😄 😍
😐 😄 😄 😍 😍 😄 😐 😞
5
4
1
2
3

😠 😞 😐 😄 😍
😐 😄 😄 😐 😄 😐 😍 😄
5
4
1
2
3

😠 😞 😐 😄 😍
😄 😄 😞 😄 😐 😄 😍 😄
5
4
1
2
3

😠 😞 😐 😄 😍
😞 😐 😄 😐 😍 😍 😍 😄
5
4
1
2
3

😠 😞 😐 😄 😍
😐 😄 😐 😞 😍 😄 😐 😄
5
4
1
2
3

0
1
2
3
4
5
6
7
8
9
10
첨단적인
재미있는
커스터마이징
흥미로운
사용자맞춤
신비한
풍부한
직관적인
자유로운
새로운
독특한
편안한
변화적
포토제닉한
자연스러운

Capturing the magical fantasy
Inter 포컷카페와 함께하는 환상적인 순간
Capturing the magical fantasy 포컷카페와 함께하는 환상적인 순간
Bold
Medium
Capturing the magical fantasy 포컷카페와 함께하는 환상적인 순간
Light

김성은 교수님
김민지
박신희
조현정
Professor
Project Member
Date.2022.05.29 ‒ 2022.06.14
iOS & Media table 전용 애플리케이션 스토리보드
Ver.1.0
인생네컷이 선사하는 오늘의 맛!

2
버전 날짜 작성자 내용 내용상세 비고
App
Ver,1.0
2022-05-29 박신희, 조현정
스마트폰 / 미디어 테이블
와이어프레임, 스토리보드
-유저인터페이스 자료 작성
-스마트폰 정보구조도 / 미디어 테이블 정보구조도 설계
주요 기능 와이어프레임, 스토리보드 최초 작성
App
Ver,1.0
2022-06-03 박신희, 조현정
와이어프레임, UI FLOW
-스마트폰 / 미디어 테이블 전용 애플리케이션
화면 설계 / 와이어프레임 보완, UI FLOW 최초 작성
App
Ver,1.0
2022-06-10 박신희, 조현정
/키오스크
와이어프레임, 스토리보드
-스마트폰 / 미디어 테이블
주요 기능 와이어프레임, 스토리보드 수정 및 보완
-키오스크
주요 기능 와이어프레임, 스토리보드 최초 작성
[app v1.0/2022.06.10 ] Storyboard 추가 및
Description 수정
[app v1.0/2022.06.10 ] Wireframe 추가
[app v1.0/2022.06.10 ] UI FLOW 수정
1-1. 개정 이력

3
Notation Name Definition
단말 순서도의 시작, 끝을 나타냄.
처리
처리작업 명시.
처리 과정을 나타내는 기호로 모든 처리 내용을 기호 내에 작성한다.
판단
명시된 조건 비교 판단.
판단을 나타내는 도형으로 마름모 형태 좌/우/위/아래의 꼭지점을 각각 (Yes )와 (No )로 조건에 따라 분기되는 과정을 결정한다.
입 출력
데이터 입력, 출력.
입/출력을 나타내는 기호로 입력에 필요한 자료 준비나 출력 결과에 대한 산출물을 정의할 수 있다.
흐름 선
작업의 흐름 명시.
각 단계의 상호 연결 구조를 나타낸다.
Y N
1-2. 제스처 정의

4
Name Definition
일반 표준 텍스트: 맑은고딕 6px ~ 20px
버튼
이미지
인디게이터
하단 네비게이션/ 탭
현재 머물러 있는 페이지가 진하게 표시
수정내용
1-2. 유저 인터페이스 자료
홈 멤버십 예약내역 설정
[버전/날짜] 스펙아웃 사유
[버전/날짜] 업데이트 내용
스크롤 1
계
속
이
어
서
1-1
icon
IMG
IMG IMG IMG
포컷카페 포토부스 > + 접기 열기 위치 변경 예약 변경 예약취소 완료
IMG
수정
Status bar
QR
코드
화면
분할
NEW HOT 드로잉 스티커 필터 장식 조명
편집 완료
커피 음료 디저트 커스텀
주문하기
보는 ASMR
+
-
확인
남은 제조시간 NN:NN
제조 완료!
주문 접수 전 마법의 재료로 맛있게 제조 중…
네
아니오

5
1-3. 스마트폰 정보 구조도 순차적인 구조로 사용자들이 쉽게 경로를 찾아볼 수 있는 Nested doll IA 형태로 진행
4 CUT CAFE
1 depth
로그인 비밀번호 찾기 회원가입
홈 멤버십 예약 내역 설정
포컷카페 포토부스
현황
추천 메뉴
실시간
인기 메뉴
프로모션
현황
추천/신규 필터
실시간
인기 포토부스
프로모션
2 depth
3 depth
포인트
쿠폰
포컷카페 포토부스 계정 정보 고객 센터 알림 설정
로그아웃 공지사항 푸쉬 알림
회원탈퇴 FAQ
이용약관 및 정책
버전 정보
예약 알람

6
1-4. 미디어테이블 정보 구조도 순차적인 구조로 사용자들이 쉽게 경로를 찾아볼 수 있는 Nested doll IA 형태로 진행
4 CUT CAFE
1 depth
QR코드 화면 분할 설정 날짜/시간
홈 게임 사진편집 언어선택
메뉴판
프로모션 NEW!
2 depth
3 depth
꾸미기 도구 한국어
영어
일본어
중국어
메뉴 주문
메뉴
테이블 넘버
편집 화면
HOT
드로잉
스티커
필터
장식
조명
담은 리스트
커피
음료
디저트
커스텀
보는 ASMR
디저트 모드

7
Ver.1.0
스마트폰 전용 애플리케이션
1-0. UI FLOW
1. 포컷카페 성수점 대기 현황 확인하기
메인 포컷카페 현재 입장 대기 인원 확인 완료
2. 테이블(좌석) 예약하기
메인 포컷카페
현재 입장 대기 인원
프라이빗존
날짜 선택
지점 선택
입장 예약
원하는 좌석 ’예약’
버튼 선택
예약 완료
날짜 정보 확인
지점 정보 확인
예약 시간 선택
3. 디저트 주문하기 (패스트 오더)
메인 포컷카페 음료 예상 대기시간 패스트 오더
날짜 선택
지점 선택
원하는 메뉴 ’주문’
버튼 선택
주문 완료
주문 시간 선택

8
Ver.1.0
1-0. UI FLOW
4. 추천 메뉴 Top 5 확인하기
메인 포컷카페 추천 메뉴 Top 5 확인 완료
추천 메뉴
추천 메뉴 Top 1
추천 메뉴 Top 2
추천 메뉴 Top 3
추천 메뉴 Top 4
추천 메뉴 Top 5
5. 실시간 인기 메뉴 Top 5 확인하기
메인 포컷카페
실시간 인기
메뉴
아침
점심
저녁
인기 메뉴 Top 1
인기 메뉴 Top 2
인기 메뉴 Top 3
인기 메뉴 Top 4
인기 메뉴 Top 5
실시간 인기 메뉴 Top 5 확인 완료
6. 프로모션 확인하기
메인 포컷카페 프로모션 프로모션 확인 완료

9
Ver.1.0
1-0. UI FLOW
7. 포토부스 예약하기
메인 포토부스
날짜 선택
지점 선택
입장 예약
원하는 부스 ’예약’
버튼 선택
예약 완료
예약 시간 선택
베이직
AR 필터
모션캠
어안렌즈
8. 추천 신규 필터 Top 5 확인하기
메인 포토부스 추천 신규 필터 Top 5 확인 완료
추천 신규 필터
추천 필터 Top 1
추천 필터 Top 2
추천 필터 Top 3
추천 필터 Top 4
추천 필터 Top 5

10
Ver.1.0
1-0. UI FLOW
9. 실시간 인기 포토부스 Top 5 확인하기
메인 포토부스
8. 추천 신규 필터 Top 5 확인하기
메인 포토부스 추천 신규 필터 Top 5 확인 완료
추천 신규 필터
추천 필터 Top 1
추천 필터 Top 2
추천 필터 Top 3
추천 필터 Top 4
추천 필터 Top 5
실시간 인기
포토부스
아침
점심
저녁
인기 부스 Top 1
인기 부스 Top 2
인기 부스 Top 3
인기 부스 Top 4
인기 부스 Top 5
실시간 인기 포토부스 Top 5 확인 완료

11
Ver.1.0
1-0. UI FLOW
10. 멤버십 바코드 확대하기
메인 멤버십 바코드 선택 멤버십 바코드 확대 완료
11. 멤버십 백그라운드 사진 설정하기
메인 멤버십 ‘편집’ 버튼 선택
갤러리에서 원하는
사진 선택
’편집 완료’ 버튼 선택 멤버십 백그라운드 사진 설정 완료
12. 쿠폰 적립하기
메인 멤버십
바코드
‘바코드’ 확대
‘바코드’ 입력 쿠폰 자동 적립 완료

12
13. 사용자 프로필 수정하기
Ver.1.0
1-0. UI FLOW
메인 설정
사용자 프로필 영역
‘수정’ 버튼 선택
프로필 사진
닉네임
사용자 ID
SNS 연동 계정
사용자 PW
사용자 프로필 영역
수정 ‘완료’ 버튼 선택
사용자 프로필 수정 완료

13
프로모션 >
추천 메뉴
Ver.1.0
화면 명 포컷카페 화면 ID APP_01_01
화면 경로 홈 (메인) > 포컷카페 최초작성일 2022-06-03
1-0. 와이어프레임
추천 메뉴
>
>
>
>
프로모션 >
>
13

14
프로모션 >
추천 메뉴
Ver.1.0
화면 경로 (메인) > 포토부스 최초작성일 2022-06-03
추천 메뉴
>
>
>
>
프로모션 >
>
14

15
Ver.1.0
화면 명 포컷카페 화면 ID APP_01_01_01, APP_01_01_02
화면 경로 포컷카페>예약하기 / 주문하기 최초작성일 2022-06-03

16
Ver.1.0
화면 경로 멤버십 최초작성일 2022-06-03
접기
편집
접기
편집

17
Ver.1.0
화면 경로 예약 내역 최초작성일 2022-06-03

18
Ver.1.0
화면 경로 설정 최초작성일 2022-06-03
이용 약관 및 정책 >

19
19
Ver.1.0
Description
화면 경로 공통 최초작성일 2022-05-29
공통
좌측 현재 위치한 메뉴 이름 제공
Status bar
Title bar
콘텐츠
영역
Bottom
Navigation
1-5. 스토리보드
Status bar
Title bar
공통
포컷카페 서비스 메뉴 명 수평 나열
탭 시 해당 페이지로 이동 후 버튼 아이콘 색 변경
Bottom Navigation
Title bar

20
IMG
20
Ver.1.0
Description
1
사용자 설정 닉네임 반영 텍스트
2
포컷카페/포토부스 상단 탭바
탭 시 해당 콘텐츠 제공
3
현황 콘텐츠
3-1 지점 설정
설정한 지점의 현황 정보 제공
3-2현재 입장 대기 인원 정보
우측 ‘>’ 탭 시 상세 페이지 이동
3-3 음료 예상 대기시간 정보
3-4 프라이빗존 이용 현황 정보
4
추천 메뉴
가로 스크롤로 콘텐츠 5개 제공
각 콘텐츠 탭 시 상세 페이지 이동
5
실시간 인기 메뉴 Top 5
5-1평일 아침,점심,저녁/ 주말 아침,점심,저녁으로 표기
Status bar
Title bar
콘텐츠
영역
Bottom
Navigation
Status bar
Status bar
어서오세요
매일이인생샷님!
현황
포컷카페 성수점
현재 입장 대기 인원
없음
대기인원
icon
음료 예상 대기시간
3~5분
음료
icon
프라이빗존
1/4개 이용중
프라이빗
icon
추천 메뉴
IMG
리얼포토라떼
6,500원
IMG
판타지마카롱set
13,500원
IMG
체리벨리매직
6,000원
추천 메뉴
IMG
리얼포토라떼
6,500원
IMG
판타지마카롱set
13,500원
IMG
체리벨리매직
6,000원
실시간 인기 메뉴
IMG
키워드랜덤커피
7,000원
IMG
리얼포토라떼
6,500원
IMG
아메리카노
4,500원
주말 저녁 기준
프로모션 >
스크롤
계
속
>
>
>
>
>
1
2
3
3-1
3-2
3-3
3-4
4
5 5-1

21
이
어
서
21
Ver.1.0
Description
6
프로모션
6-1 가로 스크롤로 콘텐츠 5개 제공
Status bar
Title bar
콘텐츠
영역
Bottom
Navigation
Status bar
IMG
실시간 인기 메뉴
IMG
7,000원
IMG
리얼포토라떼
6,500원
IMG
아메리카노
4,500원
프로모션 >
포컷카페 오픈 기념! 선탁순 굿즈 증정( •$ ω •́ )✧
IMG IMG
Welcome Summer
시즌메뉴 대 공개!
포컷카페 X 세븐틴
콜라보레이션
6
6-1

22
22
Ver.1.0
Description
화면 명 포컷카페 화면 ID APP_01_01_01
화면 경로 홈 (메인) > 포컷카페 > 예약하기 최초작성일 2022-06-06
Status bar
Title bar
콘텐츠
영역
Bottom
Navigation
Status bar
입장 예약
날짜 오늘 (금)
지점 포컷카페 성수점 위치 변경
1
2
3
<
예약 가능순
6/16개 이용중
IMG
1번 테이블
미디어 테이블 예약
4인석
IMG
3번 테이블
일반 좌석 예약
4인석
IMG
12번 테이블
미디어 테이블 예약
4인석
IMG
18번 테이블
프라이빗 예약
4인석
1
날짜 설정 구역
설정한 날짜 기반으로 예약 내역 제공
2
지점 설정 구역
설정한 지점 기반으로 예약 내역 제공
3
현황 정보 및 정렬 순 설정
정렬 순 탭 시 설정 가능한 바텀 시트 제공
인기순,예약 가능순으로 정렬 설정 가능
4
좌석 리스트
4-1 좌석 미리보기 이미지
4-2 좌석 정보 / 테이블 번호, 테이블 종류(일반/미디어
테이블/프라이빗) / 수용 가능 인원
4-3 예약 버튼
탭 시 예약 가능 및 예약 절차 진행
4 4-1 4-2 4-3

23
23
Ver.1.0
Description
화면 명 포컷카페 화면 ID APP_01_01_02
화면 경로 홈 (메인) > 포컷카페 > 주문하기 최초작성일 2022-06-06
Status bar
Title bar
콘텐츠
영역
Bottom
Navigation
Status bar
주문
날짜 오늘 (금)
1
2
3
<
드링크
대기시간 3-5분 소요
IMG
7,000원
주문
IMG
IMG
IMG
1
2
3
현황 정보 및 정렬 순 설정
정렬 순 탭 시 설정 가능한 바텀 시트 제공
드링크, 디저트 제공
4
메뉴 리스트
4-1 메뉴 미리보기 이미지
4-2 메뉴 정보 / 메뉴명, 가격
4-3 주문 버튼
탭 시 주문 가능 및 주문 절차 진행
4 4-1 4-2 4-3
리얼포토라뗴
6,500원
주문
아메리카노
4,500원
주문
무지개맛젤리
6,500원
주문

24
IMG
24
Ver.1.0
Description
화면 경로 홈 (메인) > 포토부스 최초작성일 2022-05-29
1
사용자 설정 닉네임 반영 텍스트
2
포컷카페/포토부스 상단 탭바
탭 시 해당 콘텐츠 제공
3
현황 콘텐츠
3-1 지점 설정
설정한 지점의 현황 정보 제공
3-2 베이직 포토부스 이용 현황 정보
3-3 AR 필터 포토부스 이용 현황 정보
3-4 모션캠 포토부스 이용 현황 정보
3-5 어안렌즈 포토부스 이용 현황 정보
4
5
실시간 인기 포토부스 Top 5
5-1평일 아침,점심,저녁/ 주말 아침,점심,저녁으로 표기
Status bar
Title bar
콘텐츠
영역
Bottom
Navigation
Status bar
Status bar
어서오세요
매일이인생샷님!
현황
베이직
1/2개 이용중
대기인원
icon
AR 필터
1/2개 이용중
대기인원
icon
IMG
가상과 현실의 세계 다이나믹 댄스
프로모션 >
스크롤
계
속
>
>
모션캠
이용중
대기인원
icon >
어안렌즈
이용중
대기인원
icon >
이것은 마
IMG IMG
IMG
가상과 현실의 세계 다이나믹 댄스 이것은 마
IMG IMG
실시간 인기 포토부스
IMG
IMG IMG
>
>
1
2
3
3-1
3-2
3-3
3-4
3-5
4
5 5-1

25
이
어
서
25
Ver.1.0
Description
화면 경로 홈 (메인) > 포토부스 최초작성일 2022-05-29
6
프로모션
6-1 가로 스크롤로 콘텐츠 5개 제공
Status bar
Title bar
콘텐츠
영역
Bottom
Navigation
Status bar
IMG IMG
Welcome Summer
시즌메뉴 대 공개!
포컷카페 X 세븐틴
콜라보레이션
IMG
프로모션 >
실시간 인기 포토부스
IMG
IMG IMG
6
6-1

26
IMG
26
Ver.1.0
Description
화면 경로 멤버십 최초작성일 2022-05-29
1
포컷카페 멤버십
탭 시 바코드 모바일 전체화면 – 가로모드로 지원
1-1 멤버십 카드 이미지 설정 영역
’편집’ 버튼 탭 시 사용자가 직접 이미지 설정 가능
이미지의 명도에 따라 UI 자동 변환 / 라이트, 다크 모드
1-2 사용자 설정 닉네임
1-3 월별 누적 사용 횟수에 따른 사용자 레벨
*월 3회 미만 방문 Level1, 월 3회 이상 5회 미만 방문
Level2, 월 5회 이상 방문 Level 3
1-4 누적 포인트
1-5 멤버십 바코드 및 바코드 일련 번호
2
쿠폰
2-1 접기 버튼
탭 시 쿠폰 영역 닫힘/ 열기 버튼으로 변경
2-2 쿠폰 영역
1회 이용시 마다 바코드 적립/적립시 쿠폰 1개씩 부여
2-3 쿠폰 사용 안내사항
Status bar
Title bar
콘텐츠
영역
Bottom
Navigation
Status bar
멤버십
Level 1 | 512P
매일이인생샷
쿠폰 접기
전 메뉴
50% 할인
전 메뉴
택 1 무료
1.전국 포컷카페 전 매장에서 사용 가능합니다.
2.타인에게 쿠폰을 양도할 수 없습니다.
3.무료 혜택을 받으실 때 주문 전 쿠폰을 제시해 주세요.
1
2 2-1
2-2
2-3
1-1
바코드
1234 5678 9012 3456
1-2
1-3 1-4
1-5
편집
IMG
Level 1 | 512P
매일이인생샷
바코드
1234 5678 9012 3456
편집

27
27
Ver.1.0
Description
화면 경로 예약 내역 최초작성일 2022-05-29
1
2
3
포컷카페, 포토부스 예약 내역
3-1 해당 지점 이미지
3-2 예약 정보
3-3 예약 변경 버튼
탭 시 취소 및 예약 변경 가능
취소 및 변경 시 결과 반영하여 버튼 변경
Status bar
Title bar
콘텐츠
영역
Bottom
Navigation
Status bar
예약 내역
날짜 오늘 (금)
포컷카페 2건
IMG
1번 테이블 (4인석)
미디어 테이블
5.27 금 | 오후 1:00~오후 2:30
예약 변경
IMG
1번 테이블 (4인석)
미디어 테이블
5.27 금 | 오후 12:00~오후 1:00
예약취소 완료
포토부스 1건
IMG
AR 필터
5.27 금 | 오후 12:50
예약 변경
1
2
3
3-1 3-2
3-3

28
28
Ver.1.0
Description
화면 경로 설정 최초작성일 2022-05-29
1
사용자 정보 콘텐츠
프로필 사진, 닉네임, 아이디 가시화
수정 버튼 탭 시 해당 정보 변경 가능
2
고객센터 관련 콘텐츠
3
알림 설정 관련 콘텐츠
스위치 버튼을 통해 알림 on/off 지원
4
계정 정보 관련 콘텐츠
Status bar
Title bar
콘텐츠
영역
Bottom
Navigation
Status bar
설정
IMG
happyday1234
매일이인생샷 수정
고객 센터
공지사항 >
FAQ >
이용 약관 및 정책 >
버전 정보 v.1.0
알림 설정
푸쉬 알림
예약안내 알림
계정 정보
로그아웃 >
회원탈퇴 >
1
2
3
4

29
Ver.1.0
미디어테이블 전용 애플리케이션
1-0. UI FLOW
1. 화면 분할하기
모든 화면 ‘화면 분할’버튼 선택 화면 4 분할 완료
2. 사진 편집 시작하기
모든 화면 ‘QR’ 버튼 선택 포토부스 ‘QR’ 입력 사진 편집 시작
사진 ‘편집 시작’
버튼 선택
3. 메뉴 주문하기
모든 화면 GNB
‘메뉴 주문’
버튼 선택
커피
음료
디저트
커스텀
개수 설정 ‘주문하기’ 버튼 선택 주문 완료

30
Ver.1.0
1-0. UI FLOW
4. 보는 ASMR 보기
모든 화면
5. 디저트 모드 전환하기
GNB
‘메뉴 주문’
버튼 선택
주문 목록 ‘보는 ASMR’ 버튼 선택 보는 ASMR 재생
디저트 모드
전환
디저트 모드 전환 완료
Y
N
디저트 모드로 전환 하시겠습니까?
Alert
모든 화면
디저트 준비
완료 Alert
‘확인’ 버튼 선택
6. 디저트 모드>식탁보 디자인 변경하기
디저트 모드 두번 탭하기 식탁보 디자인 1
식탁보 디자인 2
원하는 디자인 선택 식탁보 디자인 변경 완료

31
7. 언어 변경하기
Ver.1.0
1-0. UI FLOW
모든 화면 GNB ‘언어 선택’ 버튼 선택 한국어
영어
일본어
중국어
‘적용’ 버튼 선택 언어 변경 완료

32
Ver.1.0
화면 경로 GNB 최초작성일 2022-06-03

33
33
화면 경로 홈 (메인) – 포토부스 연동 시작 최초작성일 2022-06-09
콘텐츠
영역
Navigation
Navigation
Ver.1.0
[app v1.0/2022.06.10 ] Wireframe 추가

34
Ver.1.0
화면 경로 홈 (메인) 최초작성일 2022-06-03

35
Ver.1.0
화면 경로 홈 (메인)>게임, 홈 (메인)>사진 편집 최초작성일 2022-06-03

36
Ver.1.0

37
Ver.1.0
화면 명 포컷카페 화면 ID APP_02_05. APP_02_06
화면 경로 홈 (메인)>메뉴 주문, 홈 (메인)>보는 ASMR 최초작성일 2022-06-03
아포카토
5,500원

38
38
화면 경로 디저트 완료 안내 alert > 디저트 모드 변경 alert 최초작성일 2022-06-03
Ver.1.0

39
39
화면 경로 디저트 모드 최초작성일 2022-06-03
Ver.1.0

40
연동
정보
MM.DD
HH:MM
화면
분할
No. 1
종료
언어
선택
게임
홈
사진
편집
메뉴
주문
40
Description
화면 경로 GNB 최초작성일 2022-05-29
1
탭 시 언어 변경 가능
*영문, 한글, 일어, 중문 제공
2 탭 시 '게임'페이지로 이동
3 탭 시 '메인 (홈)'으로 이동
4 탭 시 '사진 편집'페이지로 이동
5 탭 시 '메뉴 주문'페이지로 이동
6 탭 시 GNB비활성화 되며 dimmed 해제
7
GNB영역은 최대 2개까지 동시 사용 가능,
사각형의 4면 중 어디서든 사용 가능
콘텐츠
영역
Navigation
Navigation
1
Ver.1.0
GNB
테이블 가장자리에서 위로 flick시 GNB해제 / 탭 시 각 메뉴로 이동
*모든 페이지에서 사용 가능
**GNB활성화 시 배경 화면 dimmed처리되며 GNB이외 기능 제한
연동
정보
MM.DD
HH:MM
화면
분할
No. 1
종료
언어
선택
게임
홈
사진
편집
메뉴
주문
종료
언어
선택
게임
홈
사진
편집
메뉴
주문
고정 UI
콘텐츠 영역 고정 UI
1
2
3
4
5
6
7
2
3
4
1
날씨, 시간 표시
*시간은 오전/오후 표시 없이 시:분으로 제공
2
포토부스와 연동 상태 정보
포토부스와 연동 활성화시
포토부스와 연동되어있다는 정보 시각화
ex) 베이직 포토부스와 연동중
3 테이블 번호 제공
4
탭 시 화면 분할 설정 가능
*전체화면, 2분할, 4분할

41
41
Description
화면 경로 홈 (메인) – 포토부스 연동 시작 최초작성일 2022-06-09
1
포토부스 연동 시작 화면
포토부스와 연동이 됐을 경우 사용자에게 이를 알리는
텍스트와 GNB 사용 방법 텍스트로 제공
화면 내 콘텐츠 영역 탭 시
홈 (메인) 화면 ID APP_02_02로 이동
콘텐츠
영역
Navigation
Navigation
Ver.1.0
연동
정보
MM.DD
HH:MM
화면
분할
No. 1
종료
언어
선택
게임
홈
사진
편집
메뉴
주문
종료
언어
선택
게임
홈
사진
편집
메뉴
주문
포토부스와 연동되었습니다!
마법같은 순간을 지금바로 경험해 보세요!
다양한 메뉴들은 화면 아래에서 위로 스와이프하면 만나볼 수 있어요.
준비되셨나요? 화면을 터치하면 시작됩니다.
1
Description 수정

42
연동
정보
MM.DD
HH:MM
화면
분할
No. 1
42
Description
화면 경로 홈 (메인) 최초작성일 2022-05-29
1
메인 화면
현재 진행중인 프로모션, 메뉴판 제공
2
화면 분할 시 제공되는 화면 (4분할 화면)
현재 진행중인 프로모션, 메뉴판 제공
*'화면 분할’ 기능을 통해 분할 설정 가능
콘텐츠
영역
Navigation
Navigation
Ver.1.0
프로모션/메뉴판
연동
정보
MM.DD
HH:MM
화면
분할
No. 1
2
1

43
43
Description
1
게임 페이지
다른 테이블의 사용자들과 다양한 게임 진행 가능
게임 우승 시 다양한 이벤트 혜택 제공
ex) 포컷카페 음료 10퍼센트 할인 QR 쿠폰
콘텐츠
영역
Navigation
Navigation
Ver.1.0
게임
연동
정보
MM.DD
HH:MM
화면
분할
No. 1
1
Description 수정

44
연동
정보
MM.DD
HH:MM
화면
분할
No. 1
편집 완료
남은 시간 N초
44
Description
화면 명 포컷카페 화면 ID APP_02_04, APP_02_04_01
1
사진 편집 제한 시간 표시
기본적으로 300초(5분)를 제공하며, 제한시간 만료 시
사진은 저장되며 편집기 종료 후 사진 전송 QR코드 제공
화면 ID APP_02_04_01 제공
*초 단위로 일관적이게 제공
**종료 30초 전부터 텍스트 색상 변경
2
편집완료 버튼 탭 시 사진 편집 완료되며 사진 전송
QR코드 자동 표시
화면 ID APP_02_04_01 제공
3
편집 도구
3-1 편집 도구 카테고리 / 카테고리 탭 시 각 메뉴에
해당하는 도구 제공
3-2 도구 탭 시 선택한 도구 즉시 사용 가능
4
편집 가능한 사진
4-1 선택 중인 사진을 제외하고 사진 dimmed처리
*편집중인 사진은 변경사항이 즉각 반영되어 표시
**선택한 사진은 4-2에 표시
4-2 사진 편집 영역으로 불러온 사진 표시
손가락 제스처로 사진 확대, 축소 가능하며 선택한 편집
도구로 자유롭게 꾸미기 가능
5
편집 도구 크기 조정
3에서 선택한 편집 도구의 크기 조절 기능
*대: 10px 중: 5px 소: 1px
6
한 단계 전으로 되돌리기, 한 단계 잎으로 돌아오기 기능
*최대 15단계까지 되돌리기 허용
7
편집완료 버튼 탭 시 제공하는 Alert
7-1 사진 전송 QR 코드
스마트 기기에 QR코드 인식 시 해당 기기로 사진 전송
7-2 사진 출력하기 버튼
탭 시 사진 출력 가능
콘텐츠
영역
Navigation
Navigation
Ver.1.0
1 2
3
3-1
3-2
4
4-1
4-2
5
6
편집 완료
남은 시간 N초
사진 편집이 완료되었습니다!
QR 코드
해당 QR코드를 입력하면 사진을 저장할 수 있어요.
연동
정보
MM.DD
HH:MM
화면
분할
No. 1
사진 출력하기
7-1
7
7-2
Description 수정

45
연동
정보
MM.DD
HH:MM
화면
분할
No. 1
45
Description
화면 명 포컷카페 화면 ID APP_02_05. APP_02_06
화면 경로 홈 (메인)>메뉴 주문, 홈 (메인)>보는 ASMR 최초작성일 2022-05-29
1
메뉴 카테고리 / 카테고리 탭 시 각 메뉴에
해당하는 도구 제공
2
카테고리 별 상세 메뉴 제공
각 메뉴 탭 시 담은 리스트(3번)에 즉각 적용
*콘텐츠가 많은 경우 하단 스크롤로 메뉴 확인 가능
3
담은 리스트
3-1 선택한 메뉴의 사진, 메뉴 명, 가격, 보는 ASMR제공
*보는 ASMR: 메뉴 주문 접수 후 메뉴가 조리되는 과정을
실시간으로 제공하는 기능
3-2 선택한 메뉴의 개수 조정 (1번 당 최대 5개 제한)
4 버튼 탭 시 주문 접수 완료
5
주문 접수 시 메뉴 수령까지 남은 시간 표시
*모든 화면에서 확인 가능
6
메뉴 제조 진행 과정 바 제공
*중앙 텍스트는 현재 진행상황에 따라 변경
(주문 접수 대기 중 / 마법의 재료로 맛있게 제조 중 /
메뉴 플레이팅 중 / 메뉴 수령 대기 중 / 수령 완료)
**보는 ASMR화면에서만 확인 가능
7
보는 ASMR화면 영상 제어 버튼
각각 10초 전으로 되돌리기, 일시정지/재생, 10초 뒤로
이동하기 기능 제공
*화면 5초 이상 터치하지 않을 경우, 버튼 비활성화(8번)
8
보는 ASMR화면 영상 제어 버튼 비활성화
화면 5초 이상 터치하지 않을 경우, 버튼 비활성화
*화면 터치 시 제어 버튼 표시(7번)
콘텐츠
영역
Navigation
Navigation
Ver.1.0
연동
정보
MM.DD
HH:MM
화면
분할
No. 1
커피 음료 디저트 커스텀
주문하기
종합 5,500원
보는 ASMR
담은 리스트
음료 이름
아포카토
5,500원
개수
1 +
-
*요청사항은 데스크로 문의주세요
아메리카노
4,500원
카페라떼
5,000원
바닐라 라떼
5,500원
아포카토
5,500원
돌체 라떼
5,500원
카푸치노
5,000원
캬라멜 마끼아토
6,000원
토피넛 라떼
5,500원
제조 완료!
제조 완료!
8
3-1
1
2
3
3-2
4
5
6
7

46
제조 완료!
디저트 모드*로 전환 하시겠습니까?
네
포컷카페 디저트를 더욱 환상적으로 즐길 수 있는 식탁보 모드입니다.
아니오
연동
정보
MM.DD
HH:MM
화면
분할
No. 1
46
Description
화면 경로 디저트 완료 안내 alert > 디저트 모드 변경 alert 최초작성일 2022-05-29
1
디저트 준비 완료 안내 alert 제공 시 화면 dimmed처리
되며 alert를 제외한 모든 기능 제한
2
디저트 준비 완료 안내 alert
2-1 확인버튼 탭 시 디저트 모드 전환 안내 alert 제공
3
디저트 모드 전환 안내 alert 제공 시 화면 dimmed처리
되며 alert를 제외한 모든 기능 제한
4
디저트 모드 전환 안내 alert
4-1 버튼 탭 시 dimmed화면은 해제되며, 마지막으로
이용 중이던 화면 표시
4-2 버튼 탭 시 디저트 모드로 변환
콘텐츠
영역
Navigation
Navigation
Ver.1.0
제조 완료!
연동
정보
MM.DD
HH:MM
화면
분할
No. 1
주문하신 디저트가 완성되었습니다!
확인
1
2-1
2
3
4-2
4
4-1

47
연동
정보
MM.DD
HH:MM
화면
분할
No. 1
47
Description
화면 경로 디저트 모드 최초작성일 2022-05-29
1
디저트모드 화면 가이드 문구
더블 탭 시 비활성화되며 3번 화면 표시
2
디저트모드 식탁보 디자인 변경
좌우 swipe를 통해 디자인 확인 가능, 탭 시 선택한
식탁보 디자인이 미디어테이블에 반영되어 표시
콘텐츠
영역
Navigation
Navigation
Ver.1.0
연동
정보
MM.DD
HH:MM
화면
분할
No. 1
두 번 탭 해서 식탁보 디자인을 바꿔보세요
1 2

48
Ver.1.0
1-0. UI FLOW
1. 즉석사진 촬영하기
대기 화면 프레임 테마 선택
사진 촬영하기
포컷카페
한정판
콜라보 프레임
인생네컷
오리지널
키오스크 전용 애플리케이션
프레임 컷 수 선택 4컷
6컷
3컷
8컷
사진 수량 선택
3장
4장
2장
5장
6장
7장
8장
배경 패턴 선택
촬영 방식 선택
기존 자동촬영
리모콘 촬영
결제방식 선택
현금 결제
카드 결제
카드결제가 완료되었습니다!
Alert
현금결제가 완료되었습니다!
Alert
Y
N
N
Y

49
Ver.1.0
1-0. UI FLOW
2. 사진 출력하기
사진 촬영하기 출력할 사진 선택 출력 완료
2. 미디어테이블에 사진 전송
지금 바로 사진 출력
사진 꾸미고 출력
사진 촬영하기 출력할 사진 선택
미디어테이블에
사진 전송 완료
‘선택 가능’
미디어테이블 선택
‘이용 중’
미디어테이블 선택
테이블 선택
핸드폰 번호 입력

50
화면 명 포컷카페 포토부스 화면 ID APP_03_01, APP_03_02
화면 경로 대기화면>촬영 테마 최초작성일 2022-06-10
Ver.1.0

51
51
Ver.1.0
화면 경로 프레임>출력 형태 최초작성일 2022-06-10
51

52
Ver.1.0
화면 경로 촬영방법>결제방법 최초작성일 2022-06-10

53
Ver.1.0
화면 경로 출력할 사진선택>출력 및 편집 방법 최초작성일 2022-06-10

54
Ver.1.0
화면 명 포컷카페 포토부스 화면 ID APP_03_09
화면 경로 테이블 선택>본인인증 최초작성일 2022-06-10

55
55
Ver.1.0
화면 경로 이용 종료(사진 출력/데이터 전송) 최초작성일 2022-06-10

56
56
Description
화면 경로 대기화면 최초작성일 2022-06-10
Ver.1.0
콘텐츠
영역
1
화면을 터치해주세요!
1
메인 화면
현재 진행중인 프로모션 광고 이미지 제공
Tap 시 프레임 선택 화면으로 이동
프로모션 / 대기화면

57
촬영 테마를 선택해주세요
NN:NN
57
Description
1
각 단계별 제한 시간 표시
*제한시간 종료 10초 전부터 텍스트 볼드, 붉은색 처리
2
촬영 테마
테마 선택 시 각 테마에 맞는 프레임 사용 가능
*테마 선택 시 배경 테두리를 통해 선택 됨을 표시
**제한시간 종료 시 ‘오리지널 프레임’테마 자동 선택
3
버튼 탭 시 2번에서 선택한 테마 프레임 페이지로 이동
*2번에서 테마 미 선택 시 비활성화
Ver.1.0
화면 경로 촬영 테마 최초작성일 2022-06-10
콘텐츠
영역
Button
인생네컷
오리지널 프레임
다음
3
1
4,000원
포컷카페
한정판 프레임
4,000원
콜라보 프레임
5,000원
2

58
58
Description
1
프레임에 표시 될 사진 컷 수 선택
선택지에 따라 2번에서 제공될 프레임 디자인 달라짐
**제한시간 종료 시 4CUT으로 자동 선택
2
컷 수 별 프레임 디자인 제공
**해당 선택지에 따라 최종 출력물의 형태가 달라짐
**제한시간 종료 시 가장 좌측의 프레임으로 자동 선택
3
버튼 탭 시 이전 화면(프레임 선택)으로 이동
*이전 화면으로 이동 시 선택지는 초기화 됨
4
버튼 탭 시 출력될 사진 형태 선택 페이지로 이동
*1번, 2번 미 선택 시 비활성화
Ver.1.0
화면 경로 프레임 최초작성일 2022-06-10
프레임을 선택해주세요
NN:NN
58
콘텐츠
영역
Button
다음
2
이전
1
원하는 프레임 컷 수를 선택하세요
3 4
4CUT 6CUT 8CUT
3CUT

59
Description
1
출력할 사진 수량 선택
**제한시간 종료 시 2장으로 자동 선택
2
프레임 배경 상세 디자인 선택
2-1 배경이 입혀진 프레임 목업 이미지
*2-2에서 선택한 디자인에 따라 계속하여 변경
2-2 프레임 배경 상세 디자인 썸네일로 제공
*선택 시 배경 테두리를 통해 선택 됨을 표시
*제한시간 종료 시 1번 배경으로 자동 선택
3
버튼 탭 시 이전 화면(프레임 선택)으로 이동
*이전 화면으로 이동 시 선택지는 초기화 됨
4
버튼 탭 시 출력될 사진 형태 선택 페이지로 이동
*1번, 2번 미 선택 시 비활성화
Ver.1.0
화면 경로 출력 형태 최초작성일 2022-06-10
출력될 사진형태를 선택해주세요
NN:NN
콘텐츠
영역
Button
다음
2
이전
사진 수량을 선택하세요
2장 3장 4장 5장 6장 7장 8장
배경을 골라주세요
1
3 4
2-1
2-2

60
60
Description
1
탭 시 결제 페이지로 이동
리모콘 조작을 통해 사진 촬영 가능하며, 장당 촬영
제한 시간 20초
*총 8장 촬영 가능, 재 촬영 불가
2
탭 시 결제 페이지로 이동
리모콘 조작 없이 10초에 한 장씩 자동 촬영
*총 8장 촬영 가능, 재 촬영 1회 가능
**제한시간 종료 시 ‘기존 자동촬영’으로 자동 선택
3
버튼 탭 시 이전 화면(출력될 사진 형태 선택 페이지)
으로 이동
Ver.1.0
화면 경로 촬영방법 최초작성일 2022-06-10
촬영방법을 선택해주세요
NN:NN
콘텐츠
영역
Button
이전
2
1
기존 자동촬영
10초 뒤 자동촬영 됩니다!
리모콘 촬영
내가 원하는 타이밍에 촬영하세요!
3

61
61
Description
Ver.1.0
화면 경로 결제방법 최초작성일 2022-06-10
결제방법을 선택해주세요
NN:NN
콘텐츠
영역
Button
이전
카드 결제
현금 결제
2
1
3
1
탭 시 현금 결제 가능
기기의 현금 투입구가 빛나며 현금 투입 가능
*투입된 현금 금액 화면에 표시
**제한시간 종료 시 촬영의사 없는 것으로 간주하고
자동 취소
2
탭 시 카드 결제 가능
기기의 카드 투입구가 빛나며 카드 결제 가능
*’결제 완료‘ 및 ‘카드를 빼주세요’문구 제공
**제한시간 종료 시 촬영의사 없는 것으로 간주하고
자동 취소
3 버튼 탭 시 이전 화면(촬영방법 선택 페이지)로 이동

62
62
Description
1
출력물 미리보기 화면
미리 선택한 프레임 속에 2번에서 선택한 사진이
들어간 형태
2
촬영된 사진 8장 중 출력할 사진 4장 선택
선택한 사진은 테두리를 통해 표시되며 1번에서
미리보기 가능
*제한시간 종료 시 상단 4개 사진으로 자동 선택
3
QR코드 삽입 버튼
버튼 선택 시 출력물에 QR코드 삽입
*QR코드 스캔 시 즉석사진 촬영 모습이 담긴 영상 확인
및 다운로드 가능, 출력된 네컷사진 다운로드 가능
4 버튼 탭 시 다음 화면(출력 및 편집 방법 페이지)로 이동
Ver.1.0
화면 경로 출력할 사진선택 최초작성일 2022-06-10
사진을 선택하세요
NN:NN
콘텐츠
영역
Button
다음
4
1
LOGO QR
QR코드 선택
2
3

63
63
Description
1
탭 시 키오스크에 부착된 프린터기를 통해 사진 출력
*화면 ID APP_03_10으로 이동
2
탭 시 화면 ID APP_03_09_1로 이동
*현재 선택 가능한 테이블이 없을 경우 버튼 비활성화
3 버튼 탭 시 다음 화면(출력 사진 선택 페이지)로 이동
Ver.1.0
화면 경로 출력 및 편집 방법 최초작성일 2022-06-10
출력 및 편집방법을 선택하세요
NN:NN
콘텐츠
영역
Button
카페 좌석에서 사진을 꾸미고 바로 출력해보세요!
기존의 방식대로 지금 바로 출력할 수 있어요!
2
1
이전
3

64
테이블 이용 가능 인원은 최대 4명입니다.
64
Description
Ver.1.0
화면 명 포컷카페 포토부스 화면 ID APP_03_09_1
화면 경로 테이블 선택 최초작성일 2022-06-10
이동할 테이블을 선택해주세요
콘텐츠
영역
Button
다음
이전
1
선택가능
이용중
예약좌석
선택
ß 포토부스
2
9
1
2 000님
3
4 000님
5 000님
6
7
8
10
11
12
000님
13
선택 테이블
9번
~HH:MM까지 이용 가능
현재 테이블을 이용중이라면,
이용중인 테이블을 선택해주세요!
3 4
1
미디어테이블 좌석 선택 화면
이용 가능한 테이블을 선택하여 즉시 사용 가능
*선택, 선택 가능, 이용 중, 예약 좌석을 그래픽을 통해
구분하여 표시
**이용중인 좌석일 경우, 예약자 명(닉네임) 표기
***미디어테이블 이용중인 고객일 경우, 현재 이용중인
테이블 선택 후 본인 인증하여 해당 기능 사용 가능
(APP_03_09_2 화면 참고)
2
선택한 테이블 및 주의사항 안내 제공
선택한 테이블 이용 가능한 시간 표시
*선택한 테이블 없을 경우 [테이블을 선택해주세요]
문구 표기
3 버튼 탭 시 이전 화면(출력 및 편집방법 페이지)로 이동
4 버튼 탭 시 프로세스 완료 화면으로 이동

65
테이블 이용 가능 인원은 최대 4명입니다.
65
Description
1
이용중인 좌석 선택 시 alert 표시되며
배경 dimmed처리
2 버튼 탭 시 alert화면 제거, 테이블 선택 페이지로 이동
3
숫자 버튼을 통해 핸드폰 번호 입력 가능
선택한 숫자 즉시 표시
4
이용 중인 좌석의 고객의 핸드폰 번호와 일치할 경우,
버튼 탭 시 이용 종료 화면으로 이동
*번호가 다를 경우 alert화면 붉은색 배경으로 변경
Ver.1.0
화면 명 포컷카페 포토부스 화면 ID APP_03_09_2
화면 경로 테이블 선택>본인인증 최초작성일 2022-06-10
이동할 테이블을 선택해주세요
콘텐츠
영역
Button
다음
이전
선택가능
이용중
예약좌석
선택
ß 포토부스
9
1
2 000님
3
4 000님
5 000님
6
7
8
10
11
12
000님
13
선택 테이블
9번
~HH:MM까지 이용 가능
현재 테이블을 이용중이라면,
이용중인 테이블을 선택해주세요!
000님 본인이신가요?
핸드폰 번호를 입력해주세요
확인
- -
취소
0 1 2 3 4
5 6 7 8 9 지우기
010
1
2
2
4

66
66
Description
1
사진 출력 안내 화면, 출력 후 대기화면으로 변경
1-1 콜라보레이션 홍보 영상, 포컷카페 홍보 영상 제공
1-2 포컷카페 APP다운로드 바로가기 QR코드 제공
2
데이터 전송 안내 화면, 10초 뒤 대기화면으로 변경
2-1 카페 약도를 통해 현재 위치와 테이블 위치 표시
2-2 포컷카페 APP다운로드 바로가기 QR코드 제공
콘텐츠
영역
Ver.1.0
화면 경로 이용 종료 최초작성일 2022-06-10
사진이 출력중입니다
15초-20초 정도 기다려주세요. 왼쪽 아래 출력구에서 확인하세요
QR
포컷카페 APP
바로가기
N번 테이블로 사진이 이동하고 있습니다
테이블로 이동하여 사진 꾸미기를 진행하세요
QR
포컷카페 APP
바로가기
1 2
1-2 2-2
1-1
2-1

인생네컷이 선사하는 오늘의 맛! 포컷카페
iOS & Media table 전용 애플리케이션 스토리보드
End of document.
Date.2022.05.29 ‒ 2022.06.14
Ver.1.0

2022년 1학기 계원대 4CUT CAFE

Recommended

Recommended

More Related Content

Similar to 2022년 1학기 계원대 4CUT CAFE

Similar to 2022년 1학기 계원대 4CUT CAFE (20)

More from Artcoon

More from Artcoon (20)

2022년 1학기 계원대 4CUT CAFE