코딩은 상품화되고 있다. 엔지니어링은 아니다 — 2026년 17주 웹 개발
Cross-cutting frontend topics, tooling, and DX Compiled for immediate developer deployment.

앱을 Agent-ready로 만드는 방법
JSON-RPC 2.0 기반 Streamable HTTP 전송으로 MCP 서버를 구축하고, PKCE와 Dynamic Client Registration을 적용한 OAuth 2.1로 사전 공유 비밀 없이 알 수 없는 에이전트를 인증하며, MCP Server Card, OAuth Protected Resource, API Catalog를 포함한 well-known 경로에 프로토콜 디스커버리 메타데이터를 게시하는 방법을 설명합니다. LLM 친화적 Markdown 콘텐츠 협상, robots.txt 봇 접근 제어, x402 소액 결제, Universal Commerce Protocol, Agentic Commerce Protocol 등 에이전트 커머스 프로토콜도 상세히 다룹니다.
Shopify 속도 최적화: 진짜 병목 해결하기
fetchpriority 및 image_url Liquid 필터 활용법도 다룹니다.
AI 에이전트가 Devtool을 찾고 사용하되 악용하지 않게 하는 3가지 규칙

Cursor Agent Hook: 매 Turn 뒤 Lint와 Build 검사
sessionEnd 대신 stop 훅을 사용해야 하는 이유를 설명합니다. stop은 각 모델 응답 후 실행되며 followup_message 필드를 지원해 실패를 다음 사용자 메시지로 재주입함으로써, 에이전트가 자체 출력을 수정하는 자가 치유 루프를 구현합니다. Cursor의 번들 Node.js가 PATH 앞에 위치해 ESM require 오류를 발생시키는 문제, 성공 시 followup_message를 반환하면 무한 루프가 발생하는 문제, 디버그 echo 출력이 JSON stdout 채널을 오염시키는 문제 등 세 가지 프로덕션 함정도 상세히 문서화합니다.
출장 보고: Node.js Collaboration Summit 2026 London
stream/iter로 실험적 출시), 몽키패칭을 대체할 core node:vfs Virtual File System 모듈 제안이 포함됩니다. AI 지원 기여의 거버넌스, 보안팀을 압박하는 AI 생성 허위 보안 보고의 급증, OpenTelemetry 내장 지원 초기 진행 상황, libuv v2 마이그레이션 계획도 다뤘습니다.
바이브 코딩을 고치는 방법
Scott Tolinski와 Wes Bos는 AI 생성 코드를 더 결정론적이고 유지 관리 가능하게 만드는 툴링 환경을 살펴봅니다. Rust로 작성된 Fallow를 데드 코드, 순환 의존성, 중복 블록, 사이클로매틱 복잡도 핫스팟, 파일별 유지 관리 점수를 LLM이 읽을 수 있는 출력으로 제공하는 올인원 코드 품질 도구로 소개합니다. jscpd와 Knip(중복 및 미사용 내보내기 탐지), Project Wallace(CSS 변수 감사), Storybook MCP 서버(표준 컴포넌트 예시), Sentry CLI와 Spotlight(실시간 오류·트레이스 가시성), Stylelint와 Lightning CSS 기반 맞춤 린터 Clint, Vercel의 Agent Browser도 다룹니다. 호스트들은 AI 에이전트가 무시할 수 있는 agents.md 지침보다 결정론적 통과/실패 규칙을 가진 맞춤형 ESLint 플러그인 작성이 더 신뢰할 수 있다고 강조합니다.
코딩은 상품화되고 있다. 엔지니어링은 아니다
에이전트 코딩 툴은 애플리케이션 스캐폴딩, 모듈 리팩토링, 테스트 생성을 전례 없는 속도로 처리할 수 있지만, 저자는 이것이 코드 생산을 범용화할 뿐 엔지니어링 판단력을 대체하지는 않는다고 주장합니다. 병목 지점은 코드 작성에서 올바른 문제 정의, 아키텍처 불변식 보호, 거의 정확하지만 장기적 위험을 초래하는 생성 결과물 식별로 이동합니다. 경험 많은 엔지니어는 장애 패턴, 폭발 반경, 시스템 제약에 대한 지식이 에이전트 출력을 증폭시키는 '스위트스팟'에 위치합니다. 이해, 구현, 테스트, 디버깅, 문서화 등 일상적인 루프는 모두 에이전트가 개입하면서 형태가 바뀌며, 기계적 작업이 압축되어 아키텍처와 책임에 집중할 수 있게 됩니다.
Read Articlearrow_forward바이브 코딩을 고치는 방법
Scott Tolinski와 Wes Bos는 AI 생성 코드를 더 결정론적이고 유지 관리 가능하게 만드는 툴링 환경을 살펴봅니다. Rust로 작성된 Fallow를 데드 코드, 순환 의존성, 중복 블록, 사이클로매틱 복잡도 핫스팟, 파일별 유지 관리 점수를 LLM이 읽을 수 있는 출력으로 제공하는 올인원 코드 품질 도구로 소개합니다. jscpd와 Knip(중복 및 미사용 내보내기 탐지), Project Wallace(CSS 변수 감사), Storybook MCP 서버(표준 컴포넌트 예시), Sentry CLI와 Spotlight(실시간 오류·트레이스 가시성), Stylelint와 Lightning CSS 기반 맞춤 린터 Clint, Vercel의 Agent Browser도 다룹니다. 호스트들은 AI 에이전트가 무시할 수 있는 agents.md 지침보다 결정론적 통과/실패 규칙을 가진 맞춤형 ESLint 플러그인 작성이 더 신뢰할 수 있다고 강조합니다.
앱을 Agent-ready로 만드는 방법
이 종합 가이드는 웹 애플리케이션을 AI 에이전트와 상호 운용 가능하게 만드는 데 필요한 전체 표준 스택을 다룹니다. JSON-RPC 2.0 기반 Streamable HTTP 전송으로 MCP 서버를 구축하고, PKCE와 Dynamic Client Registration을 적용한 OAuth 2.1로 사전 공유 비밀 없이 알 수 없는 에이전트를 인증하며, MCP Server Card, OAuth Protected Resource, API Catalog를 포함한 well-known 경로에 프로토콜 디스커버리 메타데이터를 게시하는 방법을 설명합니다. LLM 친화적 Markdown 콘텐츠 협상, robots.txt 봇 접근 제어, x402 소액 결제, Universal Commerce Protocol, Agentic Commerce Protocol 등 에이전트 커머스 프로토콜도 상세히 다룹니다.
Shopify 속도 최적화: 진짜 병목 해결하기
이 가이드는 Lighthouse 점수만을 쫓는 것이 아니라, 지표와 관계없이 Shopify 스토어를 느리게 만드는 구조적 성능 문제를 다룹니다. 히어로 이미지를 180 KB 이하로 유지하고, 히어로 비디오 전에 가벼운 포스터 이미지를 사용해 LCP를 9초 이상에서 2.7초로 줄이는 방법, Swiper.js 같은 무거운 캐러셀 라이브러리 대신 맞춤형 CSS·JS 솔루션을 사용하는 방법을 설명합니다. JavaScript와 앱 비대화도 다루며, 페이지 템플릿별 조건부 스크립트 로딩, 비중요 스크립트 defer, 540 KB 서드파티 카트 대신 6 KB 맞춤 구현 등을 소개합니다. CSS 페이지별 분리, 40~50% 용량 감소를 위한 폰트 서브셋, fetchpriority 및 image_url Liquid 필터 활용법도 다룹니다.
AI 에이전트가 Devtool을 찾고 사용하되 악용하지 않게 하는 3가지 규칙
이 글은 '에이전트 경험(AX)'을 AI 에이전트가 자율적으로 발견하고 운용하며 결제할 수 있는 개발자 도구를 설계하는 분야로 소개합니다. Claude, ChatGPT, Gemini에 대한 실증적 검색 테스트에서 각 LLM이 서로 다른 채널에서 정보를 수집함을 확인했습니다. Claude는 벤더 비교 페이지(43%), ChatGPT는 Reddit(47%), Gemini는 GitHub 저장소(50%)를 선호합니다. 에이전트 우선 온보딩 패턴은 기존 가입 퍼널을 뒤집어, Netlify의 익명 배포 후 청구 모델이 하루 수만 건의 에이전트 주도 배포를 이끕니다. 보안도 비중 있게 다뤄지며, Wallarm의 501개 MCP 서버 감사에서 96%가 익스플로잇 취약점을 보유함을 발견했고, IP가 아닌 actor 유형 기반의 4단계 점진적 신뢰 모델을 제시합니다.
READ_FULL_LOGarrow_forwardCursor Agent Hook: 매 Turn 뒤 Lint와 Build 검사
Cursor의 에이전트 훅은 IDE 라이프사이클 이벤트에 쉘 스크립트를 연결하여 각 에이전트 턴이 끝날 때 수동 복붙 없이 lint와 빌드 검증이 자동으로 실행되도록 합니다. 이 글은 sessionEnd 대신 stop 훅을 사용해야 하는 이유를 설명합니다. stop은 각 모델 응답 후 실행되며 followup_message 필드를 지원해 실패를 다음 사용자 메시지로 재주입함으로써, 에이전트가 자체 출력을 수정하는 자가 치유 루프를 구현합니다. Cursor의 번들 Node.js가 PATH 앞에 위치해 ESM require 오류를 발생시키는 문제, 성공 시 followup_message를 반환하면 무한 루프가 발생하는 문제, 디버그 echo 출력이 JSON stdout 채널을 오염시키는 문제 등 세 가지 프로덕션 함정도 상세히 문서화합니다.
출장 보고: Node.js Collaboration Summit 2026 London
Bloomberg가 런던에서 첫 번째 2026 Node.js 협업 서밋을 개최했으며, 40명 이상의 협업자가 참여했습니다. 주요 기술 논의로는 v27부터 버전 번호를 연도에 맞추는 새 릴리스 일정(동시 릴리스 라인 및 유지보수 부담 감소), 명시적 백프레셔 전략을 선택하는 async iteration 기반 통합 Streams API(v25.9.0에서 stream/iter로 실험적 출시), 몽키패칭을 대체할 core node:vfs Virtual File System 모듈 제안이 포함됩니다. AI 지원 기여의 거버넌스, 보안팀을 압박하는 AI 생성 허위 보안 보고의 급증, OpenTelemetry 내장 지원 초기 진행 상황, libuv v2 마이그레이션 계획도 다뤘습니다.
17주차 웹 개발 일반 항목은 에이전틱 코딩 시대에 개발자의 정체성을 다루었습니다. 코딩은 범용화되고 있지만 엔지니어링 판단력은 그렇지 않다는 논문이 광범위하게 논의되었습니다. 병목 지점은 코드 작성에서 올바른 문제 정의, 아키텍처 불변식 보호, 거의 정확한 AI 출력이 초래하는 장기적 위험 식별로 이동합니다. 앱을 에이전트 준비 상태로 만드는 가이드는 전체 프로토콜 스택을 설명했습니다. JSON-RPC 2.0 기반 Streamable HTTP의 MCP 서버, PKCE와 Dynamic Client Registration을 적용한 OAuth 2.1, well-known 경로를 통한 프로토콜 디스커버리(MCP Server Card, OAuth Protected Resource, API Catalog), Markdown 콘텐츠 협상, robots.txt 봇 접근 제어, x402 소액 결제, Universal Commerce Protocol, Agentic Commerce Protocol 등 커머스 프로토콜이 포함됩니다.
AI 지원 개발 툴링도 상당한 커버리지를 받았습니다. stop 이벤트와 followup_message 필드를 활용한 Cursor 에이전트 훅은 각 에이전트 턴 후 자가 치유 lint-빌드 루프를 구현하며, Node.js PATH 순서, 성공 시 무한 루프, JSON stdout 오염 등의 함정이 문서화되었습니다. Syntax.fm은 Rust 기반 올인원 코드 품질 도구 Fallow와 jscpd, Knip, Project Wallace, Storybook MCP 서버를 소개하며, agents.md 지침보다 결정론적 맞춤형 ESLint 플러그인이 더 신뢰할 수 있다고 강조했습니다. Evil Martians의 에이전트 경험(AX) 포스트는 Claude, ChatGPT, Gemini가 각각 근본적으로 다른 채널에서 문서를 수집하고, Wallarm 감사에서 501개 MCP 서버의 96%에 악용 가능한 취약점이 발견되었음을 보고했습니다.
성능과 인프라도 다루어졌습니다. Shopify 최적화 가이드는 가벼운 히어로 비디오 포스터와 히어로 이미지를 180 KB 이하로 유지함으로써 LCP를 9초 이상에서 2.7초로 줄이고, 540 KB 서드파티 카트 번들을 6 KB 맞춤 구현으로 교체하는 방법을 시연했습니다. 런던에서 열린 Node.js 협업 서밋 2026은 v27부터 시작하는 연도 기반 릴리스 일정, 실험적 async iteration 기반 Streams API(v25.9.0의 stream/iter), 제안된 node:vfs Virtual File System 모듈을 미리 보였습니다.
- 에이전틱 코딩은 코드 생산을 범용화하지만, 문제를 올바르게 정의하고 아키텍처 불변식을 보호하며 거의 정확한 생성 결과물의 장기적 위험을 파악할 수 있는 경험 많은 엔지니어의 가치를 증폭시킵니다.
- 앱을 에이전트 준비 상태로 만들려면 API만으로는 부족하며, Streamable HTTP의 MCP 서버, PKCE와 Dynamic Client Registration을 적용한 OAuth 2.1, well-known 디스커버리 경로, Markdown 콘텐츠 협상으로 구성된 전체 프로토콜 스택이 필요합니다.
- followup_message를 활용한 Cursor의 stop 훅은 자가 치유 에이전틱 lint 루프를 구현하지만, PATH 정리와 성공 시 followup_message를 반환하지 않는 것이 무한 에이전트 루프를 피하는 데 필수적입니다.