posts

절대 좌표와 배치

WinForm 디자인의 핵심은 단순히 컨트롤을 배치하는 것이 아니라, 변화하는 환경(해상도, 창 크기, 시스템 폰트 확대 등)에 어떻게 대응하느냐에 있다.

• Anchor: 컨트롤의 가장자리와 부모 컨테이너의 가장자리 사이의 거리를 고정한다.

  • Top, Left: 창이 커져도 왼쪽 상단에 가만히 있는다.

  • Top, Right: 창이 오른쪽으로 넓어지면 컨트롤도 오른쪽으로 따라 이동한다.

  • Top, Left, Right: 창이 넓어지면 컨트롤의 좌우 길이도 함께 늘어난다.

  • 모든 방향(Top, Bottom, Left, Right): 창이 커지는 만큼 컨트롤도 사방으로 늘어난다.

• Dock: 컨트롤을 부모 컨테이너의 특정 면에 밀착시키고 해당 영역을 가득 채운다.

  • Top/Bottom: 메뉴바나 상태 표시줄처럼 위 아래를 가득 채운다. 좌우 길이는 부모를 따라 자동으로 조절된다.

  • Left/Right: 사이드바 메뉴를 만들 때 사용한다.

  • Fill: 부모 컨테이너의 남은 모든 공간을 차지한다. 메인 작업 영역에 가장 많이 쓰인다.

  • 순서의 중요성: 여러 컨트롤이 Dock 설정될 경우, 먼저 추가된 컨트롤이 우선권이 가진다.

고급 레이아웃 컨테이너

단순히 Anchor와 Dock만으로는 복잡한 UI를 만들기 어렵다. 이를 위해 WinForm 디자인은 전문적인 레이아웃용 그릇을 제공한다.

• FlowLayoutPanel(유동 배치 패널): 웹 페이지의 HTML 요소처럼 컨트롤들을 순서대로 나열한다. 공간이 부족하면 자동으로 다음 줄로 넘긴다.

  • 주요 속성: FlowDirection(왼쪽에서 오른쪽, 위에서 아래 등), WrapContents(줄바꿈 여부)

  • 용도: 버튼 목록, 이미지 갤러리처럼 개수가 유동적인 항목을 나열할 때 최적이다.

• TableLayoutPanel(격자 배치 패널): HTML의 <table>이나 Excel 시트처럼 행(Row)과 열(Column)로 공간을 나눈다.

  • 주요 속성: Absolute(절대값), AutoSize(자동 크기 조절), Percent(백분율)

  • 용도: 로그인 화면, 대시보드 화면 분할 구현에 사용한다.

• SplitContainer(분할 컨테이너): 화면을 두 개의 패널로 나누고, 사용자가 그 경계선을 마우스로 드래그하여 크기를 조절할 수 있다.

  • 용도: 탐색기(왼쪽 트리-오른쪽 목록), 이메일 클라이언트 구현에 사용한다.

입력 및 텍스트 컨트롤 심화

WinForm 디자인은 텍스트 목록 나열을 위한 기능도 제공한다.

• TextBox: Multiline을 True로 하면 메모장처럼 쓸 수 있고, PasswordChar를 설정하면 비밀번호 입력기가 된다. AutoComplete 속성을 활용하면 구글 검색처럼 자동 완성 기능을 구현할 수 있다.

• MaskedTextBox: 입력 형식 강제에 사용한다. 전화번호나 날짜처럼 정해진 형식이 아닌 문자가 들어오는 것을 원천 차단한다.

• RichTextBox: 단순 텍스트를 넘어 폰트 색상, 굵기, 이미지 삽입, RTF 문서 로딩이 가능하다.

선택 및 리스트형 컨트롤

WinForm 디자인은 드롭다운, 리스트 뷰와 같은 기능도 지원한다.

• DropDownStyle: DropDown은 사용자가 직접 텍스트를 입력할 수 있고, DropDownList는 목록에 있는 것을 선택할 수 있는 기능이다.

• ListBox, CheckedListBox: 여러 항목을 보여주고 선택받을 때 사용한다. SelectionMode를 통해 다중 선택 기능을 켤 수 있다.

• ListView: 윈도우 탐색기의 파일 목록과 같은 형태이다.

• TreeView: 폴더 구조나 조직도처럼 부모와 자식 관계의 데이터를 보여준다. Nodes 컬렉션을 통해 프로그래밍 방식으로 데이터를 추가 및 삭제한다.

사용자 경험을 위한 보조 컨트롤

WinForm 디자인은 사용자 경험(UX)을 위한 보조 컨트롤 기능도 지원한다.

• ToolTip: 컨트롤 위에 마우스를 올렸을 때 설명을 띄운다. 폼에 하나만 올려두면 모든 컨트롤의 속성창에 개별적으로 메시지를 적을 수 있다.

• ErrorProvider: 사용자가 잘못된 값을 입력했을 때, 컨트롤 옆에 빨간 아이콘을 깜빡이며 경고를 보여준다.

• ProgressBar, BackgroundWorker: 작업의 진행 상태를 시각적으로 보여준다.

• TabControl: 한 화면에 너무 많은 정보가 있을 때 페이지별로 나누어 공간을 절약하낟.

리소스 관리

리소스 관리를 위한 ImageList는 TreeView, ListView, Button 등에 들어가는 아이콘들을 한곳에 모아 관리하는 저장소로, 각 컨트롤의 ImageList 속성에 연결한 후, ImageIndex 번호만 지정하면 통일감 있는 UI 아이콘 배치가 가능하다.

마진과 패딩

마진(Margin)과 패딩(Padding)은 레이아웃을 미세 조정할 때 반드시 구분해야 한다.

• Margin: 컨트롤 외부의 여백이다.

• Padding: 컨트롤 내부의 여백이다.