MFC OnSize로 만드는 반응형 UI, 윈도우 크기에 따라 자동 배치하는 방법

🧩 OnSize란 무엇인가요?

MFC에서 OnSize()는 윈도우의 크기가 변경될 때 호출되는 메시지 처리 함수입니다.
즉, 사용자가 창의 크기를 조절할 때마다 이 함수가 자동으로 호출되어 새로운 창 크기에 맞춰 내부 컨트롤의 레이아웃을 조정할 수 있는 기회를 제공합니다.

OnSize는 WM_SIZE 메시지를 처리하는 핸들러 함수로, 기본적으로 다음과 같은 시그니처를 가집니다.

afx_msg void CMyDialog::OnSize(UINT nType, int cx, int cy)

여기서 cx는 변경된 너비, cy는 변경된 높이를 의미합니다.
이 값을 기반으로 각 컨트롤의 위치와 크기를 재계산하면 반응형 UI를 손쉽게 구성할 수 있어요.

예를 들어, 오른쪽 아래에 항상 붙어 있어야 하는 버튼이나, 전체 너비를 차지하는 입력창 등이 있다면, OnSize에서 그때그때 좌표를 재계산해주면 됩니다.
이는 요즘처럼 다양한 해상도나 창 비율이 존재하는 환경에서 매우 유용하죠.

🔧 OnSize 함수 구조와 매개변수 설명

OnSize 함수는 WM_SIZE 메시지에 대한 응답으로 호출되며, 기본적인 정의는 다음과 같습니다.

void CMyDialog::OnSize(UINT nType, int cx, int cy)
{
    CDialogEx::OnSize(nType, cx, cy);

    // 컨트롤 위치 조정 코드 작성
}

📌 매개변수 설명

• 🔹nType: 사이즈 변경의 유형 (예: 최소화/최대화/복원 등)
• 🔸cx: 변경된 너비 (픽셀 단위)
• 🔸cy: 변경된 높이 (픽셀 단위)

이 세 가지 값을 활용하여 컨트롤의 위치를 계산하거나 크기를 조정하면, 창 크기에 따라 자연스럽게 레이아웃이 변경됩니다.

📐 컨트롤 위치/크기 조정 실전 예제

이제 실제로 OnSize 함수를 사용하여 버튼과 에디트 박스의 위치와 크기를 조정하는 예제를 살펴볼게요.
다이얼로그 기반 MFC 애플리케이션에서 흔히 볼 수 있는 구조로 구성했습니다.

📌 버튼과 에디트 박스 배치 예제

void CMyDialog::OnSize(UINT nType, int cx, int cy)
{
    CDialogEx::OnSize(nType, cx, cy);

    if (GetSafeHwnd()) {
        CWnd* pBtn = GetDlgItem(IDC_BUTTON_OK);
        CWnd* pEdit = GetDlgItem(IDC_EDIT_INPUT);

        if (pBtn && pEdit) {
            // 에디트 박스는 상단 전체 너비 차지
            pEdit->MoveWindow(10, 10, cx - 20, 30);

            // 버튼은 오른쪽 하단 고정
            pBtn->MoveWindow(cx - 110, cy - 50, 100, 30);
        }
    }
}

위 예제에서는 창의 너비(cx)와 높이(cy)를 기준으로 컨트롤의 크기와 위치를 동적으로 설정했습니다.
이렇게 하면 사용자가 창 크기를 줄이거나 늘려도 UI가 자동으로 재배치되죠.

📏 비율 기반 vs 절대값 배치 전략

MFC에서 컨트롤을 배치할 때는 화면 크기에 따라 적절한 방식을 선택하는 것이 중요합니다.
기본적으로는 픽셀 단위로 고정값을 설정하는 절대값 방식과, 창 크기의 일정 비율에 따라 컨트롤을 배치하는 비율 기반 방식이 있습니다.
각 방식은 장단점이 다르며, 상황에 따라 적절히 선택해야 합니다.

📌 절대값 배치 방식

가장 단순하면서도 예측 가능한 방식입니다.
MoveWindow나 SetWindowPos에 픽셀 단위 좌표를 넣는 것이며, 디자인한 대로 정확히 배치됩니다.
하지만 다양한 해상도 대응이 어렵고, 창 크기 변경 시 모양이 깨지기 쉽습니다.

📌 비율 기반 배치 방식

cx와 cy 값을 기준으로 너비와 높이를 나눠서 배치하는 방식입니다.
예를 들어, 컨트롤의 좌측 상단 좌표는 전체 창의 10%, 크기는 80%로 지정하는 식이죠.
반응형 UI에서는 이 방식이 훨씬 유연합니다.

• 📐절대값: 픽셀 기반으로 고정된 위치 및 크기 지정
• 📏비율 기반: 윈도우 크기의 %값으로 위치/크기 계산
• 🔄해상도 다양성에 대응하고 싶다면 비율 기반 방식 추천

💡 실무에서 자주 쓰는 팁과 주의사항

OnSize 함수를 활용해 반응형 UI를 구성할 때, 단순히 위치를 조절하는 것을 넘어서 코드의 안정성과 효율성까지 고려해야 합니다.
특히 실무에서는 다양한 윈도우 크기, DPI 설정, 사용자의 입력 습관 등을 감안해야 하기 때문에 다음과 같은 팁을 잘 활용해보세요.

• 🧼GetSafeHwnd() 체크는 필수입니다. 창이 초기화되기 전에 OnSize가 호출될 수 있기 때문입니다.
• 📌컨트롤 ID를 상수처럼 관리하면 재사용성과 유지보수가 쉬워집니다.
• 📐계산된 위치/크기를 디버깅 로그로 남겨 테스트 시 유용하게 활용할 수 있어요.
• ⚠️컨트롤 겹침이나 유효 범위 초과가 발생하지 않도록 최소 크기 조건도 고려해야 합니다.

📌 테스트와 유지보수 팁

UI 테스트 시에는 단순히 창을 키우거나 줄여보는 것 외에도, 최대화/복원/최소화 같은 다양한 상태를 반복해서 실험해보세요.
컨트롤이 비정상 위치로 튀거나 사라지는 현상이 있는지 꼼꼼히 체크해야 합니다.

❓ 자주 묻는 질문 (FAQ)