쌓인 기록에서 찾기
무엇을 찾으세요?
날짜를 몰라도 됩니다. 제목·Key Point·요약·태그를 한꺼번에 뒤집니다.
검색 범위부터 2026년 9월 17일 (목)까지580건
12건 · "HTML"조건 지우기 ×
001당일 +106AI가 생성한 HTML, 이제 편집기에서 직접 수정한다Lavish는 AI가 생성한 HTML 파일을 로컬 브라우저에서 열고 실시간으로 편집·피드백할 수 있는 CLI 기반 에디터입니다.AI · 머신러닝 · kunchenguid/lavish-axi · JavaScript
AI가 생성한 HTML, 이제 편집기에서 직접 수정한다

Key PointAI와 인간의 협업 방식이 변하고 있습니다. 스크린샷과 긴 텍스트 설명 대신 HTML 아티팩트를 그 자리에서 수정하고 피드백하는 새로운 워크플로우를 제시합니다.
핵심 요약
- Lavish는 AI가 생성한 HTML 파일을 로컬 브라우저에서 열고 실시간으로 편집·피드백할 수 있는 CLI 기반 에디터입니다.
- 특정 요소와 텍스트를 선택해 주석을 달거나, Mermaid 다이어그램을 화이트보드처럼 편집하고, AI 에이전트에 피드백을 보낼 수 있습니다.
- 클라우드 의존 없이 로컬에서만 작동하며, 선택사항으로 ht-ml.app을 통한 공유가 가능합니다.
- npx skills로 간편하게 설치되며, Claude Code 등 AI 에이전트에서 슬래시 명령어로 직접 호출하거나 플러그인으로 등록할 수 있습니다.
- AXI 표준을 따르기 때문에 별도 설정 없이 모든 에이전트에서 CLI 명령어로 실행 가능하고, 구성 요소가 항상 최신 상태로 유지됩니다.
002당일 +1,373AI 에이전트를 위한 대화형 다이어그램 생성 도구 Archify 공개Cursor, Claude Code 등 AI 에이전트가 대화 중 시스템 구조도를 생성하는 Node.js 렌더링 도구다.AI · 머신러닝 · tt-a1i/archify · JavaScript
AI 에이전트를 위한 대화형 다이어그램 생성 도구 Archify 공개

Key PointAI 코딩 에이전트의 아키텍처 커뮤니케이션 방식을 바꾸는 도구로, 복잡한 시스템을 대화 속에서 시각화하고 검증할 수 있게 해준다.
핵심 요약
- Cursor, Claude Code 등 AI 에이전트가 대화 중 시스템 구조도를 생성하는 Node.js 렌더링 도구다.
- 아키텍처, 워크플로우, 시퀀스, 데이터 흐름, 라이프사이클 다이어그램 5가지 타입을 지원하며 자체 포함된 HTML로 제공한다.
- Before/After/Delta 비교로 아키텍처 변경을 검증하고, 노드 검색·경로 추적·역할 비교 등 상호작용이 가능하다.
- 생성된 HTML은 PNG, SVG, WebM, 공유용 1200×630 카드로 내보낼 수 있으며 다크/라이트 테마를 지원한다.
- JSON 형식의 중간 표현(IR)을 결정론적으로 컴파일하므로 검증 가능하고 신뢰할 수 있는 단일 파일을 만든다.
- Cursor, Codex, OpenCode 등에 직접 설치 가능하며 저장소 없이 에이전트 대화만으로 시스템 설명을 다이어그램화할 수 있다.
003▲ 261 · 댓글 113UI·데이터 한 파일에 담은 데스크톱 앱 'Capsule' 공개Capsule은 HTML UI, 데이터, 자산을 모두 단일 .capsule 파일로 패킹해 앱을 문서처럼 공유할 수 있다.기타 · Show HN: Capsule – Single-file web apps that save their data into SQLite
UI·데이터 한 파일에 담은 데스크톱 앱 'Capsule' 공개
Key Point클라우드와 서버 없이 단일 파일로 앱을 만들고 공유하는 방식이 데스크톱 앱 배포의 기존 복잡성을 크게 단순화한다. web
핵심 요약
- Capsule은 HTML UI, 데이터, 자산을 모두 단일 .capsule 파일로 패킹해 앱을 문서처럼 공유할 수 있다.
- 앱의 모든 데이터는 로컬 SQLite에 저장되며 클라우드 계정이나 서버가 전혀 필요하지 않다.
- 프롬프트만으로 AI가 완성된 단일 파일 앱을 생성하고, 실시간으로 기능을 수정할 수 있다.
- macOS, Windows, Linux에서 변환 없이 같은 파일을 바로 실행하며, iOS·Android 지원은 예정 중이다.
- 완전 오프라인 작동하고 데이터는 파일 내에만 보관되므로 클라우드 잠금이나 서버 침해 위험이 없다.
004▲ 294 · 댓글 89dbt, 대시보드용 선언형 YAML 언어 오픈소스 공개dbt Labs가 dbt Charts를 오픈소스로 공개했다. 이는 YAML로 작성하는 대시보드 선언형 언어로, 한 개의 감사 가능한 파일로 완전한 인터랙티브 대시보드를 정의할 수 있다.AI · 머신러닝 · Charts built for Chat
dbt, 대시보드용 선언형 YAML 언어 오픈소스 공개

