로고의 시각적 중앙 맞춤: 원본을 보존하며 위치 조정하기

로고의 시각적 중앙을 맞추려면 먼저 의도한 프레임 안에서 보이는 그림을 기하학적으로 가운데에 배치하세요. 그다음 안내선을 숨기고 사람들이 실제로 볼 크기에서 조금 이동한 배치와 비교하세요. 두 버전의 로고 모양은 같게 유지하세요. 채택한 이동량은 배치 결정으로 따로 기록해 벡터 원본이 바뀌지 않게 하세요.

시각적 중앙 맞춤은 기하학적으로 같은 여백을 두어도 원하는 균형이 나오지 않을 때 눈으로 판단해 위치를 조정하는 작업입니다. 해당 환경에서 해당 도형을 보고 판단해야 합니다. 도심 계산이나 고정 픽셀 이동량은 시작점을 제안할 수 있지만 어느 쪽도 보편적으로 가장 균형 잡힌 위치를 정해주지는 않습니다.

예제에서는 200 × 140 프레임에 직접 만든 비대칭 심벌 하나를 사용합니다. 왼쪽 몸체는 넓고 오른쪽 끝은 가늘어 같은 경계 여백을 측정하고 다른 배치와 비교하기 쉽습니다. 유료 디자인 애플리케이션 없이도 아래 파일을 재현할 수 있습니다.

균형을 판단하기 전에 기하학적 기준 만들기

경계 상자는 측정하는 기하 형태를 감싸는 가장 작은 좌표축 정렬 사각형입니다. 그 중점은 초기 배치에 유용합니다. 하지만 각 측면에 채워진 면적이 얼마나 있는지, 어떤 부분이 시선을 끄는지는 설명하지 못합니다.

Rafal Tomal의 시각적 디자인 예제는 눈으로 맞춘 배치가 수치 정렬과 다른 사례를 보여줍니다. 실제 결과를 비교해야 한다는 근거이며, 모든 로고에 적용할 단일 보정값을 제공하는 것은 아닙니다.

배치를 바꾸기 전에 우연히 여백이 들어간 파일이 아니라 그림 자체를 정렬하고 있는지 확인하세요. 넓은 빈 테두리는 대칭 로고도 어긋나 보이게 만들 수 있습니다. 캔버스를 검사하고 의도하지 않은 배경 조각을 제거한 다음 완전한 로고에 어떤 개체가 속하는지 확인하세요. 승인된 보호 공간은 잘라내지 말고 보존하세요.

SVG 측정에서 getBBox()는 요소의 사용자 좌표계에서 경계를 반환하며, 자체 변환이나 부모의 변환을 포함하지 않습니다. 브라우저 뷰포트 측정은 다른 질문에 답합니다. 이 측정을 구분하는 방법은 SVG 경계 상자 가이드에서 설명합니다.

같은 프레임에서 동일한 심벌 비교하기

아래 원본 패스는 x = 20에서 140, y = 20에서 80까지 이어집니다. 따라서 경계는 120 × 60이고 중점은 (80, 50)입니다. 프레임의 중점은 (100, 70)입니다. 그룹을 (20, 20)만큼 평행 이동하면 이 경계가 가운데에 맞춰집니다.

다음을 logo-geometric.svg로 저장해 브라우저에서 여세요. 옅은 사각형은 배치 프레임이며 로고 그림의 일부가 아닙니다.

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="140" viewBox="0 0 200 140">
  <rect x="0.5" y="0.5" width="199" height="139"
        rx="8" fill="#f7f9fc" stroke="#cad4e2"/>
  <g transform="translate(20 20)">
    <path fill="#193b59"
          d="M20 20H70V35H140L70 55V80H20Z"/>
  </g>
</svg>

이제 보이는 그림은 x = 40에서 160, y = 40에서 100까지 차지합니다. 좌우 여백이 각각 40 단위이고 상하 여백도 각각 40 단위입니다. 비교 기준일 뿐이며 최종 배치를 반드시 이 위치에 유지해야 한다는 뜻은 아닙니다.

시각적 배치 시험안으로 두 번째 파일을 저장하면서 transform="translate(32 20)"을 사용하세요. 오른쪽으로 12 단위 이동하며 바뀌는 것은 위치뿐입니다. 패스의 d 값, 채우기, 프레임, 표시 크기는 그대로 유지하세요. SVG 평행 이동은 좌표계를 이동하므로 패스를 다시 작성할 필요가 없습니다.

이 프레임에서 저희는 오른쪽으로 옮긴 시험안을 더 선호합니다. 넓은 왼쪽 몸체가 프레임 중앙에 가까워지고 가는 끝은 오른쪽으로 더 뻗습니다. 다른 레이아웃에서는 기하학적으로 맞춘 버전이 더 나아 보일 수 있습니다. 선택을 문서화하기 전에 두 버전을 실제 주변 콘텐츠와 함께 비교하세요.

안내선을 숨기고 실제 사용 크기로 배치 확인하기

실제 프레임과 배경에서 비교하세요. 결과를 판단하기 전에 중심선과 경계 상자 표시를 숨기세요. 그렇지 않으면 심벌보다 측정된 여백에 계속 눈이 갈 수 있습니다.

