Twitch 채널은 거의 모든 플랫폼보다 많은 곳에 마크를 보여주고, 그중 대부분은 아주 작습니다. 채팅 메시지 옆 라이브 배지. 백 개 다른 썸네일과 경쟁하는 디렉토리 그리드의 아바타. 아무도 방송 안 할 때 화면에 있는 오프라인 배너. 몇 초마다 색이 바뀌는 게임 영상 위에 놓이는 방송 중 오버레이 코너. 그리고 마크가 실제로 움직일 충분한 공간이 있는 스트림 시작 화면.
일찍 체화할 가치가 있는 제약은 이것입니다. Twitch에서 애니메이션은 예외이고 작은 정지 이미지가 규칙입니다. 즉 Twitch 로고 애니메이션은 이미 다른 곳에서 통하는 정지 프레임을 중심으로 설계돼야 합니다. 정적을 제대로 하면 애니메이션은 짧고 가치 높은 추가가 됩니다. 건너뛰면 애니메이션은 아무도 못 읽는 마크 위 장식일 뿐입니다.
Where the Mark Actually Appears
얼마나 공간을 주는지로 표면을 나누는 게 도움이 됩니다. 디자인 결정이 바로 그걸 따르니까요.
디렉토리 썸네일과 오프라인 배너는 가장 큰 정적 배치이고, 첫 번째는 라이브일 때만 보입니다. 디렉토리는 발견이 일어나는 곳이라 마크는 카테고리의 모든 다른 채널과 경쟁합니다.
아바타는 채팅, 팔로워 목록, 레이드 알림 옆에 나타납니다. 작고 반복적이며, 단골 시청자가 보는 유일한 버전인 경우가 많습니다.
오버레이 코너는 고정 크기가 없는 유일한 배치입니다. 자신의 씬 설정에 달렸으니까요. 가장 적대적인 곳이기도 합니다. 계속 색이 바뀌는 게임 영상 위에 놓이기 때문입니다. 오버레이 마크는 임의로 바뀌는 배경 against 버텨야 합니다.
알림, 트랜지션, 스트림 시작 화면이 모션이 사는 곳입니다. 이 표면들은 지속적 정체성이 아니라 브랜드 순간을 위해 만들어진 곳이고, 애니메이션 마크가 자리를 얻는 곳입니다.
The Offline Banner Is the Most Ignored Surface
채널이 라이브가 아니어도 페이지는 존재하고, 방문자가 보는 건 오프라인 배너와 아바타, 그리고 아래 패널들입니다. 일주일에 며칠 저녁 방송하는 채널이라면 수명의 대부분이 그겁니다. 첫 방문자의 상당수, 그리고 잘못된 시간에 검색이나 공유 링크로 도착하는 거의 모두는 오프라인 상태를 먼저 만납니다.
두 규칙이 이 표면을 살립니다. 첫째, 아무것도 움직이지 않으므로 구성이 모션 없이 완성된 것으로 읽혀야 합니다. 둘째, 디렉토리 크기에서 통해야 합니다. 같은 에셋이 브라우즈 그리드의 썸네일로 재사용되기 때문입니다.
여기 실질적 실패는 전폭 페이지 뷰용으로 만든 배너를 썸네일로 재사용하는 겁니다. 넓은 직사각형을 채운 구도는 작은 카드로 짜부랐을 때 가장 독특한 요소를 잃고, 마크와 워드마크가 보이는 몇 픽셀을 놓고 경쟁하게 됩니다. 작은 버전을 먼저 만드세요. 그건 모든 <a href="/logo-animation-templates/logo-video-maker">로고 비디오 메이커</a> 내보내기에 적용되는 같은 원칙이고, Twitch 배치가 워낙 작아 here에 더 강하게 적용됩니다.
Making an Animation That Survives Being Watched Muted
스트림 시작 화면과 트랜지션 씬은 예상보다 자주 앰비언트 음악을 자동 재생하고, 채널 페이지에 도착한 시청자는 음소거 상태인 경우가 잦습니다. Twitch 자체가 라이브 영상을 음소거로 자동 재생하고, 브라우저의 자동 재생 미디어 동작은 MDN의 자동 재생 문서에 잘 정리돼 있습니다. 요점은 재생이 사용자 제스처 없이 시작되므로 오디오를 전제할 수 없다는 겁니다.
그건 스트림 로고 애니메이션에 가장 유용한 단 하나의 테스트를 만듭니다. 음소거해 봅니다. 트랙 없이 등장이 임의로 느껴지면 타이밍이 틀렸고 오디오 작업으로 고쳐지지 않습니다. 마크가 침묵 속에서도 의도대로 landing하면 애니메이션이 제 역할을 하는 거고 음악은 지팡이가 아닌 향상이 됩니다.
두 번째 테스트는 루프 동작이고, Twitch는 그것을 유별나게 중요하게 만듭니다. 스트림 시작 화면은 몇 분 도니까, 거기 애니메이션은 한 시청자에게 수십 번 루프됩니다. 한 번 잘 읽히는 시퀀스가 열다섯 번 반복에 성가시게 바뀔 수 있고, 첫 패스에서 안 보이던 루프 지점의 하드 컷이 열 번째에 당신이 알아채는 게 됩니다.
해결은 길게 만드는 게 아니라 매끄럽게 만드는 겁니다. 자리 잡은 뒤 자기 시작 위치로 녹아드는 마크는 보이는 이음매 없이 루프되고, 검은 화면에서 열고 검은 화면으로 돌아가는 시퀀스는 모든 재시작을 알립니다. 시작 화면에서 하나만 본다면 루프 지점을 보세요.
Colour, Contrast and the Overlay Problem
오버레이 마크는 게임 영상 위에 놓입니다. 즉 배경이 게임이 렌더링하는 whatever, 계속 바뀌고, 밝을 때도 있고 거의 검을 때도 있습니다. 예측 가능한 배경과의 대비에 의존하는 마크는 이걸 못 견딥니다.
통하는 접근 세 가지.
오버레이 마크에 자체 포함된 배경을 주세요. 심볼 뒤 작은 솔리드나 은은한 형태의 플레이트. 약간의 화면 area를 쓰지만 밑에서 무슨 일이 일어나든 마크를 읽게 합니다.
강한 내부 대비를 가진 마크를 쓰세요. 그래야 어떤 배경 against도 적어도 한 요소가 보입니다. 단일 톤 마크는 세션 중 어느 순간 같은 톤 영상에 녹아 사라집니다. 가정이 아닙니다. 첫 방송에 일어납니다.
행동에서 아예 치워버리세요. 대부분 게임 인터페이스는 자기 상태 요소를 예측 가능한 코너에 두고, 오버레이 마크는 보통 그들이 비워둔 공간 중 하나에 있어야 합니다. 수십 년 방송 그래픽이 써온 세이프 영역 관습의 같은 논리입니다.
이면에 문서화된 규율이 있습니다. 마크 사용의 잘 세워진 원칙은 로고에 추가 그림자·테두리·프레임으로 장식하지 말라는 겁니다. YouTube의 채널 브랜딩 가이드는 아바타와 채널 아트에 같은 규칙을 명시하고, 일반화됩니다. 마크에 보이려면 프레임이 필요하면 근본 대비 문제가 안 풀린 겁니다. 흥미롭게도 오버레이 플레이트는 그런 의미의 장식이 아닙니다. 가독성 문제를 푸는 거라, 드롭 섀도우가 실수로 읽히는 곳에서 의도적으로 읽힙니다.
이 모든 걸 단순하게 유지하는 유용한 절제 근거도 있습니다. Nielsen Norman Group의 사용자 인터페이스 애니메이션 연구는 상태 변화를 전달하는 모션과 그 자체를 위한 모션을 나누고 후자가 돌려받는 것 없이 시선을 쓴다고 봅니다. 스트림 트랜지션은 콘텐츠가 곧 시작됨을 전달하니 진짜 상태 변화입니다. 회전하고 튕기고 폭발해 다시 조립되는 마크는 타임라인을 즐긴 사람이 있다는 것만 전달합니다.
The Sizes You Need, and How Many Times You Need Them
채널의 작업 세트는 사람들이 예상하는 것보다 작고, 대부분 하나의 드로잉에서 나옵니다.
아바타용 정사각형 정지, 플랫폼이 받는 최대 크기로 내보내고 원형 크롭 안에서 가독성 확인. 오프라인 배너와 디렉토리 썸네일용 가로 정지, 작은 크기로 보여도 구도가 사는 걸로 만듦. 스토리·숏·스트림에서 자른 숏폼 클립용 세로 애니메이션. 스트림 시작 화면·트랜지션·알림용 와이드스크린 애니메이션. 그리고 모션을 못 받는 패널과 배치용, 애니메이션 클린 홀드에서 뽑은 정지 프레임.
애니메이션 내보내기에선 해상도와 화면 비율 둘 다 중요합니다. YouTube의 화면 비율 및 해상도 가이드는 9:16 세로, 1:1 정사각형, 16:9 와이드스크린과 세로 영상 권장 1080×1920을 문서화하고, Twitch 클립과 숏도 같은 포맷입니다. 세 가지를 한 소스에서 내보내면 진입 타이밍이 across them 동일하게 유지되는데, 스트림 트랜지션과 짝인 숏폼 클립을 자주 연달아 보기 때문입니다.
A Production Order That Avoids Redoing the Animation
아래 순서는 비싼 작업 뒤가 아니라 앞에 곤란한 결정을 두도록 정렬했습니다.
하나. 아트웍을 SVG로, 또는 가능한 최대 크기의 투명 PNG로 내보내고 어두운 배경에서 투명도 확인.
둘. 정사각형 아바타 크롭을 만들어 실제 채팅 크기로 봅니다. 가장 작은 배치이자 나머지를 제약하는 겁니다.
셋. 가로 배너 구도를 작은 썸네일로 보여도 사는 걸로 설계하고, 전폭이 아니라 그 크기로 확인하세요.
넷. 애니메이션을 만들기 전 오버레이 배치와 그 플레이트를 정하세요. 플레이트는 마크가 놓인 프레임을 바꾸니까요.
다섯. 애니메이션을 깨끗한 홀드가 있는 1초 등장으로 만들고, 시작 화면용 매끄러운 루프를 더합니다.
여섯. 세 비율 플러스 정지를 내보내고, 실제 나타날 각 크기로 음소거해 테스트합니다.
다른 플랫폼에 같은 순서를 적용한 걸 보고 싶다면, <a href="/blog/youtube-animated-logo">YouTube용 애니메이션 로고</a>가 와이드스크린 사례를 더 자세히 다루고, <a href="/blog/video-logo">비디오 로고가 다르게 해야 할 일</a>이 어떤 채널에나 적용되는 근본 디자인 변화를 다룹니다.
What Goes Wrong Most Often
다섯 가지 반복 실패, 모두 피할 수 있습니다.
마크가 채팅에서 안 읽힘. 채팅 아바타는 작고 마크는 채널 페이지용으로 설계됐습니다. 위처럼 가장 작은 크롭을 먼저 만들어 해결하세요.
오버레이가 밝은 게임 영상에 녹아 사라짐. 단일 톤 마크는 어떤 것 against도 사라집니다. 플레이트를 쓰거나 애니메이션 전에 대비를 넣으세요.
시작 화면에 보이는 루프 이음매. 시청자는 한 세션에 그 루프를 수십 번 겪습니다. 길이가 아니라 루프 지점을 고치세요.
애니메이션이 사운드 있을 때만 통함. 음소거해 확인하세요. 시청자 상당수가 그렇게 도착하니까요.
배너는 전폭에서 아름답고 썸네일에선 안 읽힘. 작은 구도를 먼저 만들고 가로 버전이 따라가게 하세요.
FAQ
Where does the animated logo go on a Twitch channel?
스트림 시작 화면, 트랜지션, 알림, 그리고 영상 가능 오프라인 배너. 그건 브랜드 순간을 위해 만들어진 표면입니다. 아바타, 채팅 배지, 오버레이 코너는 거의 항상 정적이라 애니메이션 버전은 대체가 아니라 추가로 다뤄야 합니다.
What size should a Twitch logo animation be?
세로 배치는 1080×1920으로 9:16, 시작 화면과 트랜지션은 16:9, 둘 다 시간싱이 맞게 한 소스에서. 정적 아바타와 배너는 자체 요건을 가진 별도 내보내기이고, 둘 다 전폭이 아니라 실제 표시 크기로 확인해야 합니다.
Should the logo animation have sound?
사운드 없이 통하도록 설계하세요. 채널 페이지에 도착한 시청자는 자주 음소거 상태라 시각 시퀀스가 스스로 landing해야 합니다. 사운드는 타이밍을 거기에 의존하게 하지 말고, 사운드가 있는 시청자를 위한 향상으로 더하세요.
How do I stop the overlay mark from disappearing on stream?
심볼 뒤에 포함된 플레이트를 주거나, 어떤 배경 against도 한 요소가 보일 만큼 내부 대비를 넣으세요. 게임 영상 위에 겹치는 단일 톤 마크는 세션 중 어느 순간 사라지고, 드롭 섀도우는 고치지 못합니다.
Does a Twitch channel need a separate logo from the main brand?
보통 별도 디자인이 아니라 별도 내보내기 세트입니다. 채널은 원형 아바타, 작은 디렉토리 썸네일, 오버레이 코너, 와이드스크린 시작 화면을 견디는 마크가 필요합니다. 가장 작은 걸 먼저 설계하면 하나의 드로잉이 네 가지 모두를 감당할 수 있습니다.
The Bottom Line
낯선 사람처럼 — 잘못된 시간, 오프라인, 폰만 한 브라우저 창 — 채널을 여세요. 보이는 게 대부분 사람이 보는 겁니다. 거기서 마크가 읽히고 배너가 썸네일 크기에서도 읽힌다면 기초가 있는 거고, 애니메이션은 그 위의 짧고 싼 추가입니다. 그렇지 않다면, 가장 많이 보이는 바로 그 크기에서 지는 마크를 아무리 움직여도 구출할 수 없습니다.