Modern Web Guidance 검토 봇이 MetaMask의 접근성 높은 최신 UI 제공을 지원하는 방법

Gilberto Cocchi

Rick Viscomi

게시일: 2026년 11월 10일

MetaMask는 약 190개 국가에서 1억 회 이상 다운로드된 자체 보관 금융 플랫폼입니다. 브라우저 확장 프로그램은 공개적으로 개발되므로 회사 내부 및 외부의 기여자로부터 pull 요청이 꾸준히 들어옵니다.

MetaMask UX 엔지니어인 프랜시스 네포무세노는 이러한 pull 요청을 많이 검토했으며, 기여자가 접근성 권장사항을 적용하고 최신 웹 기능을 사용할 수 있도록 지원하는 일관된 방법을 원했습니다. 편집기에서 그는 이미 Chrome의 Modern Web Guidance를 사용하고 있었습니다. 이는 웹 플랫폼 권장사항과 브라우저 호환성 데이터를 코딩 에이전트에 제공하는 기술 모음입니다. 다른 기여자에게도 동일한 지침을 제공하기 위해 그는 작성자가 사용한 도구와 관계없이 MetaMask의 오픈소스 저장소에 대한 모든 pull 요청을 검토하는 봇을 설정했습니다.

과제: 최신 웹 기능 따라잡기

최신 HTML과 CSS는 접근성과 사용자 환경을 개선하는 기능을 계속 추가하고 있으며, 브라우저 전반에서 어떤 기능이 작동하는지 추적하기는 어렵습니다. 참여자가 많으면 pull 요청을 여는 모든 사람에게 해당 지식이 전달되어야 합니다.

보안은 또 다른 이유를 추가합니다. MetaMask는 기본적으로 모든 서드 파티 종속 항목을 샌드박스 처리하므로 라이브러리 대안보다 네이티브 브라우저 기능을 더 저렴하게 채택할 수 있습니다. 네포무세노는 "JavaScript 없이 대화상자와 드롭다운을 사용할 수 있는 것과 같은 최신 API에 액세스할 수 있다는 것은 큰 이점이었습니다."라고 말했습니다.

해결책: Modern Web Guidance가 모든 pull 요청을 검토합니다.

2026년 9월 16일, MetaMask/metamask-extension에 대한 pull 요청으로 대부분의 React FAQ가 빌드되는 방식으로 빌드된 FAQ가 포함된 '작동 방식' 페이지가 추가되었습니다.

// Before: Custom React state (removes content from DOM)
const [expanded, setExpanded] = useState(false);
<button type="button" aria-expanded={expanded} onClick={() => setExpanded(c => !c)}>
  <Text>{question}</Text>
</button>
{expanded ? <Text>{answer}</Text> : null}

약 5분 후 봇이 댓글을 달았습니다. search-hidden-content 가이드를 인용하여 세 가지 요점을 제시했습니다.

• 각 답변을 조건부로 렌더링하면 DOM에서 삭제되므로 접힌 텍스트는 브라우저의 페이지 내 찾기로 찾을 수 없으며 보조 기술로 찾기가 더 어렵습니다.
• 네이티브 <details>/<summary> 공개(2020년 이후 기준)는 올바른 시맨틱스로 DOM에 콘텐츠를 유지합니다. 상호 배타적인 패널의 경우 공유 name 속성(2024년부터 새로 제공되는 기준)이 다른 패널을 자동으로 닫습니다. 여러 개를 열 수 있는 FAQ의 경우 이 속성을 생략합니다.
• 팀에서 기존 Disclosure 구성요소를 선호하는 경우 최소한 hidden="until-found" 및 aria-expanded와 아이콘 상태를 동기화하는 beforematch 리스너를 사용하여 DOM에 답변을 유지해야 합니다.

// After: Native <details> / <summary> disclosure (findable with find-in-page)
<details>
  <summary>
    <Text>{question}</Text>
  </summary>
  <Text>{answer}</Text>
</details>

13분 후 작성자가 수정사항을 푸시했습니다. 구성요소가 네이티브 <details>/<summary> 공개가 되었고, 접힌 답변은 페이지 내 찾기를 위해 DOM에 남아 있었으며, 탐색 버튼 두 개가 링크가 되었습니다.

이 봇은 Modern Web Guidance를 실행하는 Cursor Automation이며, 네포무세노는 세 줄의 프롬프트로 이를 설정했습니다. 2026년 10월 21일(5주 차):

