velog dashboard v2 - 벌써 120만개가 모인, 리뷰 & 0.6 version (feat. 서버 비용 0원)

정현우·2025년 5월 21일

Project Records

목록 보기

10/10

Velog Dashboard v2

Velog Dashboard 정식 릴리즈 이후 약 2.5개월간의 "결과" 와 0.6 version
빨리 접속하기: https://velog-dashboard.kro.kr/
Github repo: https://github.com/check-Data-Out/velog-dashboard-v2

누구세요?

velog dashboard 라는 프로젝트는 "딸각" 으로 velog 전체 통계를 보여주는 web-application project 입니다!
- velog dashboard v2 - 베타 오픈!!
- velog dashboard v2 - 딸깍으로 전체 통계 보기
오픈 1주일만에 100명이상 빠르게 등록해주시며, (🙏🙇🏻‍♂️) 확실하게 velog 의 통계 쉽고 한 눈에 보고 싶은 마음이 있는 것을 증명해주셨습니다.ㅎㅎ 사실 꽤 예전에도 이런 시도가 많았는데요, 다 사양되고, 개개인에 의존하고 있는 형태였었습니다.
사실 "velog dashboard 제작기 (1) - 벨로그 통계를 편하게 보고 싶어요 ㅠ" 라는 것으로 23년도 11월 즈음 한 번 등장한 적이 있었으나, 제가 만든 해당 플젝이 velog 쪽 DBMS 를 터뜨려버렸습니다...
그래서 머리부터 발끝까지 완전 재정비해서 0 to 1, 지금은 1 to 10 을 향해 나가고 있는 project 입니다!! ㅎㅎ

아직 확인 안해보신 velog 유저분들 가볍게 "딸각" 으로 전체 통계 한 번 보고가셔요!!~

성과 공유

일단 daily 통계 개수가 벌써 120만개가 넘었습니다..!🥳🥳🎉 그래서요.. supabase 가 더 이상 무료 티어 못쓴대요.. (사실 egress 때문) 좋은 소식인지 슬픈 소식인지 애매하네요 🥹

하지만 "수평 분할!!", 샤딩을 세팅 중이며, 받지 못했던 신규 사용자 분들을 더 적극적으로 받을 수 있게 되었습니다!! 이 때문에 어디서 사용해보라고 적극적으로 말을 못했었어요 ㅎㅎ..

이제 더 편하게 확인해주세요!! 🔥🔥

1) 게시글 수

17,248 개
저는 이 부분에서 놀랐는데, "전체 통계 궁금하신 분들은 velog 헤비유저였습니다." ~~(당연한 것인가?!)~~
사실 처음 가설로는 velog 사용하시는 분들 대부분 본능적으로 전체 통계가 궁금할 것 이라고 생각했는데, 압도적인 헤비 유저분들의 리텐션차이가 있었습니다!!

2) 사용자 별 평균 & 중앙값 게시글 수

Average: 약 87 개
Median: 약 56 개
평군과 중앙값 에서 알 수 있듯, "long tail",, 소수 상위 유저가 견인하고 있는 게시글 수 형태 입니다 ㅎㅎ
가볍게 파레토 법칙 기반의 상위 10% 사용자 게시글이 몇 % 차지하는지 보면 아래와 같더라구요?!

항목	값	해석
상위 10% 유저 수	20명	-
상위 10% 게시글 수	7,320개	*전체의 42.44%*
하위 50% (6~10분위) 유저 수	99명	-
하위 50% 게시글 수	2,377개	*전체의 13.78%*

3) Active User

(PS. 철저하게 GA 랑 web-server log 에 의존한 분석.. 오차 분명 존재 가능성 농후 :'))

DAU & MAU

DAU: 평균 약 30-50 선
MAU : 평균 약 1000-2000 사이 선
사실 생각보다 많아서 놀랬습니다,, ~~왜 많아요..?~~

역시 위에서 살펴본 바와 같이 우리 헤비 유저 분들이 견인하고 있는 수치입니다. 물론 여기엔 제가 정말 매일 아주 잘 사용하고, 만족하고 있습니다 ㅎ ~~나 쓸라고 만든 product~~
유입은 Direct 가 가장 많았는데, 긍정적으로 해석하자면 "대부분의 daily 활성 사용자 분들은 즐겨찾기 로 들어오고 계셨다~" 라고 볼 수 있습니다! 왜냐면 저흰 마케팅이란걸 전혀 안하기때문.. 유입 채널은 velog 의 "제 게시글 뿐" ...
혹시나 코호트를 포함한 이상을 바라신다면,, pass ㅎㅎ 사실 추적을 위한 세부 세팅을 안해둬서 (애초에 구해볼 생각을 안했어서..) ~~귀찮아서 패스입니다..~~

Update!!

사실 안보이는 부분 업데이트가 정말 많았습니다.. 매우 슬프게 다들 투여할 수 있는 시간이 제한적이라 ㅠㅜ 특히 "최적화(메모리, 네트워크 사용량, 레이턴시, 랜더링 퍼포먼스)" 많은 노력을 했습니다 ㅎㅎ)

