소개
매일 실천해야 하는 작은 습관들(스픽, 듀오링고, 프로그래밍 스터디, 운동 등)을 한눈에 관리하고 싶었습니다. 시중에 있는 투두 앱들은 너무 무겁거나 제가 원하는 통계(잔디 심기 등)를 직관적으로 보여주지 않았습니다. 그래서 복잡한 서버 연동 없이 브라우저로 가볍게 열어볼 수 있으면서도 디자인이 예쁜 나만의 월간 할 일 트래커(Monthly Tracker) 를 직접 만들어보고자 시도했습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
프론트엔드 환경 세팅 없이 가볍게 실행하기 위해 단일 HTML 파일(HTML + CSS + Vanilla JS) 형태로 개발을 진행했으며, AI 코딩 어시스턴트에게 구체적인 요구사항을 전달하여 코드를 생성하고 다듬는 방식을 활용했습니다.
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
너는 앱 개발자야. 나는 매일 할 일을 노트에 정리하고 있는데, 한 달간 개수를 카운트에서 그래프를 만들어보고 있어. 스픽, 듀오링고, 더캠프, 블로그, 경영학, 수학공부, 프로그래밍공부, 논문스터디, 매일 운동하기, 영어 스터디로 이루어져 있는데 웹 페이지로 구현되었으면 해.
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
보라색 배경의 모바일 앱 스크린샷
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
이거 어떻게 하는지 잘 모르겠습니다.
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
AI에게 코딩을 맡길 때 미니 세션에서 보았던 것처럼 앱 개발자라고 명시를 해주고, 내가 원하는 것이 무엇인지를 구체적으로 적으려고 노력했습니다.
과정 중에 어떤 시행착오를 겪었나요?
명세가 명확하지 않아서 여러번 코드를 고치는 것이 어려움이 있었습니다.
도움이 필요한 부분이 있나요?
아직은 처음이라 글 작성도 이렇게 하면 되는지 잘 모르겠고.
올려도 되는지도 모르겠고.
앞으로의 계획이 있다면 들려주세요.
월별로 그래프가 나오도록 만들고 싶었는데 잘 되지 않아서 이 부분은 개선을 좀 해보겠습니다.
도움 받은 글 (옵션)
릴스에서 본 습관 정리하는 방법인데 다시 찾으려니 안 보여서. 찾으면 다시 만들 때 업데이트 해 보겠습니다.
