오버레이 디자인의 첫 번째 원칙은 "정보의 위계"입니다. 모든 위젯이 동시에 눈에 띌 수는 없으니, 가장 중요한 정보는 항상 보이게 하고, 보조 정보는 필요할 때만 등장하게 설계해야 합니다.
오버레이를 TikTok LIVE Studio에 연결하기
TikTok LIVE Studio(PC용 공식 방송 도구)는 외부 링크 소스를 화면에 합성할 수 있도록 지원합니다. 이를 활용하면 Tikke가 만든 오버레이를 라이브 화면 위에 자유롭게 띄울 수 있습니다.
연결 절차
- Tikke의 오버레이 메뉴에서 원하는 위젯을 추가합니다 (예: 채팅 위젯).
- 위젯이 만들어지면 임시 URL이 생성됩니다. 복사 버튼으로 클립보드에 복사합니다.
- TikTok LIVE Studio에서 "소스 추가" → "링크/URL" → 복사한 URL을 붙여넣기.
- 크기와 위치를 조절합니다. 일반적으로 1280×720 또는 1920×1080 캔버스에 맞춰 디자인됩니다.
URL 보안 주의. 오버레이 URL은 무작위 토큰으로 보호되지만, 외부에 공유되면 누구나 같은 화면을 볼 수 있게 됩니다. 라이브 화면을 캡처해서 게시할 때 URL이 보이지 않도록 주의하고, 보안이 의심되면 Tikke에서 URL을 재발급할 수 있습니다.
주요 위젯 4가지
채팅 위젯
최근 채팅 5~10개를 라이브 화면에 표시합니다. 폰 화면에서 채팅이 가려질 때 보완 용도로 좋고, 호스트가 라이브 화면 자체를 더 풍성하게 보이고 싶을 때 유용합니다. 단, 너무 크게 두면 본 콘텐츠를 가리므로 화면의 5~10% 영역을 권장합니다.
알림 패널
새 팔로우·큰 선물·구독 같은 이벤트가 발생할 때 잠깐 등장하는 모달입니다. 평소에는 숨겨져 있다가 트리거 시에만 등장해 시청자의 시선을 끕니다. 길이는 3~5초가 적당하며, 너무 길면 본 콘텐츠가 가려집니다.
목표바 (Goal Bar)
오늘의 팔로워 목표, 선물 코인 목표를 진행률 바로 표시합니다. 시청자에게 "함께 만드는 라이브"라는 인식을 주는 데 효과적이며, 평균 시청 시간을 늘리는 데 도움이 됩니다.
채팅 통계 위젯
실시간 시청자 수, 신규 팔로우, 받은 선물 합계를 작게 표시합니다. 호스트 자신이 통계를 확인하면서 시청자에게도 같은 정보를 공유하는 용도로 유용합니다.
위치 설계 원칙 — 안전 영역을 지키세요
TikTok LIVE는 본질적으로 세로 화면(9:16)이고, 시청자의 폰에서 보이는 영역은 PC에서 디자인할 때 보는 것과 다릅니다. 다음 영역들은 시스템 UI가 가려질 수 있으니 위젯을 두면 안 됩니다.
- 상단 12% 영역: 시청자·하트 UI가 표시됩니다.
- 하단 22% 영역: 댓글 입력창, 선물 버튼, 공유 버튼이 가립니다.
- 좌측 6% 영역: 호스트 프로필과 인기 시청자 아이콘.
- 우측 8% 영역: 코인·필터 아이콘 등.
안전한 영역은 화면 중앙의 60% × 50%입니다. 모든 위젯은 이 영역 안에 배치하는 것이 안전합니다.
색상과 대비 — 어떤 배경에서도 읽혀야 합니다
오버레이의 가장 흔한 실수는 "내 라이브 배경"만 보고 디자인하는 것입니다. 콘텐츠가 바뀌면 배경 색도 바뀌고, 어떤 배경에서는 위젯이 안 보일 수 있습니다. 다음 원칙을 따르세요.
- 반투명 다크 배경 + 밝은 텍스트: 가장 안정적입니다. 60~80% 불투명도의 검정 박스 위에 흰색·노랑 텍스트.
- 외곽선 또는 그림자: 텍스트에 1~2px 외곽선이나 부드러운 그림자를 넣으면 밝은 배경에서도 가독성을 유지합니다.
- 채도 낮추기: 위젯에 너무 채도 높은 색(형광 핑크·노랑)을 쓰면 본 콘텐츠를 가리는 듯한 느낌을 줍니다. 채도 60% 이하 권장.
애니메이션 — 적을수록 좋습니다
오버레이에 애니메이션을 많이 넣으면 화면이 어수선해지고, 시청자가 본 콘텐츠에 집중하기 어려워집니다. 다음 가이드라인을 따르세요.
- 채팅 위젯: 새 메시지가 들어올 때 0.2~0.3초 슬라이드 인. 그 외엔 정적.
- 알림 패널: 등장과 사라짐만 애니메이션. 화면에 머무는 동안엔 정적.
- 목표바: 진행률이 변할 때만 부드럽게 전환. 깜빡임·반복 애니메이션은 피할 것.
일반적으로 한 화면에 3개 이상의 위젯이 동시에 움직이면 시청자가 본 콘텐츠에서 시선을 뗍니다.
실전 조합 4가지
조합 A — 토크/잡담 방송
- 화면 좌상단: 채팅 위젯 (작게, 폭 30%)
- 화면 중앙 상단: 큰 선물 알림 패널 (필요 시에만 등장)
- 화면 우상단: 신규 팔로우 알림 (작게, 3초)
대화에 방해되지 않으면서 인터랙션을 명확히 짚어주는 조합. 채팅이 메인 콘텐츠이므로 채팅 위젯이 가장 큰 자리를 차지합니다.
조합 B — 게임/콘텐츠 중심 방송
- 화면 우상단: 알림 패널 (큰 선물·팔로우 통합)
- 화면 하단 중앙: 목표바 (얇게)
- 채팅 위젯은 사용하지 않음 — 콘텐츠가 메인
본 콘텐츠를 최대한 가리지 않으면서 핵심 인터랙션만 전달하는 조합.
조합 C — 노래/공연 방송
- 화면 하단: 받은 선물 합계 위젯 (큰 글씨, 시청자에게 명확히 보이도록)
- 화면 우상단: 신규 팔로우 알림
- 채팅 위젯은 호스트 컨트롤 룸에만
공연 분위기를 해치지 않으면서 시청자의 후원이 화면에 즉시 반영되어 인터랙션 동기를 부여하는 조합.
조합 D — 글로벌 라이브
- 화면 좌상단: 채팅 위젯 (번역 포함 — 외국어 시청자도 흐름을 볼 수 있음)
- 화면 중앙: 큰 선물 알림 (시청자 닉네임 표시)
- 화면 우하단: 현재 시청자 국가 분포 (선택)
해외 시청자에게 "여기는 글로벌 라이브"라는 신호를 명확히 주는 조합.
모바일 미리보기로 확인하세요
PC에서 본 오버레이와 실제 시청자가 폰에서 보는 오버레이는 크게 다릅니다. 매번 본방 시작 전, 자신의 다른 폰이나 가족·친구 폰으로 라이브를 잠깐 켜서 위젯이 본 콘텐츠를 가리지 않는지, 글씨가 읽히는지 직접 확인하세요. 이 5분의 점검이 한 시간의 본방 품질을 결정합니다.
핵심 요약
- 오버레이는 "정보의 위계"가 핵심 — 중요한 것 하나만 항상 보이게.
- 안전 영역(중앙 60% × 50%)을 벗어나면 시스템 UI에 가려질 수 있다.
- 반투명 다크 + 밝은 텍스트가 가장 안정적인 색 조합.
- 한 화면에 동시에 움직이는 위젯은 2개 이하.
- 매 방송 전 실제 모바일로 5분 점검.