(개정) 알면 알수록 어려운 서비스 기획 뽀개기!

알면 알수록 어려운 서비스 기획 뽀개기!

18년 차, IT서비스 기획자이자 프로덕트 매니저
법학과 행정학 전공
온라인 광고 AE로 IT업계 입문
버디버디, 다날, 패스트캠퍼스 등을 거쳐 17번째 회사 재직 중
그러나 단, 한번도 사수가 없었음
필리핀과 중국에서 2번의 해외 근무 경력
약 3년 간의 스타트업 창업 경험
다양한 서비스 및 플랫폼 기획/구축/운영 경험
패스트캠퍼스를 비롯 다수 강의 경력
유세균무기
@germweapon
https://germweapon.tistory.com

= IT서비스 기획자는 잡부인가?;;;

서비스 기획자 Product manager Product owner
VS. VS.
IT서비스 기획자란?
서비스 기획자를 지칭하는 표현은 많은데,
그 차이가 뭔지 회사도, 서비스 기획자도 정확히 모른다! :(
그 역할과 차이를 정확하게 구분하실 수 있는 분은 소오오오오오오오오오~온~!!!

한국형 IT서비스 기획자
등장 배경 IT산업의 등장 IT산업의 성장과 고도화 스타트업의 등장과 Waterfall의 실패 스타트업의 성장과 Agile의 한계
개발 방법론 - Waterfall
Agile & Scrum
(2001년 애자일 선언)
비즈니스 및 의사결정에는 Waterfall
개발에는 Agile
기획자 R&R All in One A - Z 프로덕트 매니징 Mini CEO 의사결정
기획자 명칭 Webmaster 서비스 기획자 Product Manager Product Owner
1990년 대
포탈 시대 모바일 시대
(2009년 11월 28일)
2010년 대 2020년 대
게시판 시대 포스트 코로나 시대
수직적이고 폐쇄적인 한국의 기업 문화와
그 궤를 함께하며 성장한 한국형 서비스 기획자

서비스 기획자의 위기
끊임없이 등장하는 기획자 무용론과 잡부로의 전락
기획자 무용론을 이야기하는 사람들을 살펴보면... ;)

서비스 기획이란?
사용자 서비스 기획자 프로젝트 구성원
IT서비스 기획이란
예쁘고 사용하기 편한 웹사이트나 모바일 앱 등의 IT서비스를 디자인하고 개발하기 위해 와이어프레임을 포함한 스토리보드(일명 기획서)를 작성하는 것만이 아니라,
사람들이 겪는 특정 문제나 불편을 IT기술을 통해 해결(문제 인식 및 목표 정의)하기 위해
현행법과 정책을 준수하고 환경과 인프라, 경쟁사 등을 고려(시장조사 및 벤치마킹)하며
인력이나 일정, 예상 등의 가용한 리소스 내에서 서비스 정책을 만들고(정책 결정 및 요구사항 정의)
이를 실 서비스로 구현하는 일련의 과정(스토리보드 작성 등)이며,
서비스 정책의 반영이나 서비스를 제공하는 단말기와 OS 등의 서비스 환경에서 사용자들이 겪을 수 있는 불편함을 최소화하기 위해
이해하기 쉽고 사용하기 편한 프로세스와 플로우, UIUX 등을 고민하는 것이다.
그러다 보니 단말기나 OS, 브라우저 등 IT기술에 대한 이해와 함께 IT환경 하에서 서비스를 구현 및 제공하다 보니 디자인과 개발에 대한 지식까지 필요하다.
때문에 서비스 정책 및 기획서 등을 작성한 기획자가 디자이너, 개발자 등을 포함한 동료들에게 기획의 의도를 설명하고 공감대를 형성하며 공통의 목표를 설정하기 위해 커뮤니케이
션을 많이 할 수밖에 없다.
서비스 기획은 디자인과 개발은 물론이거니와 역사와 문화, 철학, 법, 정책, 환경, 인프라, 생태계, 뇌과학, 심리학 등의 융합의 결과물이자 나아가 리소스와 일정, 동료들의 역량과 수
준, 고도화 및 확장성, 데이터의 수집과 처리 및 분석, 사회와 업계에 미치는 영향까지 고려해야 하는 통섭의 영역인 것이다.
그런데 여기서 끝이 아니다. :(

서비스 기획이란?
서비스 오픈 이후에도 서비스 기획의 연장선 상에서 서비스를 고도화하겠지만 서비스를 운영하면서 쌓이는 사용자 목소리(VOC)나 데이터 등을 분석하며 서비스를 개선 및 성장시켜
나가는 역량이 요구된다.
그러다 보니 다시금 서비스의 문제를 정의하고 전략과 가설을 세워 A/B 테스트나 Funnel 분석 등의 실험을 진행하며 데이터를 분석하고 이를 통해 도출한 인사이트를 서비스에 반영
하며 서비스의 성장을 이끄는 그로스해킹 역량이 강조된다. 이것이 바로 데이터-드리븐(Data-Driven Planning, DDP) 기획이다.
데이터 분석이야 데이터 분석가나 데이터 사이언티스트들이 해줄 수도 있겠지만 필요한 문제를 정의하고 가설을 세우고 도출된 인사이트를 서비스에 반영하기 위한 정책과 기획서를
만드는 일련의 작업은 결국 또 기획자가 해야 하기 때문이다.
결국 기획자는 사람에 대한 관심과 호기심, 공감능력으로 사용자를 대변하고 합리성과 올바른 가치관, 직업윤리를 바탕으로 판단과 선택을 하며 프로덕트를 만들고 성장시키기 위해 동
료들과 협의하고 설득하는 커뮤니케이션 역량이 중요한 것이다.
때문에 꼭 컴퓨터 공학이나 디자인 등 IT 관련 학과를 졸업하지 않더라도 역사와 문화, 철학, 법, 정책, 사회, 생태계 등에 관심이 많고 이해도가 높은 법/사회/인문계열 전공자들에게도
많은 기회가 열려있는 직군이다.

문제 인식
(목표 정의)
시장조사
& 벤치마킹
서비스 운영
(지표)
정책결정
(요구사항 정의)
서비스 기획
커뮤니케이션
& 매니징
QA
매뉴얼
& 가이드 작성
그로스 해킹 Etc.
IT서비스 기획자의 역할
설마 이것이 끝이라고 생각했다면...
어쨌건 Welcome to IT World! ;)
정책서 및 요구사항 정의서 기획서(스토리보드)
매뉴얼 분석 환경 설계 매뉴얼
상위 기획
- 사업계획 & 전략기획
- 환경 및 경쟁사 분석
- 페르소나 및 유저 저니 맵
칸반보드/회의록
A/B 테스트 결과 리포트
지표 통계 리포트
버그리포트(칸반보드)
제안요청서(RFP)
테스트 시나리오

IT서비스 기획자의 역할
서비스 기획자는
때론 사용자의 눈으로 사물을 바라보며 사용자를 대변해야 하고
때론 개발자와 디자이너, 경영진과 사용자, 광고팀과 운영팀 사이에서 합리적이고 논리적인 판단을 해야 하며
때론 리서처가 되어 시장을 조사하고 분석해야 하며
때론 기획자, 설계자, 디자이너가 되어 와이어프레임을 그려야 하고
때론 사업가가 되어 비즈니스 모델을 설계해야 하며
때론 법률가가 되어 법규를 살펴보고 정책을 결정해야 하며
때론 사용자와 개발자, 디자이너의 입장에서 의사를 결정하고 커뮤니케이션을 하며 협의를 진행해야 하며
때론 카피라이터가 되어 사용자가 이해하기 쉽고 읽기 쉬운 문장과 문구를 작성해야 하며
때론 선생님이 되어 내가 기획한 내용을 설명하고 이해시켜야 하며
때론 문서를 작성하고 또 작성하고 또 작성하고 또 작성하며 내가 인간인지 타자기인지 헷갈려야 하며
때론 기획서를 작성할 수 없는 마케터와 운영자, 고객지원부서를 대신하여 기획서를 작성하기도 하며
때론 니 머릿속에서 나온 거니 네가 가장 잘 알지 않냐며 테스트도 해야 하고
때론 우리 회사엔 그로스해커나 데이터분석가가 없으니 툴이라도 써서 데이터 분석이란 걸 좀 해보란 이야기를 들어야 하며
때론 이게 어느 파트의 업무인지 구분이 모호해 아무도 신경을 쓰지 않아 프로덕트의 오너로서 처리해야 하는 등
정말 말 그대로 코딩과 디자인을 제외한 모든 업무를 도맡아 해야 한다.

R&R마저 기획해야 하는 기획자
회사마다 조직마다 서비스 기획자에게 요구하는 능력과 자질, 그리고 담당 업무가 상이하다 보니
사실 기획자는 물론이거니와 협업을 하는 동료조차 기획자가 하는 일을 한 문장으로 정의하지 못한다.
때문에 중요한 건 서비스 기획자로서의 업무나 역할, 특정 능력보다는
기획자의 상을 직접 만들어갈 수 있는 주도적이고 능동적인 자세다.
결국 기획자는 상황을 탓하기보단 R&R마저도 자신이 기획을 해야 한다.
그게 기획자로서의 운명이자 숙명이다.

사용자의 대변인 가치 판단 커뮤니케이션
사람에 대한
관심과 호기심,
공감 능력
합리성,
올바른 가치관과
직업윤리
논리력,
제너럴리스트
이자
스페셜리스트
IT서비스 기획자에게 필요한 자질과 역량
다양한 경험과 지식, 정보

익숙함을 경계해야 하는 기획자
사용자의 Pain Point를 분석하고 공감하며,
보다 쉽고 편한 서비스와 UI/UX를 기획하며,
서비스를 끊임없이 개선하고 혁신해야 하는
서비스 기획자는 그 익숙함을 항상 경계해야 한다.

- Linkedin 소프트웨어 개발자, 박기상 님
무능한 IT서비스 기획자라 할지라도...

기획자의 파워는 어디서 나올까?
모든 사용자들아!
부탁한다!
제발 부탁이니 파워를
나눠줘!!
그러나 현실... Shit Umbrella!

사업계획 또는 전략기획
1. 기업의 미션과 비전
2. 내부 현황 분석
3. 외부 환경 분석
4. 핵심 사업 전략
5. 세부 추진계획
6. 사업 추정 및 재무계획 등
언제나 사업계획은 계획대로 되지 않는다.
그럼에도 불구하고 사업계획을 하는 이유는 사업계획이 사업 활동의 기준이 되고,
계획대로 되지 않았을 때 되지 않는 이유를 분석하기 위함이다.

디자인씽킹
디자인씽킹은 1990년대 세계적인 디자인 기업 아이디오(IDEO)가 대중화하였으며 디자이너의 아이디어와 방법론에서 영감을 받은 것으로,
‘어떻게 고객의 마음과 공감하여 Pain Point를 찾아내고, 이를 해결하기 위해 혁신적인 아이디어를 모색하고, 빠르게 테스트해보는 일련의 프로세스를 이야기한다.

디자인씽킹 vs. 린스타트업 vs. 애자일

데스크 리서치
유저 리서치
(설문조사)
페르소나 생성 유저 저니 맵 작성
스타트업에서의 상위 기획 과정
목표 설정 및
가설 수립
MVP 개발
VOC
지표
유저 테스트
신규 프로젝트
고도화 프로젝트
그리고 가장 중요한 건 결과 보고서 작성 및 공유,
그리고 이를 통한 공감대 형성 및 동기 부여

비즈니스 모델 캔버스(Business Model Canvas) 작성
비즈니스 모델이란 하나의 조직이 어떻게 가치를 포착하고 창조하고 전파하는지 그 방법을 논리적으로 설명한 것이고,
비즈니스에 포함되어야 하는 9개의 주요 사업 요소를 도식화한 것이 ‘비즈니스 모델 캔버스’입니다.
https://cnvs.online/en/w/-MNkvpfHVCvEv2O5x6AS
가치생산 가치전달

페르소나(Persona) 찾기
어떤 제품 혹은 서비스를 사용할 만한 목표 인구 집단 안에 있는 다양한 사용자 유형들을 대표하는 가상의 인물을 구체화하는 것.

페르소나(Persona) 찾기
등급 등급이 낮다 등급이 높다
주 평균 공부 시간
주 평균 수학공부
시간이 적다
주 평균 수학 공부
시간이 많다
선호 공부 스타일
타인이 가르쳐주는
학습을 선호한다.
혼자 스스로하는
학습을 선호한다
오답노트 필요성 오답노트 작성이 필요 없다 오답노트 작성이 필요하다
인터넷 사용가능 시간 사용가능 시간이 적다 사용가능 시간이 많다
디지털기기 친숙도
디지털기기에
친숙하지 않다
디지털기기에 친숙하다
사용 문제지 수 풀고 있는 문제지가 적다 풀고 있는 문제지가 많다
학습 주도성 학습 주도성이 낮다 학습 주도성이 높다
x5
x5
x3
x2
x2
x2
x2
x2 x2
x3
x3
x2
x2
x2
x2
x3

