[블로그 프로젝트] #1. 기능 명세 및 기술 스택 정하기

made by DALL-E

서론

블로그 만들기 첫 번째 태스크는 기능 명세와 기술 스택 산정이다.

기능 명세를 먼저 정하고 그걸 바탕으로 기술 스택을 정했는데, 이걸 작성하고 ChatGPT에게 묻고 답하며 추가적으로 생긴 기능들도 많아서 하나의 작업으로 묶어 보았다.

작업 소요 시간

• 기능 명세 작성 : 0.5시간
• 기술 스택 작성 : 1.5시간
• 블로그에 정리 : 1시간
• 총합 : 3시간 

기능 명세 정하기

처음에 러프하게 다음과 같은 기능 명세를 작성했다.

1. 기본 기능
   1. 게시글 작성, 조회, 좋아요, 댓글 작성
   2. 댓글 작성은 어렵지 않아야 함
2. 모바일 대응
3. 다국어 지원(i10n, 한국어/영어)
4. 뉴스레터 기능
5. 검색 기능
6. buy me a coffee 기능, 결제 모듈 기능
7. 관리자 모드
   1. 게시글 작성
   2. 게시글 수정 및 삭제
   3. 주요 지표 조회 (방문자 수, 구독자 수 등)
8. 자동화
   1. 예를 들어, 글을 쓰면 그 내용이 Medium이나 Substack 같은 플랫폼에 자동으로 퍼블리시 되게 할 수 있는가?

그리고 각각의 기능을 머리속에 떠올리며 조금씩 살을 붙여 나가고 추가적인 기능을 다듬어 나갔다. 그리고 이 기능 명세는 다음에 하는 기술 스택 정하는 작업을 하면서도 계속해서 수정을 해 나갔다.

이 단계에서는 내가 만들고자 하는 블로그가 어떤 모습인지에 대해서 대략적으로나마 구상이 되어 있었던 점이 유리했다. 처음부터 뭘 만들어야 할지 몰랐다면 아마 이 단계도 굉장히 오래 걸렸을 것 같다는 생각이 든다.

기술 스택 정하기

이렇게 기능 명세를 정하고 나서는 기술 스택을 정해볼 차례였다. 내가 방금까지 작성한 내용들을 가지고 ChatGPT에게 물어 보았다.

기술 스택을 ChatGPT에게 처음 물어보았고 세부 항목별로 굉장히 자세하게 알려주었다.

이렇게 첫 질문 하나만 했음에도.. 프론트엔드/백엔드/i18n/댓글/뉴스레터/결제/분석/배포 등 영역별로 어떤 기술 스택을 추천하는지 굉장히 자세하게 알려주었다. 여기서 끝나는 것이 아니라 각각의 영역별로 여러 가지 옵션이 있는데 그 중에 왜 이 옵션을 선택했는지까지 잘 알려주었다.

이렇게 ChatGPT와 대화를 하며 내가 놓쳤던 부분들(특히 보안, 어뷰징 관련)에 대해서도 많이 제안을 해 주었고 그렇게 영역별로 하나씩 깊게 질문을 주고받으면서 다음과 같이 기술 스택을 완성해 보았다.

1. Frontend : Next.js + Chakra UI

내가 현업에서도 쓰고 있어서 가장 익숙한 Next.js를 추천받았다. v15 앱 라우터 방식은 내가 써본 적이 없어서 이번 기회에 제대로 써볼 수 있을 것 같다.

Next.js와 비교할 만한 옵션으로 Remix, Astro 등도 있었으나 이들의 장점(가볍고 빠른 프로토타이핑, 서버와 클라이언트 전환 사고가 단순 등)이 나에게는 크게 매력적으로 다가오지 않았다.

스타일링의 경우도 내가 디자인 감각이 부족해서 이러한 나의 상황에 맞게 적절한 도구를 추천 해 달라고 부탁했고 TailwindCSS, Chakra UI, shadcn/ui, Mantine 등을 추천해 주었다. Chakra UI의 경우 직관적인 컴포넌트라 러닝 커브가 낮고 추후 MCP 등으로 AI가 해당 디자인 시스템 기반으로 코드를 짜줄 가능성도 고려해서 가장 적합하다고 판단했다.

