logoto.video logologoto.video
GuideSep 18, 202611 min

애니메이션 트위치 로고: 32픽셀을 위해 만들기

스트리머는 큰 버전부터 디자인하고 아바타 크기에서 문제를 발견합니다. 가장 작은 배치에서 거꾸로 작업하는 게 애니메이션 트위치 로고가 어디서든 버티게 하는 비결입니다.

트위치 채널은 같은 마크를 동시에 네 곳에 두고, 그중 세 곳은 썸네일보다 작습니다. 원형 크롭의 프로필 사진, 모든 메시지 곁의 채팅 마크, 스트림 오버레이 구석, 그리고 스트림이 켜져 있지 않을 때마다 플레이어를 채우는 오프라인 화면입니다. 가장 큰 것부터 디자인하면 가장 작은 것이 실패합니다.

이건 네 곳을 모두 견디는 애니메이션 트위치 로고를 만드는 가이드입니다. 그리고 두 로고가 한 프레임을 나눌 때 화면에 올려도 되는 걸 정하는 플랫폼 규칙까지 다룹니다.

네 가지 배치, 네 가지 다른 그림

본능은 로고 하나를 그리고 크기만 바꾸는 것입니다. 슬라이드 덱의 워드마크에는 통하고 그 외엔 실패하는데, 채널의 네 배치는 진짜 다른 그림을 요구하기 때문입니다. 아바타는 모서리를 다 자르는 원입니다. 채팅 마크는 몇 픽셀 높이로 렌더링되는 정사각입니다. 오버레이는 밝기가 계속 바뀌는 움직이는 영상 위에 놓입니다. 오프라인 화면은 보통 새 방문자가 가장 먼저 보는 풀 16:9 캔버스입니다.

이들을 한 파일을 네 번 버리는 게 아니라, 네 가지로 표현된 하나의 정체성으로 다루세요. 모노그램이 아바타와 채팅 마크를 맡고, 채널 이름이 든 풀 락업은 오프라인 화면과 배너에, 오버레이 버전은 게임플레이를 견디는 데 필요한 외곽선이나 플레이트를 더한 단순화 마크입니다. 같은 브랜드, 네 단계의 디테일.

가장 작은 인스턴스부터 디자인하기

가장 작은 배치가 나머지 모든 것의 제약을 정합니다. 먼저 그리면 시스템 나머지가 그로부터 흘러나옵니다. 나중에 그리면 다시 그리게 됩니다.

아바타가 가장 까다로운 자리인 이유

Twitch는 프로필 사진을 원형 크롭으로 보여주고 업로드보다 훨씬 작은 크기로 재사용합니다. 업계 크기 가이드는 권장 업로드를 256×256픽셀 이상으로 두지만, 중요한 건 바로 그 점입니다. 마크는 채팅과 채널 디렉터리에서도 아주 작게 보이므로, 크기지 않고서도 읽힐 수 있어야 합니다. 256픽셀에서만 통하는 디자인은 가장 많이 보이는 두 곳에서 사라지는 디자인입니다.

모노그램 테스트

채널 이름을 가장 강한 두세 글자로 줄여 가장 작게 시뮬레이션할 수 있는 크기에서 읽히는지 보세요. 읽히지 않는다면 풀 이름에 아무리 공들여도 아바타는 고쳐지지 않습니다. 원 안에서 세 글자도 가독성 한계입니다. 다섯은 회색 막대입니다. 이름이 자연스럽게 줄어들지 않는 스트리머는 전체 단어를 압축하기보다 가장 강한 두 글자를 골라야 합니다.

작은 크기에서의 선 두께

가는 선은 마크가 사라지는 가장 흔한 이유입니다. 2000픽셀 마스터의 1픽셀 선은 채팅 렌더링에서 픽셀의 일부가 되어 그냥 회색이 됩니다. 마스터에 최소 선 두께를 정하세요. 가장 작은 출력도 견디는 두께로, 큰 버전이 처음 상상보다 약간 더 묵직해진 걸 받아들이세요. 묵직하면 읽히고, 우아하면 사라집니다.

같은 논리가 내부 디테일에도 적용됩니다. 촘촘한 크로스해칭, 가는 카운터, 획 사이의 작은 틈은 마크가 줄어들 때 모두 채워집니다. 아바타 버전은 디테일한 그림의 축소본이 아니라 의도적인 단순화로 만드세요. 형태는 더 적게, 틈은 더 넓게, 대비는 더 높게.

오프라인 화면은 가장 많이 보는 에셋

여기 채널 브랜딩의 직관에 반하는 부분이 있습니다. 오프라인 화면이 스트림보다 더 많은 조회를 얻는 경우가 많습니다. 새 방문자는 하루 중 모든 시간대에 채널에 도착하고, 그 도착 대부분은 아무도 라이브가 아닐 때 일어납니다. 1920×1080 오프라인 그래픽이 그 순간 플레이어를 채우므로, 채널에서 레버리지가 가장 높은 이미지입니다.