고객 여정 지도(Customer Journey Map) 작성
고객 여정 지도란 고객이 서비스를 경험하게 되는 과정을 시각화한 것으로,
고객이 처음 정보를 탐색하는 단계부터 서비스 제공이 완료되는 순간까지를 그림이나 사진, 도표 등으로 시각화하는 방식.
이 과정을 통해서 고객이 서비스를 어떻게 받아들이고 사용하는지를 고객관점에서 파악할 수 있고 새로운 기회나 문제점을 발견할 수 있음.

시장
- 경쟁사 분석(1~3위)
- 대체 시장 분석
감정 곡선
(점수화, 1~10점)
인입 전(마케터) 인입 후(기획자)
고객 여정 고객 여정(Critical Path)
Touchpoint
What’s happening
Source of info
화면 캡쳐 권장
SWOT 분석 (주요 지표 병기)
자사 서비스
기회 영역
(시장의 Pain Point)
중요도(별점)
To do
(솔루션)
인입 후 전환율(CVR) 표시
구간마다 비용 측정(사용자가 지불하는 돈, 시간, 노력)을 통해 정량적 분석 필요

MVP(Minimum Viable Product)와 PMF(Product Market Fit)
최소 기능 제품(MVP, Minimum Viable Product)이란 고객에게 제품의 가치를 검증하기 위해 최소한의 기능을 구현한 제품을 말하며,
MVP는 PMF를 찾기 위한 과정이다.
MVP = 최소한의 기능을 구현한 제품 ≠ 낮은 완성도와 퀄리티의 제품
도대체 언제까지 MVP를 제공할 것인가?

과제 진행
자신이 입사를 원하거나 또는 재직 중인 도메인(기업)과 관련하여
1) 비즈니스 모델 캔버스 작성
2) 페르소나 생성 (Critical Characteristics 작성)
3) 고객 여정 지도 작성

역사 법 정책
서비스 기획 시 필요한 지식과 정보
서비스 기획이란 역사, 법, 정책, 인프라, 생태계, 디자인, 개발, 인지과학 등의 집합의 결과물이다.
때문에 기획을 통섭의 예술이라고 하는 것이다.
인프라 생태계
디자인 개발 인지과학 철학 Etc.

왜 역사와 문화, 생태계를 고려해야 하는가?
중국, QR코드 성공의 이유 중국 및 동남아, 듀얼심 스마트폰 확산의 이유 일본, 핀테크의 늦은 성장과 블록체인 성공의 이유

관련 법령
외부 환경
(생태계)
외부 환경
(경쟁사)
서비스 정책 작성
불가항력적인 요소를 우선 고려하며 정책을 결정하고 문서로 작성,
작성된 정책 문서를 공유하며 합의를 이룰 때까지 수정 및 피드백을 반복한다.
내부 환경
및 리소스
정책서
=
구분 설명
관련 법령 국내법은 대륙법 계통의 열거주의로 대다수 법에서 정하고 있기 때문에 서비스 기획 시 관련 법령을 먼저 찾아보는 것이 중요함
산업 생태계 대기업이 아니고서야 산업 생태계를 단숨에 바꾸기 어렵기 때문에 산업 생태계를 살핌
경쟁사 경쟁사를 살펴보며 Pain point를 분석하고, 관련 법령 및 타사 정책을 살피고, 경쟁력 등을 확보
내부 환경 및 리소스 말하지 않아도 알아요... OTL

법령 및 직업윤리 교육의 필요성
IT서비스 기획자에게 법령 및 직업윤리 교육이 필요한 이유는
서비스 기획이 법의 테두리 안에서 현행법을 준수하며 수많은 정책을 만들고 가치 판단을 해야 하는 과정의 연속이기 때문
구분 설명
인터넷 산업 진흥·촉진 관련
정보통신산업 진흥법, 전자문서 및 전자거래 기본법, 전자금융거래법, 전자무역 촉진에 관한 법률, 콘텐츠산업 진흥법, 이러닝(전자학습)산업발전법, 게임산업 진흥에 관한 법률, 신문 등
의 진흥에 관한 법률, 인터넷 멀티미디어 방송사업법, 위치정보의 보호 및 이용 등에 관한 법률, 유비쿼터스도시의 건설 등에 관한 법률, 정보통신 진흥 및 융합 활성화 등에 관한 특별법, 공
공데이터의 제공 및 이용 활성화에 관한 법률 등
인터넷 서비스 기반 조성 관련
정보통신망 이용촉진 및 정보보호 등에 관한 법률, 전자서명법, 정보통신 진흥 및 융합 활성화 등에 관한 특별법, 전기통신사업법, 전기통신기본법, 인터넷주소자원에 관한 법률, 국가정보
화 기본법 등
인터넷 정보보호 관련 정보통신망 이용촉진 및 정보보호 등에 관한 법률, 정보통신기반 보호법, 전자정부법, 산업기술의 유출방지 및 보호에 관한 법률 등
인터넷 이용자보호 관련
정보통신망 이용촉진 및 정보보호 등에 관한 법률, 개인정보 보호법, 위치정보의 보호 및 이용 등에 관한 법률, 전자상거래 등에서의 소비자보호에 관한 법률, 소비자보호법, 약관의 규제에
관한 법률, 국가정보화 기본법, 통신비밀보호법, 신용정보의 이용 및 보호에 관한 법률, 저작권법, 전자정부법, 전자금융거래법, 특정 금융거래정보의 보고 및 이용 등에 관한 법률, 전기통
신금융사기 피해금 환급에 관한 특별법 등

관련 법령을 모르면...
불법 서비스를 기획하고,
불법 서비스를 개발하여,
불법적으로 운영하며 회사가 망한다.
내용 적용 대상 관련 법령
이용약관 등의 작성 약관 작성 시 약관의 규제에 관한 법률
개인정보의 보호와 관련된 여러 규정
: 개인정보의 수집 및 이용 동의, 수집 및 이용 제한, 관리 및 파기 방법 등
모든 온라인 서비스 운영 시
개인정보보호법
정보통신망 이용촉진 및 정보보호 등에 관한 법률
전자상거래 운영과 관련된 여러 규정
- 사이버몰의 운영, 소비자에 관한 정보의 이용, 통신판매업자의 신고, 청약
확인, 재화 등의 공급, 청약철회, 소비자 권익의 보호 등
전자상거래 운영 시 전자상거래 등에서의 소비자보호에 관한 법률
개인정보보호 관련 손해배상책임보험 또는 공제 가입
연간 매출액 5천만원 이상, 개인정보를 저장 및 관리하고 있는 사용자
수가 일 평균 1천명 이상
정보통신망 이용촉진 및 정보보호 등에 관한 법률 시행령 제 18조
2항(손해배상을 위한 보험 등 가입 대상자의 범위 및 기준 등)
(상품판매대금에 관한)이행보증보험 또는 에스크로 가입
상품의 배송 트랙킹이 되지 않거나 일정기간 내 상품이 제공되지 않는
경우
전자상거래 등에서의 소비자보호에 관한 법률 제 24조(소비자피해
보상보험계약 등)
상품 상세 페이지 내 상품 정보 고시 통신판매업자가 소비자에게 재화 등을 판매할 시 전자상거래 등에서의 상품 등의 정보제공에 관한 고시
잡지 발행 시 등록 및 신고, 관련 정보 고시
동일한 제호로 연 2회 이상 정기간행물(전자간행물 포함) 발행 시 등
록 및 신고 필요
잡지 등 정기간행물의 진흥에 관한 법률

정책서 작성 방법
모두가 관련 도메인 및 법령에 전문가가 아니기 때문에
1. 시장조사 및 벤치마킹 과정에서 경쟁사의 이용약관 및 개인정보취급방침, 서비스 정책 등을 읽으며 관련 법령을 모두 뽑아내고 해당 법령을 살펴봅니다.
2. 관련 법이 개정되었다는 뉴스와 기사를 찾아 읽습니다.
회원가입 회원탈퇴
회원가입 회원가입 회원가입

과제 진행
자신이 기획하고 싶은 서비스의 간단한 정책서를 작성해보고
기획서를 작성하면서 계속 업데이트하기

기획서 작성 시간과 프로젝트 기간과의 상관관계
대부분의 관리자들은 기획서 작성 시간이 길어지면 프로젝트 기간이 그만큼 늘어난다고 생각하지만 현실은...
물론 프로젝트 규모가 크고 기획자가 실력이 좋다는 전제 하다.

UI는 연습장에, UX는 프로토타이핑툴에

변동성과 확장성에 대한 고려

독자를 위한 배려
디자이너 퍼블리셔 개발자 기타 관련자

공통 기능(컴포넌트) 가이드 작성

정책과 프로세스, 플로우, 용어에 대한 정의

서비스 구현 (Design system)

버튼 내 텍스트(Label) 처리
배너 이미지
닫기
오늘은 그만보기
•••
로그아웃
로그아웃을 하시겠습니까?
취소 로그아웃
예, 시청합니다
재생 알림
노트 작성 시점을 바로 시청하시겠습니까?
-
‘아니요’ 선택 시, 해당 동영상의 맨 처음부터 재생됩니다.
아니요

버튼(Button)의 종류
버튼도 다 같은 버튼이 아니다! :(
구분 Tag 설명
링크 버튼 <a href=“”></a> 페이지 이동
실행 버튼 <button></button> 자바스크립트 실행
전송 버튼 <input type=“submit> 입력값을 서버에 전송

버튼 Disable 처리
인증번호 유효기간이 만료되었습니다. 인증번호를 재전송해주세요.
확인
휴대폰 번호
전송
1234 3:00
인증번호
확인
휴대폰 번호
전송
3:00
인증번호
휴대폰 인증 휴대폰 인증
010 - 3021 - 7152 010 - 3021 - 7152
닫기
건너뛰기
닫기
건너뛰기
버튼 Disable 처리 목적
제 3자에 대한 불편
SMS, 알림톡의 경우 발송 비용
서버 트래픽
보안
확인
휴대폰 번호 전송
닫기
확인
3:00
인증번호
건너뛰기
휴대폰 인증 휴대폰 인증
휴대폰 번호
010 - 3021 - 7152 전송
닫기
건너뛰기

버튼의 활용
구분 Single Select Multi Select 기타 설명
Check Box X O
Radio Button O X
Chip O O
Single/Multi Select 혼용으로 사용 가능
Multi Select로 구현 시에는 (전체) ON/OFF 칩 또는 (초기화) 버튼 제공 필요
Select Box O ▵
메뉴가 너무 많거나 Width값이 제한적인 경우 사용
UI에 따라 Multi Select로 사용 가능
20개씩
〈
Menu1
Menu1
Menu1
Menu2
Menu2
Menu2

링크(Link)의 종류
링크면 링크지, 링크에 무슨 종류가 있다는 거예요! :(
구분 설명 사용 예시
단순 링크(Simple Link) 웹사이트의 URL https://www.google.co.kr
딥 링크
(Deep Link)
Web Deep Link 웹사이트의 특정 페이지로 연결 https://www.google.co.kr/maps?hl=ko&tab=rl
URI Schemes
개발자에 의해 정의된 모바일 앱 내 맞춤 URI(Uniform Resource Identifier)
스킴
웹으로 치자면 http:// 또는 http:// 스킴과 같다고 보면 됨
앱이 설치되어 있지 않거나 두 개 이상의 앱이 동일한 URI를 사용할 경우 출동하
는 현상이 발생
앱 내 특정 페이지로 이동
다이렉트 딥링크(Direct Deep Link) ex) iOS의 유니버설 링크, Android의 앱 링크
앱이 설치되어 있는 경우, 앱 내 특정 페이지로 이동
앱이 설치되어 있지 않은 경우, 앱스토어 또는 구글 플레이 스토어로 이동
디퍼드 딥링크(Deferred Deep Link)
다이렉트 딥링크가 발전된 형태로 iOS, Android OS별로 따로 딥링크를 생성해
야 함
앱이 설치되어 있지 않은 경우, 앱스토어 또는 구글 플레이 스토어 이동 후
사용자가 앱을 설치 및 실행하면 앱 내 특정 페이지로 이동
동적 링크(Dynamic Link)
또는 원링크(One Link)라고 부르기
도 함
동적 링크로 다양한 플랫폼(Android, iOS, Web, Unity 등)에서 개발자가 원하
는 다양한 링크 연결이 가능
OS별로 구현해야 하는 디퍼드 딥링크와는 다름
ex) 구글의 Firebase에서 제공하는 Dynamic Link
https://www.youtube.com/watch?v=LvY1JMcrPF8
앱이 설치되어 있지 않은 경우, 앱스토어 또는 구글 플레이 스토어 이동 후
사용자가 앱을 설치 및 실행하면 앱 내 특정 페이지로 이동
모바일 웹에서 해당 앱이 설치되어 있지 않은 경우에도 웹의 특정 콘텐츠 페
이지(iOS, Android 설치 유도 페이지 등)로 연결이 가능함.
임베디드 링크(Embedded Link)
다른 웹사이트의 내용을 <embed>, <object>, <video>, <audio> 태그 등을 사
용하여 자신의 사이트에 불러와서 띄움
<embed>, <object>, <video>, <audio> 태그