2. Backend + DB : Supabase (PostgreSQL) + Server Action (Next.js)

백엔드의 경우 크게 두 가지 정도의 옵션을 생각했다.

1. Nest.js + PostgreSQL(or MongoDB)
2. Supabase(Backend as a Service, BAAS)

추가적으로 기능 개발을 해야 할 API가 다소 있을 것 같아(계정, 결제, 댓글 등) 처음에는 1번으로 가야겠다고 생각을 했었다.

백엔드를 어떤 기술스택으로 가져가야 할지 ChatGPT에게 물었다.

내 예상과 다르게 처음에 운영 부담을 최소화 하기에는 Supabase가 좋다는 의견을 전달했다. 문서형 구조를 가진 NoSQL이 콘텐츠 데이터를 다룰 때 더 좋을 것이라고 생각했는데, 본문 이외에도 SQL로 처리해야 하는 데이터가 많기에 본문은 jsonb 또는 파일형(MDX)으로 처리하고 나머지를 PostgreSQL로 혼합해서 가라는 대안을 제시해 주기도 했다.

혹시나 나중에 복잡한 비즈니스로직을 개발해야 할 일이 많이 생긴다면, 데이터베이스를 마이그레이션 해서 Nest.js로 옮기는 것도 고려해 볼 수 있을 것이다. 이번에는 기본적인 백엔드는 Next.js의 서버 액션과 Supabase의 다양한 서드 파티 도구들을 최대한 잘 활용해서 써보는 것을 목표로 한다.

3. Deployment :  Vercel

배포를 어떻게 하면 좋을지 물었을 때 ChatGPT는 다음 조합을 추천했다.

Vercel(Next) + Supabase(Managed Postgres) + Upstash Redis(KV/RateLimit) + CDN 캐싱(ISR)

내가 여기서 단 조건은 1000 TPS 였는데, 나중에 다시 확인해 보니 1000 TPS 정도의 트래픽을 감당하는 경우는 블로그의 하루 조회수가 수십만 단위인 경우였다. 당연히 처음부터 이정도 트래픽을 감당할 필요는 없기 때문에 10 TPS 정도까지만 고려하려고 한다. 이 경우 Vercel, Supabase 모두 무료 플랜으로 사용이 가능하다.

읽기는 최대한 정적/캐싱 으로 처리하고 (ISR + revalidateTag), 쓰기에서 Upstash Redis나 Vercel KV로 rate limit을 관리하려고 한다. 이미지의 경우도 Vercel의 자체 이미지 최적화 + Supabase Storage를 사용하려고 한다.

추가적으로 고려하면 좋을 사항으로 PITR(복구) 정책, Sentry 등으로 오류 추적, n8n으로 DB 덤프 백업, Playwright E2E 테스트로 핵심 플로우에 대한 스모크 테스트 작성 등을 제안 받았다.

4. AI Automation Tools : n8n

나는 최대한 많은 영역에서 자동화를 해보려고 한다. 지금 생각하는 자동화가 필요한 영역들은 다음과 같다.

1. 누군가 댓글을 작성하거나, 댓글에서 멘션을 하면 이메일/앱 푸시 알림이 오게 한다.
2. 글 발행 시 뉴스레터를 자동으로 발송한다 (즉시 or 다음날 오전 9시 등)

자동화 할 수 있는 영역은 사실 블로그를 만들면서 무궁무진 할 것 같다는 생각이 든다.

5. Newsletter : Beehiiv

뉴스레터 기능의 경우 직접 다 구축하면 초반에 공수가 많이 들고 운영하는데 비용이 많이 발생할 것 같아서 호스티드 SaaS를 사용하기로 했다. 

추천 받은 세 가지는 Buttondown / Mailchimp / Beehiiv 이었고, 2,500명 구독자까지 무료로 무제한 발송 + 커스텀한 뉴스레터 제작 가능하다는 옵션이 매력적이어서 Beehiiv 를 선택하게 되었다.

6. Auth : Supabase Auth

