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은 백업한 뒤 초기 데이터로 복구됩니다. 저장 실패 시 입력 값이 유지됩니다.

← 전체 컴포넌트

Flex

아이템을 행이나 열로 배치하고 정렬, 간격과 줄바꿈을 조절합니다.

import Syidax.Core.Flex

지원 QML 타입

타입	정의 / 역할
	가로·세로 방향, 정렬과 간격에 따라 콘텐츠를 배치하는 컨테이너입니다.

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

01 기본 구성

SyFlex는 안에 선언한 아이템을 익숙한 플렉스박스 조절값으로 행이나 열로 배치합니다: direction(과 그 reverse), 주축 방향의 justify, 교차축 방향의 align, 여러 줄로 나누는 wrap, 그리고 간격 이름으로 주는 rowGap / columnGap / padding.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

Item {
    component FlexBox: Rectangle {
    property string label: ""
    property real side: 48
    width: side
    height: side
    radius: Foundation.borderRadiusMedium
    color: Theme.flex.itemBackgroundEnabled
    border.width: 1
    border.color: Theme.flex.containerBorderEnabled
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: Theme.semantic.textDefault
    }
}

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

    property QtObject settings: QtObject {
        id: storyArgs
        property string direction: "horizontal"
        property string justify: "start"
        property string align: "start"
        property string wrap: "nowrap"
        property string rowGap: "medium"
        property string columnGap: "medium"
        property string padding: "medium"
    }

    

    Rectangle {
        width: 480
        height: flex.height
        color: "transparent"
        border.width: 1
        border.color: Theme.flex.containerBorderEnabled
        SyFlex {
            id: flex
            width: parent.width
            height: storyArgs.direction.indexOf("vertical") === 0 ? 320 : Math.max(implicitHeight, 48 + 2 * paddingPx)
            direction: storyArgs.direction
            justify: storyArgs.justify
            align: storyArgs.align
            wrap: storyArgs.wrap
            rowGap: storyArgs.rowGap
            columnGap: storyArgs.columnGap
            padding: storyArgs.padding
            FlexBox { label: "1" }
            FlexBox { label: "2"; height: 64 }
            FlexBox { label: "3"; width: 72 }
            FlexBox { label: "4" }
            FlexBox { label: "5" }
        }
    }

}

02 justify

justify는 자식과 그 사이 간격을 한 줄에 놓은 뒤 주축 — 행에서는 폭, 열에서는 높이 — 의 남는 공간을 나눕니다: "start"(기본)는 시작 쪽에 모으고, "center"는 가운데, "end"는 끝에 모읍니다.

QML 코드

import QtQuick
import Syidax.Core

Item {
    component FlexBox: Rectangle {
    property string label: ""
    property real side: 48
    width: side
    height: side
    radius: Foundation.borderRadiusMedium
    color: Theme.flex.itemBackgroundEnabled
    border.width: 1
    border.color: Theme.flex.containerBorderEnabled
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: Theme.semantic.textDefault
    }
}

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    property QtObject settings: QtObject {
        id: storyArgs
        property string justify: "space-between"
    }

    

    Rectangle {
        width: 480
        height: flex.implicitHeight
        color: "transparent"
        border.width: 1
        border.color: Theme.flex.containerBorderEnabled
        SyFlex {
            id: flex
            width: parent.width
            justify: storyArgs.justify
            padding: "small"
            FlexBox { label: "1" }
            FlexBox { label: "2" }
            FlexBox { label: "3" }
        }
    }
}

03 align

align은 각 자식을 그 줄 안에서 교차축 — 행에서는 세로, 열에서는 가로 — 으로 놓습니다.

QML 코드

import QtQuick
import Syidax.Core

Item {
    component FlexBox: Rectangle {
    property string label: ""
    property real side: 48
    width: side
    height: side
    radius: Foundation.borderRadiusMedium
    color: Theme.flex.itemBackgroundEnabled
    border.width: 1
    border.color: Theme.flex.containerBorderEnabled
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: Theme.semantic.textDefault
    }
}

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    property QtObject settings: QtObject {
        id: storyArgs
        property string align: "center"
    }

    

    Rectangle {
        width: 480
        height: flex.implicitHeight
        color: "transparent"
        border.width: 1
        border.color: Theme.flex.containerBorderEnabled
        SyFlex {
            id: flex
            width: parent.width
            align: storyArgs.align
            padding: "small"
            FlexBox { label: "1"; height: 32 }
            FlexBox { label: "2"; height: 72 }
            FlexBox { label: "3"; height: 48 }
        }
    }
}

