MFC 커스텀 드로잉으로 나만의 UI 만들기: OnPaint, DrawText, 도형 활용법

🖼️ 유저 인터페이스를 직접 그린다는 것의 의미

MFC에서 제공하는 기본 컨트롤들만으로는 점점 더 정교하고 감각적인 UI에 대한 요구를 충족하기 어렵습니다.
이럴 때 사용하는 방법이 바로 커스텀 드로잉(Custom Drawing)입니다.
말 그대로, 버튼 하나부터 전체 창 구성까지 사용자가 직접 화면 위에 그리고 조작하는 방식이죠.

이 방식을 사용하면 단순한 리스트 박스를 고급스러운 카드 형태로 만들 수도 있고, 클릭 반응에 따라 색상과 외형이 바뀌는 버튼도 구현할 수 있습니다.
즉, MFC 기본 컨트롤의 한계를 넘어, 애플리케이션을 브랜드 아이덴티티가 살아있는 고유한 인터페이스로 바꿀 수 있는 가장 강력한 방법입니다.

🎯 왜 커스텀 드로잉이 필요한가요?

현대 UI 트렌드는 더 이상 정형화된 구성에 머무르지 않습니다.
슬라이딩 메뉴, 애니메이션 반응, 테마 적용 등은 기본이 되었고, 이를 구현하려면 MFC의 기본 기능만으로는 한계가 분명합니다.
이런 한계를 돌파하기 위해선 직접 그리고 제어하는 커스텀 드로잉 기법이 필요합니다.

• 🎨기존 컨트롤 대신 CDC 객체를 활용해 원하는 영역에 직접 그림을 그릴 수 있음
• 🖌️DrawText, Ellipse, Rectangle 등을 사용해 다양한 시각 요소를 조합 가능
• 💡WM_PAINT 메시지를 기반으로 이벤트마다 화면 갱신 제어 가능

이제 단순히 “그림을 그리는 것”을 넘어, 어떤 방식으로 UI를 구성하고 사용자 경험을 향상시킬 수 있을지에 대해 생각할 때입니다.
MFC 커스텀 드로잉은 바로 그 가능성을 열어주는 열쇠라고 할 수 있죠.

🔧 OnPaint 함수의 구조와 사용법

MFC에서 화면에 무언가를 그리는 모든 작업의 출발점은 OnPaint() 함수입니다.
윈도우 메시지 처리 시스템에서 WM_PAINT 메시지가 발생할 때 자동으로 호출되며, 화면 갱신이나 사용자 정의 UI 구현의 핵심 역할을 합니다.

🔍 기본 구조 이해하기

OnPaint 함수는 대부분 다음과 같은 구조로 이루어집니다.
여기서 CPaintDC는 GDI 함수 호출을 위한 DC(Device Context)를 얻기 위한 클래스이며, 이 객체를 통해 다양한 드로잉 작업이 가능합니다.

void CMyWnd::OnPaint()
{
    CPaintDC dc(this); // DC 객체 생성

    // 드로잉 함수 호출
    dc.TextOutW(10, 10, L"Hello, MFC!");
    dc.Rectangle(50, 50, 150, 100);
    dc.Ellipse(160, 50, 260, 100);
}

📌 주의할 점

OnPaint 함수는 사용자가 직접 호출하면 안 되며, Invalidate(), RedrawWindow() 등을 사용해 간접적으로 호출하는 것이 원칙입니다.
또한 WM_PAINT 메시지 외에도 WM_ERASEBKGND 메시지를 오버라이딩하면 플리커 현상을 줄일 수 있어 부드러운 UI가 가능합니다.

OnPaint 함수만 잘 활용해도 윈도우 창 내에서 거의 모든 형태의 커스텀 UI를 그릴 수 있습니다.
이제 다음 단계에서는 보다 실전적으로 자주 사용되는 DrawText 함수를 활용해 텍스트 표현을 자유자재로 조정하는 방법을 살펴보겠습니다.

📝 DrawText로 텍스트를 자유롭게 출력하기

MFC에서 텍스트 출력을 할 때 가장 유용하게 활용되는 함수가 바로 DrawText()입니다.
텍스트의 위치, 정렬, 줄바꿈, 영역 지정 등 세밀한 조정이 가능해 복잡한 UI에서도 자주 사용됩니다.
단순한 문자열 표시뿐 아니라, 라벨, 버튼 텍스트, 카드 UI 구성에서도 필수적인 함수죠.

✍️ 기본 사용법

DrawText는 주어진 CDC 객체와 CRect 영역, 그리고 DT_ 플래그를 조합하여 사용합니다.
출력 텍스트의 줄바꿈, 수직/수평 정렬, 생략 부호(…) 등 다양한 제어가 가능합니다.

CRect rect(20, 20, 300, 100);
CString str = _T("DrawText로 출력되는 문장입니다.");
dc.DrawText(str, &rect, DT_LEFT | DT_WORDBREAK);

