라이브러리 없이 구현하는 네이티브 웹 기법 42가지

라이브러리 없이 구현하는 네이티브 웹 기법 42가지

AI 뉴스 썸네일

프론트엔드에서 익숙한 기능 중에는 이제 별도 라이브러리 없이 구현할 수 있는 것이 많아요. HTMLcat은 브라우저가 제공하는 HTML, CSS, JavaScript 기능 42가지를 작은 예제와 함께 모았어요. `:has()`, Container Query, Popover API처럼 실무 코드를 줄여 주는 기능과 함께 브라우저 지원 범위와 접근성 주의점도 짚어요. 1

핵심 요약

구분	핵심	왜 볼 만한가요
CSS	`:has()`, `@scope`, Container Query로 상태와 범위를 다뤄요	컴포넌트마다 보조 클래스와 미디어 쿼리를 늘리는 일을 줄일 수 있어요
네이티브 UI	`dialog`, Popover, `inert`가 모달과 패널의 기본 동작을 맡아요	포커스와 최상위 레이어 처리를 직접 구현할 코드가 줄어요
표현	`clamp()`, `text-wrap`, `color-mix()`가 크기와 색상을 계산해요	반응형 스타일을 더 적은 선언으로 관리할 수 있어요
적용 기준	제한적이거나 실험 단계인 기능도 함께 표시해요	지원 표와 대체 동작을 확인한 뒤 선택할 수 있어요

1. 브라우저에 이미 들어온 기능부터 확인해요

HTMLcat은 각 기법을 짧은 메모처럼 보여 주는 레퍼런스 사이트예요. 기능 이름, 작은 예제, 실제 적용 전에 알아야 할 제약을 한 화면에서 확인할 수 있어요. 긴 튜토리얼을 순서대로 읽기보다 필요한 기능을 검색해 찾아보는 구조예요. 2

부모 상태와 컴포넌트 크기를 CSS로 읽어요

`:has()`를 쓰면 자식 요소의 상태에 따라 부모를 선택할 수 있어요. 예를 들어 유효하지 않은 입력을 가진 폼을 CSS에서 바로 찾을 수 있어요. 이전에는 JavaScript로 클래스를 추가하거나 DOM 구조를 바꿔야 했던 상황이에요.

728x90

Container Query는 화면 전체 너비가 아니라 컴포넌트가 받은 공간을 기준으로 스타일을 바꿔요. 같은 카드가 사이드바와 본문에 함께 들어가도 각 자리의 실제 폭에 맞춰 배치할 수 있어요. `@scope`는 특정 DOM 영역 안으로 선택자의 적용 범위를 좁혀요. 다만 상속 속성과 사용자 정의 속성까지 완전히 격리하는 기능은 아니에요.

모달과 팝오버의 기본 동작을 재사용해요

`dialog` 요소는 모달을 최상위 레이어에 올리고 Escape 키로 닫는 동작을 제공해요. Popover API는 메뉴나 작은 패널을 열고, 바깥을 클릭하면 닫히는 동작을 브라우저에 맡겨요. `inert`는 비활성 영역을 포커스와 포인터 입력, 접근성 트리에서 제외할 때 쓸 수 있어요.

이 기능을 쓰면 모달 뒤 콘텐츠의 포커스를 막거나 레이어 순서를 관리하는 코드를 줄일 수 있어요. 브라우저가 기본 동작을 제공한다고 접근성 확인까지 끝나는 것은 아니에요. 키보드 이동 순서와 레이블, 보조 기술 동작은 실제 화면에서 다시 확인해야 해요.

반응형 크기와 색상 계산을 CSS에 맡겨요

`clamp()`는 최솟값과 가변 값, 최댓값을 한 선언에 넣어요. 제목 크기나 여백을 구간별 미디어 쿼리로 잘게 나누지 않아도 돼요. `text-wrap: balance`는 짧은 제목의 줄 길이를 고르게 맞추고, `text-wrap: pretty`는 본문의 어색한 마지막 줄을 줄이는 데 도움을 줘요.

`color-mix()`는 색상 두 개를 CSS에서 섞어요. `light-dark()`는 밝은 테마와 어두운 테마의 색상을 한 선언에 적을 수 있어요. 디자인 토큰에서 파생 색상을 별도로 계산해 저장하던 코드를 줄일 수 있지만, 프로젝트가 지원하는 브라우저 범위를 먼저 확인해야 해요.

스크롤과 화면 전환도 네이티브 기능이 늘었어요

`scroll-margin-block-start`를 쓰면 고정 헤더 때문에 앵커 이동 지점의 제목이 가려지는 문제를 조정할 수 있어요. Scroll-driven Animations는 스크롤 진행도를 애니메이션 시간 축으로 사용해요. View Transitions API는 DOM 상태가 바뀔 때 이전 화면과 다음 화면 사이 전환을 브라우저가 처리해요.

이 기능들은 스크롤 이벤트 리스너와 화면 캡처 코드를 줄이는 데 유용해요. 움직임을 줄이도록 설정한 사용자를 위해 `prefers-reduced-motion` 처리도 함께 넣어야 해요. 지원하지 않는 브라우저에서는 애니메이션 없이도 콘텐츠와 조작이 그대로 작동하도록 구성하는 편이 안전해요.

왜 중요한가요

프론트엔드 의존성을 줄인다는 말은 패키지 수만 줄인다는 뜻이 아니에요. 브라우저가 이미 해결한 포커스 처리, 레이어 배치, 입력 장치 감지 같은 동작을 다시 만들지 않으면 유지할 코드와 테스트 범위가 함께 줄어요. 웹 표준 기능은 여러 프레임워크에서도 그대로 쓸 수 있어 기술을 옮길 때 다시 활용하기도 쉬워요. 2

모든 새 기능을 곧바로 도입할 필요는 없어요. HTMLcat은 일부 항목을 Limited 또는 Experimental로 표시해요. 팀이 지원하는 브라우저와 보조 기술에서 먼저 확인하고, 기능이 없어도 핵심 작업을 마칠 수 있는 대체 동작을 남기는 방식이 현실적이에요. 새 UI를 만들기 전에 브라우저 기본 기능으로 해결할 수 있는지 한 번 검색하는 습관부터 적용해 볼 만해요.

참고 자료

1. 기억해 둘 만한 작은 네이티브 웹 기법 — GeekNews
2. HTMLcat — Compact notes on HTML, CSS, and JavaScript — HTMLcat