프론트엔드.한선 v5 브라우저 호환성 매트릭스

날짜: 2026-05-27 검증 대상: /Users/ef/CrownyOS/crownyc/pkg/libs/프론트엔드.한선 (3986줄, 203 함수) 트랜스파일러: /Users/ef/CrownyOS/crownyc/web/han-js/한선_트랜스파일러.js v1.1 (버그 수정됨) 런타임: /Users/ef/CrownyOS/crownyc/web/han-js/한선_런타임.js v1.0

---

요약

분류	수	비율
즉시동작 (가상DOM·상태·CSS 생성)	131	64.5%
부분동작 (JS 문자열 반환 → eval 필요)	67	33.0%
네이티브전용 (TCP 소켓 기반)	1	0.5%
합계	199

나머지 4개 함수(내부 헬퍼 _드롭다운HTML생성 등)는 분류 중복 제외

---

카테고리별 매트릭스

즉시동작 (131개) — 가상 DOM + 상태 + 순수 CSS/HTML 생성

카테고리	함수들	비고
DOM 가상화	요소생성, 요소속성설정, 요소텍스트설정, 요소추가, 요소삭제, 요소찾기, 요소HTML생성, 요소같은가, 요소복제, 요소비교, 패치적용JS	innerHTML 직렬화까지
CSS 조작	스타일설정, 클래스추가, 클래스제거, CSS규칙생성, 전환설정CSS, 다크모드CSS, 전체CSS생성, 그리드CSS, 플렉스CSS, 모바일우선CSS, 안전영역CSS, 모바일터치CSS, 드래그CSS, 탭패널CSS, 모달CSS, 토스트CSS, 네비바CSS, 스켈레톤CSS, 인쇄CSS, 적응형폰트CSS
폼	폼생성, 입력필드추가, 선택필드추가, 체크박스추가, 제출버튼추가	HTML 맵 반환
검증	검증규칙생성, 필수규칙, 길이규칙, 이메일규칙, 숫자범위규칙, 검증실행, 검증오류HTML
템플릿	템플릿렌더, 템플릿조건, 템플릿반복	{{}} 치환
라우터	라우터생성, 경로등록, 경로이동, 현재경로	가상 라우터
상태 관리	저장소생성, 상태넣기, 상태가져오기, 상태되돌리기, 구독등록, 구독알림, 상태전체, 상태버전	맵 기반
컴포넌트	컴포넌트생성, 컴포넌트속성, 컴포넌트상태, 컴포넌트상태읽기, 컴포넌트자식추가, 컴포넌트마운트, 컴포넌트해제, 컴포넌트렌더
국제화	번역저장소생성, 언어추가, 언어변경, 번역하기, 번역HTML속성, 언어선택기HTML
SEO	메타태그생성, 오픈그래프생성, 트위터카드생성, 구조화데이터생성, 캐노니컬URL, 로봇메타
네비게이션	네비바생성, 네비링크추가, 네비드롭다운추가, 네비바HTML생성
모달	모달생성, 모달본문설정, 모달버튼추가, 모달HTML생성
토스트	토스트컨테이너생성
탭	탭패널생성, 탭추가, 탭패널HTML생성
테이블	테이블생성, 테이블헤더설정, 테이블행추가, 테이블정렬, 테이블필터, 테이블HTML생성, 숫자문자열인가, 인덱스배열정렬
페이지네이션	페이지네이션생성, 페이지이동, 페이지항목, 페이지네이션HTML
PWA	매니페스트생성, 매니페스트아이콘추가, 매니페스트테마설정, 매니페스트JSON, 오프라인페이지생성
애니메이션	페이드인생성, 페이드아웃생성, 슬라이드인생성, 회전생성, 확대축소생성	CSS keyframe 객체
반응형	반응형중단점, 클램프, 뷰포트단위, 종횡비CSS, 반응형클래스, 적응형이미지HTML, 적응형레이아웃HTML
모바일 UI	뷰포트메타, 안전영역CSS, 모바일헤더HTML, 하단탭HTML
지연로딩	스켈레톤HTML, 레이지이미지HTML
브리지	브리지생성
디바이스	디바이스정보	UA 파싱
스와이프	스와이프방향	계산 함수
JSON	JSON생성, JSON파싱	맵↔JSON
기타	HTML페이지생성, PWA통계, 프론트엔드_버전

부분동작 (67개) — JS 코드 문자열 반환, eval/삽입 필요