인증을 어떻게 할지 고민이 많았다. 사실 관리자인 나는 인증이 필요한 부분이 있지만 (게시글 쓰기, 수정, 삭제 + 대시보드 등) 일반 방문자는 굳이?라는 생각이 들었기 때문이다. 그리고 댓글 작성 시 인증을 필수로 달면 이탈이 많이 생길 것 같다는 염려도 들었다.

그래서 이메일 인증과 뉴스레터 구독, 로그인을 모두 동일한 역할로 만들어 보기로 했다. 이메일 인증을 해서 타고 들어오면 해당 이메일로 계정이 생성이 되고 여기에는 닉네임도 있어서 자유롭게 수정할 수 있게 만들기로 했다. 뉴스레터 구독을 해도 동일하게 이메일 인증을 하고 로그인이 되게 만드려고 한다. 로그인 창에 작은 체크박스로 뉴스레터 구독까지 디폴트로 담아도 좋을 것 같다.

인증과 관련해서는 Supabase Auth를 사용해 보려고 한다. 기본적인 Google/Github Oauth 도 지원하고 테이블에 RLS를 같이 사용하면 API/쿼리 단에서 기본적인 보안도 챙길 수 있을 것이라고 생각했다. 인증이 엄청 중요한 서비스는 아니라서 이정도로 가볍게 시작해도 좋을 것 같다.

미들웨어 단에서 관리자 보호를 해 주는 작업도 필요하고 이건 서버 액션에서 2중으로 체크하기로 한다. 그리고 전혀 생각치 못한 건데 닉네임 작성 시 유니크 제한과 금칙어, 길이제한 등의 요소도 고려를 해 주어야 한다.

7. Payment : Toss payment + Buy me a coffee

간단한 후원 기능이 있으면 좋을 것 같고 나중에 여기서 내가 무언가를 판매할 수도 있을 것 같아서 결제 기능도 같이 구현해 보려고 한다. 처음에는 국내에서 방문자들이 더 많을 것 같아 토스 페이먼츠로 결제 연동을 하고 해외 사용자들을 위해 Buy me a coffee 기능도 달아 놓으려고 한다. 둘 다 써본 적은 없는데 많이 쓰이니 크게 문제는 없을 것 같고 트랜잭션 부분에서만 신경을 좀 쓰면 괜찮을 것 같다.

8. Search : Meilisearch

처음에는 검색이면 당연히 ElasticSearch를 써야지! 라고 생각했었다. 하지만 찾아보니 생각보다 다양한 선택지가 있었고 결과적으로 ES보다 조금 더 가벼우면서 자동완성, 오타 허용 등의 기능이 있는 Meilisearch를 셀프 호스트로 띄워서 써보기로 했다. 

한국어 토큰화의 경우 엣지가 있어서 사전 토큰화 작업을 해 주어야 한다. 한국어 품질을 높기이 위해 색인 시 N-gram(2~3글자) 토큰 필드를 추가해 주어야 하고, 공백 분절 전처리를 해 주어야 한다. 그리고 색인 동기화를 하기 위해 n8n으로 게시글 CUD 시에 Meili 업데이트를 해 주어야 한다. 가중치 부여 해 주는 작업과 자동완성, 페이싯 등도 지원하는 기능이라서 잘 사용해 보고 싶다.

이 작업을 하면서 많은 걸 배울 수 있을 것 같다.

9. i18n : next-intl

나는 한국 사용자들만 고려하기 보다는 영어권 사용자, 그리고 더 나아가 전 세계의 사람들에게 내 인사이트를 전하고 싶다. 그래서 한국어로 글을 쓰면 자동으로 영어로 번역이 되어서 보여질 수 있게 작업을 하고 싶다. 번역의 경우는 자동으로 1차 번역을 해준 초안에서 자체 검수 과정을 거치는 프로세스로 작업하려 한다. 스키마에서 번역본을 어떻게 담을지는 조금 더 고민 해 보아야 겠다. 번역 시 어떤 모델(DeepL/Google/Claude 등)을 쓸지도 고민이다.

/:locale/{{...path}} 와 같이 언어별로 라우팅 처리를 해서 보여주는 방식으로 라우트 처리도 고려하고 있다.

