1. 초기 환경 설정 및 AI 도구 활용의 난관
Rails 앱 개발의 첫 단계는 GitHub 저장소 생성 및 CodeSpaces 환경 설정으로 시작되었습니다. 초기에는 Cursor와 같은 코드 편집 도구 사용을 시도했으나, 단일 모니터 환경 및 익숙지 않은 설정으로 인해 어려움을 겪었습니다. Ruby 및 Rails 설치 여부 확인 과정에서 Rails not found 오류가 발생했으며, Apple Command Line Developer Tools 설치 지연과 같은 기본적인 인프라 문제에 직면했습니다. GitHub Copilot(GPT-4.1 모델)을 활용하여 개발을 진행했으나, 느린 응답 속도와 반복적인 오류로 인해 개발 생산성이 저하되었습니다. 특히 토큰 사용량 제한으로 인해 Copilot Pro로 업그레이드해야 하는 상황이 발생했습니다.
2. Claude Sonnet 4.5로의 전환과 개발 가속화
Copilot Pro 업그레이드 이후에도 GPT-4.1 모델의 성능 한계를 체감하며, Claude Sonnet 4.5로 AI 모델을 전환했습니다. 이 결정은 개발 과정에 획기적인 변화를 가져왔습니다. Claude Sonnet 4.5는 훨씬 빠른 응답 속도와 정확한 문제 해결 능력을 보여주었으며, 이는 이전에 몇 시간 동안 해결하지 못했던 문제들을 신속하게 처리하는 데 결정적인 역할을 했습니다. 이 전환은 AI 기반 개발에서 적절한 도구 선택이 얼마나 중요한지 명확히 보여주었습니다.
3. 지도 데이터셋 및 UX 개선
초기에는 지도 데이터셋의 불완전성으로 인해 많은 문제가 발생했습니다. 예를 들어, 프랑스령 기아나가 프랑스의 일부로 표시되거나, 싱가포르가 목록에 없거나 중복되는 등의 오류가 있었습니다. 이를 해결하기 위해 countries Gem을 도입하여 정확하고 포괄적인 국가 목록 및 ISO 코드를 확보하고, 데이터베이스를 정리하고 재시딩하는 과정을 거쳤습니다. 이와 함께 사용자 경험(UX) 개선을 위한 다양한 기능이 구현되었습니다:
-
기본 지도 시각화: 사용자가 방문 국가를 선택하면 지도에 색상으로 표시됩니다.
-
지도 클릭 기능: 지도상의 국가를 직접 클릭하여 방문 여부를 토글할 수 있는 기능이 추가되었습니다.
-
국가 검색 및 목록 정렬: 방대한 국가 목록에서 특정 국가를 쉽게 찾을 수 있도록 검색 기능과 알파벳순 정렬이 적용되었습니다.
-
자동 저장: 사용자의 변경 사항이 자동으로 저장되도록 하여 편의성을 높였습니다.
4. 히트맵 및 공유 기능 구현
앱의 핵심 목표인 히트맵 기능은 방문 횟수에 따라 국가의 색상이 차가운 색(방문 횟수 적음)에서 뜨거운 색(방문 횟수 많음)으로 변화하는 그라데이션 방식으로 구현되었습니다. 또한, 마우스 오버 시 방문 횟수를 표시하는 호버 효과가 추가되어 시각적 정보를 강화했습니다. 사용자가 자신의 방문 기록 지도를 다른 사람들과 공유할 수 있도록 공유 링크 생성 기능도 구현되었습니다. 초기에는 URL에 모든 데이터를 인코딩하는 방식이었으나, 이후 데이터베이스 기반의 동적 업데이트 방식으로 전환하여 공유된 지도가 항상 최신 상태를 유지하도록 개선했습니다.
5. 다중 사용자 인증 시스템 도입
앱을 다중 사용자 환경으로 확장하기 위해 Devise Gem을 활용한 사용자 인증 시스템이 도입되었습니다. 이를 통해 사용자 가입, 로그인, 로그아웃, 비밀번호 재설정 등 기본적인 인증 기능이 추가되었으며, 각 사용자가 독립적인 여행 데이터를 관리할 수 있도록 데이터베이스 구조가 조정되었습니다. 모든 지도 작업은 현재 로그인한 사용자의 범위 내에서 이루어지도록 컨트롤러 로직이 업데이트되어 데이터 프라이버시가 보장됩니다. 최종적으로 Render.com을 통한 배포 가능성을 염두에 둔 설정 작업도 진행되었습니다.