AI를 ‘쓰는 것’에서 ‘잘 쓰는 것’으로: 소제동 인터랙티브 지도 개발기

그동안 무언가를 개발할 때나, 해야 할 때 AI를 편하게 쓰고는 있었지만 "잘" 쓰지 못하고 있다는 걸 깨달았다... 

이제 프로젝트를 할 때는 기본적으로 뼈대를 잡고 어떻게 만들지 AI한테 더 숙지를 잘해줘야겠다는 생각이 들었다

 

이번 스휴라 발표 프로젝트로 대전 소제동의 과거·현재·미래를 보여주는 인터랙티브 지도를 만들었다.

 

나는 백엔드 역할이지만 발표 일정이 먼저였기 때문에, 이번에는 프론트 화면을 우선 완성하고 Spring Boot는 향후 기능 확장을 위한 기본 골격만 만들어 두기로 했다

 

이번 글에서는 다음 과정을 정리한다

 

1. AI에게 프로젝트 요구사항을 전달한 방법
2. React와 Spring Boot 모노레포 구성
3. Docker Compose를 이용한 로컬 실행
4. Rasberry Pi 5와 Nginx를 이용한 온프레미스 배포
5. 하위 경로 배포 과정에서 발생한 CSS·JavaScript 404 문제

현재 최종 구성은 데이터베이스를 사용하지 않고, 지도 데이터도 프론트 정적 데이터로 관리한다

 

1. 이번 프로젝트 발표의 목표

 

먼저 이번 주제는 소제동 철도관사촌의 과거·현재·미래를 둘러보는 인터랙티브 지도다.

화면의 주요 기능은 다음과 같다.

• OpenStreetMap과 Leaflet을 이용한 소제동 지도
• 지도 위에 약 6개의 장소 핀 표시
• 핀을 누르면 해당 장소의 상세 정보 표시
• 과거·현재·미래 사진을 각각 별도의 탭으로 제공
• 공용 디스플레이를 우선으로 설계
• 개인 휴대폰 화면도 반응형으로 지원

현재 사진은 공개 사진 자료를 이용하고, 과거와 미래구현  사진은 발표용 AI 상상 이미지로 구성했다

• 과거 이미지는 역사적 사실 사진이 아닌 AI 상상도
• 미래 이미지는 확정된 계획이 아닌 AI 상상도

 

2. 처음 AI에게 어떻게 지시했는가

 

처음부터 모든 요구사항이 확정된 것은 아니었다. 따라서 AI에게 임의로 결정하지 말고, 불명확한 부분은 반드시 나에게 질문하도록 요청했다.

 

초기 요구사항은 대략 다음과 같았다.

첨부한 발표 자료를 기반으로 프로젝트를 진행한다.
나는 백엔드 역할이며, 발표 자료에 있는 인터랙티브 지도를 먼저 만들고 싶다.
프론트엔드와 백엔드를 포함한 모노레포 형태로 구성한다.
백엔드는 Java Spring, 프론트엔드는 JavaScript와 React를 사용한다.
데이터베이스가 필요한지는 아직 결정하지 않았다.
최종적으로 Docker와 CI/CD를 이용해 서버를 운영할 예정이다.

 

이후 질문과 답변을 통해 요구사항을 구체화했다.

 

화면 요구사항

• 단순한 예제가 아니라 완성된 웹 화면이 필요
• 정확한 장소와 좌표는 아직 없으므로 임시 장소 선정
• 과거·현재·미래를 3개의 탭으로 구성
• 사진이 있다고 가정하고 먼저 화면 틀 제작
• 공용 화면을 1순위로 하고 모바일을 2순위로 지원

 

백엔드 요구사항

 

• 지금은 프론트 정적 데이터만 이용
• Spring Boot는 기본 프로젝트 골격만 생성
• 현재 단계에서는 데이터베이스를 사용하지 않음
• 백엔드는 외부 사용자에게 직접 노출하지 않음

 

배포 환경 요구사항

• Raspberry Pi 5
• Ubuntu Server
• Docker와 Docker Compose 사용
• 학교 내부 온프레미스 환경 
• 외부 Nginx가 특정 포트로 요청을 라우팅
• 로컬에서 먼저 확인한 후 Rasberry Pi에 배포
• GitHub에 소스를 올리고 Rasberry Pi에서 git pull로 업데이트

이처럼 처음부터 구현 벙법을 전부 지정하기보다, 목표와 제약사항을 먼저 전달하고 질문을 통해 세부 사항을 확정했다

 

 

이제 이렇게 정리한 요구사항이 실제 프로젝트 구조와 화면으로 어떻게 이어졌는지, 그리고 로컬에서는 잘 동작하던 화면이 서버 배포 과정에서 왜 깨졌는지를 순서대로 정리해 보려고 한다.