업데이트: 7/22/2026

ITK MVVM-First 화면 구성: Value 정의부터 View 출력까지

이 문서는 "사용자가 필요한 Value(ValueVm)를 선언하고 레이아웃을 구성하면 ITK의 ViewLocator가 화면을 구성한다"는 흐름을 설명합니다.

MVVM 기본 개념은 외부 문서 참고

ViewModelBase, SetProperty, 데이터 바인딩 같은 MVVM 일반 개념은 아래 문서에서 확인할 수 있습니다.

• Model-View-ViewModel (MVVM)
• INotifyPropertyChanged / 데이터 바인딩 개요

ITK 문서에서는 MVVM 이론보다, ITK에서 ViewModel을 어떻게 조합하면 화면이 만들어지는지에 집중합니다.

뷰모델 레이어에서 작업 과정

1단계: Value 선언

ValueVm 선언: 도메인 값부터 정의

ITK에서는 먼저 화면에서 다룰 값을 ValueVm으로 선언합니다. 예: Boolean 상태를 표현하는 BoolValueVm.

• BoolValueVm는 ON/OFF, ENABLED/DISABLED 같은 상태 값을 표현합니다.
• TrueLabel은 값이 true일 때 표시할 텍스트입니다.
• FalseLabel은 값이 false일 때 표시할 텍스트입니다.
• 같은 Bool 값이라도 업무 도메인에 맞는 라벨을 지정해 사용자 이해도를 높일 수 있습니다.

private BoolValueVm _boolValue1 = null!;

_boolValue1 = new BoolValueVm("TrueBoolValueTest")
{
    Metadata = new BoolValueMetadata(
        FullLabel: "TrueState",
        TrueLabel: "ENABLED",
        FalseLabel: "DISABLED"
    )
};

var boolValueReadout1 = new BoolReadoutVm(_boolValue1)
{
    Label = _boolValue1.Metadata.FullLabel,
    TrueLabel = _boolValue1.Metadata.TrueLabel,
    FalseLabel = _boolValue1.Metadata.FalseLabel,
    ReadoutStyle = ReadoutVmStyle.TwoRow
};

_boolValue1.Current = true;

임계값이 있는 값 정의: Temperature + MetricValueVm

온도처럼 경고/위험 구간이 필요한 값은 MetricValueVm + MetricValueThreshold로 정의합니다.

• WarningHigh, CriticalHigh를 지정해 상태 경계를 명확히 설정합니다.
• 단위(Celsius, Fahrenheit)와 포맷(F2)을 분리해 표시 규칙을 일관되게 유지합니다.

private MetricValueVm _temperature = null!;

_temperature = new MetricValueVm(
    "Temperature",
    new RoundingOperator(4),
    new MetricValueThreshold(
        Minimum: 0,
        Maximum: 85,
        WarningHigh: 83,
        CriticalHigh: 84
    ))
{
    Metadata = new MetricValueMetadata(
        FullLabel: "Temperature",
        ShortLabel: "Temp",
        CharLabel: "T",
        Description: "The temperature of the generator.",
        Unit: NumericUnit.Temperature_Celsius,
        ValueFormatString: "F2"
    )
};

같은 _temperature 값을 여러 표시 방식으로 재사용할 수 있습니다. 아래처럼 TemperatureReadoutVm으로 섭씨 단일 표시와 섭씨/화씨 동시 표시를 구성할 수 있습니다.

var temperatureReadout1 = new TemperatureReadoutVm(_temperature)
{
    Label = _temperature.Metadata.FullLabel,
    PrimaryUnit = NumericUnit.Temperature_Celsius,
    PrimaryValueFormattedString = "F2"
};

var temperatureReadout2 = new TemperatureReadoutVm(_temperature)
{
    Label = _temperature.Metadata.FullLabel,
    PrimaryUnit = NumericUnit.Temperature_Celsius,
    PrimaryValueFormattedString = "F2",
    SecondaryUnit = NumericUnit.Temperature_Fahrenheit,
    SecondaryValueFormattedString = "F2"
};

2단계: 레이아웃 구성: 선언한 요소를 어떻게 배치하는가

ReadoutDemo1PanelVm은 StackPanelVm(세로 배치), ReadoutDemo2PanelVm은 UniformGridVm(그리드 배치)을 사용합니다.

private ViewModelBase CreateContent()
{
    var mainLayout = new UniformGridVm()
    {
        Columns = 2
    };

    mainLayout.Add(boolValueReadout1);
    mainLayout.Add(boolValueReadout2);
    mainLayout.Add(outputVoltageReadout);
    mainLayout.Add(frequencyReadout);
    mainLayout.Add(temperatureReadout1);
    mainLayout.Add(temperatureReadout2);

    return mainLayout;
}

개발자는 ViewModel에서 값과 배치만 선언하고, View 연결은 ViewLocator가 담당합니다.

protected override void RegisterView()
{
    ViewLocator.Register<BoolReadoutVm, BoolReadoutView>();
    ViewLocator.Register<TemperatureReadoutVm, TemperatureReadoutView>();
    ViewLocator.Register<UniformGridVm, UniformGridView>();
}

위 코드는 동작 방식을 설명하기 위한 예시입니다. 실제 등록 구성은 프로젝트의 플랫폼 레이어(XamlDS.Itk.Wpf / XamlDS.Itk.Aui) 구현을 따르세요.

3단계: 출력 예시 화면 설명

아래는 ReadoutDemo 패널이 실제로 화면에 출력된 예시입니다.

Temperature 값은 MetricValueThreshold 기준에 따라 상태가 달라지며, 테마/컨트롤 구현에 따라 일반 구간, 경고 구간(WarningHigh), 위험 구간(CriticalHigh)에서 강조 컬러와 애니메이션 효과로 상태 변화를 직관적으로 표현할 수 있습니다.

정리: ITK가 제공하는 개발 방식

• 먼저 업무 값(Value)을 ValueVm으로 선언합니다.
• 값의 의미(라벨, 단위, 임계값)는 Metadata/Threshold로 명시합니다.
• 화면 배치는 StackPanelVm, UniformGridVm 같은 레이아웃 ViewModel로 조합합니다.
• 최종 View 연결은 ViewLocator가 담당합니다.
• 결과적으로 개발자는 도메인 값 정의와 화면 구조 설계에 집중하고, 플랫폼별 View 매핑과 렌더링은 ITK가 일관된 방식으로 처리합니다.