위너비디오는 한국스마트선거 플랫폼의 영상 서비스 부문으로, 선거 후보자 및 기관을 위한 영상 녹화, 호스팅, 스트리밍, 분석 기능을 통합 제공하는 SaaS 기반 영상 플랫폼이다.

1. 프로젝트 개요
플랫폼의 핵심 가치는 다음과 같다.

1) 별도 장비 없이 웹 브라우저만으로 고품질 영상 녹화 가능
2) 녹화된 영상의 자동 인코딩 및 적응형 비트레이트 스트리밍 제공
3) 단축 URL 기반 영상 공유와 소셜 미디어 미리보기 최적화
4) 재생 분석 대시보드를 통한 시청 데이터 인사이트 제공
5) 요금제 기반 SaaS 모델로 유연한 서비스 이용


2. 시스템 구성

플랫폼은 세 개의 독립적인 서브 프로젝트로 구성되며, 각각 고유한 역할을 수행한다.

1) 영상 플레이어(vote-player)
HLS 기반 적응형 비트레이트 영상 재생기이다. 쿼리 파라미터로 영상을 지정하면 자동으로 화질을 선택하여 재생하며, 소셜 미디어 공유 시 OG 메타태그를 동적으로 주입하여 미리보기를 제공한다. 재생 이벤트를 수집하여 분석 데이터를 생성한다.

2) 영상 녹화기(vote-recorder)
웹 브라우저에서 WebRTC 기술로 영상을 녹화하는 프론트엔드 애플리케이션이다.
9:16 세로 비율의 고해상도 영상을 캡처하며, 전후면 카메라 전환, 디지털 줌, 터치 초점 등의 기능을 제공한다. 녹화된 영상은 클라우드 스토리지에 직접 업로드된다.

3) 위너비디오 콘솔(winnervideo)
플랫폼의 핵심 웹 애플리케이션으로, 랜딩 페이지, 사용자 콘솔, 인증, 결제, 영상 관리, 링크 생성, 분석 대시보드 등 모든 비즈니스 기능을 통합 제공한다.
풀스택 구조로 프론트엔드와 API를 단일 애플리케이션에서 운영한다.


3. 핵심 기술 스택
3-1. 백엔드
1) Node.js - 서버 런타임 환경
2) Next.js Pages Router - 풀스택 웹 프레임워크 (위너비디오 콘솔)
3) Express - 경량 웹 서버 (영상 플레이어, 영상 녹화기)
4) MySQL - 관계형 데이터베이스
5) mysql2/promise - 비동기 데이터베이스 드라이버 (커넥션 풀링)
6) JSON Web Token - 토큰 기반 인증
7) bcryptjs - 비밀번호 해싱
8) AWS SDK - S3 호환 클라우드 오브젝트 스토리지 연동

3-2. 프론트엔드
1) React - 사용자 인터페이스 라이브러리
2) TypeScript - 정적 타입 시스템 (녹화기, 콘솔)
3) Material-UI(MUI) - UI 컴포넌트 프레임워크
4) Emotion - CSS-in-JS 스타일링 엔진
5) shadcn/ui - 커스터마이즈 가능한 UI 컴포넌트 (콘솔)
6) video.js - HLS 적응형 비트레이트 영상 플레이어
7) Vite - 프론트엔드 빌드 도구 (플레이어, 녹화기)
8) react-hook-form - 폼 상태 관리 (콘솔)
9) recharts - 데이터 시각화 차트 라이브러리 (분석 대시보드)
10) motion - 애니메이션 라이브러리 (랜딩 페이지)

3-3. 인프라 및 외부 서비스
1) 네이버 클라우드 Object Storage - 영상 및 썸네일 저장 (S3 호환)
2) 네이버 클라우드 VOD Station - 영상 트랜스코딩 및 HLS 변환
3) 네이버 클라우드 CDN+ - 영상 스트리밍 엣지 배포
4) short.io - URL 단축 서비스
5) 토스페이먼츠 - 온라인 결제 처리
6) PM2 - Node.js 프로세스 관리
7) Git - 소스 코드 버전 관리 및 배포 트리거

4. 핵심 기능

4-1. 영상 재생
1) HLS 적응형 비트레이트 스트리밍
SD, HD, FHD 세 단계의 화질을 지원하며, 네트워크 상황에 따라 자동으로 최적 화질을 선택한다. SMIL 매니페스트 기반으로 화질 프로파일을 관리한다.

