이 프로젝트는 거창한 계획에서 시작된 것이 아닙니다. 작고 현실적인 경험에서 시작되었죠. 친척 아이가 C 프로그래밍을 배우는 과정을 지켜보면서, 함께 수업을 듣고 숙제를 봐주다 보니 이런 생각이 계속 들었습니다. "이런 학습 방식은 너무 낡았어." 선생님은 교과서를 기반으로 강의하고, 학생들은 필기하며 연습 문제를 풉니다. 완전히 쓸모없는 것은 아니지만, 진정한 컴퓨팅 사고력을 기르는 데는 거의 도움이 되지 않죠.

제가 실제로 알아차린 것

진짜 문제는 학생들이 답을 찾지 못한다는 것이 아니었습니다. 그보다 더 큰 문제는 다음과 같았습니다.

학생들은 코드를 뚫어지게 쳐다봐도 각 줄이 무엇을 의미하는지 전혀 알지 못했습니다.
코드를 한 번 읽고 나면 이해했다고 착각하지만, 코드의 각 부분이 어떻게 연결되는지 설명할 수 없었습니다.
무엇보다 가장 중요한 것은, 그 코드가 실제로 어떤 문제를 해결하고 있는지 알지 못했다는 점입니다.

그들이 배운 모든 것은 파편화되어 있었습니다. 저는 한 가지 생각에 계속 머물렀습니다.학습은 점을 모으는 것이 아니라, 점을 잇는 것이다.

그것이 바로 Tutor가 시작된 계기입니다.

https://tutor.artdance.net/

2. 단계별 구축 과정

2.1 간단한 코드 설명기로 시작하기

초기 아이디어는 매우 단순했습니다. 코드를 붙여넣으면 막연한 요약이 아니라, 각 줄이 실제로 무엇을 하는지, 왜 그렇게 작성되었는지를 보여주는 것이었죠.

그래서 Tutor의 첫 번째 핵심 기능은 줄 단위 설명이었습니다. 12개 이상의 프로그래밍 언어를 자동 감지하며, 버블 정렬, 연결 리스트, 이진 탐색과 같은 고전적인 C/C++ 예제가 포함되어 있어 클릭 한 번으로 바로 분석할 수 있습니다.

2.2 설명만으로는 충분하지 않았다

한 번 이해했다고 해서 배운 것은 아닙니다. 그래서 세 가지 기능을 추가했습니다.

후속 질의응답— 특정 줄을 탭하여 계속 질문하세요. AI가 전체 맥락을 파악하고 답변하기 때문에 배경 지식을 매번 다시 설명할 필요가 없습니다.자유 형식 분석— 어떤 코드든 붙여넣어 별도의 분석과 토론을 진행하세요.

연습 문제— 현재 코드를 바탕으로 자동 생성되는 객관식, 빈칸 채우기, 코딩 문제를 풀어보세요. 더 많은 문제가 필요하면 "더 생성하기"를 누르기만 하면 됩니다.

이러한 기능들이 갖춰지니 비로소 학습 도구 같은 느낌이 들기 시작했습니다.

2.3 지식이 스스로 성장하게 만들기

설명, 질의응답, 연습 문제가 있어도 모든 것이 여전히 분리된 정보 덩어리처럼 느껴졌습니다. 제가 정말 원했던 것은 지식이 유기적으로 성장하는느낌이었습니다.

그래서 저는 **지식 캔버스(Knowledge Canvas)**를 만들었습니다. 이는 상호작용이 가능하고 무한히 확장되는 지식 그래프입니다. AI가 코드에서 핵심 개념을 추출하여 서로 연결된 노드로 매핑합니다. 노드를 "탐색"하여 관련 개념을 발견하고, "확장"하여 하위 주제를 생성하거나, 노드에 직접 질문할 수도 있습니다.

어느덧 뒤를 돌아보면 자신만의 지식 지도가 커져 있는 것을 발견하게 될 것입니다.

2.4 코드는 읽는 것뿐만 아니라 실행되어야 한다

