Modern Web Guidance 가이드

고대비 인터페이스를 선호하는 사용자를 위해 스크롤바 가시성 향상

WebGL 셰이더를 사용하여 HTML 콘텐츠에 맞춤 시각 효과를 적용합니다.

대비 요구사항, 밝은 색 구성표와 어두운 색 구성표, 강제 색상 모드, 기본 색상에서 색조 및 음영 생성 등 웹을 위한 색상 가이드입니다.

요소와 콘텐츠를 기호, 브러시 스트로크, 유기적 질감과 같은 자유 형식으로 잘라내어 더 표현력 있는 디자인을 만들 수 있습니다.

밑줄, 윗줄, 취소선 또는 완전히 맞춤설정된 도형과 같은 텍스트 장식을 추가하고, 표시 애니메이션, 맞춤 오프셋 및 끝 인셋, 유연한 잉크 건너뛰기를 사용할 수 있습니다.

스크롤바의 색상 또는 두께 맞춤설정하기

사용자의 밝은/어두운 테마 환경설정을 존중하고 브라우저 UI (예: 스크롤바, 양식 컨트롤 등)를 조정하는 방식으로 어두운 모드 지원을 구현합니다.

대화형 HTML 요소를 3D 장면에 통합합니다.

동적 배경 색상과 충분히 대비되는 가독성 높은 텍스트 색상을 선택합니다.

포스터 스타일이나 누적 광고 제목 서체와 같이 여러 줄로 된 제목 또는 로고의 모든 줄이 동일한 너비로 표시되도록 합니다. 양쪽 맞춤 텍스트와 달리 텍스트 자체의 크기가 간격이 늘어나는 것이 아니라 너비에 맞게 조정됩니다.

캔버스 내에서 동적 HTML 콘텐츠를 이미지 또는 동영상 프레임으로 캡처하고 내보냅니다.

캔버스에서 렌더링된 콘텐츠를 보조 기술, 번역, 읽기 모드와 같은 브라우저 기능에 노출합니다.

브라우저가 텍스트를 줄바꿈할 때 균형 잡힌 줄바꿈을 적용하도록 하여 몇 줄 이내의 제목과 같은 짧은 독립형 텍스트 콘텐츠의 레이아웃과 가독성을 개선합니다.

모든 글꼴의 텍스트를 정확하게 세로로 정렬할 수 있습니다. 예를 들어 텍스트 위아래에 정확히 동일한 시각적 패딩을 적용하거나 인접한 아이콘 또는 이미지와 완벽하게 일치하도록 텍스트를 정렬합니다.

여러 도형을 결합하여 요소에 노치를 추가하는 등 요소에 복잡한 컷아웃 또는 '녹아웃' 효과를 만듭니다.

콘텐츠 가장자리에 투명도 그라데이션을 적용하여 스크롤 가능한 영역을 더 표시하거나 유료 텍스트를 가립니다.

텍스트 선택, 스크롤바, 양식 컨트롤, 선택 도구와 같은 브라우저 생성 UI를 맞춤 요소로 다시 만드는 대신 CSS로 테마를 지정합니다.

글꼴 크기 단위, 줄 높이, 텍스트 줄바꿈 및 균형, 표시 영역에 따라 확장되는 유동적인 유형을 비롯한 웹용 서체 권장사항입니다.

레이어드 그림자, 블렌드 모드, 예측 가능한 색상 보간이 있는 그라데이션, 그라데이션만으로 만든 줄무늬, 체크무늬, 점, 원형 차트와 같은 패턴 등 CSS를 사용한 시각 효과

기본 글꼴과 대체 글꼴 중 하나가 서로 바뀌더라도 텍스트를 읽을 수 있고 시각적으로 일관되도록 글꼴 스타일을 정의합니다.

여러 글꼴을 사용하여 단일 텍스트 블록을 렌더링하는 상황에서 텍스트를 읽을 수 있고 시각적으로 일관되도록 글꼴 스타일을 정의합니다.

요소에 사실적인 풍화 및 질감 패턴을 적용하여 자연스럽고 오래된 느낌 또는 물리적 소재의 외관을 부여합니다.

스크롤 진행률 표시줄, 단계별 진행률 추적기 또는 사용자가 페이지나 섹션을 얼마나 스크롤했는지 알려주는 시각적 어포던스를 만듭니다.

이미지 또는 기타 시각적 요소가 포함된 슬라이드 캐러셀을 만듭니다. 각 슬라이드는 스크롤러에 들어가거나, 중앙에 오거나, 나갈 때 애니메이션으로 표시됩니다. 예를 들어 슬라이드가 페이드 인/페이드 아웃되거나, 회전하거나, 커지거나 작아질 수 있습니다.

페이지의 색 구성표와 관계없이 특정 요소 (예: 코드 블록, 미디어 플레이어 등)를 밝은 모드 또는 어두운 모드로 강제 설정합니다.

요소가 대체 위치로 전환될 때 올바른 방향을 자동으로 가리키는 방향 화살표 (또는 기타 시각적 스타일)를 사용하여 도움말과 팝오버를 빌드합니다.