2) 소셜 미디어 최적화
영상 링크 공유 시 제목, 설명, 썸네일 등 OG 메타태그를 서버에서 동적으로 주입하여 카카오톡, 페이스북 등에서 미리보기가 정상 표시된다.

3) 모바일 최적화
User-Agent 기반으로 디바이스를 판별하여, 모바일 환경에서 재생 시 자동으로 전체화면 모드를 활성화한다.

4) 재생 이벤트 추적
페이지 조회, 재생 시작, 일시정지, 재생 완료, 오류 등의 이벤트를 수집하여 데이터베이스에 기록한다. 시청 시간, 시청률, 디바이스 유형, 접속 시간대 등의 메트릭을 포함한다.

4-2. 영상 녹화

1) 웹 브라우저 기반 녹화
WebRTC MediaRecorder API를 활용하여 별도 프로그램 설치 없이 웹 브라우저에서 직접 영상을 녹화한다. H.264/MP4 코덱을 우선 사용하며, Safari 환경에서는 MOV 포맷으로 자동 전환한다.

2) Canvas 기반 고품질 캡처
Canvas 렌더링 파이프라인을 통해 1080x1920 해상도, 9:16 세로 비율, 30fps 프레임레이트, 8Mbps 비트레이트의 고품질 영상을 일관되게 캡처한다.

3) 카메라 제어 기능
전면/후면 카메라 전환, 멀티 카메라 선택, 1.0배에서 3.0배까지의 디지털 줌, 터치 기반 초점 조절 기능을 제공한다.

4) 녹화 보조 기능
3-2-1 카운트다운과 비프음 피드백, 녹화 경과 시간 표시, 잔여 시간 경고, 진행바 표시, 녹화 완료 후 미리보기 등의 사용자 경험 기능을 포함한다.

5) Presigned URL 직접 업로드
서버에서 사전 서명된 URL을 발급받아 클라이언트에서 클라우드 스토리지로 영상 파일을 직접 업로드한다. 서버 부하 없이 대용량 파일 전송이 가능하다.

4-3. 영상 관리 (콘솔)

1) 영상 업로드 및 인코딩
사용자가 업로드한 영상은 자동으로 VOD Station에 전달되어 HLS 형식으로 트랜스코딩된다. 인코딩 완료 시 웹훅을 통해 상태가 자동 갱신되며 썸네일이 자동 생성된다.

2) 영상 메타데이터 관리
제목, 설명, OG 이미지, OG 제목, OG 설명 등의 메타데이터를 편집할 수 있으며, 이 정보는 공유 링크의 미리보기에 반영된다.

3) 공유 링크 생성
영상별로 단축 URL을 생성하여 공유할 수 있다. 유료 사용자는 커스텀 경로를 지정할 수 있으며, 링크에는 3개월의 유효기간이 설정된다.
트랜잭션 처리로 링크 생성의 원자성을 보장한다.

4) 분석 대시보드
영상별 재생 분석 데이터를 시각적으로 제공한다. 24시간, 7일, 31일 기간별 분석을 지원하며, 페이지 조회수, 재생 횟수, 완료율, 평균 시청 시간, 시간대별 분포, 기기별 분포, 일별 추이 등의 메트릭을 차트로 표현한다.

4-4. 사용자 관리

1) 회원 가입 및 로그인
아이디/이메일 기반 회원 체계를 운영하며, 비밀번호는 bcrypt 해싱으로 안전하게 저장한다. JWT 토큰 기반 인증으로 세션을 관리한다.

2) 계정 찾기
이름과 전화번호를 입력하면 SMS 인증번호를 발송하여 본인 확인 후 마스킹 처리된 계정 정보를 안내한다.

3) 녹화자 코드 시스템
각 사용자에게 고유한 녹화자 코드를 자동 발급하여, 녹화기 접속 시 별도 로그인 없이 코드만으로 인증과 업로드 권한을 관리한다.

4-5. 무료 체험

1) 전화번호 기반 체험 세션
회원 가입 없이 전화번호만으로 체험 녹화를 이용할 수 있다.
24시간 1회 제한으로 운영되며, SMS로 녹화 링크를 발송한다.