• 이 봇은 약 480개의 pull 요청에서 실행되었으며 26명의 작성자가 작성한 64개의 pull 요청(기능 및 수정 pull 요청 57개, 자동 출시 및 동기화 pull 요청 7개)에 댓글을 달았습니다.
• 기능 및 수정 pull 요청에서 엔지니어는 22개의 pull 요청에서 43개의 발견 항목을 수정하고 3개를 부분적으로 수정했습니다.
• 엔지니어는 신속하게 대응했습니다. 식별 가능한 커밋이 있는 38개의 수정사항 중 19개는 15분 이내에, 26개는 1시간 이내에 적용되었으며, 댓글에서 수정까지의 중앙값은 15.2분이었습니다.

MetaMask가 봇을 구성한 방법, 봇이 포착한 내용, 노이즈가 발생한 위치는 다음과 같습니다.

설정은 3줄 프롬프트입니다.

자동화가 어떻게 구성되어 있는지 묻는 질문에 네포무세노는 다음과 같이 답했습니다. "물론입니다. 저희 설정에는 특별한 것이 없습니다. 간결하고 범위가 지정된 상태로 유지합니다." 전체 요청 사항:

- Run /modern-web-guidance for any client-facing changes
- Run /chrome-extensions for any relevant extension changes
- Comment on the PR only when there are issues to address. Keep the comment focused on actionable items

실제 작동 방식은 다음과 같습니다.

• 자문 역할: 처음 이틀 동안 봇은 '변경 요청' 검토(및 승인 1건)를 게시했으며, 작성자는 이를 처리한 후 삭제했습니다. 9월 18일 이후 모든 검토는 댓글로 처리되었습니다. 병합을 차단하지 않으므로 작성자가 각 제안에 대한 최종 결정을 내릴 수 있습니다.
• 저장소의 특정 가이드와 파일을 인용합니다. 이 봇은 댓글을 단 64개의 pull 요청에서 122개의 발견 항목을 제기했습니다. 기능 및 수정 pull 요청 102개 중 63개는 적용 중인 특정 Modern Web Guidance 가이드(예: search-hidden-content, state-aware-sticky-headers, sms-otp-form)를 지정하고, 이미 권장 패턴을 사용하는 경우 저장소의 기존 파일을 가리킵니다.
• pull 요청이 UI를 터치하지 않는 한 조용히 유지됨: 5주 동안 약 480개의 pull 요청 중 최소 100개가 UI 또는 클라이언트 코드를 터치했으며 봇은 댓글을 단 pull 요청당 평균 약 2개의 결과를 발견했습니다. 대부분 프런트엔드 저장소가 있는 팀은 더 많은 부분에 주석을 달 수 있습니다.

프롬프트 자체는 모든 에이전트 실행기에서 작동합니다. Modern Web Guidance는 Cursor, Claude Code, Codex, GitHub Copilot, Antigravity, 기타 코딩 에이전트의 스킬 또는 플러그인으로 설치됩니다. 에이전트가 기술을 실행하면 API 키가 필요 없는 로컬 색인에서 일치하는 가이드를 조회하고 팀의 에이전트 실행기가 이미 제공하는 모델을 사용하여 가이드와 비교하여 차이점을 확인합니다.

린터가 포착하지 못하는 Modern Web Guidance의 감지 기능

정적 린터는 단일 요소에서 누락된 속성을 신고할 수 있지만, 다음 결과는 상호작용 동작, HTML 시맨틱스, 파일 간에 구성요소가 어떻게 결합되는지에 따라 달라집니다.

입력을 자동으로 무시하면서 수정 가능한 것처럼 보이는 거래 수수료 필드

MetaMask의 고급 거래 수수료 설정에서 가스 한도 필드(거래에서 사용할 수 있는 네트워크 수수료를 제한함)는 수정 가능한 것처럼 보였지만 사용자의 입력을 자동으로 무시했습니다. 이 문제는 수수료 추정치가 아직 로드 중이거나 로드에 실패한 경우에 발생했습니다. 한편 저장 버튼은 사용 중지되었으며 보조 기술이 읽을 수 있는 설명이 없었습니다.

양식 가이드를 인용하여 봇은 세 가지 수정사항을 표시했습니다.

• 예상치를 사용할 수 없는 경우 가스 한도 필드를 사용 중지하고, 보조 기술이 설명을 읽을 수 있도록 표시 상태 텍스트를 필드에 연결합니다.
• 사용 중지된 저장 버튼을 동일한 상태 텍스트에 연결하여 스크린 리더가 사용 중지된 이유를 알 수 있도록 합니다.
• 모바일 사용자가 숫자 키패드를 사용할 수 있도록 필드를 숫자 입력 모드로 전환합니다.

작성자는 두 설정 모달에 세 가지 수정사항을 모두 적용하고 이를 단일 구성요소로 통합했습니다.

URL을 숨긴 배너 버튼