사용자가 화면을 아래로 당겨 검색창과 같은 더 많은 콘텐츠를 표시할 수 있는 당겨서 표시하기 기능을 빌드합니다.

적절한 헤더 시맨틱스로 테이블 형식 데이터를 표시하고 작은 화면과 보조 기술에서도 읽기 쉽고 탐색 가능한 데이터 테이블을 빌드합니다.

사용자가 스크롤했는지 여부에 따라 표시되거나 사라지는 플로팅 버튼 또는 위젯 (맨 위로 돌아가기, 맨 아래로 스크롤, 채팅 런처 등)을 빌드합니다.

해당 방향으로 스크롤할 콘텐츠가 실제로 더 있는 경우에만 표시되는 스크롤 그림자 오버레이, 그라데이션 페이드 또는 방향 화살표 표시기를 빌드합니다.

스크롤 시 고정 헤더 또는 전체 페이지 커버에 부드러운 애니메이션을 적용하여 미리 정의된 스크롤 거리에 따라 동적으로 축소하고, 그림자를 추가하고, 레이아웃을 변환합니다.

실제로 상단에 '고정'될 때 시각적으로 변형되어 색 구성표를 변경하거나 그림자를 추가하는 고정 섹션 헤더 또는 탐색 메뉴를 빌드합니다.

CSS에서 설정하고 매개변수화할 수 있고, 빠르게 로드되며, 어떤 해상도에서도 선명하고, 보조 기술에 적절하게 노출되거나 숨겨지는 아이콘을 표시하고 관리합니다.

트리거 버튼에 연결된 드롭다운, 플라이아웃 또는 상황별 작업 패널을 배치하여 표시 영역 가장자리에서 잘리지 않고 자동으로 축을 뒤집습니다.

사용 가능한 공간과 콘텐츠에 맞게 표시를 조정하는 카드 구성요소를 빌드합니다.

중첩된 하위 메뉴를 지원하는 옵션 또는 작업 목록을 표시하는 메뉴 구성요소를 빌드합니다.

탐색 메뉴에서 현재 표시되는 페이지 섹션 강조 표시

확정 상태와 미확정 상태 모두에서 작업 또는 프로세스의 완료를 전달하는 스타일이 지정된 진행률 표시줄을 빌드합니다.

특정 유형의 링크 (예: 사용자 프로필) 위로 마우스를 가져가면 이동할 페이지의 대화형 구조화된 미리보기를 표시하는 호버 카드 구성요소를 빌드합니다.

사용자 상호작용 중에 열린 상태로 유지되는 테더링된 네이티브 오버레이를 사용하여 영구 온보딩 둘러보기를 만듭니다.

지속적이고 누적 가능한 메시지 및 상태 통신을 위해 방해가 되지 않는 토스트 메시지 및 오버레이 알림을 만듭니다.

사용자가 현재 사이트의 시스템 색 구성표 환경설정을 재정의할 수 있는 어두운 모드 전환 구성요소를 빌드합니다.

액세스 가능하고, 포커스를 적절하게 관리하며, 각 플랫폼에서 사용자가 예상하는 방식으로 닫을 수 있는 모달 또는 비모달 대화상자 구성요소를 빌드합니다.

모든 사용자에게 사용 중 상태를 전달하고, 모션 감소 환경설정을 준수하며, 효율적으로 애니메이션을 적용하는 로딩 스피너를 빌드합니다.

메뉴 버튼에서 트리거되면 기존 페이지 콘텐츠 위에 오버레이된 측면에서 슬라이드하고, 닫으면 (스와이프, 외부 탭, Esc 키 누르기) 슬라이드 아웃되는 탐색 창 구성요소를 만듭니다.

중앙의 콘텐츠와 브랜드 일관성을 유지하는 스타일을 지원하여 작업 또는 프로세스의 완료 상태를 시각적으로 나타내는 달성률 링 구성요소를 빌드합니다.

사용자가 중첩된 뷰로 드릴다운하고 스와이프하거나 뒤로 이동하여 돌아갈 수 있는 전체 화면 계층 구조 탐색을 빌드하고 브라우저 방문 기록을 동기화 상태로 유지합니다.

맞춤 아이콘, 레이아웃, 색상, 선택/선택 해제 애니메이션을 포함한 체크박스 스타일을 지정하면서 네이티브 기능과 접근성을 유지합니다.

사용자가 스크롤하는 동안 요소가 스크롤포트 (또는 표시 영역)에 들어가고 나갈 때 페이드 인, 확대 또는 기타 복잡한 표시 유형 효과를 만듭니다.

두 타겟 요소 위치 간에 요소를 원활하게 전환합니다. 예를 들어 이전에 선택한 탭과 현재 선택한 탭 간에 선택한 탭 밑줄을 이동합니다.

DOM에서 요소가 추가/삭제되거나 표시 값이 전환될 때 요소를 부드럽게 숨기거나 표시합니다.

대화상자, 팝오버, 도움말과 같은 요소가 최상위 레이어에 들어오거나 나갈 때 애니메이션을 적용합니다.

페이지에서 플로팅 요소를 이동하기 위해 드래그를 지원합니다.