2) 체험 영상 자동 처리
체험 녹화 완료 후 자동으로 인코딩, 썸네일 생성, 단축 URL 생성, SMS 발송까지 전 과정이 자동 처리된다. 체험 영상은 제한된 재생 횟수와 유효기간이 적용된다.

4-6. 요금제 및 결제

1) 다단계 요금제
무료 체험부터 프로 플랜까지 업로드 수, 링크 수, 녹화 시간에 따라 차등화된 요금제를 제공한다.

2) 온라인 결제
토스페이먼츠 연동으로 신용카드, 계좌이체, 가상계좌 등 다양한 결제 수단을 지원한다. 신용카드는 즉시 활성화되며, 가상계좌는 웹훅을 통해 입금 확인 후 자동 활성화된다.

3) 쿼터 관리
요금제별 업로드 수, 링크 수, 녹화 최대 시간 등의 사용량을 실시간으로 추적하며, 한도 초과 시 자동으로 제한한다.


5. 아키텍처 설계

5-1. 전체 시스템 아키텍처

세 개의 서브 프로젝트가 역할별로 분리되어 독립적으로 운영된다.
영상 플레이어와 영상 녹화기는 경량 SPA로 단일 기능에 집중하며, 위너비디오 콘솔이 중앙 백엔드 역할을 수행한다.

영상 녹화기는 콘솔의 API를 호출하여 인증, 업로드, 인코딩을 처리하고, 영상 플레이어는 콘솔의 추적 API로 재생 이벤트를 전송한다.
클라우드 스토리지와 CDN은 영상 파일의 저장 및 배포를 담당한다.

5-2. 백엔드 구조 (위너비디오 콘솔)

Next.js API Routes 기반의 서버리스 스타일 백엔드를 채택하였다.
각 API 엔드포인트는 독립적인 핸들러 함수로 구현되며, 공통 로직은 라이브러리 모듈로 분리하여 재사용한다.

인증(auth), 데이터베이스(db), 스토리지(storage), 인코딩(vodstation), URL 단축(shortio), SMS 발송(sms), CORS 처리(cors) 등의 관심사별 모듈이 분리되어 있다.

인증이 필요한 API에는 withAuth 고차 함수를 적용하여 JWT 토큰 검증을 일관되게 처리한다.

5-3. 프론트엔드 구조
콘솔의 프론트엔드는 Pages Router 기반으로 파일 시스템 라우팅을 사용한다.
페이지 컴포넌트, 섹션 컴포넌트, UI 기본 컴포넌트의 3계층으로 구성되며, MUI 테마 시스템으로 디자인 일관성을 유지한다.

녹화기는 단일 파일에 로그인, 코드 검증, 녹화의 3단계 흐름을 구현한 SPA 구조이며, React Hooks로 상태를 관리한다.

플레이어는 단일 컴포넌트로 video.js를 래핑하여 HLS 재생과 이벤트 추적을 수행한다.

5-4. 데이터 접근 계층

mysql2/promise의 커넥션 풀을 사용하며, 모든 SQL 쿼리에 매개변수 바인딩(Prepared Statement)을 적용하여 SQL 인젝션을 방지한다.
링크 생성 등 복합 작업에는 트랜잭션을 적용하여 데이터 일관성을 보장한다.

5-5. 미디어 처리 파이프라인
녹화기에서 캡처한 영상은 Presigned URL로 클라우드 스토리지에 직접 업로드되며, 업로드 완료 신호를 받은 백엔드가 VOD Station에 인코딩을 요청한다.
인코딩 완료 시 웹훅 콜백으로 상태를 갱신하고, CDN을 통해 HLS 스트리밍으로 제공된다. 전 과정이 비동기 이벤트 기반으로 처리된다.


6. 인증 및 보안 아키텍처
6-1. 인증 체계
1) JWT 토큰 기반 인증
로그인 시 사용자 정보를 포함한 JWT 토큰을 발급하며, 모든 보호된 API 요청에 Bearer 토큰을 포함하여 인증한다.
토큰에는 사용자 식별자, 계정명, 이메일, 이름, 권한 레벨이 포함된다.

2) 비밀번호 보안
bcrypt 해싱 알고리즘으로 비밀번호를 단방향 암호화하여 저장한다.
솔트 라운드를 충분히 적용하여 무차별 대입 공격에 대한 저항성을 확보한다.

