프론트와 관련된 문서는 figma 와이어프레임 + 목업 정도만 정리하고 개발을 시작했다.
API 명세서를 백엔드 소관으로 두고 API 연결을 하기 전까지 들여다보지 않았더니, 막상 기능 구현에 들어갔는데 내가 생각한 프론트측 로직과 백엔드 측에서 짜둔 API가 달라 '어?' 스러운 상황이 생겼다.
당시 프로젝트 마감이 코앞이라 발등에 불이 떨어진 상황이었는데, 여간 당황스러운 일이 아니었다.
API 명세서상 비밀 방 여부를 설정할 수 있었으나, 정작 그룹 상세페이지는 비밀방 여부와 관계 없이 모두가 볼 수 있었다.
'그룹 탐색' 탭에서 내가 가입한 그룹까지 떠서, 가입한 그룹과 가입하지 않은 그룹을 구분할 수 없었다.
나는 내가 가입한 그룹만 상세보기가 가능한 구조를 생각했는데,
다른 친구들은 상세보기를 보고, 그룹 멤버들이 열심히 걷는 사람들인지 확인한 후 가입할 수 있어야 좋을 것 같다는 의견을 줬다.
하지만 비밀번호가 걸린 방인데 남이 들어와서 멤버나 걸음수 등을 볼 수 있는게 이상하다는 의견도 있었기에, 논의 끝에 로직을 재정비하는 과정을 거쳤다.
그룹 검색 탭에서 굳이 내가 가입한 그룹을 볼 필요가 없을 것 같다는 판단 하에, '그룹 탐색' 탭을 클릭했을 때 백엔드에서 내가 가입한 그룹은 제외하고 정보를 보내주기로 했다.
비밀방의 보안을 우선시: 백엔드에서 그룹 입장용 API(enterGroup)을 새롭게 만들어, 비밀번호가 일치해야만 그룹 상세보기 페이지에 접근할 수 있도록 로직을 변경했다.
또한, enterGroup API 요청시 백엔드에서 내가 가입한 그룹인지 아닌지 여부를 boolean 값으로 보내주어, true(가입됨)이면 입장하기 버튼, false(가입하지 않음)이면 '가입하기'버튼을 출력하기로 했다.


일전에 '프론트엔드 개발자가 API를 설계하는 이유'
(https://yozm.wishket.com/magazine/detail/2325/) 라는 아티클을 가볍게 읽고 넘긴 적이 있는데, 이게 이렇게 빠른 시일 내에 뼈저리는 현실로 다가올 줄은 몰랐다...
적어도 여러 API가 엮여있는 복잡한 기능은 플로우 차트로 서비스의 흐름을 정리해 보고, API 명세서 작성 과정에 적극적으로 참가하는 태도가 필요할 것 같다.