본문 바로가기
← 프로젝트

서비스운영 중2026.05.26 ~

SOOP 라이브를 최대 4개까지 한 화면에 띄워 같이 보는 멀티뷰입니다.

소개

아프리카TV 시절부터 SOOP 을 써 온 시청자로서 Open API 를 살펴보다가 만들었습니다.
방송은 공식 임베드 플레이어와 Open API 로 불러오고, SOOP 계정으로 쓰는 시청자 커뮤니티도 붙였습니다.

기능

  • 최대 4개 동시 시청라이브 방송을 한 화면에 띄우고, 경계선을 끌어 크기를 바꿉니다.
  • 화면 배치 전환메인 한 칸을 크게 두는 배치 등으로 바꾸고, L · M 단축키로도 조작합니다.
  • 링크로 구성 공유보는 방송 · 채팅 표시 · 배치가 담긴 주소를 복사하면 같은 화면이 그대로 열립니다.
  • 라이브 둘러보기카테고리 · 인기순 · 최신순으로 방송을 훑고, 누르면 바로 멀티뷰에 담깁니다.
  • 모바일 세로 보기좁은 화면에서는 방송이 16:9 로 세로로 쌓이고, PC 에서 만든 공유 링크도 복원됩니다.
  • SOOP 로그인 커뮤니티SOOP 계정으로 글 · 댓글을 쓰고, 내 글에 댓글이 달리면 알림을 받습니다.

사용자 문의로 고친 것

  • “채팅을 켰는데 채팅창이 안 보여요”SOOP 채팅창을 X 로 닫은 상태가 iframe 밖으로 전해지지 않아 버튼과 어긋나는 것을 찾고, 한 번 더 누르면 다시 열린다는 안내를 붙였습니다.
    문의 30분 만에 원인과 다시 여는 방법을 답하고, 44분 만에 안내를 배포했습니다.
  • “모바일에서도 채팅할 수 있나요?”SOOP 이 화면 폭이 아니라 UA 로 채팅 없는 플레이어를 준다는 것을 기기별로 확인하고, 모바일에는 SOOP 방송 페이지로 가는 채팅 버튼을 달았습니다.
    문의 11분 만에 고쳐 배포하고, 새 단추 쓰는 법을 답했습니다.

실제 채널톡 대화, 상대 메일과 방송 화면을 주고받은 부분은 잘라 냈습니다

크게 보기
“채팅을 켰는데 채팅창이 안 보여요”
크게 보기
“모바일에서도 채팅할 수 있나요?”

기술

  • Next.js
  • Tailwind CSS
  • TanStack Query
  • iron-session
  • Supabase