UI SDK와 레이아웃

Unibase UI는 unibase.core.ui의 Widget 계약을 조합합니다. SDK 선언, compiler의 공통 UI 동작, native/WASM host, HTML frontend 생성 경로는 서로 다른 층입니다. HTML 앱의 태그를 native 위젯 API와 동일하게 취급하지 마세요.

최소 레이아웃

Column은 자식을 세로로, Row는 가로로 배치합니다. SizedBox로 크기를 제한하고 간격을 명시합니다. 다음 예제는 Windows UI 실행 파일로 빌드해 창을 표시합니다. 아래의 빌드 절차를 따르세요.

import unibase.core.ui.*;
import unibase.core.ui.window.*;

class Layout {
    public static void main() {
        Widget content = Column([
            Text("레이아웃 예제"),
            SizedBox(240.0, 16.0),
            Text("Column은 자식을 세로로 배치합니다.")
        ], 12.0);
        Window window = Window("Layout", 480.0, 320.0, "ko", "ltr", content);
        window.show();
    }
}

컴포넌트 선택

목적	대표 타입	함께 결정할 사항
배치·제약	Row, Column, Stack, Padding, Align, SizedBox	부모 제약, 자식 크기, 간격, overflow
내용	Text, Image, Icon	글꼴·리소스, 대체 설명, 긴 내용
입력·선택	TextField, TextFormField, Checkbox, Radio, Switch	값의 소유자, 변경 callback, disabled·오류
폼	Form, 검증 가능한 입력	검증 시점·오류 표시·제출 중 상태
데이터	ListView, DataTable, Tree	key, 선택, 빈 결과·로딩·페이징·대량 항목
값·진행	Slider, RangeSlider, ProgressIndicator 계열	범위·단계·진행 의미
상호작용	Focus, Actions, Semantics 계열	키보드 순서, 의미 역할, 상태 안내

표는 API를 찾는 출발점이며 각 target의 완성·실행 지원표가 아닙니다. 생성자 인수는 실제 SDK 선언을 기준으로 작성합니다. Flutter 등 다른 UI 라이브러리와 이름이 같아도 인수나 상태 규칙을 그대로 복사하지 않습니다.

상태와 이벤트

입력값은 한 곳에서 소유하고 callback 결과로 갱신합니다. 선택·입력·포커스·비활성·검증 오류 상태를 함께 설계합니다. 웹의 Store·반응성·로컬 저장소는 Store 안내를 따릅니다. native 위젯에 웹 저장소 계약을 임의 적용하지 않습니다.

반응형·테마·접근성

폭·높이를 모두 고정하기 전에 부모의 제약과 긴 텍스트를 확인하세요. 최소 폭에서 가로 넘침, 다국어·RTL에서 잘림, 확대 시 내용 유실이 없어야 합니다. 색상·간격·타이포그래피 토큰을 일관되게 사용하고 밝은/어두운 테마의 대비를 확인합니다. 이미지·폰트·아이콘은 프로젝트 리소스와 함께 전달합니다.

Tab 순서, 포커스 표시, Enter/Space 동작, 비활성 요소의 처리와 화면 읽기 의미를 실제 대상에서 확인합니다. 선언 수·스크린샷 수·빌드 성공만으로 UI 전체 품질을 판정하지 않습니다.

실행 대상으로 전달

native/WASM UI는 해당 host·renderer·리소스를 갖춘 빌드가 필요합니다. 일반 콘솔 native 빌드만으로 창이 준비되지 않습니다. HTML frontend는 선택한 framework의 프로젝트 빌드·브라우저 실행을 확인합니다. 생성기가 특정 위젯을 거절하면 비슷한 이름의 웹 컴포넌트로 조용히 대체하지 말고 진단과 해당 target 지원 범위를 확인하세요.

Windows 창으로 빌드하기

Windows 개발 환경에서 UI runtime 소스·CMake·Visual Studio C++ 도구·vcpkg가 준비되어 있다면 명시적으로 windows 대상을 선택합니다. $unic은 준비된 compiler의 실제 경로로 설정하고, vcpkg가 다른 위치에 있다면 예시 경로를 바꾸세요.

$unic = 'C:\tools\unibase\unic.exe'
$env:VCPKG_ROOT = 'D:\vcpkg'
& $unic check .\Layout.uni
& $unic build .\Layout.uni --target windows -o .\build-ui\Layout.exe
if ($LASTEXITCODE -ne 0) { throw 'UI build failed' }
.\build-ui\Layout.exe

이 경로는 .uni에서 생성한 C++ 장면을 공통 UI runtime·Skia renderer·Windows host와 연결하고 리소스 묶음도 출력합니다. 첫 빌드는 의존성과 글꼴을 준비하므로 시간이 걸릴 수 있습니다. 실행 파일 옆에 복사된 DLL과 unibase-resources를 유지하세요. 이는 소스 개발 환경에서 확인하는 절차이며 일반 사용자용 설치 패키지나 독립 실행 배포를 보장하지 않습니다.

unic run Layout.uni와 --target native는 콘솔 실행 경로이므로 UI 창을 표시하려면 --target windows로 빌드한 실행 파일을 직접 실행하세요. export-ui --target vue는 HtmlPage 또는 HtmlComponent를 입력으로 받으며 이 위젯 소스를 변환하는 경로가 아닙니다.

이 소스는 정적 레이아웃으로 입력 필드·버튼 callback·상태 변경을 포함하지 않습니다. 입력과 상태를 추가할 때는 사용할 대상의 SDK와 이벤트 계약을 확인하세요. 코드 생성과 ERWeb 미리보기로 이어서 읽으세요.