사용한 플랫폼 : Intelli J

2026년 10월에 실서비스를 목표로 크게 다시 만들었다. 바뀐 내용은 아래 개편기에 정리했다.

시작하며

반려견을 키운지 어느덧 6년이 지났다.
이름은 루시, 암컷 말티즈다.
이제는 없어선 안될 소중한 가족 구성원 중 하나가 되었다.

가끔 주변에 반려견을 키우는 사람들에게 들리는 말로는
산책 중 한눈판 사이에 사라진다던가, 잠깐 문을 열어둔 사이 집을 나갔다던가 하는 말이 들려온다.
한번 시야에서 놓친 강아지는 정말 찾기 힘들다.

강아지를 키울때 보통 구청에 신고 후 칩을 이식하거나 하게되는데,
입양 혹은 분양 하고 구청에 등록하지 않은 경우는 누가 찾게된다고 하더라도 누가 주인인지 알 수가 없다.
그럴때를 대비해서 잃어버리게 되더라도 찾을 확률을 높힐 수 있게
칩을 등록하고 이식하는게 제일 좋은 방법이지만 그렇게 하지않은 사람과,
혹은 발견을 해도 놓치는 경우를 대비하여 사이트를 구상해보았다.

우선 각 지역구마다 커뮤니티를 형성해 자신의 잃어버린 반려견 정보(사진, 종, 특징 등)을
게시판에 입력하여 올려서 사람들과 정보를 공유 and 제보를 주고 받을 수 있고,
추가로 한국내에 유기견 입양 정보를 불러와 안내하고 유기견들이 다시금 새로운 가족들의 품에서 행복하게 지냈으면 하는 바램이다.

프로젝트 명세서

1. 프로젝트 진행 순서
2. 개요
3. 기능 별 요구 사항
4. DB 설계
5. API 설계
6. WEB 화면 설계
7. 개발 및 테스트
8. 배포
9. 도메인 설정

1. 프로젝트 진행 순서

Restful한 설계로 springsecurity를 이용해 소셜로그인을 구현하고, 그외에 기능들을 추가한다.
데이터 베이스는 h2 를 사용하여 동작시에만 테스트를 할 수 있게 만든다.

2. 개요

• 프로젝트 명 : Find My Dog
• 인원 : 1명
• 기간 : 2024.04.14 ~ ing
• 기능 :
  • 소셜 API (Kakao, Naver, Google)
    1. 회원가입
    2. 로그인
    3. 로그아웃
    4. 탈퇴(작성글 삭제)
  • 게시판
    1. 등록
    2. 수정
    3. 삭제
    4. 카카오맵 API
    5. 멀티이미지 업로드
  • 구글 광고(애드센스)
  • 웹 크롤링(Selenium)
  • 어플 연동

2026년 10월, 실서비스 수준으로 다시 만들기

2년 전에 만든 Find My Dog 을 다시 열어 보니 “동작은 하지만 실제로 사람들이 쓰기는 어려운” 상태였다. 그래서 실제로 운영할 수 있는 수준을 목표로 보안, 디자인, 기능, 운영 설정을 모두 다시 손봤다. 코드는 GitHub 에 있다.

무엇이 문제였나

• 글 수정·삭제 API 가 작성자를 확인하지 않았다. 화면에서 버튼만 숨기고 있어서, 주소만 알면 남의 글을 지울 수 있었다.
• 작성자 id 를 브라우저가 보내고 있었다. 값을 바꿔 보내면 다른 사람 이름으로 글을 쓸 수 있었다.
• 업로드한 파일 이름을 그대로 저장 경로에 썼다. ../ 가 들어간 이름으로 폴더 밖에 파일을 쓸 수 있었다.
• 입양 공고는 검색할 때마다 상세 페이지 100개를 긁어 왔다. 느리고, 전북·전남·경북·경남의 시군구 코드가 한 칸씩 밀려 있었다.
• 화면은 jQuery·Bootstrap 과 플러그인 7개가 섞여 페이지마다 모양이 달랐다.
• 데이터는 H2 메모리 DB, 사진은 로컬 디스크에만 있고 배포 설정이 없었다.

보안부터

