• Project Object
• 영어첨삭 서비스 MVP 개발
• 1월 중 MVP 테스트
• Project Schedule
• 2019.11.20 ~ 2020.01.31
• 2019.11.25 킥오프
• 2019.11.24 ~ 2019.12.15 디자인/마크업
• 2019.11.24 ~ 2020.01.20 개발
• 2020.01.20 ~ 2020.01.31 QA
• 2020.02.01 베타 테스트 & 릴리즈

Project Brief

• Execution Plan

Spec

문서

​

약관/정책

타겟층 Needs 파악�주요 기능 scope 정의

​

와이어

프레임

1차 디자인

Mockup

Markup

스캐폴딩

FE/BE

QA

베타

릴리즈

테스트

Screen Flow & Doc Contents

Spec

1. 메인
1. Page
2. Section
3. Section
2. 클래스
• Page
• Page
3. 마이 클래스
• Page
• Page
4. 구매
• Page
• Page
5. 로그인
• Page
• Page
6. 계정 관리
• ​
7. 구매 내역
8. 첨삭 요청
9. 문의 하기
10. 설정
11. 네비게이션
12. 알림

Screen Flow & Doc Contents

Spec

• 메인
• Page
• Section
• Section
• 클래스
• Page
• Page
• 마이 클래스
• Page
• Page
• 구매
• Page
• Page
• 로그인
• Page
• Page
• 계정 관리
• ​
• 구매 내역
• 첨삭 요청
• 문의 하기
• 설정
• 네비게이션
• 알림

A.0 네비게이션 / 알림

A. 수강생 모드

A.0.1 Mobile 네비게이션 바 / Modal_메뉴

네비게이션 바 - 로그아웃 상태

네비게이션 바 - 로그인 상태

슬라이드 열기

슬라이드 닫기

네비게이션 바 - 로그아웃 상태

네비게이션 바 - 로그인 상태

(첨삭 서비스)

문의/제안

홈

마이 클래스

구매 내역

(첨삭 서비스)

문의/제안

홈

10. Notifications

NAV.

page_알림

CMP_알림 (확인 전)

• 첨삭 등록 알림
• 프로덕트 내 알림 + SMS or 알림톡

TXT_시간 정보

CMP_알림 (확인 전)

CMP_알림 (확인 후)

CMP_알림 (확인 후)

CMP_알림 (확인 후)

CMP_알림 (확인 후)

CMP_알림 (확인 후)

TXT_알림 내용

IMG_선생님 프로필

Icon_확인 전

IMG_선생님 프로필

Icon_확인 후

CMP_알림(확인 전)

CMP_알림(확인 후)

TXT_미션 정보

TXT_시간 정보

TXT_알림 내용

TXT_미션 정보

A.1 메인

A.1.1 Mobile 메인

마이 클래스 없음

마이 클래스 있음

Section_배너

Section_마이 클래스 리스트

Section_클래스 리스트

Section_클래스 리스트

Component_마이 클래스 (미션 수행 전)

Component_마이 클래스 (미션 수행 전)

Section_배너

A.2 마이클래스 리스트

A.2.1 Mobile 마이 클래스 리스트

A.3 마이클래스 상세

Section_마이 클래스 정보

A.3.1 Mobile 마이 클래스 상세

Section_미션 리스트

Section_마이 클래스 정보

A.3.1 Mobile 마이 클래스 상세

Section_미션 리스트

Section_마이 클래스 정보

수행 전(당일)

실패

성공

Component_미션

수행 후(당일)

2.3 Mobile Page_캘린더

날짜 구분

A. 전월 또는 익월 B. 금월 C. 금일

​

미션 구분

a. 미션에 해당하는 기간 b. 미션에 해당하지 않는 기간

​

미션 수행 여부

1. 미션 수행, 첨삭 전 2. 미션 수행, 첨삭 후(=성공)

3. 미션 수행하지 않음(=실패): 디자인 없음

​

선택 상태

​

​

​

Section_캘린더

Section_미션 정보

날짜 선택 시 미션 정보

해당 날짜 정보로 변경

Default - 금일

Component_날짜: 상태 구분

a

b

A

B

C

선택상태

2

1

A.4 미션

2.5 Mobile_Page_미션 제출, 피드백 플로

Component_작문 주제

Component_작문 입력 영역

BTN_제출하기

입력 전

한 글자 이상 입력 - 버튼 활성

제출 완료 / 수정 가능

첨삭 완료 / 수정 불가

CMP_안내

CMP_첨삭

• 익일 기준 06시 am(KST) 기준으로 미션 종료
• 선생님이 어드민에서 각 문장별 피드백 입력시 첨삭 완료

​

A.5 복습

(작성 중) 복습

(참고) CMP_첨삭

TXT(1)

TXT(2)

(Full page) Modal_복습(문제)

BTN_닫기

TXT_클래스 이름

CMP_문제

: 내가 작성했던 문장 = TXT(1)

BTN_정답 확인

Text Field

캐릭터 카운트

(Full page) Modal_복습(정답)

BTN_닫기

TXT_클래스 이름

CMP_문제

: 내가 작성했던 문장 = TXT(1)

BTN_복습 끝내기

CMP_정답

: 첨삭 받은 문장 = TXT(2)

CMP_복습 제출 내용

BTN_복습 더 하기

닫기

Reset

A.6 클래스 상세

3.1 Mobile_Page_클래스 상세 정보

TXT_선생님 소개 문구

TXT_클래스 이름

