엣지 개발자 기능 업데이트: SPA 성능 측정부터 WebMCP까지

마이크로소프트의 최신 웹 개발 업데이트는 성능 측정, 디버깅, AI 에이전트와의 상호작용, 텍스트 편집 기능을 아우릅니다. 다만 기능마다 이용 단계가 다릅니다. 엣지 릴리스 노트나 DevTools에 문서화된 기능도 있고, 실험용으로 시험해 볼 기능도 있으며, 아직 계획 단계라 실제 서비스에 의존하기 어려운 기능도 있습니다. 16333940

SPA에서 느린 화면 전환 찾기

일반적인 페이지 로드 지표만으로는 싱글 페이지 앱(SPA)의 체감 속도를 모두 파악하기 어렵습니다. SPA에서는 새 문서를 불러오지 않고도 화면이나 경로가 바뀌기 때문입니다. 엣지의 Performance API에는 이런 전환을 살펴볼 수 있는 두 가지 항목이 추가됩니다. soft-navigation은 사용자 상호작용으로 발생한 동일 문서 내 기록 상태 변경을 보고하고, interaction-contentful-paint는 상호작용으로 바뀐 페이지 영역에 새 콘텐츠가 그려진 시점을 알려줍니다. 40

엣지 릴리스 노트에는 SPA 성능 지표 수집을 위한 소프트 내비게이션 휴리스틱도 안내돼 있습니다. 이 항목들은 앱 안에서 전환이 언제 일어났고 그 결과물이 언제 표시됐는지 조사하는 데 도움이 되는 진단 정보입니다. 성능 문제를 자동으로 고쳐 주는 기능은 아닙니다. 3940

JavaScript 프로파일링에 브라우저 작업 맥락 더하기

JavaScript Self-Profiling 마커는 JavaScript 샘플 사이에 브라우저가 수행한 작업에 관한 맥락을 제공합니다. 스타일 계산, 레이아웃, 페인팅, 가비지 컬렉션 등이 여기에 포함됩니다. 이를 통해 개발자는 애플리케이션 코드 실행에 걸린 시간과 브라우저의 다른 작업에 걸린 시간을 구분해 살펴볼 수 있습니다. 실제 개발 환경에 도입하기 전에는 현재 엣지 문서와 기능 지원 여부를 확인하는 편이 좋습니다. 1

DevTools에서 네트워크 요청 다시 보내고 수정하기

Network 도구의 Resend 명령을 사용하면 페이지를 새로고침하지 않고 캡처한 요청을 다시 보낼 수 있습니다. 요청을 반복했을 때 어떤 응답이 오는지 확인할 때 유용합니다. 18

새로운 Edit and resend as Fetch 방식에서는 캡처한 요청을 수정한 뒤 Console에서 fetch() 호출로 실행해 볼 수 있습니다. 요청을 빠르게 시험하고 디버깅하기 편해지는 도구이지, 네트워크 연결 자체를 빠르게 만드는 기능은 아닙니다. 마이크로소프트 개발자 업데이트는 새 작업 흐름을 소개하고, 엣지 문서는 요청을 다시 보내는 방법을 안내합니다. 118

WebMCP로 브라우징 에이전트에 사이트 동작 제공하기

WebMCP는 웹사이트가 브라우징 에이전트가 사용할 수 있는 구조화된 동작을 제공하도록 돕는 초기 단계의 방식입니다. 에이전트가 페이지를 시각적으로 해석하는 데만 의존하지 않고, 사이트가 선언한 도구나 동작을 통해 상호작용하도록 하는 것이 목표입니다. 마이크로소프트는 WebMCP를 시험용 초기 기능으로 소개하고 있으므로, 모든 사용자에게 이미 제공되는 기능으로 간주하기보다는 실험 단계로 다루는 것이 안전합니다. 1

입력창 안의 텍스트 범위를 다루는 OpaqueRange

OpaqueRange는 텍스트 기반 <input>이나 <textarea> 안의 텍스트 일부를 실시간 범위로 나타냅니다. 이를 이용하면 입력 컨트롤 내부의 텍스트 노드 구조를 외부에 노출하지 않고도 범위에 맞춘 UI 배치나 강조 표시 같은 상호작용을 만들 수 있습니다. 마이크로소프트는 OpaqueRange를 엣지 152 웹 플랫폼 업데이트에 포함했습니다. 133

Web Install API는 시험 단계

Web Install API를 사용하면 사이트가 비동기 함수 navigator.install()을 호출해 다른 웹 앱의 설치를 요청할 수 있습니다. 설치 과정에는 브라우저의 기본 웹 앱 설치 환경이 사용됩니다. 마이크로소프트는 엣지의 오리진 트라이얼을 통해 이 API를 테스트할 수 있다고 발표했습니다. 오리진 트라이얼은 시험을 위한 경로이지, 모든 브라우저에서 지원된다는 뜻은 아닙니다. 6

네이티브 menu 요소는 아직 계획 단계

마이크로소프트는 기본 메뉴 동작을 제공하도록 설계된 네이티브 <menu> 요소도 예고했습니다. 아직 계획 중인 기능이므로, 일반적으로 제공되고 있다고 보거나 지원이 확인되기 전에 프로덕션 동작의 기반으로 삼아서는 안 됩니다. 1

지금 확인해 볼 기능은?

직접 살펴볼 기능으로는 엣지 문서에 안내된 DevTools의 요청 재전송과 엣지 152 릴리스 노트에 포함된 OpaqueRange가 있습니다. Web Install API에는 발표된 오리진 트라이얼 경로가 있습니다. 소프트 내비게이션 지표, WebMCP, JavaScript 프로파일링 마커는 실제 적용 전에 현재 버전과 테스트 요건을 확인하세요. 네이티브 메뉴 요소는 아직 계획 단계입니다. 1618333940