본문 바로가기

코드스테이츠 PMB/Daily

[코드스테이츠 PMB 17기 W6D1]브랜디의 작동 과정 파악하기(Feat. Flow Chart)

*본 게시글은 PC환경에서 보시기를 권장드립니다.

 

들어가며

 

오늘은 W6D1. 드디어 개발 관련 지식에 들어가게 되었다.

PM은 정량화된 데이터를 기반으로 판단하기에 어떤 데이터를 추출하고 분석해야하는지 정확히 아는 것이 굉장히 중요하다. 이에 첫 걸음으로 데이터 분석 단계, 툴 등을 가볍게 배웠으며 해당 학습을 통해 고객이 할 수 있는 행동을 이해하고, 그 행동에 따라서 프로덕트 내부에 설계된 시스템의 작동 과정을 파악해보도록 하겠다.

 

인기쇼핑몰을 한번에, 브랜디
스타일맞춤 인기상품이 가득
오늘출발 내일도착 하루배송까지!

 

MBTI 중 끝장 즉흥P인 본인은 여행을 앞두고 늘 미리 주문해야지..주문해야지하다 결국 당일 하루이틀 전 빠른 배송이 가능한 패션 플랫폼 '브랜디'를 자주 사용하곤 했었다. 이제 나이가 나이다 보니 해당 플랫폼에서 제공되는 상품의 질이 만족스럽지 못하여 더는 사용하지 않는 플랫폼이 되어버렸지만...한 때 자주 애용했었고, 요즘도 가끔 급할 때 잘 사용하고 있기에 오늘의 프로덕트로 선정하게 되었다.

< 목차 >
1) 고객이 할 수 있는 행동에 대한 Flow Chart
2) 1번에서 선택한 행동 시 UI, 클라이언트, 서버, DB가 각각 어떻게 보이고 작동할지 예상

(해당 과제는 W7까지의 학습완료 후 회고용으로 돌아볼 Before 과정으로, 신빙성이 전혀 없는 뇌피셜로 작성된 게시글이라는 점을 먼저 알려드린다.)


Flow Chart

 

브랜디 어플 실행 후 상품 구매까지 일련의 과정 즉 Flow Chart를 간략하게 구현해보았다.

크게 상품탐색,선택,결제(구매)로 구분해보았다.

 

 


UI, 클라이언트, 서버, DB 작동 예상해보기

▶ 상품 탐색(검색,카테고리 선택)

  • UI

  • 클라이언트

유저가 검색어 입력 또는 카테코리버튼을 클릭했을때 해당 정보를 서버에 전송 / 서버에서 정보를 받은 뒤 화면(UI)에 출력

  • 서버 

클라이언트에서 받은 정보를 확인 후 데이터베이스(DB)에 요청/ DB에서 일치하는 상품 정보들을 받은 후 클라이언트에 전송

  • DB

저장되어있는 모든 등록 상품 정보 중 검색어 또한 선택한 카테고리에 해당하는 상품 리스트를 서버에 전송


▶ 상품 선택(상세 정보, 옵션 선택)

  • UI

  • 클라이언트

유저가 특정 상품을 선택하면 해당 데이터를 서버에 전송/ 서버에서 받은 데이터를 UI에 출력(옵션 선택 동일)

  • 서버

클라이언트로 부터 받은 특정 상품에 대한 데이터를 DB에 요청/ 전송받은 데이터와 일치하는 상세페이지를 클라이언트에 전송/ 옵션: 클라이언트로부터 전송받은 해당 옵션을 서버에 저장

  • DB

저장된 모든 상품 데이터 중 서버로 부터 요청받은 특정 상품 데이터를 추출 후 서버로 전송

 

▶ 결제

  • UI

*  클라이언트 1번→서버 1번→DB 1번→클라이언트 2번→서버2번∽ 순으로 진행됨

  • 클라이언트

1.선택한 제품에 대한 정보를 서버에 전송 

2. 서버로부터 받은 금액, 유저의 할인 혜택 데이터를 UI에 출력→할인 선택 후 결제 정보입력 시 해당 정보를 서버에 전송

3. 서버로부터 받은 결제 승인 여부에 대한 결과를 UI에 출력

 

  • 서버

1. 전송받은 제품에 대한 금액, 유저의 데이터(쿠폰 및 할인혜택을 위해) 요청

2. 전송받은 결제 정보에 대한 승인 여부를 조회 후 클라이언트에 전송 

  • DB

1. 저장된 데이터 내 해당 제품의 금액, 유저의 데이터를 서버에 전송

2. 데이터 내 주문 정보 및 결제 정보를 저장