사용자가 스크롤할 때 전경 레이어와 배경 레이어가 서로 다른 속도로 움직여 깊이감을 주는 스크롤 기반 효과 (예: 패럴랙스)를 만듭니다.

스크롤 스냅 캐러셀, 갤러리 또는 전체 페이지 스와이프 환경에서 현재 스냅된 비대화형 항목을 시각적으로 강조 표시합니다. 예를 들어 스냅 시 카드를 펼치거나 숨겨진 콘텐츠를 표시할 수 있습니다.

교차 문서 뷰 전환을 시작하기 전에 중요한 페이지 상태가 로드되고 안정적인지 확인합니다. 즉, 전환이 실행되기 전에 중요한 CSS 스타일이 로드 및 적용되고, 중요한 자바스크립트가 로드 및 실행되며, 사용자의 초기 페이지 보기에 표시되는 HTML이 파싱됩니다.

형제 요소 간에 애니메이션 또는 전환 타이밍을 시차를 두고 적용하여 각 요소가 형제 목록에서의 위치에 따라 계산된 지연 시간 후에 시작되도록 합니다.

크로스페이드, 맞춤 표시 효과, 한 페이지에서 다음 페이지로의 콘텐츠 변형과 같은 전체 페이지 탐색 간에 원활하고 매끄러운 전환을 만듭니다.

선언적 버튼 명령어, 호출자 명령어, 버튼 명령어, 맞춤 명령어 또는 선언적 전환 작업을 사용하여 맞춤 애플리케이션별 작업을 트리거하도록 버튼을 모든 요소에 선언적으로 연결합니다.

JavaScript를 작성하지 않고 버튼에서 대화상자 또는 팝오버의 공개 상태를 전환합니다.

사용자의 탐색 흐름 방향을 반영하도록 시각적 상태 변경을 애니메이션화합니다. 예를 들어 앞으로 이동할 때는 오른쪽에서 새 콘텐츠를 슬라이드하고 이전 화면으로 돌아갈 때는 왼쪽에서 새 콘텐츠를 슬라이드합니다.

장바구니에서 제품을 삭제하고 다른 모든 제품을 새 위치로 애니메이션하는 것과 같이 동일한 전환 로직을 사용하여 유사한 요소 그룹을 동시에 전환합니다.

검색 결과, 맞춤법 오류, 공동작업 수정 커서와 같은 페이지의 임의의 텍스트 범위를 강조 표시합니다.

사용자의 포인터를 따라 이미지 또는 UI 섹션 내의 세부정보를 표시하는 스포트라이트와 같은 대화형 표시 효과를 만듭니다.

사용자가 관심을 표시할 때 (예: 마우스 오버, 포커스, 길게 누르기) 클릭하기 전에 버튼 효과의 실시간 미리보기를 표시합니다.

라이트 닫기 (즉, 대화상자 외부를 클릭하거나 탭)를 통해 닫을 수 있는 모달 대화상자를 만듭니다.

컴포지터에서 모션을 유지하고 모션 감소 환경설정을 준수하면서 CSS 전환, 애니메이션, 스크롤 기반 애니메이션, 뷰 전환을 사용하여 UI에 애니메이션을 적용합니다.

상호작용 상태 (:focus/:active), <iframe> 로드 상태, 애니메이션/전환 상태 등 중요한 요소 상태를 잃지 않고 DOM 요소를 이동하거나 상위 요소를 변경합니다.

기본 DOM 노드가 DOM에서 이동되거나 상위 요소가 변경될 때 모달 대화상자, 전체 화면 요소 또는 네이티브 팝오버를 시각적으로 열고 기능적으로 활성 상태로 유지합니다.

기존의 이징 곡선보다 더 자연스럽고 매력적인 바운스, 스프링과 같은 맞춤형 물리학 기반 애니메이션 및 전환 효과를 만듭니다.

데스크톱 플랫폼에서 Esc 키를 누르거나 모바일 플랫폼에서 '뒤로' 또는 '닫기' 동작과 같은 표준 플랫폼별 사용자 작업을 통해 닫을 수 있는 모달 대화상자를 만듭니다.

모달 대화상자가 열려 있는 동안 기본 페이지가 스크롤되지 않도록 합니다.

단일 페이지 애플리케이션 (SPA)에서 다양한 페이지 상태 또는 탐색 전반에 걸쳐 지속되는 요소를 시각적으로 연결합니다(예: 제품 썸네일을 전체 블리드 히어로 이미지로 확장). 크기, 위치 또는 기타 스타일 속성을 부드럽게 변형합니다.

페이지의 나머지 부분은 상호작용이 가능한 상태로 유지되고 다른 전환이 동시에 실행되는 동안 단일 구성요소 (카드, 목록, 패널 또는 기타 하위 트리) 내에서 상태 변경을 애니메이션화합니다.

사용자가 스크롤 동작을 완료하기 전에 스냅 정렬된 콘텐츠를 스크롤하는 동안 연결된 UI 요소에서 실시간 시각적 피드백을 제공합니다.