인풋 박스 (Input Box)
Placeholder Message (Label)
Validation message
1) 기본 인풋 박스
2) 포커스 인 상태
Label
germ
3) 텍스트 입력 시 상태
Label
germ
4) 포커스 아웃 시 Valid 상태
Label
●●●m
3) 입력 텍스트 숨김 시
Label
germ
4) 포커스 아웃 시 Invalid 상태
Label
Placeholder massage
인풋 박스 구성요소
Label
Validation message
01 - -
카드번호
- - -
이메일
ge
ge@gmail.com
ge@naver.com
ge@daum.net
ge@nate.com
형식이 있는 인풋 박스의 Input Masking 처리

입력값의 유효성 체크
구분 체크 설명 사용 예시
형식 유효성
서버 통신 없이 클라이언트(자바스크립
트)에서 체크
서버 통신 없이 클라이언트(자바스크립트)에서 입력값의 자리수나 형식을 실시간 체크하여 인풋
박스 하단에 Validation message를 띄움
보통 인풋 박스에서 포커스 아웃 시 입력값을 실시간 체크
이메일 형식 체크
비밀번호 자리수 체크
비밀번호 입력 확인 인풋박스에서 일치 여부 체크
데이터 유효성 서버 통신을 통해 체크
서버 통신을 통해 서버에 저장되어 있는 데이터와의 일치 또는 중복 여부 등을 체크하여 인풋 박스
하단이나 팝업 등을 통해 알림 메시지를 띄움
보통 서버와의 잦은 통신을 지양하기 위해 Submit 버튼 클릭 시 입력값의 데이터 유효성을 체크
이미 존재하는 이메일 주소인지 여부 체크

입력값의 형식 유효성
구분 기준 근거
이름
국내 기준: 이름 5자 (성은 제외)
글로벌 기준: 제한 없음
이름의 기재문자와 관련된 가족관계등록사무
이메일
주소 앞자리 64자+@+도메인 255자(최대 320자)
영문/숫자/일부 기호(‘_(언더바)’, ‘,(마침표)’등) 사용 가능
이메일 형식 유효성 체크 : XXX@XXX.XXX
SMTP(Simple Mail Transfer Protocol) RFC 2821
비밀번호 8자 이상의 문자, 숫자, 기호 조합
글로벌 표준
(브라우저 자동 비밀번호 생성 기능 이용 지원)
2003년
미국 국립표준기술연구소(NIST)
빌 버(Bill Burr)
KISA 인터넷 기업
불편 초래
파편화
모바일 시대
관련 기사

입력 키보드 유형
iOS 키보드 유형에는 아래와 같이 11가지 유형이 존재하며, 안드로이드도 동일한 유형을 갖고 있으며 보조 버튼에서 약간의 차이가 있음

UX Writing & Microcopy
구분 내용 예제
올바르게 쓰기
올바른 맞춤법과 높임말을 사용
올바른 띄어쓰기 사용
극존칭의 사용을 자제함
올바른 외래어 표기 사용
삭제시, 완료시 > 삭제 시, 완료 시
인기 순, 최신 순 > 인기순, 최신순
회원가입을 하시면 다양한 기능을 이용하실 수 있습니다. > 회원가입을 하고 다양한 기능을 이용해보세요.
메세지, 컨텐츠 > 메시지, 콘텐츠
명확하고 이해하기 쉽게 쓰기
고객의 행동을 구체적이고 직관적으로 표현
쉬운 표현 사용
법률, 의료, 행정, 회계 등 이해하기 어려운 전문용어의 사용을 자제
어려운 한자어나 한자식 표현 자제
이해하기 어려운 외래어 사용 자제
클릭하세요, 터치하세요 > 눌러주세요, 선택하세요
사흘간 > 3일간
건강 건진 결과 > 건강 검진 결과
드래그 앤 드랍, 싱크 > 끌어다 놓기, 동기화
More, FAQ, Help > 자주 묻는 질문, 도움말
간결하고 가독성이 좋게 쓰기
문장을 짧고 간결하게 표현
두괄식으로 표현
정말 삭제하시겠습니까? > 삭제하시겠습니까?
일정한 형식을 갖춰 일관되게 쓰기
톤앤매너 유지
표현 및 형식, 용어를 통일
- 제목이나 버튼 내 텍스트에는 마침표를 찍지 않음
- 입력 상자 안의 Placeholder Msg 및 Validation Msg의 문구도 일관된 형식 유지
- 숫자, 단위, 시간 표기 등의 표현 방식 통일
- 기호 사용 시 띄어쓰기 통일
성명, 성함 > 이름
핸드폰 번호, 휴대전화번호, 연락처 > 휴대폰 번호
공감력과 감수성이 높은 글쓰기
긍정적인 표현 사용
혐오나 차별이 느껴지거나 존중하지 않는 표현 사용 금지
역사와 문화, 종교, 언어 등 지역적 특수성 고려
정치 ,젠더 이슈 등 논란이 발생할 표현은 삼가
비밀번호가 틀렸습니다. > 비밀번호가 일치하지 않습니다.
디지털 디바이스에서 제공되는 웹과 모바일 서비스의 UI에 포함되어 사용자의 행동을 유도하거나 긍정적인 사용자 경험을 제공할 수 있는 단어 또는 문구 등의 메시지를 일컬으며,
전문적으로 Microcopy를 작성하는 직군을 UX Writer, 이를 작성하는 행위를 UX Writing이라 부름
좋은 마이크로카피의 조건

글자 길이(Length)의 처리
단어나 문장이 길 때 어떻게 처리하지?
게다가 글로벌 서비스라면 언어에 따라 단어나 문장의 길이가 제각각인데... :(
구분 설명 사용 예시
아이콘 처리
디자인 아이콘이나 픽토그램 등의 직관적인 이미지로 대체
특히 글로벌 서비스의 경우, 언어에 따라 글자 길이가 너무 길어질 수 있어 아이콘 처리를 많이 함
아이콘의 모양이나 색상 등에 따라 국가별로 의미 전달이 다르거나 논란의 소지가 있을 수 있기 때
문에 세심한 주의가 필요
메뉴명, 텍스트 버튼 등
줄바꿈 처리
아이콘 처리가 불가능하거나 말줄임 처리 후 더보기 버튼 등을 통해 표현이 불가능한 경우에는 줄
바꿈 처리를 통해 전문을 표시
줄바꿈 처리의 경우, UI가 깨질 수 있기 때문에 퍼블리싱이나 UI 설계 시 대응 필요
인풋 박스 라벨, 닉네임 등
말줄임 처리
[더보기] 버튼을 통해 추가적인 표시가 가능한 경우 말줄임 처리를 통해 고정된 Width/Height
내에서 표현
컨텐츠 내용 등
그라데이션 처리
글자가 잘리려는 영역에서 희미하게 그라데이션 처리함
키보드 이동이나 마퀴 태그(Marquee)와 같은 효과 등을 통해 전문 확인이 가능
인풋 박스 내 우측에 X 버튼 등의 아
이콘이나 버튼 등이 위치한 경우
기타 폰트 사이즈 조정, 표시 방법 변경 등

수동 줄바꿈(enter key) 시 주의사항
한국어, 영어, 중국어 등 여러 언어를 제공하고
언어별로 폰트도 다르게 쓰고
또 그 폰트에 따라서 가독성을 위해 폰트 사이즈를 업 & 다운을 하고
사용자는 브라우저나 단말기에서 폰트 사이즈를 매우 작음에서 매우 크게 변경하거나
해상도를 바꾸면 그 언어의 길이(Length)를 예측하기 어렵기 때문에
의도적으로 enter key를 통해 줄바꿈을 한다면...
<tr>
<td style="word-break:break-all">남산 위에 저 소나무 철갑을 두른 듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</td>
<td style="word-break:keep-all">남산 위에 저 소나무 철갑을 두른 듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</td>
</tr>

최소값과 최대값, 그리고 동적 생성
버튼의 min-width값과 max-width값,
인풋박스의 min-width값과 max-width값,
글자 길이(Length)의 처리 등
기획자는 wireframe을 작성하는 동안 모든 요소의 최소값과 최대값을 고민해야 함.
그런데 동적 생성까지 고려하면...

과제 진행
나만의 UI Component
- 화면과 페이지를 만드는 기본 요소
- 꾸준히 좋은 UI/UX로 업그레이드를 하지만 매 프로젝트마다 반복적으로 사용하는 나만의 공식
- 통일성 있고 완성도 높은 프로젝트를 만들기 위해 프로젝트 멤버들에게 제공되는 메뉴얼 북
몇 장 되지 않잖아요?
나만의 공식이자 메뉴얼 북인 UI Component를 만드세요!

프로그래스 인디케이터(Progress Indicator)의 종류
구분 종류 설명
로딩 완료 시기를 예측할 수 없는
트로버 (Throbber) 로딩 완료 시점을 알 수 없는 로딩 처리 방식
아워글래스 (Hourglass) 시스템 전체가 로딩되는 경우 표시되는 마우스 포인터로 로딩이 끝날 때까지 어떤 액션도 할 수 없음
로딩 완료 시기를 예측 가능한 프로그래스 바 (Progress Bar) 로딩이 완료되는 시기를 예상할 수 있는 바 형태의 인디케이터로 진행 상태 확인 가능
트로버 (Throbber) 아워글래스 (Hourglass) 프로그래스 바/트래커(Progress Bar/Tracker)

팝업(Pop-up)의 종류
구분 종류 설명 기타
팝업(Pop-up)
일반 팝업 공지사항이나 배너 등을 띄우기 위한 팝업
페이지 진입 시 페이지 로딩과 함께 동시에 뜸
팝업창은 브라우저에서 브라우저 옵션을 통해 Default 뜨는 것을 막는 경우가 있으
나 모달은 강제할 수 없어 반드시 떠야 하는 경우에는 모달을 사용
다이얼로그
디자인 팝업 직접 팝업을 디자인하여 앱 서비스 내에서 제공하는 메시지를 전달
시스템 팝업 브라우저나 클라이언트 OS에서 제공하는 UI를 사용하여 제공하는 팝업
서비스에서 요청하지 않는 브라우저나 클라이언트와 관련된 팝업 표시 시 사용
ex) 네트워크 연결 장애 등
토스트 바/스낵 바
알림을 위한 팝업의 하나로 모니터의 좌우측 하단 또는 모바일 화면에 몇 초간
나타났다 사라지는 형태의 팝업
사용자의 현재 작업의 흐름을 방해하지 않고 저장이나 삭제 등의 액션 처리 결과를
알려주기 위해 사용
토스트 메시지에도 닫기 이외의 액션 버튼 추가 가능
팝오버
(Popover)
마우스 오버 시 뜨는 레이어로 툴팁과 같이 버튼이나 메뉴의 상세한 추가 설명
을 하는데 주로 사용
팝오버에서 포커스 아웃 시 팝오버가 닫힘
모달 (Modal) 라이트 박스 (Light Box)
팝업이 뜨는 동시에 백그라운드 화면이 어두워지거나 밝아지는 등 딤(Dim) 처
리되어 컨트롤이나 클릭이 되지 않아 사용자가 팝업에 집중할 수 있는 시각적
효과 제공
해당 페이지에서 호출되는 레이어로 특정 액션에 의해 뜨고 다음 플로우 진행을 위
해 필요한 내용을 제공
일반 팝업과 다른 점은 모달을 해제하지 않으면 배경의 요소와 인터랙션이 안 됨
토스트 메시지 (Toast message) 팝오버 (Popover) 라이트 박스 모달 (Light box modal)

쿠키 vs. 세션 vs. 캐시
쿠키와 세션을 사용하는 이유?
HTTP 프로토콜의 특징이자 약점을 보완하기 위해 사용
1) 비연결 지향 (Connectionless) : 기본적으로 Http는 먼저 클라이언트가 Request를 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 Response를 보내고 접속을 끊는 특성이 있음
2) 상태 정보 유지 안 함 (Stateless) : 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있음
HTTP의 이 두가지 특성을 보완하기 위해 쿠키와 세션을 사용
비연결 지향이라는 특성으로 계속 통신을 유지하지 않기 때문에 리소스를 낭비하지 않는다는 장점이 있으나
통신할 때마다 클라이언트는 누구인지 인증을 계속해야 하는 단점이 생겨 쿠키와 세션을 통해 페이지를 옮겨 다닐 때마다 로그인을 다시 안 해도 됨

