코드 엑소시스트 — AI가 버그를 진단하고 사람이 퇴치합니다
Next.js와 Sanity로 만든 버그 분류 앱입니다. Groq 기반 AI가 오류 로그와 버그 코드를 함께 분석해 원인과 수정안을 제시하고, 사람은 Sanity Studio에서 승인하거나 재분석을 요청합니다. 상태와 결정 기록은 실시간으로 웹 화면에 반영됩니다.
개발·오픈소스 · 최신기사
개발 도구와 언어, 웹 기술과 오픈소스 프로젝트의 변화를 다룹니다.
Book of Shapes — 생성형 SVG 패턴 모음
Book of Shapes는 생성형·맞춤형 SVG 패턴을 모아둔 웹사이트입니다. 그리드, 방사형, 노이즈, 흐름 등 여러 유형의 패턴을 살펴볼 수 있어 디자인 작업에 쓸 시각 자료를 찾을 때 참고할 만합니다.
example.com 변경 이유를 설명한 IANA의 이메일
IANA는 example.com 페이지를 기본 HTML과 추가 콘텐츠를 담은 별도 JavaScript 파일로 나눠 자동화된 요청의 데이터 전송량을 줄였다고 설명합니다. 이 도메인은 문서의 예시용으로 예약됐으며, 가용성 검사 같은 일반 목적의 서비스나 HTTP 응답을 보장하지 않습니다.
Show HN: 작동하는 에니그마 3D 모델
에니그마의 회전자와 배선 작동을 3D 모델로 보여주는 브라우저 기반 교육 도구입니다. 사용자는 회전자와 플러그보드 설정을 바꾸고 키를 눌러 암호화 과정을 살펴볼 수 있으며, 모스 부호로 메시지를 보내는 단계도 체험합니다.
CrawlRaven MCP — AI 에이전트로 SEO 작업하기
CrawlRaven은 Google Search Console, GA4, 키워드 목록, 사이트 크롤링 결과를 모아 영향도 순으로 SEO 작업 계획을 제시합니다. MCP 서버를 통해 Claude, ChatGPT, Cursor에서 사용자 데이터를 조회하고 기술 SEO 문제를 확인할 수 있습니다.
Vite+ 1.0 발표 — 웹 개발 도구를 하나의 명령 체계로
VoidZero가 Vite, Vitest, Rolldown, Oxc 등을 한데 묶는 오픈소스 도구 체인 Vite+ 1.0을 공개했습니다. `vp` 명령으로 프로젝트 생성부터 테스트, 빌드, 작업 캐싱까지 다루며, 기존 프로젝트도 `vp migrate`로 전환할 수 있습니다.
Sanity Content Lake로 구현한 시대 횡단 미스터리 게임 CHRONOS-HEIST
CHRONOS-HEIST는 1920년, 1970년, 2026년의 같은 금고를 오가며 과거의 행동으로 미래 상태를 바꾸는 게임입니다. Sanity Content Lake를 시간과 인과관계의 단일 데이터 원천으로 삼고, Live Query와 Three.js를 연결해 새로고침 없이 3D 게임 상태를 갱신합니다.
Hanami, 왜 써야 할까요? — 소개
Hanami 유지보수자가 자신의 웹사이트를 만들며 선택한 프레임워크와 기본 구조를 소개합니다. Action, Relation, Repo, Operation으로 책임을 나누는 방식과 직접 구현해야 하는 기능, Rails보다 적은 참고 자료 같은 단점도 함께 설명합니다.
프론트엔드 개발자는 끝났을까요? 프론트엔드 디자인은 안전할까요?
AI 에이전트가 프론트엔드 앱을 빠르게 만들지만, 접근성·성능·사용자 경험을 판단하는 일은 여전히 개발자의 몫이라고 설명합니다. Winamp 재현 앱과 5K 훈련 앱을 만든 경험을 바탕으로, 프론트엔드 역할이 풀스택으로 넓어지고 있다고 말합니다.
HTML로 작성하고 영상으로 렌더링하는 HyperFrames — 코딩 에이전트를 위한 영상 제작 도구
HyperFrames는 HTML·CSS·미디어·탐색 가능한 애니메이션을 MP4로 만드는 오픈소스 프레임워크입니다. 헤드리스 Chrome이 각 프레임을 탐색하고 FFmpeg가 인코딩하며, CLI와 코딩 에이전트용 스킬로 미리보기·검사·렌더링을 자동화합니다.
Last.fm RSS 피드 제공 서비스
Last.fm 사용자 이름을 입력하면 최근 재생곡, 좋아요한 곡, 인기 곡과 아티스트 피드를 받을 수 있습니다. 추천 곡 피드와 JSON 형식도 제공하며, 이미지와 기간별 조회를 지원합니다.
🎡 소셜 페리스 휠: Sanity를 중심에 둔 콘텐츠 파이프라인
1인 사업자가 Sanity를 콘텐츠 허브로 삼아 상품 정보와 지식 베이스를 읽고 소셜 게시물 초안을 만드는 시스템을 구축했습니다. 플랫폼별 검수와 승인 단계는 자동화했지만 실제 게시 기능은 아직 연결하지 않았습니다. 원문은 데이터 충돌 처리, 토큰 보관, 프롬프트 캐싱과 구축 과정의 문제를 함께 설명합니다.
America.gov — 정부 서비스 안내를 AI 검색창 하나로
미국 정부가 2만 9,000개 정부 웹사이트의 정보를 한곳에서 찾도록 AI 안내 서비스 America.gov를 공개했습니다. 공식 연방·주·지방 정부 자료만 답변에 사용한다고 설명하며, 향후 신청서 작성과 진행 상황 추적 기능도 예고했습니다.
인디 출시 페이지 60개에서 반복해서 발견한 보이지 않는 버그 12가지
인디 출시 페이지 60개를 살펴본 작성자가 링크 미리보기, JavaScript 렌더링, DNS, 구조화 데이터 등 방문자나 크롤러에게만 드러나는 문제 12가지를 정리합니다. 잘못된 진단을 막으려면 원시 HTML과 브라우저 렌더링 결과를 서로 다른 방법으로 확인해야 한다고 설명합니다.
응급의학과 의사가 AI와 휴대폰으로 한 달 만에 웹사이트 3개를 만들었습니다
세르비아의 응급의학과 의사가 AI와 대화하며 한 달 동안 휴대폰으로 웹사이트 세 개를 만들었습니다. 터치 조작 오류, 큰 파일로 인한 성능 문제, WordPress 코드 조각 중복 같은 문제를 해결하며 얻은 실전 경험을 소개합니다.
hey — ApacheBench 대체용 HTTP 부하 생성기
hey는 웹 애플리케이션에 HTTP 요청을 보내 부하를 발생시키고 응답 통계를 출력하는 작은 CLI 도구입니다. 요청 수나 실행 시간, 동시 작업자 수, 요청률을 지정하며 HTTP/2도 지원합니다.
averygan/reclip — 여러 사이트의 영상과 음성을 내려받는 셀프 호스팅 도구
reclip은 yt-dlp를 이용해 1,000곳 이상의 사이트에서 영상이나 음성을 내려받는 오픈소스 도구입니다. Flask 기반의 작은 백엔드와 빌드 단계 없는 웹 UI를 제공하며, MP4·MP3 선택과 여러 URL 일괄 다운로드를 지원합니다.
Poper Blocker: 사용자를 감시하는 광고 차단 확장 프로그램
보안 연구진은 Poper Blocker가 방문 URL과 AI 대화 내용을 수집하고, 서버에서 받은 프로그램으로 수집 대상을 바꾼다고 보고합니다. 200만 명 넘게 쓰는 확장 프로그램이 원격 명령과 탐지 회피 기능을 갖췄다는 분석입니다.
React 19 useFormStatus가 계속 false를 반환하나요? 문제를 보완하는 SubmitButton을 만들었습니다
React 19의 useFormStatus가 pending 상태를 감지하지 못하는 배치 오류를 설명하고, 접근성과 여러 제출 버튼을 고려한 SubmitButton 구성 요소를 소개합니다. 필드 잠금, 스크린 리더 알림, 폼 내부 배치 검사와 구현 한계도 함께 다룹니다.
SPA 자동화 테스트를 만들며 배운 점
React 기반 오디오 플레이어 Réécoute의 전체 사용자 흐름을 Playwright와 실제 브라우저로 검사한 경험을 공유합니다. 테스트 데이터 격리, 외부 서비스 모의 객체, 병렬 실행, hydration으로 생기는 불안정성, CI에서 실패를 진단하는 방법을 설명합니다.