AI 챗봇 앱 [STEP 3] Paul & Kyle #50

Changhyun-Kyle · 2024-04-14T13:12:43Z

AI 챗봇 앱 [STEP 3] Paul & Kyle

멤버 : @earths-voluble, @Changhyun-Kyle

리뷰어 : @Mino777

AI 챗봇 앱 세 번째 Step입니다!

정리하여 PR 드립니다. 감사합니다!

🤔 고민한 점

`UICollectionViewDiffableDataSource`

메세지를 주고 받는 이벤트가 발생 시 데이터의 변경사항을 자연스럽게 반영하기 위해 UICollectionViewDiffableDataSource를 활용했습니다.
UICollectionViewDiffableDataSource는 NSDiffableDataSourceSnapshot을 활용하여 데이터의 변화를 감지합니다.
특히, NSDiffableDataSourceSnapshot의 identifierType은 Hashable을 채택해야하며 Int타입의 고유한 식별자를 생성하여 타입의 변화를 인지합니다.

`RequestDTO`

UICollectionViewDiffableDataSource 를 활용하기 위해선 데이터 모델에 Hashable을 채택해야했습니다. 하지만, 기존 OpenAI의 RequestModel에 Hashable을 채택 시 동일한 질문을 보냈을 때 고유한 식별자가 중복되기 때문에 새로운 DTO 계층이 필요하다고 생각했습니다.

따라서, RequestDTO를 생성 후 UUID 타입의 id 프로퍼티를 생성하여 각 메세지가 고유한 UUID 타입의 난수를 가질 수 있게 구현했습니다.

struct RequestModel: Codable {
  var model: String = "gpt-3.5-turbo-1106"
  var stream: Bool = false
  var messages: [Message]
}

struct RequestDTO: Hashable {
  let id: UUID
  var message: Message
}

`BezierPath`를 활용하여 `ChatBubbleView` 구현 후 서브클래싱

이번 STEP에서 정말 많은 시간을 할애했던 말풍선 View를 BezierPath 를 활용하여 구현했습니다.
말풍선 View는 사용자의 요청과 시스템의 응답으로 총 2가지가 필요했습니다.

따라서, ChatBubbleView라는 상위 클래스를 생성 후 UserBubbleView와 SystemBubbleView에서 상속 받아 코드의 재사용성을 높였습니다.

final class UserBubbleView: ChatBubbleView {
  override func draw(_ rect: CGRect) {
    setRightBubbleView(rect: rect)
  }
}

final class SystemBubbleView: ChatBubbleView {
  override func draw(_ rect: CGRect) {
    setLeftBubbleView(rect: rect)
  }
}

class ChatBubbleView: UIView {
    /*{code}*/
}

private extension ChatBubbleView {
  func configureUI() {
    /*{code}*/
  }
  
  func setupConstraints() {
    /*{code}*/
  }
  
  func setRightBubbleView(rect: CGRect) {
    /*{code}*/
  }
  
  func setLeftBubbleView(rect: CGRect) {
    /*{code}*/
  }
}

네트워크 응답 대기 시 임의의 `말풍선 View` 생성

말풍선 애니메이션을 구현하기 위해선 임의의 말풍선 View가 필요했습니다.
요청에 대한 응답은 무조건 가장 마지막에 보여지기 때문에 다음과 같이 로직을 구현했습니다.

사용자가 메세지를 보낼 때 content가 비어있는 Message 모델을 데이터에 반영하여 cell을 생성합니다. 이후, 응답이 왔을 때 가장 마지막에 있던 content가 비어있는 Message 모델을 삭제 후 응답 받은 데이터 모델을 추가하여 해당 View를 대체합니다.

// ChatViewModel
func fetchChatBotData(body: RequestModel) {
    self.output.send(.toggleSendButton(isEnable: false))
    networkService.fetchChatBotResponse(
      type: .chatbot,
      httpMethod: .POST(body: body)
    )
    .sink { [weak self] completion in
      switch completion {
      case .finished:
        self?.output.send(.toggleSendButton(isEnable: true))
      case .failure(let error):
        self?.output.send(.fetchChatResponseDidFail(error: error))
      }
    } receiveValue: { [weak self] response in
      self?.requestDTO.removeLast()
      self?.requestDTO.append(
        RequestDTO(
          id: UUID(),
          message: response.choices[0].message
        )
      )
      guard let requestDTO = self?.requestDTO else { return }
      self?.output.send(.fetchChatResponseDidSucceed(response: requestDTO))
    }
    .store(in: &cancellables)
  }

🧐 궁금한 점

말풍선 재사용 시 레이아웃이 정상적으로 그려지지 않는 이슈

ChatCollectionView의 셀이 재사용되는 과정에서 셀을 재사용 시 완전히 새로 그리지 않고, 재사용 이전의 셀의 height를 그대로 가져오는 듯한 이슈가 발생했습니다. 이번 스텝에서 저희를 사실상 처음부터 끝까지 괴롭혔던 이슈인데, 결국은 해결하지 못하고 원인도 파악하지 못했습니다. 이러한 문제의 원인 혹은 적절한 구현 방법이 궁금합니다!

시뮬레이터에서 키보드 레이아웃 이슈

키보드 호출 시 레이아웃을 조절하기 위해 구현한 keyboardWillShow 및 keyboardWillHide 메서드가 두 번씩 호출되는 듯한 현상입니다. 이 역시 원인을 파악하기 위해 여러 방법을 시도해 보았는데, 결국 실기기에서는 정상적으로 동작하고, 시뮬레이터에서만 발생하는 이슈임을 확인했습니다.

코딩을 하다 보면 기기에서는 발생하지 않고 시뮬레이터에서만 발생하는 이슈가 심심찮게 있다고 느꼈는데요. 저희도 해당 문제로 아까운 시간을 허비하고 나니 확실히 실기기에서의 테스트가 신뢰성이 높다고 느꼈습니다. 현업에서도 시뮬레이터보다는 실기기 테스트를 선호하는지도 궁금해졌습니다!

말풍선 애니메이션 레이아웃 구현 실패

말풍선 뷰 안에 점 세 개가 움직이는 CoreAnimation 객체를 넣어 구현하고자 하였으나, 이 역시 제대로 표시되지 않고 레이아웃이 깨져 버리는 현상을 해결하지 못하고 미완성된 말풍선으로 대체했습니다. 이와 같은 애니메이션을 적절하게 구현하기 위한 방법이 궁금합니다!

Step3

Mino777

안녕하세요!! 카일, 폴!

STEP 2 진행하시느라 정말 수고 많으셨습니다!!🥳

짧은 시간동안 기능 구현 열심히 해주신게 보이네용ㅎㅎ

질문 주신 부분들중에 메세지로 답변이 없는 부분은 코드 코멘트에 달아놓았으니, 참고 하시면 좋을 것 같습니다~!

고민 및 질문

시뮬레이터 테스트 관련 질문

이 부분은 환경에 따라 다를 것 같습니다ㅎㅎ 저 같은 경우 보안상 시뮬레이터에서 빌드가 되지 않도록 하는 솔루션 프레임워크를 사용하다보니 시뮬레이터로는 빌드 자체가 되지 않아서 강제로 실제 디바이스로만 테스트가 가능합니다ㅎㅎ 그런데 결국엔 실제 디바이스 테스트가 가장 중요하기 때문에 실제 디바이스는 필수적이라고 생각하시면 좋을 것 같습니다👍

말풍선 애니메이션 레이아웃 구현 실패

해당 부분은 사실 시간이 부족해서 구현을 못하신걸로 보입니다ㅎㅎ 나중에 시간 되시면 좀 더 학습하셔서 구현 해보시면 간단하게 구현할 수 있으니, 학습 해보시면서 추후에 구현해보시는게 좋을 것 같습니다. 구현 하시다가 막히시면 그때 그때 질문 주세요💪
아 그리고 추가적으로 보통의 경우 이러한 애니메이션의 경우 Lottie라는 라이브러리를 대중적으로 사용합니다. 물론 Lottie 디자인의 경우 디자인 부서에서 담당하구요!

Mino777 · 2024-04-15T10:28:33Z

ChatBot/ChatBot/Controller/ChatBotViewController.swift

+  func configureUI() {
+    view.backgroundColor = .white
+    view.addSubview(chatCollectionView)
+    view.addSubview(chatInputView)
+  }
+
+  func setupCollectionView() {
+    self.chatCollectionView.dataSource = dataSource
+  }
+
+  func setupConstraints() {
+    chatInputView.translatesAutoresizingMaskIntoConstraints = false
+    chatCollectionView.translatesAutoresizingMaskIntoConstraints = false
+
+    NSLayoutConstraint.activate(
+      [
+        chatCollectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+        chatCollectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
+        chatCollectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+        chatCollectionView.bottomAnchor.constraint(equalTo: chatInputView.topAnchor, constant: -10),
+        chatInputView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+        chatInputView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+        chatInputView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
+      ]
+    )
+  }
+
+  func setupChatInputView() {
+    chatInputView.setChatSendButton { [weak self] message in
+      self?.input.send(.sendButtonTapped(message: message))
+      guard let requestDTO = self?.chatBotViewModel.requestDTO else { return }
+      self?.applyChatResponse(response: requestDTO)
+    }
+  }


해당 ViewController의 슈퍼뷰까지 별도의 객체로 사용해서
ViewController에는 레이아웃 관련 셋업 로직이 없도록 할 수 도 있습니다ㅎㅎ

private lazy var mainView ~ override func loadView() { super.~ view = mainView }

ChattingView로 상위 View를 생성하여 구현했습니다! 확실히 ViewController의 로직이 깔끔해진 것 같습니다.

override func loadView() { super.loadView() self.view = chattingView setupKeyboardNotification() bind() setupChatInputView() }

리팩토링하면서 NSDiffableDataSourceSnapshot을 apply하는 책임은 ViewController여야할 지, ChattingView여야할 지 고민했습니다. 저희는 해당 CollectionView를 소유한 부분에서 구현하는 것이 맞지 않을까 판단했는데 마이노의 의견은 어떤 지 궁금합니다!

func applyChatResponse(response: [RequestDTO]) { var chatCollectionViewSnapshot = ChatCollectionViewSnapshot() chatCollectionViewSnapshot.appendSections([.messages]) chatCollectionViewSnapshot.appendItems(response) dataSource.apply(chatCollectionViewSnapshot) chatCollectionView.scrollToBottom() }

View는 addSubView, autolayout, 각 component들의 속성 변경 등 Layout과 관련된 책임만 가져가시는게 좋습니다.
따라서 Datasource와 관련된 로직은 ViewController가 가져가는게 확실하게 분리되겠죠?!

ViewController에 해당 view.collectionView로 프로퍼티를 하나 정의해놓고,
ViewController에서 해당 Datasource 로직을 수행하시면 좋을 것 같습니다ㅎㅎ

Mino777 · 2024-04-15T10:40:01Z

ChatBot/ChatBot/Extensions/UIViewController+.swift

+  @objc
+  private func keyboardWillShow(notification: NSNotification) {
+    guard
+      let keyboardSize = (notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue
+    else {
+      return
+    }
+
+    self.view.frame.size.height -= keyboardSize.height
+  }


보통 키보드 레이아웃 조절 시 view의 frame 자체를 움직이기 보단, scrollView의 contentInset을 조절해서 레이아웃을 구현하는 것이 좋습니다.
view의 frame 자체 직접 조절하게 되면, autolayout이 깨질 수 있고, 여러분들이 질문주신 것 처럼, 예상치 못한 UI와 관련된 문제들이 발생할 수 있습니다.

현재 ChattingView(UIView) 안에 CollectionView와 ChatInputView가 add 되어 있습니다. contentInset을 활용하기 위해선 UIScrollView를 상속한 View에서 작업이 이루어져야 하는데 그렇다면 ChattingView를 UIView가 아닌 UIScrollView로 구현하거나 CollectionView 안에 ChatInputView를 add 해줘야 할까요??

ChattingView를 UIScrollView로 구현해보시면 좋을 것 같습니다ㅎㅎ

Mino777 · 2024-04-15T10:52:57Z

ChatBot/ChatBot/View/ChatBubbleView.swift

+final class UserBubbleView: ChatBubbleView {
+  override func draw(_ rect: CGRect) {
+    setRightBubbleView(rect: rect)
+  }
+}
+
+final class SystemBubbleView: ChatBubbleView {
+  override func draw(_ rect: CGRect) {
+    setLeftBubbleView(rect: rect)
+  }
+}


좌우 정렬만 자식 클래스에서 진행하고, 공통되는 draw 로직은 부모클래스에서 진행하면 중복 코드들을 줄일 수 있을 것 같아요!
그리고 상속이 아닌, protocol로 추상화 해줘도 되겠네요!
개인적으로 상속은 불가피한 상황이 아니면 최대한 유연하고 안전하게 설계 및 사용할 수 있도록 protocol을 사용하는 편이에요.
나중에 프로젝트가 커지고, 상속을 남발하다보면 관리도 힘들고, 디버깅도 힘들어질 수 있는 상황이 오게됩니다ㅎㅎ

아래와 같이 수정했습니다!

protocol ChatBubbleMakable where Self: UIView { var messageView: MessageView { get } func configureUI() func setupConstraints() func setRightBubbleView(rect: CGRect) func setLeftBubbleView(rect: CGRect) func configureMessage(text: String) }

Mino777 · 2024-04-15T10:54:40Z

ChatBot/ChatBot/View/ChatBubbleView.swift

+  }
+
+  func setRightBubbleView(rect: CGRect) {
+    let bezierPath = UIBezierPath()


이렇게 메서드 내에만 있고, 많이 타이핑이 되어야 하는 프로퍼티는 꼭 정직하게 정의해줄 필요는 없습니다!

let path = 요렇게만 해도 타이핑이 많이 줄어들 것 같네용ㅎㅎ

수정했습니다!

Mino777 · 2024-04-15T11:00:01Z

ChatBot/ChatBot/View/ChatCollectionView.swift

+    self.register(ChatCell.self, forCellWithReuseIdentifier: ChatCell.identifier)
+  }
+
+  func srollToBottom() {


오타 발견!

수정했습니다! 감사합니다

Mino777 · 2024-04-15T11:01:42Z

ChatBot/ChatBot/View/ChatCollectionView.swift

+extension ChatCollectionView {
+  func setupChatCell() {
+    self.register(ChatCell.self, forCellWithReuseIdentifier: ChatCell.identifier)
+  }


class 메인 구현부와 extension 구현부에 메서드를 위치시키는 여러분들의 기준점은 무엇인가요?! 설명해주세요!

해당 부분은 저희가 실수했네요...🥺🥺
저희가 고려했던 코드 컨벤션은 private 메서드는 private extension에서 구현하고 internal 메서드는 class 메인 구현부에 위치시키고자 했습니다!

Mino777 · 2024-04-16T05:09:07Z

ChatBot/ChatBot/View/ChatCell.swift

+
+import UIKit
+
+final class ChatCell: UICollectionViewListCell {


말씀해주신 CollectionViewCell 의 height를 dynamic하게 계산하지 못하는 이슈의 경우,
label의 content size가 계산되기 전에 cell이 재사용되서 발생하는 이슈로 보입니다.
힌트를 드리자면, prepareForReuse 메서드를 공부해보시면 좋을 것 같습니다👍

구현 당시 prepareReuse()를 활용하는 방법도 고민해보았는데 dequeReusableCell를 사용했을 때, 재사용될 때마다 초기화 해준다면 재사용 셀을 사용하는 의미가 조금 퇴색될 수 있다고 판단했었습니다.
아래와 같이 구현했을 때는 메세지 뷰의 text만 초기화 시켜주는 로직인데 해당 부분이 재사용 셀을 활용하는데 비효율적인 방법일 지 마이노의 의견이 궁금합니다!

override func prepareForReuse() { super.prepareForReuse() configureUser(text: "") configureSystem(text: "") }

음, 재사용 대상에 대한 개념을 조금 다르게 이해하신 것 같아요!
Cell을 재사용한다는건, 큰 틀의 Cell을 재사용하는것이지, Cell 안의 값들까지 재사용하는건 아니니까요! (물론 동일한 내용을 계속 보여주는게 목적이라면 그럴수 도 있지만, 그런 경우는 없으니까요ㅎㅎ)
셀의 내용을 초기화해주는건 재사용의 의미를 퇴색시키기보다는 오히려 효율적으로 셀을 관리하는 방법이지 않을까요? 초기화 하지 않고 이전 Cell의 내용에 영향을 받아서 잘 못 동작하는게 더 재사용의 의미를 퇴색시키겠죠?!

넵 현재 문제가 되는게, label의 text값이 변경되기 전에 layout이 잡히면서 발생하는 문제이기 때문에 text값만 초기화해주어도 될 것 같습니다👍

Mino777 · 2024-04-16T05:09:30Z

ChatBot/ChatBot/View/MessageView.swift

+
+import UIKit
+
+final class MessageView: UILabel {


UILabel인데 ~View 네이밍은 혼란은 줄 수 있을 것 같아요!

MessageLabel로 수정했습니다!

Mino777

STEP3 도 정말 고생많으셨습니다💪💪

코멘트 드린 부분들 확인 후 노티주시면 머지하도록 하겠습니다!

고생하셨어요!!💪💪

earths-voluble and others added 30 commits April 4, 2024 20:38

feat: ChatBubbleView 구현

2ab507a

feat: MessageView 구현

916816b

feat: ChatBubbleView 및 MessageView 구현

48aa667

add: CollectionView 구성 파일 추가

e21c6ef

refine: MockData 파싱으로 변경

76d7e69

feat: 채팅 리스트 구현

672954f

Merge branch 'develop' into Step3

2234a2a

Merge pull request #4 from Changhyun-Kyle/Step3

7ea3c9a

Step3

chore: MockData 추가

1b08502

chore: MockData 반영 로직 추가

2f41b50

chore: isHidden 추가

f48bd66

feat: 자동 스크롤 기능 구현

ad47d2d

feat: UICollectionView 구분선 제거 및 선택 효과 삭제

02c23c0

fix: 메세지 뷰 버그 수정

6e7b29b

feat: ChatInputView 구현

5430115

feat: ChatInputView 오토 레이아웃 추가

ef9b4f3

chore: ChatSendButton -> ChatInputSendButton으로 네이밍 변경

2389e00

chore: UITextViewDelegate 수정

b353ade

feat: 소프트웨어 키보드 표시 시 레이아웃 수정

11c4a23

feat: 화면 터치 시 키보드 숨김 기능 추가

eec2041

refine: 실제 네트워크 통신 로직으로 변경

22621e7

feat: requestDTO 추가

0055729

feat: 메세지 버블 뷰 기능 구현

193ac2a

feat: RequestDTO 구현

513a18d

refine: 메세지 버블 뷰 수정

35fbc11

chore: 코드 컨벤션에 맞게 수정

a9e6f8a

refactor: 키보드 관련 이벤트 메서드 분리

63bb864

chore: 불필요 Delegate 삭제

94d547c

refine: 메세지 버블 뷰 수정

2362a16

refactor: 키보드 관련 이벤트 메서드 분리

5c47291

Changhyun-Kyle added 3 commits April 14, 2024 21:19

chore: 불필요 주석 제거

f8f76bf

fix: Request Body 생성 오류 수정

7fd3fc4

Merge pull request #6 from Changhyun-Kyle/Step3

e662dd2

Step3

Mino777 self-requested a review April 15, 2024 10:19

Mino777 requested changes Apr 16, 2024

View reviewed changes

Changhyun-Kyle added 6 commits April 21, 2024 16:26

refactor: ChattingView 구현 후 ViewController 로직 분기

914b98c

refine: ChatBubbleMakable 생성 및 MessageView 네이밍 변경

f5b8308

chore: extension 구현부 수정

9995476

refactor: ChatBubbleMakable 프로토콜 구현 및 분기 처리

0fa8156

chore: MessageView 네이밍 수정

fe71b9d

fix: prepareReuse를 활용한 메세지 뷰 버그 수정

fe7de10

Mino777 approved these changes Apr 22, 2024

View reviewed changes


		import UIKit

		final class ChatCell: UICollectionViewListCell {

AI 챗봇 앱 [STEP 3] Paul & Kyle #50

Are you sure you want to change the base?

AI 챗봇 앱 [STEP 3] Paul & Kyle #50

Uh oh!

Conversation

Changhyun-Kyle commented Apr 14, 2024

AI 챗봇 앱 [STEP 3] Paul & Kyle

🤔 고민한 점

UICollectionViewDiffableDataSource

RequestDTO

BezierPath를 활용하여 ChatBubbleView 구현 후 서브클래싱

네트워크 응답 대기 시 임의의 말풍선 View 생성

🧐 궁금한 점

말풍선 재사용 시 레이아웃이 정상적으로 그려지지 않는 이슈

시뮬레이터에서 키보드 레이아웃 이슈

말풍선 애니메이션 레이아웃 구현 실패

Uh oh!

Mino777 left a comment

Choose a reason for hiding this comment

고민 및 질문

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mino777 Apr 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mino777 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

`UICollectionViewDiffableDataSource`

`RequestDTO`

`BezierPath`를 활용하여 `ChatBubbleView` 구현 후 서브클래싱

네트워크 응답 대기 시 임의의 `말풍선 View` 생성

Mino777 Apr 22, 2024 •

edited

Loading