공개된 Twitch 크기 가이드는 오프라인 화면을 표준 16:9 HD, 즉 플레이어와 정확히 맞는 1920×1080으로 다루고, 권장 최솟값은 1280×720이며, 파일 크기 제한 안에서 GIF를 받는 애니메이션 옵션이 있습니다. StreamScheme의 트위치 이미지 크기 참고는 320픽셀 패널 너비까지 포함해 채널 아트 키트 전체를 위한 유용한 작업 체크리스트이고, 대부분의 스트리머가 첫 업로드에서 틀리는 부분입니다.

오프라인 카드가 답해야 할 것

세 가지 질문, 이 순서로. 이 채널은 무엇인가, 다음 라이브는 언제인가, 다른 곳에서는 어디서 찾을 수 있는가. 애니메이션 트위치 로고는 첫 번째 답에 들어갑니다. 올바른 곳에 도착했다는 정체성 확인입니다. 나머지는 텍스트고, 텍스트는 폰에서도 읽을 만큼 커야 하는데, 대부분의 오프라인 화면이 조용히 무너지는 지점이 거기입니다.

루프 안전 애니메이션

오프라인 화면이 애니메이션한다면, 루프 심은 시청자가 본 지 약 10초 안에 보이고, 그건 방문자가 팔로우할지 결정하는 대략의 시간입니다. 오프라인 카드용 애니메이션 트위치 로고는 대부분의 시간을 가만히 있어야 합니다. 느린 펄스, 은은한 글로우, 몇 초마다 한 번의 비트 고정 움직임, 그리고 시작 프레임으로 정확히 돌아오세요. 아무도 보지 않는 페이지에서 계속 움직이는 건 멈춘 영상처럼 읽히고, 멈춘 영상은 닫힙니다.

오버레이와 알림: 게임플레이를 견디는 모션

오버레이는 기술적으로 가장 까다로운 배치입니다. 마크가 초당 여러 번 밝기, 색, 디테일이 바뀌는 영상 위에 놓이기 때문입니다. 단색 견본 위에서 선명해 보이던 로고는 밝은 하늘이나 바쁜 폭발 위에서 완전히 사라질 수 있습니다.

외곽선과 플레이트

두 가지 수선, 순서대로. 첫째는 2~3픽셀 두께의 대비 외곽선으로, 색을 바꾸지 않고 마크를 뒤의 것과 분리합니다. 둘째는 바쁜 장면에서 외곽선만으로 부족할 때의 소프트 플레이트, 즉 40~60% 불투명도의 둥근 사각형입니다. 둘 다 그림 변경이 아닌 오버레이 설정이라, 하나의 애니메이션 파일이 게임마다 재색칠 버전 없이 모든 장면으로 가져갈 수 있습니다.

모션은 셋이 아니라 하나

스탬프, 즉 마크가 살짝 커진 채 들어와 비트에 딱 내려앉는 건 이 분류를 이끄는 모션입니다. 모든 크기에서 읽히고 알림 뒤의 드롭과 자연스럽게 짝을 이루기 때문입니다. 같은 비트에 흔들림, 색 분할, 플래시를 층층이 쌓는 게 흔한 실패입니다. 함께 겹친 세 효과는 서로를 지워버려, 마크가 등록되어야 할 바로 그 순간 읽히지 않게 됩니다. 강한 모션 하나가 경쟁하는 셋보다 강하게 닿습니다.

두 마크가 한 프레임을 나눌 때의 플랫폼 규칙

애니메이션 트위치 로고가 단독으로 등장하는 경우는 드뭅니다. 오프라인 화면에 플랫폼 UI와 함께, 클립 썸네일에 게임 키 아트와 함께, 패널의 Discord나 YouTube 마크 곁에 놓입니다. 각각 고유한 규칙이 있고, 가장 안전한 시작점은 서드파티 복사본이 아니라 플랫폼 자체 에셋 페이지입니다. Twitch 브랜드 에셋 페이지는 플랫폼 마크의 정식 출처이고, opening line에서 방문자가 팬 아트가 아니라 올바른 에셋을 찾은 걸 고맙게 여긴다고 직접 밝힙니다.

같은 규율은 스트리머가 게시하는 다른 플랫폼에도 적용됩니다. YouTube 채널 브랜딩 가이드는 배너가 견뎌야 할 것을 유난히 구체적으로 다룹니다. 최소 업로드 2048×1152픽셀, 그 안에서 텍스트와 로고가 보임이 보장되는 1235×338픽셀 세이프 영역, 텔레비전 권장 2560×1440, 그리고 장식 그림자나 테두리, 프레임을 더하지 말라는 지시입니다. Google의 채널 브랜딩 문서가 지적하듯, 같은 배너가 컴퓨터, 모바일, 텔레비전에 걸쳐 보이되 각각 다르게 크롭되므로, 한 화면을 위해 가운데 맞춤하는 게 아니라 세이프 영역 안에 마크를 두어야 하는 이유입니다.

