타임어택 코딩 도장

Project Title: 제한 시간 안에 사고 과정을 훈련하는 3단계 코딩 플랫폼

문법을 외우는 데서 그치지 않고 문제 분해, 분기, 반복, 종료 조건을 직접 설계하며 컴퓨팅 사고력을 훈련하는 웹 코딩 플랫폼입니다.

Vercel Preview 바로가기

프로젝트의 탄생

코딩 입문자는 정답 코드를 읽고 따라 쓰는 과정에는 익숙해져도, 빈 화면 앞에서 문제를 작은 단계로 나누고 알고리즘을 설계하는 데 어려움을 겪곤 합니다. 타임어택 코딩 도장은 같은 문제를 자연어 의사코드, 일부 코드 구현, 전체 코드 작성의 세 단계로 반복하게 해 사고 과정과 구현 역량을 함께 훈련하기 위해 시작했습니다.

회원가입이나 랭킹보다 학습 흐름 자체에 집중하고, Python과 C++로 빠르게 문제를 풀고 즉시 피드백을 받는 비로그인 MVP를 목표로 개발하고 있습니다.

Project Overview

목적:

Python/C++ 입문자부터 알고리즘 풀이 역량을 키우려는 중급자까지, 자신의 수준에 맞는 모드에서 제한 시간 안에 답안을 작성하도록 돕습니다. 문제와 언어를 바꿔도 동일한 학습 화면을 유지하고, 공개 예제와 서버 전용 비공개 테스트를 분리해 안전하게 문제를 제공하는 구조를 설계했습니다.

학습 모드:

1. 초보: 자연어 의사코드로 해결 순서를 설명합니다. 후속 단계에서 Hugging Face LLM이 문제별 루브릭에 따라 논리 흐름, 누락 조건, 개선 힌트를 구조화된 JSON으로 평가합니다.
2. 중수: 함수와 입출력이 준비된 코드 스켈레톤에서 TODO를 구현합니다. Judge0 비공개 테스트 기반 채점 API를 연결하는 단계가 남아 있습니다.
3. 고수: 빈 편집기 또는 최소 main()에서 전체 풀이를 작성합니다. Python 3와 C++17을 지원하며 중수와 같은 채점 파이프라인을 사용하도록 설계했습니다.

현재 구현된 핵심 기능:

1. 문제은행: 공개 설명·예제·템플릿과 서버 전용 루브릭·정답·비공개 테스트를 분리하고, 버전이 있는 JSON 스키마로 관리합니다.
2. 안전한 문제 조회 API: GET /api/problem이 난이도·모드·언어에 맞는 공개 데이터만 반환하며, 기준 정답과 비공개 테스트는 응답에서 제외합니다.
3. 반응형 학습 화면: 난이도·문제·모드·언어 선택, 문제 상세, 로딩·빈 상태·오류·재시도, 미제출 답안 경고 흐름을 구현했습니다.
4. 모드별 편집기: 초보는 텍스트 편집기, 중수·고수는 Monaco 기반 Python/C++ 편집기를 사용합니다. 390px 모바일에서는 단일 열과 경량 텍스트 코드 편집기로 전환됩니다.
5. AI 생성 문제 검증 게이트: 새 문제를 저장하기 전에 공개·비공개 테스트를 합쳐 Python/C++ 레퍼런스를 Judge0에서 모두 실행합니다. 어느 한쪽이라도 컴파일 오류, 런타임 오류, 시간 초과, 오답이면 저장하지 않습니다.
6. Preview와 CI: Next.js·Flask 모노리포를 Vercel Preview에 배포하고, GitHub Actions에서 린트·API 테스트·문제 레퍼런스 검증·빌드·타입 검사를 수행합니다.

System Architecture

Next.js 16 App Router 프런트엔드와 Flask 3 API를 하나의 저장소에 두고, Vercel에서 Next.js 함수와 Python 3.12 함수를 함께 실행합니다. 로컬에서는 pnpm dev로 두 런타임을 동시에 시작하며, 브라우저는 Flask API에서 모드와 언어에 맞는 공개 문제 데이터만 받아옵니다.

• problem_bank/public: 문제 설명, 공개 예제, Python/C++ 시작 코드
• problem_bank/private: 문제별 루브릭, 레퍼런스 정답, 비공개 테스트
• GET /api/problem: difficulty, mode, language, 선택적 problem_id를 검증한 뒤 공개 payload만 반환
• 문제 생성 검증 게이트: Python/C++ 레퍼런스가 모든 공개·비공개 테스트를 통과해야 문제와 manifest를 저장
• 서버 환경 변수: Hugging Face와 Judge0 인증 정보를 브라우저 번들·로그·배포 업로드에서 제외

