DevSpeedTools

엔지니어링 · 2026년 8월 28일

2026년 모든 개발자가 알아야 할 웹 플랫폼 기능

브라우저는 이제 진지한 런타임입니다. View Transitions, Popover API, WebGPU compute, 그리고 File System Access API가 모두 성숙했습니다. 그것들이 무엇을 가능하게 하는지와 사용 방법.

DevSpeedTools 작성

5년 전, “웹 플랫폼”은 <div>와 fetch를 의미했다. 2026년에는 그래픽 지원, GPU 프로그래밍 가능, 파일 시스템 인식, 멀티프로세스 런타임으로, 2015년에 출시된 대부분의 운영 체제보다 더 풍부한 컴포넌트 라이브러리를 가지고 있다. 아래 기능들은 모두 “폴리필 없이 프로덕션에서 사용할 수 있는” 지점에 도달했다 — 그리고 그것들이 웹 앱이 될 수 있는 것을 바꾸고 있다.

View Transitions API

지난 몇 년간 가장 큰 UX 승리이다. View Transitions는 함수 호출 하나로 DOM 상태 간에 애니메이션할 수 있게 해주고, 브라우저가 보간을 처리한다.

// 이전: 즉각적, 부자연스러운
document.body.innerHTML = newHTML;

// 이후: 부드러운 크로스페이드
document.startViewTransition(() => {
  document.body.innerHTML = newHTML;
});

이것이 전부이다. 브라우저가 이전 상태를 스냅샷하고, 새 상태를 적용하고, 크로스페이드한다. 몇 줄의 CSS로 개별 요소를 애니메이션할 수 있다(공유 요소 전환):

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

::view-transition-old(.card),
::view-transition-new(.card) {
  animation-duration: 0.4s;
}

SPA(라우트 변경), MPA(전체 페이지 로드, meta 태그와 동일 오리진 탐색 포함), Vue/React/Svelte 라우터 전환에 작동한다. 브라우저 지원은 2024년에 크로스 브라우저 안정에 도달했고 이제 새 앱에서 페이지 전환을 처리하는 권장 방법이다. 마지막으로 수동 코딩한 FLIP 애니메이션을 작성했을 때, View Transitions 사양은 초안이었다.

Popover API

팝오버, 다이얼로그, <select> 요소는 포커스 트랩, ESC 키 처리, 라이트 디스미스 동작, ARIA로 항상 지저분했다. Popover API가 이것을 모두 표준화한다.

<button popovertarget="menu">메뉴 열기</button>
<ul id="menu" popover>
  <li>잘라내기</li>
  <li>복사</li>
  <li>붙여넣기</li>
</ul>

완전히 접근 가능하고, 최상위 레이어에 있으며, 라이트 디스미스되고, ESC 키로 닫히는 팝오버 메뉴이다. JavaScript 없음. z-index 전쟁 없음. popover 속성이 요소를 브라우저의 최상위 레이어(다른 컴포넌트의 모달 다이얼로그 포함 모든 콘텐츠 위)에 놓고, 브라우저가 포커스, ESC, 클릭 아웃 동작을 자동으로 처리한다.

세 가지 모드:

  • popover (auto) — 라이트 디스미스, 여러 팝오버가 열릴 수 있다.
  • popover="manual" — 프로그래밍 방식 열기/닫기만, 라이트 디스미스 없음.
  • <dialog> — 모달, 배경화면 포함, 포커스 트랩, 명시적 닫기가 필요.

드롭다운, 툴팁, 작업 메뉴, 피커: popover. 상호작용을 차단하는 모달 다이얼로그: <dialog>. position: absolute와 클릭 아웃 리스너로 드롭다운을 만드는 것을 중단하라 — 그것은 2019년 패턴이다.

WebGPU 컴퓨팅 셰이더