스크롤 가능한 컨테이너에서 활성 상태로 스냅된 항목과 탐색 표시기, 연결된 콘텐츠 패널, 분석 추적을 동기화합니다.

완전히 다른 요소의 스크롤포트 위치에 따라 타겟 요소의 시각적 속성(예: 배경 페이드, 배경 색상 변경, 스크롤리텔링 환경 만들기)에 애니메이션을 적용합니다.

아코디언, 탭, '더보기' 섹션과 같은 패턴을 사용하여 콘텐츠를 숨기되, 숨겨진 텍스트가 기본 '페이지에서 찾기' 검색 중에 표시되고, 검색엔진 색인 생성을 허용하고, URL 프래그먼트 딥 링크를 지원하고, ARIA 접근성을 유지하도록 합니다.

초기 렌더링 시 특정 요소가 표시되도록 스크롤할 수 있는 요소의 스크롤 가능한 목록 (예: 이미지 캐러셀 또는 채팅 대화 대화목록)을 빌드합니다.

사용자가 상호작용 요소 위로 마우스를 가져가거나, 포커스를 두거나, 길게 누르면 클릭하지 않아도 도움말이나 추가 정보가 표시됩니다.

다양한 레이아웃 모드 (그리드 등)에서 올바르게 작동하는 화살표 키를 사용하여 접근성 높은 공간 탐색을 구현합니다.

사용자가 가로 스와이프 동작으로 목록의 항목에 대해 작업 (삭제, 보관처리, 읽음으로 표시 등)을 수행할 수 있도록 하여 별도의 컨트롤을 탭하지 않고도 항목을 빠르게 처리할 수 있도록 합니다.

사용자가 목록 항목 또는 콘텐츠 창을 가로로 스와이프하여 작업을 자동으로 트리거하지 않고도 상황별 작업 버튼이나 측면 메뉴를 표시할 수 있습니다.

타겟 요소로의 부드러운 프로그래매틱 스크롤이 완료된 후에만 타겟 요소에서 시각 효과, 애니메이션 또는 포커스 변경을 트리거합니다.

사용자가 동작을 단일 가로 또는 세로 축으로 고정하지 않고도 양방향 (대각선 또는 동작 중간에 방향 변경)으로 지도, 확대된 이미지, 무한 캔버스, 대규모 데이터 그리드와 같은 2차원 표면을 자유롭게 화면 이동하거나 스크롤할 수 있도록 허용합니다.

드롭다운에 애니메이션이 적용된 맞춤 선택 구성요소를 만듭니다. 예를 들어 메뉴가 페이드되거나 슬라이드되어 표시되거나 선택 시 옵션에 애니메이션이 적용됩니다.

체크박스, 라디오 버튼, 범위 슬라이더, 진행률 표시줄을 맞춤 구성요소로 대체하지 않고 사이트의 색상 팔레트와 일치시킵니다.

기본 기능과 접근성을 유지하면서 맞춤 트랙, 엄지손가락, 채우기, 포커스 상태로 기본 범위 슬라이더의 스타일을 지정합니다.

버튼, 선택 도구, 화살표 아이콘, 체크표시가 모두 브랜드 또는 디자인 시스템의 서체, 색상, 간격, 테두리 처리와 원활하게 일치하는 맞춤 선택 요소를 만듭니다.

올바른 자동 완성 값과 자동 완성 지원을 통해 카드 세부정보를 수집하는 결제 양식을 빌드합니다.

올바른 자동 완성 값과 자동 완성 지원을 사용하여 로그인 양식을 빌드합니다.

올바른 자동 완성 값과 자동 완성 지원을 사용하여 가입 양식을 만듭니다.

네이티브 HTML 스위치 속성을 사용하여 접근성 높은 스위치를 빌드하고, 지원되지 않는 경우 스타일이 지정된 체크박스로 대체합니다.

올바른 자동 완성 속성과 자동 완성 지원을 사용하여 주소 양식을 빌드합니다.

기존의 누적된 옵션 목록이 아닌 독특하거나 흥미로운 방식으로 옵션이 배치된 맞춤 선택 선택 도구를 만듭니다.

사용자가 입력하거나 다른 옵션을 선택할 때 사용자 입력에 맞게 양식 입력란이 늘어나거나 줄어들도록 허용합니다. 최대 및 최소 크기 제한을 적용하여 페이지 디자인에 맞는 동적 및 반응형 양식 필드를 만듭니다.

접근성, 보안, 사용자 친화적인 웹 양식을 빌드하기 위한 권장사항 양식, 입력, 제출 흐름을 만들거나 수정할 때 이 가이드를 사용하세요.

CSS를 사용하여 브라우저에서 자동 완성되고 사용자가 수정하지 않은 양식 입력란을 강조 표시합니다.

IME (입력기) 사용자가 불완전한 텍스트를 제출하지 않도록 텍스트 영역 및 한 줄 입력 (채팅, 검색, 인라인 이름 바꾸기)에 Enter 키를 눌러 제출하는 기능을 안전하게 구현합니다.

