소개
지도 저장목록에 흩어져 있던 해루질 자료를, 직접 기록하고 다시 찾아볼 수 있는 앱으로 묶어보고 싶었습니다. 그래서 AI 브라우저 Aside와 함께 ‘해루질GO’를 만들었습니다.
목표는 예쁜 시안 한 장을 만드는 데서 끝내지 않는 것이었습니다. 포인트를 찾고, 발견한 생물을 기록하고, 나의 도감에서 다시 확인한 뒤 원하 는 기록만 커뮤니티에 공유하는 흐름을 실제로 연결해보는 것이었습니다.
먼저 범위를 분명히 말씀드리면, 이번 결과물은 제 PC에서 실행하는 로컬 웹앱입니다. 누구나 접속하는 공개 서비스가 아니며, 실시간 물때·기상·AI 종 식별까지 모두 연결된 앱도 아닙니다.
진행 방법
1. 도구보다 먼저, 기준이 될 자료를 준비했습니다
주요 도구는 Aside였습니다. 여기에 통합 개발지시문(Markdown), 홈·지도·도감·커뮤니티가 담긴 목업 이미지, 기존 해루질 PDF와 지도 저장목록을 함께 제공했습니다. Aside가 파일을 읽고 코드를 수정하며, 실행 화면과 테스트 결과까지 확인하도록 작업 범위를 잡았습니다.
구현에는 HTML/CSS/JavaScript, Node.js, SQLite를 사용했습니다. 지도는 Leaflet·OpenStreetMap, 사진 처리는 Sharp를 활용했습니다. 중요한 것은 기술 이름보다 “기존 자료를 훼손하지 않고 실제로 저장·재조회되는가”였습니다.
2. “만들어줘”보다 완료 기준을 구체적으로 적었습니다
아래는 개발 인계 자료에 포함한 시작 프롬프트 전문입니다. 이 문구만 단독으로 사용한 것이 아니라, 상세 개발지시문과 목업을 함께 전달하는 방식입니다.
첨부한 HAERUJIL_GO_MASTER_BUILD_PROMPT.md와 해루질GO 목업 이미지를 기준으로, 현재 해루질GO 프로젝트의 개발을 진행해줘. 기존 지도와 포인트 데이터를 먼저 보존하고, 목업의 화면 배치·색상·카드·하단 SOS를 재현해. 메인에는 오늘의 간조와 해루질 추천일 달력을 가장 먼저 보여줘. 홈·지도·도감·AI 기록·크루·원정·커뮤니티·유튜버·장비 장터·SOS·관리자 기능을 이번 통합 작 업 범위에서 연결해. 8주짜리 단계별 계획으로 다시 나누지 마. 이미지에 있는 시연 수치와 안전상 부정확한 문구는 MD에 정한 방식으로 교정하고, 실제 연결·로컬 동작·시연·승인 대기 상태를 명확하게 구분해. 일부 외부 API나 승인이 막혀도 가능한 나머지 구현과 검수를 계속 진행해. 계획서만 작성하고 끝내지 말고 실제 코드 수정·실행·화면 캡처·기능 테스트까지 진행해. 마지막에는 실행 주소, 네 핵심 화면 캡처, 테스트 결과, 미연동/승인 필요 항목을 보고해.
특히 “원본 보존”, “실제·로컬·시연·승인 대기 구분”, “계획서가 아니라 코드·실행·캡처·시험까지”를 명시했습니다. 외부 API가 막혔다고 전체 작업을 멈추거나, 반대로 연결되지 않은 기능을 된 것처럼 보여주지 않도록 경계를 정한 것입니다.
3. 원본 데이터와 새 기능을 분리했습니다
기존 포인트 70개는 이름·출처·메모·비공개 상태를 보존했습니다. 처음에는 검증된 수치 좌표가 없어 임의 핀을 만들지 않았고, 후속 작업에서 원본 지도 저장목록과 1:1로 대조해 좌표를 별도 승인 데이터로 연결했습니다. 대표 지점이나 접근점으로 기록된 곳은 그 정확도 한계도 유지했습니다.
이후 원본 주소를 근거로 70개 포인트를 15개 지역에 연결했습니다. 홈에서 고른 지역이 지도 필터에 이어지고, 원정 검색에서도 지역·날짜·크루 조건을 함께 적용하도록 보완했습니다. 위치 근거가 부족한 항목은 끝까지 저장 보류로 남겼습니다. 비공개 좌표는 관리자에게만 보이도록 했습니다.
4. 화면 목록보다 사용자 흐름을 연결했습니다
가장 중심에 둔 흐름은 다음과 같습니 다.
사진 또는 수동 생물 기록 → 포획·관찰·방류 구분 → 나의 도감 → 경험치·배지 → 사용자가 선택한 기록만 공유.
여기에 크루·원정·글·댓글·좋아요·대화, 장비 장터·채널 검토, SOS 연락 보조, 관리자 기능을 로컬 DB에 연결했습니다. 기록을 비공개로 돌리거나 삭제하면 공유 게시글에서도 사진 접근이 막히는지까지 확인했습니다.
성장 요소로는 학습 미션 20개, 기록 기반 미션 8개, 꾸미기 11종과 칭호·지역 스탬프를 넣었습니다. 다만 포획량 경쟁을 유도하지 않도록 수량에 보상을 주지 않고, 학습 XP는 한국 시간 기준 하루 50점으로 제한했습니다. 레벨이나 배지는 안전 능력·자격을 인증하지 않습니다.
5. 캡처와 테스트 결과를 보고 다시 고쳤습니다
진행 중에는 고해상도 사진 처리, 공유 사진 표시와 접근 권한, 화면의 입력값과 서버가 받는 항목의 불일치 등을 수정했습니다. 목업 분위기를 맞추는 과정에서도 글씨와 버튼이 작아지는 문제가 있어, 가독성과 조작 영역을 다시 점검했습니다.
검수는 운영 자료와 분리된 DB·포트에서 진행했습니다. 후속 검수 기록에서는 원본 포인트 파일과 실사용 계정 DB의 시험 전후 해시가 같음을 확인했습니다. 원본을 지키라는 요청도 말이 아니라 비교 결과로 확인하려고 했습니다.
결과와 배운 점
실제로 확인한 결과
• 홈·지도·도감·커뮤니티의 실제 클릭·입력 가능한 화면 구현
• 포인트 70개 보존, 승인 좌표 연결, 15개 지역 분류
• 기록·공유·성장·커뮤니티·관리자 기능의 로컬 저장
• JSON/CSV 검증·미리보기·관리자 승인 적용, PDF 원문 비공개 보관
• 최신 Node 회귀 테스트 33/33 통과, 구문 검사 37개 파일 통과
• 독립 브라우저 UI 시험 9/9 통과, 360·390·430·768·1440px 화면 점검
위 숫자는 해당 로컬 환경에서 수행한 검수 결과입니다. 실제 iPhone·Android 단말이나 공개 서비스 운영까지 검증했다는 뜻은 아닙니다. 초기에는 독립 브라우저 설치가 막혔지만, 후속 작업에서 별도 Chromium 실행 환경으로 해당 UI 검수를 진행했습니다.
배운 점 1. 프롬프트에는 기능뿐 아니라 “하면 안 되는 일”도 필요합니다
기존 데이터를 삭제하지 말 것, 좌표를 추정해서 채우지 말 것, 시연 숫자를 실제 값처럼 보이지 말 것, 비공개 기록을 자동 공유하지 말 것. 이런 금지 조건이 기능 목록만큼 중요했습니다. 특히 안전과 개인정보가 걸린 앱에서는 그럴듯한 화면보다 정직한 상태 표시가 먼저였습니다.
배운 점 2. 이미지와 비슷한 것, 실제로 동작하는 것은 다릅니다
목업은 배치와 분위기의 기준이지 데이터의 근거가 아니었습니다. 화면에 버튼이 있는지보다 눌렀을 때 저장되는지, 새로고침 후 유지되는지, 권한이 없는 사람에게 보이지 않는지를 따로 확인해야 했습니다.
배운 점 3. “완료”라는 한 단어 대신 연결 상태를 나눴습니다
로컬에서 동작하는 기능, 시연 데이터로 보여주는 화면, 외부 제공자 연결과 승인이 필요한 기능을 구분하니 현재 수준과 다음 할 일이 훨씬 선명해졌습니다. 외부 연결이 막혀도 수동 기록과 나머지 기능을 계속 완성할 수 있었습니다.
아직 남은 과제
실제 조석·기 상·출입 통제 데이터, 사진 AI 종 식별, 클라우드 인증·동기화, OS 푸시, 채널 소유 확인, 결제·실거래는 아직 미연동입니다. 단순히 API 키만 넣으면 끝나는 상태가 아니라, 제공자 연결 구현과 실제 응답·실패 상황 검증이 더 필요합니다.
PDF도 비공개 보관과 별도 좌표 파일 승인까지 지원하며, 자동 OCR·지도표식 인식·좌표 추출을 완성한 것은 아닙니다. SOS는 전화·위치 전달을 돕는 기능이며, 구조기관의 신고 접수나 출동을 보장하지 않습니다.
다음 단계로는 공식 데이터의 이용권한·출처 정책을 확인한 뒤 실제 공급자 연결과 휴대전화 실기기 검증을 진행하고 싶습니다. 조석·기상 데이터 연동이나 위치 기반 서비스의 개인정보 경계를 설계해보신 분들의 경험도 궁금합니다.
화면과 자료 공개 범위
아래는 후속 검수에서 촬영한 홈·도감·커뮤니티의 실제 앱 화면입니다. 모두 시연 모드이며, 물때 수치·회원 수·기록·생물 그림은 예시 또는 참고용입니다. 실제 출조·출입·채취 허가나 안전 판단에 사용하면 안 됩니다.
화면에 다양한 항목이 있는 한국 앱
원본 PDF, 비공개 포인트의 위치·메모·지도 링크, 계정 DB와 개인 사진은 이 글에 첨부하지 않습니다. 지도 화면은 비공개 위치가 드러날 수 있어 공개용 캡처에서 제외했습니다. 공개 배포 주소나 다운로드용 소스도 제공하지 않습니다.
이번 작업의 가장 큰 수확은 AI에게 결과물만 요구하는 대신, 보존할 것·구현할 것·검증할 것·아직 연결하지 못한 것을 함께 관리해본 경험이었습니다. “화면을 만들어주는 AI”에서 한 걸음 더 나아가, 실제로 확인 가능한 작업 단위로 협업해본 사례로 정리하고 싶습니다.
