QT QUICK · C++ · PYTHON

하나의 디자인 언어.
네이티브 앱까지.

QML 컴포넌트, 공통 디자인 토큰과 직접 실행할 수 있는 예제로 데스크톱 화면을 만드세요.

시작하기 컴포넌트 살펴보기 →

QML Core는 별도 제품입니다. C++와 Python에서 같은 QML 화면을 사용합니다.

Syidax QML workbench running in the native application — Syidax Core로 만든 실제 Qt Quick 애플리케이션입니다.

QML CORE

컴포넌트

컴포넌트 검색

56개 컴포넌트 중 56개

START WITH A WORKING APP

다운로드부터 첫 화면까지

C++ · CMake

SDK 압축을 풀고 플러그인 버전과 호환되는 Qt 키트로 빌드하세요.

cmake -S examples/cmake-app -B build -G Ninja -DCMAKE_BUILD_TYPE=Release -DCMAKE_PREFIX_PATH=C:/Qt/6.12.0/msvc2022_64 -DCMAKE_MSVC_DEBUG_INFORMATION_FORMAT=Embedded -DCMAKE_POLICY_DEFAULT_CMP0141=NEW
cmake --build build
build/syidax-example --license your.license.json --example workbench

Python · PySide6

순수 QML 버전을 사용하고 Python 바인딩을 명시적으로 선택하세요.

python -m venv .venv
.venv/Scripts/python -m pip install -r examples/python-app/requirements-pyside6.txt
.venv/Scripts/python examples/python-app/main.py --binding pyside6 --license your.license.json --example records

--diagnose --json으로 Qt 버전, import 경로, 폰트, 실행 상태와 라이선스를 점검하세요. 라이선스 토큰은 출력하지 않습니다.

Gallery 평가 앱을 지금 사용할 수 있습니다. 유료 SDK 판매와 다운로드는 준비 중입니다. 위 설치 예제는 SDK 출시 후 사용하는 방법입니다.

실행을 확인한 Windows 환경

아래 버전에서 네이티브 창과 예제의 기본 실행을 검사했습니다. Qt 6.8은 소스 최소 기준이며 모든 Qt 버전의 검증을 뜻하지 않습니다. Gallery는 software 렌더러를 사용합니다.

완성된 두 가지 업무 예제

실행 중인 Windows 앱을 단계별로 캡처했습니다. 재생·일시 정지로 각 상태를 살펴보세요.

Workbench: 작업 완료 처리, 변경 저장과 출시 진행률 갱신.

Record Manager: 저장 실패 후 초안 보존, 재시도, 검색과 삭제 전 확인.

실제 화면에서 확인하세요

TRY IT YOURSELF

직접 실행하는 Gallery

Windows 앱에서 예제를 실행하고 속성을 살펴보며 밝은 테마와 어두운 테마를 전환하세요. Gallery는 평가용이며 상업용 SDK는 별도 제품입니다.

Gallery 다운로드 · Windows x64

QML 예제 소스와 샘플 파일 다운로드

QML Core

$24.99 / 월

$249.99 / 년 · 개발자 1명 기준

Chart와 동일한 정규 단가입니다. 첫 구매·추가 좌석·갱신에 같은 가격이 적용됩니다.

문서, 실행 가능한 예제와 진단 도구를 제공합니다. 개별 기술 지원, 온보딩, SLA는 제공하지 않습니다.

구매 및 라이선스 조건 보기 →

문제 해결

모듈을 찾지 못함

--qml 경로가 Syidax 폴더를 포함하는지 확인하세요. Python에서는 qml-pure를 사용합니다. 소스 저장소가 아닌 압축 해제한 SDK를 기준으로 실행하세요.

라이선스가 inactive 또는 frozen

QML Core 인증서를 다시 다운로드한 뒤 --license로 전달하세요. Web Core·Chart·Grid 인증서는 QML을 활성화하지 않습니다. 월간 만료 시 사용이 종료되며, 연간은 이용 기간 내 출시 버전에 한해 보유 권한이 적용됩니다.

Qt 버전 또는 플러그인 오류

플러그인 빌드의 Qt 버전과 아키텍처를 확인하세요. 서로 다른 Python Qt 바인딩을 혼용하지 마세요. qml-pure로 플러그인 ABI 의존성을 피할 수 있습니다.

PDF 또는 아이콘이 표시되지 않음

PDF는 별도 QtQuick.Pdf 모듈이 필요합니다. 이 모듈이 없어도 나머지 Core 컴포넌트는 사용 가능합니다. 아이콘 팩 등록과 리소스 경로는 SDK의 ICON-PACKS 문서를 확인하세요.