쿠키 vs. 세션 vs. 캐시의 차이
구분 저장 방식 설명 프로세스 사용 예시
쿠키
(Cookie)
사용자 단말기(로컬 스토리지)에
저장
키와 값이 들어있는 작은 데이터
파일
이름, 값, 만료날짜(쿠키 저장기
간), 경로 정보 저장
보안 취약
쿠키는 서버에서 생성하여 클라이언트의 브라우저에서 관리
쿠키 정보는 오직 그 쿠키를 작성한 웹 서버만이 열람 가능
쿠키는 사용기한이 정해져 있어 기한이 만료되면 자동으로 삭제됨
클라이언트에 300개까지 쿠키 저장 가능
하나의 도메인당 20개의 값만 가질 수 있음 (초과시 사용빈도가 낮은
쿠키부터 삭제됨)
하나의 쿠키값은 4KB까지 저장
Response Header에 Set-Cookie 속성을 사용해 쿠키 생성
1. 브라우저에서 웹페이지 접속
2. 클라이언트가 요청한 웹페이지를 받으면서 쿠키를 클
라이언트 로컬에 저장
3. 클라이언트가 재요청 시 웹페이지 요청과 함께 쿠키
값도 전송
4. 지속적으로 로그인 정보를 가지고 있는 것처럼 사용
자동 로그인
팝업에서 ‘오늘 하루 열지 않기’ 체
크
세션
(Session)
저장
세션ID는 쿠키에 저장되나 그 생성 알고리즘은 서버에 저장되어 보안
성 담보
웹 브라우저를 통해 웹 서버에 접속한 이후로 브라우저를 종료할 때까
지 유지
클라이언트가 Request를 보내면, 서버가 클라이언트에게 유일한 ID
를 부여하는데 이것이 세션 ID임
1. 클라이언트가 서버에 접속 시 세션 ID 발급
2. 서버에서는 클라이언트로 발급해준 세션 ID를 쿠키를
사용해 저장
3. 클라이언트는 다시 접속할 때, 이 쿠키를 이용해서 세
션 ID값을 서버에 전달
로그인 정보 유지
로그인 만료 처리
게시판 글 작성 시 세션에 있는 아
이디를 참조해 작성자 지정
캐시
(Cache)
저장
사용자의 브라우저에 이미지나 CSS, js 파일 등을 저장하여 로딩 속
도를 빠르게 하고 트래픽을 줄임
단, 관리자를 통해 이미지를 변경해도 바로 사용자에게 반영되지 않는
문제가 발생할 수 있음
캐시를 지우거나 서버에서 클라이언트로 응답을 보낼 때 header에
캐시 만료시간을 명시하는 방법으로 해결

체인점 리스트
(리스트/지도뷰)
로그인 or
로그아웃
잠금화면
(멤버쉽카드)
마이페이지
환경설정
(Customized)
편의점 페이지
인트로
(스플래쉬 이미지)
지오태그
서비스 정보 등
푸시 알림
계정 관리
(계정 연동 관리)
프로필 정보
구매내역,
배송조회
1:1 문의하기
FAQ
공지사항
배송지 관리
신분증 관리
로그인
회원가입
아이디/비밀번호
찾기
장바구니
상품 리스트
구매
상품 상세 정보
결제
배송 방식 선택
(배송지 확인)
쿠폰 및 적립금, 포인트
등 사용
추천/베스트/할인
Etc.
카테고리
적립금(선불카드 포함)/
포인트/쿠폰
채팅
회사 정보 등
연관 상품 정보
제공 등
해외직구인 경우,
신분증 인증
또는 선택
자동 로그인 설정
잠금화면
온오프 설정
이벤트
앱 메뉴
로
그
인
필
요
로
그
인
미
노
출
로그인시 이용가능
로그인 필요

로그인
1 아이디/비밀번호 입력
2 비밀번호 찾기
3 Social login(위챗)
회원가입
1 휴대폰 번호 입력
2 인증번호 입력
3 SNS 연동 + 기본정보 입력
4 가입 완료
잠금화면
1 잠금화면 광고(락스크린)
2 멤버십 카드 정보
3 멤버십 카드 관리
구매
1 구매 정보
2 배송지 확인 및 수정
3 배송 방식 선택
4 쿠폰 및 포인트,적립금 사용
5 결제정보 확인
6 영수증 요청
선 신분증 인증 및 관리
8 결제 방식 선택
결제하기
편의점 정보(홈)
1 편의점 정보
2 홈 커스텀 영역
결제
1 결제 모듈 연동
마이페이지
1 프로필 정보
2 적립금(선불카드 포함) / 포
인트/쿠폰
3 구매내역, 배송조회
4 배송지 관리
5 신분증 관리
6 공지사항
7 이벤트
8 FAQ
9 1:1 문의하기
10 회사 정보 등
편의점 매장 리스트(지오태그)
1 리스트뷰
2 지도뷰
장바구니
1 장바구니 히스토리 및 상세
상품 상세 정보
1 상품 이미지
2 상품 정보
3 상품 상세 설명
4 후기/평가(채팅 기능)
5 기타 정보
6 추천/연관 상품 리스트
장바구니 담기
카테고리
1 카테고리 리스트
상품 리스트
1 추천 상품 리스트
2 베스트 상품 리스트
3 할인/쿠폰 상품 리스트
4 신규 상품 리스트
5 기획 상품 리스트
환경설정
1 계정 관리(계정 연동 관리)
2 자동 로그인 설정
3 잠금화면 온오프 설정
4 푸시 알림
5 서비스 정보 등
장바구니 이동
전체 멤버십 이동
배송
1 배송 출발 알림 페이지
9 배송원 변경 알림 페이지
2 배송 완료 평가 페이지
앱 상세 메뉴

로그인
1 아이디/비밀번호 로그인
홈메인
- TOP Banner (Optional)
- TOP Bar
채용안내, 고객센터 등
- 상단 GNB
드롭다운 카테고리 메뉴, 통합
검색, 로그인 | 회원가입
1 배너 영역
2 직무/분야별 메뉴 버튼
3 지난 성과
4 추천/인기/신규/할인(이벤트)
강의
인기 키워드 TOP 5
5 강사 소개
6 공연 및 상품
- 푸터 영역
비밀번호 찾기
1 비밀번호 재설정 메일 발송
회원가입
1 카카오싱크 or 이메일 회원가입
2 정보입력 및 약관동의
3 이메일 회원가입의 경우, 이메일
인증
상품 리스트(검색/큐레이션 페이지)
1 검색 페이지
추천/인기 or 검색 히스토리
관련(연관) 검색어
2 큐레이션 방식
카테고리별
포맷별
난이도별
혜택별
강사별
필터
과정 · 코스별, 직무 · 분야별,
강의 상태별, 강의시간별, 강의
시수별, 난이도별, 금액별, 할인
률별, 평점별 등
소팅 방식
최신/인기/판매/낮은가격순/
높은가격순/평점순
상품 상세
1 상품 정보
상품 대표 이미지
상품 기본 정보(상품 결제 모
듈)
2 상품 설명
상품 상세 이미지
상품정보제공고시 정보
3 댓글(별점, 댓글)
4 취소/환불 정책
5 관련 글(블로그 RSS Feed)
난이도에 따른 추천 강의
당신이 관심을 가질만한 강의
해당 강사의 다른 강의
상담신청하기 | 출시알림받기
상담신청하기 | 수강신청(지원)하기
장바구니 담기 | 바로 결제하기
장바구니
1 장바구니 히스토리
2 주문내역 및 결제예상금액
주문
1 구매 정보
2 배송지 확인 및 수정(Optional)
3 쿠폰 및 포인트 사용
4 결제 정보 확인
5 결제 방식 선택
결제
1 PG사 페이지 호출
마이페이지
1 대시보드
프로필 정보
나의 강의/티켓/상품 정보
2 나의 지갑
포인트, 쿠폰 정보
3 결제 | 배송 내역
입금 대기중 리스트
결제 및 배송 조회(취소/환불
처리)
4 공지사항/이벤트
공지사항 리스트/상세
이벤트 리스트/상세
5 나의 정보(회원정보관리)
배송지 관리
사용 기기 관리
계정 관리(회원탈퇴, 알림설정)
로그아웃
6 고객센터
이용안내
서비스 정책
연락처
결제 확인
1 결제 완료
홈메인
온라인 강의장
1 동영상 시청
지원하기
1 지원 안내
2 과제 제출
3 평가
1) 사전 과제가 있는 경우
2) 사전 과제가 없는 경우
웹사이트 메뉴

Main Menu Code Sub Menu Code Range Sub2 Code Range Pop-up Mail Form Etc.
Header/Footer HF
Top Banner, Top Bar, Header 01-01 ~ 01-02 2 : 카테고리 레이어 팝업, 검색 레이어 팝업 공통 Header
Footer 02-01 공통 Footer
알림 메시지 03-01 ~ 03-02 1 : 알림 메시지 레이어 팝업 SP-AL-01-01 ~ 02-01
Log in/Sign up SU
로그인/회원가입 페이지 01-01 ~ 02-03
회원가입 및 로그인 Flow 01-01 이메일 인증 메일, 가입 환영 메일 SP-PC-01-01 ~ 03-01
멀티 로그인 제한 및 기기 변경 시 처리 Flow 01-02 신규 기기 등록 안내 메일 SP-PC-03-03
비밀번호 찾기 Flow 01-03 비밀번호 재설정 이메일, 게정 잠금 안내 메일 SP-PC-03-02
로그인 페이지 02-01 ~ 02-03 2 : 계정 연동 안내 모달, 로그인/회원가입 모달
회원가입 선택 페이지 03-01
회원가입 페이지 03-02
(모바일 해상도) 로그인/회원가입 03-03 ~ 03-04 1 : 서비스 정책 모달
이메일 인증 안내 페이지
가입 환영 페이지
03-05
비밀번호 찾기 페이지
비밀번호 재설정 페이지
04-01 비밀번호 재설정 메일
(모달) 비밀번호 변경 및 연장 안내 프로세스 04-02 1 : 비밀번호 변경 안내 모달
수강내역 가져오기 페이지 05-01 ~ 05-03 이메일 인증 메일 SP-PC-04-01
(모달) 사용 기기 등록 프로세스 06-01 1 : 사용 기기 관리 모달 기기 등록 안내 메일
Home main page HM
홈 메인 페이지 01-01 ~ 02-02
(모듈) 프로덕트 카드 03-01 SP-PS-01-01 ~ 01-02
Product list page PL
상품 리스트 01-01 ~ 06-02
통합검색 01-01 ~ 01-02
통합검색, 카테고리 검색 01-03
라벨, 키워드 검색 01-04 SP-PS-03-01
검색 결과가 존재하지 않는 경우 01-05
통합검색_강의 리스트 UI 02-01
통합검색_강의 리스트 UI_필터링 사이드 바 03-01
통합검색_티켓/일반 상품 리스트 UI_필터링 사이드 바 03-02
(모바일 해상도) 통합검색 04-01 ~ 04-02
커스텀 UI_카테고리 05-01 ~ 05-02 프로모션용 커스텀 UI
커스텀 UI_키워드, 라벨 06-01 ~ 06-02
강사 페이지_커스텀 UI 07-01
Product detail page PD 상품 상세 페이지 01-01 ~ 03-01
상단 시스템 구성 영역 01-01 SP-PS-02-01, SP-PS-02-02
구매 모듈_장기심화 강의 01-02 SP-PM-01-01
구매 모듈_단기속성 강의 02-01 ~ 02-02 2 : 휴대폰 인증 모달, 출시 알림 받기 모달 (모든 상품 공통) SP-PM-01-02
구매 모듈 버튼 종류 및 그 처리 프로세스_오프라인 강의(단기속성,
장기심화)의 경우
02-03
구매 모듈 버튼_장기심화 강의의 경우(지원 및 과제 제출 프로세스) 03-01

대시보드
DB
프로필 및 설정
로그인/회원가입
LG
서비스 안내
SS
개인 회원
PC
개인 회원
홈
이벤트
공지사항
이용안내
강사 관리
LP
강사 관리
멤버십
쿠폰(티켓) 캠페인
포인트/쿠폰
PT
배너 관리
AD
일반 배너
홈 메인 배너
알림
나의 프로필
일반 설정
서비스 정책
회사 및 서비스 소개
로그아웃
강사비 정산
휴면 회원
알림창
CS 관리
CS
고객문의
환불 처리
관리자
AM
관리자 계정 관리
관리자 권한 설정
댓글 관리
RV
댓글 관리
올드회원
기업 회원
CC
기업 회원
기업 문의
임직원 관리
수강 현황 및 통계
쿠폰
라벨 관리
카테고리 관리
오프라인 강의
온라인 강의
공연 상품
상품 판매 정보 설정
PI
취소/환불 정책
조직 관리
페이지
CP
포인트
일반 상품
메시지 발송
PN
알림 메시지
패키지(주+주) 상품
번들(주+부) 상품
고객 관리
광고/마케팅_FM
시스템 메시지
서비스 운영_CS
상품 상세
상품 정보 설정
컨텐츠 관리_CM
세금계산서 발행
신고글 관리
정산 및 통계
ST
회원 통계
광고 통계
쿠폰/포인트 통계
매출/정산 통계
판매 통계
배송 관리
배송 관리
DM
판매 관리
SM
판매 관리
장바구니
수강 신청 관리
반품 관리
환불 처리 (CS 중복)
환불 및 정산 설정
배송 설정
판매 관리 통계
강의 통계
관리자 메뉴 관리
서비스 정책
슬라이딩 배너
검색 보드
배너 일반 설정
강의장 관리
CR
강의장 관리
강의 관리
LA
강의 관리
일반 상품 관리
PS
상품 관리
재고 관리
상품 입출고
강의장 사용 관리
온라인 강의
설문 관리
HW
설문 관리
설문 평가
상품 관리_PM
강의 보고서
출결 관리
파일 관리
에셋 관리
AS
관리자 메뉴

