[코드스테이츠 PMB14] 스타벅스 충전하기 서비스에 클라와 서버와 DB 다시 생각해보기

오늘은 지난 포스팅을 다시 회고하면서 수정과 보충을 해보려고 합니다. 스타벅스 충전하기 서비스 플로우를 분석해본 그날 이후 2주간 기초적인 개발 지식을 배웠습니다. 구글 애널리틱스 활용, 린 분석, 공공데이터를 활용한 데이터 시각화(데이터 리터러시), html/css/자바스크립트, 앱의 형태(네이티브 앱, 하이브리드 앱, 웹 앱), API, Git 등... 여전히 어려운 개념이지만 실무에서 업무를 진행하면서 더욱 체화할 수 있다고 믿어요.... 믿습니다....  

 

그렇게 학습한 내용을 토대로 지난 포스팅을 다시 보고, 유저의 행동을 다시 그려보고, Flow chart를 만들어보려 합니다. 그리고 각 이벤트마다 UI, 클라이언트, 서버, DB가 각각 어떻게 보이고 작동할지 예상해보겠습니다. 

---

지난 글 다시보기에 지금 생각을 덧붙여보자

 

지난번 짧게 기능 명세서를 다뤄본 적이 있습니다. 그날 기능명세서를 그리면서 "이것도 얘기해야 할 것 같은데?", "이런 변수도 있는데 어떻게 기재해야 하지?" 고민만 하고 그렇게 후다닥 글을 마무리했었습니다. 그리고 프로덕트 내에서 회원가입이라는 한 흐름을 겪는데도, 회원가입 시 필요한 요소, 기존 가입 이력이 있을 때의 케이스, 아이디가 중복될 때, 유출이 쉬운 비밀번호(1234, qwer)를 입력했을 때 등 회원 정책 설계 내에서 정말 많은 플로우 설계들이 필요하다는 걸 배우게 됩니다.

 

출처: SSG 스타벅스

 

오늘은 스타벅스의 카드 충전 서비스를 꼼꼼히 둘러보며 플로우차트를 그려보려고 합니다. 플로우 차트 내에서 UI, 클라이언트, 서버, DB가 각각 어떻게 보이고 작동할지 예상해볼게요. 

*이번 글에서는 이미 어플리케이션에 등록된 스타벅스 카드에 대한 충전 서비스를 살펴볼 예정입니다. 

 

+

먼저 스타벅스 앱은 네이티브 앱입니다. 스타벅스는 왜 네이티브 앱으로 개발했을까요?

첫 번째: 더 빠르고 안정적이므로 더 나은 유저 경험을 제공합니다. 

스타벅스에 가서 주문을 한다고 생각해볼게요. (사이렌오더 X) 점원에게 원하는 메뉴를 말하고 스타벅스 앱으로 결제를 하려고 할 때 느리게 결제 바코드가 뜬다면 유저는 어떨까요? 뒷사람이 더 기다릴까 봐 초조할 것 같습니다. 네이티브 앱의 안정적이고 빠른 로딩 속도의 장점을 활용할 필요가 있습니다.

두 번째: 디바이스에 액세스 권한을 가질 수 있습니다.

스타벅스는 소비자의 소비 패턴을 잘 파악하고, 이 기능을 활용한 것 같습니다. 소비자는 '스타벅스 e-Gift Card 선물하기' 서비스를 사용할 때 기기에 저장된 연락처를 가져와 선물을 보낼 수 있습니다. 이뿐만 아니라 결제 시 바코드가 보이는 화면 밝기를 자동으로 최대로 올릴 수도 있습니다. 

세 번째: 다른 형태의 앱보다 더 강화된 보안을 제공합니다.

네이티브 앱은 웹 앱 등 다른 앱에비해 더 높은 보안을 제공하기에 유저의 개인정보를 더 잘 보호할 수 있습니다. 특히 결제, 스타벅스 카드에 충전된 e-머니 등을 고려했을 땐 네이티브 앱이 더욱 안정적일 듯합니다.

 

1. 충전 관련 용어 정의하기

