blevels

Home / AI / AI 바이브코딩 / AI로 실시간 채팅 앱 만들기 — WebSocket 기반 1시간 완성

VIBE

AI로 실시간 채팅 앱 만들기 — WebSocket 기반 1시간 완성

게시일 2026-04-30수정일 2026-04-30
공식 링크
On this page

이 튜토리얼은 Claude Code / Supabase Realtime / Next.js 16 기준입니다 (2026-04). 도구 업데이트 시 검토 필요.

WebSocket을 직접 구현할 필요 없다. Supabase Realtime이 실시간 메시지 동기화를 대신하고, Claude Code가 코드를 작성한다. 1시간 안에 여러 사용자가 동시에 사용할 수 있는 채팅 앱이 완성된다.

준비물

  • Supabase 계정 (supabase.com, 무료 플랜)
  • Node.js 20+: node -v로 확인
  • Claude Code
  • Vercel 계정 (배포용)
  • 예상 시간: 60분

1. Supabase 프로젝트 설정

Supabase 대시보드에서 새 프로젝트를 생성한 뒤 SQL Editor에서 테이블을 만든다.

create table messages (
  id uuid default gen_random_uuid() primary key,
  username text not null,
  content text not null,
  created_at timestamptz default now()
);

alter table messages enable row level security;
create policy "Anyone can read" on messages for select using (true);
create policy "Anyone can insert" on messages for insert with check (true);

Project Settings > API 탭에서 Project URL과 anon public 키를 복사해둔다.

2. Next.js 프로젝트 생성

npx create-next-app@latest realtime-chat \
  --typescript \
  --tailwind \
  --app \
  --no-src-dir
cd realtime-chat
npm install @supabase/supabase-js

.env.local 파일:

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxxxxxxx
AD

3. Supabase 클라이언트 설정

Claude Code에 요청한다.

lib/supabase.ts 를 만들어줘.
NEXT_PUBLIC_SUPABASE_URL과 NEXT_PUBLIC_SUPABASE_ANON_KEY 환경변수를 읽어서
Supabase 클라이언트를 생성하고 export 해줘.

4. 채팅 UI와 Realtime 구독 구현

Claude Code에 요청한다.

app/page.tsx 에 실시간 채팅 UI를 만들어줘.

- 사용자 이름 입력 (최초 1회, localStorage 저장)
- 메시지 목록 (최신 메시지로 자동 스크롤)
- 메시지 입력창 + 전송 버튼 (Enter 키 지원)
- Supabase messages 테이블에 insert + Realtime 구독으로 실시간 업데이트

Tailwind로 스타일링해줘.

Realtime 구독 핵심 패턴을 확인한다.

useEffect(() => {
  const channel = supabase
    .channel('messages')
    .on(
      'postgres_changes',
      { event: 'INSERT', schema: 'public', table: 'messages' },
      (payload) => setMessages(prev => [...prev, payload.new as Message])
    )
    .subscribe();

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

useEffect의 클린업 함수에서 채널을 제거하지 않으면 컴포넌트가 언마운트된 후에도 구독이 유지되어 메모리 누수가 발생한다.

AD

5. 로컬 테스트 및 Vercel 배포

npm run dev

브라우저 탭 2개를 열고 http://localhost:3000에 접속해 동시 채팅을 테스트한다. 한 탭에서 보낸 메시지가 다른 탭에 페이지 새로고침 없이 실시간으로 나타나면 성공이다.

vercel deploy --prod

Vercel 대시보드의 Environment Variables에서 NEXT_PUBLIC_SUPABASE_URL과 NEXT_PUBLIC_SUPABASE_ANON_KEY를 추가한다.

결과

realtime-chat/
├── app/page.tsx        ← 채팅 UI + Realtime 구독
├── lib/supabase.ts     ← Supabase 클라이언트
└── .env.local          ← 환경변수 (git 커밋 금지)

다음 단계

  • supabase-auth — 로그인 기능을 추가해 익명 채팅을 방지하는 방법
  • supabase — Supabase 전체 기능 가이드
  • websocket — Supabase Realtime 뒤에 있는 프로토콜 개념 이해
AD