Problem
어떤 문제를 풀었나
기존 시청자 참여 방식은 스트리머가 게임방 코드를 방송 화면에 노출하고, 시청자가 무작위로 입장하는 비구조적 형태로 운영됨. 이로 인해 참여자 식별 불가, 입장 순서 관리 부재, 중복/악성 참여자 필터링 불가, 실시...
Project Detail
CHIT
스트리머와 시청자를 매끄럽게 연결하는 실시간 참여 플랫폼
치지직 스트리머들이 시청자 참여 방송을 진행할 때, 시청자 인원을 실시간으로 수용하고 방송 컨텐츠에 맞게 유연하게 조절하여 효율적으로 관리할 수 있도록 돕는 스트리밍 서드파티 서비스입니다.
기간
2025.01 ~ 2025.05
팀 구성
3명 (PM 1 / BE 1 / FE 1)
기술 스택
8개 기술 사용
Contribution
내 핵심 기여
API 서버 개발 및 배포 · UI 디자인 설계
Outcome
무엇을 증명했나
치지직(네이버) 계정을 활용한 OAuth SSO 방식 채택. 별도 회원가입 없이 로그인 토큰만으로 즉시 인증 및 세션 생성하여 사용자 접근성 극대화
한눈에 보기
치지직 스트리머들이 시청자 참여 방송을 진행할 때, 시청자 인원을 실시간으로 수용하고 방송 컨텐츠에 맞게 유연하게 조절하여 효율적으로 관리할 수 있도록 돕는 스트리밍 서드파티 서비스입니다.
Target User
누구를 위한 프로젝트인가
치지직 기반 소규모~중형 스트리머
Core Experience
사용자에게 주는 핵심 경험
스트리머와 시청자를 매끄럽게 연결하는 실시간 참여 플랫폼
Why It Matters
왜 의미 있는가
스트리머가 직접 세션을 생성하고 참여자를 초대/제어하는 구조로, 기존 코드 공유 방식의 수동성 제거
스트리머가 직접 세션을 생성하고 참여자를 초대/제어하는 구조로, 기존 코드 공유 방식의 수동성 제거실시간으로 참여자 상태 확인 및 입장/대기/퇴장/강퇴 등의 세밀한 제어 가능별도의 앱이나 복잡한 가입 없이, 방송 중 링크 공유만으로 참여 가능한 낮은 진입장벽
Background
Purpose | 목적
치지직 플랫폼 내 시청자 참여형 콘텐츠(게임 시참, 합방 등)의 운영 효율성을 극대화하기 위한 실시간 참여자 관리 솔루션 구축. 스트리머가 방송 흐름을 유지하면서도 참여자 대기열, 입장/퇴장, 상태 변경을 직관적으로 제어할 수 있는 서드파티 서비스 제공
Problem | 해결하려던 문제
기존 시청자 참여 방식은 스트리머가 게임방 코드를 방송 화면에 노출하고, 시청자가 무작위로 입장하는 비구조적 형태로 운영됨. 이로 인해 참여자 식별 불가, 입장 순서 관리 부재, 중복/악성 참여자 필터링 불가, 실시간 상태 파악 어려움 등의 문제가 발생하여 방송 운영 효율성과 시청자 경험 모두 저하되는 Pain Point 존재
Target User | 타겟 사용자
치지직 기반 소규모~중형 스트리머
Key Features | 핵심 기능
What makes this project special
1
스트리머가 직접 세션을 생성하고 참여자를 초대/제어하는 구조로, 기존 코드 공유 방식의 수동성 제거
2
실시간으로 참여자 상태 확인 및 입장/대기/퇴장/강퇴 등의 세밀한 제어 가능
3
별도의 앱이나 복잡한 가입 없이, 방송 중 링크 공유만으로 참여 가능한 낮은 진입장벽
4
SSE 기반으로 구현된 가벼운 단방향 실시간 이벤트 처리 구조로 WebSocket의 복잡성 제거
5
방송 운영 흐름을 방해하지 않으면서 참여형 콘텐츠를 매끄럽게 진행할 수 있는 UX 설계
치지직 OAuth 로그인
CHIT은 치지직 공식 OAuth 기반의 SSO 로그인 방식을 사용합니다. 치지직은 네이버 계정 기반이기 때문에, 사용자는 별도의 회원가입 절차 없이 네이버에 로그인된 상태에서 치지직 인증 토큰을 발급받고, 해당 토큰으로 유저 정보를 조회하여 자동 로그인됩니다.
- 회원가입 없음: 치지직 사용자만을 대상으로 하므로 별도 회원가입 기능은 제공하지 않음
- 인증 흐름: 로그인 버튼 클릭 → 치지직 OAuth 인증 → 사용자 정보 응답 → 시스템 내 사용자 세션 구성
- 즉시 사용 가능: 인증 후 유저 정보가 즉시 로드되어 로그인 직후 서비스 이용 가능
라이브 여부 기반 세션 생성
CHIT은 실제 스트리밍 방송 중인 경우에만 시청자 참여 세션을 생성할 수 있도록 설계되어 있습니다.
- 치지직 공식 API를 통해 스트리머의 현재 라이브 방송 상태를 실시간으로 확인
- 로그인한 사용자가 라이브 방송 중일 경우에만 '세션 생성' 버튼이 활성화되며, 방송 중이 아닌 경우에는 해당 기능을 사용할 수 없습니다
- 또한 CHIT은 게임 시청자 참여 콘텐츠 특화 서비스이므로, 라이브 중이라 하더라도 방송 카테고리가 게임이 아닐 경우 세션 생성이 제한됩니다
이러한 조건 기반 제한 로직은 스트리밍 상황과 콘텐츠 목적에 맞는 서비스 사용을 유도하고, 시청자 경험의 일관성과 정확성을 보장하기 위한 목적에서 구현되었습니다.
세션 생성 방법
스트리머는 로그인 후 방송 중일 경우에만 시참 세션 생성 화면으로 진입할 수 있으며, 해당 화면에서는 다음과 같은 세부 입력 및 제어 기능을 제공합니다.
- 세션 생성 시, 현재 방송 카테고리를 조회하여 게임 카테고리 여부를 판단
- 이 정보는 최초 로그인 시 캐싱된 데이터를 우선 활용하며, 실시간으로 API 재호출하여 최신 방송 정보를 갱신 가능
- 시참 참여를 위한 참여 코드를 수동으로 입력할 수 있음 (최대 20자까지 입력 가능하며, 한글, 영어, 특수문자 모두 허용됨)
- 한 세션에 참여할 최소 1명 ~ 최대 10명까지 인원 수를 설정 가능
- 보안성을 고려해 기본적으로 패스워드 형식(···**)으로 표시되며, 우측 눈 아이콘 클릭 시 일시적으로 텍스트 노출
- 세션 생성 후 [시참 목록 완성] 버튼을 클릭하면 시참 대기 목록 화면으로 자동 이동되어 참여자 관리 및 상태 제어를 시작할 수 있음
실시간 세션 현황 확인
CHIT은 세션 생성 이후, 스트리머가 실시간으로 참여자 목록을 관리하고 파티 구성을 시각적으로 확인할 수 있는 다양한 기능을 제공합니다.
- 시참 링크 복사 버튼: 세션 별로 고유 링크를 생성하며, 시참 세션 생성 시마다 링크가 새로 발급됨 (재사용 불가)
- 자동 파티 묶음 기능: '스트리머_시참_설정'에서 지정한 파티 단위 인원 수에 따라 자동으로 파티 구성 (예: 파티 단위 3명일 경우 → 1-2-3, 4-5-6 식으로 자동 구성)
- 불완전 파티 처리 및 리그룹 로직: 인원이 파티 단위로 나누어 떨어지지 않을 경우, 마지막 파티는 부족한 인원으로 표기. 이후 새 파티 호출 시 남은 인원과 새 인원을 묶어 자동 리그룹 (예: 인원 5명, 파티 3명 → 1-2-3, 4-5 → 다음 호출 → 4-5-1, 2-3)
- 다음 파티 호출 버튼: 클릭 시 파티 단위 인원 수만큼 목록 회전하여 '현재 인원' 탭 최신화
시청자 세션 참가 및 대기 상태
CHIT의 시청자용 화면은 세션 참여 흐름에 따라 동적으로 UI가 변화하며, 스트리머 상태 및 본인의 참여 순서에 맞춰 다양한 인터랙션을 제공합니다.
- 스트리머 라이브 상태 표시: 방송 중이면 [LIVE] 라벨과 빨간 스트로크, 방송 종료 시 [OFF] 상태 라벨 및 회색 스트로크로 시각적 구분
- 참여 코드 노출 및 복사: 현재 세션 참여 코드를 노출하며, 복사 아이콘 클릭 시 클립보드에 복사 (코드가 없는 경우 비활성화)
- 시청자 순서 안내: '내 순서는 X번' 형식으로 대기 순서 표시, 본인 차례일 경우 '지금 참여'로 변경
- 시참 종료 버튼: '이제 시참 그만할래요' 클릭 시 스트리머의 시참 목록에서 제거
- 시참 목록 제외 안내: 스트리머가 유저를 수동 제외한 경우 '시참 목록에서 제외됐어요 😢' 메시지 표시
- 시참 재등록 기능: '시참 목록에 다시 등록할래요' 버튼으로 첫 번째 화면으로 이동 후 재등록 처리
Technical Specifications | 기술 사양
Engineering details and infrastructure
System Architecture | 시스템 아키텍처
시스템 아키텍처
Engineering Highlights | 기술 하이라이트
Seamless SSO Login via Chzzk/Naver
치지직(네이버) 계정을 활용한 OAuth SSO 방식 채택. 별도 회원가입 없이 로그인 토큰만으로 즉시 인증 및 세션 생성하여 사용자 접근성 극대화
실시간 데이터 처리 전략
단방향 실시간: 동시성 및 실시간성을 고려하여 Socket 대신 SSE(Server-Sent Events) 활용. 비실시간 처리: 데이터 처리나 기타 기능은 API를 통해 제공
최신 기술 활용 및 자원 최적화
Virtual Thread(가상 스레드) 적용으로 자원 활용 극대화. Redis 사용 불가 상황에서 JVM 기반의 Ehcache 도입
배포 환경 및 최적화
OCI Free Tier (1 Core, 1GB) 환경에서 제한된 자원으로 최대 성능 구현. Redis 대신 EhCache와 Hibernate 2차 캐시 활용
보안 강화
Cloudflare를 통해 API 서버 보호. Nginx를 이용한 HTTPS 기반 리버스 프록시로 웹 애플리케이션 보안 강화
Technology Stack | 기술 스택
SpringSSE
Virtual Thread
EhCache
Hibernate
Cloudflare
NginxHTTPS
Challenges & Solutions | 도전 과제
Technical challenges encountered during the project and solutions
1
추가 인프라 없이 정렬 성능 극대화하기
Problem
참가자가 증가하고 데이터베이스에 저장되는 데이터의 양이 많아질수록, 인덱싱을 적용하더라도 ORDER BY 연산의 비용이 점차 증가하여 성능 저하가 발생할 가능성이 높았습니다. 특히, 사용량이 많은 시간대에는 쿼리의 실행 속도가 느려지면서 실시간성을 보장하기 어려울 것으로 우려되었습니다.
Solution
ConcurrentHashMap(세션별 참가자 목록 정보)과 ConcurrentSkipListSet(참가자 목록을 정렬된 상태로 유지)을 활용하여 JVM 메모리 공간 내에서 정렬된 참가자 순서를 유지합니다.
Analysis
Redis SortedSet을 대안으로 고려했으나, 제한된 자원(1코어, 1GB RAM) 환경에서 단순히 SortedSet 기능 하나만을 위해 Redis를 사용하는 것은 비효율적이라 판단되었습니다.
Benefits
✓ 추가/삭제 작업의 O(log n) 시간 복잡도✓ 동시 환경에서의 스레드 안전성✓ 네트워크 I/O 없이 JVM 내부에서 동작✓ 대기열 크기와 관계없이 일관된 성능✓ 추가 인프라 의존성이 없는 간소화된 배포
2
가상 스레드 기반 SSE 실시간 알림 시스템
Problem
다수의 사용자에게 실시간 순번 정보를 제공하면서도 성능과 동시성을 유지해야 했습니다. 초기에는 코루틴을 고려했지만, 기존 동기 코드와 아키텍처의 변경을 최소화할 필요가 있었습니다.
Solution
가상 스레드 기반 ExecutorService를 Spring Bean으로 등록하고, SseEmitter를 활용한 세션별 클라이언트 연결 관리를 구현했습니다.
Analysis
양방향 통신(WebSocket)이 고려되었으나, 요구사항을 분석한 결과 단방향 통신만으로 충분하여 SSE(Server-Sent Events)를 대안으로 채택했습니다.
Benefits
✓ 경량 가상 스레드를 활용한 비동기 처리로 낮은 메모리 소비✓ SSE 활용으로 불필요한 네트워크 트래픽 방지✓ ConcurrentHashMap으로 동시성 문제 해결✓ Redis나 DB 없이 JVM 내에서 모든 연산 처리
Retrospective | 프로젝트 회고
단순해 보이는 기능 속에 숨겨진 기술적 복잡성을 발견하고 해결해나가는 과정이었습니다. 실시간 데이터 처리, 동시성 관리, 사용자 경험 설계 등 여러 측면에서 많은 것을 배울 수 있었습니다.
Successes | 잘한 점
가상 스레드 기반 SSE 알림 시스템
수백 명의 사용자를 대상으로 한 실시간 데이터 전송을 안정적으로 처리. 시스템 부하가 증가해도 높은 안정성 유지
효율적인 자료구조 활용
ConcurrentHashMap과 ConcurrentSkipListSet을 활용하여 동시성 처리와 정렬 성능을 극대화. 실시간 순서 변경과 상태 업데이트가 매우 빠르게 처리
스트리밍 특화 UX
실시간 대기열 회전, 고정픽 처리 등 스트리밍 환경에 특화된 사용자 경험 구현
팀 협업의 성과
자율 프로젝트임에도 팀원 간 지속적인 피드백과 효율적인 역할 분담으로 높은 완성도 확보
Improvements | 아쉬운 점
비동기 처리 방식 재검토
SpringMVC와 코루틴의 궁합 문제로 인해 비동기 처리 방식에 대한 전면적인 재검토가 필요. 결과적으로 더 안정적인 시스템 구축
UX와 로직 단순화 균형
UI와 실시간 동기화 사이에서 로직의 단순함과 풍부한 사용자 경험 간의 균형을 찾는 데 많은 시간 소요
Future Directions | 향후 방향
1
Redis SortedSet을 활용한 분산 처리 구조로 확장
2
시청자 UX 개선 및 반응성 높은 인터페이스 구현
3
스트리머별 개인화 세션 설정 기능 추가
4
실시간 모니터링 및 시청자 반응 분석 통계 대시보드 추가