trace-log

코드의 흐름을 한눈에 파악하고 내 것으로 만드는 AI 기반 학습 도구

프로젝트 소개

AI를 활용해 코드의 흐름을 분석하고, 라인별 주석과 설명을 통해 복사한 코드를 이해하고 내 것으로 만들 수 있도록 돕는 학습 서비스입니다.

문제 상황

AI도구는 생산성을 높여주는 장점이 있지만, 실제로 코드의 흐름과 동작을 충분히 이해하지 못한 채 사용하는 문제가 있었습니다.

해결 방법

AI를 활용해 코드 단위로 설명과 주석을 제공하고, 사용자가 복사한 코드를 이해하며 학습할 수 있도록 설계했습니다.

핵심 기능

• AI 기반 라인별 상세 주석 자동 생성
• 코드의 핵심 로직 및 데이터 흐름 시나리오 요약
• Next.js App Router 기반의 빠른 응답 환경
• Supabase를 활용한 개인 학습 코드 이력 관리
• Vercel 환경 변수 설정을 통한 API 보안 및 배포

기술 스택

트러블슈팅

• 생소한 기술 스택을 익히기 위해 모든 로직에 라인별 주석을 달며 분석하는 방식으로 개발을 진행했습니다.
• AI 설명 결과를 학습 도구처럼 활용할 수 있도록 데이터 흐름을 단순하게 구성했습니다.

배운 점

• AI를 활용한 서비스라도 결국 사용자가 이해하기 쉬운 구조로 설계하는 것이 중요하다는 점을 배웠습니다.
• 새로운 기술을 익힐 때 직접 주석을 달며 분석하는 방식이 학습에 효과적이라는 점을 경험했습니다.

링크