AI & EXPERIMENT

2026-07-29 • 17분 읽기 • 👀 6

간단하게 ChatGPT로 운동 기록 앱 만들기

HTML, JavaScript, CSS와 브라우저 LocalStorage를 이용해 로그인과 데이터베이스가 필요 없는 운동 기록 앱을 만들었습니다.

운동 기록 앱을 직접 만든 이유

운동을 시작하면서 세트 수와 반복 횟수를 기록할 수 있는 운동 기록 앱이 필요했습니다.

Google Play에서 여러 운동 기록 앱을 찾아봤습니다. 기존 앱들은 운동 통계, 운동 루틴 관리, 회원 기능 등 다양한 기능을 제공하고 있었습니다.

하지만 제가 찾아본 앱 중에는 유료 구독이 필요한 앱이 많았고, 저에게 필요하지 않은 기능도 포함되어 있었습니다.

제가 필요했던 것은 복잡한 피트니스 플랫폼이 아니라 운동 중에 빠르게 기록할 수 있는 간단한 도구였습니다.

그래서 ChatGPT를 활용해 직접 운동 기록 앱을 만들어 보기로 했습니다.

제가 필요했던 운동 기록 앱 기능

제가 필요했던 기능은 다음과 같습니다.

로그인과 회원가입 없이 사용하기
운동 종목 또는 운동 기구 기록하기
운동 세트 수 기록하기
세트별 목표 반복 횟수 입력하기
실제 수행한 반복 횟수 입력하기
세트 사이의 쉬는 시간 타이머 사용하기
운동 루틴 저장하기
운동 루틴 내보내기와 가져오기
직전 운동 기록 불러오기

이 정도 기능만 있어도 제가 운동하면서 기록하고 지난 운동과 비교하는 데는 충분했습니다.

HTML, JavaScript, CSS만 사용했습니다

이번 운동 기록 앱은 다음 세 가지 웹 기술로 만들었습니다.

HTML
JavaScript
CSS

별도의 모바일 애플리케이션 개발 프레임워크는 사용하지 않았습니다. 브라우저에서 실행되는 웹 앱 형태로 만들었습니다.

제 휴대폰에서 사용하는 것이 목적이었기 때문에 로그인, 회원가입, 사용자 인증 서버도 만들지 않았습니다.

서버 기능을 최소화하니 개발 과정이 단순해졌고, 유지 관리해야 할 부분도 줄어들었습니다.

데이터베이스 대신 LocalStorage를 사용했습니다

운동 종목, 세트 수, 목표 횟수, 실제 수행 횟수 등의 데이터는 브라우저의 LocalStorage에 저장하도록 만들었습니다.

LocalStorage는 웹 브라우저 내부에 데이터를 저장할 수 있는 기능입니다. 브라우저를 종료한 후 다시 실행하더라도 저장된 데이터를 불러올 수 있습니다.

데이터를 서버로 전송하지 않고 현재 사용하는 브라우저에 저장하기 때문에 개인적으로 사용하는 작은 웹 앱에 적합했습니다.

LocalStorage 사용 시 주의할 점

LocalStorage에 저장된 데이터는 브라우저 데이터 삭제, 기기 변경 또는 다른 브라우저 사용 시 자동으로 동기화되지 않습니다.

중요한 기록이라면 내보내기 기능을 이용해 별도로 백업하는 것이 좋습니다.

운동 루틴을 저장하고 공유할 수 있습니다

운동을 계속하다 보니 자주 사용하는 운동 항목을 매번 입력하는 것이 불편했습니다.

그래서 운동 루틴을 저장하고 다시 불러올 수 있는 기능을 추가했습니다.

운동 루틴 저장
운동 루틴 수정
운동 루틴 내보내기
운동 루틴 가져오기

내보내기 기능을 이용하면 운동 루틴을 파일로 백업할 수 있습니다. 필요한 경우 다른 사람에게 운동 루틴을 전달하거나 다른 기기로 옮기는 데도 활용할 수 있습니다.

직전 운동 기록을 불러올 수 있게 했습니다