3) 녹화자 코드 인증
녹화기 전용 인증으로, 사용자별 고유 코드를 발급하여 별도의 아이디/비밀번호 입력 없이 접근을 허용한다.

4) SMS 본인 인증
전화번호로 발송된 인증번호를 검증하는 2차 인증을 제공한다.
인증번호에는 유효 시간이 설정되어 만료 후 재발급이 필요하다.

6-2. 접근 제어

1) 역할 기반 권한
일반 사용자와 관리자 역할을 구분하며, 관리자만 요금제 부여 등의 관리 기능을 수행할 수 있다. JWT 토큰의 권한 레벨뿐 아니라 데이터베이스에서 실시간으로 권한을 재검증하여 토큰 조작을 방지한다.

2) CORS 정책
허용된 도메인 목록을 관리하여 크로스 오리진 요청을 제어한다.
영상 플레이어와 녹화기의 도메인만 허용하여 무단 API 접근을 차단한다.

6-3. 보안 헤더

X-Content-Type-Options, X-Frame-Options, X-XSS-Protection, Referrer-Policy, Strict-Transport-Security 등의 보안 헤더를 적용하여 일반적인 웹 공격 벡터를 차단한다.

6-4. Presigned URL 보안
클라우드 스토리지 업로드 시 서버에서 시간 제한이 있는 사전 서명 URL을 발급하여, 스토리지 인증 정보를 클라이언트에 노출하지 않으면서 직접 업로드를 가능하게 한다.


7. 데이터 관리
7-1. 데이터베이스 설계
관계형 데이터베이스로 다음의 핵심 테이블을 운영한다.
1) 사용자 정보 - 계정, 프로필, 녹화자 코드
2) 영상 콘텐츠 - UUID 기반 식별, 상태 관리(업로드중/인코딩중/활성/삭제)
3) 영상 링크 - 단축 URL, OG 메타데이터, 유효기간
4) 재생 로그 - 이벤트 유형, 시청 시간, 디바이스, 시청률
5) 사용자 요금제 - 플랜 유형, 사용량 한도, 유효기간
6) 결제 이력 - 주문번호, 결제수단, 금액, 상태
7) 체험 세션 - 전화번호, 코드, 유효기간, 상태

커넥션 풀링으로 데이터베이스 연결을 효율적으로 관리하며,
UTF-8 MB4 인코딩으로 한글 및 이모지를 완벽히 지원한다.

7-2. 파일 관리

모든 영상 파일은 UUID 기반 경로로 클라우드 오브젝트 스토리지에 저장한다.
업로드 영상, 녹화 영상, 체험 영상, 인코딩 출력, 썸네일을 경로별로 분류하여 관리한다. 영상 삭제 시 스토리지 객체도 함께 삭제한다.

7-3. 캐싱 전략
CDN 엣지 캐싱으로 영상 스트리밍 성능을 최적화하며, 정적 자산에는 장기 캐시 정책을 적용한다.
HTML 파일에는 캐시 무효화 정책을 적용하여 최신 버전을 보장한다.

7-4. 인메모리 상태

SMS 인증번호, 체험 세션 디바운스 등 짧은 수명의 데이터는 서버 메모리에 Map 구조로 저장하여 빠른 접근을 보장한다.
유효기간 만료 시 자동으로 폐기된다.

8. 테스트 전략
현재 자동화된 테스트 프레임워크는 구성되어 있지 않으며, 수동 테스트 기반으로 품질을 관리하고 있다.

브라우저 호환성 검증에 중점을 두고 있으며, 특히 영상 녹화기의 Canvas 렌더링 안정화, 코덱 호환성(H.264/MOV 폴백), 카메라 해상도 처리 등에 대한 반복적인 검증이 이루어졌다.

향후 단위 테스트(컴포넌트, API 핸들러), 통합 테스트(데이터베이스 연동), E2E 테스트(녹화-업로드-인코딩 전체 흐름) 도입이 계획 가능하다.


9. 배포 환경

9-1. 프로세스 관리
PM2를 사용하여 Node.js 프로세스를 관리한다.
자동 재시작, 로그 관리, 프로세스 모니터링 기능을 활용한다.

9-2. 배포 방식

