[.Net] 이미지 뷰어는 ImageGlass로 쉽게 개발하기

이미지 뷰어(Image Viewer)

비전 프로그램에서 이미지 뷰어는 실시간으로 취득되는 카메라 영상이나 검사 결과 이미지를 띄우는 역할을 합니다. 보통은 Picture Box나 Panel에다가 그리기 마련인데요. 만약, 무턱대고 카메라 영상을 받는 그대로 출력하면 프로그램 반응 속도에 영향을 주게 됩니다. 고해상도의 이미지를 컨트롤의 크기에 맞춰 Stretch 알고리즘을 사용하거나 빠른 속도로 컨트롤의 이미지를 업데이트하면 UI 반응 속도가 느려지기 때문입니다.

그런데 보통은 이런 걱정을 할 필요가 없습니다. 대부분의 프로그램은 영상을 천천히 띄우거나 빠르게 띄우더라도 실시간으로 프로그램을 조작하지 않기 때문입니다. 하지만 비전 프로그램과 같이 실시간으로 다수의 카메라 영상을 띄우면서 제어가 필요한 상황이라면 얘기가 달라집니다. 이미지 확대/축소, 마우스 Drag & Drop에 따른 이동, 실시간 갱신에 따라 응답 속도가 느려지면 사용자 입장에서는 참으로 답답하고 신뢰성이 떨어지기 때문입니다.

서론이 길었습니다. 그래서 본문에서는 이미지 뷰어를 어떻게 개발하는지, 그리고 ImageGlass 라이브러리를 사용하면 장점이 무엇이고 얼마나 개발하기 편리해지는지 설명합니다.

직접 이미지 뷰어 만드는 방법

ImageGlass를 설명하기에 앞서, 이미지 뷰어를 직접 어떻게 만드는지 알아보겠습니다.

동작 이해하기

아래와 같이 500x500 크기의 이미지와 400x400의 컨트롤이 있다고 예시를 들겠습니다.

그림 파일과 컨트롤의 크기

그림 파일의 가로, 세로 크기가 컨트롤의 크기보다 큽니다. 이 경우, 그림은 컨트롤에 다음과 같이 그려집니다.

그림이 컨트롤에 그려지는 모습

즉, 컨트롤의 영역을 벗어난 부분은 그려지면 안 되며, 마우스 드래그 앤 드롭이나 스크롤 바 이동으로 시작 offset이 적용되어 그려져야 합니다. 예를 들어, 시작 offset이 변경되면 다음과 같이 그려지게 됩니다.

이미지 offset 적용에 따라 그려지는 모습

마우스 드래그 앤 드롭에 따라 offset을 계산하기 위해서는 LButtonDown, LButtonUp, MouseMove 이벤트가 필요합니다. 나머지는 그림을 불러오고 그리는 함수만 구현하면 끝입니다. 물론, 필요에 따라 확대/축소 기능도 필요하고 오버레이가 필요할 수도 있습니다.

어쨌든, 이게 다입니다. 그럼, 실제 구현은 어떻게 하는지 코드를 알아보겠습니다.

따라 하기

ExamViewer 이름의 Windows Forms 앱 프로젝트를 생성합니다.

WinForm 프로젝트 생성하기

그리고 솔루션 파일에 MyViewer 이름의 컨트롤 라이브러리를 추가합니다.

컨트롤 라이브러리 생성하기

위와 같이 두 개의 프로젝트를 추가하면 아래와 같은 모습이 됩니다.

두 개의 프로젝트가 추가된 모습

