[MFC] 그림판(mspaint) 만들기 프로젝트 #1

그림판(mspaint) 프로그램을 만든다?

혹시 그림판 프로그램을 만들어 본 경험이 있으신가요? 주제로 봤을 때 학교 과제 같아 보입니다. 실무에서도 그림판 프로그램을 만들라는 업무는 거의 없을 거라 생각됩니다. 그런데 혹시, 그림판 프로그램을 만들 수 있으신가요?

사실 저도 굳이 만들 생각을 안 했습니다. 하지만 최근 그림판과 아주 비슷한 이미지 뷰어(image viewer) 모듈을 개선하기 위해 설계를 생각하다가, '그림판을 만들어 볼까'라는 생각이 들어 만들게 됐습니다. 방금 얘기한 이미지 뷰어는 카메라의 이미지 데이터를 그리고(drawing), 그 위에 각종 도형(Line, Rectangle, Circle, CrossLine 등)을 덧그릴(overlay) 수 있는 모듈을 의미합니다. 확대/축소(zooming)와 마우스 클릭으로 이동(moving)할 수 있는 기능도 있습니다. 대부분의 비전 프로그램에는 필수적인 모듈입니다. 물론 상용 라이브러리를 구매하면 제공되기도 하지만, 커스터마이징을 위해 직접 개발해서 사용하는 편입니다.

이번 그림판 만들기 프로젝트를 따라 하다 보면 Modern C++ 문법과 GDI+ 그리고 MFC 사용 법에 대해 간략하게라도 익힐 수 있을 것입니다. (사실 UI 플랫폼은 MFC가 아니더라도 C#에도 쉽게 적용할 수 있을 거라 생각합니다.)

그림판 프로젝트 설명

그림판 프로젝트 동작

참고로, 그림판의 모든 기능을 구현한 프로젝트는 아닙니다. 다음과 같이 기본적인 기능만 구현했습니다.

• 파일로부터 그림 불러와 그리기
• 직선, 사각형 도형 덧그리기
• 선택 영역 지정하여 잘라서 이동하기
• 편집된 최종 이미지 저장하기

도형의 외곽선 색상, 내부 영역 채우기 색상, 선 스타일, 두께, 도형의 종류 등의 기능은 제공하지 않습니다. 사실 어려운 부분이라기 보다는 귀찮은 부분이죠(특히 UI 추가가 귀찮은 부분입니다). 실무 프로젝트라면 꼼꼼하게 신경쓰겠지만, 테스트 프로젝트라 위 기본 동작만 설명합니다.

그림판 프로그램 동작 분석

그럼, 프로젝트 개발에 앞서 그림판 프로그램의 동작을 분석해 보겠습니다.

그림판 실행 화면

위 그림은 Windows에서 제공하는 기본 프로그램인 그림판(mspaint)입니다. 윈도우를 사용하면서 그림판을 사용해보지 않은 사람은 없을 정도로, 아주 기본적으로 사용되는 프로그램입니다. 그런데 그림판의 동작을 분석해본 적은 없을 것입니다. 한 번 살펴볼까요?

캔버스(Canvas) - 파일을 불러오거나 배경색을 칠하기

아주 기본이 되는 배경(Canvas)이 존재합니다. 이 배경에는 파일을 불러와 그림을 그릴 수 있고, 원하는 색상을 칠할 수 있습니다.

파일 불러오기 또는 특정 색상으로 칠하기

도형(Figure) 그리기

캔버스에 도형을 선택하고 그릴 수 있습니다. 선, 사각형, 원형 등 다양하게 지원되고 색상이나 두께도 선택할 수 있습니다.

도형 덧그리기

도형을 한 번 Drag & Drop으로 그리고 나면, 각 도형의 점에 Hit Point가 활성화되어 크기 조정 또는 이동이 가능해집니다. 그리고 도형 외의 영역을 클릭하면 Hit Point가 사라지고 더이상 편집이 불가능해 집니다. 아래 애니메이션을 참고하세요.

도형을 추가하고 편집, 마무리하는 과정

특정 영역 선택하기(Cropping)

또 다른 기능으로는 특정 영역 선택하기가 있습니다. 영역 지정 후 이동하는 것이 가능합니다. 마찬가지로 빈 곳을 클릭하면 영역 지정이 완료됩니다.

특정 영역 잘라내기

이 외에도 캔버스 크기 조정하기, 이미지 회전, 이미지 반전, 도형 크기 늘리기 등의 기능이 더 있지만, 앞서 설명했듯이 기능이 너무 많기 때문에 핵심적인 부분만 구현하기로 합니다.

그림판 동작 분석은 여기까지하고, 다음 포스팅에서는 그림판 프로젝트를 어떻게 설계하는지 알아보겠습니다.