https://velog.io/@dus532/viewership1
( 기존 소프트콘 뷰어십 제작기를 봐주시면 더욱 좋습니다! )

---

https://viewership.softc.one
소프트콘 뷰어십, 인터넷 방송 뷰어십 플랫폼

지금으로 부터 약 1년 반 전인 2023년 7월,
소프트콘 뷰어십은 20대를 끝내기전에 무언가를 만들어보자는 욕심과 더불어 좋은 포트폴리오를 만들어 취직해보자는 마음이 합쳐져 만들었던 1인 개발 프로젝트였습니다.

대한민국 시장에선 이런 비슷한 뷰어십 데이터를 제공하는 사이트는 풍투데이, 아프리카도우미 랭킹 ( 서비스 종료 ) 2가지만 존재했던 상황이였죠.

더불어 두 서비스 모두 방송 자체의 데이터가 아닌 별풍선 혹은 통계 자체에 집중한 사이트이기도 했습니다. 소프트콘 뷰어십은 이점을 파고들어 제작하게 되었죠.

본격적으로 이 이야기를 하기전 제 소개를 아주 간단하게 드리겠습니다.
저는 쿠팡 고객센터, 쇼핑몰 웹디자이너, 퍼블리셔, UI/UX 디자이너를 거쳐 프론트 엔드 개발자 테크트리를 타고 있는 개발자 정연진 이라고 합니다. 현재 스펙의 종착점임 프론트엔드 개발은 약 5년 정도 몸담아 왔었죠.

이 스펙 과정에 보다시피 디자인과 프론트엔드는 경험이 있으나 서버/DB 설계와 관련된 부분은 제 스펙에 전혀 존재하지 않습니다.

네.
저는 백엔드를 잘 모릅니다 🫠

방송 데이터는 6분에 1번씩, 하루 평균 5,000개의 방송이 진행되고, 이걸 단순하게 계산해도 하루 120만건의 데이터가 쌓이게 됩니다. 한주면 840만건, 1년이면 4.3억건의 데이터가 기본적으로 쌓이게 됩니다.

2023년 8월,
잘못되도 내 책임, 잘되도 내 책임이라면 일단 못먹어도 해봐야 하지 않겠습니까?
그렇게 본격적으로 첫 수집 데이터와 더불어 소프트콘 뷰어십의 1.0 서비스가 시작되었습니다.

1. 지금까지 요약

소프트콘 뷰어십을 운영하며 굵직한 사건들을 정리해보겠습니다.

• 2023년 8월, 역사적인 첫 서비스 시작
• 2023년 9월, 처음으로 겪어본 DB의 급격한 부하, 서버리스 시스템의 부족한 이해도와 인덱싱을 전혀 걸지 않았던 것으로 확인
  
• 2023년 10월, 가장 기본적인 현재의 시스템 RDS -> EC2 -> Vercel 구축 완료
  
• 2023년 12월, 트위치 종료 치지직 시작으로 트래픽 급격한 증가
  
• 2024년 2월, 수집 범위 확대 및 하루 방문자수 최고 방문자 6,000명 기록
  
• 2024년 2월, 트위치 서비스 종료 하루 최고 방문자 1.2만명 기록
  
• 2024년 3월, 대규모 트래픽 장애, 처음으로 서버에 캐싱이 추가됨
  
• 2024년 6월, 구독 시스템 시작
• 2024년 11월, 데이터 전체 삭제, PIT 복구 진행
  

부족했던 과거와 더불어 저의 실수도 많았습니다.
1인 개발 프로젝트이기에 디자인과 프론트엔드, 백엔드를 같이 하는 과정속에 놓치는 디테일들이 정말 많았던 1년이였다고 생각합니다.

그렇게 사이트를 1년간 운영하며 필요한 기능들을 그때그때 붙여버리다보니 코드는 지저분해지기 시작했고 개발 스택이였던 sass와 Prisma는 개발의 짐이 되기 시작했습니다. 그리고 부족한 이해도로 시작했던 디자인과 레이아웃은 더이상의 확장을 막는 장벽으로 변해있었죠.

더이상 마이너 업데이트가 필요한것이 아닙니다.
이제 완전히 새롭게 나아가야 할 때가 왔습니다.

2.0 완전히 새로운 소프트콘 뷰어십

쌓여진 문제들을 정리해봅시다.

• 디자인 : 슬슬.. 짜침
• 프론트 : tailwind 배우기 싫어서 sass로 했다가 후회중, Next 버전도 14에서 올라가질 못함
• 서버 : Prisma로 인해 복잡한 쿼리 구현이 굉장히 불편함, TypedSQL 역시 항상 generate를 거쳐야 하고 너무 불편함
• DB : 현재 Aurora DB ( PSQL ) 굉장히 만족중, 바꿀 생각 없음