사용자 상호작용 후에만 건너뛰거나 비워 둔 필수 양식 입력란에 대한 오류 메시지를 제공하여 선제적 오류를 방지하고 사용자 흐름과 관련하여 시의적절하고 맥락에 맞는 피드백을 제공합니다.

일반 텍스트가 아닌 복잡한 HTML 형식 (예: 이미지, 아이콘, 기타 서식 있는 텍스트)을 포함할 수 있는 옵션이 있는 맞춤 선택 구성요소를 만듭니다.

사용자가 컨트롤과 상호작용한 후에만 선택 메뉴에서 기본값이 아닌 옵션이 선택되었는지 확인합니다.

자동 코드 추출 및 액세스 가능한 양식 입력을 통해 SMS로 전송된 사용자 전화번호와 일회용 비밀번호를 인증합니다.

사용자가 초기 상호작용을 완료한 후에만 양식 필드 유효성 검사 피드백 (예: 비밀번호 복잡성 또는 이메일 형식 요구사항)을 표시하여 페이지 로드 시 또는 사용자가 입력하는 동안 조기 오류가 발생하지 않도록 합니다.

ElementInternals ARIA mixin을 통해 역할과 ARIA 상태를 설정하고, delegatesFocus로 포커스를 관리하고, 단일 shadow root 내에서 ARIA 관계를 유지하여 기본적으로 맞춤 요소를 액세스 가능하게 만듭니다.

생성자 규칙, 수명 주기 콜백, 업그레이드 타이밍, 속성/속성 반영, 이름 지정 규칙을 포함하여 자율 커스텀 요소의 수명 주기를 정의, 등록, 관리합니다.

formAssociated 및 ElementInternals를 사용하여 양식에 기본적으로 참여하는 맞춤 컨트롤을 만들고, 자체 값을 제출하고, 제약 조건 검증과 통합하고, 재설정, 사용 중지, 상태 복원에 반응합니다.

최신 HTML 아키텍처, 시맨틱스, 네이티브 대화형 API (대화상자, 팝오버, 세부정보), 포커스 관리, 리소스 우선순위 지정을 위한 실행 중심 가이드라인입니다. 웹 문서를 구조화하거나, 네이티브 오버레이를 구현하거나, 리소스 로드 순서를 최적화할 때 이 가이드를 사용하세요.

커스텀 요소를 서버에서 렌더링한 다음 다시 렌더링하거나 스타일이 지정되지 않은 콘텐츠를 플래시하지 않고 제자리에서 하이드레이션합니다.

Shadow DOM을 사용하여 구성요소의 DOM과 스타일을 캡슐화하고, HTML 템플릿을 사용하여 트리를 효율적으로 구성하고, 슬롯을 사용하여 소비자 콘텐츠를 투영합니다.

:host 선택기, 테마 지정을 위한 상속 및 맞춤 속성, ::slotted 및 ::part, 구성요소 내의 계단식 레이어 및 컨테이너 쿼리를 사용하여 그림자 경계 전반에 스타일을 지정합니다.

웹 구성요소 작성 및 사용을 위한 방향 및 교차 원칙으로, 맞춤 요소, Shadow DOM, 템플릿 및 슬롯, 선언적 Shadow DOM, Shadow 경계를 넘나드는 스타일 지정, 양식 연결 맞춤 요소, 접근성 요구사항을 다룹니다. 재사용 가능한 UI 구성요소, 디자인 시스템 또는 서버에서 렌더링된 맞춤 요소를 빌드할 때 이 가이드를 사용하세요.

아코디언, 메뉴, 확장 카드와 같은 대화형 구성요소를 자연스러운 크기로 부드럽게 애니메이션 처리합니다.

요소의 고유 크기를 기반으로 크기를 계산하면서 지정된 디자인 제약 조건에 맞는지 확인합니다.

하위 요소 중 하나의 상태에 따라 스타일이 변경되는 구성요소를 빌드합니다. 예를 들어 테마 전환이 선택되었는지 여부에 따라 밝은 모드 또는 어두운 모드로 렌더링되는 구성요소가 있습니다.

브라우저에서 특정 at-rule을 지원하는 경우에만 특정 CSS 규칙 또는 선언을 조건부로 적용합니다.

특정 하위 요소를 포함하는지 여부에 따라 레이아웃을 변경하는 구성요소를 빌드합니다. 예를 들어 구성요소에 이미지가 포함된 경우 다중 열 레이아웃을 사용하고, 그렇지 않으면 기본적으로 단일 열 레이아웃을 사용합니다.

Flexbox, 그리드, 하위 그리드, 컨테이너 쿼리, 앵커 위치 지정, 고유 크기 조정과 같은 최신 CSS 레이아웃 반응형 UI 구성요소 또는 페이지 레이아웃을 설계할 때 이 기술을 사용하세요.

계단식, 선택기, 범위 지정, 중첩, 디자인 토큰을 비롯한 최신 CSS 아키텍처를 위한 작업 중심 가이드라인입니다. 스타일을 작성하거나 디자인 시스템을 관리할 때 이 가이드를 사용하세요.

밀도 모드 (좁게, 넓게, 여유롭게) 또는 테마와 같은 상위 수준 디자인 토큰을 정의하고 하위 구성요소가 변경사항에 직접 구성요소에 적합한 방식으로 반응하도록 합니다.