Key PointAI 에이전트가 데이터 리포트를 자동 생성할 때 통제 불가능한 코드 더미가 되는 문제를 해결하는 방식으로, 코드 기반 대시보드의 새로운 표준이 될 수 있다.
핵심 요약
- dbt Labs가 dbt Charts를 오픈소스로 공개했다. 이는 YAML로 작성하는 대시보드 선언형 언어로, 한 개의 감사 가능한 파일로 완전한 인터랙티브 대시보드를 정의할 수 있다.
- 기존 BI 도구는 UI 중심이라 AI 에이전트가 사용하기 어렵지만, dbt Charts는 코드 기반이므로 에이전트가 자연스럽게 작동한다.
- SQL은 조회 데이터를 선언하고, YAML로 시각화 방식을 감싼 구조로, 16개 차트 유형과 1,100개 이상의 설정 옵션을 지원한다.
- dbt 프로젝트와 깊이 통합되어, models/ 폴더 옆에 charts/를 두고 한 번의 Git 커밋으로 모델 변경과 차트 업데이트를 함께 배포할 수 있다.
- CLI는 YAML을 SVG, HTML, PNG, PDF, 터미널 등 다양한 형식으로 렌더링하며, 엄격한 YAML과 SQL 검증으로 문제를 사전에 감지한다.
- dbt Semantic Layer 지원도 계획 중이다.
005당일 +620여러 AI 에이전트를 한곳에서 관리하는 통합 개발 도구 OrcaOrca는 Codex, Claude Code, OpenCode 등 여러 코딩 에이전트를 각각의 독립된 git 워크트리에서 나란히 실행하고 비교·통합할 수 있는 개발 환경이다.AI · 머신러닝 · stablyai/orca · TypeScript
여러 AI 에이전트를 한곳에서 관리하는 통합 개발 도구 Orca

