By kage2k in 개발자 — Dec 11, 2025

[개발 일지] 일본어 뉘앙스 사전 웹 서비스 구축 보고

작성일: 2025년 12월 11일
작성자: kage2k
프로젝트명: JPNuance (일본어 뉘앙스 사전 웹 버전)

1. 개요 및 기획 의도

최근 새롭게 출시된 개발 도구인 **'Antigravity'**를 실무에 적용해 보고자 본 프로젝트를 기획하였습니다. 기존에 Flutter 프레임워크를 사용하여 iOS 및 Android 플랫폼에 출시했던 **"일본어 뉘앙스 사전"**의 검증된 사전 데이터를 보유하고 있어, 이를 활용하여 웹 기반 서비스를 신속하게 구축하기로 결정하였습니다.

2. 개발 환경 및 기술 스택

IDE: Antigravity (VSCode 기반 인터페이스)
Prototyping: Google AI Studio Build
Frontend: React, TypeScript, Tailwind CSS
Infra/Deployment: Coolify, Docker
Version Control: GitHub (Private Repository)

3. 개발 진행 과정

3-1. 초기 프로토타이핑 및 환경 설정

랜딩 페이지 구성: Google AI Studio Build를 활용하여 총 4개의 섹션으로 구성된 랜딩 페이지의 초안을 신속하게 생성하였습니다.
로컬 환경 이관: 생성된 결과물이 만족스러운 수준에 도달하였을 때 소스 코드를 다운로드하였으며, 이를 로컬 환경의 Antigravity 에디터에서 오픈하였습니다. (UI/UX가 VSCode와 유사하여 접근성이 좋았습니다.)
패키지 설치: npm install 명령어를 통해 종속성을 설치하고, npm run dev를 실행하여 로컬 서버에서의 정상 구동을 확인하였습니다.

3-2. 기능 구현 및 데이터 연동

AI 기반 코딩:기존 보유 중인 JSON 형식의 사전 데이터를 웹 서비스에 적용하기 위해 AI와 단계별 문답(Q&A) 방식을 진행하였습니다.
- 데이터 구조 파싱 및 컴포넌트 렌더링 방식에 대해 질문과 답변을 반복하며 코드를 고도화하였습니다.
생산성 제언: React, TypeScript, Tailwind CSS에 대한 기초 지식이 있는 경우, AI의 보조를 통해 약 1~2일 내에 완성도 높은 결과물을 도출할 수 있을 것으로 판단됩니다. (단순 앱 출시용 랜딩 페이지의 경우 소요 시간은 더욱 단축될 것입니다.)

4. 배포(Deployment) 프로세스

4-1. 배포 전략 수립

플랫폼: Coolify를 이용한 자체 호스팅 방식을 채택하였습니다.
빌드 방식 선정: Coolify의 기본 방식인 Nixpacks 사용 시 간헐적인 에러가 발생하는 호환성 이슈가 있어, 보다 안정적인 Dockerfile 방식을 선호하여 적용하였습니다.

4-2. 컨테이너 설정 및 배포 실행

설정 파일 생성: AI에게 요청하여 배포에 필요한 필수 파일(Dockerfile, .dockerignore, nginx.conf, .gitignore)을 생성하고 내용을 검토 및 수정하였습니다.
저장소 업로드: 구성된 프로젝트를 GitHub Private Repository에 Push 하였습니다.
Coolify 연동:
- Coolify 대시보드에서 해당 GitHub 프로젝트를 로드하였습니다.
- 내부 포트를 80번으로 설정하고, 서비스할 서브 도메인 URL을 지정하였습니다.
최종 배포: Deploy를 실행하였으며, 과정 중 발생하는 사소한 에러는 로그를 확인하여 즉시 수정 및 재배포하였습니다.