오타니 캘린더 개발 (大谷カレンダー)

요즘 날씨가 더워서 그런지 행동이 느리고 게을러졌다..

이렇게 사는 건 시간이 너무 아깝다. 뭐라도 해야겠다는 생각이 번쩍 들었다.

 

그래서, 다이소에서 목표 달성 플래너를 구입하려고 했다.

다이소 목표 달성 플래너

스읍 근데 생각해보니 수기로 목표 달성을 관리하는 건 개발자 관점에서 매우 비효율적이다.

그래서 시중의 앱을 찾아보았는데, 뭔가 내 입맛에 맞지 않았다.

 

안 되겠다. 그냥 나만의 캘린더를 만들 수밖에... 

 

최고의 동기부여 - 오타니

출처 : Getty Images

어떤 테마의 캘린더를 만들까 고민하던 중, 문득 오타니 쇼헤이 선수가 떠올랐다.

꾸준한 트레이닝으로 타자로서 최고의 성적을 유지하면서도, 투수 복귀까지 준비하고 있다니.. 

배고파서 군것질을 준비하는 나와는 전혀 다른 행보를 걷고 있다.

 

그래서 캘린더의 테마는 ‘오타니 쇼헤이’로 정했다. 단순한 팬심을 넘어서, 나태지옥에서 빠져나올 수 있는 원동력으로 삼아야겠다.

 

요구사항 분석

목표달성 캘린더의 요구사항은 아래와 같다.

1. 오타니 선수를 적극 활용해야 한다.
2. 캘린더에 체크리스트 입력란도 있으면 좋겠다.
3. 실패했을 때 기록도 남기면 좋다.
4. 직관적인 UI/UX면 좋겠다.

 

개발환경 구축

front-end

• vue3 / vite
• javascript

back-end

• spring boot 3.5.0
• java 21
• mysql

원래는 Serverless Framework를 활용하고 싶었다. 그 이유는 백엔드 로직이 적고 간단한 API나 이벤트 처리만 존재하기 때문이다.

하지만 지금은 상용화할 목적으로 만들기 보다는 혼자만 사용할 예정이기 때문에 그냥 스프링을 사용했다.

 

개발과정

front-end

스크립트 보다는 UI 요소(ex. animation, image...)가 많았기에 ChatGPT의 도움을 받았다.

다만, 프롬프트에 신경을 썼다. 프롬프트에 따라 답변 퀄리티가 천차만별이기 때문에 프롬프트를 잘하는 것도 이제는 능력이다.

 

GPT의 정확도를 끌어올리기 위해 가장 먼저 명확한 역할을 부여했다.

두번째는 구체적으로 어떤 요구사항이 있는지 그리고 예시 코드를 통해 내가 생각하는 틀에서 개발하도록 지시했다.

이렇게 규칙을 정해놓고 지시하니, 결과물도 꽤 만족스러웠다.

 

back-end

백엔드 서버를 구축하면서 만든 api는 아래와 같다.

 

1. 캘린더 스탬프 조회

method	GET
uri	/api/calenders?currentDate='2025-06'
description	년월에 해당하는 모든 스탬프를 노출한다. stamp는 해당일자에 체크리스트를 모두 수행했는지, 못했는지를 나타내는 것이다.
response	200, Ok [   {     "date": "2025-06-06",     "stamp": true   },   {     "date": "2025-06-07",     "stamp": false   } ]

 

2. 체크리스트 조회

method	GET
uri	/api/calenders/{id}/check-list
description	캘린더 id에 해당하는 체크리스트를 조회할 수 있다.
response	200, Ok [   {     "contents": "아침먹기",     "isCompleted": true   },   {     "contents": "점심먹기",     "isCompleted": false   }, ]

 

3. 체크리스트 생성

method	POST
uri	/api/calenders/{id}/check-list
description	캘린더 id에 해당하는 체크리스트를 생성한다.
response	201, Created

 

4. 스탬프 저장 

method	POST
uri	/api/calenders/{id}/stamp
description	캘린더 id에 해당하는 stamp 상태를 업데이트한다.
response	200, Ok

 

 

오타니 캘린더 완성

약 2시간의 작업 끝에 오타니 캘린더를 개발했다.

데모 영상을 통해 서비스를 어떻게 사용하는지 대략적으로 파악할 수 있을 것이다.

 

데모영상

 

홈화면

달력을 노출하며 각 일자마다 목표달성에 성공했는지, 실패했는지 파악할 수 있다.

 

체크리스트

일자를 클릭하게 되면, 체크리스트를 입력할 수 있다.

모든 체크리스트를 완료하면 스탬프 찍기 버튼이 활성화되고 스탬프를 찍을 수 있다.

 

스탬프 이펙트 - 성공

 

스탬프를 찍으면 따봉 오타니가 나를 반겨준다.

 

스탬프 이펙트 - 실패

만약, 목표 달성에 실패했다면 속상한 오타니가 등장한다. (에인절스 안티팬은 아니지만 색상이 레드라 실패에 사용 ㅜㅜ)

 

끝으로..

오타니가 가장 본인이 잘하는 것이 '좋아하는 것을 열심히 하는 것'이라고 답변한 기사를 보았다.

오타니 선수는 말도 잘하는 것같다.

 

앞으로 개발한 캘린더와 함께 좋아하는 것을 열심히 할 수 있는 사람이 되어보아야겠다.

(언젠간 오타니 선수에게 이 게시물이 닿기를....)