블로그에 댓글 기능을 달기로 했습니다.
독자가 반응을 남길 수 있으면 좋겠다는 생각이었고, 어떤 방식으로 구현할지 찾아보기 시작했습니다.
나만의 의사결정 포인트
- 소셜로그인 또는 이메일 계정으로 쉽게 댓글을 달 수 있을 것
- 카드 등록, 과금이 없는 심플한 구현 방법일 것
- 애드센스 정책에 위반되지 않을 것
기존에 댓글기능을 추가하는 방법중 많이 알려져있는 방법은 깃헙 계정으로 인증 후 댓글을 다는 방법이였습니다.
저는 깃헙 계정이 있는데도 불구하고 이런 흐름이 불편하다고 느꼈습니다.
평소 다른 사이트에서는 소셜로그인이나 이메일을 많이 이용하기 때문에 아무리 깃헙 계정이 있더라도 평소 쓰던 방식과 다른 로그인 방식에 피곤함을 느꼈습니다.
또한 예전에 아마존에서 카드 등록 후에 갱신을 깜빡하여 과금이 되었던 경험이 있어서 지금 규모에 카드등록이나 과금되는 방식은 과하다고 느꼈습니다.
처음에는 Google 로그인으로 결정했습니다. 스마트폰을 쓰는 사람이라면 거의 대부분 구글 계정이 있고, 별도 가입 없이 기존 계정으로 바로 로그인할 수 있으니까요.
그런데 막상 따라 해보려니 중간에 이런 화면이 나왔습니다.
"Google Cloud Console — 결제 계정을 연결하세요."
무료라고 했는데 카드 번호를 입력해야 한다니. 잘못 건드리면 요금이 나올 수 있다는 불안감에 손이 멈췄습니다.
더 쉬운 방법이 없을까 싶어서 다시 찾아보기 시작했습니다.
댓글 시스템, 생각보다 선택지가 많다
결제 없이 쓸 수 있는 댓글 시스템을 기준으로 정리해봤습니다.
| 시스템 | 로그인 방식 | 외부 설정 | 광고 |
|---|---|---|---|
| Disqus | 소셜·비회원 | 불필요 | 무료 플랜에 광고 있음 |
| Utterances | GitHub 로그인 | GitHub OAuth 앱 생성 | 없음 |
| Giscus | GitHub 로그인 | GitHub OAuth 앱 생성 | 없음 |
| Supabase 이메일 | 이메일 링크 | Supabase 대시보드만 | 없음 |
Disqus는 설정이 제일 간단하지만, 무료 플랜에 광고가 붙습니다. 애드센스를 이미 달고 있는 블로그에 광고가 하나 더 생기는 건 득보다 실이 많다고 판단해서 제외했습니다.
미관 문제를 넘어 신경 쓰이는 부분이 하나 더 있었습니다. Google 게시자 정책은 블로그 운영자가 페이지에 게재되는 콘텐츠를 직접 통제하고, 독창적인 콘텐츠를 제공할 것을 권장합니다. Disqus 무료 플랜 자체가 정책 위반은 아니지만, 외부 위젯이 내 페이지에 어떤 광고나 콘텐츠를 심는지 내가 결정할 수 없다는 점은 리스크로 느껴졌습니다.
Utterances / Giscus는 깃헙계정 로그인을 사용하기 때문에 앞서 설명한 바와 같이 사용경험이 이메일 또는 소셜 로그인 사용법보다 부자연스럽다고 판단했습니다.
그렇게 남은 게 Supabase 이메일 매직링크였습니다.
이메일 매직링크가 뭔가요?
처음엔 생소한 방식이었는데, 써보고 나서 오히려 제일 깔끔하다고 느꼈습니다.
이메일 주소를 입력하면 Supabase가 로그인 링크를 자동으로 발송합니다.
메일함에서 링크를 클릭하면 그게 끝입니다. 비밀번호도, 앱 설치도 없습니다.
이메일 입력 → 메일 수신 → 링크 클릭 → 로그인 완료 → 댓글 작성
그리고 제가 제일 마음에 들었던 점은 —
Supabase 자체는 카드 등록 없이 무료로 시작할 수 있습니다.
Google Cloud Console처럼 결제 계정을 연결할 필요가 없습니다.
설정 방법
1. Supabase 프로젝트 생성
supabase.com에서 회원가입 후 새 프로젝트를 만듭니다.
카드 정보 입력 없이 무료로 시작됩니다.
2. 댓글 테이블 생성
Supabase 대시보드 → SQL Editor에서 아래를 실행합니다.
create table comments (
id uuid default gen_random_uuid() primary key,
post_slug text not null,
user_id uuid references auth.users(id) on delete cascade,
user_name text not null,
body text not null,
created_at timestamptz default now()
);
alter table comments enable row level security;
create policy "누구나 읽기 가능" on comments for select using (true);
create policy "로그인 사용자만 작성" on comments for insert with check (auth.uid() = user_id);
create policy "본인 댓글만 삭제" on comments for delete using (auth.uid() = user_id);
3. Redirect URL 등록
Supabase 대시보드 → Authentication → URL Configuration에서 아래를 추가합니다.
https://내블로그주소.com/auth/callback
이게 전부입니다. Google Cloud Console, 결제 계정 연결, OAuth 앱 생성 — 아무것도 하지 않았습니다.
실제로 어떻게 보일까?
독자가 댓글을 달 때의 흐름입니다.
- 포스트 하단에서 이메일 입력 후 "링크 받기"
- 이메일함에서 로그인 링크 클릭
- 블로그로 자동 복귀, 로그인 완료
- 댓글 입력 후 등록
소셜 로그인보다 한 단계가 더 있긴 하지만, 구글이나 카카오 계정 정보를 블로그에 연동하는 것보다 거부감이 훨씬 적다는 반응이 많습니다. 이메일 주소 하나만 입력하면 끝이니까요.
나중에 Google 로그인을 추가하고 싶다면?
Supabase는 여러 로그인 방식을 동시에 지원합니다.
Google Cloud Console 설정할 마음이 생기면, Supabase 대시보드에서 Google Provider를 활성화하는 것만으로 구글 소셜 로그인이 추가됩니다. 이미 구축해둔 댓글 구조를 바꿀 필요가 없습니다.
처음부터 완벽한 시스템을 갖추려다 카드 등록에서 멈추는 것보다, 지금 당장 설정할 수 있는 방법으로 시작하고 나중에 확장하는 게 낫다고 생각했습니다.
댓글 기능을 달고 싶은데 Google Cloud Console에서 막혔다면, Supabase 이메일 매직링크부터 시작해보세요.