Discord는 보통 같은 이미지에 들어가는 세 번째 마크입니다. Discord 브랜드 가이드라인은 마크 자체의 사용 규칙을 정하고, 스트리머를 위한 실용적 결론은 어디서나 같습니다. 플랫폼 마크는 수정 없이 두고, 명확한 여백을 주고, 자기 요소인 양 자기 락업에 합성하지 마세요.

오후에 만드는 법

빌드 순서는 도구보다 중요합니다. 가장 작게 시뮬레이션할 수 있는 크기의 모노그램부터 시작해 읽히게 하세요. 그걸 키워 아바타로 만드세요. 채널 이름을 더해 오프라인 락업을 만들고, 단순화한 그림에 외곽선을 적용해 오버레이 버전을 만드세요. 그제야 애니메이션하되 단순화 버전을 애니메이션하세요. 모션은 마크가 이미 가진 것을 증폭하므로, 어수선한 그림은 움직이는 얼룩이 되고 깔끔한 그림은 움직이는 정체성이 됩니다.

그림이 있으면 애니메이션 자체는 짧은 작업입니다. 투명한 SVG나 PNG를 올리고, 배경 프레임을 고르고, 트랙을 픽하고, 도구가 모션을 비트 마커에 맞춰 자르게 하세요. 그런 다음 같은 소스에서 클립과 Shorts용 9:16, 오프라인 화면과 채널 트레일러용 16:9를 내보내세요. 읽히는 첫 프레임을 중심으로 만든 오프너는 그 출력을 정적 썸네일로도 쓸 수 있게 하고, 브라우저 편집기는 배울 타임라인 없이 전체 패스를 돌립니다. 마크를 애니메이션하는 게 아니라 처음부터 그리고 있다면, 게이밍 마크 디자인 규칙이 이전 단계의 그림 결정을 다룹니다.

자주 묻는 질문

애니메이션 트위치 로고는 어떤 크기여야 하나요?

크기가 결정이 되지 않도록 벡터 마스터에서 만드세요. 실제로는 원형 아바타 크롭을 견디는 정사각, 채팅에서 읽히는 단순화 버전, 오프라인 화면용 1920×1080 구성이 필요합니다. 제약은 아바타입니다. 플랫폼이 렌더링하는 가장 작은 크기에서 마크가 안 읽히면, 더 큰 출력 어느 것도 구해주지 않습니다.

트위치 프로필 사진을 애니메이션할 수 있나요?

Twitch 프로필 사진은 정지 이미지라, 애니메이션 버전은 영상이나 GIF를 받는 배치, 즉 오프라인 화면, 알림, 오버레이, 채널 트레일러에 둡니다. 아바타를 애니메이션의 정지 프레임으로 취급하세요. 그 프레임이 완성된 구도로 읽힌다면 애니메이션 버전도 그렇고, 정지 요구는 타협이 아니라 됩니다.

오프라인 화면을 애니메이션해야 하나요?

은은한 루프는 돕고, 바쁜 루프는 해칩니다. 오프라인 카드는 흔히 방문자의 첫인상이고, 보통 다른 일이 일어나는 동안 두 번째 모니터나 폰에서 봅니다. 느리고 가끔씩인 움직임이 눈을 채널 이름과 스케줄로 되돌립니다. 계속 움직이면 텍스트와 경쟁하고 로드에 실패한 영상처럼 읽힙니다.

게임플레이 위에서 로고를 읽히게 하려면?

먼저 2~3픽셀 두께의 대비 외곽선을 두르고, 장면이 여전히 너무 바쁘면 40~60% 불투명도의 소프트 플레이트를 더하세요. 둘 다 오버레이 수준 설정이라, 게임마다 하나씩이 아니라 하나의 파일이 모든 게임을 커버합니다. 마크가 여전히 struggle한다면, 문제는 보통 처리 방식이 아니라 그림입니다. 단순화하고 다시 시도하세요.

내 애니메이션 트위치 로고를 다른 플랫폼에 써도 되나요?

예, 그리고 그래야 합니다. 한 가지 조정만, 각 플랫폼의 세이프 영역을 존중하세요. YouTube 배너 가이드가 가장 명확한 예로, 2048×1152 업로드의 1235×338픽셀 영역 안에서만 텍스트와 로고를 보장합니다. 트위치 오프라인 화면용으로 가운데 맞춤한 마크는 텔레비전에서 잘립니다. 배치별로 내보내고 한 파일을 어디서나 재사용하지 마세요.

결론

애니메이션 트위치 로고를 차지할 가장 작은 배치에서 거꾸로 만드세요. 모노그램이 채팅 크기에서 읽히게 하고, 가는 선이 견디도록 그림을 단순화하고, 어떤 게임에서도 통하도록 오버레이에 외곽선을 주고, 오프라인 루프가 첫 프레임으로 돌아오게 하세요. 그런 다음 단순화 버전을 애니메이션하세요. 디테일 버전이 아니라요. 32픽셀에서 읽히는 버전이 1080에서 읽히는 버전이기 때문입니다. 나머지는 크기 조정입니다.