댓글 시스템 만들기 2편: 실제 가입부터 코드 적용까지

이번 글은 댓글 시스템 만들기 1편에 이어지는 두 번째 단계로, Supabase 가입부터 데이터베이스 설정, 그리고 텔레그램 알림 연동까지 실제로 적용하는 과정을 정리했습니다. 특히 모바일 알림, 방문자 작성 정보 저장, 페이지 URL 기록까지 포함된 구조라서, 개인 블로그나 자료실 운영에 바로 활용할 수 있는 형태입니다.

처음 접하는 분들도 따라올 수 있도록 가입 과정, 프로젝트 생성, SQL 테이블 구성, 알림 코드 적용까지 순서대로 정리했으니, 그대로 따라 하시면 기본적인 댓글 관리 서버를 직접 만들어볼 수 있습니다.

1. Supabase 가입 하기

먼저 GitHub 로 가입을 시도해 보세요. 만약 어렵다면 이메일로 간편하게 가입을 진행하시면 됩니다..

이메일로 가입할 경우 아래 내용을 주의해서 진행하세요.

Name 아무거나
‘Personal’ 선택: 개인용(Personal) 계정을 선택합니다.
‘Free’ 요금제 선택: 반드시 0달러(Free) 요금제를 선택합니다.

2. 댓글 프로젝트 생성 입력 방법

Project name (프로젝트 이름):
- 이용할 블로그 또는 도메인을 따서 (예:openipc-db 라고 입력하세요. 소문자, 숫자, 하이픈만 가능합니다.)
Database password (비밀번호):
- 직접 입력하셔도 되지만, 옆에 있는 [Generate a password] 버튼을 눌러서 자동으로 만드시는 걸 추천합니다.
- [중요] 생성된 비밀번호는 꼭 복사해서 메모장에 따로 저장해 두세요! 나중에 데이터베이스에 직접 접속할 때 필요합니다.
Region (지역):
- 화면 중간의 Asia-Pacific 목록 중에서 Northeast Asia (Seoul) ap-northeast-2를 선택하세요.
- 서울 지역을 골라야 한국 블로그에서 방명록이 뜨는 속도가 가장 빠릅니다.
Security (보안):
- Enable Data API 와 Enable automatic RLS 는 모두 체크된 상태(기본값)로 두시면 됩니다.

모두 입력하셨다면 맨 아래에 있는 [Create new project] 버튼을 누르세요. 화면에 “Setting up project”라는 메시지와 함께 몇 분 정도 로딩이 진행될 수 있습니다.

최초 화면에 보이는 Project URL과 API Key는 나중에 블로그 코드에 넣어야 하니, 이 창은 그대로 띄워두시거나 따로 메모장에 복사해 두세요. 이제 데이터베이스를 세팅할 시간입니다. 화면 왼쪽을 보시면 여러 가지 아이콘이 세로로 나열되어 있을 거예요.

3. 방명록(댓글) 테이블 만들기

아이콘 찾기: 왼쪽 메뉴에서 SQL Editor라는 아이콘(기호 _ 처럼 생긴 것)을 클릭하세요.
새 쿼리 만들기: 화면 중앙에 있는 New query 또는 Create a new snippet 버튼을 누르세요.
코드 복사해서 붙여넣기: 아래의 코드를 그대로 복사해서 빈 칸에 붙여넣으세요. (이 코드가 날짜, 이름, 내용, 그리고 블로그 링크까지 한 번에 저장할 테이블을 만들어줍니다.)


drop table if exists blog_comments;

create table blog_comments (
  id bigint generated by default as identity primary key,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  name text not null,          
  author_link text,            
  content text not null,       
  page_url text,               
  is_admin boolean default false
);

alter table blog_comments enable row level security;

create policy "Anyone can insert comments" on blog_comments for insert with check (true);
create policy "Anyone can read comments" on blog_comments for select using (true);

코드 오른쪽 하단에 있는 [Run] 버튼을 누르세요. 하단에 Success라는 메시지가 뜨면 성공입니다!

테이블이 잘 만들어졌는지 확인해야 합니다.

왼쪽 메뉴에서 Table Editor (표 모양 아이콘)을 눌러보세요.
거기에 blog_comments라는 이름의 테이블 확인

확인되시면 “방명록이 달렸을 때 텔레그램으로 날짜와 링크가 포함된 알림 보내기” 설정을 바로 이어가겠습니다.

