> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# 반응형 SVG 로고: 작은 화면에서 로고 조합 전환하기

> picture 미디어 조건으로 상세한 SVG 로고와 간결한 심벌을 선택합니다. 세 가지 뷰포트 너비에서 실제 원본 선택을 확인하고 구성 전환과 크기 조절을 구분하세요.

Source: https://perfectvector.com/ko/blog/responsive-svg-logo-lockup

Language: ko
Author: Irene Kim
Published: 2026-10-06T08:00:00+09:00
Updated: 2026-10-06T08:00:00+09:00

반응형 SVG 로고는 모든 요소를 한꺼번에 줄이는 대신 상세한 로고 조합과 간결한 심벌 사이를 전환할 수 있습니다. 먼저 두 가지 구성을 직접 만든 다음, 미디어 조건이 있는 `<picture>` 원본으로 둘 중 하나를 선택하세요. 지원하려는 너비에서 이미지의 `currentSrc`를 확인하세요.

예제에서는 속이 빈 마름모와 직접 그린 글자를 조합한 가상의 Cove 로고와, 심벌만 남긴 버전을 사용합니다. 전환 기준은 문서의 뷰포트 너비입니다. 넓은 페이지 안에 좁은 컨테이너를 배치해도 같은 전환이 일어나지는 않습니다.

## 크기 조절과 구성 선택은 역할이 다릅니다

일반적인 크기 조절은 전체 구성을 유지합니다. 심벌, 글자, 간격이 모두 함께 작아집니다. 아트 디렉션은 별도로 만든 구성을 선택합니다. 글자를 빼거나 심벌을 재배치하는 것은 디자인상의 결정입니다. SVG가 크기 조절이 가능한 형식이라는 이유만으로 그 결정을 자동으로 내리지는 않습니다.

[HTML picture 참고 문서](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture)는 미디어 조건으로 선택하는 대체 원본과 `img` 대체 이미지의 동작을 설명합니다. 여기서는 너비가 599 픽셀 이하이면 간결한 SVG를, 그보다 넓으면 상세한 SVG를 제공합니다. 이미지 프레임의 크기는 유지하고 그 안의 내용만 바꿉니다.

**로고 조합의 크기를 줄이거나 다른 구성 선택하기**

