Study With Me - AI 기반 학습 플래너

프로젝트 개요

Study With Me는 학습자의 효율적인 시간 관리와 학습 동기 부여를 돕는 올인원 학습 플래너 플랫폼입니다.

스톱워치 기반 학습 시간 측정, 할 일 관리, AI 학습 보조, 그리고 개인 학습 업적 시스템을 통합하여 학습자가 자신의 성장을 시각적으로 확인하고 동기를 유지할 수 있도록 설계되었습니다.

핵심 가치

• ⏱️ 스톱워치 기반 학습 관리: 정확한 학습 시간 측정 및 누적 데이터 관리
• 📝 직관적인 할 일 관리: 오늘/주간/완료 탭으로 체계적인 일정 관리
• 🤖 AI 학습 보조: Google Gemini API 연동으로 실시간 학습 질문 답변
• 🏆 학습 업적 시스템: 학습 데이터 기반 배지 획득 및 성취 시각화

주요 기능

1. 스톱워치 & 학습 시간 관리

• 학습 시간 실시간 측정 (시작/일시정지/재개/정지)
• localStorage를 활용한 누적 학습 시간 저장
• 50분 학습 후 자동 휴식 알림 모달
• 학습 동기 부여를 위한 명언 API 연동

2. 할 일 목록 (TodoList)

• 할 일 추가/완료/삭제 기능
• 오늘·주간·완료 탭 구성으로 체계적 관리
• 드래그 앤 드롭으로 할 일 순서 변경
• 완료된 할 일 카운트 및 로컬 스토리지 저장

3. AI 학습 보조 (Google Gemini)

• 자연어 질의를 통한 실시간 학습 질문 답변
• 질문/답변 로그 저장 및 히스토리 관리
• 답변 영역의 해설/정답 분리 드롭다운 UI
• 무한 스크롤로 질문 이력 확인

4. 학습 업적 로그

• 학습 시간, 완료한 할 일, AI 질문 수 통합 분석
• localStorage 기반 개인 학습 데이터 시각화
• 업적 배지 시스템 (조건 달성 시 배지 획득)
• 업적 클릭 시 상세 설명 애니메이션 제공

사용 기술

Frontend

• 언어: JavaScript ES6+, HTML5, CSS3
• 스토리지: localStorage (학습 데이터 영구 저장)
• 모듈화: ES6 Module System

External APIs

• Google Gemini API: AI 자연어 처리 및 학습 질문 답변
• 명언 API: 학습 동기 부여를 위한 랜덤 명언 제공

Tools & Collaboration

• Version Control: Git, GitHub
• Communication: Discord
• Branch Strategy: Git Flow (main → develop → feature)

담당 역할

이 프로젝트에서 저는 팀원으로서 다음과 같은 역할을 수행했습니다:

TodoList 기능 개발

• 할 일 CRUD 구현: 추가, 완료, 삭제 기능 개발
• 탭 시스템 구현: 오늘/주간/완료 탭 UI 및 필터링 로직
• localStorage 연동: 할 일 데이터 영구 저장 및 불러오기
• 완료 카운트 시스템: 완료된 할 일 개수 추적 및 저장

UI/UX 개선

• 드래그 앤 드롭: 할 일 목록 순서 변경 기능 구현
• 체크박스 상태 관리: 완료 상태 시각적 피드백
• 반응형 디자인: 다양한 화면 크기 대응

협업 및 문서화

• 발표 자료 제작: PPT 초안 작성 및 디자인
• 회고록 작성: 개인 학습 및 프로젝트 회고 문서화
• 버그 픽스: 버튼 이벤트 및 CSS 버그 수정

트러블슈팅

문제 1: 모달 z-index 충돌

문제 상황: 여러 기능(스톱워치, TodoList, 업적 로그)의 모달이 겹치면서 일부 모달이 제대로 표시되지 않는 현상

해결 과정:

1. 각 기능별 모달의 z-index 우선순위 기준 수립
2. 전역 CSS에서 z-index 값 체계적으로 재설정
3. 모달 표시 순서 테스트 및 검증

결과: 모든 모달이 기능에 맞게 정확히 표시되며 사용자 경험 개선

문제 2: GitHub 병합 시 잦은 충돌

문제 상황: HTML 파일 병합 시 반복적인 충돌 발생, 특히 구조 변경이 많은 초기 단계에서 심화

해결 과정:

1. PR 생성 시 변경 범위 및 충돌 예상 지점 상세 명시
2. 코드 리뷰 시 충돌 가능 구간 사전 공유
3. 공통 구조(HTML/CSS) 사전 정의 및 합의

결과: 충돌 해결 시간 단축 및 원활한 협업 프로세스 확립

문제 3: TodoList 데이터 동기화 이슈

문제 상황: 탭 전환 시 localStorage 데이터와 화면 표시 불일치

해결 과정:

1. localStorage 데이터 구조 재설계 (날짜 기반 분류)
2. 탭 전환 시 데이터 다시 로드하는 로직 추가
3. 데이터 저장/불러오기 함수 모듈화

결과: 안정적인 데이터 동기화 및 사용자 신뢰도 향상

성과 및 배운 점

기술적 성과

• Vanilla JavaScript로 복잡한 상태 관리 구현 경험
• localStorage를 활용한 클라이언트 데이터 영구 저장 구현
• 드래그 앤 드롭 API를 활용한 직관적인 UX 개발

협업 및 커뮤니케이션

• Git Flow 브랜치 전략을 통한 체계적인 버전 관리
• 일일 스크럼을 통한 진행 상황 공유 및 이슈 해결
• PR 및 코드 리뷰 문화를 통한 코드 품질 향상
• 충돌 상황에서 명확한 커뮤니케이션의 중요성 체득

문제 해결 역량

• 모듈 간 z-index 충돌을 전역 기준 수립으로 해결
• localStorage 데이터 동기화 이슈를 구조 재설계로 극복
• 사용자 중심의 에러 처리 및 피드백 구현

향후 개선 방향

• 백엔드 서버 구축으로 데이터 영구 저장 및 다중 기기 동기화
• 소셜 로그인 및 사용자 인증 시스템 도입
• 학습 통계 대시보드 고도화 (주간/월간 리포트)
• PWA(Progressive Web App) 적용으로 모바일 앱 경험 제공

프로젝트 정보

• 개발 기간: 2025.06.23 ~ 2025.07.02 (10일)
• 팀 구성: 5인 (팀장 1명, 팀원 4명)
• 팀 이름: SYNC UP
• 역할: 팀원 (TodoList 기능 개발 + UI/UX 개선 + PPT 제작)