Huny's Dev Blog
huny.dev

Modern Web Guidance 1.0: AI 코드 현대화에서 스캔과 검증을 분리하기

11월 10일 정식 출시된 Modern Web Guidance 1.0을 살펴본다. Baseline 목표 설정, 레거시 스캔의 범위와 비용, 에이전트의 맥락 검토 및 브라우저 회귀 테스트를 정리한다.

Hun Jang
Hun Jang Nov 13, 2026

오래된 웹 구현을 가이드에 따라 정리하는 과정을 표현한 생성형 개념 이미지. 실제 도구 화면이 아니다.

AI가 만든 화면은 잘 열리는데 키보드 조작이나 브라우저 호환성에서 문제가 생긴다면, 모델을 바꾸기 전에 구현 기준부터 제공할 필요가 있다. Modern Web Guidance 1.0은 코딩 에이전트에 웹 플랫폼 가이드와 호환성 정보를 공급한다. 기존 코드에서는 스캔 결과를 바로 수정하지 않고, 주변 맥락과 지원 브라우저를 확인한 뒤 작은 변경부터 검증하는 방식이 적합하다.

1.0에서 달라진 점

Chrome 팀은 2026년 11월 10일 Modern Web Guidance 1.0 정식 버전을 발표했다. 기존 저장소의 레거시 패턴을 찾는 현대화 워크플로, 전문가 검토를 거친 가이드 확대, 공개 평가 체계를 주요 변화로 제시했다. Firefox와 Edge도 프로젝트에 참여한다.

새 모델을 학습시키는 제품이라기보다 에이전트가 작업할 때 필요한 지침을 찾아 읽도록 하는 스킬이다. 접근성, 성능, 보안, 폼과 CSS 같은 구현 판단을 보완한다. 공식 평가 수치는 특정 평가 환경의 결과이므로 우리 서비스의 성능 개선율로 그대로 옮기면 안 된다. 공식 출시 발표

먼저 지원 브라우저를 정한다

설치 예시는 다음과 같다. 이 글에서는 설치나 에이전트 실행을 수행하지 않았다. 아래 명령은 공식 문서에 근거한 사용 예시다.

공식 시작 문서에 따르면 CLI 설치는 자동 업데이트를 지원한다. 프로젝트의 AGENTS.md 등에 Baseline 목표를 지정할 수 있으며, 미지정 시 Widely available을 기본으로 사용한다. 최신 기능을 무조건 쓰도록 요청하기보다 실제 서비스의 브라우저 지원 정책을 먼저 적어야 한다.

Baseline은 주요 브라우저 간 기능 지원 상태를 설명한다. 사내 웹뷰나 오래된 단말의 모든 동작을 대신 보증하지는 않는다. 팀에서는 대상 브라우저·운영체제와 예외 환경을 별도로 테스트 목록에 남기는 편이 좋다. 아래 문구의 대상은 예시이며 서비스 정책에 맞게 조정한다.

설치와 Baseline 설정 문서

스캔은 수정 후보를 찾는 단계다

현대화 워크플로는 HTML·CSS·JavaScript/TypeScript와 관련 파일을 로컬 파서로 검사한다. 이 정적 스캔 자체에는 LLM 호출이 없지만, 이후 에이전트의 맥락 검토와 코드 수정은 별도 모델 사용을 수반할 수 있다.

검사 대상은 전체 가이드의 일부다. 결과가 없다고 접근성·보안·호환성 검사가 끝났다는 뜻은 아니다. 발견 항목의 keepWhen/dropWhen 기준으로 의도한 대체 구현이나 비슷한 코드를 걸러야 한다. 자동 일괄 수정을 뜻하는 --fix 플래그도 제공하지 않는다.

예를 들어 scrollHeight를 읽는 코드는 입력창 자동 높이 조절일 수도, 가상 스크롤의 필수 계산일 수도 있다. 이름만 보고 삭제하면 다른 기능을 망가뜨릴 수 있다. 공식 문서도 스캔, 맥락 확인, 보고, 가이드 기반 수정과 테스트 순서로 설명한다. CI/CD 자동 통합은 문서상 개발 중이므로 완성된 배포 게이트로 소개해서는 안 된다. 현대화 워크플로

에이전트에게는 변경 계획부터 요청한다

다음은 저장소 전체를 한 번에 고치기보다 특정 폴더의 검토 결과를 받기 위한 요청 예시다.

1.0은 가이드를 사용한 응답에 적용한 가이드와 선택 이유를 설명하도록 설계됐다. 팀 리뷰에서는 이 설명을 변경 근거로 활용할 수 있다. 다만 가이드 인용이 있다는 이유만으로 패치를 통과시키지 않는다. 실제 변경이 설명과 일치하는지 확인한다. 가이드 사용과 개발자 학습

검증은 화면보다 동작을 중심으로 한다

다음 항목은 이 글의 도입 권고이며, 실제 프로젝트에서 실행한 결과는 아니다.

  • 변경 전 동작을 기록한다. 폼 제출값, 포커스 이동, 팝업 종료 조건처럼 유지할 계약을 정한다.
  • 한 컴포넌트부터 수정한다. 패키지 삭제나 공통 스타일 교체는 다른 사용처까지 확인한다.
  • 키보드만으로 열기·닫기·이동·제출을 검사한다. 한국어 입력창은 조합 중 Enter와 조합 완료 후 Enter를 구분한다.
  • 지원 브라우저에서 기능 지원 여부와 대체 경로를 각각 검증한다. 애니메이션은 동작 줄이기 설정도 확인한다.
  • 프로젝트 테스트와 스캔을 다시 실행한다. 스캔 경고 감소와 사용자 기능 유지가 함께 확인돼야 한다.

도입의 첫 목표는 최신 문법을 많이 쓰는 것이 아니다. 에이전트가 어떤 근거로 코드를 바꾸는지 드러내고, 작은 변경이 기존 동작을 유지한다는 증거를 남기는 것이다.

추천 글