기타 2026-05-19 4KB 읽기 3분

한선씨 웹코드 프레임워크 v2.0 고도화

개요

한선씨 웹코드 UI 프레임워크를 40개 함수에서 195개 함수, 9개 모듈, 4652줄으로 대폭 확장. 웹(DOM/WASM)과 네이티브(framebuffer) 동시 지원 유지. 크라우니 디자인표준 내장.

모듈 구성

모듈	함수	줄수	역할
웹코드.한선	49	794	코어: 렌더, 테마, 토큰, 기본 컴포넌트, CSS/HTML 생성
웹코드컴포넌트.한선	9	161	탭, 드롭다운, 체크박스/라디오/토글
웹코드위젯.한선	11	334	프로그레스, 아코디언, 트리, 툴팁, 슬라이더
웹코드확장.한선	13	378	아바타, 태그/칩, 리스트, 페이지네이션, 타임라인, 캘린더
웹코드레이아웃.한선	16	295	12컬럼 그리드, 플렉스, 사이드바, 드로어, 반응형, 스플릿
웹코드폼.한선	19	482	폼 입력 확장, 날짜/색상 선택, 폼 그룹/레이블, 검증 엔진
웹코드네비.한선	25	930	사이드/하단 네비, 헤더, 풋터, 통계카드, 차트, 가격표
웹코드유틸.한선	34	347	상태관리, 라우터, 타이포그래피, 아이콘30종, CSS 애니메이션, ARIA
웹코드템플릿.한선	19	931	랜딩, 관리자 대시보드, 로그인/회원가입, 이커머스

컴포넌트 분류 (약 60종)

기본 UI

카드, 버튼, 골드버튼, 입력, 네비, 뱃지, 구분선

데이터 입력

텍스트에어리어, 검색입력, 비밀번호, 숫자입력, 날짜선택, 시간선택, 색상선택, 파일선택, 셀렉트, 드롭다운, 체크박스, 라디오, 토글, 슬라이더

데이터 표시

테이블/데이터그리드, 리스트, 타임라인, 캘린더, 바차트, 수평바차트, 파이차트, 도넛차트, 통계카드, KPI

피드백

모달, 다이얼로그, 확인창, 토스트, 알림, 배너, 프로그레스바, 스피너, 툴팁, 팝오버

네비게이션

사이드네비, 메뉴/서브메뉴, 하단네비, 탭, 브레드크럼, 페이지네이션, 스텝퍼, 풋터, 헤더

레이아웃

12컬럼 그리드, 플렉스, 컨테이너, 섹션, 사이드바, 드로어, 스크롤영역, 스플릿

유틸리티

타이포그래피 6단계, 아이콘 30종(유니코드), CSS 애니메이션 5종, 상태저장소, 이벤트버스, SPA 라우터, 데이터바인딩, ARIA 접근성

페이지 템플릿

히어로, 특징섹션, CTA, 고객후기, FAQ, 대시보드레이아웃, 로그인/회원가입, 상품카드, 장바구니

컴파일 결과

9개 파일 전부 hanseonc_high 컴파일 성공:

웹코드.한선: 21,427 큐브 (600KB)
웹코드네비.한선: 56,804 큐브 (1.59MB)
웹코드템플릿.한선: 67,389 큐브 (1.89MB)
총 TOAU: 7.42MB

예제 앱

apps/컴포넌트갤러리.한선 — 핵심 컴포넌트 시연 (네이티브+HTML 동시 출력)
apps/관리자패널.한선 — 사이드바+카드+테이블 관리자 대시보드
apps/웹코드예제.한선 — 기본 대시보드 (v1 예제)

아키텍처

한선씨(.한선) → hanseonc_high → .toau → crownyc run    (네이티브)
                                      → crowny-wasm    (웹/WASM)
                                      → HTML 직접 생성  (SSR)