현대적인 GUI 애플리케이션 개발에서 사용자 인터페이스(UI)를 코드와 분리하여 정의하는 방식은 표준으로 자리 잡았습니다. 과거 WinForm 환경에서는 코드가 UI 설계와 밀접하게 얽혀 있었지만, Qt와 WPF는 XML 기반의 선언적 언어를 도입하여 레이아웃과 비즈니스 로직을 깔끔하게 분리합니다.

1. 선언적 UI 정의의 핵심 가치

UI 정의 파일을 분리하면 마치 건축 설계도와 실제 시공을 나누는 것과 같은 효과를 얻습니다. 하드코딩된 좌표 값 대신 레이아웃 엔진이 창의 크기 변화에 따라 동적으로 요소의 위치를 계산하므로, 해상도 대응이나 디자인 변경이 훨씬 유연해집니다.

2. 기술 스택별 UI 구조 비교

Qt와 WPF는 모두 XML을 사용하지만, 접근 방식에는 미묘한 차이가 있습니다.

Qt (.ui) 구조

Qt의 .ui 파일은 위젯 계층과 레이아웃 매니저를 명시적으로 정의합니다.

<layout class="QVBoxLayout" name="mainLayout">
    <item>
        <widget class="QLineEdit" name="inputField">
            <property name="placeholderText"><string>이름을 입력하세요</string></property>
        </widget>
    </item>
    <item>
        <widget class="QPushButton" name="submitBtn">
            <property name="text"><string>확인</string></property>
        </widget>
    </item>
</layout>

WPF (.xaml) 구조

WPF의 XAML은 중첩 구조를 통해 부모 컨테이너가 자식 요소의 배치를 관리하는 방식입니다.

<StackPanel VerticalAlignment="Top">
    <TextBox x:Name="inputField" Margin="10" PlaceholderText="이름을 입력하세요"/>
    <Button x:Name="submitBtn" Content="확인" Margin="10"/>
</StackPanel>

3. Qt Creator에서 반응형 레이아웃 구현하기

Qt에서 고정 좌표 방식(Absolute Positioning)에서 벗어나 자동 조절되는 레이아웃을 구현하는 권장 흐름입니다.

• 위젯 배치: 디자인 캔버스에 필요한 위젯들을 자유롭게 배치합니다.
• 컨테이너 할당: 개별 위젯이 아닌, 폼(Form) 전체를 선택한 상태에서 상단 툴바의 '수직 레이아웃(Vertical Layout)' 아이콘을 클릭합니다. 이 작업을 통해 윈도우 크기에 따라 위젯이 자동으로 리사이징되는 상태가 됩니다.
• 스페이서(Spacer) 활용: 레이아웃이 위젯을 무조건 크게 늘리는 것을 방지하려면 Vertical Spacer를 추가하여 여백을 제어합니다. 이를 통해 특정 위젯이 차지하는 공간을 고정할 수 있습니다.

4. WinForm 개발자를 위한 전환 가이드

• 좌표 의존성 탈피: Location과 Size 속성에 의존하던 습관을 버려야 합니다. 레이아웃 매니저를 적용하면 이 속성들은 비활성화되며, 대신 SizePolicy를 통해 위젯의 확장성을 제어하게 됩니다.
• 식별자 명명 규칙: WinForm의 Name 속성은 Qt에서 objectName에 대응됩니다. 이 값은 코드 내에서 findChild() 등을 통해 객체에 접근하는 핵심 키가 됩니다.
• 실시간 검증: 설계 단계에서 Ctrl + R을 습관화하십시오. 창 크기를 수동으로 조절했을 때 레이아웃이 깨지지 않는다면 올바르게 설계된 것입니다.