방대한 개인 학습 자료, 체계적인 관리가 어려우셨나요? 저는 이러한 고민을 해결하고자 'Class Material Manager' 웹 서비스를 개발했습니다. Next.js와 Supabase를 기반으로 학습자료와 관련 데이터를 체계적으로 관리하고, 필요한 자료를 빠르게 확인하고 복습할 수 있도록 구성했습니다.

메인 아카이브에서는 프론트엔드/백엔드 학습 자료, 실습 코드, 공식 문서를 한눈에 관리합니다. 총 학습 자료 수, 공식 문서 요약 등 핵심 지표를 직관적으로 파악 가능합니다. 좌측 사이드바를 통해 과목별 자료를 손쉽게 탐색하고, 통합 학습 점검이나 복습 섹션으로 바로 이동하여 학습 흐름을 끊김 없이 이어갈 수 있습니다.

각 학습 자료는 설명, 실습 코드, 관련 공식 문서와 유기적으로 연결됩니다. 상세 설명과 함께 실제 적용된 실습 코드를 바로 확인하고, 연관된 공식 문서를 통해 깊이 있는 이해를 돕습니다. 관련 자료와 공식 문서의 연결 정보를 함께 표시하여, 학습자료 간의 관계와 참고할 근거를 확인할 수 있도록 구성했습니다.

방대한 자료 속에서 원하는 정보를 빠르게 찾아내는 것은 학습 효율의 핵심입니다. 검색 기능과 과목별 분류를 통해 필요한 학습자료를 빠르게 찾을 수 있도록 구성했습니다. 검색 결과에서는 관련 자료와 공식 문서를 함께 확인할 수 있습니다. 좌측 트리 뷰를 통해 과목별로 자료를 분류하고 필터링할 수 있어, 특정 기술 스택이나 주제에 대한 자료를 손쉽게 찾아볼 수 있습니다. 학습 시간 절약과 지식 집중을 돕습니다.

학습 방식 점검 화면에서는 수업자료와 관련 공식 문서의 내용을 비교해 차이가 있는 부분을 확인할 수 있도록 구성했습니다. 이를 통해 기존 학습자료에서 변경되었거나 추가로 확인할 내용이 있는지 살펴볼 수 있습니다.

다시 공부하기 섹션에서는 복습이 필요한 자료를 우선순위에 따라 제시하여 효율적인 학습을 유도합니다. 모든 데이터는 Supabase DB에 체계적으로 관리되며, 사용자 인증 또한 Supabase를 통해 안전하게 처리됩니다. 기존 데이터를 먼저 보여준 뒤 하루 첫 접속 시 백그라운드에서 데이터를 갱신하는 구조를 구현했습니다. 사용자는 기존 데이터를 바로 확인할 수 있고, 갱신이 완료된 이후부터 새 데이터를 사용할 수 있습니다. Vercel에 배포해 실제 사용하고 있습니다.

자료 관리, 검색, 복습, 공식 문서 비교, 데이터 갱신 등의 기능을 구현했으며, DB와 인증이 연동되는 기능형 웹서비스 개발 사례로 지속적으로 개선하고 있습니다.