[ PROJECT ] 카카오프렌즈샵 클론코딩 - #01 프로젝트의 시작

Hailee·2020년 12월 14일

기능분석 동묘프렌즈샵 카카오프렌즈샵 클론코딩

[ PROJECT ]

목록 보기

5/16

할 일(1일차)

기능 분석(trello, 구글 spreadsheet 활용)

모델링

크롤링

어느덧 위코드 2달차, 프로젝트를 진행하는 시간이 되었다!

우리 팀은 '카카오프렌즈샵'을 클론하기로 결정하였고, 드디어 대망의 첫날이 되었다.

팀 이름이 왜 동묘 프렌즈가 되었느냐 하면 우리 숙소가 동묘 구제시장에 위치해있기 때문!

정말 동묘공원을 따라 걷다보면 우리 숙소가 나온다.
(놀러오세요 동묘팀 숙소로! 랄랄라)

우선 프로젝트 초기 세팅을 진행하고, 모델링을 시도하기로 했다

(사실 첫날에 모델링을 완벽하게 끝내고 싶다는 꿈을 꾸었지만 정말 어디까지나 꿈이었다 ㅎㅎ)

국비지원에서 진행했던 프로젝트는 처음부터 끝까지 모두 우리가 직접 구상했어서 그랬던지, 정말 머리가 부서질 것 같았는데 클론코딩을 하려니까 조금 더 수월한 것 같다.

처음부터 끝까지 우리만의 독자적인 웹 프로젝트를 진행한다는 것은.. '해당 기능이 어떻게 구현 되었는지' 부터 '어떤 DB구조를 가지고 동작하는지'를 모두 분석해야 한다는 말과 같다.
이는 창의력을 발휘할 수 있다는 장점이 있지만, 아직 모델링을 잘 모르는 귀염댕이 쥬니어들이 진행하기엔 '박살난 모델링으로 꾸역꾸역 만들어내는 망가진 코드'가 될 수 있기 때문!!!

각설하고, 이 날은 백엔드의 입장에서 본 카카오프렌즈샵의 기능들, 데이터베이스 구조를 분석해보았다.
(분석이라 쓰고 발버둥이라 읽는다)

django 프로젝트 초기 세팅은 요로케!

15기 동기 현주님 velog!
내가 쓴 git flow velog!

기능분석

1. 로그인 / 회원가입

자체에서 가입(kakao.com) 할 수 있다.
👉🏻 이메일, pw만 입력
로그인 기능은 여느 웹사이트와 비슷하다.
소셜 로그인 기능은 2차 프로젝트에서 하기를 추천하신다고 해서 우선 '추가구현사항'으로 빼두었다!

2. 회원 정보 수정

첫 가입 시 1000p 제공받지만, 우리 프로젝트에는 반영하지 않기로 했다.
(굳이 하자면 컬럼 하나 더 추가했으면 됐을 것 같긴 하지만.. 추가하지 않았으니.. 음..)
계정 관리를 할 수 있다.
(이름, 이메일, 핸드폰번호를 확인할 수 있고 카카오계정과 연동되어있다는 표시가 뜬다.
아마 소셜로그인을 구현하면 다른 소셜 사이트 아이콘이 뜨려나..?)

3. 마이 탭

최근 본, 내 활동, 장바구니, 주문내역을 확인 할 수 있다.
'최근 본' 기능의 경우,
👉🏻 프론트엔드에서 캐시에 담아 그때그때만 보여주는 식으로 진행할 수도 있고
👉🏻 백엔드에서 테이블을 생성해서 정보를 저장해둔 뒤, 일정 기간마다 오래된 데이터를 삭제하는 방법으로 데이터베이스화 할 수도 있다.
탭 이름에서도 느껴지듯이, 주로 유저와 관련된 기능들이라 user app을 분담할 팀원이 만들 것 같다.

4. 카테고리에 따른 조회

캐릭터 / 카테고리 별 조회가 가능하다.
결국 같은 상품들이지만, 검색 기준을 캐릭터로 둘 것인지, 카테고리로 둘 것인지에 따라 미리 구분해둔 것 같다.
(굳이 검색을 세세하게 하지 않아도 클릭만으로 어느정도 갈증이 해소되기 때문에 사용자 입장에서는 훨씬 효율적일 것 같다)
우리는.. 저작권 문제로 인해 캐릭터별 조회는 진행하지 않기로 했다.
어쨌든 같은 filtering 기능이니까 캐릭터별 조회.. 하지 않아도.. 슬프지 않아.. 응.. 😭

5. 상품 목록 & 상세보기

