레퍼런스 AI웹서비스 제작노트 -8 | 오픈 준비하다 또 터짐 (도메인, 검색 등록, 캐시)

 

주소를 바꾸고, 검색에 나오게 하고, 사람들이 들어와도 버티게 준비했다.
그러다 또 하나 터졌다 😅

 

1. 주소 바꾸기

jjinmango-ref.vercel.app → ref.jjinmango.kr

vercel.app 주소는 Vercel이 무료로 주는 임시 주소라 도메인연결을 했다.

찐망고 사주로 색인신청할 때 도메인변경하면서 애를 먹어서 이번엔 변경 후 신청을 ㅎㅎ
찐망고 사주처럼  jjinmango.kr 앞에 ref를 붙여서 연결했다.
이렇게 앞에 붙이는 걸 서브도메인이라고 한다.
새 도메인을 살 필요가 없어서 돈이 안 든다.

예전 주소는 308 리다이렉트를 걸어야 한다. (Vercel서버에서)
리다이렉트는 옛 주소로 들어오면 새 주소로 넘겨주는 설정이고
308은 앞으로 계속 이 주소라는 뜻

2. 구글 검색 등록 (서치콘솔)

사이트를 만들어도 구글이 모르면 검색에 안 나온다.
구글 서치콘솔에 등록하면 이 사이트 내 거고, 검색에 넣어줘라고 신청할 수 있다.

등록하려면 내 사이트가 맞는지 인증을 해야 한다.
도메인 설정(DNS)에 구글이 준 코드를 TXT라는 형식으로 넣는 방식이다.

여기서 막혔다.
ref에는 이미 Vercel 연결용 CNAME이 들어가 있었는데
CNAME이 있는 이름에는 TXT를 같이 넣을 수 없다.

그래서 아예 ref만 등록하지 않고 jjinmango.kr 전체를 등록함
도메인 맨 앞(@)에 TXT를 넣으면 된다.

가비아 DNS 설정
호스트: @
타입: TXT
값: google-site-verification=구글이 준 코드

 

이렇게 하니까 ref도, 사주 사이트(saju)도 한 번에 인증됐다.
서브도메인을 여러 개 쓸 거면 처음부터 도메인 전체로 등록하는 게 편하다 

그러지 못한 저는 다시 수정을..

3. 네이버 검색 등록 (서치어드바이저)

네이버는 서치어드바이저에서 등록한다.
인증은 네이버가 준 HTML 태그를 사이트 코드 head에 넣으면 끝.

등록하고 진단을 돌려보니 "사이트 설명은 80자 이내"가 떴다.
설명이 너무 길다해서  54자로 줄였다.

4. 작은 것들 손보기

• 파비콘: 브라우저 탭에 뜨는 작은 아이콘. 사주 사이트의 픽셀 망고를 재사용했다.
• OG 이미지: 카톡이나 SNS에 링크 보낼 때 뜨는 미리보기 이미지. 크기는 1200×630으로 맞췄다.
• 카톡 미리보기: 카카오 공유 디버거에서 주소 넣고 초기화

 

IT 커뮤니티에 올려볼까 하다가 그럴리 없겠지만 

그럼에도 불구하고 
사람이 몰리면 무료 한도가 넘어서 돈이 나가지 않을까? 라는 생각을 했는데

확인해보다가 문제를 발견했다. 캐시가 안 걸려 있었다.

메인이랑 카테고리 페이지가
누가 들어올 때마다 DB에서 섹션 1,900개를 전부 다시 가져오고 있었다.

원인은 검색 기능.
주소에 붙는 검색어(?q=)를 읽는 구조라서
Next.js가 "검색어마다 화면이 다르니까 저장하면 안 되겠네" 하고 캐시를 꺼버렸다.

에러도 안 나고 화면도 잘 뜬다.
모르고 지나갈뻔 ㄷㄷㄷㄷㄷㄷㄷ

DB(Supabase) 무료 플랜은 한 달에 보낼 수 있는 데이터 양이 5GB 정도다.
한 번 방문할 때마다 1MB 남짓을 가져오고 있었으니
대략 수천 번 방문이면 한도가 찬다. (물론 수천번..)

 

섹션 전체를 30분 동안 저장해두고
검색은 저장해둔 데이터 안에서 찾게 바꿨다.

import { unstable_cache } from 'next/cache';

// 섹션 전체를 30분(1800초) 동안 저장
const getAllSections = unstable_cache(
  async () => restAll('sections?select=*&order=created_at.desc'),
  ['all-sections'],
  { revalidate: 1800, tags: ['sections'] }
);

// 페이지에서: 저장해둔 데이터 안에서 검색
const all = await getAllSections();
const list = q ? all.filter((s) => s.title.includes(q)) : all;

 

이제 방문자가 100명이든 10만 명이든 DB에 묻는 횟수는 30분에 한 번으로 같다.
관리자에서 분류를 고치면 저장본을 바로 지우고 새로 가져와서 즉시 반영된다.

지금 구조를 정리하면

• 이미지: Cloudflare R2에 저장. 밖으로 보내는 비용이 무료라 이미지가 아무리 많이 나가도 0원
• 페이지: Vercel 무료 플랜으로 하루 몇천~만 명 정도는 충분
• DB: 방문자 수와 상관없이 한 달 2GB 안쪽
• AI 비용: 방문자한테는 0원. AI는 관리자 화면이랑 자동 수집에서만 쓴다

하나 더.
Vercel 무료 플랜은 비상업용이다.
나중에 광고를 달면 트래픽과 상관없이 유료(Pro, 월 $20)로 바꿔야 한다.
지금은 광고가 없어서 괜찮다.

 

남의 사이트 캡처를 보여주는 서비스라 운영 쪽도 챙겼다.

• 출처 표기: 크게 보기 이미지 위에 사이트 이름, 주소, 저작권 안내
• 저장 막기: 원본 이미지 버튼을 없애고 우클릭 저장도 막음
• 삭제 요청 창구: 푸터에 섹션 삭제를 요청할 수 있는 이메일
• 매주 백업: 월요일 새벽에 DB를 CSV 파일로 저장해서 8주 동안 보관
• 용량 알림: 이미지 저장 공간이 5GB를 넘으면 GitHub로 알림

지금 DB 백업 파일은 0.86MB, 이미지는 0.39GB.
아직 한참 남았다 ㅎㅎ

 

코드에 캐시를 써놨다고 실제로 캐시가 도는 건 아니다.
에러 없이 조용히 생기는 문제가 제일 찾기 어렵다.

그리고 오픈 준비는 기능 만드는 것보다
주소, 검색 등록, 미리보기, 백업 같은 눈에 안 보이는 것들이 더 오래 걸렸다.

 

다음편은 
섹션별로 모았으니 조합해 볼 수 있으면 좋겠다 싶어서 만든 무드보드와
무드보드를 AI가 와이어프레임으로 바꿔보는 작업을 구현 해봄 (관리자로만 가능함)

https://ref.jjinmango.kr/