'당근마켓 관심목록 추가' 가능 다시보기 [W7D4_코드스테이츠 PMB 12기]

당근마켓의 '관심목록 추가 기능' 다시 보기 

'당근마켓 관심목록 추가' 가능의 Behind에는 어떤 일이 일어나고 있을까 [W6D1_코드스테이츠 PMB 12

 

벌써 2주 간의 데이터 및 개발 관련 지식을 배우는 기간이 끝났습니다. 이에 지난번에 분석한 당근마켓의 '관심목록 추가' 기능을 다시 돌아보려고 합니다. 

 

 

 

 

Flowchart

Task 정의
당근마켓의 유저가 관심있는 중고 매물에 대해 '관심목록 추가' 기능을 통해서 북마크하는 과정

 

AS-IS

지난번에 분석했던 Flowchart입니다! 이번에 공부하고 다시 돌아보니 제가 놓친 부분이 있어 조금 더 개선해보았어요.

 

 

TO-BE

기존의 플로우차트에서는 단순히 '추가'하는 부분만 고려했었습니다. 하지만 생각해보니 현재 보고 있는 게시물이 이미 '관심목록에 추가' 한 기능인지 아닌지 여부를 먼저 판별해야 겠더라구요. 현재 상태에 따라서, 이미 관심목록에 추가되어 있다면 중복해서 추가가 불가하고 해제만 가능하기 때문이죠. 또 해당 여부에 따라서 하단에 위치한 ♡버튼의 상태값이 달라지기 때문입니다. 그리고 기존에는 미처 고려하지 못했던 관심목록의 해제에 대한 부분도 추가하였습니다. 데이터를 처리하는 과정에서 언제나 추가, 수정, 삭제 부분을 고려해야 했는데 너무 '추가' 부분만 고려한 것 같네요. 이와 같은 내용을 바탕으로 관심목록에 대한 전체 기능, 즉 추가와 해제 모두를 담을 수 있는 Flow Chart로 다시 개선해보았습니다.

 

 

 

당근마켓의 클라이언트, 서버, DB

다음으로 당근마켓에서 '관심목록 추가'와 관련된 상호작용을 하게될 때 프로덕트의 UI, 클라이언트, 서버, DB가 각각 어떻게 보이고 작동할지 조금 더 구체적으로 예상해보았습니다.

상태	클라이언트	서버	데이터베이스
상사페이지 접근	관심목록에 이미 추가된 게시물인지 확인 요청	선택한 게시물 DB에 관심 목록에 저장 여부 확인 및 응답 전송	관심목록 저장 정보
관심목록에 추가 하단의 버튼: ♥	관심목록 정보 추가	관심목록 정보 확인 및 응답	관심목록 저장 정보
관심목록 해제 하단의 버튼: ♡	관심목록 정보 해제	관심목록 정보 확인 및 응답	관심목록 저장 정보

지난번에는 각 기능들 별로 클라이언트, 서버, BD의 역할에 대해서 큰 틀에서 살펴보았습니다. 하지만 공부를 하다 보니 화면에서 보이는 모든 기능들과 상호작용들이 각 개발 영역과 밀접한 관련이 있다고 생각되었고, 조금 더 세분화해서 볼 필요가 있다고 생각했습니다. 그래서 조금 더 세부적으로 나눠보았어요! (물론 개발 부분에 대한 지식이 얕기 때문에 정확인 내용인지는 확신할 수 없습니다. 앞으로 더 공부해볼 예정이에요)

 

물론 아직까지 각 개발요소들에 대해서 명확히 이해하고 파악하기는 어렵지만, 기획에 있어서 개발 부분에 대한 요소도 충분히 고려해야 된다는 생각을 더 많이 갖게 되었습니다. 아무리 멋진 기획이라고 하더라도 개발 부분에서 불가능하다면 쓸모없는 내용이 될 테니깐요. 현재 개발 리소스로 가능한 부분인지 이와 같은 기본적인 개발 이해도를 바탕으로 언제나 생각해봐야 겠다고 느끼게 된 과제였습니다!