순서도는 프로세스의 개별 단계를 집합적으로 나타내는 도형과 기호로 가득 찬 다이어그램입니다.

이는 데이터를 시각화하는 효과적인 수단입니다.

순서도를 사용하면 복잡한 프로세스를 쉽게 설명하여 가독성을 높일 수 있습니다.

또한 이해도와 데이터 유지율을 증대하여 여러 산업 분야의 전문가에게 특정 요구에 적합한 다양한 이점을 제공합니다.

예를 들어 보겠습니다.

1. 금융 및 회계 분야 전문가: 복잡한 금융 프로세스, 감사 프로세스 및 위험 관리 전략 이해

2. 제조 및 엔지니어링 분야: 생산 워크플로를 시각화하고 품질 관리 작업을 유지

3. 기업 환경: 비즈니스 프로세스를 계획해 병목 현상을 파악 및 생산성 최적화

또, 의사 결정 과정을 개선할 수 있습니다. 하지만 여기에서 새로운 문제가 발생합니다.

누가 순서도를 유지 관리할 수 있을까요? 기업에서 순서도의 표준을 설정하는 이는 누구일까요?

순서도가 어떻게 공유되거나 공동 작성되는지 알고 계신가요? 또한, 순서도를 만드는 데 어떤 소프트웨어가 사용될까요?

소프트웨어 개발자는 .NET 스프레드시트 컴포넌트 API, WinForms용 Spread.NET을 사용해 .NET 응용 프로그램 런타임 시 최종 사용자에게 Excel과 같은 스프레드시트 디자이너를 제공합니다.

Spread.NET Designer를 사용하면 친숙한 도구 모음 UI가 있는 향상된 도형 엔진으로 도형을 추가하고, 사용자 정의하여 순서도를 쉽게 디자인할 수 있습니다.

Spread.NET Designer는 Excel과 유사한 도형 테마, 스타일 및 상호 작용을 제공합니다.  

추가적으로 도형 연결 및 그룹화를 지원하여 순서도의 구조가 변경되지 않도록 보장합니다.

이번 스터디에서는 스프레드시트 디자이너 컴포넌트를 사용하여 .NET WinForms 응용 프로그램에서 런타임 시 도형 작업 순서도를 만드는 방법을 자세히 설명합니다.

• .NET WinForms 프로젝트 설정
• 향상된 도형 엔진 활성화
• 스프레드시트 순서도에 도형 추가
• 도형에 텍스트 추가
• 스프레드시트 순서도에 도형 추가
• 도형에 스타일 적용
• 순서도 도형 그룹화
• .NET WinForms 응용 프로그램에서 순서도 저장 및 표시

Visual Studio 2022에서 Windows Forms 응용 프로그램을 만들고 .NET 6를 프레임워크로 선택합니다.

참고: 이번 스터디에서는 Visual Studio 2022를 사용합니다. 이전 버전 사용 역시 가능합니다.

프로젝트가 생성되면 NuGet Manager를 사용하여 GrapeCity.Spread.WinForms 및 GrapeCity.Spread.WinForms.Design을 설치합니다.

자세한 내용은 Spread.NET 문서를 참고해 주시길 바랍니다.

Spread.NET가 설치되었으므로 Form1.cs 디자이너 프로젝트로 이동합니다.

VS 디자이너의 도구 모음에서 FpSpread 및 FpSpreadDesigner 컴포넌트를 찾습니다.

FpSpread 컴포넌트를 양식에 드래그하여 놓은 다음 FpSpreadDesigner 컴포넌트도 드래그합니다. 

다음으로 양식에 버튼을 추가합니다.

런타임에 FpSpreadDesigner를 표시하려면 Forms1.cs 파일의 버튼 클릭 이벤트 내에서 Spread.NET Designer API의 ShowDialog 메서드를 호출합니다.

private void button2_Click(object sender, EventArgs e)
{
  fpSpreadDesigner2.ShowDialog(fpSpread2);
}

향상된 도형 엔진 활성화

프로젝트에 Spread.NET이 포함된 상태에서 향상된 도형 엔진을 활성화해야 합니다.

향상된 도형 엔진은 기본적으로 사용할 수 없습니다. 하단의 두 가지 방법을 이용해야 합니다.

