[코드스테이츠 PMB 11기]펫프렌즈의 Flow Chart와 동작 _W7D4

 

[코드스테이츠 PMB 11기]펫프렌즈 개발 관점으로 뜯어보기_W6D1

지난포스팅에서 펫프렌즈의 flow chart를 그리고 UI, 클라이언트, 서버, DB의 동작에 대해 살펴보았다. 오늘은 그때를 회고하며 새로 배운 내용을 바탕으로 조금 추가해보려한다.

 

좌)수정 전 flow / 우)수정 후 flow

지난 포스팅에선 로그인과 회원가입 과정을 생략했었는데 이번 회고에선 추가 해 봤다. 로그인이력이 있으면 자동으로 로그인이 되고 없으면 로그인하라는 팝업이 뜨며 로그인 페이지로 이동한다. 이때 취소하기를 누르면 제품을 구매할 수 없다. 로그인 페이지에서도 아래의 사진과 같이 네이버와 카카오톡을 이용한 오픈 API로 빠르게 로그인 하거나 이메일로 회원가입을 선택 후 장바구니 담기로 이어진다. 플로우차트를 만들며 펫프렌즈에서 결제페이지까지 가는 과정이 조금 번거롭다는 생각이 들었다, 그 이유는 비회원 결제가 안되고 회원들도 장바구니에 담아야지만 결제가 가능했기 때문이다. 

 

Q1. 왜 오픈API를 이용했을까?

네이버나 카카오의 로그인 API를 이용함으로써 이용자에게 복잡하고 번거로운 회원 가입 절차 없이 편하게 서비스를 이용할 수 있는 UX를 제공할 수 있고, 사업자는 네이버와 카카오 회원들의 유입과 함께 매출 증가를 기대 할 수 있다.

 

Q2. 왜 로그인과 장바구니 담기를 거쳐야만 구매가 가능할까?

펫프렌즈는 비회원 구매와 바로가기 결제가 불가능하다. 꼭 로그인을 하고 장바구니에 담아야지만 구매가 가능하다. 이는 사용자에게 불편한 경험일 수 있다. 왜 그런 번거로운 절차를 넣은 걸까 생각해봤다.

첫번째론 고객의 DB 확보를 생각해 볼 수 있다. 회원 데이터를 바탕으로 알고리즘을 만들어 상품을 추천하고 예상 매출을 쉽게 계산 할 수 있다. 또한 충성고객을 확보하고 고객이 제공한 문자와 이메일 정보로 지속적인 CRM을 통해 재방문과 구매유도를 할 수 있기 때문이다.

그렇다면 장바구니 담기를 거쳐야하는 이유는 무엇일까. 상품을 클릭하고 바로가기 결제보단 일단 장바구니에 담고 다른 상품들도 좀 더 둘러보게 하기 위해서일까 뇌피셜로 생각해본다. 그 이유가 아니라면 펫프렌즈는 UX를 개선해 장바구니에 담지 않고도 바로 결제할 수 있게끔 개선이 필요해보인다.

 

 

펫프렌즈의 웹과 앱

 

좌) 모바일앱 / 우) PC 웹

동기님들과 펫프렌즈의 웹과 앱 화면에 대해 그룹토론을 할 기회가 있었다. 동기님들과 펫프렌즈는 하이브리드 앱이라는 결론을 내렸다. 펫프렌즈의 기술 블로그(https://pfdev.medium.com/)를 보면 Node.js(백), Vue.js(프론트),  Kotlin(안드로이드), Swift(IOS)로 개발환경으로 구축되있는것을 확인할 수 있다. 이는 웹개발 기술로 앱 개발을 하였지만 일부 네이티브 API와 기술을 이용해 push 알림 등을 보낼 수 있다. 하이브리드 앱의 특징은 겉으로는 네이티브 앱과 동일하게 보이지만 실제로는 웹뷰(web view)를 띄워 웹을 실행시키는 형태로 구성된 앱이다. 최초에 앱스토어를 통해 다운로드하여 실행시켜야 하지만 앱이 구동되고 나면 정해진 웹페이지를 불러온다. 펫프렌즈는 웹과 앱의 화면을 똑같이 해 앱에 집중하였고 개발비용과 시간은 줄이면서도 웹과 앱 서비스를 모두 제공하고 있다. 펫프렌즈는 웹으로 오가닉 유저를 유입할 수 있고 검색엔진을 이용하여 사이트 광고에서 웹페이지로 유도하고 그 안에서 또 앱으로 유도한다. 앱설치를 유도하는 이유는 웹에 비해 앱이 고생 생애 가치가 높기 때문이다.

Q. 왜 앱이 고생 생애 가치가 높을까?
앱을 설치하면 접근성이 높아지고 PUSH 알림을 이용해서 전환율을 높일 수 있기 때문이다.

 

---

이번 포스팅에선 새로 배운 오픈 API와 앱의 형식에 대해서 살펴봤다. 아래는 지난 포스팅의 내용으로 클라이언트와 서버, DB의 동작을 주로 다루고 있다.

 

UI, 클라이언트, 서버, DB의 동작 예측하기

 

로그인이 되어있는 메인화면

 

1.메인화면

먼저 페이지마다 변하는 자주 바뀌는 정보는 서버에,

아이콘이나 메뉴 같은 자주 바뀌지 않는 정보는 클라이언트에 저장한다.

메인화면은 상단바, 카테고리, 광고 배너, 카테고리, 하단 바 순으로 나열되어있다. 

상단바의 아이콘들과 카테고리, 하단 바는 잘 바뀌지 않는 데이터이기에 클라이언트 데이터에 저장되어있다. 이때 장바구니의 아이콘은 클라이언트에 있지만 10이라는 사용자의 알림 데이터는 DB에 사용자의 정보와 함께 저장되어있고 서버에서 가져오게 된다. 자주 바뀌는 배너광고 또한 서버에서 가져오게 된다.

 

 

 

2. 상품 탐색

홈 화면에서 상품을 선택하게 되면 상세페이지로 이동 후 상품의 사진과 함께 정보가 나오게 된다.

API를 이용하여 지금 선택한 상품의 ID 등의 정보를 클라이언트에서 서버로 보내고 서버는 그에 해당하는 상품의 정보를 GET방식으로 DB에서 가져와 상세 페이지에서 표시해준다.

 

 

3. 주문 및 주문내역

주문을 하기 위해서는 클라이언트로부터 주문 내용과 사용자 정보를 받아야 한다.

회원정보, 주문 상품, 주문 수량, 주소 등의 데이터를 POST방식으로 받고 데이터베이스(DB)에 저장해준다. 

주문한 내역은 다시 GET방식으로 DB에 저장된 정보를 가지고 와 페이지의 양식에 맞게 업로드한다.

 

---

두달간 티스토리를 이용하며 별다른 에러를 겪지 못했는데

이번엔 왜인지 포스팅이 저장을 해도 5번이나 날아가서 ^^

이쯤에서 끝낸다 ㅎㅎ db와 서버 부분도 더 추가해보려했는데 티스토리가 막았다.

회고하기전엔 별로 더 추가할 거 없을거 같은데라는 건방진 생각도 했지만 새로운 관점으로 배운 내용이 많은 것 같다.