후속 단계에서는 초보 답안을 Hugging Face Inference Providers의 strict JSON 응답으로 평가하고, 중수·고수 코드는 Judge0 어댑터를 통해 실행한 뒤 표준화된 결과 모델로 집계할 예정입니다. 5·10·15분 타이머, 시간 종료 자동 제출, 결과 화면과 AI 오답 노트도 이 제출 파이프라인 위에 연결합니다.

Tech Stack

• Frontend: Next.js 16 App Router, React, TypeScript, Monaco Editor, Geist
• Backend: Flask 3, Python 3.12, Vercel Python Functions
• Code Execution: Judge0 CE, Python 3, C++17
• AI: Hugging Face Inference Providers, strict JSON Schema
• Testing & CI: Python unittest, ESLint, TypeScript, Next.js Production Build, GitHub Actions
• Design & Documentation: Figma, FigJam, Notion

Validation

• 2026-07-22 기준 문제은행 13문제의 Python 레퍼런스 65/65, C++ 레퍼런스 65/65 통과
• API 단위 테스트 46개 전체 통과
• ESLint, TypeScript 검사, Next.js Production Build, git diff --check 통과
• 문제 조회 API에서 6개 초기 문제 × 3개 모드 × 2개 언어, 총 36개 조합의 공개 payload 검증
• Vercel Preview READY, /api/health HTTP 200, 브라우저 API 연결과 콘솔 오류 없음 확인
• Figma 데스크톱 7개·모바일 6개 상태 QA, 44px 미만 버튼과 미연결 색상 토큰 0개 확인

Trouble Shooting

생성 문제의 잘못된 비공개 정답

하노이 탑 문제에서 n=5 비공개 테스트의 24번째 기대 이동이 C B로 잘못 기록되어, 올바른 레퍼런스도 4/5만 통과하는 문제를 발견했습니다. 기존 검증은 JSON 구조와 테스트 개수만 확인해 이 오류를 잡지 못했습니다. 기대 출력을 B C로 수정하고, 문제를 저장하기 전에 Python/C++ 레퍼런스를 모두 실제 실행하는 검증 게이트를 추가했습니다. C++ 문제에는 bits/stdc++.h를 허용하지 않고 C++17 표준 헤더만 사용하도록 함께 제한했습니다.

Judge0 언어 목록 요청의 HTTP 403

Judge0의 /languages/ 요청이 Cloudflare Error 1010과 함께 차단되었습니다. 프로젝트를 식별할 수 있는 User-Agent를 명시하도록 어댑터 요청을 수정해 Python/C++ 실행 PoC를 정상화했습니다.

Vercel Python 하위 라우팅 누락

수동 업로드 환경에서 /api/index.py 아래 Flask 라우트가 기대대로 전달되지 않아 /api/health가 응답하지 않았습니다. 상태 확인 전용 api/health.py 엔트리를 추가하고 Preview 배포에서 HTTP 200을 확인했습니다.

Project Document

• 타임어택 코딩 도장 프로젝트 기록 — Notion
• 프로젝트 기획안 — Notion
• 개발 실행 로드맵 — Notion
• AI 생성 문제 정답 검증 게이트 — Notion
• UI/UX 설계 — Figma

Project Status

현재 상태: 진행중

공식 개발 로드맵은 2026-07-21 기준 13단계 중 5단계 완료, 진행률 38.5%입니다. 기술 PoC, Next.js·Flask 프로젝트 기반, 문제 모델과 초기 시드, 문제 조회 API, 공통 학습 화면을 완료했으며 차단 요소는 없습니다. 7월 22일에는 공식 단계와 별도로 AI 생성 문제 저장 전 정답 검증, 문제은행 확장, GitHub Actions CI를 추가했습니다.

다음 단계는 다음과 같습니다.

• Python/C++ 샌드박스 어댑터와 표준 실행 결과 모델
• 중수·고수 코드 채점 API와 초보 의사코드 AI 평가 API
• 새로고침 후에도 복원되는 타이머와 중복 제출 방지 상태 머신
• 결과 화면, 다시 풀기·다음 문제 흐름, 모드별 AI 오답 노트
• 핵심 E2E·회귀·보안 테스트와 Production 배포·롤백 절차

현재 Preview는 학습 UI와 문제 조회 흐름을 확인하기 위한 개발 배포입니다. 정식 운영 서비스와 전체 제출·채점 흐름은 아직 완료되지 않았습니다.

Project Term

• 진행 방식: 외부 API PoC → Next.js·Flask 기반 → 문제은행과 안전한 조회 API → 공통 학습 UI → 실행·평가 파이프라인 → 타이머·결과 화면 → E2E·Production 배포 순서로 작게 검증하며 확장합니다.
• 기록 및 관리: 단계별 완료 조건, 검증 명령과 결과, 배포 주소, 장애 원인과 해결 과정을 Notion 로드맵과 구현 기록에 연결해 관리합니다.