스타벅스의 카드 충전 서비스 설명

스타벅스의 카드 충전 서비스는 매장, 스타벅스 홈페이지와 모바일 앱을 통해 충전할 수 있으며 일반 충전과 자동충전 두 가지 방식으로 충전할 수 있습니다. 필요시마다 충전금액과 결제수단 등의 정보를 입력하여 즉시 충전할 수 있으며, 충전 금액과 결제수단에 대한 서비스 정책이 설계되어야 합니다. 

구분	용어	설명
고객	스타벅스 카드	'스타벅스 카드'란 회사가 정의한 기술사양에 따라 회사가 인증한 Chip 또는 Application을 내장하고 스타벅스 카드 브랜드를 부착한 카드로 선불 결제할 수 있는 수단임과 동시에 고객이 “별”을 적립하여 서비스를 정상적으로 이용할 수 있도록 회사가 승인한 카드로서 회사가 발급
	고객	- 실물 카드를 소지함으로써 이 약관에 따라 스타벅스가 제공하는 카드 충전 서비스를 받는 일반 소비자를 의미 - 서비스를 자신의 스마트폰, PC 등 단말기에 설치하거나 접속함으로써  - 고객는 매장에서 스타벅스 카드를 구입, 충전하거나 기타 정당한 방법으로 소지한 자를 말하며, '회원'과 '비회원'을 모두 포함
	회원	고객 중 회사의 홈페이지 등을 통해 이용 약관과 개인정보의 수집, 제공 및 활용에 관한 동의서에 동의하고, 소지한 스타벅스 카드를 등록한 자를 의미
	비회원	회원가입을 하지 않고 회사가 제공하는 서비스를 이용하는 자를 의미(카드의 거래내역만 확인 가능, 스타벅스 리워드 혜택은 제공되지 않음)
	충전	소비한 스타벅스 카드에 일정 금액을 충전하는 행위를 말함 - 충전에는 '최초 충전', '재충전'이 있음 - 재충전에는 '일반 충전'과 '자동 충전'이 있음
	충전금액	<일반 충전> - 최초충전 금액 및 단위 : 5,000원, 10,000원~500,000원 (1만원 이상부터는 만원 단위로 충전가능) - 재충전 금액 및 단위 : 10,000원~550,000원 (만원 단위/최대 잔액 55만원 내에서 선택가능) - 재충전은 1회에 최대 55만원 까지 충전 하실 수 있으며, 충전 후 합계액이 55만원을 초과 할 수 없습니다. - 매장에서 최초 충전 시에는 충전금액을 5천원으로 선택 가능합니다. - 5만원 충전 시 BOGO 쿠폰 발급은 자동충전 설정 혜택으로 일반충전 시에는 발급되지 않습니다.
		<자동 충전> - 자동 충전 금액 및 단위 : 10,000원 ~ 550,000원 (만원 단위/ 최대 잔액 55만원 내에서 선택가능) - 자동 충전은 1회 최대 55만원까지 충전하실 수 있으며, 충전 후 합계액이 55만원을 초과할 수 없습니다. - 한번에 5만원 이상 자동 충전 기능 설정 시, 금액 충전 완료 시마다 BOGO e-쿠폰이 발급됩니다. 쿠폰은 충전 완료 후 익일 발급되며, 충전 금액 합산을 적용하지 않습니다. (결제 건당 5만원 기준)
	결제수단	<일반 충전> - 신용카드 (개인 및 법인 등의 모든 신용카드) - 휴대폰 소액결제 - 현금** - 자기 앞 수표(10만원 권만 가능)** * 충전 불가 결제 수단(상품권, 스타벅스에서 발행한 각종 쿠폰, 스타벅스 카드, 직불카드)  ** 매장일 경우(인 듯 합니다... / 실시간 계좌이체도 있지만 제가 임의로 뺐습니다. 더이상 아닌 듯해서요.)
		<자동 충전> - 신용카드 (개인 및 법인 등의 모든 신용카드) - 휴대폰 소액결제 * 신용카드, 휴대폰 소액결제를 제외한 모든 결제수단