모바일 이동경로 처리
상품 상세
추천 상품 상품 상세
Menu2
Menu1 Menu3 Menu4
depth3
depth4
depth5
depth2
depth1
depth3
depth4
depth5
depth2
depth1
depth3
depth4
depth5
depth2
depth1
depth3
depth4
depth5
depth2
depth1
1
2
3

모바일 이동경로 관리 _ 카카오

회원의 종류
회원가입 절차
B2C
개인고객
B2B
기업고객
관리자
회원가입
정보 입력 및
약관 동의
인증 가입완료

회원인증 시 고려사항
회원인증 방법
서비스 특성 필요한 데이터 비용 편의성
이메일 인증
휴대폰 번호
점유 인증
휴대폰 본인 인증
SNS 싱글 로그인
(Single Sign-On,
SSO)
기타
보안

법정대리인의 동의
연령 회원가입 시 결제 시 기타
만 14세 미만의 미성년자(아동) 필요 필요
청소년 유해매체물 및 성인 콘텐츠의 경우,
반드시 휴대폰 본인 확인을 통한 성인 인증 필요
만 19세 미만의 미성년자(청소년) 필요 없음 필요
만 19세 이상의 성인 필요 없음 필요 없음
동의 필요 시 처리 방법
휴대폰 본인 확인
약관을 통한 동의 체크
휴대폰 본인 확인, 그러나... :(

약관의 종류
구분 종류 설명
약관 종류
서비스 이용약관
개인정보 수집 및 이용 동의
고유식별정보 처리 동의 ‘고유식별정보’란 개인을 고유하게 구별하기 위하여 부여된 식별정보로서 주민등록번호, 여권번호, 운전면허번호, 외국인등록번호 등에 해당하는 정보를 말함
민감정보 처리 동의 ‘민감정보’란 사상, 신념, 노동조합 및 정당의 가입 및 탈퇴, 정치적 견해, 건강, 유전정보, 범죄경력자료, 인종이나 민족 등에 관한 정보를 말함
개인정보 취급 위탁 동의 사업자의 이익 및 목적을 위해 개인정보 취급업무를 제 3자에게 위탁 시 동의를 받아야 함
개인정보 제 3자 제공 동의 개인정보를 제공받는 자의 이익 및 목적을 위해 개인정보를 제 3자에게 제공하는 경우 동의를 받아야 함
위치정보 이용약관
위치기반 서비스 이용약관
사용자의 위치 정보를 서버에 저장하고 이를 활용하기 위해서는 해당 이용약관의 동의를 받아야 함
(관련법 : 위치정보의 보호 및 이용 등에 관한 법률; 위치정보법)
마케팅 목적 개인정보 수집 및 이용 동의
마케팅 및 광고성 정보 수신 동의
앱 푸시, 문자, 이메일, 전화 등 전자적 전송매체를 이용하여 영리목적의 광고성 정보를 전송하기 위해서는 수신자에게 명시적인 사전 동의를 받아야 함.
이를 위해 광고성 정보 수신동의를 이용약관에 넣어 처리.
(관련법. : 정보통신망 이용촉진 및 정보보호 등에 관한 법; 정보통신망법 제50조제1항)
기타 약관

개인정보 제 3자 제공 및 취급 위탁의 구분
구분 목적 관리 범위 약관 명시 내용 사용 예시
개인정보 취급 위탁
사업자의 이익 및 목적을 위해 개인정보 취
급업무를 제 3자에게 위탁
취급위탁을 받은 자(수탁자)가 개인
정보를 운영하지만 사업자의 관리 범
위에 속함
제공받는 자, 업무 내용 등 명시 필요
사업자가 콜센터(수탁자)와 위탁계약을 맺고, 백화점 고
객 개인정보를 콜센터 업체에서 관리 및 운영
개인정보 제 3자 제공
개인정보를 제공받는 자의 이익 및 목적을
위해 개인정보를 제 3자에게 제공
개인정보를 제공받는 자(제 3자)의
관리범위에 속함
제공받는 자, 제공받는 목적, 제공되는 개인정
보 항목, 보유 및 이용 기간 등 명시 필요
대기업의 계열사 간 개인정보의 공유
CI/DI
구분 형식 용도
CI (Connecting Information, 개인식별정보) 88 byte
연계정보, 서비스 연계를 위해 본인확인기관에서 부여하는 개인식별정보
서로 다른 인터넷 서비스 간에도 동일 사용자인지 구분 가능한 정보
DI (Duplication Information, 중복가입확인정보) 64 byte
서비스 별로 각각 관리하는 동일 사용자 구분 수단
한 사람의 명의로 여러 개의 계정을 만들고 악용하는데 막을 수 있는 정보
즉, 한 서비스에 단 하나의 DI만이 존재

로그인 및 비밀번호 찾기 종류
구분 종류 방식 설명
로그인
일반 로그인 회원가입 방식에 따라 ID, 이메일, 핸드폰 번호 등으로 로그인 가능
싱글 로그인 (Single Sign-On, SSO) SNS 싱글 로그인을 통해 로그인 가능
간편 로그인
핀코드
간편 로그인 지원
지문 인식 및 얼굴 인식은 해당 기능을 지원하는 단말기에 한해 사용 가능
패턴
지문 인식
얼굴 인식
기타
비밀번호 찾기
이메일
SMS
질문 및 답변
구매한 상품
기타

모바일 앱 로그인 시 체크 사항
구분 종류 방식 내용 기타
체크 사항
앱 버전
선택 업데이트 꼭 업데이트를 하지 않아도 서비스 이용 가능 디자인 팝업에 [나중에 | 업데이트] 버튼 표시
강제 업데이트 업데이트를 하지 않으면 서비스 이용 불가 디자인 팝업에 [업데이트] 버튼만 표시
네트워크 상태 네트워크 연결 상태 확인 네트워크 연결이 안 된 경우, 시스템 팝업 표시
공지사항 진행 중인 공지사항이 있는 경우, 공지사항 표시
배너 진행 중인 배너가 있는 경우, 배너 표시
계정 잠김 여부 비밀번호 연속 실패 등의 이유로 계정이 잠김 경우
권한 획득
iOS
알림, 위치, 연락처, 사진, 카메라, 마이크, 동작 및 피트니스, 캘린더, Siri 및 검색, 백그라운
드 앱 새로 고침, 사용자 추적 권한(ATT, AppTrackingTransparency) 등 서비스 이용 시 꼭 필요한 권한이 아니라면 서비스 내에서
필요한 상황에 권한 요청을 하는 것이 좋음
Android
인앱 기록, 기기 및 앱 기록, ID, 주소록, 위치, 휴대전화, 문자 메시지(SMS, MMS), 사진/
미디어/파일, 카메라, 마이크, 기기 ID 및 통화 정보, Wi-Fi/블루투스 연결 정보 등

추가 고려사항
로그인 인증 방식
(세션, 토큰)
캡챠 적용
정보 불일치 시
처리 프로세스
중복 로그인 및
단말기 사용 제한
2단계 인증
로그인 연장

캡챠 (CAPTCHA)의 종류
CAPTCHA, Completely Automated Public Turing test to tell Computers and Humans Apart
어떠한 사용자가 실제 사람인지 컴퓨터 프로그램인지를 구별하기 위해 사용하는 기술의 하나.
종류 설명 사용 예시
텍스트 CAPTCHA 2000년 대에 흔하게 사용하던 캡챠
광고성 게시물 또는 댓글 방지
아이디 자동생성 방지
이메일 주소 보호
계정 해킹 방지 등
오디오 CAPTCHA 시각장애인을 위해 보통 텍스트나 이미지 CAPTCHA와 함께 제공됨
이미지 CAPTCHA 요샌 웬만하면 그냥 구글 reCAPTCHA v3를 적용함
슬라이드 CAPTCHA
중국에서 자주 보던 방식 @.,@;;
Drag & Drop CAPTCHA
기타
사람의 얼굴과 이름을 매치 시키는 소셜 CAPTCHA
커서가 이동한 경로를 확인하는 동작 CAPTCHA 등

PATH 회원가입 및 로그인 프로세스
회원가입/로그인 프로세스
Function Description
1
인증 메일 발송
- 이메일 인증 메일 발송
2
회원 DB 생성
- 이메일 인증 완료 시 회원 ID 생성
3
가입 환영 메일 발송
- 가입 환영 메일 발송
4
회원가입 완료 전 페이지 이탈 시 알림 팝업
- 회원가입 페이지(+인풋 박스 입력 시), 이메일 인증 안내
페이지에서 페이지 이탈 시 알림 팝업 처리
회원가입
페이지
정보입력
및 약관동의
거래소 또는
이전 페이지 이동
Y
로그인
페이지
N
이메일 인증 안내
페이지
(이메일 발송)
이메일
인증 여부
예, 중단합니다
알림
회원가입을 완료하지 않았습니다.
회원가입을 중단하시겠습니까?
N
로그인
페이지
핀코드
등록 여부
핀코드 등록
페이지
가입 환영
페이지
(이메일 발송)
Y
N
Y
Y
핀코드
등록 여부
N
1
3
4
회원가입 프로세스 이탈 시 알림 팝업
아니요
Button Description
A
[아니요] 버튼
- 클릭 시, 현재 페이지 유지
B
[예, 중단합니다] 버튼
- 클릭 시, 회원가입 페이지(+모든 인풋 박스 입력값 Reset)
로 이동
A B
Yes
No
설정에 따라 표시 여부 결정
Next Version
2

PATH 중복 로그인 및 기기 변경 시 처리 프로세스 Function Description
* 중복 로그인 미지원 및 기기 변경 시 처리 프로세스는 동일
예, 변경합니다
기기 변경 안내
최근 사용한 기기와 다릅니다.
이메일 인증을 거쳐 해당 기기를 사용하시겠습니까?
아니요 확인
로그아웃 안내
서버 세션이 만료되어 보안상 로그아웃되었습니다.
로그인 페이지로 이동합니다.
1) 기기 변경 알림 2) 사용자 인증 만료 시 알림
Button Description
A
[아니요] 버튼
- 클릭 시, 로그인 페이지에서 팝업만 닫힘
B
[예, 변경합니다] 버튼
- 클릭 시, 이메일 인증 안내 페이지로 이동
C
[확인] 버튼
- 클릭 시, 로그인 페이지로 이동
A B C
신규 로그인 회원 또는 신규 기기
로그인
페이지
1) 기기 변경 알림
기 로그인 회원 또는 기존 기기
2) 사용자 인증 만료
알림
(이메일 포함)
재로그인
여부
페이지
(이메일 발송)
로그인
상태
이메일
인증 여부
로그인
거래소 또는
사용 기기 변경
알림
거래소 또는
2) 사용자 인증 만료
알림
(이메일 발송)
1
Y
N
Y
N
변경 프로세스
Yes
No
Next Version

PATH 비밀번호 찾기 프로세스 Function Description
1
로그인 정보 10회 불일치 프로세스 및 알림 표시
- ID(이메일)별 불일치 횟수를 서버에 저장하여 10회 연속
불일치 시 계정 잠금 알림 처리하고 로그인 성공 시 해당 횟수
를 초기화
비밀번호 찾기
로그인
페이지
로그인 정보
10회 불일치
(이메일 발송)
1) 계정 잠금 알림
(이메일 발송)
비밀번호 재설정
이메일 발송
로그인
확인
계정 잠금 안내
로그인 정보 10회 불일치로 인해 계정이 잠겼습니다.
가입하신 이메일 주소로 비밀번호 재설정 안내 메일이
발송되었습니다.
비밀번호 재설정
비밀번호 찾기
페이지
1) 계정 잠금 알림
Yes
No
Next Version
프로세스 오류
1
Y
N

PATH 핀코드 불일치 시 처리 프로세스
핀코드 인증
페이지
핀코드
인증 여부
로그인 페이지
페이지
(이메일 발송)
로그인
핀코드 등록
Yes
No
Next Version
N
핀코드 재설정
1) 핀코드 5회 불일치
이메일 인증
2) 핀코드 초기화
완료 알림
핀코드 초기화 안내
핀코드가 초기화되었습니다.
새로운 핀코드를 등록하시려면 로그인이 필요합니다.
로그인 페이지로 이동하시겠습니까?
예, 이동합니다
아니요
회원가입/로그인 프로세스
다음 프로세스
시작
또는 핀코드 변경
2) 핀코드 초기화 완료 알림
Button Description
A
[아니요] 버튼
- 클릭 시, 현재 페이지 유지
B
[예, 초기화합니다] 버튼
- 클릭 시, 이메일 인증 안내 페이지로 이동
C
[예, 이동합니다] 버튼
- 클릭 시, 로그인 페이지로 이동
A C
핀코드 잠금 안내
핀코드 정보 5회 불일치로 인해 핀코드가 잠겼습니다.
이메일 인증을 통해 핀코드를 초기화하시겠습니까?
예, 초기화합니다
아니요
1) 핀코드 5회 불일치 시 알림 처리
A B