• 코드 입력을 통한 활성화
• Spread.NET Designer를 사용하여 활성화

1. 코드 입력을 통한 활성화 

스프레드시트에서 도형을 사용하기 전에 다음 코드를 사용하여 EnhancedShapeEngine 속성을 수동으로 활성화합니다.

// Enable the shape engine        
fpSpread2.Features.EnhancedShapeEngine = true;

2. Spread.NET Designer를 사용하여 활성화

디자이너의 UI를 사용하여 이 속성을 활성화하려면 먼저 디자이너 응용 프로그램을 시작합니다.

Spread Designer의 오른쪽 패널을 사용하여 드롭다운에서 Spread를 선택합니다.

다음으로 기능을 찾아 확장한 다음 EnhancedShapeEngine을 'True'로 변경합니다.

 

.NET 스프레드시트 순서도에 도형 추가 

.NET 응용 프로그램 런타임 중, 최종 사용자가 양식의 'Create Flowchart(순서도 만들기)' 버튼을 클릭합니다.

그러면 Spread.NET Designer가 호출되고 순서도를 위한 도형을 스프레드시트에 추가하는 데 사용할 수 있습니다.

Spread Designer는 모든 도형 사용하여 많은 일상적인 작업을 수행할 수 있습니다.

Spread Designer의 Insert(삽입) 탭을 사용하여 도형 드롭다운을 선택합니다.

지금은 마우스가 놓여져 있는 위치의 순서도 도형 섹션을 사용합니다.

프로세스에 대한 대체 프로세스 도형 5 개와 순서도의 처음과 끝이 될 연결선 도형 2 개를 추가합니다.

이러한 도형을 추가하면 다음과 같은 스프레드시트가 표시되어야 합니다.

 

도형에 텍스트 추가 

순서도의 이벤트, 단계 또는 동작 순서를 설명하기 위해 도형에 텍스트를 추가해야 합니다. 

디자이너에서 도형에 텍스트를 추가하려면 도형을 두 번 클릭합니다. 그럼 커서가 표시됩니다.

이 데모에서는 대체 프로세스 도형 5 개에 다음 텍스트를 추가합니다.

FR Y14A, Update Global Drivers, Adjustments, Business Line Input, Adjustment Review.

참고: (도형 내 단어 사이에) enter를 입력할 수 있으므로 서식을 쉽게 읽을 수 있습니다.

사용자는 홈 탭 옵션을 사용하여 도형 및 텍스트의 크기, 맞춤 및 색을 쉽게 조정할 수 있습니다. 선택된 모든 도형에 동일한 스타일을 적용하여 시간을 절약해 보세요. 

Shift 키를 누른 상태에서 도형을 클릭하여 여러 도형을 선택합니다.

도형이 선택되면 글꼴 크기를 16, 글꼴 색을 검은색으로 변경합니다.

다음으로, 도구 모음의 맞춤 부분을 찾아 중앙 및 가운데 맞춤을 선택합니다.

텍스트에 맞게 도형을 조정해야 한다는 사실을 우리는 알고 있습니다.

이전과 같은 모든 도형을 선택한 다음 도형 서식 탭으로 이동하여 리본의 오른쪽에서 크기 부분을 찾습니다.

너비를 160으로 설정합니다. 높이는 100으로 유지합니다. 

 

스프레드시트 순서도에 도형 추가 

도형에 연결선을 추가하여 차트의 프로세스 흐름을 만들어 보겠습니다.

선과 화살표로 도형을 연결할 수 있습니다.

필요한 Elbow Arrow(꺾인 화살표) 및 Line Arrow(선 화살표) 도형을 추가하려면 도형에 텍스트 추가한 것과 동일한 프로세스를 따르면 됩니다.

연결선 화살표의 손잡이 위로 마우스를 가지고 가면 커서가 변경되는 것을 확인할 수 있습니다.

커서가 변경되면 연결선 끝접을 클릭하여 연결하고자 하는 첫 번째 도형의 테두리로 끌어다 놓습니다.

연결선을 드래그하는 도형에 연결선을 고정할 수 있는 위치를 보여 주는 연결점이 표시됩니다.

위치가 선택되면 연결점이 녹색으로 변경되어 선이 도형에 연결되었다는 것을 보여 줍니다.