고정된 중단점을 사용하는 대신 상위 컨테이너의 크기에 따라 글꼴 크기, 간격, 미디어 크기와 같은 항목의 크기를 원활하게 조정합니다.

단일 요소의 다른 변환 속성과 독립적으로 개별 CSS 변환 속성 (예: 변환, 회전, 크기 조절)에 애니메이션을 적용하거나 재정의합니다.

요소의 표시되는 클리핑 경계를 콘텐츠 가장자리, 패딩 가장자리, 테두리 가장자리 또는 이 중 하나에서 지정된 오프셋과 정렬되도록 조정하여 콘텐츠가 클리핑되는 방식을 더 세밀하게 제어할 수 있습니다.

복잡하거나 동적인 스타일 지정 로직을 재사용 가능한 함수 (예: 입력 매개변수 집합을 기반으로 그라데이션을 계산하는 함수)로 캡슐화하여 과도한 스타일 반복을 줄입니다.

컨테이너 쿼리, 동적 표시 영역 단위, 가로세로 비율, 반응형 서체 등 컨테이너 및 표시 영역 크기에 맞게 조정되는 UI를 빌드합니다.

반복을 최소화하면서 선택기와 조건부 @-규칙의 교차점 또는 합집합을 기반으로 요소를 타겟팅합니다.

CSS 컨테이너 스타일 쿼리를 사용하여 시맨틱 컨텍스트에 따라 시각적 로직을 조정하는 구성요소를 빌드합니다.

표시 영역의 너비나 높이가 아닌 자체 너비나 높이에 따라 스타일이 조건부로 달라질 수 있는 구성요소를 빌드합니다. 예를 들어 크기에 따라 레이아웃을 변경할 수 있는 카드 구성요소나 너비에 따라 조건부로 도우미 텍스트를 표시할 수 있는 클릭 유도 문구 버튼이 있습니다.

필드가 유효하지 않은 경우 양식 필드의 상위 요소 (예: 라벨 또는 필드셋)의 스타일을 지정합니다.

그룹의 요소 수에 따라 자동으로 조정되는 동적 시각적 스펙트럼 또는 레이아웃 배열을 만듭니다.

Temporal.Duration 및 Intl.DurationFormat을 사용하여 날짜와 시간 사이의 경과 시간 또는 남은 시간을 계산하고, 기간 단위를 조정하고, 사람이 읽을 수 있는 현지화된 기간의 형식을 지정합니다.

Temporal Plain 유형을 사용하여 시간대 변동 없이 위치에 구애받지 않는 달력 날짜, 벽시계 시간, 부분 날짜 (반복되는 생일, 신용카드 만료일), 반복되는 월별 간격을 모델링합니다.

향후 회의 또는 일정을 지리적 IANA 시간대에 명시적으로 바인딩하여 예약하면 일광 절약 시간 (DST) 전환, 시계 변경 중 '건너뛴' 시간 또는 '반복된' 시간과 관계없이 일정 시간이 정확하게 유지됩니다.

Temporal.Instant를 사용하여 날짜 잘림 충돌 없이 밀리초 미만 또는 나노초 ISO 8601 타임스탬프 간의 간격을 파싱, 정렬, 측정합니다.

해외 사용자를 위해 그레고리력이 아닌 달력 시스템 (예: 이슬람력, 히브리력, 중국력)의 날짜를 정확하게 표시하고 계산합니다.

Emscripten을 사용하여 C/C++를 WebAssembly로 컴파일

무거운 동기 처리 (복잡한 계산 또는 긴 루프) 또는 DOM 업데이트를 분할하여 브라우저가 사용자 입력을 처리하고 화면을 다시 그리도록 합니다.

탭이 백그라운드에 있던 기간을 제외하고 사용자가 실제로 페이지를 보는 데 보낸 총 시간을 계산합니다.

페이지의 모든 스크립트 종속 항목에서 복잡한 조정 없이 비동기 종속 항목을 조건부로 로드하거나 초기화합니다 (예: 누락된 웹 기능의 폴리필 가져오기).

여러 분석, 원격 분석, Core Web Vitals 이벤트를 단일 비콘으로 디바운스하고 일괄 처리하여 네트워크 경합을 최소화하고 서버 부하를 줄이면서 실시간 업데이트를 제공합니다.

사용자에게 즉시 표시되지 않는 콘텐츠의 렌더링을 지연하여 콘텐츠가 많은 웹페이지 (예: 긴 피드, 많은 기사 또는 복잡한 대시보드가 있는 페이지)의 렌더링 시간을 줄입니다.

부드러운 스크롤 성능을 유지하려면 스크롤이 완료될 때까지 DOM 업데이트, 데이터 가져오기, 분석 추적, 레이아웃 재계산과 같은 비용이 많이 드는 작업을 지연합니다.

