Show HN: 코딩 에이전트를 2019년 무렵의 JavaScript에서 최신 웹 기본 기능으로 이끌기
요약
본문은 코딩 에이전트가 최신 웹 표준 API와 CSS 기능을 활용하도록 안내하는 것이 중요함을 강조합니다. view-transition-scope, scrollsnapchange 등 고급 기능들이 존재하지만 브라우저별 지원 차이가 크기 때문에, 개발자가 호환성을 고려한 상세 문서화 및 대체 구현 가이드 제공이 필요하다고 주장합니다.
핵심 포인트
- AI 에이전트가 최신 웹 표준 API를 사용하도록 안내하는 것이 핵심 과제입니다.
- CSS/HTML의 고급 기능(예: view-transition-scope)을 활용하여 사용자 경험 개선이 가능합니다.
- 브라우저별 지원 표와 대체 구현 문서를 제공해 호환성 문제를 해결해야 합니다.
- 에이전트는 유지보수성을 고려한 간결하고 효율적인 해법을 선택하도록 유도되어야 합니다.
이 스킬들이 에이전트에게 사용하도록 안내하는 기능 중에는 Chrome에서는 안정적으로 지원하지만 Firefox와 Safari에서는 지원하지 않는 기능이 상당히 많음.
CSS @function, calc-size(), interpolate-size, corner-shape, border-shape, flex-wrap: balance, text-fit, text-decoration-skip-spaces, scroll-axis-lock, scroll-target-group, :target-current, scroll-initial-target, 컨테이너 스크롤 상태 쿼리와 scrollsnapchange, scrollsnapchanging 이벤트 등이 해당함.
HTML focusgroup, Element.startViewTransition(), CSS view-transition-scope, Interest Invokers(interestfor), LanguageModel(Prompt API), LanguageDetector, Translator, Summarizer API, Window.fetchLater(), Speculation Rules API, Long Animation Frames API, VisibilityStateEntry, PerformanceSoftNavigation, InteractionContentfulPaint도 포함됨.
그 밖에 Connection-Allowlist, CSS url()의 integrity() 수정자, HTML meta name="text-scale", HTML template for, HTML 처리 명령, PasswordCredential, Promise를 반환하는 스크롤 메서드, 웹 앱 출처 이전, 로컬 네트워크 접근 권한, Request.targetAddressSpace, beforeinstallprompt 이벤트도 있음.
다만 공정하게 보자면 Chrome 자체에서 지원하지 않는 기능도 약 11개 추천함. 프로젝트도 “합리적이고 가벼운 대체 구현을 사용하도록 모델을 안내한다”라며 호환성을 신경 쓰는 것으로 보임.
정확히는, 스킬이 일반적인 용도를 해결하는 방법을 문서화하고, Baseline Widely available에 해당하지 않는 API에는 브라우저별 지원 표를 함께 제공함. 에이전트는 사이트의 지원 브라우저 요구사항에 따라 사용 여부를 결정할 수 있음.
대부분은 여러 브라우저에서 동작하는 대체 구현도 문서화되어 있음.
details/summary는 어떤가요?
기존 npm 패키지 외에도 GitHub Pages에 스킬의 Markdown 색인을 게시하면 좋겠음. https://googlechrome.github.io/modern-web-guidance-src/skill...는 현재 404를 반환함.
색인에서 모든 문서의 일반 Markdown 버전으로 연결하고, grep으로 필요한 답을 찾기 쉽게 구성하면 됨.
그러면 HTTP 요청만 가능한 에이전트에게 해당 주소에서 팁을 찾아보라고 하면 됨. 에이전트가 색인을 가져와 관련 문서로 이동하므로 MCP나 npm, 별도 설치가 전혀 필요하지 않음.
마침 Alex Russell의 React는 레거시 기술이라는 발언이 안타깝게도 완전히 무시된 과정을 다루는 글을 쓰고 있음.
아직 자세히 살펴보지는 못했지만, 내가 펼치려던 논거 일부가 여기 담겨 있는 듯해서 유망해 보임.
AI 시대에는 모범 사례가 사실상 죽었다고 봄. 머지않아 AI가 만든 코드를 아무도 읽지 않게 될 것 같아 두려움.
다음 과제는 유지보수성이라고 봄. 코딩 에이전트가 문제마다 1,000줄짜리 해법을 쌓아가도록 두면, 코드베이스는 우리가 어느 정도라도 이해할 수 있는 범위를 빠르게 벗어남.
그래서 ResizeObserver와 setTimeout을 쓰는 60줄보다 CSS 한 줄짜리 해법을 택하겠음. 다만 프런트엔드 모범 사례는 코드에만 국한되지 않으며, 좋은 사용자 경험과 키보드 탐색, 사용 중 흔들리지 않는 레이아웃까지 보장해야 함.
더 나은 사용자 경험을 만들어낸다면 모범 사례는 죽지 않은 셈임. 다만 개발 편의성에 대한 비중이 줄어드는 것은 맞음.
최신 웹 기본 기능이 반드시 모범 사례인 것도 아님. 브라우저별 구현의 함정이 정리되기까지는 코드 품질과 무관한 이유로 대략 10년씩 걸리곤 함.
단순히 작동하는 수준이 아니라 완성도 높은 결과를 원한다면, 기기와 브라우저 조합별 수동 테스트를 많이 하는 수밖에 없음. AI는 이를 해결하지 못했으며, 이제는 코드조차 보려 하지 않으니 오히려 악화시킨 측면이 있음.
AI 자동 생성 콘텐츠
본 콘텐츠는 GeekNews의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기