← 목록으로 돌아가기

OOO를 변기에 넣고 내려!, 시원하이 제작기

•
#Next.js#Supabase#Youtube API

최근 무언가를 변기에 넣고 내리는 챌린지가 유행하는 것을 보며, 온라인상의 스트레스 요인들을 변기에 내려버리는 '시원하이' 웹사이트 프로젝트를 기획했습니다.

유튜브 영상에 달린 댓글을 실시간으로 수집하여 웹사이트 통계에 반영하는 자동화 파이프라인까지 구축했습니다. Next.js 16(App Router)와 Supabase를 활용하여 백엔드 인프라 구축 시간을 최소화하고 빠르게 핵심 로직을 구현한 과정을 공유합니다.

1. 프론트엔드: UI/UX 구현 (Next.js + Framer Motion)

사용자가 입력한 단어가 실제로 버려지는 듯한 시각적 효과가 이 서비스의 핵심이었습니다.

Framer Motion 애니메이션: 사용자가 단어를 입력하고 '버리기'를 누르면, 모달 창이 3D 형태로 구겨지는 애니메이션(rotateX, rotateY, scale 조작)을 적용했습니다. 이후 변기 컴포넌트에서는 다중 레이어의 테두리를 활용해 물이 빙글빙글 도는 소용돌이 효과를 구현하여 시원한 타격감을 만들었습니다.

통계 전광판: 누적 물내림 횟수에 따라 "코끼리가 샤워할 수 있는 물", "코엑스 아쿠아리움을 채울 물" 등으로 단위를 변환하여 재미 요소를 더했습니다.

2. 데이터베이스 구성 (Supabase)

백엔드와 DB는 Supabase를 활용했습니다. 단순한 텍스트 저장용 toilet_items 테이블을 생성하고, 가장 많이 버려진 스트레스 단어 TOP 3를 전광판에 보여주기 위해 SQL Editor에서 top_flushed_words View를 별도로 구성했습니다. 프론트엔드의 API Route에서는 이 View를 호출하여 데이터를 가볍게 가져옵니다.

3. 핵심 로직: 유튜브 댓글 실시간 연동 (Edge Function + Cron Job)

유튜브 쇼츠 영상에 시청자가 #내려라_월요일 이라고 댓글을 달면, 웹사이트 변기통으로 해당 단어가 자동으로 내려가도록 파이프라인을 구축했습니다.

Google Cloud Platform에서 라이브러리 사용 권한을 얻어온 이후에 아래와 같은 로직을 구현했습니다.

① YouTube Data API v3 연동

Supabase의 Edge Function (Deno 환경)을 생성하여 YouTube Data API의 commentThreads 엔드포인트를 호출했습니다.

② 정규식을 통한 데이터 정제 및 DB 저장

가져온 댓글 원본 데이터(textOriginal)에서 정규식(/#내려라_([가-힣a-zA-Z0-9]+)/)을 이용해 버릴 단어만 추출했습니다. 이후 중복 삽입을 방지하기 위해 유튜브 댓글의 고유 ID를 기준으로 Supabase DB에 upsert(..., { onConflict: "youtube_comment_id", ignoreDuplicates: true }) 처리를 진행했습니다.

국민체력이라는 단어로 테스트해본 결과 아래와 같이 정상 동작함을 확인할 수 있었습니다.

③ pg_cron을 이용한 10분 주기 자동화

Supabase 데이터베이스에서 pg_net 확장을 활성화한 뒤, pg_cron을 사용하여 스케줄러를 등록했습니다.

SELECT cron.schedule(
  'youtube-crawler-job',
  '*/10 * * * *', -- 매 10분마다 실행
  $$
  SELECT net.http_post(url:='Edge Function URL', headers:='인증 헤더')
  $$
);

크론식 */10 * * * *을 적용하여, 매시간 0분, 10분, 20분 등 10분 간격으로 Edge Function이 자동 트리거 되도록 설정했습니다.

4. 최종 연동 프로세스 요약

결과적으로 아래와 같은 자동화 파이프라인이 완성되었습니다.

  • 시청자 액션: 유튜브 쇼츠 영상에 #내려라_단어 형식으로 댓글 작성
  • 스케줄러 작동: Supabase pg_cron이 10분마다 Edge Function 호출
  • 데이터 파싱: Edge Function이 YouTube API를 통해 최신 댓글을 가져오고 정규식으로 단어 추출
  • DB 업데이트: 추출된 단어를 toilet_items 테이블에 중복 없이 upsert
  • 웹사이트 반영: 사용자가 웹사이트 접속 시(또는 물을 내릴 때) 갱신된 DB 통계(TOP 3 단어 및 누적 횟수)를 화면에 즉시 렌더링

마무리

프론트엔드 애니메이션부터 외부 API 연동, 데이터베이스 스케줄러까지 최신 웹 기술 스택을 활용하여 빠르고 즐겁게 개발해 본 프로젝트였습니다. 여러분도 스트레스받는 일이 있다면, 아래 링크를 통해 시원하게 물을 내려보시기 바랍니다.