neureels

무엇을 하나요

인공신경망에서 시작해 트랜스포머와 LLM 활용까지, AI 개념을 인스타그램 릴스처럼 세로로 넘기는 카드로 배우는 앱이에요. 수학을 깊게 몰라도 LLM이 속에서 어떻게 돌아가는지 이해하는 데까지를 목표로 커리큘럼을 짰어요.

교재는 Claude Code로 미리 리서치하고 집필해 두고, 앱은 그 교재를 내려받아 오프라인으로 보여 줘요. 보다가 막히면 지금 보고 있는 카드 내용을 아는 Gemini 튜터에게 바로 물어볼 수 있어요.

무엇을 만들었나요

• 세로 스와이프로 카드, 가로 스와이프로 레슨을 넘기는 학습 화면과 레슨별 진행률·이어보기
• 15개 토픽, 70개 레슨 분량의 교재(SVG 도식·애니메이션·코드 카드)
• 토픽을 가로질러 레슨 사이의 선수 관계를 한 장으로 보여 주는 '모아보기' 그래프 탭
• 현재 카드와 레슨 전체를 문맥으로 넣는 스트리밍 튜터 챗봇
• 교재 집필부터 검증, 배포까지를 한 흐름으로 묶은 Claude Code 스킬과 Node 도구

기술적으로 눈여겨볼 점

• 레슨 하나를 HTML 문서 하나로 만들고 WebView로 렌더링해요. 외부 라이브러리와 URL 없이 SVG, CSS 애니메이션, MathML만 쓰도록 포맷을 앱과의 '계약'으로 정했어요. 검증 스크립트가 카드 수, 접근성 태그, 외부 참조 같은 규칙을 배포 전에 검사해요.
• 가로 PageView 안에 세로 스크롤 WebView를 넣으면서 생기는 제스처 충돌을 정리했고, 현재 페이지 앞뒤에만 WebView를 만들어 메모리를 아꼈어요. 교재는 임시 폴더에 전부 받은 뒤 교체하는 방식이라, 다운로드가 끊겨도 이전 버전이 그대로 남아요.
• 앱에 API 키를 넣으면 누구나 꺼낼 수 있어서, 콘텐츠 서버에 Gemini 프록시를 붙였어요. 서버가 모델과 출력 한도, 허용 필드를 강제하고 IP별·일일 호출 한도를 둬요. 앱에서 응답을 멈추면 상류 요청도 같이 끊어요.
• 손실 지형이나 텐서처럼 차원이 중요한 장면은 천천히 도는 3D 그림으로 보여 줘요. 외부 3D 라이브러리 없이 투영, 음영, 깊이 정렬을 직접 구현해 SVG로 그려요.