WebGPU는 2023년부터 “거의 준비되었다”고 했지만, 컴퓨팅 셰이더 이야기는 2025년에야 성숙했다. 이제 브라우저에서, 모든 최신 OS에서, 합리적인 API로 임의의 GPU 컴퓨팅을 실행할 수 있다.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const shader = device.createShaderModule({ code: computeWGSL });
const pipeline = await device.createComputePipeline({ layout: 'auto', compute: { module: shader, entryPoint: 'main' } });
// ... 버퍼 바인딩, 디스패치, 결과 읽기

이것으로 할 수 있는 것들:

  • 개발 도구. GPU에서 수백만 매칭을 실행하는 정규식 테스터. 500MB 파일을 200ms에 파싱하는 JSON 포맷터. 두 개의 100MB 파일을 1초 이내에 비교하는 diff 도구.
  • 로컬 퍼스트 앱. 이미지 처리, 비디오 트랜스코딩, ML 추론 — 모두 브라우저에서, 서버 없음.
  • 시각화. 이전에 “GPU에서 실행할 수 있으면 60fps가 될 것”이었던 모든 것이 이제 GPU에서 실행될 수 있다.

WebGPU는 프로덕션에서 HTTPS가 필요하다(API는 crypto.subtle처럼 보안 컨텍스트에서 게이트됨). 또한 최신 브라우저와 실제 GPU가 필요하다 — 오래된 하드웨어에 대한 WebGL2 또는 JS 전용 경로 폴백이 여전히 필요하다.

File System Access API

File API는 사용자가 드래그한 파일의 스냅샷을 준다. File System Access API는 읽고 다시 쓸 수 있는 실시간 핸들을 준다.

const handle = await window.showSaveFilePicker({
  suggestedName: 'config.json',
  types: [{ description: 'JSON', accept: { 'application/json': ['.json'] } }],
});
const writable = await handle.createWritable();
await writable.write(JSON.stringify(data, null, 2));
await writable.close();

파일을 다시 열고, FileSystemFileHandle을 얻고, IndexedDB를 사용하여 세션 간에 계속 사용할 수도 있다(핸들은 직렬화 가능). 개발 도구의 경우, 이것은 “모든 변경 후 파일 다운로드”와 “제자리에서 편집”의 차이이다.

브라우저 지원: 2023년부터 Chrome과 Edge, 2025년부터 Safari와 Firefox. 지원되지 않는 브라우저의 경우, Blob과 <a download>로 폴백 — 기능이 깔끔하게 감지된다.

CSS subgrid

display: grid는 10년간 가장 큰 레이아웃 개선이었다. subgrid가 두 번째로 크다. 그리드 항목이 부모의 그리드에 참여할 수 있게 해준다:

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

이제 모든 카드가 동일한 높이의 헤더, 본문, 푸터를 가진다. 플렉스박스 해킹이나 마법의 숫자 없이. Subgrid는 2023-2024년에 세 엔진 모두에 도착했고 폴백 없이 사용해도 안전하다.

실용적인 요약

지난 몇 년간 웹 개발을 시작했다면, 플랫폼이 얼마나 변했는지 눈치채지 못했을 수 있다. “모든 것에 라이브러리를 사용하는” 반사 — 애니메이션, 드롭다운, 파일 피커, 모달, 심지어 레이아웃 — 은 점점obsolete해지고 있다. 네이티브가 더 빠르고, 더 작고, 더 접근 가능하며, 프레임워크 업그레이드에서 덜 깨진다.

다음에 브라우저가 20줄의 HTML로 해결할 수 있는 문제에 50KB 패키지를 npm install하려 할 때, 먼저 플랫폼을 확인하라. 답은 점점 “예, 브라우저가 그렇게 합니다”이다.

빠른 테스트 방법: DevSpeedTools의 모든 개발 도구는 동일한 플랫폼 기능(Web Crypto, File System Access, Popover API, CSS subgrid)을 사용하여 완전히 클라이언트 사이드에서 실행된다. npm 의존성 제로로 JSON 포맷터를 만들 수 있다면, 대부분의 것을 만들 수 있다.