FUN편log 프로젝트 1주차 회고

목차

• 시작하며
• 1회차 멘토링
• 기능 명세서 회의
• 2회차 멘토링
• UI 회의 (figma)
• DB 명세서 초안 작성하기 (erd cloud)
• API 명세서 초안 작성하기 (notion)
• 마치며

 

---

시작하며

 

저번 주부터 카우치 코딩을 통해 백엔드 포지션으로 웹 프로젝트를 시작했다. 팀 단위의 웹 프로젝트는 처음이라 큰 문제없이 무사히 끝났으면 좋겠다는 생각을 가지고 있고, 이번 프로젝트를 어떻게 진행했는지와 어떤 것을 알았는지 각 주차별로 포스팅할 생각이다.

 

---

 

1회차 멘토링

 

맨 처음엔 대략적으로 자기소개가 진행되었는데 프론트엔드 두 분과 내가 차례대로 자신에 대한 키워드 3개를 이야기해야 했는데 이게 생각보다 서로를 잘 알게 해 줬던 것 같다.

 

이후에 프로젝트 주제를 정하는 아이디어 회의가 시작되었는데 원래 1회차 멘토링이 시작되기 전에 프로젝트를 진행하기 위한 아이디어를 생각하라는 사전 과제가 있었기 때문에 '편의점과 관련해서 편리한 사이트를 만들어보자는 이야기 해야겠다'라고 생각했었다. 

 

각자 생각해온 아이디어나 즉석해서 생각나는 아이디어 몇 가지에 대해 어떤 아이디어를 채택하는 것이 좋을지 투표가 진행되었고, 편의점 아이디어가 채택되었다.

 

내가 편의점 사이트 아이디어를 생각한 이유는 아래와 같은데, 다른 분들에게 이런 생각이 잘 전달이 되었던 것 같다.

 

1. 가까운 편의점의 위치를 모를 때 유용하다.
2. 편의점은 대중적인 주제이지만 편의점에 대한 어플은 없는 것 같다.

 

마지막으로 프로젝트를 잘 진행시키기 위해서는 좋은 설계가 있어야 하기 때문에, 멘토님께서 2회차 멘토링이 시작되기 전까지 기능 명세서를 작성하라는 과제를 주셨고, 1회차 멘토링은 종료되었다.

 

---

 

기능 명세서 회의

 

1회차 멘토링을 마친 직후, 기능 명세서를 작성하기 위해 지도 api로 어떤 것을 사용할지를 비롯한 여러 가지를 정해야 했기 때문에 첫 회의를 실시했다.

 

하지만 몇 가지 조사해야 할 부분과 고민해야 할 부분이 존재했기 때문에 대략적인 안건을 아래와 같이 정해놓고 서로 조사하고 고민하는 시간을 가진 후에 다시 회의를 진행했다.

 

1. 지도 API로 어떤 것이 좋을지 자료 조사해오기
2. 편의점 상세 페이지 UI 생각해오기
3. 메인 페이지 UI 생각해오기
4. 유저가 로그인 권한으로 할 수 있는 권한 생각해오기

 

첫 번째 안건인 지도 API 선택에 대해서는 인터넷에 네이버, 구글, 카카오 API를 직접 조사 및 사용해보고 비교한 자료가 있어 그것을 참고했다.

지도 API 비교(구글, 네이버, 카카오)

 

위 자료 검토 후 우리 팀에서는 카카오 지도 API를 사용하기로 했다. 물론 이 외에 국가지원 API도 있었지만, 뭔가 행정구역으로 검색해야 할 것 같은 느낌이라 일단 배제했다.

 

두 번째 안건인 상세 페이지 UI에 대해 생각해오기에 대해 나는 시각적으로 생각하기 위해 whimsical이라는 사이트에서 직접 사이트를 구성해해 봤고, 이를 팀원들과 공유하여 아래와 같은 수정본을 만들 수 있었다.

 

상세페이지 생각해오기

 

세 번째 안건인 메인 페이지 UI를 생각해오기에 대해서도 앞의 상세페이지 생각해오기와 동일하게 UI를 생각해와서 팀원들과 의견을 공유하며 아래와 같은 초안을 만들었다.

 

 

마지막으로 로그인을 한 유저가 가질 수 있는 권한에 어떤 것들이 있으면 좋을지 생각해오기 안건은 결과적으로 편의점에 남기는 리뷰를 작성하는 기능에 대해서만 로그인된 유저만 작성할 수 있도록 했다.

 

로그인 시 가질 수 있는 권한에 리뷰 작성 기능만 넣은 이유는 유저 사용성을 위함이었다. 만약에 로그인을 하지 않으면 리뷰를 볼 수 조차 없게 만든다면, 굳이 보려고 하진 않을 수도 있지 않을 것 같았기 때문이다.

 

 

