Study Flow – Weekly Timetable Planner#

• 역할: Developer
• 분야: Web Application / Productivity
• 사용 기술: React, TypeScript, LocalStorage, CSS

공부 일정을 시간표 형태로 직접 관리할 수 있는 웹사이트 Study Flow를 만들었다. 단순히 일정 목록을 적는 방식이 아니라, 한 주의 시간을 한눈에 보면서 공부 계획을 세우고 과목별 학습 시간을 확인할 수 있도록 구성했다.

목표: 공부 계획을 직접 채우고 수정하면서, 과목별로 얼마나 시간을 사용했는지 바로 확인할 수 있는 개인용 주간 플래너 만들기

주간 시간표#

월요일부터 일요일까지의 일정을 시간 단위 그리드로 표시했다. 일정 블록은 시작 시간과 종료 시간을 기준으로 자동 배치되며, 자정을 넘는 일정도 다음 날로 이어서 보이도록 처리했다.

각 일정에는 과목, 학습 내용, 시간 정보가 함께 표시된다. 블록을 누르면 상세 내용을 확인할 수 있고, 기존 일정을 수정·복사·삭제할 수 있도록 만들었다.

일정 관리 기능#

새 일정을 추가할 때 요일, 과목, 학습 내용, 시작 시간, 종료 시간을 선택할 수 있다. 기본 과목 외에도 직접 과목명을 입력할 수 있게 했고, 과목마다 색상을 다르게 표시해서 시간표를 빠르게 구분할 수 있도록 했다.

작성한 일정은 브라우저의 LocalStorage에 저장된다. 그래서 새로고침하거나 다시 접속해도 같은 브라우저에서는 계획이 유지된다.

과목별 학습 시간 분석#

시간표 아래에는 과목별로 공부한 시간을 막대그래프로 보여주는 영역을 넣었다. 등록된 일정의 시간을 자동으로 합산해서 과목별 학습 시간과 비율을 확인할 수 있다.

계획을 작성하는 기능에서 끝나지 않고, 내가 어느 과목에 시간을 더 많이 쓰고 있는지 확인하는 기능까지 연결하는 것이 핵심이었다.

앞으로 개선하고 싶은 점#

현재는 개인 브라우저에 저장되는 방식이지만, 이후에는 계정 기능이나 클라우드 저장 기능을 추가해서 다른 기기에서도 같은 시간표를 불러올 수 있게 만들고 싶다. 또한 주간 목표 달성률, 일정 알림, 월간 통계 기능도 추가해보고 싶다.