Files

T

koriweb d8a80f6272 chore(wiki): dangling 링크 canonical 정규화 (768파일/1200건)

이름만 다른(표기 변형) [[위키링크]]를 대상 문서의 canonical 제목으로 치환해
끊겼던 1,200개 링크를 연결. 제목/파일명 정규화 일치만 적용하고 별칭 매칭은
과병합 위험으로 제외(애매성 가드). 원본은 _link_reconcile_backup/ 에 백업.
도구: Datacollect/scripts/link_reconcile_apply.mjs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-08 12:24:15 +09:00

6.1 KiB

Raw Permalink Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

Interop 2026

매 한 줄

"매 같은 코드가 모든 브라우저에서 같게 동작한다 — 그게 표준이다". Interop 2026 은 Apple/Google/Microsoft/Mozilla/Bocoup/Igalia 가 매년 합의하는 cross-browser 호환성 프로젝트의 6번째 사이클로, web-platform-tests 점수를 통해 약 20개 focus area 의 호환률을 공개 추적한다.

매 핵심

매 프로젝트 구조

Focus Areas: 합의된 약 20 개 영역 (CSS, layout, web API 등).
Investigations: 표준 자체가 부족해 우선 조사 필요한 영역.
WPT (web-platform-tests): 모든 점수의 source of truth.
Dashboard: wpt.fyi/interop-2026 — 일별 점수 갱신.

매 2026 주요 Focus Areas (대표)

CSS Anchor Positioning: tooltip/popover 의 anchor() 함수.
View Transitions (cross-document): SPA-like MPA 전환.
Container Queries (deeper): style queries, scroll-state queries.
Scroll-driven Animations: animation-timeline.
Popover API + invokers: command/commandfor.
Storage Access API + CHIPS: third-party storage partitioning.
WebGPU: compute + render pipeline 호환.
HDR / color-mix(): color-gamut 확장.
Declarative Shadow DOM: SSR-friendly Web Components.
URL Pattern API: 라우팅 표준.

매 참여 벤더

Apple (WebKit/Safari), Google (Blink/Chrome), Mozilla (Gecko/Firefox), Microsoft (Edge — Blink 기반), Bocoup, Igalia (consultancy).

매 응용

Production 코드에서 vendor prefix / polyfill 제거 시점 결정.
신규 feature 도입 우선순위 (안정 영역 → 실험 영역).
Progressive enhancement 매트릭스 작성.
Browser bug 보고 우선순위.

💻 패턴

1. CSS Anchor Positioning (Interop 2026 focus)

.tooltip {
  position: absolute;
  position-anchor: --target;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}
.target { anchor-name: --target; }

2. View Transitions (cross-document)

<!-- both pages opt-in -->
<meta name="view-transition" content="same-origin">

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fade 0.2s both; }
::view-transition-new(root) { animation: fade 0.2s both reverse; }

3. Scroll-driven animation

@keyframes reveal { from { opacity: 0 } to { opacity: 1 } }
.card {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

<button commandfor="menu" command="toggle-popover">Menu</button>
<div id="menu" popover>...</div>

5. Container style queries

.card { container-name: card; container-type: inline-size; }
@container card style(--theme: dark) {
  .title { color: white; }
}

6. URL Pattern API (라우팅)

const route = new URLPattern({ pathname: '/users/:id' });
const match = route.exec(request.url);
if (match) console.log(match.pathname.groups.id);

7. WebGPU compute (간단)

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const module = device.createShaderModule({ code: `
  @group(0) @binding(0) var<storage, read_write> data: array<f32>;
  @compute @workgroup_size(64)
  fn main(@builtin(global_invocation_id) id: vec3<u32>) {
    data[id.x] = data[id.x] * 2.0;
  }
` });

// in iframe (third-party context)
if (await document.hasStorageAccess() === false) {
  await document.requestStorageAccess();
}
// CHIPS partitioned cookie:
// Set-Cookie: sid=abc; Secure; SameSite=None; Partitioned

9. Declarative Shadow DOM (SSR)

<my-card>
  <template shadowrootmode="open">
    <style>:host { display: block; padding: 1rem; }</style>
    <slot></slot>
  </template>
  Hello
</my-card>

10. Feature detection + Interop matrix lookup

const features = {
  anchorPos: CSS.supports('position-anchor: --x'),
  viewTrans: 'startViewTransition' in document,
  popover:   HTMLElement.prototype.hasOwnProperty('popover'),
  webgpu:    'gpu' in navigator,
};
console.table(features);

매 결정 기준

상황	Approach
Interop 점수 ≥ 95%	Production 사용 OK, prefix 제거
80-95%	Progressive enhancement + @supports
< 80%	Polyfill 필수 또는 보류
Investigation only	Production 금지, 실험 prototype 만
Safari LTS lag	6-12 개월 grace 필요

기본값: Interop 2026 dashboard 95% 이상이면 prefix 없이 사용, 80-95% 는 @supports gate, 그 이하는 보류.

🔗 Graph

부모: Web-Standards
변형: Interop 2025
응용: Progressive-Enhancement
Adjacent: Baseline

🤖 LLM 활용

언제: Focus area 별 사용 가능 여부 판단, @supports 가드 코드 생성, polyfill 매핑, 호환성 보고서 초안. 언제 X: dashboard 실시간 점수 — wpt.fyi 직접 조회 또는 web fetch (LLM 학습 cutoff 이후).

❌ 안티패턴

점수 100% 가정: 같은 영역 안에서도 sub-feature 별 차이 — 실제 wpt.fyi 확인.
Polyfill 없는 신기능 강제: 구 브라우저 사용자 화면 깨짐.
Interop 통과 == 모든 환경 OK: 모바일 WebView (구 Android) 는 별도.
벤더 prefix 추가: 2026 Interop 영역은 prefix 거의 사용 안 함.
caniuse 만 신뢰: WPT 실행 결과가 truth — caniuse 는 요약본.

🧪 검증 / 중복

Verified (web.dev/blog/interop-2026, wpt.fyi/interop-2026 official dashboard).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Interop 2026 focus areas + 코드 패턴

6.1 KiB Raw Permalink Blame History