Stream of consciousness

Development Techniques
All
Node.js
css
AI
macos
Image
UI
Design
Morphicons
아이콘 간 범용 morphing 라이브러리. stroke 기반 아이콘 데이터만 넣으면 모든 아이콘이 모든 아이콘으로 자연스럽게 변환된다. 회전은 수동 선언이 아니라 2D Procrustes 정렬과 극좌표 보간으로 수학적으로 자동 추출되며, zero runtime dependency에 gzip 7KB 수준으로 가볍다. MIT 라이선스. https://github.com/guillermolg00/morphicons morphicons.com - 라이브 플레이그라운드 📦 지원 프레임워크 React(>=18), Vue(>=3.3), Svelte(>=5 runes), React Native(>=0.71), Web Component(vanilla HTML/HTMX/Rails), Astro SSR 사용법은 간단하다. Lucide 같은 기존 아이콘 라이브러리의 데이터를 import해서 <MorphIcon>에 prop으로 넘기면 끝. 🔄 세 가지 사용 모드 Uncontrolled — prop만 바꾸면 자동 morph. 90%의 케이스는 이것으로 충분 Controlled — progress 값을 직접 제어. 스크롤이나 제스처에 연동할 때 Imperative — morphTo() / set() 메서드 호출. 아이콘 시퀀스를 만들 때 📐 핵심 수학 원리 아이콘 morph를 가능하게 하는 파이프라인은 6단계로 구성된다. 정규화 — 모든 SVG 프리미티브(Line, Quadratic, Circle, Arc 등)를 cubic Bézier로 변환 리샘플링 — 각 subpath를 호 길이 기준 N=64개 점으로 균일 샘플링. 코너 감지로 모서리 점을 앵커로 고정해서 체크마크 모서리 같은 디테일이 유지된다 대응 — 방향 탐색, 시작점 탐색, subpath 매칭을 통해 두 아이콘의 점들을 자동 대응 2D Procrustes 정렬 — 최적 회전각 θ를 닫힌형 해석해로 계산. arrow-right → arrow-down이 θ = 90°로 자동 드러난다. per-subpath 정렬이라 햄버거 아이콘이 블록 단위로 회전하지 않고 "접히는" 느낌
  1. UI
img2threejs
단일 참조 이미지를 입력하면 코드 전용(code-only) 프로시저럴 Three.js 3D 모델을 출력하는 AI 에이전트 스킬이다. 포토그래메트리나 메시 추출이 아니라 기하체·프로시저럴 셰이더·생성형 지오메트리로 객체를 재구성한다. Claude Code, Codex, OpenCode 등 에이전트 호스트에서 동작한다. GitHub - img2threejs 📦 프로젝트 구성 img2threejs — 핵심 에이전트 스킬. 단계별 품질 게이팅 파이프라인으로 참조 이미지를 THREE.Group 팩토리로 변환. Python 3.10+ 표준 라이브러리만 사용, 외부 의존성 제로 img2threejs-showcase — 라이브 데모 갤러리. 브라우저에서 생성된 코드로 바로 실행되며, 모델을 자유롭게 회전하고 소스 코드를 확인 가능 🔑 주요 특징 Diffable TypeScript + JSON 스펙 출력 — 대용량 바이너리가 아닌 비교·버전관리 가능한 코드와 스펙 파일 런타임 계층구조 내장 — pivots, sockets, colliders를 포함해 생성 즉시 애니메이션 가능 디테일 우선 분석 — 베벨, 리벳, 각인, 마모, 글로스 등 정체성을 결정하는 세부 요소를 detailInventory로 열거. 각 항목이 실제 컴포넌트에 매핑되지 않으면 코드 생성을 차단하는 strict-quality gate 토큰 효율 설계 — 검증·게이팅·비교 시트 패키징 등 기계적 작업은 Python 스크립트가 담당하고, 모델 토큰은 시각 판단과 코드 생성에만 사용 단일 이미지 한계 투명하게 보고 — 보이지 않는 면에 대해 신뢰도를 per-region로 보고, 위조하지 않음 ⚙️ 파이프라인 구조 8단계 스테이징 파이프라인으로 작동한다: blockout → structural → form → material → surface → lighting → interaction → optimization 각 패스마다 reference-vs-render 비교 시트를 만들고 시각 검토를 거친다. 게이트를 통과하지 못하면 진행이 차단되며, 자가 교정(self-correction) 루프를 통해 모든 항목이 임계값을 통과할 때까지 반복한다.
Open Design - 오픈소스 Claude Design 대체제
Claude Design의 오픈소스 대체제인 Open Design이 GitHub에 공개되었다. 코딩 에이전트가 디자인 엔진이 되어 프로토타입, 랜딩 페이지, 대시보드, 슬라이드, 이미지, 비디오 등을 생성하는 로컬 우선 데스크탑 앱으로, Anthropic 생태계에 종속되지 않고 다양한 AI 모델과 코딩 에이전트를 자유롭게 사용할 수 있다. https://github.com/nexu-io/open-design 핵심 개념 Agent-native: 자체 에이전트를 배송하지 않음. Claude Code, Codex, Cursor, Copilot, Hermes 등 기존 코딩 에이전트 CLI가 디자인 엔진 역할 Model-agnostic: BYOK(Bring Your Own Key)로 Anthropic, OpenAI, Google Gemini, Ollama 등 OpenAI 호환 엔드포인트 모두 지원 DESIGN.md 기반 브랜드 시스템: 151개 프리빌트 디자인 시스템 패키지 제공, 렌더링 시 브랜드 계약(DESIGN.md)을 읽어 일관된 출력 생성 Local-first: macOS, Windows, Docker 지원, 데이터는 사용자 랩톱/서버에서 처리 생성 가능한 아티팩트 프로토타입: 웹·데스크탑·모바일 싱글 페이지 HTML (샌드박스 iframe 프리뷰) 라이브 대시보드 & 아티팩트: 편집 가능한 KPI 월, 디시전 룸 덱 (Decks): 15개 덱 템플릿 × 36개 테마, PPTX/PDF/HTML 내보내기 이미지: gpt-image-2, ImageRouter, 커스텀 API 지원, 93개 프리빌트 프롬프트 HyperFrames (비디오): HeyGen의 오픈소스 HTML→MP4 프레임워크 통합, GSAP 애니메이션 → headless Chrome + FFmpeg로 MP4 렌더링 플랫폼 호환성 25개 이상 코딩 에이전트 CLI를 지원하며, MCP 서버 통합도 제공한다. od mcp install <agent> 원라인 명령어로 설치할 수 있고, BYOK 프록시 엔드포인트(/api/proxy/{provider}/stream)에 SSRF 가드도 포함되어 있다.
  1. AI
  2. Design