10. Analytics : Vercel Analytics

If you can't measure it, you can't manage it.
측정할 수 없다면, 관리할 수 없다.
- 피터 드러커

이 블로그에서 나오는 모든 지표들을 내가 대시보드를 통해 보는 것이 목표이다. 점점 더 봐야 할 지표들이 추가가 되겠지만, 지금 생각하는 지표들은 다음과 같다.

1. 일간/주간/월간 조회 수/좋아요 수
2. 국가별 방문자 수
3. 트위터, 브런치, 미디움, 섭스택 등 구독자 수

이 블로그에 쓴 글을 트위터, 브런치, 미디움, 섭스택 등 다른 글쓰기 플랫폼에도 확장하고 싶다. 그래서 각각의 플랫폼에서 얼마나 영향을 주는지도 장기적으로 보고 싶다. 기본적인 지표는 Vercel Analytics에서 아마 확인할 수 있겠지만 이러한 구독자 수는 스크래핑을 해서 스냅샷을 계속 쌓아 나가는 식으로 하려고 한다. 공식적인 API가 있는지는 확인이 필요하다.

11. Comments : Cloudflare Turnstile + ip/session Rate Limit(Upstash)

댓글과 대댓글은 한 번 직접 구현해 보려고 한다. 외부 툴도 생각해 보았으나 여러가지 내 입맛에 맞게 하기에는 한계를 느꼈다.

기본적으로 댓글 작성에 로그인이 없어도 가능하도록 허들을 낮추면서 동시에, 어뷰징이나 남용은 못하게 막고 싶다.

생각보다 고려해야 할 사항이 많았다. 첫 댓글을 pending 처리 하거나 동일 내용/짧은 간격 댓글을 차단하는 장치가 필요할 수도 있다. 블랙리스트 기능이나 신고 버튼 등도 고려해야 한다. 그리고 대댓글도 달 수 있게 하려 하는데 너무 깊어지지 않게 스키마 적으로, 디자인 적으로 고민하는 것도 필요하다. 이렇게 해도 악성 유저가 생길 수 있으니 관리자가 댓글을 삭제하는 기능도 당연히 만들어 주어야 한다.

12. Editor : Tiptap

에디터는 직접 구현하기 너무 힘들 것 같아.. 서드 파티 도구를 쓰기로 했다. 여러 옵션을 놓고 고민하다가 깔끔한 UX에 오픈소스이면서 노션 스럽기도 하고 또 여러 가지 옵션이 있는 Tiptap을 사용하려 한다. 본문을 JSON으로 저장해서 서버 혹은 클라이언트에서 렌더링 해서 사용하는 방식으로 쓰려고 한다.

linear : 태스크 관리 도구

이번에 작업을 하면서 태스크 관리 도구로 linear를 사용해 보았다. 방금까지 내가 작성한 기술 스택 선정 내용을 한 번 검토 받고 이걸 linear에서 티켓화 하고 싶었다.

내가 해야 할 일들을 Linear의 issue로 만들어 달라고 ChatGPT에게 부탁했다.

이렇게 질문하니 ChatGPT는 linear에 있는 메타데이터 키 값을 고려해서 내가 해야 할 작업 리스트를 CSV 파일로 만들어 주었다.

그리고 찾아보니 linear에는 CSV를 import 하여 issue로 만드는 기능이 있었다. import

linear/packages/import at master · linear/linear

이 패키지를 설치하면 CSV 파일에 field 명이 title, description, assignee 등으로 맞춰져 있는 경우 자동으로 이 파일을 linear issue로 변환해 준다. 나는 35개의 이슈를 ChatGPT가 만들어 주었는데, 하나씩 옮기면 최소 20~30분이 걸릴 수 있는 작업을 단 1분만에 이렇게 깔끔하게 할 수 있었다. 

linear 설정 페이지에서 API KEY 하나 만들고 linear-import 패키지 다운 받아서 명령어 한 줄 입력하면 끝

이제 내가 해야 할 일들을 티켓화 하는 것까지 완성했다. 이제 다음에는 깃헙 환경 세팅을 하고 티켓을 하나씩 작업 해 나가면 될 것 같다.