Key Point여러 AI 에이전트의 결과를 한 곳에서 병렬로 비교할 수 있는 통합 개발 환경이 필요한 개발자와 팀에게 새로운 워크플로우를 제시한다.
핵심 요약
- Orca는 Codex, Claude Code, OpenCode 등 여러 코딩 에이전트를 각각의 독립된 git 워크트리에서 나란히 실행하고 비교·통합할 수 있는 개발 환경이다.
- 데스크톱, 모바일, SSH 원격 서버에서 실행되며, 모바일 앱에서는 에이전트의 진행 상황을 모니터링하고 지시를 내릴 수 있다.
- WebGL 기반 터미널 분할, 디자인 모드로 UI 요소를 클릭하면 HTML·CSS·스크린샷을 프롬프트에 자동 입력, GitHub와 Linear를 앱 내에서 네이티브 통합 등 기능을 제공한다.
- AI가 생성한 diff에 줄별 주석을 달아 다시 에이전트에 전송하거나, 파일을 드래그해서 프롬프트에 추가하고, Orca CLI로 워크플로우를 스크립트화할 수 있다.
- Claude와 Codex의 사용량을 추적하고, 어떤 CLI 에이전트든 지원하며, Computer Use를 통해 UI 자동화도 가능하다.
006▲ 100 · 댓글 3480줄짜리 Proxy로 어떤 DOM이든 반응형으로Mador는 프레임워크 없이 기존 HTML에 간단한 반응형 상태 관리만 추가하는 라이브러리다.웹 · 프론트엔드 · Show HN: Mador – Make any DOM reactive with a tiny 80-line Proxy state tuple
80줄짜리 Proxy로 어떤 DOM이든 반응형으로

Key Point기존 HTML 페이지에 복잡한 프레임워크 없이 가벼운 반응형 상태 관리를 추가하고 싶은 개발자에게 실용적인 선택지가 된다.
핵심 요약
- Mador는 프레임워크 없이 기존 HTML에 간단한 반응형 상태 관리만 추가하는 라이브러리다.
- 상태 읽기와 쓰기 함수 쌍으로 동작하며, CSS 선택자로 선택한 DOM 요소에 상태 변화를 자동으로 반영한다.
- 바인딩은 선택자·업데이트 함수·의존성 읽기 함수 3가지로 구성되고, 의존성 변화가 있을 때만 리렌더링된다.
- 상태 변경은 write() 함수로 하며 같은 사이클 내 여러 변경을 일괄 처리한다.
- DOM 요소가 제거되면 자동으로 해당 바인딩도 정리되므로 라이프사이클 관리가 필요 없다.
- 크기는 최소화되어 875바이트 수준이며, 빌드 단계 없이 ES 모듈로 직접 사용 가능하고 MIT 라이선스다.
007당일 +2,047마이크로소프트의 MarkItDown, 각종 문서를 마크다운으로 변환마이크로소프트가 공개한 Python 유틸리티로, PDF·파워포인트·워드·엑셀·이미지·오디오·HTML 등 다양한 파일을 마크다운 형식으로 변환한다.AI · 머신러닝 · microsoft/markitdown · Python
마이크로소프트의 MarkItDown, 각종 문서를 마크다운으로 변환

Key PointLLM 기반 애플리케이션에서 다양한 형식의 문서를 처리해야 할 때, 마크다운으로의 표준화된 변환 방식을 제시하는 도구가 등장했으므로.
핵심 요약
- 마이크로소프트가 공개한 Python 유틸리티로, PDF·파워포인트·워드·엑셀·이미지·오디오·HTML 등 다양한 파일을 마크다운 형식으로 변환한다.
- 제목, 리스트, 표, 링크 등 문서 구조를 마크다운으로 보존하도록 설계되었으며, LLM과 텍스트 분석 파이프라인에서 사용하기 위한 목적이다.
- 마크다운은 LLM이 기본적으로 이해하고 토큰 효율도 높기 때문에, GPT-4o 같은 주류 언어모델과의 호환성이 우수하다.
- Python 3.10 이상이 필요하고, pip로 설치 가능하며, PDF·DOCX·PPTX·XLSX·오디오·YouTube 자막 등 기능별 선택적 의존성을 제공한다.
- 타사 플러그인을 지원하며, markitdown-ocr 플러그인으로 LLM 비전을 통한 OCR 기능을 추가할 수 있다.
- Azure Content Understanding 통합으로 스캔된 PDF, 복잡한 표, 비디오 등의 고품질 변환도 가능하다.
008당일 +451AI 에이전트용 은폐 브라우저, Cloudflare 우회 가능Firefox 기반 Camoufox를 REST API로 래핑한 헤드리스 브라우저 서버로, Puppeteer/Playwright의 drop-in 대체재이다.AI · 머신러닝 · jo-inc/camofox-browser · JavaScript
AI 에이전트용 은폐 브라우저, Cloudflare 우회 가능