이제 반대쪽에 해당 과정을 반복하여 도형들을 연결합니다.

이번 데모의 경우 다음과 같이 도형을 연결합니다.

 

도형에 스타일 적용 

도형에 스타일이 지정된 테마를 적용 혹은 사용자 정의 스타일의 스타일을 적용하는 방법에 대해 설명합니다.

사용자는 도형 서식 탭의 도형 스타일 섹션을 사용하여 도형의 배경 색상과 윤곽선 석생을 사용자 정의할 수 있습니다.

이 예에서는 순서도 도형 및 연결선의 스타일을 다음과 같이 지정합니다.

 

순서도 도형을 그룹화하면 관련된 모든 요소가 함께 분류되고 의도된 레이아웃이 유지되어, 우발적 수정 위험을 줄일 수 있습니다.

Spread.NET의 디자이너에서는 context menu(컨텍스트 메뉴) 및 도구 모음의 Group Objects(개체 그룹화) 버튼을 사용하여 도형을 그룹화할 수 있습니다.

상황에 맞는 메뉴를 사용하여 도형을 그룹화하는 방법에 대해 알아보겠습니다.

먼저, shift 키를 누른 상태에서 도형을 선택합니다.

다음으로 마우스 오른쪽 버튼을 클릭하고 상황에 맞는 메뉴 옵션에서 그룹을 선택합니다.

아래에서는 기호를 '시작' 및 '중지'를 나타내는 시작 및 종료 도형의 기호를 그룹화합니다.

도구 모음을 사용하여 도형을 그룹화하려면 그룹화할 도형들을 선택한 다음 도형 서식 탭으로 이동합니다.

Group Objects(개체 그룹화) 버튼은 Arrange(정렬) 섹션에 있습니다.

이를 시연하기 위해 도형을 그룹화하여 일부 연결선에 대한 레이블을 만들어 보겠습니다.

Spread.NET의 연결선에서는 Excel과 마찬가지로, 프로세스 흐름에 자동으로 텍스트를 추가할 수 없습니다.  

도형을 추가하고, 배경색과 아웃라인 색을 제거한 다음 연결선 도형으로 그룹화해야 합니다.

 

.NET WinForms 응용 프로그램에서 순서도 저장 및 표시 

순서도의 모양이 마음에 들면 이제 디자이너의 스프레드시트를 WinForms 응용 프로그램에 적용합니다.

디자이너의 도구 모음에서 파일 메뉴로 이동한 후 적용 후 종료를 선택하여 변경 사항을 모두 적용합니다.  

Spread.NET Designer를 종료한 뒤, 사용자가 디자이너를 다시 열어도 순서도를 변경할 수 있습니다.

최종 사용자는 또한 Spread.NET Designer의 가져오기 및 내보내기 기능을 사용해 응용 프로그램 내에서 만든 .NET 순서도를 Excel(.XLSX) 파일로 내보내거나 기존 Excel 파일 순서도를 가져올 수 있습니다.

최종 사용자가 친숙한 스프레드시트 UI를 사용하여 쉽고 빠르게 순서도를 만들고 디자인 및 수정할 수 있는 .NET 6 WinForms 응용 프로그램을 만들어 보았습니다!

.NET 스프레드시트 컴포넌트 

이 문서는 세계에서 가장 많이 판매된 .NET 스프레드시트 컴포넌트인 Spread.NET의 전체 기능 중 극히 일부입니다.

문서에서 사용 가능한 많은 기능을 살펴보고, 데모 탐색기를 다운로드하여 기능의 실제 작동을 확인하고, 샘플 코드와 상호 작용하세요!

스프레드시트 컴포넌트를 .NET 응용 프로그램에 통합하면 사용자의 경험을 쉽게 정의하고 익숙한 스프레드시트 기능을 제공합니다. 

Spread.NET 및 최신 릴리스에 추가된 새 기능에 대해 자세히 알아보려면 Spread.NET v16 서비스팩 2 출시 글을 확인해 보시길 바랍니다.

지금 바로 Spread.NET을 다운로드하여 직접 테스트해 보세요!

• Spread.NET 공식 홈페이지
• Spread.NET 튜토리얼 및 샘플
• Spread.NET Q&A
• Spread.NET FAQ