2026년 Supabase로 실시간 채팅 구현하기: PostgreSQL부터 배포까지

데이터베이스 비밀번호는 꼭 안전한 곳에 저장하세요! 나중에 복구가 안 돼요. 저는 Bitwarden 같은 비밀번호 관리자에 저장해두는데, 여러분도 그렇게 하시는 걸 추천드려요. 그리고 리전(Region)은 가능하면 한국이나 일본으로 선택하시면 레이턴시가 훨씬 적어져요.

CREATE TABLE messages (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  room_id UUID REFERENCES rooms(id) ON DELETE CASCADE,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  content TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now(),
  is_edited BOOLEAN DEFAULT false
);

-- 성능을 위한 인덱스 추가
CREATE INDEX idx_messages_room_created 
ON messages(room_id, created_at DESC);

CREATE INDEX idx_messages_user 
ON messages(user_id);

-- 채팅방 테이블
CREATE TABLE rooms (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT,
  room_type TEXT CHECK (room_type IN ('direct', 'group')),
  created_by UUID REFERENCES auth.users(id),
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);

-- 채팅방 멤버 테이블
CREATE TABLE room_members (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  room_id UUID REFERENCES rooms(id) ON DELETE CASCADE,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  joined_at TIMESTAMPTZ DEFAULT now(),
  last_read_at TIMESTAMPTZ DEFAULT now(),
  UNIQUE(room_id, user_id)
);

CREATE INDEX idx_room_members_user 
ON room_members(user_id);

인덱스를 너무 많이 만들면 오히려 INSERT/UPDATE 성능이 떨어져요. 실시간 채팅은 쓰기 작업도 엄청 많거든요. 제 경험상 테이블당 3~4개 정도의 인덱스가 적당해요.

-- RLS 활성화
ALTER TABLE messages ENABLE ROW LEVEL SECURITY;
ALTER TABLE rooms ENABLE ROW LEVEL SECURITY;
ALTER TABLE room_members ENABLE ROW LEVEL SECURITY;

-- 메시지 읽기: 채팅방 멤버만 가능
CREATE POLICY "Members can read messages"
ON messages FOR SELECT
USING (
  room_id IN (
    SELECT room_id FROM room_members 
    WHERE user_id = auth.uid()
  )
);

-- 메시지 작성: 채팅방 멤버만 가능
CREATE POLICY "Members can insert messages"
ON messages FOR INSERT
WITH CHECK (
  room_id IN (
    SELECT room_id FROM room_members 
    WHERE user_id = auth.uid()
  )
);

• UUID 기본키 사용으로 확장성 확보했나요?
• 복합 인덱스로 채팅방별 조회 최적화했나요?
• last_read_at 컬럼으로 읽지 않은 메시지 추적 가능한가요?
• RLS 정책으로 멤버만 메시지 접근 가능한가요?
• ON DELETE CASCADE로 연쇄 삭제 처리했나요?

1. Supabase 대시보드에서 Database 메뉴 클릭
2. 왼쪽 사이드바에서 Replication 선택
3. Source 섹션에서 0 tables 클릭
4. messages 테이블 토글 켜기
5. 완료!

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  'YOUR_SUPABASE_URL',
  'YOUR_SUPABASE_ANON_KEY'
)

// messages 테이블 변경사항 구독
const channel = supabase
  .channel('messages-channel')
  .on(
    'postgres_changes',
    { 
      event: '*', 
      schema: 'public', 
      table: 'messages' 
    },
    (payload) => {
      console.log('실시간 데이터:', payload)
      // 여기서 UI 업데이트!
    }
  )
  .subscribe()

// 구독 해제는 이렇게
// supabase.removeChannel(channel)

const channel = supabase
  .channel('new-messages')
  .on(
    'postgres_changes',
    { 
      event: 'INSERT', 
      schema: 'public', 
      table: 'messages' 
    },
    (payload) => {
      const newMessage = payload.new
      addMessageToUI(newMessage)
    }
  )
  .subscribe()

const roomId = 'room-123'

