Modern Web Guidance로 웹 플랫폼 기능 찾아 쓰기

코딩 에이전트가 대화상자의 포커스 이동이나 화면 크기에 따른 배치를 JavaScript로 구현했다면, 브라우저 기능으로 처리할 수 있는지 확인합니다. 네이티브 기능이 요구사항을 충족하면 직접 관리할 이벤트와 상태를 줄일 수 있습니다. 기능을 선택할 때는 지원 브라우저와 접근성 조건도 함께 확인해야 합니다.

Modern Web Guidance는 Google Chrome 팀, Microsoft Edge 팀, 웹 개발 커뮤니티가 지원하는 웹 개발 가이드입니다. 코딩 에이전트는 작업에 필요한 웹 플랫폼 지식을 이 가이드에서 찾아 읽을 수 있습니다. 개발자는 구현할 동작에 맞는 자료를 선택해 에이전트에게 제공합니다.

구현하려는 동작으로 가이드 찾기

“최신 CSS를 사용해줘”라는 요청만으로는 적용할 기능과 조건이 분명하지 않습니다. 반면 “대화상자를 열고 닫을 때 배경과 포커스를 처리한다”는 요청에는 확인할 동작이 있습니다. 가이드 검색도 이런 구현 상황을 기준으로 할 수 있습니다.

npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

첫 명령은 관련 가이드를 찾고, 두 번째 명령은 선택한 가이드 내용을 가져옵니다. 검색 결과의 이름만 보고 구현하지 않고 패턴, 주의점, 호환성 조건까지 읽습니다. npx는 필요한 패키지를 내려받을 수 있으며, @latest가 실행하는 버전은 시점에 따라 달라집니다. 구현 기록에는 실제 사용한 패키지 버전과 가이드 ID를 남깁니다.

대화상자 가이드를 읽을 때는 브라우저가 제공하는 동작과 제품에서 추가로 구현할 동작을 구분합니다. 에이전트에게는 선택한 가이드와 함께 열기, 닫기, 포커스 이동 등 현재 작업의 요구사항을 전달합니다.

직접 만든 dialog 설명 화면입니다. 실제 사이트 캡처가 아니며, 열기·Tab·Escape·포커스 복귀를 확인할 위치를 표시했습니다.

브라우저가 맡을 수 있는 동작

대화상자를 만들 때는 dialog, 컴포넌트의 크기에 따른 배치에는 컨테이너 쿼리, 접고 펼치는 내용에는 details를 검토할 수 있습니다. 각 기능이 처리하는 부분을 확인한 뒤 제품에서 추가로 구현할 동작을 정합니다.

브라우저 기능을 사용해도 제품이 원하는 동작을 모두 얻는 것은 아닙니다. 열기와 닫기, 키보드 이동, 화면 크기 변화, 보조기술에서의 안내를 직접 확인해야 합니다. 기능이 존재한다는 사실과 제품에서 사용할 수 있다는 판단은 다릅니다.

호환되지 않는 브라우저를 지원해야 한다면 대체 동작도 정합니다. 같은 기능을 전부 흉내 내기보다 사용자가 핵심 작업을 할 수 있는 최소 동작을 찾을 수 있습니다. 지원 대상이 정해지지 않은 상태에서 큰 라이브러리를 추가하면 나중에 제거하기 어려워집니다.

캐러셀에서 확인할 접근성과 성능

가이드를 읽은 뒤에는 결과 화면에서 접근성과 성능 조건을 검사합니다.

캐러셀을 만든다면 버튼에 이름이 있는지, 키보드로 이동할 수 있는지, 현재 항목을 구분할 수 있는지 확인합니다. 애니메이션을 넣었다면 사용자의 움직임 감소 설정을 고려합니다. 성능을 개선했다고 주장하려면 같은 조건에서 변경 전후를 측정해야 합니다.

가이드의 자체 평가 수치는 해당 과제와 모델에서 얻은 결과입니다. 자신의 컴포넌트에서는 변경 전후에 같은 사용자 동작을 검사해 어떤 오류가 줄었는지 확인해야 합니다.

캐러셀을 수정했다면 변경 전후에 같은 버튼 이름, 키보드 이동, 현재 항목 표시를 검사합니다. 제거한 이벤트 처리와 남은 문제를 함께 기록합니다. 이 기록을 바탕으로 다른 컴포넌트에도 같은 기능을 적용할지 판단할 수 있습니다.