1) 영상 플레이어
SSH 접속 후 소스 코드 풀, 빌드, 프로세스 재시작의 수동 배포 방식이다.

2) 위너비디오 콘솔
Git post-receive 훅을 활용한 자동 배포 파이프라인을 구성하였다.
코드 푸시 시 자동으로 빌드 및 서비스 재시작이 수행된다.

3) 영상 녹화기
Vite 빌드 후 Node.js 서버로 정적 파일과 API 프록시를 제공한다.

9-3. 빌드 도구
영상 플레이어와 녹화기는 Vite를 사용하여 빠른 개발 서버와 최적화된 프로덕션 빌드를 수행한다. 위너비디오 콘솔은 Next.js의 내장 빌드 시스템을 사용한다.

9-4. 환경 분리

환경 변수 파일을 통해 개발과 운영 환경을 분리한다.
데이터베이스 접속 정보, 클라우드 서비스 인증 정보, 결제 키, JWT 비밀키 등 민감한 설정을 환경 변수로 관리한다.


10. 기술적 우수성

10-1. 아키텍처 강점
1) 마이크로서비스 지향 분리
재생, 녹화, 관리 기능을 독립 서비스로 분리하여 각 서비스를 독립적으로 개발, 배포, 확장할 수 있다.

2) 이벤트 기반 비동기 처리
영상 인코딩, 결제 확인 등 장시간 소요 작업을 웹훅 기반 비동기 패턴으로 처리하여 사용자 대기 시간을 최소화한다.

3) Presigned URL 패턴
대용량 영상 파일 업로드 시 서버를 경유하지 않고 클라이언트에서 스토리지로 직접 전송하여 서버 부하와 대역폭 비용을 절감한다.

4) 트랜잭션 기반 데이터 일관성
복합 비즈니스 로직(링크 생성, 결제 처리)에 데이터베이스 트랜잭션을 적용하여 부분 실패 시 데이터 정합성을 보장한다.

10-2. 개발 생산성

1) 통합 기술 스택
프론트엔드와 백엔드 모두 JavaScript/TypeScript 기반으로 통일하여 코드 공유와 개발자 전환 비용을 최소화한다.

2) 풀스택 프레임워크 활용
Next.js의 API Routes로 별도의 백엔드 서버 구축 없이 프론트엔드와 백엔드를 단일 프로젝트에서 관리한다.

3) 경량 의존성 관리
각 서브 프로젝트의 의존성을 최소한으로 유지하여 빌드 시간 단축과 유지보수 부담을 줄인다.

4) TypeScript 정적 타입
녹화기와 콘솔에 TypeScript strict 모드를 적용하여 컴파일 타임에 타입 오류를 검출하고 코드 안정성을 높인다.

10-3. 확장성

1) 클라우드 네이티브 스토리지
S3 호환 오브젝트 스토리지를 사용하여 영상 저장 용량에 제한이 없으며, CDN 연동으로 글로벌 트래픽에도 대응 가능하다.

2) 커넥션 풀링
데이터베이스 커넥션 풀로 동시 접속을 효율적으로 처리하며, 풀 크기 조정으로 부하에 유연하게 대응한다.

3) 모듈화된 서버 라이브러리
인증, 스토리지, 인코딩, SMS 등의 기능이 독립 모듈로 분리되어 기능 추가나 서비스 교체 시 영향 범위를 최소화한다.

10-4. 사용자 경험

1) 제로 설치 녹화
웹 브라우저만으로 고품질 영상 녹화가 가능하여 사용자의 진입 장벽을 최소화한다.

2) 적응형 스트리밍
네트워크 환경에 따라 자동으로 화질을 조절하여 어떤 환경에서도 끊김 없는 재생을 제공한다.

3) 소셜 공유 최적화
단축 URL과 OG 메타태그 동적 주입으로 메신저 및 SNS에서 영상 미리보기가 자연스럽게 표시된다.

4) 무료 체험 흐름
회원 가입 없이 전화번호만으로 녹화를 체험하고, 인코딩부터 링크 생성, SMS 발송까지 전 과정이 자동화되어 서비스 가치를 즉시 경험할 수 있다.

5) MUI 기반 일관된 UI
Material-UI 디자인 시스템을 전체 프론트엔드에 적용하여 시각적 일관성과 접근성을 확보한다.