춘식이 인기 많구나.. 내가 기능분석 시작했을 때 너 관련 게시물 처음 본 것 같았는데..

카테고리 별로 조회 시 세부 카테고리를 또 선택할 수 있도록 되어있으며, 그에 따라 URL이 계속 변화한다

## 전체조회
   https://store.kakaofriends.com/kr/products/category/subject?categorySeq=64&sort=createDatetime,desc

## 미니인형 조회
   https://store.kakaofriends.com/kr/products/category/subject?categorySeq=64&subCategorySeq=65&sort=createDatetime,desc

## 상세조회
   https://store.kakaofriends.com/kr/products/7425

상세조회 시 고려해야 할 점은?

상품병 할인율, 상품 평점, 본문, 이미지, 문의글, 리뷰 등!
(우리는 문의글 관련 기능은 하지 않기로 했다. 리뷰는 상품 평점에 영향을 미치기 때문에 진행하기로 함!)

6. 오늘 탭

6-1. 게시물 목록

(마치 라잌 인스타그램)

오늘 탭 첫 접속 시 모든 게시물의 목록을 무한스크롤로 보여준다.
각 게시물마다 작성자사진, 작성자, 게시물의 theme, 작성 시간, 사진들, 좋아요 수, 타이틀, 글 내용, 댓글의 갯수, 대표 댓글 이 필요하다
게시물 목록에서 보이는 댓글은 좋아요 수가 가장 높은 댓글을 보여주는 것으로 하고 싶다. (가장 작성일자 빠른 순으로 하면 의미가 없을 것 같아..)

좋아요를 누르거나 취소하면 즉각적으로 반영이 되며, 이는 마이 탭 내 '내 활동' 탭에서 확인 및 변경이 가능하다

👉🏻 x 버튼을 누르면 좋아요 취소!
이건 user app에서 진행해야 할 지, board app에서 진행할 지 고민이다.

혹시 decorator처럼 사용해야 하는지(이건 아닌것 같지만) / 하나의 메서드를 만들고 상황에 맞게 url을 하나로 통일하던지.. 각자 다른 app에 같은 메서드가 두개 존재하는 건 웃기쟈나.. 공간 아깝게..

6-3. 게시물 상세조회

댓글창을 경계로 그 상단 화면은 게시물 전체목록에서 각 게시물 구성하는 것과 똑같다.
한마디로 게시물 목록에서 댓글영역 클릭 시 게시물id를 가진 채로 상세조회 화면으로 이동하고, 전체목록에서 각 게시물을 구성하듯 똑같이 구성한 뒤, 하단에 댓글 관련 영역만 추가!

## 오늘 탭 (게시물 전체조회)
   https://store.kakaofriends.com/kr/index?tab=today
## 게시물 상세조회
   https://store.kakaofriends.com/kr/feed/366
   
==> 확실히 id를 가지고 feed 상세조회로 들어가는 것을 확인할 수 있다.

댓글, 대댓글에 대한 모델링 개념을 확실히 해야할 것 같다. (self 참조)

다행히 카카오는 대댓글까지만 허용하고, 그 이후로 대대댓글이라던지.. 그런 개념은 없는 것 같다.
댓글 좋아요, 게시물 좋아요 기능 잘 생각해보기!

이보다 더 많이 분석한 것 같지만, 우선 정리는 여기까지만..! 🤯

동묘프렌즈 dJango Application 구조

user, board, order, product로 간략하게 나눈 뒤 작업하기로 했다.

아무래도 웹 사이트를 처음 접한 채로 기능 분석을 하려니 UX(User Experience)적인 측면에 계속 눈이 갔다.

도대체 왜 상품 목록을 조회하면 상단 메뉴가 사라지는지..!
(장바구니 조회를 하려면 다시 이전 버튼을 클릭해서 메인 화면으로 간 뒤, 마이 탭을 통해 조회할 수 있다. )
장바구니 조회, 장바구니에 상품을 담는 과정이 번거롭다.

2-1. 장바구니를 조회하려면 좌측 상단의 홈 버튼을 클릭한 뒤 마이 탭을 통해 장바구니를 조회해야 한다.
2-2. 상품 목록에서 장바구니 버튼을 누르면 장바구니에 바로 추가가 가능하지만, 다시 클릭하면 취소가 되지 않는다. 직접 장바구니에 들어가서 삭제를 진행해야 한다.
카테고리 선택 화면에서의 햄버거 메뉴가 상품 전체목록, 상품 상세조회 시에는 보이지 않아서,
다시 카테고리 혹은 캐릭터를 선택하고 싶은 경우 홈 버튼 클릭 후 다시 시도하여야 한다.