TimerRoomEnglish
← 타이머 만들기

사용 가이드로 돌아가기

OBS에 타이머 오버레이 올리기 — 폰으로 조종하는 숫자 하나

"방송 시작까지 5분" 화면을 띄워 놓고 정작 시작이 늦어지면 숫자를 고칠 방법이 없습니다. 오버레이를 다시 만들거나 장면을 바꾸는 사이에 채팅은 "언제 시작해요"로 채워집니다. 브라우저 소스 하나를 넣어 두고, 숫자는 폰에서 바꾸는 방법입니다.

오버레이 타이머가 불편한 순간

방송·녹화용 카운트다운은 이미 많습니다. 문제는 대부분 화면 안에서만 살아 있다는 것입니다.

TimerRoom의 OBS 화면은 배경 없이 숫자만 있는 웹페이지입니다. 브라우저 소스에 주소 하나를 넣으면 영상 위에 얹히고, 시작·멈춤·연장·전환은 진행자 화면(폰이든 노트북이든)에서 합니다. 같은 방의 참가자 링크를 게스트와 스태프에게 주면 그 사람들도 같은 숫자를 봅니다.

준비 5분

  1. 방을 만듭니다. 첫 화면에서 종류·길이·이름을 정하고 만듭니다. 이름이 곧 라벨입니다. 예: "방송 시작까지", "쉬는 시간", "Q&A".
  2. 진행자 링크를 저장합니다. 이 링크로만 조종할 수 있습니다. 폰에 저장해 두면 OBS 컴퓨터에서 떨어져 있어도 됩니다.
  3. OBS 링크를 복사합니다. 진행자 화면의 참가자 초대 구역에서 OBS 안내를 펼치면 "OBS 링크 복사"가 있습니다. 주소는 https://…/obs/참가코드 꼴입니다. 이 링크는 보기 전용이라 방송 화면에 노출돼도 조종당하지 않습니다.
  4. OBS 에 브라우저 소스를 추가합니다. 아래 순서대로.
  5. 폰에서 시작을 누르고 송출 화면의 숫자가 움직이는지 봅니다.

OBS 브라우저 소스 설정

  1. 장면에서 소스 추가(+) → 브라우저를 고르고 이름을 붙입니다(예: 타이머).
  2. URL 에 복사한 OBS 링크를 붙입니다.
  3. 너비·높이를 오버레이가 차지할 크기로 정합니다. 숫자는 소스의 폭에 맞춰 저절로 커집니다. 하단 자막 자리라면 800×200 정도, 화면 가운데 큰 카운트다운이면 1200×400 정도에서 시작해 조정합니다.
  4. 사용자 지정 CSS 칸은 비워 둡니다. 배경은 이미 투명합니다.
  5. "보이지 않을 때 소스 종료"는 켜도 되고 꺼도 됩니다. 켜면 장면이 바뀔 때 다시 연결하느라 잠깐 --:-- 가 보일 수 있고, 끄면 장면 뒤에서도 계속 연결돼 있습니다. 확실한 쪽은 끄는 것입니다.
  6. 소스를 원하는 자리로 옮깁니다. 크기는 OBS 의 변형(Transform)으로 늘려도 되지만, 글자가 흐려지지 않게 소스 자체 크기를 키우는 편이 낫습니다.

Streamlabs, vMix, 그 밖에 브라우저 소스(웹 소스)를 받는 프로그램이면 같은 방식으로 됩니다.

주소 뒤에 붙여서 바꾸는 것

기본은 흰 숫자에 검은 테두리입니다. 밝은 장면과 어두운 장면 양쪽에서 읽히게 고른 값입니다. 바꾸려면 주소 뒤에 ? 로 시작해 & 로 이어 붙입니다.

값기본뜻
color=ffd166fff숫자 색. # 없이 hex
end=ff5a4aff5a4a0 이 됐을 때의 색
outline=0000테두리 색. 0 이면 테두리 없음
size=120폭에 맞춤숫자 크기(px). 8부터 2000까지
align=left 또는 right가운데소스 안에서의 정렬
label=1없음숫자 위에 라벨(시작 전 · 종료까지 · 종료) 표시
lang=ko 또는 en브라우저 언어라벨 언어

예: https://…/obs/8KF2M7QX?color=ffd166&size=120&align=right&label=1

색이 영상과 겹칠 때. 빨간 무대 조명이나 스포츠 중계 위에서는 기본 종료 색이 묻힙니다. end=ffd166 처럼 배경과 다른 색을 고릅니다. 어떤 기본값도 그 색의 배경 위에서는 죽기 때문에, 장면을 정한 뒤 한 번 확인하는 것이 가장 빠릅니다. 테두리가 글자 모양을 지켜 주므로 색이 비슷해도 숫자는 남습니다.

