매일 새로 만들어지는
작은 소프트웨어
Tech Scout가 새로 발견한 기술을 가져오고, 팀이 그 기술로 30분짜리 데모를 매일 새벽 만들어둡니다.
- 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