각 Chatting 내역을 어떻게 구성하면 좋을까 고민했습니다. StackView로 만들어서 ScrollView에 할당하는 방식과, TableView Cell로 만들어 할당하는 방식중 선택을 해야했습니다.

찾아본 결과, 둘 다. 구현이 가능하지만, 채팅 대화창이 많아지게 되면, StackView로 하게 되었을땐 모든 View가 메모리에 할당되어야 하고, tableView Deleagte 에서 제공하는 속성들을 사용지 못하고 직접 다 구현해 주어야 한다는 단점이 있다고 하여, 최종적으로 TableView로 구성하게 되었습니다.

TableView로 구현하겠다고 정하고 난 후, 다음 로드맵을 세워 작업을 진행했습니다.

1. 말풍선 부분을 UIView로 커스텀 한다.

2. 커스텀한 말풍선 + 추가 UI (채팅 시간, 프로필 사진, 닉네임 등등) 로 각 채팅을 구성하는 TableView Cell을 만들어준다.

3. 각 Cell을 등록한 TableView를 VC에 등록하고 하단에는, TextView 레이아웃을 잡아준다.

4. BubbleLabelView 구현

final class BubbleLabelView: UIView {
    private let messageLabel = UILabel()
    
    func setStyle(isSender: Bool) {

        messageLabel.do {
            $0.numberOfLines = 0
            $0.textColor = .white
            $0.backgroundColor = .clear
            $0.lineBreakMode = .byCharWrapping
            $0.font = .pretendard(.body3_r_15)
        }

        backgroundColor = isSender ? .systemBlue : .lightGray
        layer.cornerRadius = 16
        layer.maskedCorners = isSender
            ? [.layerMinXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMinYCorner]
            : [.layerMaxXMinYCorner, .layerMaxXMaxYCorner, .layerMinXMinYCorner]
    }
}

말풍선은 UILabel() 과 backgroundColor 그리고, cornerRadius 로 작업을 해주었습니다.