• 글쓴이는 요청 본문이 아니라 로그인 세션에서 정하고, 수정·삭제·상태 변경은 서비스 계층에서 글쓴이인지 확인한다. 아니면 403.
• CSRF 보호를 켜고, 화면의 fetch 는 <meta> 에 담긴 토큰을 헤더로 보낸다. 로그인하지 않은 API 요청은 로그인 화면으로 보내지 않고 401 을 돌려준다.
• 사진은 서버에서 JPEG 로 다시 저장하고 UUID 이름을 붙인다. 원래 파일 이름은 경로에 쓰지 않고, 다시 그리면서 사진 속 위치 정보(EXIF)도 지워진다.
• 파일 삭제는 DB 트랜잭션이 커밋된 뒤에 한다. 롤백되면 사진이 남아 있어야 하기 때문이다.
• 연락처는 로그인한 사람에게만 보여 준다. 실종 글의 전화번호가 그대로 수집되는 것을 막기 위해서다.

이 규칙들은 MockMvc 테스트로 고정했다. 남의 글 수정(403), 로그인 없음(401), CSRF 토큰 없음, ../../evil.png 업로드 같은 경우를 하나씩 검사한다.

디자인: 전봇대에 붙은 실종 전단

강아지를 잃어버리면 가장 먼저 하는 일이 전단을 붙이는 것이라, 화면도 그 모양에서 출발했다. 제보 카드는 테이프로 붙인 전단처럼 생겼고, 실종은 빨간 찾습니다, 발견은 파란 보호하고 있어요, 가족을 찾으면 초록 찾았어요 도장이 찍힌다. 상세 화면 아래에는 전단처럼 뜯어 가는 연락처 쪽지를 넣었다.

jQuery 와 Bootstrap 은 모두 걷어 내고, CSS 한 파일과 기본 자바스크립트로 다시 만들었다. 모바일에서는 카드가 한 줄에 두 장씩 보인다.

새로 넣은 기능

• 목격 제보: 실종 글에 이웃이 “여기서 봤어요” 로 본 시간·장소·메모를 남기면, 상세 지도에 번호로 찍힌다. 목격자 연락처는 글쓴이에게만 보인다.
• 비슷한 제보 추천: 실종 글에는 5km 안의 발견 글을, 발견 글에는 실종 글을 보여 준다. 같은 품종을 먼저, 그다음 가까운 순서다. 위경도 사각형으로 먼저 거르고 하버사인 공식으로 실제 거리를 계산한다.
• 내 주변 제보: 현재 위치 3km 안의 제보만 모아 보고 거리를 표시한다.
• 인쇄용 전단지: A4 한 장에 사진, 특징, 뜯어 가는 연락처 쪽지, 제보 페이지로 가는 QR 코드를 넣었다. QR 은 ZXing 으로 만들어 인쇄해도 깨지지 않는 SVG 로 내보낸다.
• 가족을 찾았어요: 찾으면 상태를 바꿔 연락처를 숨긴다.
• 신고와 관리자: 서로 다른 세 사람이 신고하면 관리자가 볼 때까지 자동으로 숨기고, 관리자는 /admin 에서 되살리거나 지운다.
• 입양 공고: 공공데이터포털의 구조동물 조회 API 를 쓰고, 인증키가 없을 때만 예전처럼 화면을 읽어 온다. 밀려 있던 시군구 코드도 바로잡았다.
• 그 밖에 목록용 작은 사진(480px), 하루 글 10개·목격 제보 20개 제한, sitemap.xml

운영 준비

• prod 프로필: PostgreSQL, 보안 쿠키, 프록시 뒤의 https 주소 처리, /actuator/health
• Dockerfile 과 환경 변수로 넣는 소셜 로그인 키
• demo 프로필: 키 없이 예시 제보 8건과 데모 계정으로 모든 기능을 둘러볼 수 있다

./gradlew bootRun --args='--spring.profiles.active=demo'

테스트는 36개로 늘었고, GitHub Actions 에서 push 마다 돈다.

다음 할 일

호스팅을 정해 실제로 배포하고, 카카오 지도 도메인과 공공데이터 인증키를 등록하는 것이 남았다.