AI Tools Lab
전체 메뉴 열기전체 메뉴 닫기
학습·업무편집 예시

기록이 쌓이는 습관 관리 도구 만들기

완료 버튼의 애니메이션보다 날짜와 연속 일수 계산을 먼저 정합니다. 기록을 식물과 달력으로 보여 주고, 새로고침과 저장 제한까지 점검하는 레시피입니다.

Claude Opus 5.5 · JavaScript · SVG · localStorage

작성 AI Tools Lab 운영자오류 제보·정정 요청
식물 세 개와 날짜별 완료 칸으로 표현한 습관 기록 도구 콘셉트 이미지
AI 생성 콘셉트 이미지 · 실제 실행 캡처가 아닙니다. 내 자료와 목적에 맞춰 새로 만들어 보세요.

01준비할 자료

  • 기록할 습관 3개와 완료 기준. ‘운동하기’보다 ‘점심 뒤 10분 걷기’처럼 체크할 수 있는 행동으로 정합니다.
  • 하루의 경계: 사용자가 접속한 기기의 현지 날짜를 사용하고 여행·시간대 변경 시 어떤 날짜로 기록할지 정합니다.
  • 연속 일수 시험 자료: 10월 1·2·3일 모두 완료한 경우와 1·3일만 완료한 경우. 실제 기록과 분리한 예시 데이터입니다.
  • 이 도구를 열 로컬 웹 서버 주소와 사용할 브라우저. 파일을 직접 여는 방식의 저장 동작은 환경마다 다를 수 있습니다.

아래 도구는 이 예시의 구현 방향입니다. 선택한 AI 도구에서 코드·파일을 다룰 수 있는지 먼저 확인하고, 설치 버전과 실행 방법을 기록하세요.

02시작 프롬프트

대괄호 안을 내 정보로 바꿔서 사용하세요.

Claude Opus 5.5로 [습관 이름 3개]를 관리하는 작은 웹 도구를 만들어 주세요.
습관 추가·이름 수정·삭제, 오늘 완료·취소, 날짜별 기록, 현재 연속 일수, 간단한 SVG 식물 표시가 필요합니다. 로그인·기기 동기화·백업 서비스는 제외합니다.
완료 기준은 [각 습관의 구체적인 행동]입니다. 현지 날짜 YYYY-MM-DD를 날짜 키로 사용하고 UTC 날짜를 그대로 자르지 마세요.
날짜별 완료 여부를 저장하세요. 오늘 완료했으면 오늘부터, 오늘 미완료면 어제부터 과거의 연속 완료 날짜 수를 계산합니다. 같은 날 두 번 눌러도 늘지 않고 취소·과거 기록 변경 후에도 다시 계산되어야 합니다.
연습용 예시 기록은 ‘예시 보기’에서만 표시하고 실제 기록에 합치지 마세요. 처음 시작하는 내 기록은 비어 있어야 합니다.
localStorage에 버전과 습관별 고유 ID를 포함해 저장하고, 저장 불가·잘못된 JSON이면 오류를 알리고 현재 입력을 화면에서 유지하세요. 자동으로 기존 기록을 삭제하지 마세요.
앱을 다시 활성화하거나 오늘의 날짜가 달라질 때 화면을 갱신하세요. 화면·SVG는 단색만 사용하고 그라디언트를 넣지 마세요.
1·2·3일 완료는 3, 1·3일 완료는 1로 계산되는지, 중복 완료·취소·새로고침·자정·저장 제한을 확인하는 절차를 설명하세요.

