대부분의 웹앱 서비스에서는 사용자 간 커뮤니케이션이 핵심 기능이 된다. 이 글에서는 노코드 툴인 Bubble을 사용하여 실시간 메시지 전송 기능, 즉 채팅 시스템의 기초를 구현하는 방법을 설명한다. 개발 지식 없이도 데이터베이스와 UI를 연동하여 사용자가 서로 메시지를 주고받는 기능을 구현할 수 있다. 반복 그룹(Repeating Group)과 워크플로우를 활용하여 1:1 메시지 시스템을 구축하는 과정을 단계별로 안내한다.
1단계: 메시지 데이터 타입 생성
먼저 사용자 간 주고받는 메시지를 저장할 데이터 구조를 만들어야 한다. Data 탭에서 새로운 데이터 타입을 아래와 같이 생성한다:
- Data type 이름: Message
- 필드 1: content (Text) – 메시지 내용
- 필드 2: sender (User) – 보낸 사람
- 필드 3: receiver (User) – 받는 사람
- 필드 4: created_date (자동 생성) – 전송 시간
이 구조를 통해 각 메시지마다 누가 보냈고, 누구에게 보냈는지, 언제 보냈는지 저장할 수 있다.
2단계: 메시지 입력 UI 만들기
사용자 인터페이스(UI)에는 다음과 같은 요소가 필요하다:
- Multiline Input – 메시지 입력란
- Dropdown – 받는 사람 선택 (User 리스트)
- Button – “보내기” 버튼
Dropdown에는 User 타입의 데이터를 불러오도록 설정하고, Current User는 목록에서 제외되도록 조건 설정을 한다. 예: Search for Users: filtered (This User ≠ Current User)
📌 보내기 버튼 워크플로우 설정
- “보내기” 버튼 클릭 → Start/Edit Workflow
- Add Action → Data → Create a new thing → Message 선택
- 필드 설정:
- content = Multiline Input의 값
- sender = Current User
- receiver = Dropdown에서 선택한 User
메시지를 보내고 나면 입력창을 초기화하거나, 알림 메시지를 띄워 사용자 경험을 개선할 수 있다.
3단계: Repeating Group으로 메시지 표시
실시간 채팅처럼 메시지를 리스트로 보여주려면 Repeating Group을 활용해야 한다. 아래와 같이 설정한다:
- Type of content: Message
- Data source: Search for Messages
- 조건:
- (sender = Current User AND receiver = 선택한 사용자)
- OR (sender = 선택한 사용자 AND receiver = Current User)
- Sort by: created_date (descending = no)
각 셀에는 다음 정보를 표시할 수 있다:
Sender: Current cell's Message's sender's name
Content: Current cell's Message's content
4단계: 실시간 반영 설정
Bubble은 기본적으로 데이터 변경 시 UI가 자동 갱신된다. 하지만 더 빠른 반응성을 원한다면 Repeating Group의 Auto-binding이나 Refresh Action을 설정할 수 있다. 또한, 메시지를 보낼 때 'Scroll to bottom' 액션을 넣으면 최신 메시지로 자동 스크롤되도록 할 수 있다.
5단계: 로그인 사용자 전용으로 제한
메시지 시스템은 로그인된 사용자만 사용할 수 있도록 설정하는 것이 안전하다. 페이지의 속성이나 그룹 조건에 다음을 설정한다:
Only When: Current User is logged in
로그아웃 상태에서 접근 시 로그인 페이지로 이동되도록 워크플로우를 추가한다.
마무리 및 요약
이번 실습에서는 Bubble을 활용해 사용자 간 메시지 전송 기능, 즉 채팅 시스템의 기초를 구현해보았다. 메시지 데이터베이스 설계, 입력 UI 구성, Repeating Group을 통한 실시간 메시지 표시까지 단계를 따라가며 직접 구현이 가능했다. 이 기능은 커뮤니티, 마켓플레이스, 예약 서비스 등에서 중요한 요소이므로 반드시 익혀두는 것이 좋다. 다음 글에서는 메시지 읽음 처리 기능 및 알림 기능을 추가해 더욱 완성도 높은 채팅 시스템을 구현하는 방법을 다룰 예정이다.