const channel = supabase
  .channel(`room-${roomId}`)
  .on(
    'postgres_changes',
    { 
      event: 'INSERT', 
      schema: 'public', 
      table: 'messages',
      filter: `room_id=eq.${roomId}`  // 핵심!
    },
    (payload) => {
      console.log(`${roomId}의 새 메시지:`, payload.new)
    }
  )
  .subscribe()

• eq - 같음 (equal)
• neq - 같지 않음
• gt - 초과 (greater than)
• lt - 미만 (less than)

• 컴포넌트 언마운트 시 구독 해제 - 메모리 누수 방지! React라면 useEffect cleanup 함수에서 supabase.removeChannel() 호출하세요
• 채널 이름 중복 피하기 - 같은 채널명으로 여러 번 구독하면 문제 생겨요. 유니크한 이름 사용!
• 필요한 필드만 가져오기 - select 옵션으로 필요한 컬럼만 받아오세요
• 에러 핸들링 - 네트워크 끊김 등 예외 상황 대비는 필수예요
• 재연결 로직 구현 - 연결이 끊겼을 때 자동으로 다시 연결되게 해야죠

import { useEffect } from 'react'

function ChatRoom({ roomId }) {
  useEffect(() => {
    // 구독 시작
    const channel = supabase
      .channel(`room-${roomId}`)
      .on('postgres_changes', 
        { 
          event: 'INSERT', 
          schema: 'public', 
          table: 'messages',
          filter: `room_id=eq.${roomId}`
        },
        handleNewMessage
      )
      .subscribe()

    // cleanup 함수로 구독 해제
    return () => {
      supabase.removeChannel(channel)
    }
  }, [roomId])  // roomId 바뀔 때마다 재구독

  function handleNewMessage(payload) {
    // 메시지 처리 로직
  }

  return 
채팅방
}

const channel = supabase.channel('room-presence')

// 내 정보 추가
channel
  .on('presence', { event: 'sync' }, () => {
    const state = channel.presenceState()
    console.log('현재 접속자:', state)
  })
  .subscribe(async (status) => {
    if (status === 'SUBSCRIBED') {
      await channel.track({
        user_id: currentUser.id,
        username: currentUser.name,
        online_at: new Date().toISOString()
      })
    }
  })

const channel = supabase.channel('typing-status')

// 타이핑 상태 보내기
function handleTyping() {
  channel.send({
    type: 'broadcast',
    event: 'typing',
    payload: { 
      user: currentUser.name,
      isTyping: true 
    }
  })
}

// 타이핑 상태 받기
channel
  .on('broadcast', { event: 'typing' }, (payload) => {
    console.log(`${payload.user}가 타이핑 중...`)
  })
  .subscribe()

npm create vite@latest realtime-chat -- --template react
cd realtime-chat
npm install

# Supabase 클라이언트 라이브러리 설치
npm install @supabase/supabase-js

# 날짜 포맷팅용 (선택사항)
npm install date-fns

// src/supabaseClient.js
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here

// src/components/Chat.jsx
import { useState, useEffect, useRef } from 'react'
import { supabase } from '../supabaseClient'
import { formatDistanceToNow } from 'date-fns'
import { ko } from 'date-fns/locale'

export default function Chat({ currentUser }) {
  const [messages, setMessages] = useState([])
  const [newMessage, setNewMessage] = useState('')
  const [loading, setLoading] = useState(true)
  const messagesEndRef = useRef(null)

  // 메시지 자동 스크롤
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }

  useEffect(() => {
    scrollToBottom()
  }, [messages])

  return (
    <div className="chat-container">
      <div className="messages">
        {/* 메시지 목록 */}
      </div>
      <div className="input-area">
        {/* 메시지 입력 */}
      </div>
    </div>
  )
}

// Chat.jsx에 추가
useEffect(() => {
  // 초기 메시지 로드
  fetchMessages()
  
  // 실시간 구독 설정
  const subscription = supabase
    .channel('public:messages')
    .on('postgres_changes', 
      { 
        event: 'INSERT', 
        schema: 'public', 
        table: 'messages' 
      }, 
      (payload) => {
        // 새 메시지가 추가되면 실행
        setMessages(prev => [...prev, payload.new])
      }
    )
    .subscribe()

  // 컴포넌트 언마운트 시 구독 해제
  return () => {
    subscription.unsubscribe()
  }
}, [])