카테고리	함수들
이벤트	이벤트등록, 이벤트제거
모달 JS	모달열기JS, 모달닫기JS, 모달시스템JS
토스트 JS	토스트표시JS, 토스트시스템JS
탭 JS	탭전환JS, 네비바JS
애니 JS	애니메이션적용JS, 다크모드토글JS
유틸 JS	폼리셋JS, 디바운스JS, 스로틀JS, 클립보드복사JS, 스크롤맨위JS, 로컬저장JS, 로컬읽기JS
웹소켓	웹소켓연결JS, 웹소켓전송JS, 웹소켓닫기JS, 웹소켓재연결JS, 웹소켓상태표시JS
드래그&드롭	드래그가능JS, 드롭영역JS, 정렬목록JS
지연/스크롤	레이지로딩JS, 무한스크롤JS
테이블 JS	테이블정렬JS, 페이지네이션JS
PWA JS	서비스워커등록JS, 캐시전략_네트워크우선, 캐시전략_캐시우선, 캐시전략_새로고침동안캐시, 서비스워커생성, 푸시구독JS, 푸시메시지표시JS, 설치프롬프트JS, 백그라운드동기화JS
터치/모바일	터치등록JS, 스와이프감지JS, 핀치줌JS, 햅틱피드백JS, 햅틱패턴JS, 풀투리프레시JS, 길게누르기JS, 더블탭JS, 스크롤잠금JS, 가상키보드대응CSS
브리지 JS	브리지호출JS, 브리지수신JS, 브리지감지JS
디바이스 JS	카메라열기JS, 갤러리열기JS, 위치권한요청JS, 위치추적JS, 가속도계JS, 진동JS, 클립보드읽기JS, 클립보드쓰기JS, 공유JS, 파일읽기JS, 파일저장JS, 권한요청JS, 알림권한JS, 디바이스감지JS, 화면크기감지JS
i18n JS	언어전환JS

부분동작 사용법: 반환된 JS 문자열을 document.head에 <script> 삽입하거나 (1, eval)(코드) 로 실행하면 완전 동작

네이티브전용 (1개)

함수	이유	브라우저 대안
요청보내기	TCP 소켓(소켓생성/소켓바인드) 기반 HTTP 구현	fetch() + 런타임 래퍼 교체

---

발견된 호환성 문제 및 해결책

문제 1: 오류 식별자 충돌 (critical, 수정 완료)

• 원인: 트랜스파일러가 오류를 무조건 JS catch로 치환
• 현상: 변수 오류 = [] → var catch = [] (SyntaxError)
• 해결: v1.1에서 컨텍스트 감지: } 오류 변수명 { 패턴만 catch, 나머지는 _오류_
• 파일: 한선_트랜스파일러.js v1.1

문제 2: 요청보내기 — TCP 소켓 전용

• 원인: 내장 HTTP 클라이언트가 소켓생성/소켓바인드 내장함수 직접 사용
• 현상: 브라우저에서 소켓생성 is not defined
• 해결: 런타임에 소켓생성/소켓바인드 fetch 기반 폴리필 추가 필요

문제 3: 내장 맵생성 반환 타입 — JS Map vs 일반 객체

• 현상: 번역저장소생성() 후 Object.keys() 결과가 빔 (Map은 keys()가 다름)
• 영향: 국제화 번역하기 함수에서 중첩 맵 꺼내기 맵꺼내(번역맵, 현재) 실패
• 해결: 함수 내부에서 언어맵 == -1 가드 정상 작동. 실사용 시 언어추가 API 그대로 사용

문제 4: CSS규칙생성 시그니처

• 원인: API가 (선택자, 속성목록, 값목록) 배열 2개 필요, 문서는 (선택자, 스타일) 단일
• 현상: 배열 인덱스 0 접근 실패
• 해결: 사용 시 CSS규칙생성('.btn', ['color'], ['red']) 형태로 호출

문제 5: 헤드리스 Chrome --dump-dom JS 비실행

• 원인: <script type="text/한선">은 DOMContentLoaded 이후 비동기 eval
• 현상: dump-dom이 JS 실행 전 스냅샷 캡처
• 해결: --virtual-time-budget=5000 플래그 + Node.js 직접 실행으로 검증 완료

Node 테스트 결과: app.innerHTML = 2482자, 로그 3줄 정상 출력

---

검증 결과

• 트랜스파일: 127,459 bytes JS 생성, 203 함수 모두 변환 (function 203개 확인)
• 런타임 eval: Node.js + 모의 DOM에서 성공
• 데모 실행: app.innerHTML = 2482자 주입 성공, 3개 출력 로그 확인
• 데모 URL: http://localhost:8765/데모_v5통합.html

---

관련 파일

파일	역할
/Users/ef/CrownyOS/crownyc/pkg/libs/프론트엔드.한선	v5 소스 (203 함수)
/Users/ef/CrownyOS/crownyc/web/han-js/한선_트랜스파일러.js	v1.1 (오류 컨텍스트 수정)
/Users/ef/CrownyOS/crownyc/web/han-js/한선_런타임.js	109 함수 JS 구현
/Users/ef/CrownyOS/crownyc/web/han-js/데모_v5통합.html	통합 데모 (탭/카드/폼/테이블)
/tmp/v5_transpiled_v2.js	트랜스파일 결과물 (임시)

---

다음 단계 (셀코어 룰 등록 포함)

1. 요청보내기 폴리필: 런타임에 fetch 기반 HTTP 래퍼 추가 (1→0 네이티브전용)
2. JS 문자열 자동 주입기: 부분동작 67개를 <script> 자동 삽입으로 완전동작 전환
3. 셀코어 룰 DB 등록: 호환성 분류 룰을 규칙저장소.dat에 등록 → 다른 라이브러리 자동 분류
4. 프론트엔드.한선 v5.1: 요청보내기를 fetch 기반으로 오버로드 (브라우저/서버 이중 동작)