매일 새로 만들어지는
작은 소프트웨어
Tech Scout가 새로 발견한 기술을 가져오고, 팀이 그 기술로 30분짜리 데모를 매일 새벽 만들어둡니다.
- 23Vanilla JS · localStorage · Intl.DateTimeFormat
결정 노트 — Decision Notebook
큰 결정 직전에 4 prompt(아는 것/모르는 것/가정/예상 후회), 30일 뒤 같은 결정에 4 prompt(결과/가정 검증/다른 선택 시/다음에 다르게)가 자동으로 페어로 묶이는 archive. 사후 합리화가 자리 잡기 전 구조적으로 가정을 검증시키는 30일 콜백.
🛠️ 외부 의존성 0. 단일 localStorage 키에 entries 배열 + 초안 직렬화, 입력마다 300ms debounce 자동 저장으로 새로고침 시에도 작성 중이던 글 복원. createdAt + 30일 비교로 archive 항목이 자동으로 "회고 작성 가능" 상태가 떠올라 사용자가 핵심 가치 루프를 단축하지 못하게 한다.
open demo - 22ts-fsrs v4.6.1 · 인라인 SVG · localStorage
단어 우림터 — Word Greenhouse
수능 영단어를 FSRS 스케줄로 외우면 각 단어가 식물로 자라는 단어장. scheduled_days → 6단계 성장이 1:1 매핑이라 식물의 크기 자체가 잔존 기억 강도. "쉬움"은 reveal 후 1.5초 동안 잠겨 자가 평가의 게으름을 구조적으로 막는다.
🛠️ Anki가 SM-2 대신 채택한 FSRS-4 스케줄러를 esm.sh로 import해 4개 등급의 다음 복습 예정일을 한 번에 계산. 6단계 성장 스프라이트는 인라인 SVG <symbol> + --accent-hue CSS 변수로 단어마다 다른 꽃 색을 부여하고, 모든 상태는 단일 localStorage 키에 직렬화.
open demo - 21Canvas 2D · Pointer Events L3 · 벡터 JSON / localStorage
Sketchnote Lab — 스케치노트 패드
회의·강의를 펜·아이콘 12종·화살표·프레임으로 받아 적는 시각 노트 패드. 모든 페이지는 벡터 JSON으로 localStorage에 머물러 요소 단위 지우개·실행취소·썸네일 재렌더가 한 데이터 모델로 닫힌다.
🛠️ perfect-freehand·tldraw 없이 Canvas 2D만으로 압력 가변 굵기 + quadratic 스무딩 잉크를 만들고, 같은 캔버스 위에 텍스트·아이콘·화살표·프레임을 모두 하나의 items 배열로 직렬화. 비트맵이 아니라 ~10KB JSON 페이지가 되어 요소별 hit-test 지우개·썸네일 재스케일·PNG 내보내기가 같은 렌더 함수로 닫힌다.
open demo - 20Pointer Events L3 · Canvas 2D · IndexedDB
그림 일기
하루 한 컷·한 줄을 캔버스에 잉크로 남기고, 1년치 누적을 GitHub 컨트리뷰션 스타일 히트맵으로 회고하는 시각 일기. 모든 그림·캡션·PNG 미리보기는 브라우저 IndexedDB에만 머묾.
🛠️ perfect-freehand 없이 Canvas 2D만으로 만든 압력 가변 굵기 잉크 — coalesced 중간 포인트 + 미드포인트 스무딩된 quadratic curve로 부드러운 획을 그리고, IndexedDB 단일 store(YYYY-MM-DD 키)가 strokes 좌표·캡션·192px PNG 미리보기를 함께 직렬화. 53주 × 7일 히트맵이 비어 있음/캡션만/그림만/그림+캡션 4상태로 1년 회고를 닫는다.
open demo - 19Mozilla Readability v0.6.0 · CSS Custom Highlight API · IndexedDB · Next.js API route
Highlight Atlas
URL이나 본문을 붙여넣고 reader-mode로 정리한 뒤 4가지 색으로 칠하면, 모든 글의 하이라이트가 색별로 한 페이지(Atlas)에 모이는 personal commonplace book. 모든 데이터는 IndexedDB에만 머묾.
🛠️ Pocket이 떠난 자리에 들어가는 reader vault — Readability(Apache-2.0)가 본문 추출, CSS.highlights가 DOM 변경 없이 Range로 페인트, IndexedDB 단일 object store가 글과 하이라이트를 한 번의 put으로 직렬화. 얇은 Next.js route.ts는 SSRF 가드/12초 타임아웃/2.5MB 한도만 둔 CORS 프록시.
open demo - 18절차적 SVG · Page Visibility API · localStorage
숲 포모도로
25분 집중을 끝까지 머무르면 길이별 절차생성 SVG 나무가 평생 자라는 내 숲에 심어지는 포모도로. 다른 탭으로 새면 잎이 시들고 3회면 그루터기.
🛠️ 외부 의존성 0 — mulberry32 시드 RNG로 4종(묘목/활엽수/큰나무/거목) 절차 생성, Page Visibility/blur 3회 누적 시 ok=false 그루터기로 박혀 성공 통계에서 구조적으로 제외, 모든 세션은 localStorage 단일 키에만 저장.
open demo - 17WCAG 2.1 + APCA + Machado CVD + OKLCH
Contrast Lab
OKLCH 슬라이더 한 칸에 WCAG 2.1 대조비, APCA Lc, 3종 색맹 시뮬레이션이 동시에 갱신되는 컬러 도장. 5개 사이트 시나리오 × 3페어 × ★3.
🛠️ sRGB→linear relative luminance로 WCAG 2.1, polarity-aware SAPC로 APCA Lc, HCIRN 매트릭스로 protan/deuter/tritan 시뮬레이션을 한 슬라이더 움직임에 동시 갱신. perceptually uniform OKLCH 슬라이더로 직접 조정.
open demo - 16ts-fsrs v4 · perfect-freehand · Pointer Events L3
한자 손기억
ts-fsrs로 한자 8급 50자를 외우는 손글씨 플래시카드. 4개 평가가 다음 review 일자를 라이브 계산하고, perfect-freehand 펜이 Pointer Events L3 압력을 따라 굵기를 바꾼다.
🛠️ Anki가 SM-2 대신 채택한 FSRS-4 스케줄러를 브라우저에서 직접 돌려 평가→다음 일자 루프를 즉시 닫고, tldraw가 쓰는 perfect-freehand가 coalesced events + pressure로 진짜 잉크 같은 스트로크를 만든다.
open demo - 15Intl.Segmenter (UAX#29)
한글 정형시 도장
Intl.Segmenter로 한글 음절(grapheme)·어절(word)을 라이브로 세는 작가실. 시조·하이쿠·두문시·여섯낱말 4형식 × 5주제, 통산 작품수 기반 5단 칭호, PNG 내보내기까지.
🛠️ Baseline newly available 2024-04. granularity:'grapheme'으로 한글 음절 블록(U+AC00..U+D7A3)을, granularity:'word'+isWordLike로 어절을 정확히 세는 표준 — str.length나 split(' ')의 한계를 우회.
open demo - 14CSS Scroll-driven Animations
Scroll Cinema
scroll-driven animations로 만든, scroll-driven animations 설명서. 7챕터 + 샌드박스 + 앙코르 — 모든 모션이 animation-timeline: scroll() / view() 위에서 작동.
🛠️ animation-timeline: scroll() / view() + animation-range로 페이지 진행도와 요소-뷰포트 진행도를 키프레임 진행도로 사용하는 표준. Chrome 115+ / Firefox 137+ / Safari 26+에서 Baseline.
open demo - 13Transformers.js v3 (paraphrase-multilingual-MiniLM-L12-v2)
의미 스크랩
Transformers.js로 브라우저 안에서 임베딩을 계산해 키워드 매칭 없이 의미로 메모를 검색하는 스크랩. 시드 34편 + IndexedDB 영구 저장 + centering + 상호 k-NN 클러스터.
🛠️ esm.sh로 import한 transformers.js 위에서 384차원 멀티링구얼 임베딩을 브라우저에서 직접 계산. 외부 API 0, 키 0, 모델은 HF Hub에서 키 없이 받음. centering으로 단문 한국어 hubness를 보정하고 상호 k-NN으로 hub-fragility 없는 클러스터.
open demo - 12Document Picture-in-Picture · Wake Lock · Web Audio
포커스 라이트하우스
Document Picture-in-Picture로 다른 앱 위에 떠 있는 미니 타이머 + Wake Lock으로 화면 절전 차단 + 합성으로만 만든 4-track 앰비언트 믹서. 5 프리셋·주간 히트맵·세션 로그까지.
🛠️ 세 표준 API가 한 데모 안에서 동시에 살아 작동 — PiP가 임의의 DOM을 클론해 본창과 sync, Wake Lock이 visibilitychange로 자동 재요청, Web Audio가 white/pink/brown 노이즈 + Biquad + LFO + 절차적 crackle/ping으로 외부 오디오 파일 0개로 4-track을 합성.
open demo - 11CSS Custom Highlight API
정규식 형광펜
Custom Highlight API로 정규식 매치 결과를 DOM 변경 없이 칠하는 라이브 매처 + 12레벨 정규식 퍼즐 도구. 5개 코퍼스(시·코드·로그·이메일·마크다운) 실시간 매치, 룩어헤드 보스까지.
🛠️ CSS.highlights.set('name', new Highlight(...ranges)) + Range 조합으로 텍스트에 페인트만 입히고 DOM은 그대로 두는 표준 — 라이브 매처와 퍼즐 채점(통과/잉여/놓침 3색) 양쪽의 워크호스.
open demo - 10MediaPipe Tasks for Web · Hand Landmarker
손가락 신호 도장
웹캠으로 손 모양을 인식해 시간 안에 정해진 신호를 만드는 8레벨 미니게임. ✊✋✌️👍☝️🤘🤙 7가지 제스처와 5단 보스 시퀀스. 영상은 외부로 나가지 않음.
🛠️ 21개 3D 손 랜드마크를 브라우저에서 직접 추출하고, 손바닥 축 수직거리(엄지) + 손목-PIP/TIP 거리비(나머지 4손가락)로 회전 불변 5비트 펴짐 패턴을 만들어 7제스처로 분류. 키 없음, 서버 없음, ~2MB float16 모델.
open demo - 09CSS Anchor Positioning + Popover API
CSS Anchor 도장
8단계로 직접 코드를 고치며 CSS Anchor Positioning을 익히는 인터랙티브 도장. iframe 라이브 프리뷰 + getBoundingClientRect 자동 채점 + 별 3개 점수 시스템.
🛠️ Firefox 147 안착(2026-01)으로 모든 메이저 브라우저에서 사용 가능해진 anchor-name·position-anchor·anchor()·anchor-size()·@position-try·position-try-fallbacks를 8단계 학습 게임으로 직접 작성·검증.
open demo - 08Tone.js v15 (Web Audio)
Tone Beat Forge
Tone.js 합성 사운드만으로 만든 6트랙 16스텝 시퀀서. 프리셋 6종·드럼 킷 3종·베이스 스케일 5종 + 저장 슬롯 8개로 30분짜리 비트 작업실.
🛠️ esm.sh로 import한 Tone.js 위에서 MembraneSynth/NoiseSynth/MetalSynth/MonoSynth + Reverb/FeedbackDelay 버스 + Transport 16분음표 스케줄러로 외부 샘플 없이 풀 드럼 머신을 합성.
open demo - 07Pixi.js v8 (WebGL)
Neon Hive Survivor
Pixi.js v8로 만든 풀스크린 탑다운 자동 사격 서바이버. 5종 적 + 60초마다 보스 + 10종 강화 선택지. 시작 화면 외 모든 chrome 제거 — 캔버스가 화면을 가득 채움.
🛠️ esm.sh로 import한 Pixi v8 위에서 절차적 Graphics(육각 그리드/적/탄환/파티클)와 in-canvas HUD Text로 완전한 풀스크린 몰입형 게임을 단일 HTML로 구현.
open demo - 06Pure DOM · localStorage · 인라인 SVG
주문 연성소 — Spell Forge
덱빌딩 로그라이크. 8층 탑·카드 22종·적 9종·이벤트 6종·유물 8종·상태효과 5종. 학파 3종으로 다른 빌드, 매 런마다 다른 경로/보상. 약 25–30분 분량.
🛠️ 외부 라이브러리 없이 순수 DOM/CSS/JS로 구현된 카드 전투. 깊이는 카드/적/이벤트/유물 데이터에서 나오며 영구 진행 상태는 localStorage에 저장.
open demo - 05SVG sprites · anime.js
Linear Defense (타워 디펜스)
12 웨이브 / 타워 3종 / 적 4종 / 보스 / 스피드 컨트롤. SVG 스프라이트와 anime.js로 만들어진 큰 규모 게임.
🛠️ SVG <defs>+<use>로 정의·재사용된 스프라이트와 anime.js의 트윈/타임라인이 게임 피드백 전반을 처리. 단일 페이지·정적 호스트 동작.
open demo - 04Few-shot prompting (AI 프롬프트 패턴)
Few-shot 프롬프팅 시각화기
LLM에 예시를 0/1/3/5개 줬을 때 같은 작업의 출력 형식과 정답률이 어떻게 수렴하는지 토글로 비교하는 인터랙티브 데모.
🛠️ Anthropic 프롬프트 엔지니어링 가이드의 Multishot 패턴 — 예시 1~5개로 출력 형식과 엣지 케이스 처리가 어떻게 잡히는지 시각화.
open demo - 03View Transitions API
이모지 메모리 매치
4×4 그리드의 카드 짝맞추기. 8쌍을 다 찾으면 View Transitions API로 부드럽게 등장하는 클리어 배너.
🛠️ DOM 변경을 자동으로 트랜지션 애니메이션으로 감싸주는 표준 — 클리어 순간 배너 reveal에 사용.
open demo - 02Web Speech API · SpeechSynthesis
한국 시 낭송기
브라우저가 직접 읽어주는 김소월·윤동주 시 세 편. 행 단위 하이라이트와 음성·속도·음높이 컨트롤.
🛠️ 외부 API 키 없이 브라우저 내장 음성으로 텍스트를 낭송할 수 있는 표준 인터페이스.
open demo - 01Three.js r0.184 (WebGL)
Asteroid Dash 3D
Three.js로 만든 3D 우주 회피 게임. 절차적 지오메트리, PointLight, Fog, Additive 파티클 트레일이 동시에 작동하는 진짜 WebGL 무대.
🛠️ esm.sh로 import한 Three.js 위에서 IcosahedronGeometry 정점 jitter로 매번 다른 운석, Points+AdditiveBlending으로 별/엔진 트레일, PointLight 2개와 Fog로 거리감을 만든 5–10분 분량 데모.
open demo