MetaMask의 거래 기능 중 하나의 상태 배너에서 인라인 'FAQ' 및 'MetaMask 지원팀에 문의' 작업은 링크가 아닌 JavaScript를 사용하여 새 탭을 여는 버튼으로 빌드되었습니다. 3분 이내에 봇은 HTML 및 접근성 가이드를 인용하여 스크린 리더가 이를 버튼으로 알리고 사용자가 URL 복사 또는 컨텍스트 메뉴에서 새 탭으로 열기와 같은 링크 어포던스를 잃는다고 신고했습니다. 또한 MetaMask의 코드베이스에서 이러한 작업을 실제 링크로 렌더링하는 기존 배너 구성요소를 가리켰습니다.

12분 후 작성자는 두 작업을 모두 링크로 전환했습니다. "가이드가 채택되면 향후 검토에서 이를 참고 사례로 언급한다는 점이 매우 유용합니다."라고 네포무세노는 말했습니다.

라벨이 다른 곳에 있는 인증 입력란

여러 파일에 걸쳐 읽을 수 있는 봇의 기능은 여러 단계로 구성된 양식에서도 효과를 발휘했습니다. 정적 린터는 각 단계 내에 플레이스홀더 텍스트가 있는 텍스트 입력란만 표시하며 표시되는 제목과 안내가 상위 요소 레이아웃 구성요소에 있다는 것을 알 수 없습니다. 양식 및 접근성 가이드를 인용하여 봇은 자리표시자가 필드의 유일한 라벨이고 상위 요소 레이아웃의 단계 제목과 안내가 입력과 연결되지 않았으며 오류 및 '코드 재전송' 메시지가 스크린 리더에 공지되지 않았음을 포착했습니다. 15분 후 세 가지 모두 수정되었으며, 후속 pull 요청에서 코드 입력을 6개의 시각적 숫자 상자로 스타일을 변경했을 때 접근성 배선은 그대로 유지되었습니다.

봇이 감지한 몇 가지 추가 사항

5주간의 실험에서 얻은 5가지 추가 결과는 다음과 같습니다.

• 봇을 만든 엔지니어가 놓친 CSS 세부정보: 네포무세노가 고정 홈 탭에 대해 제출한 pull 요청에는 컨테이너 이름을 지정하지 않고 중첩된 CSS 스크롤 상태 쿼리가 포함되어 있었으며, 스크롤 중간에 레이아웃이 변경되는 방식으로 테두리가 전환되었습니다. 봇은 상태 인식 고정 헤더 가이드를 인용했고, 개발자는 두 가지 모두 수정했습니다. 그는 앵커 위치 지정 및 스크롤 상태 쿼리에 대한 리뷰가 도움이 된다는 것을 알게 되었습니다.
• 키 입력 중간에 슬리피지 제한: 맞춤 슬리피지 입력(사용자가 거래에서 허용하는 가격 변동)은 키 입력마다 100% 를 초과하는 값을 고정하여 사용자가 입력하는 동안 101을 100으로 변환했습니다. 양식 가이드에 따라 수정을 통해 입력란이 포커스를 잃을 때 유효성 검사를 실행하고 표시되는 경고 배너를 추가했습니다.
• 스크린 리더가 사용할 수 없는 로드 표시기: 토큰 목록 로드 스켈레톤은 역할이 없는 일반 요소에 '로드 중' 라벨을 지정하며, 이는 ARIA에서 금지됩니다. 봇은 이미 MetaMask의 스크린 리더 전용 패턴을 사용하고 있는 코드베이스의 두 구성요소(둘 다 6일 전 Modern Web Guidance 검토 후 업데이트됨)를 가리켰고, 작성자는 8분 후에 해당 패턴에 맞게 스켈레톤을 조정했습니다.
• 보호되지 않는 비동기 작업: 비동기 '제공업체에서 보기' 버튼에 진행 중인 보호 기능이 없었기 때문에 더블클릭하면 중복 탭과 백그라운드 감시자가 열릴 수 있었습니다. 작성자가 댓글을 작성한 지 4분도 되지 않아 가드를 추가했습니다.
• 양식 없는 키 입력 유효성 검사: NFT 가져오기 페이지에서 키 입력마다 유효성 검사를 실행했으며 제출 시맨틱스에 <form> 요소가 없었습니다. 둘 다 검토 후 19분 만에 수정되었습니다.

모든 리뷰는 공개됩니다. 봇의 전체 댓글은 연결된 각 pull 요청에 있으며 GitHub에서 모두 찾아볼 수 있습니다.

해결되지 않은 문제 및 노이즈 수준

