AI · 사내 시스템
사내 업무 시스템
노션에 흩어진 314개 DB를 팀이 더 이상 수기로 채우지 않아도 되도록. 대표가 음성으로 던진 지시를 AI가 과업으로 만들고, 검수하면 노션에 자동 반영된다.
- Cloudflare Workers
- Hono
- D1 (SQLite)
- TypeScript
- +8
프로젝트
만든 것들
15개 중 6개는 지금도 실제로 돌아가고 있습니다. 보시는 입장에 맞춰 순서를 바꿔 드릴게요.
만든 것 전부
교육 · 웹앱
수업노트
워크시트 생성부터 자동 채점, 학부모 월간 리포트, 녹음 숙제 전사와 발음 평가까지. 학원 강사의 하루를 그대로 옮긴 관리 도구.
- 단일 파일 HTML
- Cloudflare Workers
- D1 (SQLite)
- Cloudflare Pages
- +3
마케팅 · 자동화프로토타입
학원 키워드 마케팅 자동화
원장 설문에서 시작해 지역·키워드 수집, AI 포지셔닝, 콘텐츠 생성·검수, 승인, 발행까지 한 줄로 이어지는 파이프라인. 학원마다 자기 도메인을 갖는 멀티테넌트 구조.
- Next.js 15 App Router
- TypeScript
- Tailwind
- Supabase
- +4
디자인 · 상업 납품완료
브랜딩 키트 · 프롬프트 라이브러리
업종별 before/after 이미지와 9부작 원고로 이루어진 브랜딩 키트. 클라이언트와 5차에 걸쳐 시안을 주고받아 납품까지 마친 상업 작업.
- AI 이미지 생성
- 프롬프트 설계
- 편집 디자인
- standalone HTML
교육 · 생성 시스템
동형모의고사 제작 시스템
학교 기출 시험지를 분석해 출제 선생님의 스타일을 역설계하고, 다음 시험 범위로 같은 골격·유형·배점의 모의고사를 회차별로 뽑아낸다.
- Claude Skill
- 문서 생성 파이프라인
- docx 2단 편집
교육 · 운영 도구
리플 학원 CRM
구글시트로 굴리던 학생 관리를 웹으로 옮겼다. 강사·반·학생은 물론 드롭다운 항목까지 전부 화면에서 고칠 수 있다.
- Cloudflare Workers
- D1 (SQLite)
- 바닐라 HTML
- Python 빌드 스크립트
AI · 도구배포됨
Mini AI Office
다마고치풍 미니 사무실 화면으로 AI 에이전트 작업을 관리한다. 명령 큐에서 회의록으로, 회의록에서 승인 레인으로. Mac·Windows·폰이 같은 상태를 본다.
- 정적 HTML/CSS/JS
- Cloudflare Workers
- KV
- Notion API
- +1
교육 · 챗봇프로토타입
study-bot
시험 범위 자료만 읽는 학습 챗봇. 범위 밖 질문은 막고, 학생들이 실제로 무엇을 물었는지 통계로 남긴다.
- Next.js 16
- React 19
- TypeScript
- Tailwind v4
- +4
AI · UI 실험프로토타입
AIChatLab
AI 캐릭터 채팅 UI를 어디까지 짤 수 있는지 실험한 프로토타입. 캐릭터 카드·관계 수치·미션에 더해 세계관과 말투를 조립해 시스템 프롬프트를 뽑는 Prompt Studio가 들어 있다.
- 순수 HTML/CSS/JS
- localStorage
AI · 데스크톱 앱프로토타입
AI Company HQ
스타듀밸리풍 탑다운 픽셀아트 사무실에서 동물 캐릭터 넷이 각자 일하고, 회의하고, 커피를 마신다. 캐릭터 초상화는 직접 그렸다.
- Electron
- electron-vite
- TypeScript
- Claude Agent SDK
생산성 · PWA프로토타입
루틴 트래커
폰 홈 화면에 까는 무타이핑 토글 보드. 오프라인에서 먼저 기록하고, 뒤에서 노션 다이어리로 조용히 동기화한다.
- Next.js
- TypeScript
- Tailwind
- PWA
- +1
교육 · 운영 도구
학원 관리자 시스템
상담부터 반 편성, 시간표까지 원장이 보는 화면을 한 곳에 모은 관리자 도구.
- 단일 파일 HTML
- Cloudflare Workers
- D1 (SQLite)
교육 · 데이터중단
수시 추천 도구
생기부 PDF를 넣으면 지원 가능한 대학·학과와 그중 유리한 곳을 근거와 함께 제시하는 로컬 웹 도구.
- Python
- FastAPI
- Alembic
- SQLite
- +2
데스크톱 · 캐릭터프로토타입
데스크톱 마스코트 위젯
바탕화면 구석에 사는 캐릭터 위젯. 표정 스프라이트 여섯 종으로 상태를 표현한다.
- Electron
- 스프라이트 애니메이션
마케팅 · 웹앱중단
브랜딩 진단 퍼널
몇 개 문항에 답하면 브랜딩 상태를 점수로 돌려주고, 그 자리에서 리포트를 만들어 주는 리드 수집 퍼널.
- Next.js
- TypeScript
- 스코어링 로직
여기에 해당하는 게 아직 없어요.
직접 만져보기
설명 말고, 그냥 써보세요
아래 4개는 이 페이지 안에서 실제로 돌아갑니다. 다만 바깥으로 나가는 연결은 전부 끊어 두었고, 보이는 데이터는 전부 샘플입니다.
사내 업무 시스템 · AI · 사내 시스템
새 탭에서 열기 ›수업노트 · 교육 · 웹앱
새 탭에서 열기 ›리플 학원 CRM · 교육 · 운영 도구
새 탭에서 열기 ›AIChatLab · AI · UI 실험
새 탭에서 열기 ›교육
도구가 만든 것, 사람이 만든 것
학원에서 쓰는 자료는 대부분 출판사에서 받아 씁니다. 그건 제 실적이 아니라 남의 저작물이라 여기 올리지 않았습니다. 여기 있는 건 직접 만든 것뿐입니다.
출제 스타일을 역설계하는 시스템
내신 대비의 핵심은 "이 선생님이 어떻게 내는가"인데, 그 감각은 경력자 머릿속에만 있습니다. 회차를 늘릴수록 사람이 갈립니다.
그래서 기출 시험지에서 유형 분포·배점·문두 표현·오답 설계 패턴을 뽑아출제 엔진으로 고정하고, 다음 범위 지문에 그 엔진을 다시 적용합니다. 고1 공통영어1 / 고2 영어I / 고3 독해와작문 엔진이 들어 있습니다.
산출물은 시험지, 정답·해설, 출제분석표 세 벌입니다.
이 워크시트는 사람이 만들지 않았습니다
오른쪽은 수업노트가 생성한 주간 워크시트와 답지입니다. 2단 편집, 지문별 근거 문장 칸, 구조 분석 칸, 서술형 조건 제시까지 전부 도구가 배치합니다.
지문은 기출이라 읽을 수 없게 처리했습니다. 여기서 보여드리려는 건 지문이 아니라 도구가 만들어내는 형식입니다.
디자인
폰으로 대충 찍은 사진도
소상공인용 셀프 브랜딩 키트에 들어간 예시입니다. 손잡이를 끌어 전후를 비교해 보세요. 왼쪽이 원본, 오른쪽이 프롬프트를 넣은 결과입니다.
126장
제작 예시 이미지
9부작
원고
7종
업종
5차
디자인 컨펌 왕복
예시는 전부 책에 실린 프롬프트 그대로 만들었습니다. 독자가 복사해 넣었을 때 다른 결과가 나오면 안 되니까요. 어떻게 만들었는지 ›
소개
현장에 있었기 때문에
만들 수 있었습니다
예아입니다. 영어 학원에서 가르치고 운영하면서, 사람이 손으로 메우고 있는 자리를 매번 봤습니다. 워크시트를 밤새 만들고, 채점하고, 학부모에게 보낼 말을 다시 다듬는 일들이요.
그래서 도구를 만들기 시작했고, 만들다 보니 학원 밖의 문제도 같은 모양이라는 걸 알게 됐습니다. 광고대행사의 사내 시스템도, 소상공인의 브랜딩도 결국 "누군가 수기로 메우고 있는 자리"를 찾는 일이었습니다.
기획부터 설계, 구현, 배포, 그리고 실제 운영까지 혼자 돕니다. 그게 자랑이라기보다, 현장을 아는 사람이 직접 짜는 게 제일 빨랐기 때문입니다.