로고 보호 공간: 기준 단위로 여백 계산하고 보존하기

승인된 그림에서 기준 단위를 정한 다음 완전한 로고의 보이는 경계에서 바깥쪽으로 로고 보호 공간을 계산하세요. 선택한 단위가 10이고 로고가 150 × 40이면, 사방에 한 단위씩 보호 공간을 둔 전체 영역은 170 × 60입니다. 로고 자체의 크기는 150 × 40으로 유지됩니다.

보호 공간은 로고 주변에 다른 콘텐츠가 들어오지 않도록 비워두는 영역입니다. 파일에 여백을 넣으면 배치 과정에서 그 공간을 전달하는 데 도움이 됩니다. 하지만 빈 캔버스는 전달 방법 중 하나일 뿐이며, 규칙은 브랜드 가이드가 정합니다. 기존 브랜드의 자산을 준비한다면 새 규칙을 만들기 전에 승인된 규칙부터 따르세요.

이 가이드에서는 직접 만든 로고 조합 하나를 사용해 계산, SVG 내보내기, 크기 변경 과정을 살펴봅니다. 래스터 이미지만 있다면 먼저 보이는 도형을 재구성하세요. 이미지 벡터 변환 도구는 승인된 보호 공간을 추론할 수 없습니다.

이 로고에 맞는 기준 단위 정하기

승인된 로고의 크기가 바뀔 때 같은 비율로 변하는 측정 가능한 특징을 사용하세요. 심벌의 높이, 특정 글자의 치수, 전체 그림의 정해진 비율 등이 될 수 있습니다. 무엇을 측정했는지 정확히 명시하세요. '공간을 적당히 남긴다'는 규칙이나 설명 없이 X만 표시한 사각형은 피하세요.

공식 브랜드 가이드는 이것이 보편적인 비율이 아니라 디자인 정책임을 보여줍니다. University at Buffalo의 보호 공간 가이드는 대표 로고 조합 주변에 서로 맞물린 UB 심벌의 높이를 사용하며 선 형태에는 별도 지침을 제공합니다. Vevo 가이드는 높이 30 px 위아래의 심벌을 구분하고 웹과 태블릿의 상황별 간격을 제시합니다. 실제 심벌과 용도에 해당하는 규칙을 따르세요.

직접 만든 예제의 원형 심벌은 높이가 40 단위입니다. 그 높이의 4분의 1을 X로 정해 X = 10으로 사용합니다. 필요한 여백은 각 변마다 1X입니다. 예제를 위해 만든 규칙이며, 모든 브랜드에 심벌 높이의 25%를 권장하는 것은 아닙니다.

규칙을 명확한 문장으로 적으세요. '이 가로형 로고 조합에서 X는 원 지름의 4분의 1입니다. 전체 로고 조합의 모든 바깥 경계에서 최소 1X를 비워두세요.' 애플리케이션이 빈 캔버스를 잘라내더라도 문서화된 규칙은 유지됩니다.

전체 로고 조합을 측정한 뒤 여백 더하기

로고 조합은 심벌과 워드마크를 함께 사용하는 승인된 배치입니다. 그 전체 구성을 측정하세요. 원의 경계만 사용하면 글자가 보호 공간 계산에서 빠집니다.

예제의 원과 직접 그린 글자 세 개는 x = 0에서 150, y = 0에서 40까지 차지합니다. 획, 그림자, 숨겨진 개체는 없습니다. 따라서 보호 공간 사각형의 범위는 x = -10에서 160, y = -10에서 50입니다.

X = circle height / 4 = 40 / 4 = 10
zone width = artwork width + 2X = 150 + 20 = 170
zone height = artwork height + 2X = 40 + 20 = 60

그림에 보이는 획이나 효과가 있다면 실제로 보이는 범위까지 검토하세요. 기하 형태만 측정한 결과와 그려진 결과는 다를 수 있습니다. SVG 경계 상자 가이드는 이 측정 차이를 설명합니다. 여기서는 의도적으로 단순한 채우기 기하 형태를 사용합니다.

여백을 포함한 SVG로 규칙 전달하기

SVG viewBox는 내부 좌표 사각형을 표시 뷰포트에 매핑합니다. 이 예제의 viewBox="-10 -10 170 60"은 그림을 이동하거나 확대하지 않고 계산한 여백을 포함합니다.

아래 전체 예제를 logo-padded.svg로 저장하세요. 워드마크의 글자는 직접 그린 도형이므로 글꼴에 의존하지 않습니다. 원과 글자를 조합한 디자인은 직접 만든 예제이며 다른 브랜드의 승인 자산이 아닙니다.

<svg xmlns="http://www.w3.org/2000/svg"
     width="170" height="60" viewBox="-10 -10 170 60">
  <g fill="#17324d" fill-rule="evenodd">
    <circle cx="20" cy="20" r="20"/>
    <path d="M50 5H80V35H50Z M57 12V28H73V12Z"/>
    <path d="M87 35V5H94L108 24V5H115V35H108L94 16V35Z"/>
    <path d="M122 5H150V12H129V16H145V23H129V28H150V35H122Z"/>
  </g>
</svg>