UserControl1.cs의 코드 구현은 다음과 같습니다. 주석으로 간단한 설명을 추가했습니다.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace MyViewer
{
    public partial class UserControl1: UserControl
    {
        Point _leftClick = Point.Empty; //왼쪽 마우스 클릭 좌표
        Point _offset = Point.Empty; //마우스 드래그 앤 드롭 offset 계산
        Point _lastOffset = new Point(0, 0); //마지막 offset 보관 용도

        Bitmap _bitmap = null; //파일로 불러온 이미지
        Bitmap _canvas = null; //더블 버퍼링을 위한 배경 이미지
        SolidBrush _background = new SolidBrush(Color.FromArgb(255, 255, 255)); //배경 색상
        Rectangle _sizeCanvas = new Rectangle(0, 0, 0, 0); //배경 이미지의 크기

        Rectangle _sizeSrc = new Rectangle(0, 0, 0, 0); //배경 이미지에 그려질 원본 이미지의 위치
        Graphics _g = null; //그려질 컨트롤의 핸들

        public UserControl1()
        {
            InitializeComponent();

            _canvas = new Bitmap(this.Width, this.Height);

            _sizeCanvas.Width = this.Width;
            _sizeCanvas.Height = this.Height;

            _sizeSrc.X = 0;
            _sizeSrc.Y = 0;
            _sizeSrc.Width = this.Width;
            _sizeSrc.Height = this.Height;

            _g = this.CreateGraphics();
        }

        public void LoadImage(string path)
        {
            _bitmap = (Bitmap)Image.FromFile(path);

            draw(_g);
        }

        private void draw(Graphics g)
        {
            if (_bitmap != null)
            {
                var graphics = Graphics.FromImage(_canvas);

                graphics.FillRectangle(_background, _sizeCanvas);

                _sizeSrc.X = -_offset.X;
                _sizeSrc.Y = -_offset.Y;
                graphics.DrawImage(_bitmap, 0, 0, _sizeSrc, GraphicsUnit.Pixel);

                g.DrawImage(_canvas, 0, 0);
            }
        }

        private void UserControl1_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.Button == MouseButtons.Left)
            {
                _offset.X = e.Location.X - _leftClick.X;
                _offset.Y = e.Location.Y - _leftClick.Y;

                _offset.X += _lastOffset.X;
                _offset.Y += _lastOffset.Y;

                draw(_g); //CPU 부하가 높음
            }
        }

        private void UserControl1_MouseDown(object sender, MouseEventArgs e)
        {
            if (e.Button == MouseButtons.Left)
            {
                _leftClick = e.Location;
            }
        }

        private void UserControl1_MouseUp(object sender, MouseEventArgs e)
        {
            if (e.Button == MouseButtons.Left)
            {
                _lastOffset = _offset;
            }
        }
    }
}

코드는 아래의 첨부된 파일을 참고하세요.

ExamViewer.zip

0.02MB

마우스 왼쪽 버튼의 클릭(Down, Up) 동작과 움직임(Move)에 따라 offset 좌표가 계산됩니다. 그리고 MouseMove 이벤트에서 왼쪽 버튼이 클릭되어 있다면(드래그 앤 드롭) 이미지 그리는 작업(draw)도 실시됩니다.

draw() 함수에서는 _bitmap을 컨트롤에 바로 그리지 않습니다. _bitmap을 컨트롤에 바로 그리게 되면, 이미지를 배경에 계속 덧그리게 되어 마우스 이동에 따라 잔상이 남게 됩니다. 바로 아래와 같은 모습이 됩니다.

이미지 이동에 따라 잔상이 남은 모습

그래서 컨트롤 크기에 맞는 임시 비트맵인 _canvas를 생성하여 더블 버퍼링으로 잔상이 남는 현상을 개선합니다. 아래 애니메이션은 위 코드의 동작을 보여줍니다.

뷰어 동작 화면

주의 사항

마우스로 드래그 앤 드롭을 심하게 움직이면 CPU 부하율이 상당히 높아지는 것을 볼 수 있습니다. 그리고 그려지는 이미지가 자연스럽지 않은 것도 말이죠. 위 예제 코드는 MouseMove 이벤트에 draw()를 호출하다 보니, 마우스 움직임에 따라 너무 많은 이벤트가 발생한 것이 원인입니다. 나중에는 확대, 축소 기능도 넣다 보면 더 심해질 것입니다.

그래서 이벤트를 줄이되 어떻게 자연스럽게 이미지를 그려낼지 방법을 찾는 것이 중요합니다. 하지만, 굳이 이런 고민을 하면서 이미지 뷰어를 만들 필요가 있을까요? 본인이 다 만들어서 나의 것을 만들어 가는 것도 좋지만, 우리에게 시간은 많지 않습니다.

이제 이러한 걱정을 할 필요가 없는, 무료로 사용 가능한 이미지 뷰어인 ImageGlass를 알아보겠습니다.

사용하기 편한 이미지 뷰어, ImageGlass

주요 특징

ImageGlass는 이미지를 볼 수 있도록 도와주는 아주 가벼운 응용 프로그램입니다. 윈도우 사진 뷰어처럼 이미지 파일을 더블 클릭하면 바로 띄어지는 프로그램입니다.

ImageGlass 사진 뷰어

주요 특징은 다음과 같습니다.

• 다양한 이미지 줌(확대/축소) 모드, 마우스 드래그 앤 드롭 이동 가능
• 클립보드로부터 이미지 열기 가능
• 70개 이상의 이미지 포맷 지원
• gif 호환 가능하며, 이미지 프레임 추출 및 애니메이션 재생/일시 중지 가능
• 슬라이드 쇼
• 썸네일 보기
• 단축키 지원
• 칼라 채널 선택 가능
• 색상 및 픽셀 값 추출 가능
• 자르기 기능
• 다양한 언어 지원(한국어 포함)
• 설치형(installer)/실행형(portable) 지원

ImageViewer는 아래 공식 홈페이지에서 다운로드 가능합니다.

https://imageglass.org/release/imageglass-8-6-7-13-36