03만들고 다듬는 순서

  1. 꾸준함의 기준을 먼저 정합니다

    매일 한 번 확인할 수 있는 행동 3개로 시작합니다. 오전·오후를 따로 기록하거나 횟수를 세기 시작하면 날짜별 완료의 의미가 달라집니다. 첫 버전에서는 하루에 완료 또는 미완료 한 값만 두고, 습관 이름을 바꾸어도 같은 고유 ID의 과거 기록이 유지되게 합니다.

  2. 완료 기록에서 연속 일수를 계산합니다

    10월 3일을 기준으로 1·2·3일을 모두 체크했다면 연속 일수는 3입니다. 1일과 3일만 체크했다면 1이고요. 이 값은 버튼을 누른 횟수로 세면 안 됩니다. 완료한 날짜에서 다시 계산해야 두 번 누르거나 체크를 취소해도 값이 맞습니다. 오늘이 아직 미완료라면 어제부터 세도록 정합니다.

  3. 예시 화면과 내 기록을 분리합니다

    식물이 자라는 모습은 가상 기록으로 보여 줄 수 있지만 내 습관을 시작할 때는 기록이 비어 있어야 합니다. ‘예시 보기’와 ‘내 기록’의 제목·데이터를 분리하도록 요청합니다. 예시 화면의 완료 버튼을 눌렀다고 내 기록에 저장되면 두 상태가 섞인 것이므로 먼저 해결합니다.

  4. 저장 성공을 확인하고 실패를 드러냅니다

    로컬 웹 서버에서 습관 하나를 완료한 뒤 새로고침해 같은 날짜의 기록이 남는지 확인합니다. localStorage는 같은 사이트 주소의 브라우저 저장소이며 다른 기기에 자동으로 전달되지 않습니다. 저장이 제한되면 완료 표시를 없애는 대신 저장되지 않았다는 안내와 현재 입력을 남기도록 요청합니다.

  5. 자정과 지난 기록 변경을 확인합니다

    전날 열어 둔 화면을 다음 날 다시 사용할 때 ‘오늘’ 표시가 바뀌는지 확인합니다. 날짜 키를 만들 때 UTC 시각을 사용하면 현지 날짜와 어긋날 수 있습니다. 과거 하루를 취소한 뒤 연속 일수와 달력·식물 상태가 함께 바뀌는지도 확인하고, 시간대를 바꾼 시험은 조건을 따로 남깁니다.

  6. 식물은 계산 결과를 설명하게 합니다

    기록 계산이 맞으면 연속 일수에 따라 씨앗·새싹·잎처럼 몇 단계의 SVG를 보여 줍니다. 미완료를 실패처럼 표현하거나 하루를 놓쳤다는 이유로 모든 기록을 지우지 않습니다. 숫자와 날짜는 식물 옆에 읽을 수 있게 남겨 색이나 그림만으로 상태를 판단하지 않게 합니다.

04완성 전 체크

직접 확인한 항목만 체크하세요. 체크 상태는 저장되거나 서버로 전송되지 않습니다.

05막힐 때 확인할 것

오늘 완료를 두 번 누르니 연속 일수가 2가 됩니다

클릭 횟수를 누적하지 말고 습관 ID와 날짜를 기준으로 완료 여부를 저장하도록 요청합니다. 완료와 취소 모두 같은 계산 함수를 다시 사용하게 하고 중복 완료 시험 자료를 전달합니다.

밤에 체크한 기록이 어제나 내일에 들어갑니다

UTC 날짜를 자른 값인지 확인하고 현지 연·월·일로 날짜 키를 만들도록 요청합니다. 하루 이동도 달력 날짜로 계산하고, 시험한 기기의 시간대와 시각을 함께 전달합니다.

새로고침 후 기록이 사라지거나 예시로 바뀝니다

저장 실패를 숨기는지, 사이트 주소가 달라졌는지, 초기 예시 데이터를 저장소에 덮어쓰는지 나누어 확인합니다. 로컬 서버 주소를 고정하고 내 기록이 없을 때도 예시 기록을 자동 저장하지 않게 합니다.

06출처와 참고 자료

아래 공개 사례는 주제의 참고 자료입니다. 이 글의 도구 선택·절차·프롬프트는 AI Tools Lab의 독립적인 편집 예시이며, 원 제작자의 실제 입력이나 실행 재현 기록이 아닙니다.

Tend의 식물형 습관 기록 사례를 참고하되, 날짜 계산·예시 분리·저장 실패 대응을 먼저 다루도록 구성했습니다. 이 레시피에 제시한 날짜 기록과 연속 일수는 계산 설명용 예시입니다.