본 콘텐츠는 구름 서포터즈 활동으로 지원을 받아 작성된 교육생의 실제 경험 후기입니다.
개요
마지막 프로젝트에서를 소개하면서 부트캠프 회고를 해보려고 한다.
일단 마지막 프로젝트에서는 지도를 통해 서비스를 만드는 모바일 웹 프로젝트를 진행했고, 우리는 카카오 지도를 가지고 로컬 맛집이라는 주제를 담아 기획을 시작했다.
백엔드와 프론트를 도메인별로 동시에 맡아 풀스택으로 진행했다.
내가 맡은 파트는 로그인 / 방문 인증 / 북마크 / 마이페이지(회원탈퇴) 이렇게 진행했다.
도메인 별 진행
1. 로그인
로그인 기능은 카카오 소셜 로그인을 기반으로 구현했다. 프로젝트 초반에는 인증 방식을 어떻게 가져갈지에 대한 고민이 많았다. 세션을 사용할지, JWT를 사용할지, JWT를 사용한다면 Access Token과 Refresh Token을 어디에 저장할지에 대해 현업 개발자 친구에게도 물어보고 블로그도 뒤져보면서 같은 고민을 했던 사람들의 의견을 참고했다.
최종적으로는 Refresh Token은 HttpOnly Cookie에 저장하고, Access Token은 프론트 메모리에서 관리하는 방식으로 구현했다. Refresh Token을 쿠키에 저장한 이유는 JavaScript에서 직접 접근할 수 없도록 하여 보안성을 높이기 위해서였다. 반면 Access Token은 API 요청 시 Authorization Header에 담아 사용해야 했기 때문에 프론트 메모리에서 관리하도록 했다.
이 과정에서 단순히 “JWT를 쓴다”가 아니라, 토큰을 어디에 저장하고 어떤 방식으로 재발급할지까지 고민할 수 있었다. 특히 Access Token이 만료되었을 때 Refresh Token을 통해 재발급하는 흐름을 구현하면서 인증 구조에 대한 이해도가 많이 올라갔다.
2. 방문 인증
방문 인증은 이번 프로젝트에서 가장 핵심적인 기능 중 하나였다. 사용자가 실제로 가게 근처에 있는지를 확인해야 했기 때문에, 브라우저의 Geolocation API와 데이터베이스의 공간 데이터 처리 기능인 PostGIS를 함께 사용했다.
프론트에서는 사용자의 현재 위치를 가져오기 위해 Geolocation API를 사용했다. 지도 화면에서는 사용자의 위치가 UX상 실시간으로 반영되는 것처럼 보이도록 위치 변화를 감지했고, 방문 인증 버튼을 클릭했을 때는 현재 위치를 다시 조회해 서버로 전달했다.
백엔드에서는 프론트에서 전달한 사용자 좌표를 그대로 신뢰하지 않고 재검증을 진행했다. PostGIS 함수를 사용해 DB에 저장된 가게 위치와 사용자 위치 사이의 거리를 다시 계산했다. 가게 위치는 ST_X, ST_Y를 통해 경도와 위도로 가공해 프론트에 내려주었고, 실제 방문 인증 저장 전에는 ST_Distance를 사용해 서버에서 최종 검증을 수행했다.
이때 사용자가 가게 반경 50m 이내에 있을 경우에만 방문 인증 기록을 저장하도록 구현했다. 프론트에서 1차로 사용자 경험을 위한 검증을 하고, 백엔드에서 최종 검증을 수행하는 구조로 가져가면서 보안성과 사용자 경험을 모두 고려할 수 있었다.
3. 북마크(나의 맛집)
북마크 기능은 사용자가 마음에 드는 맛집을 저장하고 관리할 수 있도록 CRUD 형태로 구현했다. 단순히 맛집 하나를 저장하는 기능에서 끝나는 것이 아니라, 사용자가 북마크 카테고리를 만들고, 특정 카테고리에 맛집을 저장하거나 제거할 수 있도록 구성했다.
여러 카테고리에 어떻게 북마크를 집어넣을까 고민하다가 구글 맵의 구현 방법을 참고했다.
이 기능을 구현하면서 사용자별 데이터 접근 제어를 신경 썼다. 예를 들어, 사용자가 요청한 북마크 카테고리가 실제로 본인의 카테고리인지 검증한 뒤 저장하거나 삭제하도록 처리했다.
또한 프론트에서는 가게 상세 페이지에서 현재 맛집이 어떤 폴더에 저장되어 있는지 보여주고, 사용자가 체크박스처럼 저장 상태를 변경할 수 있도록 구현했다. 백엔드 API 응답 구조를 프론트 화면 흐름에 맞춰 설계하는 경험도 할 수 있었다.
4. 마이페이지 및 회원탈퇴
마이페이지에서는 사용자 정보 조회와 회원탈퇴 기능을 담당했다. 회원탈퇴는 단순히 회원 데이터를 삭제하는 방식이 아니라, 기존 리뷰나 북마크, 방문 인증 기록과의 관계를 고려해야 했다.
그래서 회원 데이터를 바로 삭제하기보다는 개인정보에 해당하는 값은 null 처리하거나 익명화하고, 사용자의 상태값을 관리하는 방식으로 구현했다. 이미 작성된 리뷰나 서비스 데이터는 유지하면서도, 탈퇴한 사용자의 개인정보는 남지 않도록 처리했다.
또한 카카오 소셜 로그인을 사용했기 때문에, 서비스 내부 회원탈퇴뿐만 아니라 카카오 개발자의 어드민 키를 발급받아 카카오 연결 끊기까지 함께 처리했다.
프로젝트를 진행하며 느낀 점
이번 프로젝트는 단순히 기능을 구현하는 것보다, 실제 서비스처럼 동작하기 위해 고려해야 할 점이 많았다. 로그인에서는 보안과 사용자 편의성을 함께 고민해야 했고, 방문 인증에서는 프론트의 UX와 백엔드의 검증 책임을 분리해야 했다. 북마크와 회원탈퇴에서는 데이터 관계와 권한 검증을 신경 써야 했다.
특히 도메인별로 백엔드와 프론트를 동시에 맡아 진행하면서, API를 설계할 때 프론트에서 어떻게 사용할지를 함께 고민할 수 있었다. 이전에는 백엔드 로직을 완성하는 것에 집중했다면, 이번 프로젝트에서는 화면 흐름과 사용자 경험까지 함께 고려하게 되었다.
또한 팀 프로젝트를 진행하면서 협업의 중요성도 많이 느꼈다. 기능이 서로 연결되어 있다 보니, 내가 만든 API가 다른 팀원의 화면과 맞지 않으면 바로 문제가 발생했다. 그래서 API 명세를 공유하고, 필요한 응답값을 조율하고, 문제가 생기면 빠르게 소통하는 과정이 중요했다.
우수 수료생 선정
부트캠프를 마무리하면서 예상치도 못한 우수 수료생으로 선정되었다.
사실 3차 프로젝트때 수상을 하지 못했기 때문에 우수 수료생을 거의 포기했었다.
그래도 지금까지 해온게 있기 때문에 꾸준히 열심히 했다.
내가 6개월 동안 해온것들은
- 출석률 99%
- 구름 서포터즈 활동
- 해커톤 수상(장려상)
- EXP 미션 모두 완료
- 코딩테스트 매달 점수 따기
등등 꾸준히 열심히 했다.
이 종합적인 것들을 합산해서 내가 우수 수료생으로 수료할 수 있지 않았나 싶다.
정말 스프링의 스자도 모르도 백엔드의 백자도 모르던 내가 이 부트캠프를 통해서 프로젝트 경험도 쌓을 뿐더러 시스템의 구조와 흐름을 이해하고 앞으로 무엇을 해야하는 지 깨닫게 됐다.
우수 수료생 혜택으로는
- kt cloud 서류 우대 or 구름 인턴십
- 제주 펜트하우스 1박2일권
- 장학금 200만원
등이 있다.
앞으로 취준에 많은 도움이 될 거같다.
아.. 이제 서류 넣어야지