PATH 로그인 만료 안내 모달 팝업 Function Description
1
로그인 만료 안내 모달 팝업
- 10분 간 사용자의 사용이 없으면, 다음 모달 팝업 표시
- 10분 경과 이후 1분간 대기시간을 주고 60초 카운팅 표시
- 1분간 액션이 없으면 자동으로 로그아웃 처리
Button Description
A
[로그인을 연장합니다] 버튼
- 클릭 시, 10분간 로그인 연장
B
[로그아웃합니다] 버튼
- 클릭 시, 즉시 로그아웃 처리
앱 다운로드
Menu1 Menu2 Menu3 Menu4 로그인 회원가입
Footer
Logo
로그인 만료 안내
10분 간 사용이 없어 보안 상 자동으로 로그아웃 처리합니다.
로그아웃합니다
로그인을 연장합니다
로그아웃까지 60초가 남았습니다.
1
A
B
Logo

PATH 회원가입 프로세스
회원가입 프로세스
1
튜토리얼
- 앱 최초 설치 시 또는 삭제 후 재설치 시에만 튜토리얼을 보
여줍니다.
2
인증메일 발송
: 이메일 인증을 위한 링크와 함께 인증메일을 발송
3
이메일 인증 여부 확인
: 이메일 인증을 완료한 경우 회원가입이 완료되어 로그인이
가능하며 로그인 시 핀번호 등록 페이지로 이동
- 이메일 인증을 하지 않은 경우 로그인 시 이메일 발송 안내
페이지로 이동
4
간편 로그인 사용 여부 판단
: 디바이스의 바이오 인증(지문, Face ID) 지원 여부에 따라
지원 가능한 간편 로그인 방식을 표시
5
프로모션 팝업
- 관리자에서 현재 라이브 중인 프로모션 팝업이 있는 경우
에 프로모션 팝업을 표시
앱 실행
스플래시
로그인 페이지
(회원가입 버튼)
이메일 인증
안내
이메일
인증여부
정보입력
및 약관동의
튜토리얼
로그인 페이지
(일반 로그인)
Y
N
Yes
No
Next Version
3
2
1
간편 로그인
사용여부
패턴 등록 지문 등록 Face ID 등록
프로모션 팝업
홈메인 이동
핀번호 등록
4
5

PATH 로그인 프로세스 Function Description
1
바이오 인증 사용 여부 판단
: 디바이스의 바이오 인증(지문, Face ID) 지원 여부에 따라
바이오 인증 등록 프로세스를 진행
바이오인증
사용여부
로그인 프로세스
실행
스플래시
프로모션 팝업
홈메인 이동
지문인식
여부
얼굴인식
여부
앱 삭제 후 재설치
실행
스플래시
핀번호 입력
로그인 페이지
(일반 로그인)
핀번호 등록
바이오인증
사용여부
패턴 등록 지문 지원 Face ID 지원
지문
사용여부
Face ID
사용여부
지문
등록/사용
Face ID
등록/사용
프로모션 팝업
홈메인 이동
패턴 로그인
여부
1
Yes
No
Next Version

PATH 중복 로그인 시 처리 프로세스 Function Description
*
중복 로그인 시 처리
- 중복 로그인 미지원 (타 디바이스에서 로그인 시 자동 로그
아웃 처리)
- 중복 로그인 시 알림 처리가 되며 로그아웃 처리를 하고 계
정 보호를 위한 메일을 발송
신규 로그인 회원
실행
로그인
기 로그인 회원
앱 실행
여부
디자인 팝업 푸시
로그아웃
비번변경
여부
완료
비밀번호 변경
푸시
(에러 메시지)
로그아웃
로그인
확인 메일 발송
1
2
Yes
No
Next Version

PATH 로그인 오류 처리 및 해제 프로세스 Function Description
1
계정 잠금 알림 팝업
: 해당 이메일 주소로 비밀번호 10회 오류 시 하단과 같이 디
자인 팝업을 표시
2
임시 비밀번호 이메일 발송
: 해당 이메일 주소로 계정 잠김 안내와 함께 임시비밀번호를
발송
3
바이오 인증 사용 여부 판단
: 인증 오류의 타입과는 관계없이 바이오 인증 사용여부를 재
판단하여 인증방식을 등록
1) 지문 및 Face ID를 모두 지원하는 경우
: 로그인 방식을 선택할 수 있도록 로그인 선택 팝업을 띄웁
니다.
2) 지문만 지원하는 경우
: 지문 인증을 사용할지 선택할 수 있도록 지문 인증 선택 팝
업을 띄웁니다.
3) 지문 및 Face ID 등 바이오 인증을 지원하지 않는 경우
: 패턴 인증을 등록할 수 있도록 패턴 등록 페이지로 이동합
니다.
비밀번호 찾기
계정 잠금 알림
팝업
로그인
페이지
비밀번호
10회 오류
비밀번호 찾기
임시비밀번호
생성
임시비밀번호
이메일 발송
로그인
2
1
확인
계정 잠금 안내
로그인 정보 10회 불일치로 인해 계정이 잠겼습니다.
보안을 위해 가입하신 이메일 주소로 비밀번호 초기화 메일이
발송되었으니 비밀번호를 재설정해주세요.
핀번호/패턴/지문/Face ID 5회 오류
핀번호 입력
패턴/지문/Face ID
인증 페이지
핀번호
5회 오류
핀번호 등록
로그인 페이지
(일반 로그인)
바이오인증
사용여부
패턴 등록 지문 지원 Face ID 지원
지문
사용여부
Face ID
사용여부
지문 등록 Face ID 등록
프로모션 팝업
홈메인 이동
3
패턴 5회 오류 or
지문/Face ID 인식 실패
Yes
No
Next Version