차세대 이미지 형식 (예: AVIF 또는 WebP)과 여러 픽셀 밀도 (예: 1x 및 2x)를 동시에 제공하여 최적화된 장식 이미지 (예: 배경, UI 아이콘, 복잡한 마스크)를 전송합니다. 이렇게 하면 브라우저가 사용자의 기기 기능에 가장 적합한 파일 크기와 시각적 품질의 조합을 동적으로 협상할 수 있습니다.

Fetch API로 수행되는 백그라운드 데이터 가져오기의 우선순위를 낮춰 사용자 시작 요청과의 네트워크 경합을 방지합니다.

사용자가 페이지를 포그라운드로 전환한 후 스크립트가 비동기식으로 로드되는 경우에도 페이지가 처음에 백그라운드에서 로드되었는지 여부를 안정적으로 확인합니다.

구성요소가 화면 밖에 있을 때 백그라운드 JavaScript 실행 (예: <canvas> 애니메이션, WebGL 렌더링, 고주파 WebSocket 데이터 폴링)을 일시중지하고 다시 화면에 표시될 때 적시에 재개하여 시스템 리소스와 배터리 수명을 절약합니다.

탐색할 때마다 구조적 DOM 상태를 삭제하고 다시 빌드하는 대신 보존하여 단일 페이지 애플리케이션 (SPA)에서 이전에 방문한 뷰로 더 빠르게 전환할 수 있습니다.

클라이언트 측 JavaScript를 사용하여 HTML, CSS, JavaScript를 변경하거나 삽입하는 A/B 테스트, 다변수 테스트 또는 기타 실험을 게재하고 렌더링합니다. 이때 실험 콘텐츠를 표시하기 위해 깜박이거나 번쩍이기 전에 원본 콘텐츠가 먼저 표시되지 않습니다.

느리게 실행되는 JavaScript와 다음 페인트에 대한 상호작용 (INP) 응답성이 저하되는 기타 원인을 파악합니다.

긴 애니메이션 프레임의 원인이 되는 스크립트 식별

사용자가 다음에 방문할 가능성이 높은 페이지를 미리 가져오거나 미리 렌더링하여 페이지 로드 성능을 개선합니다.

미디어 플레이어가 표시 영역에 접근할 때까지 동영상 포스터 이미지와 미리 로드된 미디어 데이터를 포함한 화면 밖 동영상 및 오디오 애셋의 다운로드를 지연시켜 대역폭을 절약하고 초기 페이지 로드 중에 네트워크 경합을 줄입니다.

사용자 상호작용 및 클라이언트 측 탐색에서 화면에 새로운 콘텐츠가 포함된 업데이트를 렌더링하는 데 걸리는 시간을 측정합니다.

최대 콘텐츠 페인트 (LCP) 후보 이미지의 로드 우선순위를 최적화하고 중요하지 않은 이미지의 우선순위를 낮춰 중요한 리소스 로드 지연을 줄입니다.

미리 로드된 콘텐츠의 상대적 우선순위를 최적화하여 중요한 리소스 로드 지연을 줄입니다.

중요한 비동기 스크립트를 강화하고 필수적이지 않거나 본문 후반부에 있는 스크립트의 우선순위를 낮춰 스크립트의 로드 우선순위를 최적화하여 순서를 개선하고 지연을 줄입니다.

데이터가 많은 대시보드나 스프레드시트 스타일 그리드와 같은 복잡한 레이아웃에서 레이아웃 재계산을 방지하여 상호작용을 더 빠르고 반응성이 높게 만듭니다 (다음 페인트에 대한 상호작용 (INP) 점수 감소).

나중에 동일한 HTML 문서로 스트리밍되거나 명령형 JavaScript API를 통해 스트리밍되는 콘텐츠로 페이지를 선언적으로 업데이트합니다.

최신 웹 애플리케이션을 최적화하기 위한 실행 가능한 가이드라인입니다. 성능을 감사하고, 로드 측정항목을 최적화하고, 느린 상호작용을 수정하고, Core Web Vitals (LCP, INP, CLS)를 최적화할 때 이 가이드를 사용하세요.

사용자의 전체 페이지 방문에서 분석, Core Web Vitals, 오류, 원격 분석 데이터를 안정적으로 추적하고 사용자가 페이지를 나갈 때까지 데이터 전송을 지연합니다.

CSS 가상 요소 (예: ::before 및 ::after)에서 해상도 최적화 이미지를 사용하여 DOM 노드 수를 줄입니다.

우선순위가 다른 작업을 예약하여 중요한 작업이 먼저 실행되고 백그라운드 작업은 지연되도록 합니다.

시맨틱 HTML, 포커스 관리, 양식, 미디어, 테스트를 다루는 접근성 높은 웹 애플리케이션을 빌드하기 위한 실행 가능한 코딩 가이드라인입니다. 접근성 기능, 키보드 탐색 또는 ARIA를 감사하거나 구현할 때 이 기술을 사용하세요.

프로그래매틱 접근성 상태 (예: aria-invalid)를 시각적 :user-invalid 상태와 동기화하여 스크린 리더 사용자가 상호작용 후에만 오류 피드백을 받도록 하여 시각적 환경을 반영합니다.

장식 콘텐츠의 대체 텍스트를 포함하여 접근성을 유지하는 방식으로 CSS 생성 콘텐츠 (::before/::after)를 사용합니다.