저장 실패 또는 설정 손상

예제는 사용자 앱 데이터 폴더에만 저장합니다. 권한과 디스크 공간을 확인하세요. 잘못된 JSON은 백업한 뒤 초기 데이터로 복구됩니다. 저장 실패 시 입력 값이 유지됩니다.

← 전체 컴포넌트

Global Header

앱 이름과 로고, 내비게이션, 검색과 공통 동작을 모아 놓는 상단 헤더입니다.

import Syidax.Core.GlobalHeader

지원 QML 타입

타입	정의 / 역할
	브랜드·탐색 탭·동작 버튼을 배치하는 앱 상단 헤더입니다.

미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.

01 기본 구성

기본 구성의 설정과 실행 결과를 비교합니다.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

Item {
    component EventLog: Rectangle {
        id: logBox
        property var lines: []
        implicitWidth: 440
        implicitHeight: Math.max(56, logText.implicitHeight + 24)
        radius: 4; color: Theme.semantic.backgroundBold
        function log(value) { lines = lines.slice(-3).concat([String(value)]) }
        Text {
            id: logText; x: 12; y: 12; width: parent.width - 24
            text: logBox.lines.length ? logBox.lines.join("\n") : "컨트롤을 조작하면 이벤트 결과가 표시됩니다."
            wrapMode: Text.Wrap; color: Theme.semantic.textDefault
            font.family: Theme.monoFontFamily; font.pixelSize: 12
        }
    }

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height

    property QtObject settings: QtObject {
        id: storyArgs
        property string title: "콘솔"
        property bool search: true
        property bool information: true
        property bool notification: true
    }

    

    Column {
        spacing: 12
        SyGlobalHeader {
            width: 760
            title: storyArgs.title
            search: storyArgs.search
            information: storyArgs.information
            notification: storyArgs.notification
            onSelected: (detail) => output.log(detail.tabkey)
            tabs: [
                SyTab { tabkey: "home"; text: "홈" },
                SyTab { tabkey: "data"; text: "데이터" },
                SyTab { tabkey: "reports"; text: "보고서" }
            ]
        }
        EventLog { id: output }
    }

}

02 logo · tabs · actions

세 list 속성이 아이템을 받습니다.

Qt 실행 화면 · 이미지

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

Item {
    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    // Focused Gallery routes: keep only the selected API and its prerequisites.
    id: featureStory

    property QtObject settings: QtObject {
        id: storyArgs
        property int width: 560
    }

    

    SyGlobalHeader { id: featureTarget0;
        width: storyArgs.width
        title: "콘솔"
        logo: Rectangle { width: 28; height: 28; radius: 6; color: Theme.semantic.backgroundBrandBold; Text { anchors.centerIn: parent; text: "SY"; font.family: Theme.fontFamily; font.pixelSize: 12; font.weight: Font.Bold; color: "white" } }
        tabs: [
            SyTab { tabkey: "home"; text: "홈" },
            SyTab { tabkey: "data"; text: "데이터" },
            SyTab { tabkey: "reports"; text: "보고서" },
            SyTab { tabkey: "settings"; text: "설정" },
            SyTab { tabkey: "admin"; text: "관리" }
        ]
        actions: SyButton { text: "로그인"; size: "small" }
    }
}

03 selected · actionClick · changed

SyGlobalHeader에는 시그널이 셋 있습니다:

selected · actionClick · changed · 기본 — Qt 실행 화면 · 이미지

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

Item {
    component EventLog: Rectangle {
        id: logBox
        property var lines: []
        implicitWidth: 440
        implicitHeight: Math.max(56, logText.implicitHeight + 24)
        radius: 4; color: Theme.semantic.backgroundBold
        function log(value) { lines = lines.slice(-3).concat([String(value)]) }
        Text {
            id: logText; x: 12; y: 12; width: parent.width - 24
            text: logBox.lines.length ? logBox.lines.join("\n") : "컨트롤을 조작하면 이벤트 결과가 표시됩니다."
            wrapMode: Text.Wrap; color: Theme.semantic.textDefault
            font.family: Theme.monoFontFamily; font.pixelSize: 12
        }
    }

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    // Focused Gallery routes: keep only the selected API and its prerequisites.
    id: featureStory

    

    Column {
        spacing: 12
        SyGlobalHeader {
            width: 760
            title: "콘솔"
            search: true; information: true; notification: true
            onSelected: (detail) => { if (true) { output.log(("selected: %1").arg(detail.tabkey)) } }
            onActionClick: (detail) => { if (true) { output.log(("actionClick: %1").arg(detail.type)) } }
            onChanged: (detail) => { if (true) { output.log(("changed: %1").arg(detail.value)) } }
            tabs: [
                SyTab { tabkey: "home"; text: "홈" },
                SyTab { tabkey: "data"; text: "데이터" }
            ]
        }
        EventLog { id: output }
    }
}