출처: https://www.starbucks.co.kr/msr/scard/charge_information.do

 

2. 재충전을 하고자하는 사용자 시나리오 정의하기

5W1H으로 사용자 관점에서 서비스를 경험할 수 있도록 유도합니다. 회원이냐 비회원이냐에서 사용자 시나리오는 달라질 수 있기 때문입니다. 5W1H에서 한 가지 요소가 달라져도 사용자가 원하는 것이 무엇인지, 사용자가 어떤 행동을 해야 하는지 다르게 설정해야 할 필요가 있습니다. 저는 '회원'이 자동/일반 충전을 하는 시나리오로 아래와 같이 정의하였습니다. 

 

회원은 BOGO쿠폰을 받기 위해 페이 페이지에서 신용카드/휴대폰으로 자동 충전을 한다. 

회원은 페이 페이지에서 신용카드/휴대폰으로 일반 충전을 한다.  

 

+

기존 회원가입이 된 유저가 스타벅스 카드에 충전을 하기 위해 할 수 있는 행동 더 구체적으로 나뉠 수 있을 것 같습니다. 이때 행동의 변수를 함께 고려합니다. (PG사로 넘어갔을 때 변수(카드 한도초과 등)는 다루지 않습니다.) 

1️⃣ 스타벅스 앱 작동 > PAY 로 이동 > 등록된 카드 없음 

2️⃣ 스타벅스 앱 작동 > PAY 로 이동 > 등록된 카드 중 충전할 카드 선택 > 자동 충전 > 기준 하한 자동 충전 > 기준 잔액 선택 > 자동 충전 금액 선택 > 결제 수단 선택 > CTA 버튼 > PG 사 > 완료

3️⃣ 스타벅스 앱 작동 > PAY 로 이동 > 등록된 카드 중 충전할 카드 선택 > 자동 충전 > 월 정액 자동 충전 > 자동 충전일 선택 > 자동 충전 금액 선택 > 결제 수단 선택 > CTA 버튼 > PG 사 > 완료

4️⃣ 스타벅스 앱 작동 > PAY 로 이동 > 등록된 카드 중 충전할 카드 선택 > 일반 충전 > 충전 금액 선택 > 결제 수단 선택 > CTA 버튼 > PG 사 > 완료

5️⃣ 스타벅스 앱 작동 > PAY 로 이동 > 등록된 카드 중 충전할 카드 선택 > 이탈

 

3. 데이터 정의하기

스타벅스 카드 충전하기 서비스를 제공하기 위해 필요한 데이터를 항목별로 나열함으로써 데이터를 정의합니다. 다른 구성원들과 협업 시에 소통이 원활하며 불필요한 데이터를 거를 수 있는 수단으로 활용합니다. 

 

테이블 설명: 자동/일반 충전 페이지를 구성하는 데이터 항목

구분	항목	조건	비고
자동 충전	자동 충전 옵션	기준 하한 자동 충전 / 월 정액 자동 충전 중 택 1	필수 값
	자동 충전 개념 설명	기준 하한 자동 충전 / 월 정액 자동 충전	-
	자동 충전일	최소 1개 필수 선택, 최대 2개 까지 선택 가능	필수 값
	자동 충전 금액	1만원 / 3만원 / 5만원 / 10만원 / 다른 금액 중 택 1	필수 값 *다른 금액 선택 시 모달 팝업으로 1만원 단위로 숫자 입력(1~55까지)
	결제 수단	신용카드 / 휴대폰 중 택 1	필수 값
일반 충전	충전 금액	1만원 / 3만원 / 5만원 / 10만원 / 다른 금액 중 택 1	필수 값 *다른 금액 선택 시 모달 팝업으로 1만원 단위로 숫자 입력(1~55까지)
	결제 수단	신용카드 / 휴대폰 / SSGPAY 중 택 1	필수 값
	충전 후 카드 잔액	기존 보유 금액에 예상 충전 금액 표시	필수 값

 

4. 플로우 정의하기