글꼴 크기, 레이아웃, rem 기반 측정값이 사용자의 접근성 설정을 따르도록 페이지의 운영체제 텍스트 크기 환경설정을 준수합니다.

오류가 발생하기 쉬운 문자열 파싱 없이 교차 문서 메시지와 URL 전반에서 웹 출처와 사이트를 안전하게 비교하고 검증합니다.

하이브리드 및 포스트 퀀텀 보호를 포함한 공개 키 캡슐화 또는 키 계약을 사용하여 공유 비밀번호를 설정하고 인증된 암호화를 통해 브라우저에서 민감한 정보를 암호화합니다.

공개 웹 애플리케이션에서 사용자의 로컬 네트워크 또는 루프백 인터페이스의 리소스에 액세스합니다.

기본 로그인에 패스키를 사용하여 재방문 사용자를 인증합니다.

비밀번호 로그인에 성공한 후 기존 사용자의 패스키를 자동으로 등록합니다.

사용자가 계정에 등록된 패스키를 확인하고 관리할 수 있도록 허용합니다.

민감한 작업을 수행하기 전에 기존 패스키를 사용하여 로그인한 사용자의 신원을 확인합니다.

기존 사용자 계정에 패스키를 등록합니다.

웹 애플리케이션에서 WebAuthn 및 패스키를 구현하기 위한 포괄적인 방향과 교차 원칙입니다. 패스키 등록, 인증, 관리 또는 재인증을 처리할 때 이 가이드를 사용하세요.

신뢰할 수 없는 HTML을 정제하는 신뢰할 수 있는 유형 정책을 정의하고, innerHTML과 같은 DOM 싱크에 쓸 때 이 정책을 사용하고, 콘텐츠 보안 정책을 통해 신뢰할 수 있는 유형을 적용하여 DOM 기반 XSS 공격을 방지합니다.

로그인 페이지로 이동하거나 워크플로를 중단하기 전에 저장된 패스키 또는 비밀번호를 사용하여 재방문 사용자를 즉시 인증합니다.

페이지 또는 작업자가 명시적인 네트워크 엔드포인트 허용 목록과만 통신하도록 제한하여 승인되지 않은 서드 파티 요청 및 클라이언트 측 데이터 무단 반출을 방지합니다.

안전하지 않은 요소와 속성을 삭제하여 사용자 입력에서 신뢰할 수 없는 HTML 콘텐츠를 안전하게 파싱하고 표시합니다.

서드 파티 출처에서 로드된 외부 스크립트, 스타일시트, 글꼴, 이미지의 암호화 무결성을 확인하고 이러한 요청이 사용자 인증 정보 또는 리퍼러 URL을 전송하는지 여부를 제어합니다.

기존 또는 양자 내성 (포스트 퀀텀) 비대칭 키를 사용하여 브라우저에서 메시지, 토큰 또는 아티팩트에 서명하고 확인하여 데이터 무결성과 진위성을 보장합니다.

일회용 비밀번호 또는 매직 링크 이메일을 보내지 않고도 계정 생성, 로그인 또는 복구 중에 사용자가 이메일 주소를 소유하고 있는지 확인합니다.

웹 개발자를 위한 예방적 보안 가이드라인 (XSS, CSP, 쿠키, 교차 출처 격리) 이 기술을 사용하여 보안 정책을 안전하게 감사, 테스트, 배포하는 프로세스를 안내하세요.

웹 개발자가 개인 정보 보호 중심 설계, 데이터 수집 최소화, 서드 파티 감사, 안전한 데이터 처리를 구현할 수 있도록 지원하는 실행 중심 가이드라인입니다. 애플리케이션을 설계하거나, 서드 파티 서비스를 통합하거나, 사용자 데이터를 처리하거나, 보안 헤더를 구성할 때 이 기술을 사용하세요.

사용자 구성 및 OS 수준 바로가기를 유지하면서 설치된 웹 앱을 새 출처로 전송합니다.

사용자 제작 콘텐츠 또는 이미 존재하는 사이트 콘텐츠의 언어를 감지합니다.

스트리밍 출력, 구조화된 JSON 응답, 멀티턴 세션 관리를 지원하는 Prompt API를 사용하여 브라우저에서 기기 내 자연어 추론을 실행합니다.

온디바이스 Summarizer API를 사용하여 텍스트 콘텐츠를 요약합니다.

온디바이스 Translator API를 사용하여 언어 간에 텍스트를 번역합니다.

WebMCP 속성으로 표준 HTML 양식에 주석을 달아 클라이언트 측 기능을 AI 에이전트의 도구로 노출합니다.

WebMCP Imperative API를 사용하여 클라이언트 측 JavaScript 함수를 AI 에이전트의 도구로 프로그래매틱 방식으로 등록합니다.

이 가이드를 사용하여 브라우저 애플리케이션에서 WebMCP (웹 모델 컨텍스트 프로토콜)를 구현하고 선언적 또는 명령형 API를 통해 클라이언트 측 기능을 AI 에이전트에 도구로 노출하세요.