04 setActiveTab · updateOverflowTabs

setActiveTab(index)는 그 인덱스의 탭을 활성 탭으로 만들고 selected({ tabkey, index })를 발생시킵니다.

setActiveTab · updateOverflowTabs · 기본 — Qt 실행 화면 · 이미지

QML 코드

import QtQuick
import Syidax.Core

Item {
    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    // Focused Gallery routes: keep only the selected API and its prerequisites.
    id: featureStory

    Column {
        spacing: 24
        SyGlobalHeader { id: bar; width: 760; title: "콘솔"; tabs: [ SyTab { tabkey: "home"; text: "홈" }, SyTab { tabkey: "data"; text: "데이터" }, SyTab { tabkey: "reports"; text: "보고서" } ] }
        Row {
            spacing: 8
            SyButton { id: exampleControl1;  visible: true; text: "bar.setActiveTab(1)"; variant: "secondary"; size: "small"; onClicked: bar.setActiveTab(1) }
            SyButton { id: exampleControl2;  visible: true; text: "bar.updateOverflowTabs()"; variant: "secondary"; size: "small"; onClicked: bar.updateOverflowTabs() }
        }
        Text {
            text: "bar.active === " + bar.active + "   bar.overflowTabs.length === " + bar.overflowTabs.length
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
    }
}

05 검색 헤더

search 설정을 적용한 검색 헤더 예제입니다.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

Item {
    component EventLog: Rectangle {
        id: logBox
        property var lines: []
        implicitWidth: 440
        implicitHeight: Math.max(56, logText.implicitHeight + 24)
        radius: 4; color: Theme.semantic.backgroundBold
        function log(value) { lines = lines.slice(-3).concat([String(value)]) }
        Text {
            id: logText; x: 12; y: 12; width: parent.width - 24
            text: logBox.lines.length ? logBox.lines.join("\n") : "컨트롤을 조작하면 이벤트 결과가 표시됩니다."
            wrapMode: Text.Wrap; color: Theme.semantic.textDefault
            font.family: Theme.monoFontFamily; font.pixelSize: 12
        }
    }

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height

    property QtObject settings: QtObject {
        id: storyArgs
        property string title: "콘솔"
        property bool search: true
        property bool information: true
        property bool notification: true
    }

    

    Column {
        spacing: 12
        SyGlobalHeader {
            width: 760
            title: storyArgs.title
            search: storyArgs.search
            information: storyArgs.information
            notification: storyArgs.notification
            onSelected: (detail) => output.log(detail.tabkey)
            tabs: [
                SyTab { tabkey: "home"; text: "홈" },
                SyTab { tabkey: "data"; text: "데이터" },
                SyTab { tabkey: "reports"; text: "보고서" }
            ]
        }
        EventLog { id: output }
    }

}

06 정보·알림 헤더

information · notification 설정을 적용한 정보·알림 헤더 예제입니다.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

Item {
    component EventLog: Rectangle {
        id: logBox
        property var lines: []
        implicitWidth: 440
        implicitHeight: Math.max(56, logText.implicitHeight + 24)
        radius: 4; color: Theme.semantic.backgroundBold
        function log(value) { lines = lines.slice(-3).concat([String(value)]) }
        Text {
            id: logText; x: 12; y: 12; width: parent.width - 24
            text: logBox.lines.length ? logBox.lines.join("\n") : "컨트롤을 조작하면 이벤트 결과가 표시됩니다."
            wrapMode: Text.Wrap; color: Theme.semantic.textDefault
            font.family: Theme.monoFontFamily; font.pixelSize: 12
        }
    }

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height

    property QtObject settings: QtObject {
        id: storyArgs
        property string title: "콘솔"
        property bool search: true
        property bool information: true
        property bool notification: true
    }

    

    Column {
        spacing: 12
        SyGlobalHeader {
            width: 760
            title: storyArgs.title
            search: storyArgs.search
            information: storyArgs.information
            notification: storyArgs.notification
            onSelected: (detail) => output.log(detail.tabkey)
            tabs: [
                SyTab { tabkey: "home"; text: "홈" },
                SyTab { tabkey: "data"; text: "데이터" },
                SyTab { tabkey: "reports"; text: "보고서" }
            ]
        }
        EventLog { id: output }
    }

}

API 35

항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.

속성

타입	기본값	설명
string	`""`	로고 뒤의 앱 이름(16 px 중간 굵기); 비어 있으면 숨김
list	—	제목 앞의 아이템
list	—	SyTab 헤더(하나, 또는 대괄호 목록)
list	—	검색 필드와 버튼 뒤, 오른쪽 끝의 아이템
bool	`false`	200 px 검색 필드; `changed({ value })` 보고
bool	`false`	도움말 버튼; `actionClick({ type: "information" })` 보고
bool	`false`	종 버튼; `actionClick({ type: "notification" })` 보고
int	`0`	활성 탭의 인덱스; 설정하면 조용히 전환, 읽어서 알 수 있음
bool	`false`	모든 탭, 검색 필드, 정보 / 알림 버튼, `actions` 아이템 멈춤
var	`[]`	수집된 헤더, 순서대로(헤더가 유지)
var	`[]`	지금 ··· 메뉴로 접힌 헤더들

추가 속성

이름	타입 / 기본값	설명
		헤더 너비(논리 픽셀)입니다. 줄여서 탭의 넘침 메뉴 이동을 확인합니다.

메서드

메서드	설명
	`index`의 탭을 활성화하고 `selected` 발생; 모르는 인덱스나 비활성 탭이면 무시
	헤더를 다시 배치하고 `overflowTabs` 갱신; 폭과 탭이 바뀔 때는 헤더가 스스로 호출

시그널

시그널	인자	시점
	`detail: { tabkey, index }`	클릭, Space / Enter, 방향키, ··· 메뉴, `setActiveTab()`으로 탭이 활성화됨. 바인딩으로 `active`를 설정할 때와 비활성 탭에서는 아님
	`detail: { type }`	도움말(`"information"`) 또는 종(`"notification"`) 버튼이 클릭됨
	`detail: { value }`	검색 필드의 글자가 바뀜(편집마다)

동작

항목	동작 / 조건
	제목 앞의 아이템
	로고 뒤의 앱 이름(16 px 중간 굵기); 비어 있으면 숨김
	200 px 검색 필드; `changed({ value })` 보고
	도움말 버튼; `actionClick({ type: "information" })` 보고
	종 버튼; `actionClick({ type: "notification" })` 보고
	검색 필드와 버튼 뒤, 오른쪽 끝의 아이템
	SyTab 헤더(하나, 또는 대괄호 목록)
	활성 탭의 인덱스; 설정하면 조용히 전환, 읽어서 알 수 있음
	`index`의 탭을 활성화하고 `selected` 발생; 모르는 인덱스나 비활성 탭이면 무시
	클릭, Space / Enter, 방향키, ··· 메뉴, `setActiveTab()`으로 탭이 활성화됨. 바인딩으로 `active`를 설정할 때와 비활성 탭에서는 아님
	모든 탭, 검색 필드, 정보 / 알림 버튼, `actions` 아이템 멈춤
	지금 ··· 메뉴로 접힌 헤더들
	헤더를 다시 배치하고 `overflowTabs` 갱신; 폭과 탭이 바뀔 때는 헤더가 스스로 호출
	`closable` 헤더의 ×는 헤더를 바에서 제거합니다(탭 자신의 `closed` 시그널이 발생; 헤더 자체에는 닫힘 시그널이 없음).
	검색 필드의 글자가 바뀜(편집마다)
	도움말(`"information"`) 또는 종(`"notification"`) 버튼이 클릭됨
	Tab이 사용 가능한 헤더, 검색 필드, 버튼, 작업을 차례로 지납니다. 포커스된 헤더에서 Left / Up과 Right / Down은 이전 / 다음 사용 가능한 탭으로(순환, 활성화), Space / Enter는 선택.

키보드

항목	동작 / 조건
	SyTab 헤더(하나, 또는 대괄호 목록)

하나의 디자인 언어.네이티브 앱까지.

컴포넌트

다운로드부터 첫 화면까지

C++ · CMake

Python · PySide6

실행을 확인한 Windows 환경

완성된 두 가지 업무 예제

실제 화면에서 확인하세요

직접 실행하는 Gallery

QML Core

문제 해결

Global Header

지원 QML 타입

예제로 보기

01 기본 구성

02 logo · tabs · actions

03 selected · actionClick · changed

04 setActiveTab · updateOverflowTabs

05 검색 헤더

06 정보·알림 헤더

속성

추가 속성

메서드

시그널

동작

키보드

하나의 디자인 언어.
네이티브 앱까지.