IMG_선생님 프로필

TXT_선생님 이름

CMP_신청 현황

CMP_클래스 태그

Section_클래스 정보

Section_클래스 상세 정보

스크롤 다운 시(기준: 클래스 상세 정보 영역 Y 56px 이하), 스티키 버튼으로 스크린 하단에 노출

A.7 클래스 결제 / 결제 완료

3.2 Mobile_Page_신청(결제)

CMP_신청 클래스 정보

CMP_결제 정보

CMP_약관 동의

BTN_결제하기

CMP_결제 정보

Radio BTN_신용카드

Radio BTN_토스

Radio BTN_네이버페이

Radio BTN_카카오페이

CMP_약관동의

Checkbox_개인정보 처리 방침

Checkbox_서비스 이용 약관

Checkbox_전체 동의

* 아임포트 PG 연동

- 이니시스, 카카오, 네이버

약관 동의 여부

Y

N

(작성 중) Modal_구매 완료

TXT_클래스 이름

CMP_구매 정보

Page_구매 완료

BTN_공부하러 가기

Page_메인으로 이동

가격, 사용 기간, 결제 수단 등

A.8 로그인 / 비밀번호 재설정

Components

​

Title

​

Text field_이메일

• (실시간) Format check
• ‘@’, ‘.’ 있는지 확인
• ‘@’, ‘.’외의 Special character

​

Text field_비밀번호

• (실시간) Format check
• 최소 6글자 (문자, 숫자, 특수문자 가능)

​

Checkbox_자동 로그인

​

Button_로그인

• 이메일, 비밀번호 Validation
• 성공 시 Main page로 이동

​

Button_회원가입

• 회원가입 페이지로 이동

​

Button_비밀번호 찾기

• 비밀번호 찾기 모달 노출

4.1 Mobile_Page_로그인

TXT_타이틀

Text field_이메일

Button_비밀번호 재설정 링크 발송

modal_비밀번호 재설정

TXT

Button_닫기

Text field_이메일

Text field_비밀번호

Checkbox_자동 로그인

Button_비밀번호 재설정

Button_회원가입

Button_로그인

A.9 회원가입

4.2 Mobile_Page_회원가입 플로

Components

Text field_이름

• (실시간) 중복 확인

Text field_이메일

• (실시간) Format check
• ‘@’, ‘.’ 있는지 확인
• ‘@’, ‘.’외의 Special character

​

Text field_비밀번호

• (실시간) Format check
• 최소 6글자 (문자, 숫자, 특수문자 가능)

Text field_비밀번호 확인

• (실시간) Format check
• 최소 6글자 (문자, 숫자, 특수문자 가능)
• 비밀번호와 같은 input data인지

​

Text field_휴대폰 번호

• 휴대폰 인증 버튼 클릭/인증 번호 발송 성공 시 disabled 상태로 전환
• 인증 번호 발송 3분 경과 후 다시 editable

​

Button_휴대폰 인증

• 휴대폰 번호 Validation
• 인증 번호 발송
• 발송 성공 후 hide

​

Text field_인증 번호

• 3분 경과 후 disabled

​

Button_재 전송

• 휴대폰 번호 Validation
• 인증 번호 발송

Button_인증

• 인증 번호 Validation
• 성공 시 가입 완료 모달

Text field_이름

Text field_이메일

Checkbox_약관 전체

Button_다음

Text field_비밀번호

Text field_비밀번호 확인

Text field_휴대폰 번호

Button_인증 번호 전송

Button_인증 완료(가입완료)

Button_인증 번호 재 전송

modal_가입 완료

Text field_휴대폰 번호 (disabled)

Text field_인증 번호

CMP_timer

4.2 Mobile_Page_회원가입

Components

​

Text field_휴대폰 번호

• 휴대폰 인증 버튼 클릭/인증 번호 발송 성공 시 disabled 상태로 전환
• 인증 번호 발송 3분 경과 후 다시 editable

​

Button_휴대폰 인증

• 휴대폰 번호 Validation
• 인증 번호 발송
• 발송 성공 후 hide

​

Text field_인증 번호

• 3분 경과 후 disabled

​

Button_재 전송

• 휴대폰 번호 Validation
• 인증 번호 발송

Button_인증

• 인증 번호 Validation
• 성공 시 가입 완료 모달

Text field_휴대폰 번호

modal_가입 완료

A.10 계정 정보 / 구매 내역 / 환불 신청

5.1 Mobile_Page_계정 정보

CMP_프로필 이미지

TXT_이름

BTN_수정

TXT_이메일

BTN_비밀번호 변경

BTN_로그아웃

BTN_수정

TXT_타이틀

Text field_이메일

BTN_취소

BTN_저장

TXT_타이틀

Text field_이름

BTN_취소

BTN_저장

5.2 Mobile_Page_구매 내역

BTN_환불신청

TXT_구매시간

TXT_구매 클래스명

TXT_결제수단/금액

Text field_이메일

BTN_환불 요청

A.11 첨삭 서비스

(작성 중) 첨삭 서비스

NAV.

Page_첨삭 서비스

TXT_타이틀

Button_신청하기

Text area_내용

Alert 신청 완료

💡

Note : 기획 진행 중

Dropdown_첨삭 유형 선택

CMP_글자 수 카운트

TXT_이메일

A.12 문의 / 제안

9. CS

NAV.

Page_문의

TXT_타이틀

Button_문의하기

Text area_내용

Alert 문의 완료

TXT_이메일

Last Page