C#을 이용하여 1:1 비동기 채팅 프로그램을 만들어보자! - 윈폼 디자인편

안녕하세요!

이전 글에서는 어떤 약속을 갖고 데이터를 주고 받을 것인지에 대한 내용을 이야기했습니다.

이번 글에서는 채팅 프로그램의 디자인과 어떻게 상호작용을 할 것인지에 대해 이야기를 해보도록 하겠습니다.

이번 프로젝트에서는 서버/클라이언트 구분 없이 프로그램 하나로 서버의 기능과 클라이언트의 기능을 모두 수행하도록 작성할 예정입니다.
때문에 프로그램의 구조가 서버/클라이언트로 나뉜 프로그램보다는 다소 복잡해질 수 있습니다.

(클릭하시면 원본 이미지로 보실 수 있습니다)

간단하게 그림으로 표현해봤는데요, 폼은 총 3개로 구성되며 각각의 역할은 다음과 같습니다.

• 실질적으로 연결 또는 연결 대기를 하고, 텍스트나 파일(사진)을 주고받는 작업을 수행하는 폼 (MainForm)
• 사진을 수신한 경우에 사진을 보여주는 폼 (ImageViewerForm)
• 파일이나 사진을 보낼 때/받을 때의 진행 상황을 보여주는 폼 (DataProgressForm)

이전 글에서는 어떤 약속을 갖고 데이터를 주고 받을 것인지에 대한 내용을 이야기했습니다.

진행 상황을 표시하는 경우, 대화 기록 하단에 별도의 컨트롤을 두는 것이 낫다고 생각되어 변경하였습니다.

MainForm 디자인

총 9개의 컨트롤(Label, TextBox, Button 및 ProgressBar) 로 구성되어 있으며 Label을 제외한 각 컨트롤의 역할은 다음과 같습니다.

• txtAddress (TextBox): 연결할 서버의 주소를 입력받음
• btnConnect (Button): 지정된 주소로 연결을 시도
• btnListen (Button): 클라이언트의 연결을 대기 (서버에 연결하거나 클라이언트의 연결을 대기하는 작업 중 하나만 할 수 있다)
• txtHistory (TextBox): 대화 기록을 저장
• prgData (ProgressBar): 파일이나 사진을 전송하거나 수신할 때 진행 상황을 표시해줌
• txtMessage (TextBox): 보낼 텍스트를 입력받음
• btnSend (Button): 입력된 텍스트를 전송
• btnSendFile (Button): 파일 또는 사진을 전송

기본적으로 프로그램을 실행했을 때 주소를 저장하는 텍스트박스(txtAddress)에는 로컬의 IP 주소를 표시하려고 합니다.
아니면 별도의 레이블 컨트롤을 하나 두고 그 레이블에 IP 주소를 표시해도 괜찮을 것 같네요.

다음 디자인은 사진을 받았을 때 표시해줄 폼 디자인입니다.

ImageViewerForm 디자인

간단하게 이미지를 표시해주기 위한 PictureBox 및 간단한 상호작용을 위한 버튼 두개가 배치되어 있습니다.

• picReceived (PictureBox): 수신받은 사진을 표시
• btnSave (Button): 수신받은 사진을 저장
• btnClose (Button): 폼을 닫음

디자인은 여기까지 하도록 하고, 다음 글에서는 실질적인 코딩과 패킷 전송 등에 대해 작성할 계획입니다.

읽어주셔서 감사합니다.