이제 이러한 문제들을 하나씩 해결해봅시다.

1. 레이아웃과 기초 설계

소프트콘 뷰어십을 처음 만들었을 당시 큰 틀의 디자인만 정해두고 순간순간의 배치로 만들었습니다. 그러다보니 완성된 디자인의 결과물이 굉장히 아쉽고, 특히 레이아웃의 변경이 어려워 전문적 배치가 불가능했습니다.

마구잡이로 덧붙이는 개발 형태는 결국 괴이한 형태의 디자인을 낳기 시작했습니다.!

배치와 어울리지 않는 어색한 레이아웃, 필터 부분과 컨텐츠 부분이 완전히 따로 놀기 시작한 상황이였습니다. 사이트 자체가 가지고 있는 디자인 스타일에 맞추다보니 나온 최악의 결과물이였죠.

이제 전문적인 형태의 사이트를 만들기 위해서는 과감한 변화가 필요했습니다.

처음 결정한 사항은 상단 메뉴를 사이드바로 대체하는 것이였습니다.

사이드바 형태에서 시작되는 사이트 레이아웃은 구글의 머티리얼 디자인의 적응형 디자인 개념에 잘 나와있습니다. 와이드한 화면에 맞추어 사이드바 메뉴를 구축하는 전략이죠.
해당 전략에는 분명한 득실이 존재합니다.

• 장점
  • 사이트 레이아웃을 빈틈없이 활용할 수 있음
  • 메뉴 레이아웃과 컨텐츠 레이아웃을 다르게 가져가 일치감 있는 디자인 가능
• 단점
  • 광고 영역이 축소됨
  • 오히려 제공되는 정보가 줄어들 수 있음 ( 사이드바 영역이 자리차지를 하기때문 )

사실 이중 가장 중요한건 광고 영역이 축소되는 점이지만, 제공되는 정보 자체를 깔끔하게 보여주는것이 더 중요하다는 판단으로 사이드바 레이아웃을 가져가는 형태로 개발하기로 했습니다.

이렇게 레이아웃을 변경한다면 다음과 같이 일치감 있는 디자인을 만들수 있기 때문이죠. 이외에도 동적 레이아웃의 활용이 더욱 편해져 지금까지 쉽게 시도하지 못했던 다양한 기능들도 제약받지 않고 추가할 수 있게 되었습니다.

특히 테이블이 중심인 화면들에 있어 더욱 많은 데이터를 표현할 수 있게 되었으며 이로인해 사용자들이 더 많은 정보를 볼수 있게 만들수 있었죠.

이와 더불어 사용하고 있는 개발 베이스 역시 Next 14에서 Next 15로, 그리고 서버 ORM을 Prisma에서 Drizzle로 교체하며 완전히 새로운 서비스를 만들기로 결정했습니다.

---

내용에 앞서 실제로 Prisma에서 Drizzle로 교체한 Day1 결과는 놀라울정도기는 했습니다.
실제 DB CPU 사용률이 약 30~40% 이하로 감소하는 급격한 효과를 보여주었습니다. 이 부분은 다음편에서 다시 다루도록 하죠!

---

2. 테스트

이러한 급박한 설계의 변화를 바로 적용하는것은 분명 위험도가 높았습니다.

이미 상용화된 사이트에 문제가 생겨버린다면 어디서부터 수정해야할지 감도 오지 않을것이기에 테스트를 해볼수 있는 사이트를 구축해보는 것이 좋다고 생각했습니다.

그렇게 해서 테스트 사이트인 국케이원 ( 국회 정보 플랫폼 ) 을 거치기로 했죠.
방송과 플랫폼이 실제 발의 의안과 정당이라는 틀을 같이 했기에 데이터 구조도 비슷하게 가져가면서 오히려 데이터는 100분의 1도 되지 않는 테스트해보기에 너무 좋은 환경이였습니다.

https://assembly.softc.one

실제로 해당 사이트를 통해 소프트콘 뷰어십 2.0에서 구축할 테이블, 그래프 뷰를 미리 점검하고 서버 및 DB 개발에 대한 제반사항을 다시한번 확인해볼 수 있었습니다.

딱히 설계된 디자인 없이 2주간의 삽질과 여러 레퍼런스를 통해 국케이원이 만들어 졌고 실제 사용자들의 반응을 보며 문제점과 수정해야할점, 그리고 불편한점 등 다양한 포인트를 점검해 볼 수 있었습니다.

그렇게 2025년 1월 14일.
본격적으로 2.0 시스템에 대한 개발이 시작되었습니다.

( 다음편에 계속 )