ImageGlass 8.6.7.13 | ImageGlass

그럼 개발하는 입장에서의 주요 특징도 알아보겠습니다.

• 위 언급한 기능과 동일
• GNU General Public License Version3
• 오픈 소스
• C# 지원(v8.x: .Net 4.8, v9.0: .Net 6)
• 하드웨어 가속 지원
• ImageViewer Control 지원하여 쉽게 사용 가능

혹시 GNU GPLv3 라이선스가 궁금하다면 아래 링크를 참고하세요.

https://www.olis.or.kr/license/Detailselect.do?lId=1072

GNU General Public License version 3.0 (GPLv3)

ImageGlass 소스 코드는 아래 공식 Github 주소에서 다운로드 가능합니다.

https://github.com/d2phap/ImageGlass

GitHub - d2phap/ImageGlass: 🏞 A lightweight, versatile image viewer

따라 하기

ExamImageGlass 이름의 Windows Forms 앱 프로젝트를 생성합니다.

Windows Forms 프로젝트 생성하기

ImageGlass 라이브러리를 사용하기 위한 dll을 참조로 추가해야 합니다. 소스 코드를 다운로드하고 빌드해야 하지만, 저는 이 과정을 생략하고 실행 파일 경로에서 dll을 가져왔습니다.

설치 경로의 ImageGlass.ImageBox.dll 참조 추가하기

그리고 WinForm에 ImageBox 컨트롤을 추가합니다. 참고로, 저의 경우에는 Visual Studio의 디자이너에서 오류가 발생하여 코드로 직접 추가했습니다. 디자이너의 코드 예시는 다음과 같습니다.

namespace ExamImageGlass
{
    partial class Form1
    {
        //생략

        private void InitializeComponent()
        {
            this.viewer = new ImageGlass.ImageBoxEx();
            this.btnOpen = new System.Windows.Forms.Button();
            this.SuspendLayout();
            //
            // viewer
            // 
            this.viewer.Location = new System.Drawing.Point(5, 5);
            this.viewer.Name = "viewer";
            this.viewer.Size = new System.Drawing.Size(500, 500);
            this.viewer.Dock = System.Windows.Forms.DockStyle.None;
            // btnOpen
            // 
            this.btnOpen.Location = new System.Drawing.Point(513, 12);
            this.btnOpen.Name = "btnOpen";
            this.btnOpen.Size = new System.Drawing.Size(75, 23);
            this.btnOpen.TabIndex = 0;
            this.btnOpen.Text = "Open";
            this.btnOpen.UseVisualStyleBackColor = true;
            this.btnOpen.Click += new System.EventHandler(this.btnOpen_Click);
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(7F, 12F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(600, 520);
            this.Controls.Add(this.btnOpen);
            this.Controls.Add(this.viewer);
            this.Name = "Form1";
            this.Text = "Form1";
            this.ResumeLayout(false);
        }

        private ImageGlass.ImageBoxEx viewer;
        private System.Windows.Forms.Button btnOpen;

        #endregion      
    }
}

Form1.cs의 코드는 다음과 같습니다.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using System.Diagnostics;

namespace ExamImageGlass
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            
            viewer.AllowClickZoom = true; //마우스 클릭으로 확대/축소
            viewer.ShowPixelGrid = true; //확대 시 Pixel Grid 활성화하기
        }

        private void btnOpen_Click(object sender, EventArgs e)
        {
            OpenFileDialog dlg = new OpenFileDialog();
            if (dlg.ShowDialog() == DialogResult.OK)
            {
                viewer.Image = Image.FromFile(dlg.FileName);
            }
        }
    }
}

ExamImageGlass.zip

0.01MB

사용 방법이 너무 간단하죠? AllowClickZoom은 마우스의 왼쪽 버튼은 확대, 오른쪽 버튼은 축소 동작을 의미합니다. 그리고 ShowPixelGrid는 확대 배율이 높아졌을 때 Grid를 표현하는 옵션을 의미합니다. 자세한 동작 결과는 아래 애니메이션을 보겠습니다.

ImageGlass 동작 화면

예제로 만든 뷰어보다 더 부드럽고 자연스럽게 그려집니다. 또한, 마우스 이동이나 스크롤 바 이동에 따라 이미지 이동도 가능합니다. 심지어 확대 배율이 높을 경우 Pixel Grid가 표현되어 구분이 더욱 쉬워집니다. 만약, 스크롤 바 사용을 원치 않는다면 사용하지 않겠다는 옵션을 지정하면 됩니다.

지금은 예시로 이미지를 불러오고 확대/축소 및 이동하는 모습만 보여드렸는데요. ImageGlass 사진 뷰어처럼 자르기 기능이나 좌표에 따라 픽셀 값을 얻는 기능, 채널 추출 등 필요한 기능을 사용할 수 있습니다.