04 wrap

wrap: "nowrap"(기본)은 컨테이너를 넘치더라도 모든 자식을 한 줄에 둡니다.

QML 코드

import QtQuick
import Syidax.Core

Item {
    component FlexBox: Rectangle {
    property string label: ""
    property real side: 48
    width: side
    height: side
    radius: Foundation.borderRadiusMedium
    color: Theme.flex.itemBackgroundEnabled
    border.width: 1
    border.color: Theme.flex.containerBorderEnabled
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: Theme.semantic.textDefault
    }
}

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    property QtObject settings: QtObject {
        id: storyArgs
        property string wrap: "wrap"
    }

    

    Rectangle {
        width: 320
        height: Math.max(flex.implicitHeight, 48 + 2 * Foundation.spacingSmall)
        clip: true
        color: "transparent"
        border.width: 1
        border.color: Theme.flex.containerBorderEnabled
        SyFlex {
            id: flex
            width: parent.width
            wrap: storyArgs.wrap
            padding: "small"
            rowGap: "small"
            columnGap: "small"
            Repeater {
                model: 7
                FlexBox { required property int index; label: String(index + 1); width: 72 }
            }
        }
    }
}

05 direction

direction은 주축과 순서를 고릅니다.

QML 코드

import QtQuick
import Syidax.Core

Item {
    component FlexBox: Rectangle {
    property string label: ""
    property real side: 48
    width: side
    height: side
    radius: Foundation.borderRadiusMedium
    color: Theme.flex.itemBackgroundEnabled
    border.width: 1
    border.color: Theme.flex.containerBorderEnabled
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: Theme.semantic.textDefault
    }
}

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    property QtObject settings: QtObject {
        id: storyArgs
        property string direction: "vertical"
    }

    

    Rectangle {
        width: flex.implicitWidth
        height: flex.implicitHeight
        color: "transparent"
        border.width: 1
        border.color: Theme.flex.containerBorderEnabled
        SyFlex {
            id: flex
            width: implicitWidth
            height: implicitHeight
            direction: storyArgs.direction
            padding: "small"
            rowGap: "small"
            columnGap: "small"
            FlexBox { label: "1" }
            FlexBox { label: "2" }
            FlexBox { label: "3" }
        }
    }
}

06 작업 버튼 균등 배치

justify 설정을 적용한 작업 버튼 균등 배치 예제입니다.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

Item {
    component FlexBox: Rectangle {
    property string label: ""
    property real side: 48
    width: side
    height: side
    radius: Foundation.borderRadiusMedium
    color: Theme.flex.itemBackgroundEnabled
    border.width: 1
    border.color: Theme.flex.containerBorderEnabled
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: Theme.semantic.textDefault
    }
}

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

    property QtObject settings: QtObject {
        id: storyArgs
        property string direction: "horizontal"
        property string justify: "space-between"
        property string align: "start"
        property string wrap: "nowrap"
        property string rowGap: "medium"
        property string columnGap: "medium"
        property string padding: "medium"
    }

    

    Rectangle {
        width: 480
        height: flex.height
        color: "transparent"
        border.width: 1
        border.color: Theme.flex.containerBorderEnabled
        SyFlex {
            id: flex
            width: parent.width
            height: storyArgs.direction.indexOf("vertical") === 0 ? 320 : Math.max(implicitHeight, 48 + 2 * paddingPx)
            direction: storyArgs.direction
            justify: storyArgs.justify
            align: storyArgs.align
            wrap: storyArgs.wrap
            rowGap: storyArgs.rowGap
            columnGap: storyArgs.columnGap
            padding: storyArgs.padding
            FlexBox { label: "1" }
            FlexBox { label: "2"; height: 64 }
            FlexBox { label: "3"; width: 72 }
            FlexBox { label: "4" }
            FlexBox { label: "5" }
        }
    }

}

API 35

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

속성