1. 기하학적 기준 버전과 시험 버전을 같은 크기로 여세요.
2. 의도한 레이아웃에서 한 번에 한 버전씩 본 뒤 나란히 비교하세요.
3. 로고가 실제로 들어갈 작은 배치에서도 확인하세요. 프레임 비율과 주변 콘텐츠는 같게 유지하세요.
4. 이동한 뒤에도 승인된 보호 공간이 유지되고 잘림이 없는지 확인하세요.
5. 선택한 이동량과 해당 배치를 기록하세요. 시험안이 새로운 불균형을 만들면 기하학적 기준으로 돌아가세요.

프레임 너비가 200 px이면 시험 이동량 12 단위는 12 px입니다. 프레임 너비가 100 px이면 같은 SVG 이동량은 6 px입니다. viewBox와 함께 크기가 바뀝니다. 모든 크기에 고정된 12 px CSS 이동량을 별도로 추가하면 다른 배치 규칙이 됩니다.

확인 방법: 전체 SVG 파일 두 개를 Chromium에서 렌더링하고 너비 200 px 및 100 px에서 뷰포트 경계를 비교한 뒤 패스 데이터가 동일함을 확인했습니다. 전체 크기에서 기하학적 기준 버전의 좌우 여백은 각각 40 px였습니다. 시험안의 왼쪽 여백은 52 px, 오른쪽은 28 px였으며 절반 크기에서 상대 이동량은 6 px였습니다. 기하 형태 확인과 편집 관점의 비교이며 사람의 지각을 연구한 결과는 아닙니다.

버전 사이에 로고 모양이 달라진다면 원본을 복원하고 배치 변환만 바꾸세요. 시험안에서 끝부분이 잘린다면 로고를 수정하기 전에 뷰포트와 이동량을 확인하세요. 로고 조합이나 배경이 달라져 균형이 바뀌면 해당 용도를 별도로 검토하세요. 더 넓거나 높은 프레임에 로고를 맞추는 방법은 반응형 SVG 로고 조합 가이드를 참고하세요.

원본과 배치 결정을 따로 보존하기

원본 로고를 레이아웃의 배치 래퍼와 독립적으로 보관하세요. 프레임 크기, 기준 크기, 변환, 선택한 배경을 문서화하세요. 이 예제에서는 '원본 심벌 120 × 60, 배치 프레임 200 × 140, 시험 변환 (32, 20), 다른 로고 조합에서는 재검토'와 같이 기록하면 유용합니다.

승인된 브랜드 자산에는 모양이나 내보낸 경계에 시각적 보정이 이미 포함되어 있을 수 있습니다. 제공받은 자산과 배치 지침을 사용하세요. 여백 측정값이 다르다는 이유만으로 확립된 로고를 다시 디자인하지 마세요.

전체 로고의 배치는 라이브 텍스트를 기준선에 맞춰 가운데에 놓는 작업과도 다릅니다. 컨트롤 안의 라벨이 문제라면 SVG 텍스트 수직 정렬 가이드를 사용하세요. 나머지 원본 및 전달 작업은 블로그 가이드에서 살펴볼 수 있습니다.

배치 전에 PerfectVector가 맡는 단계

PerfectVector는 래스터로만 남은 로고의 벡터 도형을 재구성해 배치를 비교할 수 있도록 도와줍니다. 먼저 재구성한 실루엣, 빈 공간, 불필요한 배경 조각을 원래 기준 이미지와 비교하세요. 로고 벡터 변환 작업 절차는 원본 재구성 단계를 제공하며, 시각적 배치 결정은 직접 내려야 합니다.

승인된 벡터 원본이 있다면 그 파일을 그대로 배치하세요. 추적으로 의도적인 비대칭 특징이 바뀌었다면 중앙 맞춤을 판단하기 전에 원본 기하 형태를 바로잡으세요. 로고 벡터 변환 가이드는 이 검사를 설명합니다. 크기 조절이 가능한 파일은 배치 수정을 편리하게 하지만 사람들이 어떤 상태를 균형 잡혔다고 느낄지는 결정하지 않습니다.

자주 묻는 질문

비대칭 로고도 여백이 같아야 하나요?

같은 여백은 측정 가능한 기하학적 기준을 제공합니다. 특정 비대칭 로고는 기록해 둔 이동량을 적용했을 때 더 좋아 보일 수 있습니다. 실제 사용 크기로 비교하고 승인된 그림은 바꾸지 마세요.

로고의 도심이 시각적 중심인가요?

기하학적 도심은 특정한 기하 또는 면적 분포를 나타냅니다. 시험 배치에 참고할 수 있지만 모든 프레임과 배경에서 모든 로고의 시각적 균형을 정해주지는 않습니다.

로고를 옮기려면 패스를 바꿔야 하나요?

배치를 비교할 때는 원래 패스를 유지하고 별도의 변환이나 레이아웃 위치를 사용하세요. 원본을 보존하면서 조정을 쉽게 비교하거나 되돌릴 수 있습니다.

출처

1. Rafal Tomal: 시각적으로 균형 잡힌 디자인 만들기: 수치 정렬과 다른 시각적 보정을 디자이너가 직접 예제로 설명합니다.
2. MDN: SVGGraphicsElement getBBox(): 기하학적 기준에 사용하는 로컬 좌표 경계를 설명합니다.
3. MDN: SVG transform: 배치 그룹을 통해 원래 패스를 그대로 평행 이동하는 방법을 설명합니다.

로고가 래스터 이미지로만 남아 있다면 PerfectVector로 벡터 도형을 재구성하세요. 실루엣을 기준 이미지와 비교한 다음 실제 사용 크기에서 기하학적 배치와 시각적 배치를 비교하고, 선택한 이동량은 원본과 따로 저장하세요.