이번 글에서는 DevExpress 간단한 설명과 연동하는 방법 그리고 간단한 예제까지 작성해보도록 하겠습니다.
필자는 Visual Studio 2022 / DevExpress v22.2.6을 기반으로 예제를 작성하였으나 Visual Studio 2017, 2019 등 여러 버전에서도 동일하게 사용하고 있습니다.
DevExpress란
DevExpress(Developer Express)는 .NET 기반 애플리케이션 개발을 위한 강력한 UI 및 데이터 처리 컴포넌트 라이브러리를 제공하는 도구입니다. 이 도구는 Windows Forms, WPF, ASP.NET, Blazor, MAUI 등 다양한 플랫폼에서 고급 사용자 인터페이스와 기능을 구현할 수 있도록 설계되었습니다. DevExpress는 특히 빠른 개발과 사용자 경험(UX) 개선에 중점을 두고 있으며, 이를 통해 개발자들이 효율적으로 고품질의 애플리케이션을 제작할 수 있도록 지원합니다.
DevExpress(Developer Express)는 .NET 기반 애플리케이션 개발을 위한 강력한 UI 및 데이터 처리 컴포넌트 라이브러리를 제공하는 도구입니다. 이 도구는 Windows Forms, WPF, ASP.NET, Blazor, MAUI 등 다양한 플랫폼에서 고급 사용자 인터페이스와 기능을 구현할 수 있도록 설계되었습니다. DevExpress는 특히 빠른 개발과 사용자 경험(UX) 개선에 중점을 두고 있으며, 이를 통해 개발자들이 효율적으로 고품질의 애플리케이션을 제작할 수 있도록 지원합니다.
DevExpress의 주요 특징
DevExpress의 주요 특징에 대해 자세히 보려면 더보기를 클릭해주세요.
- 다양한 UI 컨트롤 제공
- DevExpress는 그리드(GridControl), 차트(ChartControl), 캘린더(Scheduler), 리포트(Reporting) 등 수백 가지의 고성능 UI 컨트롤을 제공합니다.
- 복잡한 데이터 시각화와 인터랙티브 기능을 간단히 구현할 수 있습니다.
- 크로스 플랫폼 지원
- Windows Forms, WPF, ASP.NET, Blazor, MAUI 등 다양한 플랫폼에서 동일한 수준의 UI와 기능을 구현할 수 있습니다.
- 데스크톱 애플리케이션부터 웹 및 모바일 앱까지 폭넓게 활용 가능합니다.
- 데이터 관리 및 바인딩
- 강력한 데이터 처리 기능을 통해 데이터 소스와 UI 컨트롤 간의 간단한 연동을 제공합니다.
- 대용량 데이터를 처리하는 데 최적화된 컨트롤을 포함하고 있어 퍼포먼스가 뛰어납니다.
- 리포팅 및 대시보드
- DevExpress의 Reporting 도구를 사용하면 PDF, Excel, Word 등 다양한 포맷의 리포트를 쉽게 생성할 수 있습니다.
- 대시보드 도구를 활용해 복잡한 비즈니스 데이터를 직관적으로 시각화할 수 있습니다.
- 고급 테마 및 스타일
- DevExpress는 어두운 테마(Dark Theme)를 포함하여 다양한 테마를 기본으로 제공하며, 커스터마이징을 통해 브랜드 아이덴티티에 맞는 UI를 제작할 수 있습니다.
- 사용자 경험(UX)을 향상시키는 세련된 디자인을 지원합니다.
- 생산성 도구
- CodeRush와 같은 DevExpress의 추가 도구는 코드 리팩토링, 템플릿 생성, 디버깅 등을 간소화하여 개발 속도를 높입니다.
DevExpress의 주요 장점
DevExpress의 주요 장점에 대해 자세히 보려면 더보기를 클릭해주세요.
- 개발 시간 단축
- DevExpress는 개발자가 공통적인 UI와 데이터를 처리하는 데 소요되는 시간을 줄일 수 있도록 최적화된 기능을 제공합니다.
- 간단한 설정만으로 복잡한 기능을 구현할 수 있습니다.
- 성능 최적화
- DevExpress는 대용량 데이터를 처리하거나 복잡한 UI 작업을 실행하는 데 최적화되어 있어, 고성능 애플리케이션 개발에 적합합니다.
- 강력한 커뮤니티와 기술 지원
- DevExpress는 방대한 공식 문서, 샘플 코드, 포럼 및 기술 지원 서비스를 제공합니다.
- 실무에서 발생하는 다양한 문제를 해결할 수 있는 리소스를 쉽게 찾을 수 있습니다.
DevExpress가 사용되는 사례
DevExpress가 사용되는 사례에 대해 자세히 보려면 더보기를 클릭해주세요.
- 비즈니스 애플리케이션: ERP, CRM, 금융 소프트웨어 등 데이터 중심의 애플리케이션.
- 데이터 시각화: 복잡한 데이터를 차트와 그래프로 표현하는 대시보드 애플리케이션.
- 리포트 및 문서 생성: PDF, Excel, Word 리포트를 동적으로 생성하여 출력하는 시스템.
- 인터랙티브 UI: 사용자 경험이 중요한 애플리케이션에서 빠르고 직관적인 UI 제공.
DevExpress 설치
DevExpress를 설치하는 방법에 대해 설명합니다.
DevExpress 다운로드
DevExpress를 다운로드하려면 다음 단계를 따라 진행하세요.
- DevExpress 웹사이트 접속 및 계정 생성
- DevExpress 공식 웹사이트에 접속하여 계정을 생성합니다.
- 계정을 생성한 후 무료 체험판 또는 구매한 라이선스 버전을 다운로드합니다.
.NET UI Controls & Components for Developers of Mobile, Desktop, Web, BI Reporting Apps
DevExpress provides best-in-class UI controls, tools, and frameworks for WinForms, ASP.NET, MVC, Blazor, ASP.NET Core, WPF, VCL, Xamarin, and JavaScript developers.
www.devexpress.com
- Installer 실행
- 다운로드한 설치 파일(DevExpressUniversalInstaller.exe)을 실행합니다.
- 설치 과정에서 필요한 구성 요소(예: .NET Framework, Visual Studio Extension)를 선택하여 설치를 진행합니다.
- 설치 옵션을 선택하고 진행 중인 상태의 이미지.
- Visual Studio 통합 확인
- 설치가 완료되면 Visual Studio를 열고 DevExpress 메뉴가 추가되었는지 확인합니다.