// 메시지 가져오기 함수
async function fetchMessages() {
  setLoading(true)
  
  const { data, error } = await supabase
    .from('messages')
    .select('*')
    .order('created_at', { ascending: true })
    .limit(50)
  
  if (error) {
    console.error('메시지 로드 실패:', error)
  } else {
    setMessages(data)
  }
  
  setLoading(false)
}

async function sendMessage(e) {
  e.preventDefault()
  
  // 빈 메시지 방지
  if (!newMessage.trim()) return
  
  const { error } = await supabase
    .from('messages')
    .insert([
      { 
        content: newMessage.trim(),
        user_id: currentUser.id 
      }
    ])
  
  if (error) {
    console.error('메시지 전송 실패:', error)
    alert('메시지 전송에 실패했어요. 다시 시도해주세요!')
  } else {
    setNewMessage('') // 입력창 비우기
  }
}

<div className="messages-container" style={{
  height: '500px',
  overflowY: 'auto',
  padding: '20px',
  backgroundColor: '#f9fafb'
}}>
  {loading ? (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      로딩중...
    </div>
  ) : (
    messages.map((message) => (
      <div 
        key={message.id}
        style={{
          display: 'flex',
          justifyContent: message.user_id === currentUser.id 
            ? 'flex-end' 
            : 'flex-start',
          marginBottom: '12px'
        }}
      >
        <div style={{
          maxWidth: '70%',
          padding: '12px 16px',
          borderRadius: '16px',
          backgroundColor: message.user_id === currentUser.id 
            ? '#4F46E5' 
            : '#ffffff',
          color: message.user_id === currentUser.id 
            ? '#ffffff' 
            : '#374151',
          boxShadow: '0 1px 2px rgba(0,0,0,0.1)'
        }}>
          <div style={{ fontSize: '14px', marginBottom: '4px' }}>
            {message.content}
          </div>
          <div style={{ 
            fontSize: '11px', 
            opacity: 0.7,
            textAlign: 'right'
          }}>
            {formatDistanceToNow(new Date(message.created_at), {
              addSuffix: true,
              locale: ko
            })}
          </div>
        </div>
      </div>
    ))
  )}
  <div ref={messagesEndRef} />
</div>

// 실시간 구독 부분 수정
.on('postgres_changes', 
  { event: 'INSERT', schema: 'public', table: 'messages' }, 
  (payload) => {
    setMessages(prev => {
      // 이미 존재하는 메시지인지 확인
      const exists = prev.find(msg => msg.id === payload.new.id)
      if (exists) return prev
      
      // 없으면 추가
      return [...prev, payload.new]
    })
  }
)

// App.jsx
import { useState, useEffect } from 'react'
import Chat from './components/Chat'

function App() {
  const [currentUser, setCurrentUser] = useState(null)
  const [username, setUsername] = useState('')

  // 로컬 스토리지에서 사용자 정보 가져오기
  useEffect(() => {
    const savedUser = localStorage.getItem('chatUser')
    if (savedUser) {
      setCurrentUser(JSON.parse(savedUser))
    }
  }, [])

  const handleLogin = (e) => {
    e.preventDefault()
    if (!username.trim()) return

    const user = {
      id: Date.now(), // 임시 ID (나중에 실제 인증으로 교체)
      username: username.trim()
    }

    localStorage.setItem('chatUser', JSON.stringify(user))
    setCurrentUser(user)
  }

  if (!currentUser) {
    return (
      <div style={{ 
        display: 'flex', 
        justifyContent: 'center', 
        alignItems: 'center',
        height: '100vh',
        backgroundColor: '#f9fafb'
      }}>
        <form onSubmit={handleLogin} style={{
          background: 'white',
          padding: '40px',
          borderRadius: '16px',
          boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
        }}>
          <h2 style={{ marginBottom: '20px' }}>채팅 시작하기</h2>
          <input
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            placeholder="닉네임을 입력하세요"
            style={{
              width: '100%',
              padding: '12px',
              marginBottom: '12px',
              border: '1px solid #e5e7eb',
              borderRadius: '8px'
            }}
          />
          <button type="submit" style={{
            width: '100%',
            padding: '12px',
            backgroundColor: '#4F46E5',
            color: 'white',
            border: 'none',
            borderRadius: '8px',
            cursor: 'pointer'
          }}>
            입장하기
          </button>
        </form>
      </div>
    )
  }

  return <Chat currentUser={currentUser} />
}