🧩 다양한 플래그 옵션들

• 📌DT_LEFT / DT_CENTER / DT_RIGHT : 수평 정렬
• 🔠DT_VCENTER, DT_BOTTOM : 수직 정렬
• 🧵DT_WORDBREAK : 자동 줄바꿈
• ➖DT_END_ELLIPSIS : 공간이 부족할 경우 ‘…’ 표시

이제 텍스트만이 아니라 도형도 화면에 직접 그려야 할 때입니다.
다음 단계에서는 Ellipse, Rectangle 같은 GDI 도형 함수들을 이용해 시각적 인터페이스를 어떻게 구성할 수 있는지 살펴보겠습니다.

🔲 도형 함수(Ellipse, Rectangle)의 활용 예시

MFC에서는 다양한 도형을 그릴 수 있는 기본 GDI 함수를 제공합니다.
대표적으로 Ellipse()와 Rectangle()이 있으며, 이 두 함수만으로도 꽤 정교한 UI 요소를 구현할 수 있습니다.
버튼의 배경, 차트의 원형 표시, 테두리 강조 등 시각적 구성이 필요한 대부분의 요소에 적용이 가능하죠.

🔘 Ellipse로 원형 UI 만들기

Ellipse 함수는 타원이나 원형을 그릴 때 사용합니다.
Ellipse(int x1, int y1, int x2, int y2) 형태로, 네 꼭짓점으로 이루어진 사각형 안에 딱 맞는 타원을 그려줍니다.
정사각형 영역을 주면 완벽한 원이 됩니다.

dc.Ellipse(50, 50, 150, 150); // 원형
dc.Ellipse(200, 50, 300, 100); // 타원형

⬛ Rectangle로 테두리 강조하기

Rectangle 함수는 사각형 도형을 그리는 데 사용됩니다.
UI 카드의 테두리, 버튼의 기본 형태, 리스트 구분선 등 다양한 용도로 쓰이며, Pen, Brush 객체와 함께 사용하면 색상과 굵기까지 커스터마이징이 가능합니다.

CBrush brush(RGB(240, 240, 240));
CPen pen(PS_SOLID, 2, RGB(80, 80, 80));

dc.SelectObject(&brush);
dc.SelectObject(&pen);
dc.Rectangle(50, 200, 300, 250);

이제 도형을 그릴 수 있게 되었으니, 실제로 버튼이나 카드 같은 실전 UI를 구현해 볼 차례입니다.
다음 섹션에서는 실제 인터페이스를 커스텀 드로잉으로 어떻게 구성할 수 있는지 실용적인 예제를 통해 알아보겠습니다.

💡 커스텀 UI 예제: 버튼, 카드, 대시보드 구현

이제까지 익힌 OnPaint, DrawText, Ellipse, Rectangle 등을 활용해 실전 예제로 넘어가 보겠습니다.
단순한 도형에서 벗어나 실제 인터페이스로 사용할 수 있는 커스텀 버튼, 카드형 UI, 대시보드 박스를 직접 구성해보면 활용도를 더 크게 체감할 수 있습니다.

🖱️ 커스텀 버튼 구현

MFC에서 버튼을 직접 그리는 방식은 다음과 같습니다.
CRect로 버튼 영역을 만들고, 배경 색을 칠한 뒤, DrawText로 텍스트를 올리면 완성입니다.
마우스 오버, 클릭 효과는 OnMouseMove, OnLButtonDown 등과 연계하여 구현할 수 있습니다.

CRect btnRect(30, 30, 130, 70);
CBrush brush(RGB(100, 149, 237));
CPen pen(PS_SOLID, 2, RGB(70, 130, 180));

dc.SelectObject(&brush);
dc.SelectObject(&pen);
dc.Rectangle(btnRect);

dc.SetTextColor(RGB(255, 255, 255));
dc.SetBkMode(TRANSPARENT);
dc.DrawText(_T("클릭"), &btnRect, DT_CENTER | DT_VCENTER | DT_SINGLELINE);

📦 카드형 정보 박스 구성

다양한 정보 항목을 보여주는 카드형 UI는 시각적으로 깔끔하고, 사용자에게 정보 전달력이 뛰어납니다.
Rectangle을 이용해 외곽을 그리고, 내부에 텍스트와 아이콘을 배치해보세요.

📊 대시보드 스타일 박스

다양한 값을 시각적으로 표현할 수 있는 대시보드 박스는 그래픽 요소 + 수치 텍스트의 조합이 중요합니다.
도형을 그래픽처럼 활용하고, 중요한 숫자는 강조 색상으로 DrawText 하면 깔끔한 대시보드 형태가 만들어집니다.

이제 핵심 함수들을 모두 익혔다면, 실전에서 어떻게 적용하고 관리하는지가 중요합니다.
그 전에, 자주 받는 질문들을 정리한 FAQ를 통해 마무리 전 개념을 다시 점검해볼까요?

❓ 자주 묻는 질문 (FAQ)