타입	기본값	설명
list (기본 속성)	—	배치할 자식(숨겨진 것은 건너뜀)
string	`"horizontal"`	`horizontal` · `vertical` · `horizontal-reverse` · `vertical-reverse`
string	`"start"`	주축 방향: `start` · `center` · `end` · `space-between` · `space-around` · `space-evenly`
string	`"start"`	교차축 방향: `start` · `end` · `center` · `stretch` · `baseline`(`start`와 같음)
string	`"nowrap"`	`nowrap` · `wrap` · `wrap-reverse`
string	`"medium"`	간격 이름: 행에서는 줄 사이, 열에서는 자식 사이
string	`"medium"`	간격 이름: 행에서는 자식 사이, 열에서는 줄 사이
string	`"medium"`	간격 이름: 사방 안쪽 여백
int	`0`	마지막 배치 뒤의 줄 수(자식이 없으면 0)
bool (읽기 전용)	—	주축이 폭임
bool (읽기 전용)	—	순서가 뒤집힘
real (읽기 전용)	—	간격 이름의 픽셀 값
real (읽기 전용)	—	간격 이름의 픽셀 값
real (읽기 전용)	—	간격 이름의 픽셀 값
real	`0`	배치된 자식에 패딩을 더한 것 — 한 줄, 또는 `wrap`이면 쌓인 줄들에 교차 간격을 더한 것 — 암시 크기(플렉스가 유지)
real	`0`	배치된 자식에 패딩을 더한 것 — 한 줄, 또는 `wrap`이면 쌓인 줄들에 교차 간격을 더한 것 — 암시 크기(플렉스가 유지)

메서드

메서드	설명
	자식을 지금 배치; 플렉스가 변경마다 스스로 예약하므로 거의 필요 없음

시그널

항목	동작 / 조건
	`SyFlex` 자체에는 시그널이 없습니다. 배치마다 `lineCount`와 자식의 위치가 바뀝니다.

동작

항목	동작 / 조건
	`horizontal` · `vertical` · `horizontal-reverse` · `vertical-reverse`
	`direction: "horizontal"`(기본)은 행, `"vertical"`은 열입니다.
	간격 이름: 행에서는 자식 사이, 열에서는 줄 사이
	간격 이름: 행에서는 줄 사이, 열에서는 자식 사이
	`nowrap` · `wrap` · `wrap-reverse`
	마지막 배치 뒤의 줄 수(자식이 없으면 0)
	주축 방향: `start` · `center` · `end` · `space-between` · `space-around` · `space-evenly`
	교차축 방향: `start` · `end` · `center` · `stretch` · `baseline`(`start`와 같음)
	컨테이너는 주어진 `width`와 `height`를 차지하고 `stretch`가 아니면 자식 크기를 바꾸지 않습니다.
	컨테이너는 주어진 `width`와 `height`를 차지하고 `stretch`가 아니면 자식 크기를 바꾸지 않습니다.
	간격 이름: 사방 안쪽 여백
	`rowGapPx`, `columnGapPx`, `paddingPx`가 픽셀 값을 드러냅니다.
	`rowGapPx`, `columnGapPx`, `paddingPx`가 픽셀 값을 드러냅니다.
	`rowGapPx`, `columnGapPx`, `paddingPx`가 픽셀 값을 드러냅니다.
	자식의 `x` / `y`에 바인딩하지 마십시오 — 플렉스가 설정합니다.
	자식의 `x` / `y`에 바인딩하지 마십시오 — 플렉스가 설정합니다.

키보드

항목	동작 / 조건
	`SyLayout`은 페이지를 감싸고, `SyButtonGroup`은 간격 없이 버튼을 잇고, `SyDivider`는 플렉스가 배치한 묶음을 가릅니다.

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

컴포넌트

다운로드부터 첫 화면까지

C++ · CMake

Python · PySide6

실행을 확인한 Windows 환경

완성된 두 가지 업무 예제

실제 화면에서 확인하세요

직접 실행하는 Gallery

QML Core

문제 해결

Flex

지원 QML 타입

예제로 보기

01 기본 구성

02 justify

03 align

04 wrap

05 direction

06 작업 버튼 균등 배치

속성

메서드

시그널

동작

키보드

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