Full-stack · FE·BE·배포

다시찾음

모바일 화면부터 AI 연동 API·배포까지

2026.08–09 개발 기록 기준

Overview

어떤 서비스인가요?

분실물의 사진·특징·시간·장소를 한 번 등록해 경찰청 공개 습득물 중 확인할 가치가 있는 후보를 찾도록 돕는 모바일 웹 프로젝트입니다.

My contribution

React 프론트엔드와 Spring Boot 백엔드 개발부터 배포 환경 구성까지 담당했습니다. 화면 입력, API 계약, 인증·저장, 배포 경로를 연결했습니다.

로그인·회원가입, 3단계 수색카드 작성과 관리, 분석 결과 조회·재조회, 후보·피드백·알림 화면을 구현했습니다.

인증·회원, 수색카드 생명주기, S3 이미지 소유권, AI 분석 요청·응답 검증·저장, 공통 응답·예외 처리를 구현했습니다.

Vercel의 API rewrite와 CloudFront HTTPS 연결, EC2 Docker Compose, GitHub Actions·OIDC·SSM 배포 구성을 담당했습니다.

AI 모델 실행과 DATA 수집 영역은 별도 협업 영역입니다. 후보·알림 화면 구현과 추천·발송 서버의 완성 여부를 구분하며, 모델 정확도나 분실물 회수 성과는 주장하지 않습니다.

분석 결과를 확인한 뒤 저장하는 요청 흐름

구현 구조 요약

Problem → Decision → Evidence

Case 01

문제: 지도에서 장소를 고른 후 장소명만 수정하면 기존 좌표가 남아, 화면에 보이는 장소와 실제 전송 좌표가 달라질 수 있었습니다.
변경: 장소명·주소를 수정하면 좌표를 초기화하고 지도에서 다시 선택하도록 했습니다. 특징 필수 여부, 문자열 길이, 미래 날짜, 사진 제한도 백엔드 입력 제약과 대조해 생성·수정 화면에 함께 반영했습니다.
판단: 입력 화면과 저장 계약을 함께 다루는 역할을 활용해, 사용자가 확인한 정보와 백엔드에 전달되는 값이 일치하도록 보완했습니다.
검증: FE #60·#62에 입력·좌표 정합성 변경이 기록돼 있습니다. #62 당시 FE 전체 88개 테스트와 빌드·정적 검사 통과 기록을 확인했습니다.

Case 02

문제: 모든 페이지 코드가 초기 JavaScript에 포함돼, 첫 화면을 여는 데 필요하지 않은 코드까지 함께 내려받는 구조였습니다.
변경: 페이지를 동적 import로 분리해 현재 주소에 필요한 화면을 불러오도록 변경했습니다. 로딩 중 공통 화면을 표시하고 초기 랜딩 렌더링 테스트를 추가했습니다.
판단: 화면 단위로 코드를 나누어 첫 진입 시 받아야 하는 JavaScript의 양을 줄였습니다.
검증: FE #58 빌드 기록에서 초기 JavaScript가 약 540KB → 265.54KB로 약 51% 감소했습니다. 당시 82개 테스트와 빌드·정적 검사가 통과했습니다. 빌드 크기 감소이며 실제 로딩 시간 개선율은 아닙니다.

Case 03

문제: AI 모델 구성과 서버 준비 상황이 달라져도 인증·저장 흐름은 독립적으로 개발할 수 있어야 했습니다. 연결 실패와 잘못된 분석 응답도 구분할 필요가 있었습니다.
변경: 모델을 백엔드에서 직접 실행하는 대신 내부 분석 API를 호출했습니다. 사진이 없으면 빈 배열을 허용하고, 사진이 있으면 소유권 검증 후 유효기간이 제한된 Presigned URL을 전달했습니다. 응답 형식을 검증해 성공한 결과만 저장하고 연결·시간 초과와 응답 오류를 구분했습니다.
판단: BE는 인증·소유권·검증·저장을, AI는 모델 실행과 분석 JSON을 책임지는 계약으로 역할을 분리했습니다.
검증: BE #42 당시 백엔드 전체 139개 테스트·빌드 통과, MySQL 8.4 Flyway V4 적용과 로컬 health UP 기록이 있습니다. 이는 AI 정확도 평가나 전체 추천 기능의 운영 검증이 아닙니다.

Case 04

문제: 다른 사용자의 분석 결과나 이미 사용된 결과가 카드에 연결되지 않아야 했고, 스케줄러가 실행되기 전에도 만료된 카드의 수정을 막아야 했습니다.
변경: 분석 결과의 소유권·사용 여부와 카드 ACTIVE 상태를 검증하고 잠금 조회 후 카드·위치를 한 트랜잭션으로 갱신했습니다. 만료 작업은 ACTIVE 카드만 조건부 갱신하고, 수정·종료 요청에서도 만료 시각을 직접 검사했습니다.
판단: 정기 작업 외에도 요청 시점에서 상태 경계를 확인하고, 이미 종료된 정보는 반복 실행으로 바뀌지 않도록 했습니다.
검증: BE #52에 재분석 연결·카드 및 위치 갱신·이미지 유지 테스트, #60에 시간 경계·대상 선별·종료 정보 보존·반복 실행·만료 후 요청 거절 테스트 통과 기록이 있습니다.

Results

테스트 수와 빌드 수치는 각 PR 시점의 기록이며 최신 전체 테스트 수로 합산하지 않았습니다. 사진 누락 시 가중치 재분배와 후보 적합도 정책은 설계 영역으로, 매칭 엔진의 구현·평가 완료와 구분합니다.

References

작성 기준 · 2026.09.25 / 제공된 프로젝트 복원 자료와 PR 검증 기록