MDI GUI 구성 : dock type vs Viewer type 비교

MDI GUI 구성 : dock type vs  Viewer type 비교

C#에서 MDI(Multiple Document Interface) GUI를 구성할 때, Dock 형태와 Viewer 형태로 처리하는 것은 사용자 인터페이스의 구성과 상호작용 방식에서 중요한 차이점을 가지며, 각각의 장단점이 있습니다. Dock 형태와 Viewer 형태는 사용자의 작업 스타일과 필요에 따라 선택할 수 있습니다. 복잡한 작업 환경에서 여러 창과 도구를 동시에 사용해야 한다면 Dock 형태가 유리할 수 있고, 간결하고 집중적인 작업 환경을 선호한다면 Viewer 형태가 더 적합할 수 있습니다. 또한, 현대의 많은 응용 프로그램은 사용자의 필요에 따라 두 가지 방식을 모두 지원하여 유연성을 제공하기도 합니다.

Dock Type vs Viewer Type 장단점 비교

1) Dock 형태

Dock 형태는 창이나 패널을 주 윈도우의 특정 위치에 고정시켜 사용자가 여러 창을 동시에 볼 수 있도록 하는 방식입니다. Visual Studio의 솔루션 탐색기나 속성 창 같은 것이 좋은 예입니다.

 

- 장점

• 공간 활용: 사용자가 필요한 정보를 한 눈에 볼 수 있도록 여러 창을 효율적으로 배열할 수 있습니다.
• 직관적인 인터페이스: 사용자가 자주 사용하는 도구나 창을 쉽게 접근할 수 있게 해주며, 작업 흐름을 개선합니다.
• 사용자 정의: 사용자가 자신의 작업 스타일에 맞게 인터페이스를 조정할 수 있습니다.

- 단점

• 복잡성: 많은 도구와 창이 동시에 열릴 때 인터페이스가 복잡해질 수 있습니다.
• 리소스 사용: 여러 창과 도구를 동시에 운영하면 메모리와 CPU 사용량이 증가할 수 있습니다.

 

[ Dock 형태 구현 예제 ]

 

Dock 형태의 GUI는 주로 DockPanel이나 유사한 컨트롤을 사용하여 구현합니다. 이 예제에서는 WPF(Window Presentation Foundation)를 기반으로 간단한 Dock 형태의 GUI를 구현합니다. 이 코드는 메뉴, 툴바, 상태 바, 네비게이션 패널, 그리고 중앙의 문서 뷰어를 포함한 기본적인 Dock 형태의 인터페이스를 구성합니다.

<Window x:Class="DockExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Dock Example" Height="450" Width="800">
    <DockPanel LastChildFill="True">
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="File"/>
            <MenuItem Header="Edit"/>
            <MenuItem Header="View"/>
        </Menu>
        <ToolBar DockPanel.Dock="Top">
            <Button Content="Save"/>
            <Button Content="Open"/>
        </ToolBar>
        <StatusBar DockPanel.Dock="Bottom">Status Bar</StatusBar>
        <ListBox DockPanel.Dock="Left">Navigation Panel</ListBox>
        <RichTextBox>Document Viewer</RichTextBox>
    </DockPanel>
</Window>

반응형

2) Viewer 형태

Viewer 형태는 하나의 주 창에서 여러 문서를 탭을 통해 전환하면서 볼 수 있는 방식입니다. 웹 브라우저에서 여러 웹페이지를 탭으로 관리하는 것과 유사합니다.

 

- 장점

• 간결함: 사용자 인터페이스가 간결해져서 사용자가 현재 작업에 더 집중할 수 있습니다.
• 자원 효율성: 현재 활성화된 탭만 리소스를 사용하기 때문에 전체적으로 시스템 자원을 더 효율적으로 사용할 수 있습니다.
• 사용 용이성: 새로운 사용자도 인터페이스를 쉽게 이해하고 사용할 수 있습니다.

- 단점

• 작업 영역 제한: 한 번에 하나의 문서나 뷰만 볼 수 있어서 여러 문서를 동시에 비교하거나 참조하기 어려울 수 있습니다.
• 탐색 문제: 많은 수의 탭이 열려 있을 때 원하는 문서로 빠르게 전환하는 것이 어려울 수 있습니다.

 

[ Viewer 형태 구현 예제 ]

 

Viewer 형태의 GUI는 TabControl을 사용하여 구현할 수 있습니다. 각 탭은 개별 문서나 뷰를 나타냅니다. 다음은 WPF를 사용한 간단한 Viewer 형태의 GUI 구현 예제입니다. 이 코드는 세 개의 탭을 가진 TabControl을 사용하여, 각 탭에는 RichTextBox 컨트롤을 통해 문서의 내용을 표시합니다.

<Window x:Class="TabExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Tab Example" Height="450" Width="800">
    <Grid>
        <TabControl>
            <TabItem Header="Document 1">
                <RichTextBox>Content of Document 1</RichTextBox>
            </TabItem>
            <TabItem Header="Document 2">
                <RichTextBox>Content of Document 2</RichTextBox>
            </TabItem>
            <TabItem Header="Document 3">
                <RichTextBox>Content of Document 3</RichTextBox>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

---

Dock 형태와 Viewer 형태의 특징 및 예시 정리

특징	Dock 형태	Viewer 형태
구현 방식	DockPanel과 같은 컨트롤 사용	TabControl과 같은 컨트롤 사용
주 사용 사례	복잡한 작업 환경, 여러 도구와 창 필요	단순하고 집중적인 작업 환경, 문서나 뷰 탭 전환
장점	여러 창과 도구를 효율적으로 배열, 공간 활용 극대화	인터페이스 간결, 시스템 자원 효율적 사용
단점	인터페이스 복잡성 증가, 리소스 사용량 증가	동시에 여러 문서 비교 어려움, 탐색 문제 발생 가능
예시	Visual Studio, Adobe Photoshop	Google Chrome, Microsoft Edge