audio.cpp — ggml 기반 순수 C++ 오디오 추론 프레임워크
ggml 위에 구축된 고성능 C++ 오디오 추론 프레임워크로, Python 의존성 없이 TTS, ASR, VAD, 음성 변환, 음악 생성 등 44개 이상의 모델 패밀리를 로컬에서 빠르게 실행할 수 있는 통합 런타임을 제공한다. Python 참조 구현 대비 최대 8x 빠른 추론 속도와 45~85% 단축된 end-to-end 레이턴시를 달성하며, GGUF 양자화 시 약 37% VRAM 절감 효과까지 얻을 수 있다. 지원 플랫폼 및 백엔드 Windows, Linux, macOS NVIDIA CUDA, AMD HIP/ROCm, Vulkan, Apple Metal, CPU 지원 작업 태스크 설명 TTS 텍스트 음성 합성 Clone 음성 클로닝 (zero-shot) VC 음성 변환 (Voice Conversion) ASR 자동 음성 인식 Align 강제 정렬 (Forced Alignment) VAD 음성 활동 탐지 Diar
  1. AI
Anydoc
Firecrawl이 만든 오픈소스 Rust 라이브러리. Word, PowerPoint, Excel, PDF 등 문서를 GitHub-Flavored Markdown으로 변환한다. Node.js, Python, 브라우저(WASM), CLI 바인딩을 모두 제공하며, 파일이 기기를 떠나지 않는 로컬 변환을 지원한다. Firecrawl Anydoc 공식 사이트 🔑 주요 특징 One model — 모든 형식이 동일한 document model로 파싱되고 동일한 Markdown serializer로 렌더링됨. 2003년에 작성된 .doc도 어제의 .pptx와 동일하게 변환 Detection — 확장자가 아닌 파일 바이트에서 포맷을 읽어오므로 잘못 라벨링된 파일도 변환 가능 Speed — 순수 Rust 구현, ML 모델/서비스 없이 중앙값 변환 시간 5ms 미만. 7개 변환기 중 14개 형식을 모두 처리한 것은 anydoc이 유일 PDF — 텍스트 기반 PDF는 로컬에서 pdf-inspector로 변환. 스캔 페이지는 Firecrawl Parse의 OCR이 필요 📦 설치 환경 명령어 Rust cargo add anydoc Node.js npm install @firecrawl/anydoc Python pip install firecrawl-anydoc Browser (WASM) npm install @firecrawl/anydoc-wasm CLI npx @firecrawl/anydoc report.docx
줏어들은 이야기
재테크