W6D1 & W7D4 | 지그재그 플로우 차트 | 코드스테이츠 PMB 12기

 

지그재그

지그재그는 2015년 6월 서비스를 시작하였고 현재 거래액이 1조 원 돌파한 기업이다. 카카오스타일이 운영을 하고 있으며, 의류 카테고리를 넘어 스타일 전 영역으로 확장을 하려는 계획을 세우고 있다. 

 

 

오늘 강의를 바탕으로 본인이 선택한 프로덕트에서 유저가 할 수 있는 행동에 대한 Flow Chart를 간단하게 만들어 봅시다.

---

먼저, 최근에 옷을 구매한 '지그재그'를 선택하여 장바구니에서 결제를 하는 Flow를 작성을 하였다. 유저가 할 수 있는 행동은 굉장히 많으나 보통은 장바구니에 담은 후 결제를 진행을 하는 것 같아 이 플로우를 정했다. 

 

 

 

 

 

 

오늘 강의를 바탕으로 본인이 선택한 프로덕트의 UI, 클라이언트, 서버, DB가 각각 어떻게 보이고 작동할지 예상하여 적어 봅시다.

---

UI: 

 

아래는 기존 회원이 지그재그에서 장바구니를 통해 구매를 하는 플로우의 UI이다.

 

 

클라이언트, 서버, DB: 

 

유저가 클라이언트(앱)를 통해 액션(구매하기)을 취하면 서버는 관련 액션에 따른 응답을 처리하며 DB 유저의 포인트, 주소, 등록된 결제 수단 등을 서버의 요청에 따라 UI에 위치한다. 주문을 완료한 이후에는 관련 정보 - 결제정보, 날짜, 결제금액 등을 DB에 업로드를 한다. 또한 이 외에도 결제 api도 사용이 된다. 

 

 

 

 

 

 

W7D4

---

 

전 과제보다 더 자세하고 꼼꼼하게 작성을 해보았다.  UI에 표시되는 CTA 표시 후 API 및 DB의 백엔드 과정까지 그려보았다. 사실 플로우 차트에는 API를 넣지는 않는 것으로 아는데 유저의 flow에 대한 API와 데이터베이스의 연결을 잘 표시하고 싶어서 넣었다. 

 

 

위의 사진은 이미 회원가입을 한 유저가 상품 선정 후 장바구니에 담는 UI 및 flowchart를 그려보았다. 지그재그의 가장 큰 장점인 개인화 상품 추천을 그려보았는데 AWS 제품을 잘 사용을 하는 것 같다. 

 

AWS 지그재그 사용

 

 

 

이 부분은 구매 과정에 대한 UI 및 flowchart이다. 

 

 

---

이전 과제에 대한 회고여서 과제 완성을 빨리 할 수 있을 것으로 예상을 하였으나 전혀 아니었다. API가 유저의 프로세스에 일일이 관여하는 것을 알게 되었고 관련 API와 컨택을 하는 백엔드를 하나하나 찾는데 시간이 꽤 걸렸다. 물론 이 모든 프로세스를 다이어그램 안에 표시를 하지는 않았다.