Key PointAI 에이전트가 웹 스크래핑 시 만나는 봇 탐지 우회를 C++ 레벨에서 근본적으로 해결하는 도구이며, 기존 스텔스 플러그인의 한계를 넘는 방식이다.
핵심 요약
- Firefox 기반 Camoufox를 REST API로 래핑한 헤드리스 브라우저 서버로, Puppeteer/Playwright의 drop-in 대체재이다.
- C++ 레벨에서 하드웨어 동시성, WebGL 렌더러, AudioContext, 화면 기하학, WebRTC 등을 스푸핑하여 Google, Cloudflare, 봇 탐지 우회를 목표로 한다.
- 접근성 스냅샷(원본 HTML 대비 90% 더 작음), 안정적인 요소 참조(e1, e2, e3), 검색 매크로 등으로 토큰 효율성을 갖춘다.
- 유휴 상태에서 약 40MB 메모리만 사용하며 Raspberry Pi부터 VPS까지 어디서나 실행 가능하고, Docker와 Fly.io로도 배포 가능하다.
- YouTube 자막 추출, 쿠키 가져오기, 파일 업로드, 주거용 프록시 라우팅, 브라우저 다운로드 캡처 등의 기능을 제공한다.
- VNC를 통한 인터랙티브 로그인과 선택적 세션 추적(스크린샷, DOM 스냅샷, 네트워크) 기능이 있으며, GitHub Issues를 통한 익명화된 충돌 원격 분석이 기본 활성화되어 있다.
009당일 +373HTML로 동영상 렌더링 프레임워크 HyperFrames 공개HyperFrames는 HTML, CSS, 미디어를 MP4 동영상으로 변환하는 오픈소스 프레임워크다.AI · 머신러닝 · heygen-com/hyperframes · TypeScript
HTML로 동영상 렌더링 프레임워크 HyperFrames 공개

Key PointAI 에이전트가 프로그래밍 없이 동영상 콘텐츠를 자동으로 생성할 수 있는 새로운 방식을 제시하며, 마케팅 자동화부터 콘텐츠 제작까지 범위가 넓다.
핵심 요약
- HyperFrames는 HTML, CSS, 미디어를 MP4 동영상으로 변환하는 오픈소스 프레임워크다.
- CLI, AI 에이전트의 스킬, 또는 호스팅 저작 워크플로우의 렌더링 엔진으로 사용할 수 있다.
- 상품 출시 영상, 설명 동영상, PR 요약, 자막 추가, 모션 그래픽 등 20개의 도메인별 스킬을 제공한다.
- AI 코딩 에이전트가 간단한 텍스트 명령으로 동영상을 생성할 수 있도록 설계됐으며, Claude Code, Cursor 등을 지원한다.
- 코어 스킬 세트는 기본 설치되고, 나머지 스킬은 필요에 따라 온디맨드로 설치된다.
010▲ 227 · 댓글 79웹 역사 속에 남겨진 '레거시 HTML' 유물들브라우저 전쟁 시대 IE 호환성 강제를 위해 쓰인 X-UA-Compatible, Chrome Frame 플러그인을 지원하는 meta 태그 등이 현재는 쓸모없는 HTML 조각으로 남아 있다.웹 · 프론트엔드 · Antiquated HTML Snippets and Artefacts
웹 역사 속에 남겨진 '레거시 HTML' 유물들