지금 만든 사용자 시스템은 임시예요. 실제 프로덕션에서는 반드시 Supabase Auth나 다른 인증 시스템을 사용해야 해요. 보안 문제가 있거든요!

/* App.css */
.chat-container {
  max-width: 800px;
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: white;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f9fafb;
}

.input-area {
  padding: 16px;
  background: white;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 8px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .chat-container {
    max-width: 100%;
    border-radius: 0;
  }
  
  .messages-container {
    padding: 12px;
  }
  
  .message-bubble {
    max-width: 85% !important;
  }
}

const sendMessage = async (content) => {
  const { data, error } = await supabase
    .from('messages')
    .insert([
      {
        content: content,
        user_id: currentUser.id,
        room_id: currentRoomId,
        created_at: new Date().toISOString()
      }
    ])
    .select()

  if (error) {
    console.error('메시지 전송 실패:', error)
    return false
  }
  
  return true
}

useEffect(() => {
  const channel = supabase
    .channel('room-messages')
    .on(
      'postgres_changes',
      {
        event: 'INSERT',
        schema: 'public',
        table: 'messages',
        filter: `room_id=eq.${currentRoomId}`
      },
      (payload) => {
        setMessages(prev => [...prev, payload.new])
      }
    )
    .subscribe()

  return () => {
    supabase.removeChannel(channel)
  }
}, [currentRoomId])

const [messages, setMessages] = useState([])

const sendMessage = async (content) => {
  // 임시 ID로 낙관적 업데이트
  const tempId = `temp-${Date.now()}`
  const tempMessage = {
    id: tempId,
    content,
    status: 'sending',
    created_at: new Date().toISOString()
  }
  
  setMessages(prev => [...prev, tempMessage])
  
  const { data, error } = await supabase
    .from('messages')
    .insert([{ content, user_id: userId, room_id: roomId }])
    .select()
    .single()
  
  if (error) {
    // 전송 실패 상태로 업데이트
    setMessages(prev => 
      prev.map(msg => 
        msg.id === tempId 
          ? { ...msg, status: 'failed' }
          : msg
      )
    )
  } else {
    // 임시 메시지를 실제 메시지로 교체
    setMessages(prev => 
      prev.map(msg => 
        msg.id === tempId 
          ? { ...data, status: 'sent' }
          : msg
      )
    )
  }
}

const channel = supabase.channel('room-typing')

// 타이핑 시작
const startTyping = () => {
  channel.track({
    user: currentUser.name,
    typing: true,
    timestamp: Date.now()
  })
}

// 타이핑 중지
const stopTyping = () => {
  channel.track({
    user: currentUser.name,
    typing: false
  })
}

// 다른 사용자 타이핑 상태 구독
channel.on('presence', { event: 'sync' }, () => {
  const state = channel.presenceState()
  const typingUsers = Object.values(state)
    .flat()
    .filter(user => user.typing && user.user !== currentUser.name)
  
  setTypingUsers(typingUsers)
})

타이핑 인디케이터는 편리하지만 네트워크 트래픽을 증가시켜요. 특히 사용자가 많은 채팅방에서는 부담이 될 수 있으니, 필요에 따라 활성화/비활성화 옵션을 주는 것도 좋은 방법이에요.

IndexedDB나 LocalStorage를 활용해서 오프라인 모드를 지원하면 완전 프로급이에요. 사용자가 지하철에서 메시지를 쓰면 일단 로컬에 저장했다가, 네트워크가 복구되면 자동으로 전송하는 거죠. 제가 구현해봤는데 생각보다 어렵지 않더라고요.

