YouTube에서 채널 아바타는 98×98픽셀로 표시됩니다. 그것은 대부분의 사람이 4000픽셀 마스터를 내보내고 끝났다고 할 때 가정하는 것보다 작습니다. 그 옆에서 채널 배너는 2560픽셀 너비로 펼쳐지고 TV에서는 그 일부만 보입니다. 그리고 모든 영상 끝에서 같은 마크는 경쟁사 썸네일 두 개 옆에 놓여도 읽을 수 없게 되지 않아야 합니다.
그러니 YouTube 애니메이션 로고는 하나의 자산이 아닙니다. 그것은 한 번 그려 세 박스에 맞게 적응시킨 하나의 마크입니다. 세 박스는 기하학을 거의 공유하지 않고 — 그리고 나서 세 곳 모두를 위해 한 번 애니메이션합니다. 순서를 틀리면 마크를 세 번 다시 그리게 됩니다. 제대로 하면 전체가 단 하루 오후입니다. 마크를 애니메이션해 본 적 없다면 먼저 로고 애니메이션의 기본부터 시작하세요.
YouTube 애니메이션 로고가 채워야 할 세 박스
각 배치를 리사이즈가 아니라 디자인 제약으로 다루는 것이 도움이 됩니다. 세 곳은 마크 자체 외에는 공통점이 없습니다.
아바타는 정사각형이고, 원형 크롭 안에 표시되며 작습니다. 그 정사각형의 내접원 바깥의 모든 것은 잘리므로, 마크는 주변에 공간이 우연히 있는 사각형이 아니라 디자인상 원 안에 있어야 합니다.
배너는 넓고 대부분 보이지 않습니다. YouTube는 2048×1152픽셀 업로드 안에서 1235×338픽셀 세이프 영역을 보여주고, 그보다 더 자르는 TV도 있습니다. 그 중앙 띠 바깥에 있는 것은 특정 화면 크기의 시청자를 위한 장식일 뿐이며, 그것은 좋은 보너스이지 결코 디자인 전제가 아닙니다.
엔드 스크린은 다른 사람이 관련되는 유일한 곳입니다. 마크는 비디오 카드와 구독 버튼 옆의 작은 원형 요소로, 당신이 통제하지 않는 영상 위에 나타납니다. 같은 세션에서 밝은 말하는 인물과 어두운 싸움 장면 모두에서 읽힐 수 있어야 합니다.
98픽셀 아바타를 먼저 디자인하세요
가장 작은 크기에서 시작해 위로 올라가세요. 그 반대도 아니고, 끝에 가서 확인하는 것도 아닙니다.
이유는 단순합니다. 큰 것에서 작은 것으로 가면 디테일이 손실됩니다. 배너 스케일에서 아름답게 읽히는 워드마크를 그린 뒤 아바타 크기에서 글자가 회색 얼룩으로 무너진 것을 발견하고, 이제 다시 그려야 합니다. 작은 것에서 큰 것으로 가면 손실이 없습니다. 98픽셀에서 읽히는 마크는 그보다 큰 모든 크기에서 읽히기 때문입니다. 작은 버전이 제약이고, 그보다 큰 것은 필요 없는 여유입니다.
실전적으로, 이는 작업하면서 아바타를 단독 심볼로 디자인한 뒤 배너와 엔드 스크린용 워드마크를 더한다는 뜻입니다. 그 분리는 로고 GIF나 모노그램을 둘러싼 어떤 작은 포맷 자산을 만드는 것과 같은 논리입니다. 가장 힘든 크롭을 견디는 버전이 애니메이션할 가치가 있는 버전이기 때문입니다.
원에서 통하는 마크로 결정하세요
두 가지 형태는 원형 크롭에서 항상 실패합니다. 경계 상자의 모서리에 중요한 콘텐츠가 있는 것 — 왼쪽에서 오른쪽으로 바짝 맞춘 워드마크, 이름 옆에 심볼이 있는 락업 — 은 이름의 양끝을 잃습니다. 그리고 그 너비를 전제로 한 내부 간격으로 만들어진 넓은 사각형은 원이 파고들면 중심에서 벗어나 보입니다.
해결은 상자가 이미 원이라고 가정하고 디자인하는 것입니다. 정사각형에 내접하는 원 안에 마크를 두고, 모든 면에 지름의 약 8~10% 여백을 두세요. 그리고 브랜드에 워드마크가 있다면, 아바타 크기에 반드시 나타나야 할 것이 아니라 넓은 배치용 별도 자산으로 다루세요. 모노그램에 선택적 워드마크를 더한 구조가 세 박스 모두를 견디는 구조입니다.
실제 크기로 테스트하세요, 확대해서가 아니라
4000픽셀로 디자인하고 98로 판단하세요. 마크를 실제 표시 크기로 내보내 팔 길이의 폰에 올리고 1초 안에 보세요. 가는 획은 사라지고, 여백은 닫히며, 모든 그라데이션은 평면 중간 톤이 됩니다. 그 테스트를 견디는 것이 당신이 애니메이션할 그림입니다.
불편한 부분은 그 테스트가 보통 마크의 가장 흥미로운 버전을 죽인다는 것입니다. 그것이 건너뛰는 이유가 되지 않습니다. 자세한 일러스트를 아바타로 쓰는 모든 채널은 결국 그것을 바꾸고, 처음부터 이 테스트가 만들었을 법한 것과 비슷한 것으로 바꿉니다.
모션도 아바타 크기에서 읽혀야 합니다
같은 논리가 애니메이션에도 적용되고, 대부분의 채널 로고가 실패하는 곳이 여깁니다. 슬라이드, 스케일, 회전으로 만든 등장은 1080픽셀에서는 잘 읽히지만 98에서는 읽을 수 없는 진흙이 됩니다. 그것들은 모두 위치와 크기의 움직임이고, 작은 스케일에서는 눈이 따라갈 수 없기 때문입니다.
작은 곳을 견디는 것은 형태와 불투명도의 변화입니다. 와이프, 드로온, 같은 실루엣의 두 상태 사이 페이드입니다. 그것들은 움직임이 아니라 상태 변화로 읽히고, 썸네일 크기 요소에서도 즉시 인식됩니다.
그 이면의 메커니즘은 CSS 애니메이션 모델에 문서화되어 있는데, 애니메이션 가능한 속성을 매끄럽게 보간할 수 있는 것과 없는 것으로 나눕니다: w3.org — CSS animations specification. 불투명도와 transform은 깔끔하고 저렴하게 보간되고, 애니메이션 중 전체 레이아웃 재계산을 강제하는 것은 렌더링도 무겁고 작은 크기에서 읽기도 어렵습니다. 그 원칙은 애니메이션이 브라우저에서 돌든 비디오로 렌더링되든 같습니다.
플랫폼에서 오는 제약이 두 개 더 있습니다. 첫째, 애니메이션은 착지해 멈춰 있어야 합니다 — 아바타는 슥 훑어보는 것이라, 마크는 실행 시간 대부분을 최종 상태로 있어야 합니다. 둘째, 자산이 움직이는 썸네일이나 인트로로 쓰인다면 루프 지점은 첫 프레임으로 돌아가야 합니다. 보이는 점프와 함께 리셋되는 움직이는 마크는 깨진 것처럼 보이기 때문입니다.
애니메이션된 엔드 스크린과 인트로
애니메이션된 채널 마크가 아바타 너머에서 제 몫을 하는 두 곳입니다.
첫째는 짧은 채널 인트로입니다 — 1~3초, 마크가 들어와 멈춰 서고 사라집니다. 3초 미만으로 유지하세요. 인트로의 매 초는 콘텐츠가 시작되기 전에 쓰는 시청자 유지의 1초이기 때문입니다. 그 포맷의 더 타이트한 버전은 로고 인트로 애니메이션입니다. 첫 프레임이 스스로 서도록 디자인됩니다.
둘째는 엔드 스크린입니다. YouTube의 채널 브랜딩 문서는 제작자에게 다른 채널 카드 옆에 나타나는 요소에 드롭 섀도우, 테두리, 프레임을 더하지 말라고 요청합니다. 플랫폼이 이미 자체 처리를 적용하고, 층층 효과는 레이아웃을 시끄럽게 만들기 때문입니다. 그러므로 엔드 스크린의 애니메이션 마크는 강조를 위해 글로우나 외곽선을 더하지 않은 깨끗한 가장자리에 자기 완결적이어야 합니다.
두 배치 모두 아바타와 같은 규칙을 공유합니다. 최종 상태의 로고로 시작하세요. YouTube의 안내는 원으로 표시될 아바타를 최소 98×98픽셀로 업로드하고, 배너의 메시지를 1235×338 세이프 영역 안에 두는 것입니다 — 2048×1152 업로드의 나머지는 종종 완전히 잘립니다: support.google.com/youtube/answer/10456525. 그 문서가 지적하듯, 전체 업로드 너비로 디자인된 배너는 데스크톱에서는 중앙에 있고 TV에서는 양쪽 절반을 잃습니다.
하나의 애니메이션, 세 번의 내보내기
애니메이션을 아바타 크롭에 맞춰 한 번 만들고, 채널이 필요로 하는 각 비율로 내보내세요. 타이밍, 이징, 홀드는 동일하게 유지되고, 바뀌는 것은 마크 주변 프레임뿐입니다.
짧은 목록: 정지 및 애니메이션 프로필 자산용 아바타와 썸네일 크기의 정사각 내보내기, 채널 배너 영역과 웹사이트나 보도용 가로 내보내기, 그리고 인트로와 엔드 스크린용 16:9 내보내기입니다. 채널이 세로 Shorts도 올린다면 9:16 컷다운을 더하세요 — 같은 소스 파일, 같은 박자 정렬입니다.
내보내기 비트레이트는 일반 영상보다 여기서 더 중요합니다. 평면 배경 위의 고대비 마크는 압축 아티팩트가 가장 먼저 나타나는 곳이기 때문입니다. High 프로파일의 H.264, 약 2초의 키프레임 간격, 그리고 플랫폼이 일반 비디오에 권장하는 것보다 높은 데이터 속도가 가는 획의 링링을 막습니다.
같은 대화상자에 숨은 두 번째 내보내기 결정이 있습니다. 평면 배경 위의 마크는 색 공간 실수에 유난히 민감하고, 기본값이 맞다고 가정하는 대신 컨테이너가 기대하는 값을 싣고 있는지 확인할 가치가 있습니다 — 그 차이는 남의 화면에서 미묘하게 바뀌는 브랜드 색으로 나타납니다. 포맷이 메타데이터를 어떻게 처리하는지 확인하는 것은 나중 생각이 아니라 일의 일부입니다: developer.mozilla.org — format handling reference.
마크가 또 나타나는 곳
채널 마크는 세 공식 박스에만 사는 것이 아닙니다. YouTube가 사양서를 주지 않는 곳에도 나타나고, 그곳이 종종 애니메이션 버전이 가장 일을 하는 곳입니다.
썸네일이 눈에 띄는 곳입니다. 썸네일 구석의 작은 마크는 인지 단서이고, 모든 영상에서 동일할 때 가장 잘 작동합니다 — 같은 위치, 같은 크기, 같은 처리. 구석 마크가 업로드 사이를 옮겨 다니는 순간 인지 가치는 붕괴하고 장식이 됩니다.
Shorts가 두 번째입니다. 같은 마크의 세로 컷다운은 Shorts용 엔드 카드로 쓰이고, 9:16 프레임은 하나의 소스 파일에서 만든 로고 비디오가 제 몫을 하는 곳입니다 — 타이밍은 바뀌지 않고 넘어가고, 바뀌는 것은 마크 주변 프레임뿐입니다.
세 번째는 플랫폼 밖입니다. 같은 애니메이션 마크는 이메일 서명, 보도 자료, Discord 서버, 스폰서 덱에 결국 들어갑니다. 모두가 버전을 누군가 요청할 때마다 모션을 다시 만드는 대신 소스 파일을 한 곳에 두는 이유입니다.
마음에 두면 좋은 비교
세 배치는 치수 이상으로 다르고, 내보내기 시작하기 전에 차이를 한 곳에 정리해 두면 도움이 됩니다.
아바타 — 정사각형, 원으로 표시, 화면에서 약 98픽셀, 1초 안에 판단, 단색이거나 단순히 대비되는 배경을 가진 단독 심볼로 만드는 것이 최선.
배너 — 넓음, 보여야 하는 것은 사실상 1235×338, 2048×1152로 업로드, 데스크톱과 TV에서 다른 크롭으로 읽힘, 마크를 한쪽에 두고 메시지를 세이프 밴드 안에 두는 것이 최선.
엔드 스크린 — 작음, 원형, 통제되지 않는 영상 위에 놓임, 비디오 카드와 구독 버튼과 경쟁, 외곽선이나 섀도우를 더하지 않은 깨끗한 가장자리의 마크와 긴 애니메이션 대신 짧은 홀드로 만드는 것이 최선.
하나의 마크, 하나의 모션 언어, 세 세트의 숫자. 내보내기 파일 곁에 숫자를 적어 두세요. 그래야 채널을 만지는 다음 사람이 마크를 기억에서 다시 만들고 박자에서 두 프레임 벗어나지 않습니다.
자주 묻는 질문
YouTube 채널 로고는 어떤 크기여야 하나요?
최소 98×98픽셀로 업로드하고, 있다면 더 크게 하세요 — 플랫폼 안내는 원형 크롭으로 표시되는 아바타 최소 98픽셀입니다. 4000픽셀로 디자인하되 98로 판단하고, 중요한 모든 것을 정사각형의 내접원 안에 두세요.
YouTube 채널 로고를 애니메이션할 수 있나요?
아바타 자체는 정지 이미지이지만, 같은 마크는 인트로, 엔드 스크린, 움직이는 썸네일, 모든 플랫폼 밖 배치용으로 애니메이션할 수 있습니다. 아바타 크롭에 맞춰 하나의 애니메이션을 만들고 필요한 비율로 내보내세요. 그러면 마크가 나타나는 어디서나 타이밍이 동일하게 유지됩니다.
채널 아바타로 하니 로고가 흐릿해 보이나요?
거의 항상 가는 획과 미세한 디테일 때문입니다. 98픽셀에서 1픽셀 획은 사라지거나 번쩍이는데, 보통은 번쩍입니다. 가장 작은 크기에서 견디도록 그림을 단순화하고, 마크와 배경 사이 대비를 높이고, 디테일한 버전이 아니라 단순화한 버전을 애니메이션하세요.
로고에 채널 이름을 넣어야 하나요?
이름은 별도 자산으로 다루세요. 워드마크는 아바타 크기에서 읽히지 않습니다 — 글자가 회색 얼룩으로 무너집니다 — 그러므로 모노그램을 기본 마크로 쓰고, 너비를 쓸 수 있는 배너, 인트로, 엔드 스크린에서만 워드마크를 더하세요.
채널 인트로 애니메이션은 얼마나 길어야 하나요?
1~3초, 주간 발행 채넬은 1초에 가깝게. 마크는 빠르게 들어와 한 박자 멈춰 서고, 시청자의 주의를 다시 얻기 전에 사라집니다. 그보다 긴 것은 로고를 위해 유지력을 거래하는 것인데, 그게 올릴 모든 영상에서 나쁜 거래입니다.
결론
4000픽셀로 디자인하고 98로 결정하세요. 그 하나의 습관 — 배너 전에 아바타 크롭용 마크를 만들고, 큰 위치 이동 대신 형태 변화를 애니메이션하는 것 — 이 모든 세 배치에서 두 번째 다시 그리기 없이 통하는 YouTube 애니메이션 로고를 만듭니다. 채널 아바타는 대부분의 시청자가 전체 크기로 보게 될 유일한 버전입니다. 나머지는 그 주변 맥락입니다. 애니메이션을 정하기 전에 브라우저 편집기에서 직접 마크의 작은 크롭을 시험할 수 있습니다.