4. 텔레그램에 댓글 알림 기능 설정하기

왼쪽 메뉴에서 Edge Functions 를 클릭하세요.
[Via Editor] 구역에 있는 [Open Editor] 버튼을 누르시면 됩니다.
함수 이름(Name)에 telegram-notify라고 적고 [Create function]을 누르세요.
화면에 코드를 적는 검은색 편집창이 나타날 텐데, 기존에 적힌 글자들을 싹 다 지우고 아래 코드를 그대로 복사해서 붙여넣으세요.

import { serve } from "https://deno.land/[email protected]/http/server.ts"

serve(async (req) => {
  try {
    const payload = await req.json()
    const record = payload.record 
    
    // [확인]  실제 봇 토큰과 채팅 ID입니다.
    const BOT_TOKEN = "실제 봇 토큰"
    const CHAT_ID = "채팅 ID"
    
    // 한국 시간(KST)으로 날짜 및 시간 변환
    const now = new Date(record.created_at);
    const dateString = now.toLocaleDateString('ko-KR', {
      year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'
    });
    const timeString = now.toLocaleTimeString('ko-KR', {
      hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
    });

    // 테이블 필드명 매칭: name, content, author_link, page_url
    const authorName = record.name || "익명"
    const commentBody = record.content || "내용 없음"
    const authorLink = record.author_link || "등록된 링크 없음"
    const postUrl = record.page_url || "https://openipc.kr"

    // 텔레그램 메시지 구성
    const text = `🔔 [openipc.kr] 방명록 알림

📅 일시: ${dateString} ${timeString}
👤 작성자: ${authorName}
💬 내용: ${commentBody}

🔗 방문자 링크: ${authorLink}
📍 작성 페이지: ${postUrl}`

    const url = `https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`
    
    await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        chat_id: CHAT_ID,
        text: text,
        disable_web_page_preview: false 
      })
    })

    return new Response(JSON.stringify({ success: true }), { 
      headers: { "Content-Type": "application/json" },
      status: 200 
    })
  } catch (error) {
    return new Response(JSON.stringify({ error: error.message }), { 
      status: 400,
      headers: { "Content-Type": "application/json" }
    })
  }
})

코드를 붙여넣으셨다면, 상단에 있는 [Save] 또는 [Deploy] 버튼을 누르시면 됩니다.

혹시 텔레그램 봇 토큰과 채팅 아이디는 준비되셨나요?
아직이라면, 이 링크를 통해 Telegram 봇 토큰과 채팅 아이디를 먼저 생성하세요.

생성된 토큰과 아이디를 위 코드 중간의 "여기에_..._입력" 부분에 따옴표는 그대로 유지한 채 값만 넣어주면 모든 설정이 완료됩니다.

5. 테이블과 텔레그램 함수 연결하기

왼쪽 메뉴에서 Integrations에서 Database Webhooks 아이콘 클릭 후 Webhooks 메뉴를 찾으세요

활성화: 해당 항목 아래 버튼을 눌러 Enable webhooks(활성화 상태)로 만들어 주세요. 그래야 Overview 옆에 Webhooks 메뉴가 생성됩니다.

이 기능이 켜졌다면, 상단의 Create a new hook를 눌러 새로운 hook을 생성합니다.
이제 Overview 메뉴 옆에 새로 생성된 Webhooks 메뉴로 들어가세요.

[Create Webhook] 클릭
Name: send-telegram
Table: blog_comments ( 만든 방명록 표를 찾아 선택하세요)
Events: INSERT (글이 등록될 때만)
Webhook Type: Supabase Edge Functions 선택
Edge Function: 아까 만든 telegram-notify 선택
[Save] 또는 [Create Webhook] 클릭

세로에 생성된 hook 내용에 위 내용을 참고해 값을 입력합니다. 그리고 Create webhook을 누르면 모든 작업이 완료됩니다..

이제 내 블로그에 방명록이나 댓글에 누군가 글을 남기면, 1초 안에 내 텔레그램으로 날짜, 작성자 이름, 내용, 그리고 어떤 페이지에서 작성했는지 주소까지 포함된 알림을 보내주는 서버를 구축했습니다. 다음 글에서는 내 블로그나 사이트에 적용할 코드 적용 방법을 설명합니다.