1) 타임존 관련 이슈 해결!

그렇게 당하고 또 당해버린 타임존 이슈.. 이 때문에 00시 부터 09시 까지 저희 통계는 stop the world 가 되었죠.. KST 기준 새벽에 쓴 글이 어제 쓴글이 되어버리기도 하구요

"통계값을 가져오는 배치" 는 KST 기준으로 데이터를 동기화 하고 있었습니다. 그리고 "날짜 값만" 저장했죠!
하지만 API 서버에서 이를 간과하고 SQL 들이 모두 UTC 기준으로 "하루"를 책정하고 있었죠..
그 덕분에 FE 에서받는 시간관련값이 어떤 곳은 KST 로 변환되서 주고, 어떤 곳은 UTC 그대로 주고 있었죠.. (FE 에서 아주 아찔)
더욱이 api server, node runtime 과 supabase 모두 UTC 기준으로 모두 셋업되어 있었습니다! ㅎㅎ
처음에 급한대로 FE 에서 일단 시간 보정을 했는데, 다들 아시다시피 client-side, 즉 브라우저에서 실행되는 Date 는 대부분의 method 가 브라우저 시간을 따라가더라구요! 결국 아래와 같은 강제 KST 보정 함수 를 사용하고 있습니다!

const KST_DIFF = 9 * 60 * 60 * 1000;

/**
 * KST로 변환된 날짜 정보를 담는 인터페이스
 */
export interface KSTDateFormat {
  /** "YYYY-MM-DD" 형식의 날짜 문자열 */
  short: string;

  /** ISO 8601 형식 + KST 오프셋 포함 문자열 */
  iso: string;

  /** KST로 보정된 Date 객체 */
  full: Date;
}

/**
 * 주어진 날짜 문자열을 KST(한국 표준시) 기준으로 변환함.
 *
 * @param {string} [date] - 변환할 날짜 문자열 (예: "2025-05-15T08:00:00Z")
 * @returns {KSTDateFormat | undefined} 날짜가 없으면 undefined 반환
 */

export const convertDateToKST = (date?: string): KSTDateFormat | undefined => {
  if (!date) return;

  // UTC 날짜 파싱
  const utcDate = new Date(date);

  // UTC+9 (KST) 시간으로 변환
  const kstTimestamp = utcDate.getTime() + KST_DIFF;
  const kstDate = new Date(kstTimestamp);

  // UTC 메서드를 사용하여 KST 시간을 추출
  // (UTC 메서드에 KST 시간을 넣으면 원하는 결과를 얻을 수 있음)
  const year = kstDate.getUTCFullYear();
  const month = (kstDate.getUTCMonth() + 1).toString().padStart(2, '0');
  const day = kstDate.getUTCDate().toString().padStart(2, '0');
  const hours = kstDate.getUTCHours().toString().padStart(2, '0');
  const minutes = kstDate.getUTCMinutes().toString().padStart(2, '0');
  const seconds = kstDate.getUTCSeconds().toString().padStart(2, '0');

  return {
    short: `${year}-${month}-${day}`,
    iso: `${year}-${month}-${day}T${hours}:${minutes}:${seconds}+09:00`,
    full: kstDate,
  };
};

왜? 라면, "하루" 라는 기준이 client side 브라우저 시간대에 따라 달라지지만, 저희 서비스는 "하루" 를 배치에서 무조건 KST 기준으로 하기 때문에 only KST 라는 기준을 세워야 했습니다!! (철저한 Korea 로컬라이제이션)
사실 실제 root cause 를 찾는 과정과 debugging 은 위 시나리오처럼 간단하지 않았습니다.. 시작은 리더보드와 Query Explain 이 던진 공이었죠 ㅎㅎㅎㅎㅎ 🥹 그리고 모든 SQL 을 갈아 엎었구요. ㅎㅎㅎㅎ

아직 확인을 안하셨다면? 아래와 같이 "상단 상태바" 형태로 인디케이터가 있습니다~~

3) 드디어, 리더보드: 리더보드 기능이 생겼습니다!!

[ 사용자 또는 게시글 기준 / 조회수 증가 또는 좋아요 증가 / 10위 또는 30위 / 30일 또는 7일 ] 필터로 리더보드를 볼 수 있습니다!
저희가 username 은 저장하지 않고 있어요! email 없으신 분들은 리더보드에서 제외됩니다!!

4) QR 코드 로그인!

다중 로그인에 불편함이 있으셨을거에요!! 이제 QR 코드 한 방으로 자동 로그인이 가능합니다!! PC to PC 를 위해서 QR 밑에 url 로 추가하려고 합니다!!

5) 드디어, 공식 'Extension'

이는 저희쪽 API를 활용한 익스텐션이며, 벨로그 페이지에서만 보여주는 전체 요약 통계 입니다!!
이를 바탕으로 readme 의 카드, 특정 곳에 임베딩 등과 같이 아주 다양한 곳에서 활용 가능성을 기대하고 있습니다~~
~~아직 익스텐션 앱스토어에 릴리즈는 못했습니다 / 계속 허가를 안해줘..~~

