01
실제 오답 코드에서 다음 단계 힌트
Reverse Integer 오답의 분기 누락을 현재 코드 문맥에서 짚고, 완성 답안 대신 다음 수정과 경계값 테스트를 제안합니다.
Shipped product · Browser extension
CodeCoach
LeetCode와 Programmers에서 현재 코드를 읽어 단계별 힌트와 복습 기록을 제공하며, Chrome Web Store에 출시한 확장 프로그램입니다.
- 담당
- 개인 제품 · 제품 설계, 확장 프로그램과 AI 연동
- 공개 범위
- 공개 저장소
- 기술
- Chrome MV3 · JavaScript · OpenAI Responses API · Firebase
Actual product
실제 동작
- Chrome Web Store 출시
- v1.0.0
01
Context
코딩 인터뷰 연습에서 완성 코드를 바로 보여 주면 문제는 풀어도 약점은 남습니다. 반대로 웹페이지의 현재 코드와 실패한 test 결과를 읽지 못하면 힌트가 일반론에 그칩니다.
CodeCoach는 problem, editor code와 화면에 보이는 run/submission result를 읽고 사용자가 요청한 깊이만큼 힌트를 제공합니다. 브라우저 확장의 제약 안에서 사이트별 editor, streaming 응답, MV3 service worker와 로컬 저장을 연결해 실제 설치 가능한 제품으로 출시했습니다.
02
Engineering
LeetCode와 Programmers는 editor와 DOM 구조가 달라 site-specific content script를 사용합니다. Monaco, Ace, CodeMirror를 차례로 확인하고 마지막에 textarea와 DOM fallback을 사용합니다. 사이트별 run/submission 상태는 하나의 context 형식으로 바꾸고 중복 page event는 snapshot 저장 전에 거릅니다.
MV3 background service worker가 OpenAI Responses API의 SSE stream을 읽어 side panel에 전달합니다. hint는 light, direction, specific 세 단계로 나뉘며 prompt와 display guard가 완성 코드 노출을 제한합니다. session, hint event, code snapshot, weakness tag와 review schedule은 chrome.storage.local에 저장합니다.
내가 맡은 일
- 지원 사이트별 문제, editor와 실행 결과 context extraction adapter를 구현했습니다.
- Responses API streaming, progressive hint guard와 side-panel interaction을 연결했습니다.
- submission snapshot, structured learning metadata, weakness aggregation과 review scheduling을 설계했습니다.
주요 기술 판단
다중 editor fallback
처음에는 하나의 DOM selector로 코드를 읽었지만 사이트와 editor가 바뀔 때마다 깨졌습니다. Monaco, Ace, CodeMirror를 차례로 확인하고 마지막에 textarea/DOM을 읽는 방식으로 바꿨습니다.
사용자 API key와 학습 기록은 로컬에 저장
별도 OpenAI proxy를 운영하지 않고 확장에서 사용자 key로 직접 요청합니다. Firebase sync는 opt-in이며 weakness category와 review schedule 같은 metadata만 대상으로 합니다. code snapshot과 오답 노트 본문은 로컬에 남깁니다.
03
Validation
LeetCode와 Programmers의 실제 문제 페이지에서 editor context, run/submission state, streaming hint와 history flow를 확인했습니다. manifest version 3와 최소 Chrome 116 조건으로 패키징해 Chrome Web Store에 공개했습니다.
외부 사이트의 DOM 변경은 모든 fallback이 자동으로 흡수하지 못합니다. AI 기능은 사용자의 OpenAI API key와 provider availability에 의존하며 active assessment에서는 사용하지 않도록 범위를 제한합니다.
확인한 결과
- 한 번의 AI 응답을 hint event, weakness tag, code snapshot과 review queue로 이어지는 학습 기록으로 남깁니다.
- API key와 코드 기록을 운영 서버에 모으지 않고 실제 배포까지 local-first 저장 방식을 유지했습니다.