• NEXT_PUBLIC_SUPABASE_URL: 클라이언트에서 접근 가능해야 해요
• NEXT_PUBLIC_SUPABASE_ANON_KEY: 공개 키는 반드시 NEXT_PUBLIC_ 접두사 필요
• SUPABASE_SERVICE_ROLE_KEY: 서버 사이드 작업용, 절대 노출 금지!
• NODE_ENV: production으로 꼭 설정하세요

// supabase 클라이언트 설정
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  {
    realtime: {
      params: {
        eventsPerSecond: 10 // 초당 이벤트 제한
      }
    },
    auth: {
      persistSession: true,
      autoRefreshToken: true,
      detectSessionInUrl: true
    }
  }
)

// 재연결 로직 추가
channel
  .on('system', { event: 'error' }, (payload) => {
    console.error('Realtime error:', payload)
    // 자동 재연결 시도
    setTimeout(() => {
      channel.subscribe()
    }, 3000)
  })

-- 읽기 권한: 채팅방 멤버만
CREATE POLICY "Members can view messages"
ON messages FOR SELECT
USING (
  EXISTS (
    SELECT 1 FROM room_members
    WHERE room_members.room_id = messages.room_id
    AND room_members.user_id = auth.uid()
  )
);

-- 쓰기 권한: 본인 메시지만
CREATE POLICY "Users can insert own messages"
ON messages FOR INSERT
WITH CHECK (
  auth.uid() = user_id
  AND EXISTS (
    SELECT 1 FROM room_members
    WHERE room_members.room_id = messages.room_id
    AND room_members.user_id = auth.uid()
  )
);

-- 삭제 권한: 본인 메시지 또는 관리자
CREATE POLICY "Users can delete own messages"
ON messages FOR DELETE
USING (
  auth.uid() = user_id
  OR EXISTS (
    SELECT 1 FROM room_members
    WHERE room_members.room_id = messages.room_id
    AND room_members.user_id = auth.uid()
    AND room_members.role = 'admin'
  )
);

-- 메시지 조회 최적화
CREATE INDEX idx_messages_room_created 
ON messages(room_id, created_at DESC);

-- 사용자별 메시지 조회
CREATE INDEX idx_messages_user 
ON messages(user_id, created_at DESC);

-- 읽음 상태 확인 최적화
CREATE INDEX idx_message_reads_composite 
ON message_reads(message_id, user_id);

-- 채팅방 멤버 조회
CREATE INDEX idx_room_members_user 
ON room_members(user_id, room_id);

1. 오래된 메시지 아카이빙: 3개월 이상 된 메시지는 별도 테이블로 이동시켜요
2. 이미지 압축: Supabase Storage에 올리기 전에 클라이언트단에서 압축하세요
3. 불필요한 구독 정리: 페이지 벗어날 때 channel.unsubscribe() 꼭 호출하기
4. 연결 풀링: Supavisor 활용해서 DB 연결 수 최적화해요
5. 캐싱 전략: React Query나 SWR로 API 호출 줄이기

// 연결 상태 관리
const [connectionStatus, setConnectionStatus] = useState('connected')

useEffect(() => {
  const channel = supabase.channel('room-1')
  
  channel
    .on('system', { event: 'error' }, () => {
      setConnectionStatus('error')
      toast.error('연결이 끊어졌습니다. 재연결 시도 중...')
    })
    .on('system', { event: 'disconnected' }, () => {
      setConnectionStatus('disconnected')
    })
    .on('system', { event: 'connected' }, () => {
      setConnectionStatus('connected')
      toast.success('연결되었습니다!')
    })
    .subscribe((status) => {
      if (status === 'CHANNEL_ERROR') {
        // 3초 후 재연결 시도
        setTimeout(() => channel.subscribe(), 3000)
      }
    })

  return () => {
    channel.unsubscribe()
  }
}, [])

// UI에 연결 상태 표시
{connectionStatus !== 'connected' && (
  

    연결 끊김 - 메시지가 실시간으로 전송되지 않을 수 있습니다
  
)}