반(反) 튜토리얼을 만들다
요약
NO-KIT은 AI가 정답을 알려주는 대신, 사용자가 주변의 재료를 활용하여 과학적/공학적 도전 과제를 스스로 발견하도록 돕는 오픈 소스 메이커 경험입니다. 이 시스템은 주어진 재료로 만들 수 있는 물리적 문제를 제시하고, 제한적인 힌트를 제공하며, 최종적으로 실제 세계에서의 실험과 기록을 통해 학습 순환 과정을 완성합니다.
핵심 포인트
- AI가 정답 대신 문제와 도전 과제를 제시합니다.
- 주변의 일상 물건(판지, 빨대 등)을 활용하여 만듭니다.
- 제한적인 힌트를 제공하며 스스로 발견하도록 유도합니다.
- 실험과 실제 세계에서의 테스트를 통해 학습이 완성됩니다.
This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass.
AI는 우리에게 답을 주는 데 믿을 수 없을 만큼 능숙해졌습니다.
바람 방향계(wind vane)가 어떻게 작동하는지 물어보면 전체 과정을 설명해 줄 것이고, 다리가 어떻게 무게를 지탱하는지 물으면 장력과 압축에 대한 깔끔한 설명을 얻게 될 것입니다. 그림자가 시간을 알려주는 방식이 궁금하면 몇 초 만에 답을 얻을 수 있습니다.
이것은 유용하지만, 저는 한 가지 문제에 대해 계속 생각했습니다.
답을 아는 것과 그것을 발견하는 것은 같지 않다.
그래서 이번 해커톤에서는 튜토리얼의 반대되는 것을 만들고 싶었습니다.
모든 것을 설명해 주는 AI 대신, 때로는 설명을 거부하는 AI를 만들었습니다.
지침을 제공하는 대신, 문제를 제시합니다.
화면에 머물게 하는 대신, 결국 휴대폰을 내려놓으라고 말합니다.
그것이 바로 NO-KIT입니다.
키트를 사지 마세요. 튜토리얼을 보지 마세요. 직접 만드세요.
제가 만든 것
NO-KIT은 주변의 평범한 물건들을 작은 과학 및 공학적 도전 과제로 바꾸는 오픈 소스 AI 메이커 경험입니다.
상호작용은 아주 간단한 질문으로 시작됩니다:
당신은 이미 무엇을 가지고 있습니까?
당신은 판지, 테이프, 종이, 빨대, 연필, 끈, 병 또는 서랍이나 재활용 쓰레기통에 버려질 만한 몇 가지 무작위 물건들을 가지고 있을 수 있습니다.
카메라를 사용하여 NO-KIT에게 그 재료들을 보여줍니다.
그 후 시스템은 유용한 재료들을 식별하고, 그것들로 현실적으로 만들 수 있는 물리적 도전 과제가 무엇인지 알아냅니다.
예를 들어, 판지, 빨대, 테이프, 연필을 가지고 있다면 NO-KIT은 다음과 같은 임무를 줄 수 있습니다:
WIND HACKER
바람이 어느 방향에서 오는지 알려줄 수 있는 무언가를 만드세요.
그것이 하지 않는 것을 주목하세요.
바람 방향계(wind vane)를 만들라고 말하지 않습니다.
다섯 단계로 보여주지 않습니다.
완성된 물건의 다이어그램을 제공하지 않습니다.
정답은 숨겨져 있습니다.
당신이 시도해야 합니다.
만약 막히더라도 힌트를 요청할 수 있지만, 심지어 그 힌트들조차 의도적으로 제한적입니다.
'종이를 화살 모양으로 잘라 붙이세요...'라고 말하는 대신,
NO-KIT은 다음과 같이 물어볼 수 있습니다:
'만든 구조물의 어느 부분이 회전해야 할까요?'
여전히 막혔다면, 다음 힌트는 다음과 같을 수 있습니다:
'양쪽 끝이 같은 양의 바람을 받는지 생각해 보세요.'
목표는 어렵게 하려고 도움을 주지 않는 것이 아닙니다. 목표는 다음 발견을 스스로 할 수 있도록 딱 충분한 만큼의 도움을 주는 것입니다.
그리고 경험에서 가장 중요한 부분이 나옵니다.
NO-KIT은 당신을 밖으로 보냅니다.
당신은 예측하고, 자신이 만든 것을 실제 세계로 가져가 테스트합니다.
끝없이 회전할 수도 있습니다.
거의 움직이지 않을 수도 있습니다.
즉시 작동할 수도 있습니다.
산산조각 날 수도 있습니다.
이 모든 결과는 유용합니다. 왜냐하면 이제 학습자에게 추론할 실제 대상이 생겼기 때문입니다.
돌아와서 무슨 일이 일어났는지 기록하고, 필요하다면 또 다른 작은 힌트를 얻고, 설계를 수정하여 다시 시도합니다.
실험이 성공한 후에야 NO-KIT은 당신이 실제로 무엇을 만들었는지 밝히고 그 뒤에 숨겨진 과학 원리를 설명해 줍니다.
완전한 학습 순환 과정은 다음과 같습니다:
LOOK
↓
CHALLENGE
...
NO-KIT의 아이디어는 간단합니다:
화면이 경험에서 가장 짧은 부분이어야 합니다.
현재 NO-KIT은 바람, 햇빛, 강우량, 기하학, 구조물, 소리, 여과(filtration), 비행에 관한 도전 과제들을 포함하고 있습니다.
몇 가지 예시는 다음과 같습니다:
- Wind Hacker: 풍향계가 어떻게 작동하는지 발견합니다.
- Shadow Clock: 햇빛이 시계 역할을 합니다.
- Rain Measurer: 일상적인 재료들이 간단한 강우량계를 됩니다.
- Tree Height: 기하학을 사용하여 나무의 높이를 추정합니다.
- Bridge Breaker: 종이와 구조적 강도에 대해 실험합니다.
- Sound Phone: 컵과 실을 사용하여 진동을 탐구합니다.
- Paper Glider: 양력, 항력 및 반복(iteration)을 테스트합니다.
이 모든 것들 뒤에는 하나의 원리가 있습니다:
학습은 '이 키트를 사세요'로 시작해서는 안 됩니다. '당신은 이미 무엇을 가지고 있나요?'에서 시작해야 합니다.
배달 상자는 재료가 될 수 있습니다.
재활용하려던 병도 재료가 될 수 있습니다.
빨대도 재료가 될 수 있습니다.
밖에 있는 막대기도 재료가 될 수 있습니다.
세상은 이미 과학 키트로 가득 차 있습니다. 대부분의 것들은 '과학 키트'라고 라벨링된 상자에 담겨 나오지 않을 뿐입니다.
저는 또한 발견한 내용이 수집 가능한 빌드 카드(collectible build cards)가 되고, 예측과 관찰을 위한 작은 일지(journal)를 기록할 수 있는 나의 선반(My Shelf) 섹션을 추가했습니다.
그리고 테마 자체가 말 그대로 '풀 만져보기(Touch Grass)'이기 때문에, UI에는 숨겨진 **풀 만져보기 모드(Touch Grass Mode)**도 있습니다.
이것은 포인터에 반응하는 상호작용적인 풀의 장을 열어줍니다.
필요했을까요?
아마 아닐 겁니다.
제가 말 그대로 풀을 만질 수 있는 버튼 없이 '풀 만져보기' 프로젝트를 제출할 것 같나요?
절대 아닙니다.
데모(Demo)
여기서 NO-KIT을 사용해 볼 수 있습니다:
https://no-kit-client.onrender.com/
카메라 입력과 화면과 실제 세계 사이를 이동하는 경험에 맞춰 설계되었기 때문에 휴대폰으로 열어보는 것을 추천합니다.
가장 빠르게 데모를 하려면 윈드 해커(Wind Hacker) 흐름을 시도해 보세요:
- 재생(PLAY) 버튼 누르기
- NO-KIT에 재료 보여주기
- 윈드 해커 챌린지 선택하기
- 힌트를 요청하기 전에 무언가를 만들어보기
- 무슨 일이 일어날지 기록하기
- 만든 것을 밖에 가져가 보기
- 테스트해 보기
- 실제로 어떤 일이 일어났는지 기록하기
- 필요하면 수정하기
- 발견 잠금 해제하기
특정 재료를 준비할 필요 없이 핵심 여정을 탐색할 수 있는 신뢰성 높은 데모 모드도 있습니다.
코드(Code)
이 프로젝트는 완전히 오픈 소스입니다:
GitHub logo khushi-infinity / NO-KIT
NO-KIT
키트를 사지 마세요. 튜토리얼을 보지 마세요. 직접 만드세요.
NO-KIT은 평범한 사물을 실제 과학으로 변화시키는 모바일 우선 메이커 게임입니다. 학습자는 주변의 것을 사진 찍고, 문제 형태로 제시된 도전을 받으며, 튜토리얼 없이 제작하고, 무슨 일이 일어날지 예측하며, 실세계에서 물체를 테스트하고, 한 번에 하나의 유용한 힌트를 얻게 됩니다.
화면은 경험의 가장 짧은 부분이어야 합니다.
웹사이트 미리보기
이 체크인된 예시 미리보기들은 의도된 웹사이트 화면들을 문서화합니다. 실제 UI는 React로 렌더링되며 로컬 /demo 경로에서 인터랙티브하게 유지됩니다.
홈 및 주요 액션
탐색 도전 라이브러리
필드 저널
숨겨진 잔디 모드
이 미리보기들은 복사된 에셋이 아닌 원본 프로젝트 UI 레퍼런스입니다. 잔디 모드는 왼쪽 상단 코너의 잔디 모양 버튼에서 열리는 인터랙티브한 미끼 화면(red-herring screen)입니다. 런타임 스크린샷을 위해서는 앱을 로컬에서 실행하고 /demo, /explore, /journal 그리고…를 캡처해야 합니다.
저장소:
https://github.com/khushi-infinity/NO-KIT
이 저장소에는 프론트엔드, FastAPI 백엔드, 도전 시스템, 재료 추론(material reasoning), Render 배포 설정, 아키텍처 노트 및 프로젝트 진행 로그가 포함되어 있습니다.
제가 구축한 방식
가장 중요한 아키텍처 결정은 AI가 경험을 지원해야 하며, 그 자체가 되어서는 안 된다는 것이었습니다.
NO-KIT의 흥미로운 부분은 채팅창 안에 있는 것이 아닙니다.
그것은 그 바깥에 존재하는 물리적인 루프입니다.
AI는 추론이 진정으로 유용한 부분들을 처리합니다:
photo of materials
↓
material understanding
...
프론트엔드는 React, TypeScript 및 Vite로 구축되었습니다.
백엔드는 Pydantic 유효성 검사를 사용하는 FastAPI를 사용합니다.
저는 의도적으로 UI가 전형적인 AI 제품처럼 보이도록 만드는 것을 피했습니다. 큰 채팅창이나 기업 대시보드, 빛나는 AI 구체 같은 것은 없습니다.
인터페이스는 오히려 투박한 컨트롤, 도전 카드, 밝은 색상, 촉각적 상호작용, 발견, 그리고 물리 기반의 흐름을 가진 재미있는 과학 게임처럼 디자인되었습니다.
재료 이해하기
NO-KIT은 단순히 객체를 이름으로만 취급하지 않습니다.
또한 그 재료가 물리적으로 무엇을 할 수 있는지 추론합니다.
예를 들어:
cardboard
→ flat
→ lightweight
...
이를 통해 시스템은 고정된 레시피에만 의존하는 대신 가능한 제작품에 대해 추론할 수 있습니다.
도전 파이프라인은 대략 다음과 같습니다:
detect materials
↓
normalize names
...
이것이 중요한 이유는 시스템이 단순히 하나의 재료가 우연히 일치한다는 이유만으로 프로젝트를 제안해서는 안 되기 때문입니다.
제작품은 의미가 있어야 합니다.
오픈 웨이트 AI 레이어
백엔드는 AIProvider 인터페이스를 중심으로 설계되었습니다:
class AIProvider:
detectMaterials(image)
generateChallenges(materials)
...
이것은 NO-KIT에 두 가지 중요한 모드를 제공합니다.
첫 번째는 외부 추론이 일시적으로 사용할 수 없을 때에도 채점 경험을 신뢰할 수 있게 유지하는 결정론적 DemoProvider입니다.
두 번째는 OpenAI와 호환되는 오픈 웨이트 추론 엔드포인트에서 작동하도록 설계된 OpenWeightProvider입니다.
현재 제공자 구성은 다음을 중심으로 구축되었습니다:
- 시각적 이해를 위한 Qwen2.5-VL-7B-Instruct
- 텍스트 추론 및 튜터링을 위한 Qwen2.5-7B-Instruct
모델 구성은 프론트엔드에 하드 코딩되는 대신 백엔드 환경 변수를 통해 제어됩니다.
이는 제품을 다시 작성하지 않고도 모델을 변경할 수 있다는 것을 의미합니다.
AI에게 덜 말하도록 가르치기
이것은 구축 과정에서 가장 흥미로운 부분 중 하나였습니다.
일반적인 AI 비서는 보통 자신이 할 수 있는 가장 완전한 답변을 제공하도록 최적화되어 있습니다.
NO-KIT은 종종 정반대의 접근이 필요합니다.
학습자가 풍향계(wind vane)를 발견해야 한다고 가정해 봅시다. 이때 최악의 반응은 그것을 어떻게 만드는지 정확하게 설명하는 완벽한 튜토리얼일 것입니다.
따라서 NO-KIT은 다른 규칙을 따릅니다:
학습자가 다음 발견을 할 수 있도록 가장 작은 힌트를 제공한다.
힌트는 점진적입니다.
Hint 1
small question
...
숨겨진 솔루션 또한 학습자가 발견 단계에 도달할 때까지 공개적인 도전 응답에서 제외됩니다.
이 작은 기술적 세부 사항은 전체 제품의 핵심 아이디어를 보호합니다.
안전성 확보 (Safety matters)
모든 것을 허용한다면 생성형 DIY 시스템은 매우 빠르게 위험해질 수 있습니다.
따라서 NO-KIT은 불, 무기, 위험한 화학 물질, 주 전력(mains electricity), 안전하지 않은 섭취, 그리고 높은 곳과 관련된 프로젝트는 필터링합니다.
필터링 실험의 경우 인터페이스에 명시되어 있습니다:
마시지 마십시오 (DO NOT DRINK).
이 프로젝트를 위해 저는 시도해서는 안 될 수백 개의 자동 생성된 실험들보다는, 제가 신뢰하는 더 작은 규모의 실험 라이브러리를 갖는 것이 훨씬 낫다고 생각합니다.
배포 (Render)
저는 Render를 배포 플랫폼으로 사용하여 NO-KIT을 구축했습니다.
이 프로젝트에는 애플리케이션 아키텍처를 정의하는 render.yaml Blueprint가 포함되어 있습니다:
Render Static Site
│
│ React + Vite
...
프론트엔드는 현재 다음 주소에서 라이브입니다:
https://no-kit-client.onrender.com/
FastAPI 서비스 아키텍처에는 배포 확인을 위한 /health 엔드포인트가 포함되어 있으며, AI 자격 증명 및 기타 비밀 정보는 환경 변수를 통해 서버 측에서 유지됩니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기