PATH 회원가입 및 로그인 프로세스
회원가입 절차
시작
모바일 인증
Y
N
회원가입
완료
인증
모듈
Step 1
Step 2
Y
시작
휴대폰번호/회원번호/*
이메일주소로
로그인
N
DB
홈 이동
Y
로그인 절차
출석체크
출석포인트
지급
입력값
확인 N
회원
DB
Y
휴대폰 번호, 단말정보,
패스워드(암호화) 등 입
력정보 저장
추천인
고유번호 입
력 (선택)
회원
DB
추천인에
추천인 포인트 지급
인증번호
입력
*연동한 경우
SNS로 로그인
입력값 or 연동Key
확인
* 이메일 로그인 및 소셜 로그인은 ‘마이페이지 〉 설정 〉 계정관리’에서
이메일 인증 및 해당 SNS를 연동한 경우에만 해당 방식으로 로그인이 가능합니다.
1
2가지 방식의 로그인 지원
1) 휴대폰번호 or 회원번호 or 이메일주소로 로그인
- 이메일의 경우, ‘마이페이지 〉 설정 〉 계정관리’에서 이메
일 인증을 한 회원만 이메일로 로그인 가능
2) SNS로 로그인
- SNS로 로그인을 하기 위해서는 ‘마이페이지 〉 설정 〉 계정
관리’에서 해당 SNS로 연동을 한 경우에만 해당 SNS로 로
그인 가능
기본정보
입력
1

PATH 비밀번호 변경(초기화) 프로세스
비밀번호
찾기
휴대폰번호/회원번호/*
이메일주소 입력
(스와이프 버튼)
Y
N or 기타 방법 선택시
구매 상품 선택
페이지
상품구매
여부
비밀번호 변경 방식
선택 페이지
정답
Y
N
구매한 상품으로
인증하기
휴대폰 번호로
인증하기
(SMS)
질문 및 답변으로
인증하기
고객센터를 통해서
변경하기
답변
입력
Y
Y
비밀번호
변경 페이지
비밀번호
변경 저장
N
N
인증번호
받기
Y
N
휴대폰 번호 &
생년월일 입력
*
총 5가지의 비밀번호 변경(초기화) 수단을 지원
1. 구매한 상품으로 인증하기
2. 질문 및 답변으로 인증하기
3. 휴대폰 번호로 인증하기
4. 이메일을 통해서 변경하기
5. 고객센터를 통해서 인증하기
* SNS를 통한 인증방식은 SNS 연동시 하나씩 추가
1
휴대폰번호 or 회원번호 or 이메일주소 확인 및 봇 체크 페
이지
1. 휴대폰 번호 or 회원번호 or 이메일 주소 입력
2. 봇 체크 모듈 적용 : MVP에는 캡챠 또는 스와이프 액션을
적용하고 이후 패턴 인식 등 고도화된 방식으로 변경 예정
2
가장 최근에 구매한 상품 2개, 구매하지 않은 상품 18개 이
미지를 랜덤하게 4x5로 뿌려주고 2개를 선택하게끔 페이지
구성
- 기 구매한 상품 내역이 없거나 상품종류가 1개인 경우에는
‘비번 초기화 방식 선택 페이지’로 바로 이동
3 랜덤 질문을 던지고 답변을 선택하게끔 페이지 구성
4
이메일을 통해서 변경하기 방식은 이메일 인증을 한 회원만
사용이 가능합니다.
때문에 이메일 인증을 하지 않은 사용자에게는 해당 인증하
기 방식을 표시하지 않습니다.
*이메일을 통해서
변경하기
(E-mail)
Y
N
이메일 &
생년월일 입력
1
2 3 4

PATH 휴대폰 번호 재인증 프로세스
시작
(자동로그
아웃)
로그인
중복인증
여부 확
인
N
홈 이동
Y
휴대폰 번호 재인증 절차
(타인이 동일한 번호로 정상 가입한 경우)
휴대폰 번호를 교체한
기존 A회원
기존 A회원의 번호를 쓰게 된
신규 B회원
모바일 재인증
인증번호
입력
Y
N
인증
모듈
시작
모바일 인증
Y
N
회원가입
완료
인증
모듈
Y
입력값
확인 N
회원
DB
Y
휴대폰 번호, 단말정보, 아
이디, 이메일,
패스워드(암호화) 등 입력
정보 저장
추천인
고유번호 입
력
회원
DB
Y
Step 1
Step 2
추천인 닉네임에
추천인 포인트 지급
1
푸시 발송 및 확인 여부
: 신규 B회원이 기존 A회원의 번호로 정상 회원가입을 한 경
우, 회원가입이 완료됨과 동시에 기존 A회원에게 푸시 메시
지가 발송됩니다.
기존 A회원이 푸시 메시지를 확인하면 바로 모바일 재인증
페이지를 띄우고 변경된 번호로 재인증을 유도합니다.
인증번호
입력
기본정보
입력
푸시 발송
및 확인 여부
Y
N
1

과제 진행
자신이 기획하고 싶은 서비스의
회원가입/로그인 페이지 스토리보드 작성하기

PATH 웹사이트 배너 Function Description
*
다중 팝업 지원
- 여러 개의 팝업이 동시 뜰 수 있음
: 홈페이지에 뜨는 모든 팝업 사이즈 및 포지션은 동일하며
z-index값으로 노출 순서 조정 필요
1
텍스트 팝업
- 컨텐츠 영역 내 스크롤 처리 필요
2
이미지 배너 팝업
- Image size : 600*600px
- BG 이미지를 여러 장 등록 가능하게 처리
- 2장 이상 등록 시, 좌우 이동 버튼 및 페이지 인디케이터 표
시
- Autoplay 지원 및 Playtime 3,000ms
- 마우스 오버 시 Stop
- 배너 이미지 링크 연결 지원
Text message ~~
오늘 하루 열지 않기 확인
Title
오늘 하루 열지 않기 닫기
1 2
● ●
Height
600px
Height
60px
Width
600px
Button Description
A
[확인 또는 닫기] 버튼
- 텍스트 팝업과 이미지 팝업의 Close 버튼명 주의
A A

PATH 모바일 앱 배너 Function Description
1
프로모션 팝업
- 배너 이미지 영역을 클릭하면 프로모션 상세 페이지로 이
동
- 배너가 여러 개인 경우 좌우 스와이프를 통해서 배너 이동
가능
2
배너 인디케이터
- 프로모션 팝업은 최대 10개까지 동시 띄울 수 있으며 배너
가 2개 이상인 경우에는 이미지 하단에 배너 인디케이터를
표시
Button Description
A
[오늘은 그만보기] 버튼
- 버튼 클릭 시 프로모션 팝업이 닫히고 24시간 이내 프로모
션 팝업을 노출하지 않음
B
[닫기] 버튼
- 버튼 클릭 시 프로모션 팝업이 닫히고 앱 재실행 시에 다시
프로모션 팝업 노출
닫기
오늘은 그만보기 닫기
오늘은 그만보기
A B
1
2 ● ●
● ●

배너 등록 정보
구분 종류 용도 설정 방식 설명
기본정보
게재위치 * 배너 위치 선택 셀렉트 박스
한 관리자에서 여러 곳의 배너를 관리할 경우 배너를 게재할 위치를 선
택합니다.
기업명 * 셀렉트 박스 또는 인풋 박스 매출 및 정산 등을 관리하기 위해 광고를 진행하는 기업을 선택합니다.
캠페인명 * 인풋 박스
기간 * 셀렉트 박스 (캘린더 형식)
기간 내 선착순,
일별 분할 선착순
상태 셀렉트 박스 등록중, 예약, 진행중, 종료
광고 설정
광고비 * 인풋 박스 (숫자만 입력 지원)
노출수 또는 클릭수 * 인풋 박스 (숫자만 입력 지원) 제한 없음 선택(하우스 배너 등의 경우) 지원
노출 순서 * 셀렉트 박스
한 지면에 여러 개의 배너를 게시할 수 있는 경우 지원
숫자가 작을수록 먼저 노출되며 숫자가 중복되는 경우에는 램덤하게
노출 (1-10)
노출 빈도 * 셀렉트 박스 또는 인풋 박스 (숫자만 입력 지원) 기간 내 한 유저에게 몇 번 광고를 노출할지 설정
노출 비중 * 인풋 박스 (숫자만 입력 지원) 여러 배너가 한 슬롯에 노출되는 경우 노출되는 비중을 설정
타겟팅 설정 시간, 위치, 성별, 연령, 통신사 등 타겟팅 형식에 따라 입력 방식 상이함
배너 등록
이미지 등록 업로드 버튼
에디터 등록 에디터 지원
링크 연결
연결 없음, 링크 연결, 공지사항/이벤트
등 선택 *
라디오 버튼 및 연결 방식에 따라 셀렉트 박스 또는 인풋 박스
기타

상품 등록 정보
구분 종류 용도 공통 오프라인 강의 온라인 강의 일반 상품 공연
노출정보
라벨 Front display
조합형(단기/장기 + 입문/초급/초중급/중급/중고급/ 고
급/전문가) + 단일선택형, 택2 가능(신규/쿠폰/할인/이
벤트/무료배송)
- 라벨 생성 관리자 지원
필수 선택값 아님
관리자 코멘트 Front display
기본정보
상품명 * Front display 코스명 코스명 상품명 상품명
속성 * 취소/환불 정책 분기 설렉트 메뉴 : 단과, 패키지
카테고리 * Front 필터링 목적
통합 3 depth 카테고리
- 생성 관리자 지원
요약설명 * Front display
상세설명 Front display
키워드 * Front 검색용 메타태그
상태값 해당 상품의 상태 설정 일반 캠페인의 경우 : 등록중/예약/진행중/종료 상품별로 상태값이 상이합니다.
기간정보 기간 * 취소/환불 처리 등
- 입력 완료 시 설정한 기간 정보를 하단에 자동 표시
- 강의의 경우, 강의시수 표시 병기할 것
일정 정보
- 상태(판매대기/판매중/강의중)별 기간 설정 필요
- 일정 입력방식 고민 필요
1) 구간 선택 방식 지원
2) 캘린더 선택 + 일자별 시간 입력 방식 지원
판매기간
- 상태(판매대기, 사전판매, 판매중 기간 설
정 필요
- 판매 종료일이 없는 상품 존재, 무기한 체
크 버튼 지원할 것
판매기간
- 상태(판매대기, 판매중)에 따른 기간 설정 필요
판매기간
- 상태(판매대기, 판매중)에 따른
기간 설정 필요
가격정보
판매단위 * 해당 상품의 판매단위 선택
가격정보 * Front/Back
특별할인가, 출시할인가, 얼리버드가, 최종마감가, 일반
등록가(정상가) 등록
- 할인율/할인금액 입력 지원
부가세 * Front/Back 과세 여부 및 과세율 설정
판매정보
판매수량 * 필수 입력값 지원 안 함 필수 입력값 필수 입력값
최대구매수량
상품 이미지
대표 이미지 * 이미지 등록
상세 페이지 이미지 등록
상품 상세 상품 상세 연결 상품 상세 페이지 생성 후 링크 연결
상세 정보
브랜드, 원산지, 인증정보, 중량, 용량, 포장방식,
기타정보(상품고시정보 입력)
공연 상품 상세 정보
기타 정보
강사 다중 선택 지원 필수 선택값 필수 선택값 지원 안 함 필수 선택값 아님
담당부서 단일 선택 지원 필수 선택값 필수 선택값 필수 선택값 필수 선택값
기업 담당부서가 기업교육팀인 경우에 한해 설정
담당자 다중 입력 지원 필수 선택값 필수 선택값 필수 선택값 아님 필수 선택값 아님
장소 단일 선택 지원 필수 선택값 지원 안 함 지원 안 함 필수 선택값
구매 시 혜택 포인트/쿠폰/증정품
목표
모객 목표 숫자 입력 지원 필수 선택값 아님
매출 목표 숫자 입력 지원 필수 선택값 아님
메모 메모 인풋 박스 지원 필수 선택값 아님

상품정보제공 고시
전자상거래법 제 13조4항의 규정에 따라 통신판매업자는 상품과 관련한 정보를 소비자에게 고시하여야 함
http://www.law.go.kr/admRulInfoP.do?admRulSeq=2100000036285
품목 고시 내용 품목 고시 내용
디지털 콘텐츠(인터넷 강의 등)
1. 제작자 또는 공급자
2. 이용조건, 이용기간
3. 상품 제공 방식(다운로드, 실시간 스트리밍 등)
4. 최초 시스템 사양, 필수 소프트웨어
5. 청약 철회 또는 계약의 해제 ∙ 해지에 따른 효과
6. 소비자상담 관련 전화번호
공연
1. 주최 또는 기획
2. 주연
3. 관란등급
4. 상영 ∙ 공연시간
5. 상영 ∙ 공연장소
6. 예매 취소 조건
7. 취소 ∙ 환불방법
서적
1. 도서명
2. 저자, 출판사
3. 크기(전자책의 경우 파일의 용량)
4. 쪽수(전자책의 경우 제외)
5. 제품 구성(전집 또는 세트일 경우 낱권 구성, CD 등)
6. 출간일
7. 목차 또는 책소개(아동용 학습교재의 경우 사용연령을 포함)
기타 용역
1. 서비스 제공 사업자
2. 법에 의한 인증 ∙ 허가 등을 받았음을 확인할 수 있는 경우
그에 대한 사항
3. 이용조건(이용가능 기간 및 장소, 추가 비용 등)
4. 취소 ∙ 중도해약 ∙ 해지 조건 및 환불기준
5. 취소 ∙ 환불방법

결제 관련 용어
구분 설명 기타
공급가 외부에서 상품을 매입 또는 공급 받는 경우 해당 상품의 원가
정상가(판매가) 소비자에게 보여주는 정상 판매가격 (권장소비자가)
할인가
할인된 판매가격
* 정상가 할인금액 = 할인가
할인 방식 : 할인율, 할인금액 선택 입력 지원
할인 유형 : 특별할인가, 출시할인가, 얼리버드가, 최종마감가
할인금액 정상가에서 할인된 금액
구매가(구매금액) (정상가 or 할인가) x 상품수량 = 구매금액
상품수량의 경우, 강의 상품을 제외한 일반상품과 공연 상품에만 설정 지원
- 최대 구매 가능 수량 설정 지원
주문금액 정상가 할인금액 + 배송비 + {기타 비용} = 주문금액
결제필요금액 주문금액 할인쿠폰 포인트 = 결제필요금액
모든 정률/정액 할인쿠폰은 구매금액에만 적용됩니다.
배송비 무료쿠폰은 배송비에만 적용됩니다.
모든 포인트는 주문금액을 결제하는데 사용이 가능합니다.
결제금액 주 결제수단을 통해 실 결제한 금액
결제수수료 PG사 수수료
취소금액
환불금액 반품금액 + 배송비 환불 금액 + 쿠폰 환불 금액 + 사업자부담금 = 환불금액
매출 결제금액 - 환불금액 = 매출

상태값 설명
주문중 장바구니에 담겨 있는 상태
결제중 장바구니에서 [결제하기] 버튼을 클릭해서 결제 페이지로 진입한 상태
결제완료 아임포트로부터 결제성공값을 리턴 받은 상태
결제실패 아임포트로부터 결제실패값을 리턴 받은 상태
결제취소 사용자가 결제를 취소한 상태
환불신청 사용자가 환불을 신청한 상태
환불완료 환불처리가 완료된 상태
결제 상태 설명
결제상태 주문중 결제중 결제실패
결제완료
결제취소
환불완료
환불신청

일반 상품 구매 및 결제 Flow
판매대기 판매중, 상품준비중 배송중
배송시작 배송완료
기타 상태 : 판매중지, 판매종료
구매 상태
주문중 결제중
배송기간
결제기간
결제완료
결제취소 환불신청 환불완료
결제 상태
결제실패
Front Btn 구매하기 출시알림
등록중
배송상태
결제상태
상품준비중
주문중 결제중 결제실패
배송시작 배송중 배송완료
교환요청 교환완료
반품요청 반품완료
결제완료
결제취소
환불완료
배송 상태 상품준비중 배송시작 배송중
배송완료
환불신청

상품 배송 상태
상태 서비스 내 버튼 표시 관리자 내 버튼 표시 설명
상품준비중 사용자 결제가 완료되면 구매내역 리스트에 ‘상품준비중’ 상태로 리스트업 됩니다.
포장중
취소는 승인 단계 없이 취소 신청을 하면 바로 취소가 되기 때문에 ＇취소요청’ 단계가 없으며
교환/반품의 경우에는 신청/승인 단계가 있다 보니 교환요청/반품요청 상태가 존재합니다.
포장완료
배송시작
배송중
배송완료(픽업완료)
취소완료
교환요청
교환완료
반품요청
반품완료
교환
취소
교환
반품
선택 취소 전체 취소
선택 반품 전체 반품
일반 상품 배송 Flow
배송상태
결제상태
상품준비중
주문중 결제중 결제실패
배송시작 배송중 배송완료
결제완료
결제취소
환불완료
환불신청

[ 배송 방식 선정 프로세스 ]
소비자 ‘구매하기’ 클
릭
매장 무료 배송 버튼
활성화
유료 배송 버튼
활성화
소비자 ‘결제하기’ 클
릭
‘상품준비중‘ 상태
구매금액이
무료 배송 지원 조건에
부합하는가?
배송지와 배송매장의
거리가 무료 배송 지원 조건에
부합하는가?
Y
N
Y
Y
매장 픽업 버튼
활성화
해당 매장이
매장 무료 배송을
지원하는가?
해당 매장이
매장 유료 배송을
지원하는가?
Y
배송지와 배송매장의
거리가 매장 유료 배송의
지원 조건에
부합하는가?
해당 매장이
C2C 배송을
지원하는가?
Y
N
N N
Y
N
N
해당 매장이
무료 빠른 배송을 지원하는가?
Y
배송가능시간대와
시간별 배송 가능 횟수
조건에 부합하는가?
N
해당 매장이
유료 빠른 배송을 지원하는가?
Y
N
Y
배송가능시간대와
시간별 배송 가능 횟수
조건에 부합하는가?
N
Y
N
예약배송만
지원
배송 시간 선택
해당 매장의 배송방법별 배송가능
시간대와 배송가능횟수를 기준으
로 배송가능 시간 표시
픽업 시간 선택
매장 픽업 가능 시간 표시
배송 시간 선택
해당 매장의 배송방법별 배송가능
시간대와 배송가능횟수를 기준으
로 배송가능 시간 표시
C2C 배송의 경우
처리 방법
‘배송 처리’ 페이지에
리스트업
‘담당자 지정’ 권한 있
는 관리자에 의해
배송 담당자 지정
매장 무료 배송
또는 매장 유료 배송의 경
우 배송 처리 방법
배송 출발
담당 배송원 상품 (포
장 &) 담기
‘배송중‘ 상태 변경
배송 도착
‘배송완료’ 상태 변경
배송 완료
배송 시작 알림
담당자 정보 표시
배송원 평가
콜 발송 후
60초 내에
콜 수락이 되었는가?
배송원이 설정한
배송 조건에 맞는 C2C 배
송원에게 콜 발송
Y
배송원 확정
N
배송원 변경시
변경 담당자 정보 표시
포장 완료

온라인 강의 구매 및 결제 Flow
판매대기 사전판매, 판매중 수강중
결제마감 수강종료
기타 상태 : 판매중지, 판매종료, 폐강
주문중 결제중
수강기간
결제기간
결제완료
결제취소 환불신청 환불완료
결제실패
결제완료
결제취소
환불완료
환불신청
출시알림 수강신청하기 수강신청하기
강의 상태
결제 상태
Front Btn
등록중

공연 상품 구매 및 결제 Flow
판매대기 판매중 공연중
예매마감
(공연 1시간 전) 공연종료
기타 상태 : 판매중지
공연 상태
주문중 결제중
공연기간
결제기간
결제완료
결제취소
환불신청 환불완료
결제 상태
결제실패
결제완료
결제취소
환불완료
환불신청
Front Btn 출시알림 예매하기
등록중
판매종료

포인트 정책 예시
제목 내용
포인트 가치 1P의 가치는 1원이며 현금 등으로 환급할 수 없습니다.
사용 방법 상품 구매 시, 전액 또는 타 결제수단과 함께 사용하여 결제할 수 있으며 최소 1,000 포인트부터 사용이 가능합니다.
유효기간 이벤트 등으로 지급한 포인트의 경우, 약관을 통해 정책으로 그 유효기간을 정합니다.
단, 현금 구매한 포인트의 경우에는 유가증권으로 간주하여 유효기간은 최소 5년입니다.
소멸 정책 포인트의 유효기간은 월별로 관리되고 지급된 월로부터 5년이 지난 후 익월의 말일에 자동적으로 소멸됩니다.
단, 포인트 사용시 유효기간 만료일이 가까운 포인트부터 먼저 차감됩니다.
예) 8월 3일에 지급된 포인트는 5년 이후 9월 31일에 소멸됩니다.
이벤트성
포인트
현금(유가증권성)
포인트

쿠폰 종류
쿠폰 종류 쿠폰 적용 범위 쿠폰 혜택 및 형식 환불 시 처리방법
정액 쿠폰 특정 상품 XX원 할인쿠폰
특정상품을 환불요청한 경우, 특정상품에 적용한 할인쿠폰의 사용금액을 제외한 금액을 결제방식에 따른 환불 우선순위에 따라 환불처리합니다.
ex) 100원짜리 상품을 ‘10원 할인 정액쿠폰’을 사용해 구매 후 환불요청 시, 90원을 결제방식에 따른 환불 우선순위에 따라 환불함
정률 쿠폰 특정 상품 XX% 할인쿠폰
특정상품을 환불요청한 경우, 특정상품에 적용한 할인쿠폰의 사용금액(%)을 결제금액에서 결제방식에 따른 환불 우선순위에 따라 환불처리합니다.
ex) 100원짜리 상품을 ’10% 할인 정률쿠폰’을 사용해 구매 후 환불시, 90원을 결제방식에 따른 환불 우선순위에 따라 환불함
배송비 쿠폰 배송비 배송비 무료 쿠폰
환불요청 시 변경된 구매내역이 배송비 쿠폰의 사용조건에 맞지 않는 경우
1) 환불금액에서 배송비를 제외하고 환불처리합니다.
2) 1)의 경우, 환불금액이 배송비보다 작은 경우, 보유한 포인트에서 배송비 환불 차액을 차감합니다.
3) 2)의 경우, 보유한 포인트 및 잔고가 없는 경우에는 패캠에서 해당 배송비 차액을 부담합니다.
* 패키지 상품의 경우, 정액 쿠폰을 사용할 수 없습니다.
쿠폰 발행
내용 방식 설명 기타
쿠폰 발행
생성 서버에서 발행 갯수에 따라 난수 코드 발행
등록 외부에서 생성한 난수 코드를 서버에 등록 제휴 프로모션 진행 시 사용
쿠폰 지급
DB에서 선택 방식 개발팀에 요청을 통해 반복된 쿠폰 지급 방식을 생성
파일등록 액셀 파일 업로드
개발등록 개인회원의 이메일을 입력하여 지급 한 행에 한 이메일씩 입력하여 다수 회원 지급 가능
전체회원 전체 회원에게 일괄 지급

일반 상품 취소/환불 정책
구분 내용 환불 방법 기타
일반상
품
취소 전액 환불
- 반품 받은 날로부터 3 영업일 이내 환불처리
- 공급 받은 날로부터 3개월 이내, 그 사실을
안 날 또는 알 수 있었던 날로부터 30일 이내
반품 가능
반품
상품 수령 후 7일 이내 100% 환불
반품 시 배송비는 소비자가 부담 (단, 판매자 귀책사유의 경우 판매
자 부담)
결제완료
배송완료 후
7일 이내
일반 상품의 경우
상품준비중 배송완료
취소 가능
취소 신청 취소는 구매완료 후 상품 주문 및 발주가 시작되기 전까지만 가능합니다.
즉 취소는 ‘결제완료, 상품준비중’ 상태에서만 가능하고 ‘배송시작’ 상태가 되면 불가합니다.
반품 비용 · 고객의 귀책사유로 반품 시 : 배송비는 고객이 부담합니다.
· 회사의 귀책사유로 반품 시 : 고객센터의 안내에 따라 별도의 비용부담 없이 반품하실 수 있습니다.
반품 신청 기준일 · 반품은 상품 수령 후 7일 이내 까지만 가능합니다.
· 상품의 내용이 표시·광고의 내용과 다른 경우에는 상품을 수령한 날로부터 3개월 이내, 그 사실을 안 날 또는 알 수 있었던 날로부터 30일 이내에 반품이 가능합니다.
반품 제한사항 · 회원에게 책임 있는 사유로 상품 등이 멸실 또는 훼손 등으로 재판매가 불가한 경우
· 회원의 사용 또는 시간경과, 일부 소비로 상품 등의 가치가 현저히 감소한 경우
· 시간이 지나 재판매가 곤란할 정도로 상품 등의 가치가 현저히 감소한 경우
· 복제가 가능한 상품 등의 포장을 훼손한 경우
· 회사가 상품 등의 청약철회 등의 제한에 관해 사전에 고지한 경우
· 그 밖에 거래의 안전을 위하여 법령으로 정한 경우
배송시작
배송중
반품 가능

온라인 강의 취소/환불 정책
단과
취소 수강기간 7일 미만 전액 환불
- 수강시작일은 결제일시(메일발송시점)를 기준으로 함
- 환불 의사를 밝힌 다음날부터 계산하여 환불
- 환불금액은 수업일을 기준(반올림)으로 산정
- 환불금액의 10원 미만은 절삭
- 반환 사유 발생 시 3 영업일 이내 환불
- 90일 이내 또는 문제를 발견하신 날로부터 30일 이내 일할
계산 공제 후 환불
해지
수강기간 1/3 경과 전 : 수강료 2/3 환불
수강기간 1/2 경과 전 : 수강료 1/2 환불
수업시간 1/2 경과 후 : 환불금액 없음
패키지
취소 수강기간 7일 미만 전액 환불
해지
수강기간 7-10일 미만 : 수강료 2/3 환불
수강기간 11-15일 미만 : 수강료 1/2 환불
수강기간 15일 초과 : 환불금액 없음
수업시작일 유료수강기간
종료일 (30일)
온라인 단과 과정의 경우
수강기간
7일째
수업시간
1/3 경과
수업시작일
온라인 패키지 과정의 경우
수강기간
7일째
수강기간
10일째
수강기간
15일째
2/3 환불
1/2 환불
환불 없음
취소가능
2/3 환불
1/2 환불
수업시간
1/2 경과
취소가능
환불 없음
결제일시
결제일시 유료수강기간
종료일 (30일)

공연/세미나/컨퍼런스 취소/환불 정책
공연
세미나
컨퍼런스
취소
공연 10일 전 전액 환불
공연 3일 전까지는 예매 후 24시간 이내 취소 시 전액 환불 (단,
공휴일 등 비영업일은 시간계산에서 제외)
- 환불금액의 10원 미만은 절삭
- 환불 요청 시 3 영업일 이내 환불
해지
공연 7일 전 : 10% 공제 후 환불
공연 당일 시작 1시간 전 : 90% 공제 후 환불
공연
10일 전
공연 당일
공연/세미나/컨퍼런스의 경우
공연
7일전
공연
3일전
10% 공제 후 환불
공연
1일전
취소 가능
결제일시
공연 1시간 전
예매 후 24시간 이내 취소 가능

과제 진행
자신이 기획하고 싶은 서비스의
주요 페이지 스토리보드 작성하기

UI Gird 설계 인증
권한
(View, Setting)
어드민 기획 시 고려사항
보안
(2단계 인증 등)
준법
개인정보보호
요구사항분석
및 정의
우선순위 편의성 & 불편함
통계
(대시보드)
웹 프런트 페이지나 모바일 화면은 볼 수 있기 때문에 어떻게든 참고해서 기획을 할 수 있겠는데
관리자(Admin) 페이지는 볼 수가 없다 보니...

시간과 상태값
시간과 상태값을 통한 캠페인 운영 신규 캠페인
등록
등록중
설정 시 시작일이
현재 시점보다 미래인
경우
예약
시작일
도래
종료일
도래 여부
예약 진행중 종료 삭제
등록중
예약 진행중 종료
삭제
상태 변경 프로세스
상태 변경 가능 경로
예외적인 상황에서 개발팀에 요청하여 롤백 지원
23 ▼ : 59 ▼
시간 선택
저장
취소
오늘
캠페인 기간
상태 등록중 ▼
2020 . 08 . 03 00 : 00 2020 . 08 . 03 00 : 00
상태
등록중
editing
예약
reserved
진행중
work in progress
종료
completed
삭제
deleted
시간 Start Date End Date
기능 임시저장 자동시작 자동종료

사용자ID
(userId)
상품고유번호
(productid)
주문번호
(orderId)
고유 ID 생성
결제번호
(purchaseId)
쿠폰번호
(couponId)
Etc.

서버
배치서버
DB서버 푸시서버 통계서버 ● ● ●

Monolithic vs. Microservice Architecture

PATH UI Grid 설명
Menu1 Menu2 Menu3 Menu4 Meun5 ●●●
Logo
Content Title Area
3
Sub Menu1
Sub Menu2
Sub Menu3
Sub Menu4
Sub Menu5
상단 네비게이션 바(GNB)
〈
사이드 메뉴 바(SNB)
게재 위치 제목 지역ㅣ기간 시작일시 ▼ 종료일시 ▼ 상태 PV ▼ UV ▼ 관리자 최종 수정 ▼
서비스 공지사항 제목 - - - 등록중 ▼ - - ID 2022-02-09 12:00
관리자 공지사항 제목 - - - 등록중 ▼ - - ID 2022-02-09 12:00
서비스 공지사항 제목 전체ㅣ동시 2022-02-09 12:00 - 예약 ▼ - - ID 2022-02-09 12:00
관리자 공지사항 제목 대륙별ㅣ타임존 2022-02-09 12:00 2022-02-09 12:00 예약 ▼ - - ID 2022-02-09 12:00
서비스 공지사항 제목 국가별ㅣ지역별 2022-02-09 12:00 2022-02-09 12:00 예약 ▼ - - ID 2022-02-09 12:00
관리자 공지사항 제목 N 전체ㅣ동시 2022-02-09 12:00 2022-02-09 12:00 진행중 ▼ 12,345 2,456 ID 2022-02-09 12:00
서비스 공지사항 제목 N 전체ㅣ타임존 2022-02-09 12:00 2022-02-09 12:00 진행중 ▼ 12,345 2,456 ID 2022-02-09 12:00
관리자 공지사항 제목 대륙별ㅣ동시 2022-02-09 12:00 2022-02-09 12:00 진행중 ▼ 12,345 2,456 ID 2022-02-09 12:00
서비스 공지사항 제목 국가별ㅣ동시 2022-02-09 12:00 2022-02-09 12:00 종료 ▼ 12,345 2,456 ID 2022-02-09 12:00
관리자 공지사항 제목 국가별ㅣ타임존 2022-02-09 12:00 2022-02-09 12:00 종료 ▼ 12,345 2,456 ID 2022-02-09 12:00
검색
전체 게재면 ▼
전체 123 ▼┃ 등록중 34 ┃ 예약 13 ┃ 진행중 34 ┃ 종료 34 ┃ 휴지통 34
4
3 1
9 :
상태 업데이트
일괄 변경 ▼ 삭제
4
3 1
9 :
상태 업데이트
일괄 변경 ▼ 삭제
+
컨텐츠(Contents) 영역
타이틀 영역
주요 버튼 영역
주요 버튼 영역
10개씩 ▼
필터링 및 검색 영역

PATH UI Grid 설명_2
Logo
공지사항 등록일시
공지 제목 표시 N 2022-02-08 17:00
공지 제목 표시 N 2022-02-08 17:00
공지 제목 표시 2022-02-08 17:00
공지 제목 표시 2022-02-08 17:00
공지 제목 표시 2022-02-08 17:00
공지 제목 표시 2022-02-08 17:00
공지 제목 표시 2022-02-08 17:00
공지 제목 표시 2022-02-08 17:00
공지 제목 표시 2022-02-08 17:00
공지 제목 표시 2022-02-08 17:00
공지사항
나의 계정
서비스 정책
3
1
Height와 Margin
- 영역 Height
: GNB와 SNB의 Bar 높이, Title 영역, 필터링 및 검색 영역,
주요 액션 버튼 영역, List 영역 등의 Height를 모두 동일한
높이값으로 맞춤
- 버튼 Margin
: 필터링 및 검색 영역과 주요 액션 버튼 영역에서 버튼의 상
하좌우 마진값을 동일한 마진값으로 맞춤
2
Scroll Area
- 파란색 점선 영역이 스크롤 영역이며 스크롤은 마우스 이
동시 표시되고 이동이 없으면 5초 후 사라짐
서비스 광고 회원 코인 보고서 관리자
3
전체 123
공지사항
검색
4
3 1
9 :
4
3 1
9 :
〈
모두 읽은 것으로 표시
모두 읽은 것으로 표시
컨텐츠(Contents) 영역
1
2

(개정) 알면 알수록 어려운 서비스 기획 뽀개기!

(개정) 알면 알수록 어려운 서비스 기획 뽀개기!

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to (개정) 알면 알수록 어려운 서비스 기획 뽀개기!

Similar to (개정) 알면 알수록 어려운 서비스 기획 뽀개기! (20)

More from YOO SE KYUN

More from YOO SE KYUN (20)

(개정) 알면 알수록 어려운 서비스 기획 뽀개기!