테두리를 끄고 싶을 때. 어두운 단색 배경이면 outline=0 이 더 깔끔합니다. 밝은 장면으로 넘어갈 계획이 있으면 켜 둡니다.

글꼴을 바꾸고 싶을 때. 오버레이는 Barlow 숫자체를 씁니다. 꼭 바꿔야 하면 OBS 의 사용자 지정 CSS 에 .num{font-family:"원하는 글꼴"} 을 넣을 수 있습니다. 다만 숫자 폭이 달라져 자리 맞춤을 다시 해야 하고, 다음 갱신에서 클래스 이름이 바뀔 수 있습니다.

방송 중에 생기는 일

시작이 밀릴 때. 폰의 진행자 화면에서 +1분. 길게 누르면 5분씩. 송출 화면과 게스트의 폰이 같이 늘어납니다. 소스를 건드릴 일이 없습니다.

0 이 지났을 때. 숫자는 멈추지 않고 +00:15 처럼 지난 시간을 계속 보여 줍니다. 색만 종료 색으로 바뀌고 깜빡이지 않습니다. 잠깐 끊긴 뒤 들어온 시청자도 "방금 끝났구나"를 알 수 있습니다. 소리는 OBS 화면에서 나지 않습니다. 소리가 필요하면 휴대폰에서 참가자 링크를 열고 그 화면의 종료음을 켜세요. 진행자 조작 화면에는 종료음 켜기 버튼이 없습니다.

세션이 여러 개일 때. 방 하나에 타이머를 여러 개 만들어 두고(20개까지) 진행자 화면의 목록에서 줄을 누르면 오버레이가 그 타이머로 넘어갑니다. 소스는 하나면 됩니다. 넘겨도 앞 타이머는 뒤에서 계속 돕니다.

정해진 시각에 시작할 때. 타이머 종류를 "특정 시각까지"로 만들면 그 시각까지 남은 시간을 셉니다. 방송 시작 예고에 맞습니다.

방송 시간을 재고 싶을 때. 스톱워치로 만들면 경과 시간을 보여 줍니다. label=1 이면 "경과"가 붙습니다.

메시지는 안 뜹니다. 진행자 메시지는 참가자 화면에만 나옵니다. OBS 화면은 숫자만 있어서 방송에 안내문이 섞이지 않습니다.

흔한 문제

--:-- 만 보입니다. 아직 연결 전이거나 방이 없는 주소입니다. 주소의 참가 코드 8자리를 확인합니다. 방은 진행자가 마지막으로 조작한 뒤 24시간(또는 가장 먼 종료 시각 + 2시간)이 지나면 사라지므로, 어제 만든 소스는 오늘 비어 있을 수 있습니다. 방송 당일에 방을 만들고 링크를 다시 넣습니다.

숫자가 흐려졌습니다. 연결이 끊긴 상태입니다. 배경을 모르니 색 대신 투명도를 낮춰서 알립니다. 숫자는 그 컴퓨터의 시계로 계속 가고, 다시 붙으면 저절로 맞춰집니다. 진행자의 최근 조작만 늦게 도착합니다.

숫자가 잘립니다. 소스 폭보다 숫자가 큽니다. size= 를 지정했다면 값을 줄이고, 아니면 소스 폭을 키웁니다. 1시간이 넘는 타이머는 1:02:30 처럼 한 자리가 늘어나므로 그 길이로 맞춰 둡니다.

게스트도 봐야 합니다. 참가자 링크(/t/참가코드)나 QR 을 줍니다. 게스트 폰에서 같은 숫자가 보이고, 화면을 두 번 탭하면 전체화면입니다. 진행자 링크는 주지 않습니다.

여러 명이 조종하고 싶습니다. 진행자 링크를 나눠 가지면 되지만 권하지 않습니다. 둘이 동시에 멈추고 늘리면 송출 화면이 튑니다. 조종은 한 사람, 나머지는 참가자 링크로 봅니다.

이 오버레이가 하지 않는 것

진행 막대, 애니메이션, 글꼴 선택, 로고 자리는 없습니다. 숫자와 색·크기·정렬·라벨뿐입니다. 방송 그래픽을 세밀하게 맞춰야 한다면 전용 프로그램이 맞고, 이 오버레이는 "폰에서 바꿀 수 있는 숫자 하나"가 필요할 때 씁니다.

체크리스트

← 다른 가이드 보기