보손 / 웹 문법 대응 명세

같은 태그, 어디까지 같은가

앱 코드는 표준 HTML 태그를 사용합니다. 웹은 DOM으로, 모바일은 보손 UI 트리와 GPU 화면으로 실행합니다. 태그 이름이 같다는 사실과 실제 동작의 일치를 분리해 명세합니다.

판정 기준 · “명확한 대응”은 지정한 속성·이벤트·접근성 범위의 의미 대응입니다. 모든 CSS 속성과 픽셀 단위의 브라우저 화면 일치를 보장한다는 뜻이 아닙니다. 미지원 항목은 모바일 빌드 또는 개발 화면에서 진단해야 합니다.

01 · 명확한 대응

구조와 기본 그리기

공개 문법은 웹 태그를 유지합니다. 모바일의 한 태그가 곧 하나의 시스템 뷰가 되는 구조는 아닙니다.

웹 문법	웹에서의 핵심 의미	보손 모바일 대응	첫 목표
`<div>`	일반 블록 컨테이너	배치 상자 노드. 지원 CSS로 크기·패딩·배경을 계산하고 GPU 장면에 그립니다.	수직 구현
텍스트 노드	태그 안의 문자열	텍스트 내용과 노드 ID를 유지하며 GPU 글리프 출력에 연결합니다.	수직 구현
`class` / `className`	스타일 규칙 참조	모바일 스타일 데이터의 클래스 매칭 키로 사용합니다. 선택자 조합과 우선순위는 아래 조건부 항목입니다.	수직 구현
`display:flex`	행·열 유연 배치	지원 속성을 Taffy 계산으로 연결합니다. 폰트 측정과 CSS 기본값의 차이는 별도 검증합니다.	수직 구현

02 · 조건부 대응

플랫폼 계약이 필요한 항목

태그 이름을 유지하되 이벤트 순서, 기본 스타일, 접근성 또는 OS 서비스를 검증해야 합니다. 표의 구현 방식은 목표이며 현재 동작 증거가 아닙니다.

웹 문법	어려운 부분	보손 목표와 확인 조건	첫 목표
`<span>`	인라인 서식, 줄바꿈, 문장 안의 스타일 경계	텍스트 조각 노드로 표현하되 Taffy 바깥에서 인라인 배치와 글자 측정을 구현하고 웹의 줄바꿈과 비교합니다.	실사용 UI
`<button>`	포커스, 키보드 활성화, `disabled`, 접근성 버튼 역할	화면은 GPU로 그리고 클릭·상태·접근성 동작을 OS와 연결합니다. 터치뿐 아니라 보조 기술 활성화도 확인합니다.	수직 구현
`<input>`	한글 조합, 선택·커서, 자동완성, 키보드, 포커스	텍스트는 GPU로 표시하고 Android InputConnection·iOS 텍스트 입력 계약에 연결합니다. 조합 중 이벤트 순서를 검증합니다.	실사용 UI
`<img>`	디코드, 본래 크기, 로딩 실패, 캐시, `alt`	이미지를 측정해 GPU 텍스처로 올리고 실패 표시와 접근성 이름을 맞춥니다.	실사용 UI
`<p>` `<ul>` `<li>`	브라우저 기본 여백·마커·줄바꿈·목록 의미	문서 의미를 유지하며 보손의 기본 스타일과 목록 접근성 규칙을 명시합니다.	실사용 UI
`<a>`	URL 탐색, 외부 앱, 새 창, 뒤로 가기	링크 역할을 유지합니다. 등록된 앱 내부 경로는 선택형 라우터로 이동하고, 외부 URL·미등록 경로·라우터 부재는 각각 명시한 정책과 오류로 처리합니다.	실사용 UI
`overflow:auto`	관성 스크롤, 클리핑, 긴 목록, 스크롤 이벤트	GPU 클리핑·스크롤과 플랫폼 제스처를 연결하고 동적 행의 위치를 검증합니다.	실사용 UI
복합 CSS 선택자·상속·변수	우선순위, 동적 상태, 값 재계산	Lightning CSS AST와 모바일 스타일 계산기로 지원 범위를 단계별 확장합니다. 미지원 규칙은 진단합니다.	실사용 UI+
`role` / `aria-*`	브라우저 의미 트리와 OS 접근성 API의 차이	지원하는 역할·상태만 플랫폼 의미 트리로 번역하고 탐색 순서를 실기기로 확인합니다.	수직 구현+
`<form>` `<label>` `<textarea>` `<select>`	제출·검증, 라벨 연결, 여러 줄 IME, 선택 UI	초기 태그 목록에는 없습니다. 각각의 값·이벤트·접근성·키보드 계약을 정한 뒤 추가하며 그전에는 모바일 빌드에서 진단합니다.	후속 명세
`id` `tabindex` `hidden` `data-*`	식별·탐색 순서·표시 상태·사용자 데이터	속성별 반영 범위를 정의합니다. `id`가 DOM 조회 API를 제공하는 것은 아니며, 포커스 순서는 OS 접근성 탐색과 함께 검증합니다.	실사용 UI
포인터·키보드·포커스 이벤트	버블링, 기본 동작, 취소, 터치와 클릭의 관계	지원 이벤트별 대상·순서·전파·`preventDefault()` 효력을 표준 형태로 명세하고 터치·키보드·보조 기술로 비교합니다.	수직 구현+