다운로드는 여기서!!
- https://drive.google.com/file/d/1Ccn7WnYFQ6dJP29LZW9BwUxqhqZAhS8D/view?usp=sharing
- 추가하는 방법이 궁금하시다면?! - https://support.google.com/chrome_webstore/answer/2664769?hl=ko

6) 마무리

센트리를 붙여서 live-time issue 트래킹이 가능해요!! nextjs 의 build output, source map 때문에 애를 먹었습니다..
전체적으로 FE 사이즈 조절, 반응형 고도화를 했어요!!
과거의 daily 통계값은 아마 이제 5~6개월까지만 보관하려고 합니다!!
- 이 때문에 게시글 하나 하나의 전체 범위 통계 변화 조회가 아니라, 최대 6개월 내외로 조회가 가능하게 될 것입니다. 🙏🙇🏻‍♂️

서버 비용은 0 원!!!

어떻게?

사실 너무 별거 없어서 공유 드릴 말이 없는데, 많이 문의 주셔서 다시 남겨보자면! Oracle + Supabase + git action 조합이라 그렇습니다.
특히 엄청난 transaction 들이 필요한 API 도 딱히 없고 (최근에 추가된 리더보드 빼고) 엄청난 DAU 가 있는 것 도 아니라 완전 버틸만 합니다.
stand-by 상태 oracle instance 가 총 8대 정도라 (api + fe 만 6개 가용, 팀원들 인스턴스 ㅎㅎㅎ) 추산치 & 예상치로 1~5만까지는 거뜬할 것 같네요. (로드밸런서만 잘 버텨준다면)
결국 저희한테 제일 중요한게 "통계 batch" 인데, 지금 https://github.com/Check-Data-Out/velog-dashboard-v2-back-office/actions 보시면 20개 aggregation (scraping) 배치가 열일중!!

무료 티어 근데 더 못쓴대요..

그래서 supabase 무료 티어를 "샤딩" 하려고 합니다 흐흐흐 😈😈. duplication 을 하려는 것은 아니고 완벽한 물리적 분할, Horizontal Partitioning 을 하려고 합니다!
덕분에 더 많은 velog 사용자분들의 daily 통계를 보여드릴 수 있습니다!!

TO BE

1) LLM 을 활용 해보려고 합니다!

왜?

근본적으로 "벨로그 통계" 는 어떻게 보면 마케팅에서 콘텐츠 성과 측정과 같은 목적이죠! 성과 측정은 콘텐츠의 퀄리티 또는 방향에 대해서 고민하게 되고, 결국 더 좋은 방향으로 가게 됩니다!!
하지만 이는 너무 마케팅 관점이라, 진정으로 "내가 가고 싶은 방향" 이라는 다를 수 있다고 생각했어요! "동기부여" 관점과 "내가 가고 싶은 방향" 을 align 하기 위해서는 "동반자" 가 될 수 있는 어떤 것이 있으면 훨씬 좋다고 생각했고, 단순한 aggregation 이 아니라, 자연어와 함께 개개인의 "콘텐츠 동반자가 되는" LLM 을 붙이고 싶었습니다!!

내용

"주간 트랜드" 와 "사용자의 주간 게시글" 을 LLM 활용해 "내용을 포함한 글의 트랜드 & 통계 변화 분석" 해서 "주간 메일링" 을 하려고 합니다!!
계속 프로프팅 하고, mail template 과 내용을 바꿔가며 테스트해보고 있습니다! 아마 아래와 같은 형태가 아닐까? 합니다! (ps. 특정 데이터는 모킹된 가짜)

2) 다중 플랫폼의 통계를 가져와 보려고 합니다!!

바로 다음 타켓은 티스토리 & Medium 입니다!

둘 다 좋은 통계를 제공하는데요, 더욱이 티스토리는 "유입 분석" 역시 제공합니다. (과거 다음블로그 시절, 완전하게 콘텐츠 광고로 사용되었기 때문에...)
하지만 velog-dashboard v2 는 궁극적으로 "콘텐츠 통계 aggregation" 으로 나아가고 있고, 이를 발판 삼아 "기술 블로그들의 aggregation & contents hub" 가 되고자 합니다!

사실 가끔 velog 통계에 왜 그렇게 집착하냐고 듣는데 ㅋㅋ 여기가 "시작인 것" 뿐 입니다. ㅎㅎ 저희 25년도 North Start는 velog를 쓰는 모든 사람이 전체 통계를 아주 편하고 빠르게 보게하는 것 입니다!! ~~26년, 27년 North Start는 다음 기회에 ㅎㅎ~~
여전히 갈 길이 멀었지만, 지금까지 그래왔던 것 처럼 step by step 으로 소소하게 업드레이드 되는 모습 계속 보여드리겠습니다 :) 🙇🏻‍♂️🫡🫡🔥🔥🔥