이렇게 각 안건에 대한 회의를 끝낸 후 이 것들을 토대로 기능 명세서를 작성했다.

기능 명세서 (일부)

 

기능 명세서를 작성하고 마지막으로 검토하는 중 카우치 코딩의 이전 기수 분들의 프로젝트 회고를 참고하던 중 이전 프로젝트들에는 프로젝트 이름이 있는데 우리는 아직 프로젝트 이름이 없어서 한번 만들어보자는 의견이 있었고, '나만의 작은 편의점', '편의점 백과사전'

 

 

---

 

2회차 멘토링

 

2회차 멘토링이 시작되고 멘토님께 우리가 작성한 기능 명세서에 대한 브리핑이 시작되었다.

 

브리핑은 프론트엔드분이 진행했고, 브리핑에 대해 멘토님께서 좋은 코멘트를 남겨주셨다.

 

멘토님 말씀을 빌린다면, 평균적으로 이 시기에는 기능 명세서 브리핑 이후 첨삭이 많이 이루어진다고 하는데, 우리 팀은 거의 첨삭이 없어도 될 만큼 잘 작성했다고 한다.

 

이후에 멘토님께서 DB 명세서와 API 명세서를 작성하기 위해서 필요한 강의를 해주셨고, 다음 시간까지 UI 명세서, DB 명세서, API 명세서 초안을 작성하라는 과제를 주시고 멘토링은 종료되었다.

---

 

UI 회의 (figma)

 

기능 명세서를 작성하면서 whimscial을 사용해서 대략적으로 만든 UI가 있었지만, 멘토링을 받으면서 figma라는 툴을 알게 되었고, figma는 css코드까지 직접 볼 수 있는 장점에 의해 figma를 사용하여 더욱 구체적으로 UI를 작성해보기로 했다.

 

나도 나름 머릿속에 있는 UI를 만들어보긴 했지만, 역시 프론트엔드분이 만들어온 UI가 더 구체적이고 이미 완성형 UI였기 때문에 그걸 기준으로 진행하기로 했다.

 

UI 구성도 (일부)

 

---

 

DB 명세서 초안 작성하기 (erd cloud)

 

erd 구성도

 

편의점 위치는 지도 API에서 가져오기 때문에 우리의 데이터베이스에서는 편의점 코드만 저장하면 된다는 생각에 편의점 테이블은 따로 작성하지 않았다.

 

또한 추후에 특정 편의점에서 가장 많이 사용한 키워드를 알아내는 과정에서 검색을 용이하게 하기 위해 키워드 테이블을 따로 배치하였다.

 

만약 리뷰에 키워드가 포함되어있다면, 키워드 컬럼이 많이 길어질 것 같았기 때문이다.

 

그리고 사용자 테이블을 만들었는데, 사실 이 부분이 제일 어려웠다.

 

왜냐면 내가 아직 구글 OAuth를 사용하여 로그인 기능을 구현하는 것에 대한 경험이 없기 때문이다.

 

프론트엔드분께서 자신이 firebase를 사용해서 OAuth를 구현한 경험이 있다고 했는데, 나는 뭔가 '인증 관련한 작업은 벡엔드에서도 할 수 있어야 하지 않을까?'와 같은 생각도 들었다.

 

팀원들과 오랜 의견 공유의 시간을 보내고 나서 일단 프론트엔드에서 firebase를 통해 인증을 완료하고, 해당 유저의 oauth_id를 DB에 저장해서 회원이었는지 체크하는 용도로 테이블을 작성해놓았다.

 

아마 2주차 멘토링에서 이 찝찝함을 풀 수 있을지도 모르겠다.

 

---

 

API 명세서 초안 작성하기 (notion)

 

API 명세서 초안 (일부)

 

작성된 DB 명세서 초안을 토대로 프론트엔드와 주고받을 API 명세서 초안을 작성했다.

 

나름 기능의 일부분에 대해 플로우 차트를 그리며 팀원들과 함께 작성해보긴 했지만, 역시 OAuth와 관련한 부분들에 대한 무지함이 있어 제대로 작성된 느낌은 아닌 것 같다.

 

---

 

마치며

 

1주차에서 가장 기억에 남는 건 OAuth이다. 로그인 중인지 체크하는 방법이라던지 뭔가 스프링 시큐리티에 있는 내용일지도 모르겠지만, 아직 경험이 없다. 그래도 열심히 스터디하면서 완수하고 싶다. 그래도 다행인 건 팀 분위기가 괜찮은 것 같다. (사실 이게 제일 중요하지 않을까 싶다)

 

 

감사합니다!!