03 · 현재 범위에서 불가

브라우저 전체를 요구하는 항목

이 범주는 영구적으로 불가능하다는 뜻이 아닙니다. 초기 GPU 렌더러의 1:1 HTML 대응으로 약속하지 않으며, 별도 컴포넌트·API 또는 후속 설계가 필요합니다.

웹 문법·API	1:1로 어려운 이유	현재 처리 방침	대안
`document` / 전체 DOM	모바일에는 브라우저 문서·DOM 노드가 없습니다.	`querySelector`, `innerHTML`, DOM 변경 관찰자를 지원한다고 주장하지 않습니다.	보손 노드 핸들 API를 별도 설계
`<iframe>`	중첩 브라우징 문맥, 출처·보안·탐색 정책이 필요합니다.	일반 GPU 태그로 해석하지 않고 모바일 빌드에서 진단합니다.	명시적 WebView 컴포넌트
`<canvas>` / WebGL / WebGPU	브라우저 그래픽 컨텍스트와 GPU 명령 API가 별도 계약입니다.	태그 이름만으로 호환성을 약속하지 않습니다.	후속 캔버스 API 검토
`<video>` / `<audio>`	디코더, DRM, 백그라운드 재생, OS 미디어 제어가 필요합니다.	초기 일반 태그 지원 목록에서 제외합니다.	명시적 미디어 컴포넌트
브라우저 전용 CSS·레이아웃	모든 Grid·필터·의사 요소·인쇄·복잡한 타이포그래피를 초기 계산기로 재현할 수 없습니다.	지원 속성표에 없는 규칙은 진단합니다.	측정 결과로 지원 범위 확장
브라우저 전역 API	V8만으로는 DOM, Service Worker, 저장소, 네트워크 객체가 생기지 않습니다.	필요한 호스트 API를 개별 계약으로 구현합니다.	지원 API 목록과 폴리필

CSS 계산 경계

웹 출력과 모바일 출력을 따로 판정

모바일은 생성된 CSS를 읽어 지원 선언만 계산합니다. 파서가 문법을 읽는 것과 화면 효과를 구현하는 것은 별개의 단계입니다. 아래 항목은 구현 완료가 아니라 수용 기준입니다.

