👋 개요

웹 기반 카페인 트래커 ‘CaffInMe’의 초기 프로토타입을 완성했습니다. 아이디어 기획부터 시작하여, 핵심 로직 구현, 동적 그래프 시각화, 그리고 사용자 인터페이스 디자인까지 전반적인 개발을 진행했습니다.

📝 오늘 한 일

  • 프로젝트 아이디어 구체화 및 기능 정의 (기획서.md 작성)
  • HTML/CSS를 사용한 기본 레이아웃 및 UI 구조 설계
  • ‘커피’ 테마의 디자인 시스템(색상, 폰트) 적용
  • 카페인 추가 및 시간에 따른 반감기 계산 로직 구현
  • localStorage를 이용한 데이터 영속성 확보 (섭취 로그, 설정 상태)
  • Chart.js를 활용한 체내 카페인 변화 동적 그래프 시각화
  • 최초 사용자를 위한 초기 설정 화면 구현
  • 데이터 초기화를 위한 리셋 버튼 기능 구현
  • 앱의 주요 기능 설명을 위한 도움말(?) 팝업 기능 구현
  • 기능 구현 중 발생한 다수의 버그 수정 및 디버깅

✨ 주요 작업 내용

데이터 기반 동적 그래프 & 상태 관리

단순히 현재 값만 저장하는 대신, 모든 카페인 섭취 이벤트를 타임스탬프와 함께 로그로 저장하는 데이터 구조를 설계했습니다. 이 로그 기반 접근 방식 덕분에, 특정 시점의 카페인 양을 정확히 계산하여 과거와 미래를 포함하는 동적인 그래프를 그릴 수 있었습니다.

코드 스니펫:

// 특정 시간(time)의 체내 총 카페인 양을 계산하는 함수
const calculateCaffeineAtTime = (log, time) => {
    let totalCaffeine = 0;
    log.forEach(entry => {
        const timeElapsed = time - entry.timestamp;
        // 섭취 시간 이후에만 계산
        if (timeElapsed >= 0) {
            // 반감기 공식을 적용하여 남은 양을 더함
            totalCaffeine += entry.amount * Math.pow(0.5, timeElapsed / HALF_LIFE_MS);
        }
    });
    return totalCaffeine;
};

실행 결과: (섭취 기록에 따라 실시간으로 변하는 그래프 및 현재 상태 UI)

겪었던 문제 및 해결 과정

문제: Chart.js Annotation 플러그인을 사용하여 그래프의 50mg 교차점을 시각적으로 표시하려 했으나, 스크립트 로딩 문제로 앱 전체가 계속해서 멈추는 치명적인 오류가 발생했습니다.

시도:

  1. 처음에는 플러그인 등록 코드(Chart.register)의 문제로 의심하여, 등록 변수명을 변경하고 try...catch로 예외 처리를 시도했습니다. 하지만 이는 근본적인 해결책이 아니었고, 로딩 실패 문제는 계속되었습니다.
  2. 플러그인을 불러오는 CDN 주소의 불안정성을 의심하여, 더 신뢰도 높은 cdnjs의 주소로 변경했습니다. 하지만 이 역시 문제를 해결하지 못했고, 원인 파악에 시간이 지체되었습니다.

해결: 결국 해당 기능의 구현 복잡도와 디버깅에 소요되는 시간 대비 효용이 낮다고 판단했습니다. 사용자와의 합의 하에 해당 기능을 과감히 포기하고, 안정적으로 작동하던 이전 버전 기준으로 다른 핵심 기능 개발에 집중했습니다. 이 결정 덕분에 프로젝트를 빠르게 안정화시킬 수 있었습니다.

💡 새롭게 배운 점

  • 외부 라이브러리, 특히 CDN을 통해 로드되는 플러그인은 예상치 못한 로딩 문제를 일으킬 수 있으며, 안정적인 CDN 선택과 로딩 실패에 대한 방어적 코딩의 중요성을 깨달았습니다.
  • 복잡한 부가 기능 구현 중에 해결하기 어려운 문제에 부딪혔을 때, 때로는 그 기능을 과감히 포기하고 프로젝트의 핵심 가치에 집중하는 것이 더 나은 결정일 수 있다는 점을 배웠습니다. (이른바 ‘Kill your darlings’)

🚀 다음 계획

  • 섭취 기록 리스트 기능 구현
  • 프로젝트 코드 정리 (CSS/JS 파일 분리)
  • GitHub Pages를 통한 최종 프로토타입 배포