Key Point웹 개발자라면 레거시 코드 유지보수 시 여전히 마주치는 이 HTML 패턴들의 원래 목적과 당시 기술 환경을 이해하면, 낡은 코드를 정리할지 유지할지 판단하는 기준이 생긴다.
핵심 요약
- 브라우저 전쟁 시대 IE 호환성 강제를 위해 쓰인 X-UA-Compatible, Chrome Frame 플러그인을 지원하는 meta 태그 등이 현재는 쓸모없는 HTML 조각으로 남아 있다.
- GeoURL 서비스를 위한 ICBM 지표, MS의 자동 링크 생성 기능 Smart Tags를 막기 위한 메타 태그, W3C의 콘텐츠 분류 표준 PICS 등이 각각의 시대 배경을 반영하고 있다.
- 조건부 주석(IE 전용, Netscape 전용)은 특정 브라우저에만 코드를 실행시키기 위해 고안되었으며, 슬라이드 전환 효과를 위한 Interpage Transitions 태그도 오늘날의 View Transition API로 대체되었다.
- 이들 HTML 조각들은 제3자 통합, 벤더 확장, 브라우저 경쟁이라는 구체적 역사적 필요에 의해 생겨났다가 환경 변화로 잊혀 과거 웹사이트 마크업에만 남아 있다.
011당일 +1,294Claude Code를 위한 27가지 에디토리얼 다이어그램 디자인Claude Code·Codex·Pi용 다이어그램 에이전트 스킬로 아키텍처, 플로우차트, 시퀀스 등 27가지 시각 타입을 제공한다.웹 · 프론트엔드 · cathrynlavery/diagram-design · HTML
Claude Code를 위한 27가지 에디토리얼 다이어그램 디자인

Key PointGitHub 트렌딩에 올라 높은 관심을 받으며, AI 코드 어시스턴트 환경에서 전문가 수준의 다이어그램을 빠르게 생성할 수 있는 솔루션으로 주목받고 있다.
핵심 요약
- Claude Code·Codex·Pi용 다이어그램 에이전트 스킬로 아키텍처, 플로우차트, 시퀀스 등 27가지 시각 타입을 제공한다.
- HTML과 SVG만으로 만든 정적 콘텐츠이며 빌드 단계, 자바스크립트, 외부 이미지 의존성이 없다.
- 시맨틱 패턴으로 동작을 레이아웃과 분리하므로 큐, 정책 추적, 신뢰 경계 등을 기존 타입으로 표현할 수 있다.
012▲ 211 · 댓글 139HTML over WebSockets: 자바스크립트 최소화한 실시간 SPA 구축WebSocket을 통해 서버가 완성된 HTML을 직접 전송하고 클라이언트가 배치하는 방식으로, JSON 파싱과 클라이언트 렌더링 로직을 제거한다.웹 · 프론트엔드 · HTML over WebSockets: real-time SPAs with barely any JavaScript
HTML over WebSockets: 자바스크립트 최소화한 실시간 SPA 구축
:quality(85)/https://andros.dev/media/thumbnails/kier-in-sight-archives-Sbxf5Dbyerk-unsplash.jpg)
Key PointHTTP 요청-응답 방식의 복잡성을 줄이면서 실시간 기능을 자연스럽게 지원하는 대안으로 개발자 커뮤니티에서 재주목받고 있다.
핵심 요약
- WebSocket을 통해 서버가 완성된 HTML을 직접 전송하고 클라이언트가 배치하는 방식으로, JSON 파싱과 클라이언트 렌더링 로직을 제거한다.
- Phoenix LiveView, Django LiveView 같은 구현들이 이 패턴을 활용해 백엔드 단일 언어로 실시간 SPA를 구축할 수 있게 한다.
- 서버가 데이터베이스에 직접 접근하고 상태를 유지하며 연결된 모든 클라이언트에게 변경사항을 즉시 브로드캐스트할 수 있다.