코드를 이해하는 핵심 요소는 실행되는 모습을 보는 것입니다. 그래서 C, C++, Python, Java 및 12개 이상의 언어를 지원하는 온라인 코드 실행 환경을 통합했습니다. 사용자는 코드를 실행하고, 입력을 넣고, 페이지에서 바로 출력 결과를 확인할 수 있습니다. 모든 실행 기록은 저장되며, 특정 실행 결과에 대해 AI에게 질문할 수도 있습니다.

먼저 실행하기 → 분석 읽기 → 후속 질문하기 → 연습 문제 풀기. 이 흐름이 단순히 설명을 읽는 것보다 훨씬 자연스럽게 느껴집니다.

2.5 개발 과정이 순조로웠던 이유

전체 과정은 예상보다 훨씬 매끄럽게 진행되었습니다. 이는 대부분의 힘든 작업을 Enter 플랫폼이 처리해 주었기 때문입니다.

UI 컴포넌트즉시 사용할 준비가 되었습니다.
백엔드 핵심 요소— 사용자 인증, 데이터베이스 저장소, 행 수준 보안(RLS) — 이 모든 것이 내장된 Supabase 통합을 통해 제공되었습니다.
**AI 모델 접근 방식은 통합되었습니다:**DeepSeek, Claude, GPT, Gemini, Doubao — 키를 신청하고 각 API에 개별적으로 적응할 필요가 없습니다. Edge Function을 작성하고 호출하기만 하면 됩니다.

따라서 인프라 구축에 몇 주를 소비하는 대신, 첫날부터 실제로 중요한 것에 집중할 수 있었습니다. 설명이 충분히 명확한가? 지식 포인트들이 연결되는가? 학습 경로가 적절한가?

3. Tutor 사용 방법

3.1 어디서든 시작하기

**코드가 있나요?**코드를 붙여넣고 "분석 시작(Start Analysis)"을 누르세요.
**코드가 없나요?**AI를 사용하여 코드를 생성한 다음, 클릭 한 번으로 에디터에 채우세요.
**그냥 둘러보고 싶나요?**사전 설정된 예제를 탭하세요. 2초 만에 전체 분석 내용을 볼 수 있습니다.

3.2 기능 페이지가 아닌 학습 경로입니다

일단 접속하면 사용자는 자연스럽게 다음 경로를 따라갑니다:

코드를 실행하여 무엇을 하는지 파악하기
줄 단위 분석 읽기
명확하지 않은 부분에 대해 추가 질문하기
연습 문제를 풀어 이해도 확인하기
Knowledge Canvas를 열어 밖으로 탐색하기

모든 단계(실행 결과, 대화, 연습 점수, 지식 그래프)는 자동으로 저장됩니다. 언제든지 다시 돌아와 멈췄던 지점에서 바로 계속할 수 있습니다.

4. 되돌아보며: 진정한 의미

돌이켜보면 Tutor는 표면적으로는 코드 설명 도구입니다. 하지만 실제로 이 도구가 하는 일은 사람들이코드 한 조각에서 시작해 흩어진 지식을 하나의 전체적인 무언가로 연결하도록 돕는 것입니다..

코드 붙여넣기 → 실행 → 줄 단위 이해 → 더 깊은 질문하기 → 연습 → Knowledge Canvas 열기 → 노드 따라가기 → 지식 지도가 나만의 것으로 성장하는 것 지켜보기.

이는 두 가지 이유 때문에 가능합니다. 첫째, 제품 디자인입니다. 설명, 질의응답, 연습, 캔버스는 분리된 기능이 아니라 하나의 연속적인 학습 경로를 형성합니다. 둘째, Enter가 제공하는 기반(UI, 데이터베이스, AI 모델, 배포) 덕분에 인프라와 씨름하는 대신 "학습 경험이 실제로 좋은가?"에 모든 에너지를 쏟을 수 있었습니다.

원래의 생각으로 돌아가서:학습은 점을 모으는 것이 아니라, 점들을 연결하는 것입니다.

그것이 바로 Tutor가 하는 일입니다. 그 길을 닦도록 돕습니다. 그래서 코드는 단순히 "보기만 한" 것이 아니라, 이해하고 연결하여 나만의 것으로 만든 무언가가 됩니다.