스타벅스 카드 충전하기 서비스를 제공하기 위해 필요한 데이터를 항목별로 나열함으로써 데이터를 정의합니다. 다른 구성원들과 협업 시에 소통이 원활하며 불필요한 데이터를 거를 수 있는 수단으로 활용합니다. 

스타벅스 카드 충전하기 서비스 정책 설계(실습 과제)

 

1️⃣ 스타벅스 카드 충전하시의 사용자 인터페이스(UI) 

 

2️⃣ 클라이언트 - 서버는 어떻게 구조할까?

클라이언트: 이 사람 스타벅스 카드에 얼마 있는지 보여줘
서버: 로그인 정보를 가지고 있다가 요청이 들어오면 데이터베이스로 가서 이 사람의 로그인 정보 확인, 이 사람의 거래 잔액을 제공
⬇️
클라이언트: 이 사람이 일반 충전하고 싶대
서버: 일반 충전할 때 요청을 보내오는 API(일반 충전을 해주는 기능) 개발
클라이언트: API 사용
⬇️
이사람: 결제...
서버: 앱 서버에서 데이터 베이스로 데이터를 전송
⬇️
클라이언트: 충전한 내용을 업데이트해줘
서버: 데이터 인 앱 서버
...

 

+

1. 페이 페이지

페이 페이지로 이동할 때 클라이언트는 서버에게 회원DB를 호출합니다. 데이터베이스에서 사용자 정보를 가져옵니다. 이때 API <GET> 명령어로 개인정보 보안에 유의해야 하므로 서버에서 호출할 때만 사용할 것으로 추측해봅니다! 

 

2. 충전 유형 ~ PG사

가져온 데이터를 기반으로 클라이언트의 화면이 바뀝니다. 특히 '일반 충전'에서는 충전금액에 따라 '예상 카드 잔액표시'가 달라지는데 이때 앞서 가져온 데이터를 토대로 사용자가 선택하는 금액에 따라 잔액 표시 화면을 바꿔줍니다.

이때 서버와의 연결은 따로 없이 앞서 받은 데이터를 클라이언트가 직접 가지고 있을 듯합니다. 이때 클라이언트에 저장된 데이터 + 변경 값(금액 선택)을 결과로 UI 화면에 보여줍니다. 

 

3. 충전 완료

PG 사를 통해 결제완료 내용에 대한 데이터가 서버로 전송되고 서버는 기존 회원 DB에<PUT> 명령어로 유저가 결제한 충전 금액을 저장합니다. 그리고 다시 업데이트된 데이터를 서버에서 클라이언트로 발송해 UI 화면에 최종 보유한 금액을 띄웁니다. 

 

---

회고

2주간 나름 기본 지식을 배웠다고 그런지 플로우 차트를 처음 그릴 땐 개념 자체가 너무 막연했는데, 지금은 그 과정에서 클라이언트-서버-DB 간의 관계가 어떻게 작동하는지 어느 정도 윤곽이 잡히는 듯합니다. 매 화면마다 클라이언트와 서버가 연결하는 것도 아니고, 처음 클라가 서버에 데이터를 요청했을 때 그 데이터를 간직해 클라가 UI를 바꾸는 구조라는 것도 조금 이해했고요. 조금 두근거리네요. 막막했던 개념을 조금이라도 이해한 듯해서요...  

 

이번에는 스타벅스 카드 충전에만 집중했으니 망정이지, PG사 까지 건드렸다면 ,,, 전 이번 과제 포기했을 듯싶어요. PG 사 결제 플로우 차트까지 분석하게 되면 정말 머리 복잡할 듯합니다. 참고자료를 보면  간편 결제(카카오페이 등)으로 이어지면 더욱이 복잡해집니다. 앞으로 어떤 망망대해를 만날지는 모르겠지만 이번 W7 도 어찌어찌 잘 끝냈습니다. 이번 주 영광은 저의 피드백 페어님과 W2 피드백 페어님께...(페어님들 덕분에 과제 어떻게 보충하면 좋을지 의견을 많이 얻을 수 있었어용 🌝 🌝)