Skip to content

Chat UI의 구조

Woong edited this page Oct 12, 2023 · 1 revision

고민한점

최초에 팀의 기획 및 디자이너로부터 전달받은 [채팅화면, 채팅내역]을 받았을 때, 두 개의 뷰의 역할 및 기능상에서는 명확한 차이가 있었지만, "메시지를 표시해줘야 한다"는 기본적인 필요에 있어서는 공통점이 보였습니다.

공통 기능 메시지를 UICollectionView 내에 보여줘야함
채팅 화면의 기능 유저의 메시지 입출력 처리, 내부저장소 쓰기, 외부저장소 쓰기, API요청 등
채팅내역 화면의 기능 내부저장소 읽기

이런 공통점을 바탕으로, ChatInterfaceVC라는 상위 ViewController를 도입하는 것이 유용하다고 판단하였습니다.

위와 같이 설계함으로써 중복되는 코드나 로직을 최소화하고, 공통된 기능이나 UI 컴포넌트는 상위 ChatInterfaceVC에 구현하여 하위 VC들이 해당 기능이나 컴포넌트를 재사용할 수 있었습니다.

또한, 프로젝트를 진행해 나감에 있어 이런 상속을 통한 구조 설계는 유지 보수 측면에서도 큰 장점을 가질 수 있었으며, 미래에 채팅 관련 화면이나 버전업을 통해 기능이 추가될 경우에도, ChatInterfaceVC의 공통 기능을 상속받아 쉽게 확장하거나 변형할 수 있게 되었습니다.

결론적으로, 상속을 통한 구조적 접근 방식은 두 화면의 공통점과 차이점을 명확하게 파악하고, 그에 따라 효율적이고 확장성 있는 설계를 가능하게 해 주었습니다.


채팅 인터페이스 관련 객체의 세부 설명

  1. MessagesViewController
    • MessageKit에서 제공하는 기본 UIViewController로서 채팅 인터페이스를 보여주기 위한 기본 구현이 포함되어 있습니다.
    • 메시지의 기본 표시 및 관리를 위한 기본 구조와 메커니즘을 제공합니다.
    • 콜렉션 뷰를 사용하여 메시지를 표시하고, 입력 바 인터페이스와 기타 여러 유용한 기능을 제공합니다.
  2. ChatInterfaceViewController
    • 애플리케이션 내에서의 채팅 인터페이스에 필요한 기본 설정 및 로직을 정의하며, 공통적인 기능을 제공하는 중간 레이어 역할을 합니다.
    • 애플리케이션의 채팅 인터페이스에 공통적인 기능과 설정을 포함합니다.
    • 메시지 보관소, 버튼 상태, 태그 메시지 등에 관련된 로직을 관리합니다.
  3. ChatViewController
    • 실시간 채팅 인터페이스를 위한 ViewController로, ChatInterfaceViewController를 상속받습니다.
    • 사용자와의 채팅 인터페이스를 관리합니다. 사용자의 입력을 받아 처리하고 메시지를 전송합니다.
    • 메시지 입력 및 전송, 이미지 업로드,
  4. ChatHistoryViewController
    • 이전 채팅의 기록을 표시하기 위한 ViewController로, ChatInterfaceViewController를 상속받습니다.
    • 메시지 입력 기능이 없으며, 내부저장소에서 과거의 채팅 기록만을 읽어와 표시합니다.
    • 입력 바는 화면에서 제거됩니다.