![속이 빈 마름모와 글자를 조합한 상세 로고, 전체를 작게 줄인 복사본, 글자 없는 간결한 심벌을 비교한 개념도](https://perfectvector.com/blog/responsive-svg-logo-lockup/scale-and-switch.webp)

*설명용 그림: 로고 조합의 크기를 줄이면 세부 요소가 유지되지만, 별도로 만든 간결한 버전에서는 글자를 뺄 수 있습니다. 아래의 실제 원본 선택 결과와 요소 경계는 이 생성 도식이 아니라 별도로 작성한 Cove 시작 예제에서 확인했습니다.*

## 편집 가능한 파일 두 개 만들기

직접 작성한 아래 상세 로고 조합을 `detailed.svg`로 저장하세요. 글자도 패스로 그렸으므로 이 작은 예제에는 글꼴 파일이 필요하지 않습니다.

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="96" viewBox="0 0 300 96">
  <g fill="#176b5b" fill-rule="evenodd">
    <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z"/>
    <path d="M130 24 H160 V32 H138 V64 H160 V72 H130 Z"/>
    <path d="M168 24 H198 V72 H168 Z M176 32 V64 H190 V32 Z"/>
    <path d="M206 24 H214 L225 60 L236 24 H244 L229 72 H221 Z"/>
    <path d="M252 24 H282 V32 H260 V43 H278 V51 H260 V64 H282 V72 H252 Z"/>
  </g>
</svg>
```

간결한 버전을 `compact.svg`로 저장하세요.

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
  <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z" fill="#176b5b" fill-rule="evenodd"/>
</svg>
```

마름모 패스는 두 파일에서 동일합니다. 상세 파일에는 패스 다섯 개, 간결한 파일에는 패스 한 개가 들어 있습니다. 어느 쪽에도 이미지 요소나 라이브 텍스트는 없습니다. 두 파일의 `viewBox` 너비가 다른 것은 구성이 다르기 때문이며, 한 파일을 균일하게 확대하거나 축소했기 때문이 아닙니다.

두 원본 버전을 모두 보존하세요. 자신의 브랜드라면 간결한 구성에서도 어떤 특징을 알아볼 수 있어야 하는지 정한 다음 내부 빈 공간, 여백, 비율을 검사하세요. 전체 원본과 납품 파일 구성은 [로고 파일 형식 가이드](https://perfectvector.com/ko/blog/logo-file-formats)에서 다룹니다. 이 예제는 승인된 두 버전을 브라우저가 선택하는 기능을 추가합니다.

## 완성된 picture 시작 예제 실행하기

두 SVG와 같은 폴더에 다음을 `starter.html`로 저장하고 그 폴더를 로컬로 제공하세요. Python이 설치되어 있다면 `python3 -m http.server 8766`을 사용할 수 있습니다. 그런 다음 브라우저에서 `http://localhost:8766/starter.html`을 여세요.

```html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cove logo source selection</title>
<style>
  body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
  .slot { width: 200px; border: 1px dashed #b9c8be; margin-bottom: 24px; }
  .narrow { width: 120px; }
  .slot img { display: block; width: 100%; height: 80px; object-fit: contain; }
  pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Cove: choose the composition</h1>
<p>Art-directed image, constant 200-pixel container:</p>
<div class="slot">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="directed" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<p>Ordinary scaling, same container:</p>
<div class="slot">
  <img id="scaled" src="detailed.svg" width="300" height="96" alt="Cove">
</div>
<p>Art direction in a narrower 120-pixel container:</p>
<div class="slot narrow">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="narrow" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<pre id="report"></pre>
<script>
  const images = [...document.images];
  function report() {
    document.getElementById('report').textContent = JSON.stringify({
      viewportWidth: innerWidth,
      mediaMatches: matchMedia('(max-width: 599px)').matches,
      images: images.map(image => ({ id: image.id, currentSrc: image.currentSrc,
        complete: image.complete, naturalWidth: image.naturalWidth,
        naturalHeight: image.naturalHeight,
        containerWidth: image.parentElement.closest('.slot').clientWidth,
        elementWidth: image.getBoundingClientRect().width,
        elementHeight: image.getBoundingClientRect().height, alt: image.alt })),
    }, null, 2);
  }
  images.forEach(image => image.addEventListener('load', report));
  addEventListener('resize', report);
  report();
</script>
</html>
```

미디어 조건은 `(max-width: 599px)`입니다. CSS의 [width 미디어 기능](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width)은 뷰포트 너비를 평가합니다. 600 픽셀에서는 조건이 거짓이므로 시작 예제는 상세한 `img` 원본을 선택합니다. 이 숫자는 해당 레이아웃을 위한 예제 분기점이며 브랜드 디자인의 일반 규칙은 아닙니다.

CSS는 이미지 높이를 80 픽셀로 확보하고 [`object-fit: contain`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit)으로 선택한 이미지를 요소 상자 안에 맞춥니다. 두 구성을 같은 종횡비로 늘이지 않으면서 전체를 표시할 수 있습니다. 맞춤 스타일은 선택한 원본을 표시하는 `img`에 적용하세요.

`alt="Cove"`는 두 경우 모두 가상의 브랜드를 식별합니다. [HTML img 참고 문서](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img)의 안내에 따라 자신의 이미지에도 적절한 대체 텍스트를 제공하세요. 눈에 보이는 글자가 사라져도 간결한 심벌의 접근 가능한 이름은 유지되어야 합니다.

## 세 가지 너비에서 브라우저가 선택한 원본

동일한 시작 예제를 Chrome에서 문서 뷰포트 너비 480, 600, 960 픽셀로 열었습니다. 각 너비에서 이미지 세 개가 모두 로드되었습니다. 주 컨테이너는 너비 200 픽셀을 유지했고, 좁은 비교 컨테이너는 120 픽셀을 유지했습니다.

| 문서 뷰포트 | 구성 선택 이미지, 200 픽셀 컨테이너 | 일반 크기 조절, 200 픽셀 컨테이너 | 구성 선택 이미지, 120 픽셀 컨테이너 |
| ------ | ---------------------- | --------------------- | ---------------------- |
| 480 픽셀 | compact.svg            | detailed.svg          | compact.svg            |
| 600 픽셀 | detailed.svg           | detailed.svg          | detailed.svg           |
| 960 픽셀 | detailed.svg           | detailed.svg          | detailed.svg           |

로드된 이미지의 크기와 함께 [`HTMLImageElement.currentSrc`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/currentSrc)로 선택된 URL을 확인했습니다. 선택된 URL만으로 로드 성공 여부를 판단할 수는 없습니다. `complete`와 이미지 고유 크기도 검사하세요. 간결한 원본은 96×96, 상세한 원본은 300×96으로 보고되었습니다.

주 이미지 요소는 세 너비에서 모두 200×80을 유지했습니다. 좁은 비교 요소는 120×80을 유지했습니다. 480 픽셀에서는 두 프레임의 가운데에 간결한 심벌이 표시되었고, 일반 크기 조절 비교 예제에는 전체 로고 조합이 그대로 표시되었습니다. 600 및 960 픽셀에서는 컨테이너를 120 픽셀로 좁히면 상세한 로고 조합의 크기가 작아졌습니다. 간결한 파일을 선택한 것은 아닙니다.

사이드바나 재사용 가능한 컴포넌트에서는 이 구분이 중요합니다. 이 HTML 미디어 조건은 컨테이너의 실측 너비가 아니라 뷰포트에 반응합니다. 컴포넌트에 확보된 너비에 따라 로고를 선택해야 한다면, 이 분기점이 컴포넌트 크기를 관찰한다고 가정하지 말고 별도의 방식으로 설계하고 테스트하세요.

이 결과는 직접 작성한 파일, 브라우저 하나, 명시한 뷰포트 너비 세 가지를 확인한 것입니다. 모든 브라우저, 삽입 방식, 내보내기 대상을 검증하지는 않습니다. 시작 예제는 외부 SVG 내부의 미디어 규칙도 테스트하지 않습니다.

## 프레임과 실제 그림을 따로 확인하기

요소 상자와 실제로 그려지는 로고의 경계는 다릅니다. 브라우저에서 상세 원본의 기하 경계는 300×96 viewBox 안에서 x8, y8, 너비274, 높이80이었습니다. 간결한 원본의 경계는 96×96 viewBox 안에서 x8, y8, 너비80, 높이80이었습니다. 이 여백도 원본을 프레임에 맞추는 계산에 포함됩니다.

선택된 로고가 너무 작게 보인다면 요소 크기를 늘리기 전에 원본의 빈 여백을 살펴보세요. 늘어나 보인다면 이미지 상자와 맞춤 규칙을 확인하세요. [preserveAspectRatio 가이드](https://perfectvector.com/ko/blog/svg-preserveaspectratio)는 관련된 SVG 뷰포트 계산을 설명합니다. 그 매핑을 바꾸는 것만으로 두 번째 로고 조합이 만들어지지는 않습니다.

이 시작 예제는 `img`로 외부 SVG 이미지를 사용합니다. 다른 삽입 방식을 골라야 한다면 [인라인 SVG와 img 비교 가이드](https://perfectvector.com/ko/blog/inline-svg-vs-img)를 참고하세요. 다운로드하거나 인쇄하는 SVG 파일에는 이 HTML 원본 선택 래퍼가 포함되지 않습니다. 받는 사람이 실제로 필요한 구성을 전달하고 편집 가능한 버전들을 보존하세요.

## 래스터 로고로 여러 버전 준비하기

브랜드 그림이 PNG나 JPG로만 있고 편집 가능한 기하 형태가 필요하다면 [PerfectVector로 SVG 로고를 준비](https://perfectvector.com/ko/vectorize-logo)한 뒤 실루엣과 내부 빈 공간을 검사하고 깨끗한 원본을 보존하세요. 그다음 상세한 구성과 간결한 구성을 만들고 페이지에서 선택되는 방식을 테스트하세요. 벡터 변환은 그림을 준비합니다. 어떤 글자를 뺄지 결정하거나 분기점을 정하지는 않습니다. 이미 깨끗한 SVG 그림이 있다면 바로 구성 작업을 시작할 수 있습니다. 변환이 도움이 되는 경우는 [벡터 변환 가이드](https://perfectvector.com/ko/blog/what-is-image-vectorization)에서 설명합니다.

## 자주 묻는 질문

**SVG는 작은 화면에서 로고를 자동으로 단순화하나요?**
이 예제는 별도로 작성한 SVG 파일 두 개 중 하나를 선택합니다. 한 파일의 크기를 조절하면 원래 구성이 유지됩니다. 단순화하려면 별도의 디자인 결정이 필요합니다.

**좁은 컨테이너에도 상세한 로고가 표시되는 이유는 무엇인가요?**
picture 원본의 너비 조건은 문서 뷰포트를 검사합니다. 테스트한 600 및 960 픽셀 뷰포트에서는 120 픽셀 컨테이너에도 상세한 원본이 유지되었습니다.

**어떤 파일이 사용되었는지 어떻게 확인하나요?**
이미지의 currentSrc, 로드 상태, 고유 크기를 검사하세요. 시작 예제는 요소 크기와 컨테이너 크기와 함께 이 정보를 출력합니다.

**SVG를 다운로드하면 반응형 전환도 포함되나요?**
원본 선택 규칙은 HTML 래퍼에 있습니다. 받는 사람의 실제 용도에 필요한 상세 SVG 또는 간결한 SVG를 보존하고 전달하세요.

## 출처

1. [HTML picture 요소](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture): 대체 원본, 미디어 조건, 대체 이미지 동작을 설명합니다.
2. [CSS width 미디어 기능](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width): 시작 예제의 문서 뷰포트 조건을 설명합니다.
3. [이미지 currentSrc 속성](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/currentSrc): 선택된 원본 URL을 검사하는 방법을 설명합니다.
4. [CSS object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit): 선택한 각 구성을 이미지 프레임 안에 맞추는 방법을 설명합니다.
5. [HTML img 요소](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img): 이미지 표시와 대체 텍스트를 설명합니다.

***

자신의 PNG나 JPG 로고라면 [편집 가능한 SVG 원본을 준비](https://perfectvector.com/ko/vectorize-logo)하고 윤곽선과 빈 공간을 검사한 뒤 승인된 로고 조합들과 함께 보존하세요. 그다음 페이지에서 사용할 뷰포트 너비마다 선택된 원본과 보이는 구성을 확인하세요.

## Explore

- [Read the HTML article](https://perfectvector.com/ko/blog/responsive-svg-logo-lockup)
- [로고 보호 공간: 기준 단위로 여백 계산하고 보존하기](https://perfectvector.com/ko/blog/logo-clear-space-calculation.md)
- [로고를 벡터화하는 세 가지 방법과 SVG 품질 확인 기준](https://perfectvector.com/ko/blog/how-to-vectorize-a-logo.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)