그림에 딱 맞는 버전도 만들려면 같은 원과 패스를 유지하고 width="150", height="40", viewBox="0 0 150 40"을 사용하세요. 받는 사람이 여백 포함 여부를 구분할 수 있도록 파일명을 정하세요. 측정 안내선은 배치할 그림에 넣지 말고 브랜드 문서나 별도 검토 레이어에 보관하세요.

의도한 로고 크기를 유지하며 자산 크기 바꾸기

지정한 너비가 보이는 그림의 너비인지, 여백을 포함한 전체 파일의 너비인지 정하세요. 파일 너비가 170 px이면 예제 그림의 너비는 150 px, 여백은 10 px입니다. 파일 너비가 340 px이면 그림의 너비는 300 px, 여백은 20 px입니다. 균일하게 크기를 바꾸면 비례 규칙이 유지됩니다.

요구사항이 눈에 보이는 로고 너비 300 px이라면 이 여백 포함 파일의 너비를 340 px로 설정하세요. 전체 파일을 300 px로 설정하면 보이는 그림은 약 264.7 px에 불과합니다. 300 × 150 / 170이 약 264.7이기 때문입니다.

확인 방법: 여백 없는 SVG와 여백 포함 SVG 전체를 Chromium에서 렌더링했습니다. 그림의 기하 경계는 150 × 40 단위였습니다. 여백 포함 파일의 너비가 170 px 및 340 px일 때 측정한 그림의 가로 너비는 150 px 및 300 px, 여백은 10 px 및 20 px였습니다. 직접 작성한 브라우저 예제를 검증한 것이며 모든 편집기의 가져오기 동작을 확인한 것은 아닙니다.

로고가 너무 작게 보인다면 임의로 개체를 확대하기 전에 파일의 캔버스를 확인하세요. 가져오기 후 공간이 사라졌다면 대상 프로그램이 가져온 경계를 살펴보고 문서화된 X 규칙으로 여백을 복구하세요. 가로로 긴 로고를 다른 프레임에 넣는다면 SVG 종횡비 맞춤으로 배치 시 추가되는 빈 공간을 이해할 수 있습니다.

로고 전달 과정에서 PerfectVector가 맡는 단계

브랜드에 로고의 래스터 사본만 있다면 PerfectVector로 벡터 도형을 재구성할 수 있습니다. 도형을 확보한 뒤 전체 로고를 승인된 기준 이미지와 비교하고 의도하지 않은 배경 조각을 정리한 다음, 브랜드에 문서화된 보호 공간 규칙을 별도로 적용하세요. 도형 재구성 단계는 로고 벡터 변환 작업 절차에서 다룹니다.

먼저 벡터 원본과 브랜드 가이드를 요청하세요. 이 파일들은 새로 추적하는 것보다 의도한 그림과 간격 결정을 더 잘 보존합니다. JPG의 빈 테두리는 내보내기 과정에서 우연히 생긴 여백일 수 있으며 브랜드 정책의 증거가 아닙니다. 로고 파일 형식 가이드는 전달할 파일을 선택하는 데 도움이 되고, 로고 벡터 변환 가이드는 원본 준비와 검사를 설명합니다.

마지막으로 전체 그림, 문서화된 X 정의, 여백 포함 파일의 크기, 실제 주변 레이아웃을 확인하세요. 그림에 딱 맞는 원본과 배치용 자산을 모두 보존하세요. 추가 납품 점검은 블로그 작업 가이드 모음에서 확인할 수 있습니다.

자주 묻는 질문

로고 보호 공간은 항상 로고 높이의 4분의 1인가요?

아니요. 원 높이의 4분의 1은 직접 만든 이 예제에서 선택한 규칙입니다. 기존 브랜드는 특정 용도에 대해 다른 단위, 비율, 예외를 정할 수 있습니다.

보호 공간을 유지하려면 흰색 사각형을 추가해야 하나요?

색칠된 사각형을 넣지 않고 SVG viewBox로 빈 공간을 확보할 수 있습니다. 흰색 사각형은 유색 배경에서 그림을 바꿉니다. 투명한 여백 포함 파일을 실제 배치할 위치에서 테스트하세요.

여백 포함 SVG가 브랜드 가이드를 자동으로 적용하나요?

아니요. 뷰포트 안에 빈 공간을 담지만 가져오기 도구가 경계를 잘라내거나 레이아웃 개체가 겹칠 수 있습니다. 문서화된 규칙과 최종 배치 확인은 여전히 필요합니다.

출처

1. University at Buffalo: 보호 공간: 로고 특징에 기반한 단위와 용도별 예외의 공식 사례를 제공합니다.
2. Vevo: 로고 보호 공간: 로고 크기와 디지털 환경에 따라 보호 공간 지침이 달라질 수 있음을 보여줍니다.
3. MDN: SVG viewBox: 예제의 빈 여백을 포함하는 좌표 사각형을 설명합니다.

벡터 원본이 없다면 PerfectVector로 래스터 로고를 재구성하세요. 전체 로고 조합을 기준 이미지와 비교한 다음 승인된 보호 공간 규칙을 적용하고 최종 배치에서 보이는 로고 크기를 확인하세요.