AI 운동 가이드 트레이너

• AI 운동 트레이너가 24시간 대기하고 있습니다!
• 오늘 어떤 운동을 할 지 고민하는 당신에게 AI 트레이너가 운동을 추천해줍니다! 한 번 시험해보세요!

1.기능

• AI 챗봇 기능을 이용해 운동을 서포트하는 여러 기능을 추가
• 타이머 알람을 이용해 운동을 더 체계적으로 할 수 있게 서포트
• 몇 가지 가이드라인을 주며 가이드라인대로 정보 입력 시, 운동 루틴을 받는다.
• 챗봇과 대화하며 보다 쉬운 운동 플랜을 짜기 가능

2.개발 환경

• Visual Studio Code 1.81.1

3.프로젝트 계획

• 프로젝트 구조

1일차

• 기능 설계
• 디자인 등 아이디어 연구
• 기본적인 챗봇 기능 숙지
• html을 이용해 페이지 얼추 만들어두기
• css를 통한 화면 정리

2일차

• html을 이용해 페이지 얼추 만들어두기
• css를 통한 화면 정리
• Javascript 기초작업

3일차

• 본격적인 Javascript를 이용한 챗봇 불러오기

4일차

• 페이지 전환 기능 추가를 통한 기능 확장

5일차

• 타이머 기능 추가하기

6일차

• 운동 서포트 기능 추가하기

7일차

• 마무리 및 기능 추가

4. UI

• 메인 화면

• 계획 짜기

• 타이머

• 챗봇

5. 기능

• 사용자의 정보를 받아, 챗 GPT에게 넘기고 결과를 받아 출력하는 기능
• 기본적으로 챗봇이기도 하고, 내가 원하는 정보를 넣기 힘들 수 있기 때문에 채팅방 형식으로 원하는 질문을 자유롭게 하도록 되어있다.
• 운동할 때 알람 기능이 있으면 좋을 것 같아, 알람과 타이머 기능을 넣었다.

6. 느낀 점

• 첫 개인 프로젝트를 하면서 코드가 길어지면서 늘어지는 파일 정리하는 법이나, 함수를 이용한 기능 압축하는 법을 익혔고, 이 프로그램에 무엇이 필요할지에 대한 고민을 상당히 많이 하면서 떠오른 기능을 구현하기 위해 여러 가지 공부하면서 새로운 지식을 얻을 수 있었다.
• 맨 처음엔 간단할 것이라 예상했고 폴더 정리 없이 시작했지만, 타이머 기능의 JavaScript가 점점 길어지면서, 폴더 분배와 기능 분할의 필요성을 느끼고, 기능별로 분리한 다음 공통된 코드는 공통 스크립트에 따로 모아 가져다 사용하는 식으로 분리하고, 이에 따라 다른 파일들도 분리해 사용하였다. 그러자 보다 깔끔해지고, 코드 관리가 쉬워져서 앞으로도 이런 식으로 진행할 것 같다.
• GitHub 배포의 경험이 처음이어서 index.html의 파일의 중요성을 몰라, 파일 안에 대충 넣어놓는다든지 하는 식으로 활용했지만, 이후 github.io를 알고 배포를 시도해 보자, index.html이 없어 작동하지 않아서 링크 등 파일을 전면적으로 수정하였기 때문에 다음부턴 이를 고려하여 프로젝트 작성을 해겟다고 생각했다.
• 커밋을 하루에 한 번 하는 식으로 했지만, 기능별로 따로 커밋명 넣어서 하는 게 좋다는 이야기를 들었고, 커밋 하는 습관을 들이기로 하였다.