DevExpress 프로젝트 적용
DevExpress 라이브러리를 프로젝트에 적용하는 방법에 대해 설명합니다.
라이브러리 자동 참조




라이브러리 수동 참조



설치 경로에서 사용하고 싶은 dll에 대해 직접 추가하여 사용
기본 테마 적용하기
프로젝트에 DevExpress 추가 시 아래와 같은 DevExpress Project Settings 페이지가 생성됩니다.

저는 예제 작성을 위해 Skin Name은 The Bezier Skin Palette는 Twenty Gold로 설정하였습니다.
그리고 Form1.cs의 디자인을 들어가서 Form을 XtraForm으로 변경해줍니다.


예제 작성
- 컨트롤 추가하기
도구상자에서 GridControl을 검색 후 Form1 디자인으로 Drag & Drop 해주세요.
그리고 GridControl을 클릭한 후 Dock 메뉴를 Fill로 변경하면 아래와 같이 적용 됩니다.Grid Control을 추가하고 Dock Fill한 이미지 - 데이터 연동하기
- UserData 클래스 추가
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace DevExpressExample
{
public class UserData
{
[DisplayName("이름")]
public string Name { get; set; }
[DisplayName("이메일")]
public string Email { get; set; }
[DisplayName("나이")]
public int Age { get; set; }
[DisplayName("비밀번호")]
[Browsable(false)]
public string Password { get; set; }
public UserData(string name, string email, int age, string password)
{
Name = name;
Email = email;
Age = age;
Password = password;
}
}
}
-
- Form 수정
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;
namespace DevExpressExample
{
public partial class Form1 : DevExpress.XtraEditors.XtraForm
{
public List<UserData> userDatas;
public Form1()
{
InitializeComponent();
InitializeUserData();
InitializeControl();
}
public void InitializeUserData()
{
userDatas = new List<UserData>();
UserData userData1 = new UserData("홍길동", "test@test.com", 35, "test1234");
UserData userData2 = new UserData("이름2", "name@test.com", 28, "test5678");
userDatas.Add(userData1);
userDatas.Add(userData2);
}
public void InitializeControl()
{
gridControl1.DataSource = userDatas;
gridControl1.RefreshDataSource();
}
}
}