개인적으로 가장 유용하게 사용하고 있는 기능은 직전 운동 기록 불러오기입니다.

오늘 운동을 시작할 때 이전에 수행했던 운동의 무게와 횟수를 바로 확인할 수 있도록 만들었습니다.

벤치프레스

직전 운동 기록

60kg × 10회
60kg × 10회
65kg × 8회

지난 운동 기록을 확인할 수 있기 때문에 무게와 반복 횟수를 기억할 필요가 없습니다.

이전 기록을 기준으로 중량이나 반복 횟수를 조금씩 늘려가며 운동할 수 있다는 점도 편리했습니다.

로그인 기능은 아직 만들지 않았습니다

나중에는 Google 계정이나 SNS 계정을 연동해 여러 기기에서 운동 기록을 동기화하는 기능이 필요할 수도 있습니다.

하지만 현재는 제 휴대폰에서만 사용하고 있기 때문에 로그인 기능이 없어도 불편하지 않습니다.

오히려 앱을 실행한 후 바로 기록할 수 있어 더 간단합니다.

앞으로 여러 기기 동기화나 사용자 공유 기능이 필요해진다면 그때 데이터베이스와 로그인 기능을 추가해도 늦지 않을 것 같습니다.

Cloudflare에 운동 기록 앱을 배포했습니다

구매해 둔 도메인이 있어서 다음 주소로 연결했습니다.

https://gym.brightnetworks.kr/

웹 앱 배포에는 Cloudflare 서비스를 이용했습니다.

Cloudflare는 웹사이트와 웹 애플리케이션을 전 세계 사용자에게 빠르게 제공할 수 있도록 도와주는 클라우드 플랫폼입니다.

HTML, CSS, JavaScript로 만든 정적 웹사이트를 배포할 수 있으며, 커스텀 도메인과 HTTPS도 연결할 수 있습니다.

Cloudflare Workers를 이용하면 별도의 서버를 직접 관리하지 않고도 API와 서버 기능을 구현할 수 있습니다.

개인 프로젝트, 프로토타입, 간단한 홈페이지, 서비스 MVP를 빠르게 배포할 때 활용하기 좋은 플랫폼입니다.

간단한 서비스나 MVP라면 작게 시작해도 됩니다

간단한 서비스를 기획하고 있다면 처음부터 복잡한 시스템을 만들 필요는 없다고 생각합니다.

예를 들어 다음과 같은 서비스는 데이터베이스 없이도 먼저 만들어 볼 수 있습니다.

운동 기록 앱
할 일 관리 앱
개인 메모 앱
간단한 가계부
체크리스트
타이머
개인용 계산기

HTML, JavaScript, CSS로 화면과 기능을 만들고, 데이터는 브라우저 LocalStorage에 저장할 수 있습니다.

완성된 웹 앱은 Cloudflare에 배포하고 커스텀 도메인을 연결하면 바로 사용할 수 있습니다.

실제 사용자가 늘어나거나 여러 기기에서 데이터 동기화가 필요할 때 Supabase, Firebase 또는 별도의 서버와 데이터베이스를 추가하면 됩니다.

마무리

이전에는 작은 아이디어를 서비스로 만들기 위해서도 개발 지식과 많은 시간이 필요했습니다.

하지만 지금은 ChatGPT와 같은 AI 도구를 활용하면 HTML, JavaScript, CSS 코드를 빠르게 생성하고 필요한 기능을 하나씩 구현할 수 있습니다.

처음부터 모든 기능을 완벽하게 만들려고 하면 프로젝트가 불필요하게 복잡해질 수 있습니다.

먼저 자신에게 필요한 핵심 기능만 구현하고, 실제로 사용하면서 불편한 부분을 개선하는 것이 더 현실적인 개발 방법이라고 생각합니다.

앞으로 필요한 기능이 생긴다면 그때 하나씩 구현해도 늦지 않습니다.

AI 덕분에 아이디어를 생각하는 것에서 그치지 않고 직접 서비스로 만들어 사용할 수 있는 시대가 된 것 같습니다.

목차