게시일: 2026년 5월 19일
현재 Modern Web Guidance에서 사용할 수 있는 모든 사용 사례의 생성된 목록입니다.
accessibility
accessible-error-announcement
스크린 리더 사용자가 시각적 환경을 반영하여 상호작용 후에만 오류 피드백을 받을 수 있도록 프로그래매틱 접근성 상태 (예: aria-invalid)를 시각적 :user-invalid 상태와 동기화합니다.
사용한 기능:
built-in-ai
language-detection
사용한 기능:
language-model
스트리밍 출력, 구조화된 JSON 응답, 다중 턴 세션 관리와 함께 프롬프트 API를 사용하여 브라우저에서 온디바이스 자연어 추론을 실행합니다.
사용한 기능:
summarizer
온디바이스 요약 도구 API를 사용하여 텍스트 콘텐츠를 요약합니다.
사용한 기능:
translator
사용한 기능:
css
highlight-text-ranges
검색 결과, 맞춤법 오류, 공동 편집 커서와 같은 페이지의 임의 텍스트 범위를 강조 표시합니다.
사용한 기능:
forms
animated-select-picker
드롭다운이 애니메이션 처리된 맞춤 선택 구성요소를 만듭니다. 예를 들어 메뉴가 서서히 나타나거나 슬라이드되어 표시되거나 선택 시 옵션이 애니메이션으로 표시됩니다.
사용한 기능:
autofill-address-form
올바른 자동 완성 속성과 자동 완성 지원을 사용하여 주소 양식을 빌드합니다.
사용한 기능:
autofill-highlight-inputs
CSS를 사용하여 브라우저에서 자동 완성되었지만 사용자가 수정하지 않은 양식 필드를 강조 표시합니다.
사용한 기능:
autofill-payment-form
올바른 자동 완성 값과 자동 완성 지원으로 카드 세부정보를 수집하는 결제 양식을 빌드합니다.
사용한 기능:
autofill-sign-in-form
올바른 자동 완성 값과 자동 완성 지원 기능이 있는 로그인 양식을 빌드합니다.
사용한 기능:
autofill-sign-up-form
올바른 자동 완성 값과 자동 완성 지원 기능이 있는 가입 양식을 빌드합니다.
사용한 기능:
brand-consistent-forms
맞춤 구성요소로 대체하지 않고 체크박스, 라디오 버튼, 범위 슬라이더, 진행률 표시줄을 사이트의 색상 팔레트에 맞춥니다.
사용한 기능:
branded-select-styling
버튼, 선택기, 화살표 아이콘, 체크표시가 브랜드 또는 디자인 시스템의 서체, 색상, 간격, 테두리 처리와 모두 매끄럽게 일치하는 맞춤 선택 요소를 만드세요.
사용한 기능:
custom-select-picker-layouts
옵션이 기존의 옵션 스택 목록이 아닌 독특하거나 흥미로운 방식으로 배치된 맞춤 선택 선택기를 만듭니다.
사용한 기능:
form-fields-automatically-fit-contents
사용자가 입력하거나 다른 옵션을 선택할 때와 같이 사용자 입력에 맞게 양식 필드가 늘어나거나 줄어들도록 허용합니다. 최대 및 최소 크기 제한을 적용하여 페이지 디자인을 준수하는 동적이고 반응형 양식 필드를 만드세요.
사용한 기능:
required-field-feedback
사용자 상호작용 후 건너뛰거나 비워 둔 필수 양식 필드에 만 오류 메시지를 제공하여 사전 오류를 방지하고 피드백이 적시에 제공되며 사용자 흐름과 관련성이 있도록 합니다.
사용한 기능:
rich-media-picker
옵션에 일반 텍스트가 아닌 복잡한 HTML 형식 (예: 이미지, 아이콘, 기타 서식)이 포함될 수 있는 맞춤 선택 구성요소를 만듭니다.
사용한 기능:
select-menu-interaction
사용자가 컨트롤과 상호작용한 후에만 선택 메뉴에서 기본값이 아닌 옵션이 선택되었는지 확인합니다.
사용한 기능:
validate-input-after-interaction
사용자가 초기 상호작용을 완료한 후에만 양식 필드 유효성 검사 피드백 (예: 비밀번호 복잡성 또는 이메일 형식 요구사항)을 표시하여 페이지 로드 시 또는 사용자가 입력하는 동안의 조기 오류를 방지합니다.
사용한 기능:
passkeys
passkey-authentication
기본 로그인에 패스키를 사용하여 재방문 사용자를 인증합니다.
사용한 기능:
passkey-conditional-create
비밀번호 로그인에 성공한 후 기존 사용자의 패스키를 자동으로 등록합니다.
사용한 기능:
passkey-management
사용자가 계정에 등록된 패스키를 보고 관리할 수 있도록 허용
사용한 기능:
passkey-reauthentication
민감한 작업을 수행하기 전에 기존 패스키를 사용하여 로그인한 사용자의 신원을 확인합니다.
사용한 기능:
passkey-registration
기존 사용자 계정의 패스키를 등록합니다.
사용한 기능:
performance
batch-analytics-events
실시간 업데이트를 제공하면서도 네트워크 경합을 최소화하고 서버 부하를 줄이기 위해 단일 비콘에서 여러 분석 이벤트를 디바운스하고 일괄 처리합니다.
사용한 기능:
break-up-long-tasks
브라우저가 사용자 입력을 처리하고 화면을 다시 그릴 수 있도록 과도한 동기 처리 (복잡한 계산 또는 긴 루프)나 DOM 업데이트를 분리합니다.
사용한 기능:
calculate-total-foreground-time
탭이 백그라운드에 있는 시간을 제외하고 사용자가 실제로 페이지를 본 총 시간을 계산합니다.
사용한 기능:
conditional-async-dependencies
페이지의 모든 스크립트 종속 항목에서 복잡한 오케스트레이션이 필요하지 않고 조건부로 비동기 종속 항목 (예: 누락된 웹 기능의 폴리필 가져오기)을 로드하거나 초기화합니다.
사용한 기능:
defer-rendering-heavy-content
사용자에게 즉시 표시되지 않는 콘텐츠의 렌더링을 지연하여 콘텐츠가 많은 웹페이지 (예: 피드가 길거나, 도움말이 많거나, 대시보드가 복잡한 페이지)의 렌더링 시간을 줄입니다.
사용한 기능:
defer-work-until-scroll-ends
스크롤이 완료될 때까지 DOM 업데이트, 데이터 가져오기, 분석 추적 또는 레이아웃 재계산과 같은 비용이 많이 드는 작업을 지연하여 원활한 스크롤 성능을 유지하세요.
사용한 기능:
deprioritize-background-fetches
사용자 시작 요청과의 네트워크 경합을 방지하기 위해 Fetch API로 이루어진 백그라운드 데이터 가져오기의 우선순위를 낮춥니다.
사용한 기능:
detect-initial-visibility-state
사용자가 페이지를 포그라운드로 전환한 후 스크립트가 비동기식으로 로드되는 경우에도 페이지가 처음에 백그라운드에서 로드되었는지 안정적으로 확인합니다.
사용한 기능:
efficient-background-processing
구성요소가 화면에 표시되지 않을 때 백그라운드 JavaScript 실행 (예: <canvas> 애니메이션, WebGL 렌더링, 고주파 WebSocket 데이터 폴링)을 일시중지하여 시스템 리소스와 배터리 수명을 절약하고, 다시 스크롤하여 표시될 때 적시에 다시 시작합니다.
사용한 기능:
faster-spa-view-transitions
매번 탐색할 때마다 구조적 DOM 상태를 삭제하고 다시 빌드하는 대신 유지하여 싱글 페이지 애플리케이션 (SPA)에서 이전에 방문한 뷰로 더 빠르게 전환할 수 있습니다.
사용한 기능:
full-session-analytics
사용자의 전체 페이지 방문에서 애널리틱스, 오류, 원격 분석 데이터를 안정적으로 추적하고 사용자가 페이지를 떠날 때까지 데이터 전송을 지연합니다.
사용한 기능:
identify-heavy-scripts
긴 애니메이션 프레임의 원인이 되는 스크립트 식별
사용한 기능:
identify-inp-causes
INP 측정항목에 영향을 미치는 느리게 실행되는 JavaScript 식별
사용한 기능:
improve-next-page-load-performance
사용자가 다음에 방문할 가능성이 높은 페이지를 미리 가져오거나 미리 렌더링하여 페이지 로드 성능을 개선합니다.
사용한 기능:
interactions-in-complex-layouts
데이터가 많은 대시보드나 스프레드시트 스타일 그리드와 같은 복잡한 레이아웃에서 레이아웃 재계산을 피하여 상호작용을 더 빠르고 응답성이 높게 만드세요 (다음 페인트에 대한 상호작용 (INP) 점수 감소).
사용한 기능:
optimize-image-priority
최대 콘텐츠 페인트 (LCP) 후보 이미지의 로드 우선순위를 최적화하고 중요하지 않은 이미지의 우선순위를 낮춰 중요한 리소스 로드 지연을 줄입니다.
사용한 기능:
optimize-preload-priority
중요 리소스 로드 지연을 줄이기 위해 미리 로드된 콘텐츠의 상대적 우선순위를 최적화합니다.
사용한 기능:
optimize-script-priority
중요한 비동기 스크립트를 강화하고 불필요하거나 늦은 본문 스크립트의 우선순위를 낮춰 스크립트의 로드 우선순위를 최적화하여 시퀀싱을 개선하고 지연을 줄입니다.
사용한 기능:
resolution-optimized-pseudo-elements
CSS 가상 요소 (예: ::before 및 ::after)에서 해상도에 최적화된 이미지를 사용하여 DOM 노드 수를 줄입니다.
사용한 기능:
schedule-tasks-by-priority
중요한 작업이 먼저 실행되고 백그라운드 작업은 지연되도록 다양한 우선순위로 작업을 예약합니다.
사용한 기능:
sequence-distributed-events
나노초 해상도로 타임스탬프를 기록하여 분산 마이크로서비스 또는 높은 처리량의 추적 환경에서 작업의 로그 및 시퀀스를 확인합니다.
사용한 기능:
user-experience
adapt-scrollbar-to-contrast-preferences
고대비 인터페이스를 선호하는 사용자를 위해 스크롤 막대 가시성 향상
사용한 기능:
anchor-positioning-tab-underline
두 타겟 요소 위치 간에 요소를 원활하게 전환합니다. 예를 들어 이전에 선택한 탭과 현재 선택한 탭 사이에서 선택한 탭 밑줄을 이동합니다.
사용한 기능:
animate-element-entry-exit
DOM에서 요소가 추가/삭제되거나 표시 값이 전환될 때 요소를 부드럽게 숨기거나 표시합니다.
사용한 기능:
animate-to-from-top-layer
대화상자, 팝오버, 툴팁과 같은 요소가 최상위 레이어에 진입하거나 종료될 때 애니메이션을 적용합니다.
사용한 기능:
animate-to-intrinsic-sizes
자연스러운 크기로부터 또는 자연스러운 크기로 대화형 구성요소 (예: 아코디언, 메뉴, 확장 카드)를 부드럽게 애니메이션 처리합니다.
사용한 기능:
apply-webgl-shaders
WebGL 셰이더를 사용하여 HTML 콘텐츠에 맞춤 시각 효과를 적용합니다.
사용한 기능:
calculate-event-differentials
날짜와 시간 사이의 기간과 남은 시간을 계산합니다.
사용한 기능:
calculate-with-intrinsic-sizes
요소의 내재적 크기를 기반으로 크기를 계산하면서 지정된 디자인 제약 조건 내에 맞도록 합니다.
사용한 기능:
capture-location-agnostic-data
생일, 반복 알람, 공휴일 등 사용자의 위치에 따라 변경되지 않아야 하는 시간순 데이터를 기록합니다.
사용한 기능:
carousel-slide-effects
이미지나 기타 시각적 요소가 포함된 슬라이드 캐러셀을 만듭니다. 각 슬라이드는 스크롤러에 진입/중앙/종료할 때 애니메이션으로 표시됩니다. 예를 들어 슬라이드가 페이드 인/페이드 아웃되거나, 회전하거나, 더 커지거나 작아질 수 있습니다.
사용한 기능:
carousel-snap-highlights
스크롤 스냅 캐러셀, 갤러리 또는 전체 페이지 스와이프 환경에서 현재 스냅된 비상호작용 항목을 시각적으로 강조합니다. 예를 들어 스냅할 때 카드를 펼치거나 숨겨진 콘텐츠를 표시합니다.
사용한 기능:
child-state-based-styling
하위 요소 중 하나의 상태에 따라 스타일을 변경하는 구성요소를 빌드합니다. 예를 들어 테마 전환 스위치가 선택되어 있는지에 따라 밝은 모드 또는 어두운 모드로 렌더링되는 구성요소가 있습니다.
사용한 기능:
complex-shapes
요소와 콘텐츠를 기호, 브러시 획, 유기적 텍스처와 같은 자유 형식 모양으로 잘라 더 표현력이 풍부한 디자인을 만들 수 있습니다.
사용한 기능:
component-specific-light-dark-theme
페이지의 색상 구성표와 관계없이 특정 요소 (예: 코드 블록, 미디어 플레이어 등)를 밝은 모드 또는 어두운 모드로 강제 설정합니다.
사용한 기능:
consistent-cross-document-transitions
문서 간 뷰 전환을 시작하기 전에 중요한 페이지 상태가 로드되고 안정적인지 확인하세요. 즉, 전환이 실행되기 전에 중요한 CSS 스타일이 로드되고 적용되며, 중요한 JavaScript가 로드되고 실행되며, 사용자의 페이지 초기 보기에 표시되는 HTML이 파싱됩니다.
사용한 기능:
content-based-styling
특정 하위 요소의 포함 여부에 따라 레이아웃이 변경되는 구성요소를 빌드합니다. 예를 들어 구성요소에 이미지가 포함된 경우 다중 열 레이아웃을 사용하고, 그렇지 않은 경우 단일 열 레이아웃을 기본값으로 사용합니다.
사용한 기능:
coordinate-global-events
일광 절약 시간 (DST) 전환, 시계 변경 중 '건너뛴' 또는 '반복된' 시간과 관계없이 이벤트 시간이 정확하게 유지되도록 지리적 IANA 시간대에 명시적으로 바인딩하여 향후 회의 또는 이벤트를 예약합니다.
사용한 기능:
cross-document-transitions
크로스페이드, 맞춤 공개 효과, 한 페이지에서 다음 페이지로 콘텐츠 변환과 같은 전체 페이지 탐색 간에 부드럽고 원활한 전환을 만듭니다.
사용한 기능:
customize-scrollbar-color-and-thickness
스크롤 막대의 색상 또는 두께 맞춤설정
사용한 기능:
dark-mode
사용자의 밝은/어두운 테마 환경설정을 존중하고 브라우저 UI (예: 스크롤바, 양식 컨트롤 등)를 조정하는 방식으로 어두운 모드 지원을 구현합니다.
사용한 기능:
declarative-button-actions
선언적 버튼 명령어, 호출자 명령어, 버튼 명령어, 맞춤 명령어 또는 선언적 전환 작업을 사용하여 버튼을 요소에 선언적으로 연결하여 맞춤 애플리케이션별 작업을 트리거합니다.
사용한 기능:
declarative-dialog-popover-control
JavaScript를 작성하지 않고 버튼에서 대화상자 또는 팝오버의 표시 상태를 전환합니다.
사용한 기능:
deliver-optimized-decorative-images
브라우저가 사용자 기기 기능에 맞는 최적의 파일 크기와 시각적 품질을 동적으로 협상할 수 있도록 여러 픽셀 밀도 (예: 1x 및 2x)와 함께 차세대 이미지 형식 (예: AVIF 또는 WebP)을 동시에 제공하여 최적화된 장식 이미지 (예: 배경, UI 아이콘 또는 복잡한 마스크)를 제공합니다.
사용한 기능:
design-token-reactivity
밀도 모드 (컴팩트, 넓게, 여유롭게) 또는 테마와 같은 고차 설계 토큰을 정의하고 하위 구성요소가 변경사항에 직접 반응하고 구성요소에 적합한 방식으로 반응하도록 합니다.
사용한 기능:
directional-navigation-transitions
사용자의 탐색 흐름 방향을 반영하도록 시각적 상태 변경을 애니메이션으로 표시합니다(예: 앞으로 이동할 때는 오른쪽에서 새 콘텐츠를 슬라이드하고 이전 화면으로 돌아갈 때는 왼쪽에서 슬라이드).
사용한 기능:
dynamic-sibling-animations
형제 요소 간에 애니메이션 또는 전환 타이밍을 엇갈리게 하여 각 요소가 형제 목록에서의 위치에 따라 계산된 지연 시간 후에 시작되도록 합니다.
사용한 기능:
dynamic-sibling-styling
그룹의 요소 수에 따라 자동으로 조정되는 동적 시각적 스펙트럼 또는 레이아웃 배열을 만듭니다.
사용한 기능:
export-html-media-from-canvas
캔버스 내에서 동적 HTML 콘텐츠를 이미지 또는 동영상 프레임으로 캡처하고 내보냅니다.
사용한 기능:
expose-canvas-content-to-browser-features
캔버스에 렌더링된 콘텐츠를 보조 기술, 번역, 읽기 모드와 같은 브라우저 기능에 노출합니다.
사용한 기능:
flicker-free-client-side-ab-testing
클라이언트 측 JavaScript를 사용하여 A/B 테스트, 다변량 테스트 또는 기타 실험을 제공하고 렌더링하여 실험 콘텐츠를 표시하기 위해 깜박이거나 번쩍이기 전에 원래 콘텐츠가 먼저 표시되지 않고 HTML, CSS, JavaScript를 변경하거나 삽입합니다.
사용한 기능:
fluid-scaling
고정된 중단점을 사용하는 대신 상위 컨테이너의 크기에 따라 글꼴 크기, 간격, 미디어 크기와 같은 항목을 원활하게 조정합니다.
사용한 기능:
format-human-readable-durations
경과 시간 또는 기간을 읽기 쉽고 현지화된 형식으로 사용자에게 표시합니다. 상황에 따라 세부 단위 분류 (예: '1시간 30분') 또는 총 단위 수 (예: '90분')를 유연하게 표시할 수 있습니다.
사용한 기능:
group-element-transitions
장바구니에서 제품을 삭제하고 다른 모든 제품이 새 위치로 애니메이션 처리되는 등 동일한 전환 로직을 사용하여 유사한 요소 그룹을 동시에 전환합니다.
사용한 기능:
improve-text-layout-and-legibility
브라우저가 텍스트를 래핑할 때 균형 잡힌 줄바꿈을 적용할 수 있도록 하여 몇 줄을 넘지 않는 제목과 같은 짧은 독립형 텍스트 콘텐츠의 레이아웃과 가독성을 개선합니다.
사용한 기능:
individual-transform-properties
단일 요소의 다른 변환 속성과 독립적으로 개별 CSS 변환 속성 (예: translate, rotate, scale)을 애니메이션으로 만들거나 재정의합니다.
사용한 기능:
interactive-content-in-3d-scenes
양방향 HTML 요소를 3D 장면으로 통합합니다.
사용한 기능:
interactive-content-reveal
사용자의 포인터를 따라 이미지 또는 UI 섹션 내 세부정보를 표시하는 스포트라이트와 같은 대화형 표시 효과를 만듭니다.
사용한 기능:
interest-triggered-action-previews
사용자가 관심 신호 (예: 마우스 오버, 포커스, 길게 누르기)를 보내지만 클릭을 커밋하기 전에 버튼 효과의 실시간 미리보기를 표시합니다.
사용한 기능:
interest-triggered-tooltips
사용자가 클릭하지 않아도 상호작용 요소 위로 마우스를 가져가거나, 요소를 포커스하거나 길게 누르면 도움말 또는 보충 정보를 표시합니다.
사용한 기능:
light-dismiss-a-dialog
가벼운 닫기 (예: 대화상자 외부 클릭 또는 탭)를 사용하여 닫을 수 있는 모달 대화상자 만들기
사용한 기능:
manage-recurring-intervals
정기 결제 청구 또는 급여 주기의 반복 간격을 계산하고, 월말 전환 (예: 1월 31일에 1개월 추가)과 같은 특이 사례를 자동으로 조정하여 정확한 기간을 계산합니다.
사용한 기능:
model-partial-time-concepts
계산 오류를 유발하는 임의의 자리표시자 값을 사용하지 않고 표준 구성요소 (예: 특정 연도, 일 또는 날짜)가 본질적으로 부족한 날짜 및 시간 개념을 모델링합니다.
사용한 기능:
move-dom-element-without-losing-state
상호작용 상태 (:focus/:active), <iframe> 로드 상태, 애니메이션/전환 상태 등 중요한 요소 상태를 손실하지 않고 DOM 요소를 이동하거나 부모를 변경합니다.
사용한 기능:
navigation-drawer
메뉴 버튼에서 트리거될 때 기존 페이지 콘텐츠 위에 오버레이되어 측면에서 슬라이드 인되고, 닫을 때 (스와이프하거나, 외부를 탭하거나, Esc 키를 눌러) 슬라이드 아웃되는 탐색 창 구성요소를 만드세요.
사용한 기능:
inertintersection-observerpopoverregistered-custom-propertiesscroll-driven-animationsscroll-initial-targetscroll-snap
overflow-clipping-control
콘텐츠 가장자리, 패딩 가장자리, 테두리 가장자리 또는 이러한 가장자리에서 지정된 오프셋에 맞게 요소의 표시되는 클리핑 경계를 조정하여 콘텐츠가 잘리는 방식을 더 세밀하게 제어할 수 있습니다.
사용한 기능:
parallax-scroll-effects
사용자가 스크롤할 때 전경 레이어와 배경 레이어가 서로 다른 속도로 움직여 깊이감을 연출하는 스크롤 기반 효과 (예: 패럴랙스)를 만듭니다.
사용한 기능:
persistent-app-tours
사용자 상호작용 중에 열린 상태로 유지되는 테더링된 네이티브 오버레이를 사용하여 지속적인 온보딩 둘러보기를 만드세요.
사용한 기능:
persistent-toast-notifications
지속적이고 스택 가능한 메시지 및 상태 통신을 위해 방해되지 않는 토스트 및 오버레이 알림을 만듭니다.
사용한 기능:
persistent-top-layer-ui
기본 DOM 노드가 DOM에서 이동되거나 다시 상위 요소가 지정될 때 모달 대화상자, 전체 화면 요소 또는 기본 팝업이 눈에 띄게 열려 있고 기능적으로 활성 상태를 유지합니다.
사용한 기능:
physics-based-easing
바운스, 스프링과 같은 맞춤형 물리 기반 애니메이션 및 전환 효과를 만들어 기존의 이징 곡선보다 더 자연스럽고 매력적인 효과를 연출할 수 있습니다.
사용한 기능:
platform-controls-dismiss-dialog
데스크톱 플랫폼에서 Esc 키를 누르거나 모바일 플랫폼에서 '뒤로' 또는 '닫기' 동작과 같은 표준 플랫폼별 사용자 동작을 사용하여 닫을 수 있는 모달 대화상자를 만듭니다.
사용한 기능:
position-aware-tooltips
요소가 대체 위치로 전환될 때 올바른 방향을 자동으로 가리키는 방향 화살표 (또는 기타 시각적 스타일)가 있는 도움말과 팝오버를 빌드합니다.
사용한 기능:
precise-text-alignment
모든 글꼴의 텍스트를 사용하여 정확한 세로 정렬을 달성합니다. 예를 들어 텍스트 위아래의 시각적 패딩이 정확히 동일하거나 텍스트가 인접한 아이콘 또는 이미지와 완벽하게 정렬됩니다.
사용한 기능:
prevent-text-wrapping
브라우저가 텍스트에 줄바꿈을 삽입하지 않고 텍스트가 컨테이너를 오버플로하도록 허용해야 합니다.
사용한 기능:
pull-to-reveal
사용자가 화면을 아래로 드래그하여 검색창과 같은 콘텐츠를 더 많이 표시할 수 있는 드래그하여 표시 기능을 빌드합니다.
사용한 기능:
reduce-style-repetition
복잡하거나 동적인 스타일 지정 로직을 재사용 가능한 함수 (예: 입력 매개변수 집합을 기반으로 그라데이션을 계산하는 함수)로 캡슐화하여 과도한 스타일 반복을 줄입니다.
사용한 기능:
resilient-context-menus-and-nested-dropdowns
특정 UI 요소에 연결해야 하는 접근성 및 반응형 메뉴, 툴팁, 드롭다운 또는 컨텍스트 오버레이를 빌드하여 뷰포트 가장자리에 도달하면 오버레이가 자동으로 위치를 변경 (예: 축 뒤집기)하여 잘리지 않도록 보장합니다.
사용한 기능:
same-document-transitions
크기, 위치 또는 기타 스타일 속성을 부드럽게 변형하여 단일 페이지 애플리케이션 (SPA)의 다양한 페이지 상태 또는 탐색에서 지속되는 요소를 시각적으로 연결합니다(예: 제품 썸네일을 전체 너비 히어로 이미지로 확장).
사용한 기능:
scroll-entry-exit-effects
사용자가 스크롤하는 동안 요소가 스크롤포트 (또는 뷰포트)에 들어가고 나갈 때 페이드인, 스케일업 또는 기타 복잡한 표시 유형 효과를 만듭니다.
사용한 기능:
scroll-position-aware-elements
사용자가 스크롤했는지 여부에 따라 표시되거나 사라지는 플로팅 버튼 또는 위젯 (상단으로 이동, 하단으로 스크롤, 채팅 실행기 등)을 빌드합니다.
사용한 기능:
scroll-progress-indicator
스크롤 진행률 표시줄, 단계별 진행률 추적기 또는 사용자가 페이지나 섹션을 얼마나 스크롤했는지 알려주는 시각적 어포던스를 만듭니다.
사용한 기능:
scroll-snap-realtime-feedback
사용자가 스크롤 동작을 완료하기 전에 스냅 정렬된 콘텐츠를 스크롤하는 동안 연결된 UI 요소에 실시간 시각적 피드백을 제공합니다.
사용한 기능:
scroll-snap-state-sync
스크롤 가능한 컨테이너에서 활성 상태로 스냅된 항목과 탐색 표시기, 연결된 콘텐츠 패널, 분석 추적을 동기화합니다.
사용한 기능:
scroll-target-on-load
초기 렌더링 시 특정 요소가 스크롤되어 표시될 수 있는 스크롤 가능한 요소 목록 (예: 이미지 캐러셀 또는 채팅 대화 스레드)을 빌드합니다.
사용한 기능:
scrollability-affordance-hints
해당 방향으로 스크롤할 콘텐츠가 실제로 더 있는 경우에만 표시되는 스크롤 그림자 오버레이, 그라데이션 페이드 또는 방향 화살표 표시기를 빌드합니다.
사용한 기능:
scrollytelling
완전히 다른 요소의 스크롤포트 위치에 의해 완전히 구동되는 타겟 요소의 시각적 속성(예: 배경을 페이드하거나 배경색을 변경하거나 스크롤텔링 환경을 만드는 등)을 애니메이션화합니다.
사용한 기능:
search-hidden-content
아코디언, 탭, '더보기' 섹션과 같은 패턴을 사용하여 콘텐츠를 숨기면서 숨겨진 텍스트가 네이티브 '페이지에서 찾기' 검색 중에 표시되도록 하고, 검색엔진 색인 생성을 허용하고, URL 프래그먼트 딥 링크를 지원하고, ARIA 접근성을 유지합니다.
사용한 기능:
shaped-cutouts
여러 도형을 결합하여 요소에 복잡한 컷아웃이나 '녹아웃' 효과를 만들 수 있습니다(예: 요소에 노치를 추가).
사용한 기능:
shrinking-header-on-scroll
스크롤 시 고정 헤더 또는 전체 페이지 커버를 부드럽게 애니메이션 처리하여 미리 정의된 스크롤 거리에서 동적으로 축소하고, 그림자를 얻고, 레이아웃을 변환합니다.
사용한 기능:
size-aware-styling
표시 영역의 너비나 높이가 아닌 자체 너비나 높이에 따라 스타일이 조건부로 달라질 수 있는 구성요소를 빌드합니다. 예를 들어 크기에 따라 레이아웃을 변경할 수 있는 카드 구성요소나 너비에 따라 도우미 텍스트를 조건부로 표시할 수 있는 클릭 유도 문구 버튼이 있습니다.
사용한 기능:
soft-edge-content-fade
투명도 그라데이션을 콘텐츠 가장자리에 적용하여 스크롤 가능한 영역을 추가로 표시하거나 페이월로 보호된 텍스트를 가립니다.
사용한 기능:
stabilize-reactive-state
공유된 변경 가능한 상태로 인한 예상치 못한 부작용 없이 데이터 기반 뷰에서 작업 마감일 또는 일정을 관리합니다.
사용한 기능:
stack-drill-down
사용자가 중첩된 뷰로 드릴다운하고 뒤로 스와이프하거나 탐색하여 돌아갈 수 있는 전체 화면 계층적 탐색을 빌드하세요. 브라우저 기록은 동기화된 상태로 유지됩니다.
사용한 기능:
style-parent-with-has
필드가 잘못된 경우 양식 필드의 상위 요소 (예: 라벨 또는 필드셋)에 스타일을 지정합니다.
사용한 기능:
support-global-calendar-systems
해외 사용자를 위해 그레고리력 이외의 캘린더 시스템 (예: 이슬람력, 히브리력, 중국력)의 날짜를 정확하게 표시하고 계산합니다.
사용한 기능:
swipe-to-remove
사용자가 가로 스와이프 동작으로 목록의 항목을 처리 (삭제, 보관처리, 읽은 상태로 표시 등)하여 별도의 컨트롤을 탭하지 않고도 항목을 빠르게 처리할 수 있도록 합니다.
사용한 기능:
scroll-snapscroll-initial-targetoverscroll-behaviorscrollbar-widthintersection-observermutationobserverresize-observerweb-animations
visually-stable-font-fallbacks
기본 글꼴과 대체 글꼴 중 하나 간에 전환이 발생하는 경우 (또는 그 반대의 경우) 텍스트가 읽기 쉽고 시각적으로 일관되도록 글꼴 스타일을 정의합니다.
사용한 기능:
visually-stable-mixed-fonts
여러 글꼴이 단일 텍스트 블록을 렌더링하는 데 사용되는 상황에서 텍스트가 읽기 쉽고 시각적으로 일관되도록 글꼴 스타일을 정의합니다.
사용한 기능:
visually-texture-content
요소에 사실적인 풍화 및 텍스처 패턴을 적용하여 유기적, 오래된 또는 물리적 재질 모양을 부여합니다.
사용한 기능:
webmcp
agentic-forms
표준 HTML 양식에 WebMCP 속성을 주석으로 추가하여 클라이언트 측 기능을 AI 에이전트에 도구로 노출합니다.
사용한 기능:
agentic-javascript-tools
WebMCP 명령형 API를 사용하여 클라이언트 측 JavaScript 함수를 AI 에이전트의 도구로 프로그래매틱 방식으로 등록합니다.
사용한 기능: