채팅 기능을 구현할 때, 가장 핵심적인 UI 중 하나는 대화방 목록이다. 사용자 입장에서 누구와 대화를 했는지, 마지막 메시지가 무엇인지, 안 읽은 메시지가 있는지를 한눈에 볼 수 있어야 실용적이다. 이번 글에서는 노코드 툴 Bubble을 활용하여 사용자별 채팅방 리스트를 만들고, 최근 메시지를 기준으로 시간순 정렬하는 방법을 설명한다. 이 기능은 실제 커뮤니티 앱이나 고객상담 서비스에서 필수로 활용되는 기능이다.
1단계: Message 데이터 기반으로 대화 상대 목록 만들기
별도의 '채팅방' 데이터 타입 없이도, Message 테이블을 기준으로 대화 상대 목록을 구성할 수 있다. 중요한 것은, 메시지를 주고받은 사용자 목록을 중복 없이 추출하는 것이다.
Repeating Group 설정 예시
- Type of content: User
- Data source:
Search for Messages:filtered(sender = Current User OR receiver = Current User) - Extracted User: 상대방만 추출 →
sender ≠ Current User → sender / receiver ≠ Current User → receiver
위 방식은 Bubble에서 조금 복잡할 수 있으므로 중간에 중복 제거를 위해 :unique elements 옵션을 활용한다. 이를 통해 내가 대화를 나눈 상대방 리스트를 구성할 수 있다.
2단계: 각 사용자별 마지막 메시지 표시
대화방 목록에서 각 상대방마다 가장 최근 메시지를 보여주는 기능은 사용자 경험을 크게 향상시킨다. 이를 위해 다음과 같이 설정한다:
텍스트 요소에 표시할 내용
- 검색:
Search for Messages - 조건:
- (sender = Current User AND receiver = 대상 사용자)
- OR (sender = 대상 사용자 AND receiver = Current User)
- 정렬:
created_date descending: yes - 표시:
:first item's content
이렇게 하면 각 사용자에 대해 내가 마지막으로 주고받은 메시지를 표시할 수 있다. 이 정보를 간단한 텍스트 또는 미리보기 형태로 UI에 반영할 수 있다.
3단계: 대화방 정렬 기준 – 마지막 메시지 시간
사용자 입장에서는 가장 최근에 대화한 상대방이 위에 위치하도록 시간순 정렬이 되어야 직관적이다. 다음과 같은 방식으로 정렬할 수 있다:
- 각 User에 대해 마지막 메시지를 검색
- 그 메시지의
created_date를 기준으로 Repeating Group 정렬
Bubble에서는 직접적인 정렬 조건이 어렵기 때문에, 사용자별 마지막 메시지 시간을 별도 Custom State나 DB에 캐시처럼 저장해 두고, 정렬 기준 필드를 만들어 처리하는 것이 일반적이다.
4단계: 사용자별 미확인 메시지 개수 표시
이전 5편에서 설명한 is_read 필드를 활용하여, 각 상대방으로부터 온 읽지 않은 메시지 수를 표시한다.
표시 방법 예시:
- 텍스트 요소:
Search for Messages: count - 조건:
sender = 해당 사용자 AND receiver = Current User AND is_read = no
이 값이 0 이상일 경우 빨간색 배지를 표시하고, 0일 경우 숨기는 조건부 표시 설정을 할 수 있다.
5단계: 사용자 클릭 시 해당 대화방 열기
각 사용자 셀을 클릭했을 때 해당 사용자와의 1:1 채팅 페이지로 이동하도록 설정한다. Go to page 액션을 설정하고, 사용자 정보를 파라미터로 넘긴다.
예시:
- 페이지 이동: Go to page → "chat_page"
- 파라미터:
user_id = Current cell's User's unique ID
도착한 채팅 페이지에서는 해당 user_id를 기반으로 채팅 상대를 설정하고 메시지를 불러올 수 있다.
마무리 및 요약
이번 글에서는 실시간 채팅 시스템에서 꼭 필요한 대화방 리스트 구성, 마지막 메시지 표시, 시간순 정렬, 미확인 메시지 개수 표시 등을 구현했다. 이러한 기능은 실제 메신저 서비스 수준의 UX를 구현할 수 있게 해주며, 사용자 편의성과 전문성을 동시에 만족시킨다. 노코드 툴 Bubble은 이를 코딩 없이도 시각적으로 구성할 수 있는 강력한 플랫폼이다. 다음 편에서는 채팅 UI를 모바일 반응형으로 최적화하고, 사용자 경험을 높이는 디자인 팁과 동작 속도 개선 전략을 다룰 예정이다.