실시간 채팅 시스템을 구축할 때, 단순히 메시지를 보내고 받는 기능만으로는 충분하지 않다. 사용자 경험을 높이기 위해서는 메시지 읽음 처리와 알림 기능이 꼭 필요하다. 이번 글에서는 노코드 툴인 Bubble을 사용하여 읽음 여부 처리와 안 읽은 메시지 개수 표시를 구현하는 방법을 단계별로 설명한다. 이 기능은 커뮤니티 앱, 고객센터 시스템, 사내 메신저 등 다양한 서비스에서 활용 가능하며, 실무 수준의 웹앱 완성을 위한 핵심 요소다.
1단계: Message 데이터에 'is_read' 필드 추가
메시지가 읽혔는지 여부를 저장하기 위해 기존 Message 데이터 타입에 다음 필드를 추가한다:
- is_read (yes/no): 기본값 false
이 필드는 메시지가 수신자에 의해 확인되었는지를 표시하는 역할을 한다. 기본적으로 메시지 생성 시 이 값은 false로 설정된다.
2단계: 메시지를 읽은 시점에 'is_read' 값 변경
수신자가 채팅창을 열었을 때 해당 메시지를 읽었다고 처리하려면, 다음과 같이 워크플로우를 설정한다.
📌 Repeating Group이 로드될 때 메시지 읽음 처리
- Repeating Group → 이벤트 추가 → When Page is loaded 또는 When Repeating Group is visible
- Add Action → Make changes to a list of things
- 대상: Messages → 조건:
receiver = Current User AND is_read = no - 변경값: is_read = yes
이 워크플로우는 메시지를 사용자에게 처음 보여주는 시점에 자동으로 읽음 처리를 하게 한다.
3단계: 안 읽은 메시지 개수 표시
채팅방 목록에 상대방마다 안 읽은 메시지 수를 표시하려면 다음과 같은 요소를 추가한다:
- 텍스트 요소:
Search for Messages: count - 조건:
receiver = Current User AND sender = 해당 사용자 AND is_read = no
이 값을 통해 사용자는 누구로부터 읽지 않은 메시지가 몇 건 있는지 즉시 확인할 수 있다. 이 수치를 아이콘 또는 배지 형태로 디자인할 수 있다.
4단계: 시각적 읽음 상태 표시
Repeating Group 내부에서 메시지가 읽혔는지 여부를 시각적으로 표현할 수 있다. 예를 들어 다음과 같은 방식으로 구현이 가능하다:
- 텍스트 표시 예시:
Current Cell's Message's is_read is yes → '읽음' - 아이콘 또는 배지 색상 변경: 조건부 포맷 사용
읽지 않은 메시지에는 강조 표시(굵은 글씨, 빨간 점 등)를 주고, 읽은 메시지는 흐릿한 색으로 표현하면 UX가 좋아진다.
5단계: 알림 아이콘 설정 (상단 메뉴 등)
사용자가 사이트 어디에 있든지 알림을 받을 수 있도록 하기 위해 상단 메뉴바에 알림 아이콘을 추가할 수 있다. 이 아이콘 옆에 안 읽은 메시지 총합을 표시한다:
- 텍스트:
Search for Messages: count - 조건:
receiver = Current User AND is_read = no
이 수치를 조건부로 표시하여 0일 경우 숨기기, 1 이상이면 배지로 강조하는 것도 가능하다.
마무리 및 요약
이번 글에서는 실시간 채팅 기능의 완성도를 높이기 위해 메시지 읽음 처리와 알림 기능 구현 방법을 다뤘다. is_read 필드를 활용하여 메시지 상태를 구분하고, 읽지 않은 메시지를 사용자에게 직관적으로 전달함으로써 UX를 크게 향상시킬 수 있다. Bubble은 이러한 고급 기능도 코딩 없이 구성할 수 있기 때문에, 서비스 수준의 기능 구현이 누구에게나 가능하다. 다음 편에서는 사용자의 메시지를 시간순으로 정렬하고, 대화 목록을 관리하는 구조를 설명할 예정이다. Bubble로 만드는 실시간 커뮤니케이션 시스템은 여전히 확장 가능성이 매우 크다.