모든 발견 항목이 적용된 것은 아닙니다. 다음 표는 MetaMask가 기능 및 수정 pull 요청에 대한 102개의 발견 항목을 집계한 방법을 보여줍니다(7개의 출시 및 동기화 pull 요청에 20개가 더 추가되었으며, 검토로 인해 코드가 변경되지 않을 것으로 예상됨).

122개 발견 항목(출시 및 동기화 pull 요청에 대한 20개 포함) 전체에서 테마별로 분류:

이러한 수치에는 몇 가지 패턴이 있습니다.

• 하나의 구성요소 내에 있는 수정사항은 교차 접근성 변경사항보다 훨씬 더 자주 적용됩니다. 양식 및 HTML 수정사항은 검토 중인 구성요소 내에 유지되므로 작성자는 일반적으로 즉시 적용합니다(31개 중 19개 수정됨). 접근성에서 가장 많은 발견 사항(38개)이 있었지만 12개만 수정되었습니다. 일반적으로 수정이 pull 요청의 범위를 벗어났거나 아직 존재하지 않는 공유 디자인 시스템 구성요소가 필요했기 때문입니다.
• '기타'는 웹 플랫폼 가이드에서 벗어나는 부분입니다. 16개의 발견 항목은 디자인 시스템 일관성, 로직 버그, 복사, 테스트 품질, 어두운 모드, 코드 위생을 다루었습니다. 3개는 조치를 취했고 그중 하나는 실제 회귀(양식 자동 완성을 중단한 네트워크 목록 변경)였습니다. 16개 중 대부분은 쉽게 넘어갈 수 있었지만 회귀를 포착한 덕분에 간단히 살펴볼 가치가 있었습니다.
• 거짓양성은 에이전트가 가이드를 적용하는 방식에서 발생했으며 대부분의 노이즈는 설정에서 수정할 수 있습니다. 리뷰 봇은 정적 린터가 아닌 diff를 읽는 에이전트이므로 주변 코드를 잘못 읽거나 연결된 가이드보다 규칙을 더 엄격하게 적용하여 거짓양성이 발생했습니다. 출시 및 동기화 브랜치를 건너뛰고 프롬프트를 강화하여 에이전트가 가이드에 명시적으로 명시된 규칙을 준수하도록 하는 것이 다음 조정 단계입니다.

네포무세노는 팀과 검토 소요 시간에 미치는 광범위한 영향에 대해 다음과 같이 설명합니다.

MetaMask 엔지니어인 데이비드 머독은 가이드 자체에도 기여했습니다. CSS 레이아웃 가이드의 예시 중 하나에 오류가 있었을 때 문제를 신고했고, Modern Web Guidance팀은 이틀 후에 수정사항을 병합했습니다.

MetaMask가 도입을 고려하는 팀에 전하는 말

• 글을 작성하기 전에 가이드를 읽어보세요. npx modern-web-guidance@latest search "accordion find in page"를 실행하여 에이전트가 작업에 대해 검색할 가이드를 확인합니다. Modern Web Guidance 가이드 전체를 둘러볼 수도 있습니다.
• 이미 실행 중인 에이전트와 3줄 프롬프트로 시작합니다. 스킬(npx modern-web-guidance@latest install 또는 에이전트의 플러그인 명령어)을 설치하고, pull 요청에서 실행할 수 있는 모든 것을 가리키고, 실행 가능한 항목이 있을 때만 댓글을 달고 가이드에 명시된 규칙을 준수하도록 지시합니다. 문제가 없을 때 봇을 조용히 유지하는 것이 MetaMask 엔지니어가 여전히 댓글을 읽는 이유입니다.
• 일부 발견 사항은 해결되지 않을 수 있습니다. 기능 및 수정 pull 요청에 대한 102개의 발견 항목 중 43개가 수정되었고 36개가 거부되거나 해결되지 않았습니다. 이 비율은 자문 검토 봇에는 적합하지만 차단 검사로서는 방해가 될 수 있습니다.
• 사람이 계속 검토합니다. 봇은 웹 플랫폼 시맨틱스, 최신 CSS, 상호작용 패턴에 능숙하지만 제품을 알지 못합니다.

MetaMask가 아직 측정하지 않은 것도 있습니다. 5주가 지났지만 팀은 pull 요청당 비용, 런타임, 모델 비교 또는 React 코드베이스 외부에서 리뷰 봇이 어떻게 작동하는지 추적하지 않았습니다.

MetaMask는 세 줄의 구성으로 대부분의 발견 항목에 대한 특정 가이드(및 존재하는 경우 기존 저장소 내 예시)를 인용하는 검토 봇을 확보했습니다. 수락된 제안은 일반적으로 1시간 이내에 수정됩니다.