간단한 웹 도구를 만들어보자는 생각으로 시작한 복리 계산기 프로젝트. 복잡한 개발 환경이나 프론트엔드 기술 없이, AI의 도움을 받아 빠르게 실행 가능한 구조로 실험해봤다. 이번 글에서는 처음 도구를 만들면서 사용한 도구, 겪었던 시행착오, 그리고 배운 점들을 정리한다.
사용 도구 및 흐름 요약
- Replit + GPT 조합으로 시작
- GPT에게 “복리 계산기 만들고 싶다”고 요청해 기본 HTML/JS 코드를 받음
- 이 코드를 Replit에 붙여넣으면 자동으로 코드가 보완되고, 몇 초 안에 미리보기가 가능
- 실제 계산 기능은 정상 작동했고, UI도 최소한으로 완성됨
- 배포하려다 마주친 문제
- GPT는 Replit에서 일정 수준까지는 무료 배포가 가능하다고 안내했지만, 추천된 옵션은 유료 결제가 필요한 상태
- 이에 따라 다른 무료 호스팅 방법을 GPT에게 요청
- Netlify vs Vercel 제안 → Netlify 선택
- 무료 배포 가능한 플랫폼으로 Netlify와 Vercel을 추천받음
- 두 플랫폼 모두 실험해본 결과, Netlify가 더 빠르고 URL도 깔끔하며 iframe 인베드도 문제 없음
- 결과적으로, Netlify를 복리 계산기 도구의 배포 플랫폼으로 선택
겪은 문제: 줄바꿈 이슈
- 배포 후 테스트하던 중, 텍스트가
한 단어는 앞 줄 / 나머지는 뒷줄에 나뉘는 불규칙한 줄바꿈 현상 발생 - Replit에서는 문제없이 보였던 부분이 실제 브라우저 환경에서는 깨짐
- GPT에게 이 현상을 보여주고 해결법 요청 → 보다 명확하고 엄격한 CSS 구조로 수정함
배운 점 요약
- AI가 제공하는 코드는 “완성본”이 아니라 “초고”다 → 기본적으로 작동은 하지만, 실제 서비스 환경에서는 예외가 생길 수 있음
- 개발 환경(Replit 미리보기)과 브라우저 환경은 다르게 반응할 수 있다 → 단순히 실행된다고 해서 곧바로 배포하지 말고, 실제 사용자 환경에서 검토 필요
- 배포 도구(Netlify 등)를 선택할 땐, 속도・URL・임베딩 호환성까지 고려해야 한다
결론
처음 시도한 웹 도구 제작이었지만, AI의 도움을 잘 활용해서 기획 → 제작 → 배포까지의 전체 과정을 몇 시간 내로 마칠 수 있었다.
이번 경험을 바탕으로, 다음 도구는 더 빠르고 깔끔하게 만들 수 있을 것이다.
(라고 기대했지만 실제론 그렇지 않았다는 이야기를 다음편에 계속..)