범위	빠지기 쉬운 계약	모바일 처리 원칙	판정
기본 배치	`display:block`, 인라인 서식, `box-sizing`, 기본 여백	`div`의 블록 의미와 Taffy 계산 결과를 분리해 비교합니다. 초기 직접 대응은 지원 CSS 안에서만 성립합니다.	필수 검증
계단식 계산	출처·`@layer`·명시도·선언 순서·`!important`·상속·초기값	웹과 같은 우선순위 순서를 목표로 하고, 미지원 선택자나 선언을 식별 가능한 위치와 함께 진단합니다.	스타일 엔진
값·반응형	`rem`, `em`, %, `vw`, `dvh`, `calc()`, `var()`, `@media`	기준 글꼴·뷰포트·안전 영역·창 크기 변경·변수 재계산 규칙을 명세합니다. 미지원 값은 침묵하며 버리지 않습니다.	단계별 지원
텍스트·이미지	`@font-face`, 폰트 대체, 줄높이, 양방향 문자, 이미지 크기·비율	폰트와 이미지 측정을 레이아웃 입력으로 연결하고 Android·iOS·웹에서 줄바꿈과 대체 표시를 비교합니다.	실사용 UI
동적 시각 상태	`:hover`, `:focus-visible`, `:disabled`, 의사 요소, 애니메이션	지원 상태별 입력·접근성 의미를 정합니다. 의사 요소·전환·키프레임은 별도 구현 전까지 진단합니다.	후속 단계

Tailwind CSS 연동

생성된 CSS를 공통 입력으로 사용

Tailwind 전용 런타임을 만들 필요는 없습니다. Vite·Rspack 등 빌드 과정에서 Tailwind가 생성한 CSS를 웹에는 그대로 전달하고, 모바일에는 보손 CSS 변환기로 전달합니다. className 또는 class의 문자열은 양쪽에서 유지합니다.

기능	웹	모바일 목표·제약	첫 목표
`flex` `gap-4` `p-4` 등	Tailwind 생성 CSS 사용	생성된 선언·단위·변수를 보손이 지원할 때만 동일하게 계산합니다. 작은 유틸리티 묶음부터 실제 출력 비교로 승인합니다.	초기 연동
테마·Preflight	Tailwind 기본 스타일·테마 변수 사용	`@theme` 결과의 CSS 변수, `@layer` 순서, 초기화 규칙을 함께 해석해야 합니다. 일부 유틸리티만 읽고 전체 Tailwind 지원이라고 표시하지 않습니다.	단계별 지원
변형·임의 값	반응형·상태·임의 값 CSS	`sm:`, `dark:`, `hover:`, `focus:`, 임의 값·색 공간은 생성 CSS의 선택자·미디어·값 지원에 따라 각각 판정합니다.	후속 단계
동적 클래스·플러그인	빌드 시 소스 탐지·플러그인 확장	문자열 조합으로 클래스 이름을 만들면 CSS가 생성되지 않을 수 있습니다. 완전한 클래스 이름을 소스에 두고, 플러그인이 생성한 CSS도 같은 진단을 거칩니다.	빌드 진단

구현 순서: 작은 Tailwind 예제 빌드 → 생성 CSS를 Lightning CSS로 읽기 → 지원 선언 변환 → 모바일 스타일 계산 → 동일 화면 스냅샷 비교. 참고: Tailwind 빌드, 테마 변수, 클래스 탐지.

앱 코드 예시

React에서는 <div className="screen"><button onClick={...}>열기</button></div>처럼 작성합니다. Vue·Svelte는 같은 태그를 각자의 템플릿 문법으로 작성합니다. 공개 기본 태그로 <view>를 도입하지 않습니다.

판정 방식

각 항목의 완료 판정은 웹·Android·iOS의 화면, 이벤트 순서, 접근성 동작과 오류 처리 비교로 합니다. 현재 CSS→Taffy 실험은 제한된 스타일 두 개의 배치만 계산했으며 이 표의 플랫폼 동작을 검증한 것은 아닙니다.