다크 모드 SVG 로고 색상 제어: 사용자 설정과 페이지 테마 선택
SVG 로고가 사용자 환경설정을 따를지 페이지 테마를 따를지 정하세요. 브라우저 실험에서 인라인 CSS, 적응형 외부 파일, 고정 도안을 비교합니다.
목차
다크 모드 SVG 로고에는 테마 정보의 출처를 명확히 정해야 합니다. 페이지 CSS는 인라인 SVG의 경로를 스타일링할 수 있습니다. 이미지 요소로 불러온 외부 SVG에는 자체 스타일 문맥이 있지만 내부 prefers-color-scheme 쿼리는 삽입 요소의 색 구성에 반응할 수 있습니다. 수동 테마 클래스와 사용자의 밝게·어둡게 환경설정은 별도의 입력입니다. 무엇이 도안을 제어해야 하는지 정하세요.
승인된 밝은 배경용·어두운 배경용 버전이 있다면 유지하세요. 모든 색을 반전하면 강조색이 바뀌거나 의도한 외곽선이 사라지거나 승인되지 않은 로고가 될 수 있습니다. 테마 지원은 도안 자체가 올바른 다음에 결정할 색칠과 통합의 문제입니다.
사용자 환경설정과 페이지 테마를 구분하세요
CSS prefers-color-scheme 미디어 기능은 브라우저나 운영체제가 전달하는 밝게·어둡게 환경설정을 감지합니다. MDN은 이러한 환경설정 입력을 설명합니다. 웹사이트 자체의 data-theme="dark" 속성은 CSS나 코드로 효과를 주기 전까지 단순한 앱 상태입니다.
이 차이 때문에 흔히 불일치가 생깁니다. 브라우저 환경설정은 밝게인 채 방문자가 한 웹사이트 안에서 어두운 화면을 선택할 수 있습니다. 환경설정만 따르는 로고는 어두운 페이지에서도 밝은 배경용 색을 유지할 수 있습니다.
color-scheme 속성은 또 다른 제어입니다. 요소가 어떤 색 구성을 지원하는지 브라우저에 알리지만 작성자가 지정한 모든 채우기를 자동으로 다시 디자인하지는 않습니다. MDN의 속성 참조는 브라우저가 관리하는 렌더링과 작성자가 여전히 제공해야 하는 테마 스타일을 구분합니다.
| 의도한 제어 주체 | 통합 방식 | 확인할 사항 |
|---|---|---|
| 앱의 수동 테마 | 페이지 테마 선택자가 인라인 경로를 스타일링 | 페이지 테마가 바뀔 때 로고의 두 색이 모두 바뀌는지 |
| 삽입 표면의 색 구성 | 자체 미디어 규칙이 있는 외부 SVG와 적절한 호스트 색 구성 | 같은 파일이 각 호스트에서 의도한 색을 선택하는지 |
| 제공된 고정 브랜드 버전 | 앱에서 올바른 승인 자산 선택 | 선택한 파일이 표면에 맞고 이름도 올바른지 |
독립적인 테마 메커니즘 세 개를 추가하고 일치하기를 기대하지 마세요. 보이는 색을 디버깅하기 전에 의도한 제어 주체를 명시하세요.
수동 테마의 인라인 로고에는 페이지 선택자를 사용하세요
인라인 SVG는 페이지 문서에 속하므로 대상 선택자가 경로에 접근할 수 있습니다. 인라인 SVG와 이미지 비교는 이 접근 경계를 더 자세히 설명합니다.
주 도형과 별도의 원형 강조점이라는 두 색 역할을 가진 F자 마크를 직접 만들었습니다. 이 예시 색은 직접 선택한 것이며 브랜드 표준이 아닙니다.
.ink { fill: #183c35; }
.accent { fill: #c58868; }
[data-theme="dark"] .ink { fill: #f5f0e7; }
[data-theme="dark"] .accent { fill: #ffc34d; }사이트의 모든 경로가 아니라 의도한 인라인 도안에 이 규칙을 적용하세요. 로고에는 여러 의도적인 색, 마스크, 그레이디언트가 있을 수 있습니다. SVG 색상 변경 안내는 스타일을 바꾸기 전에 실제로 도형을 칠하는 것이 무엇인지 검사하는 방법을 다룹니다.
도형이 요소의 글자색을 공유해야 한다면 currentColor가 유용합니다. 다색 로고의 필수조건은 아닙니다. 다른 색이 필요한 디자인이라면 강조색을 분리해 유지하고 사용할 각 표면에서 전체 마크를 확인하세요.
외부 SVG가 자체 미디어 규칙을 갖게 하세요
외부 이미지는 별도의 스타일 문맥입니다. HTML 이미지 요소에 color: rebeccapurple을 설정해도 내부의 임의 경로까지 접근해 색을 바꾸지 못합니다. SVG 파일 내부의 currentColor조차 호스트 페이지의 글자색을 자동으로 받지는 않습니다.
대신 파일 자체에 테마 규칙을 넣을 수 있습니다. 직접 실시한 실험에 사용한 작은 적응형 SVG 전체는 다음과 같습니다.
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="105"
viewBox="0 0 140 105">
<style>
.ink { fill: #183c35; }
.accent { fill: #c58868; }
@media (prefers-color-scheme: dark) {
.ink { fill: #f5f0e7; }
.accent { fill: #ffc34d; }
}
</style>
<path class="ink" d="M15 15H85V30H33V48H70V63H33V90H15Z"/>
<circle class="accent" cx="102" cy="73" r="17"/>
</svg>삽입된 SVG 이미지의 환경설정 쿼리는 삽입 요소에 사용되는 색 구성을 반영할 수 있습니다. CSS Color Adjustment 명세가 이 관계를 설명합니다. 이는 색 구성 신호이며 호스트 페이지의 일반 CSS 선택자가 파일 안으로 넘어가는 것은 아닙니다.
실험 페이지의 한 호스트에는 color-scheme: light, 다른 호스트에는 color-scheme: dark를 명시했습니다. 둘 다 같은 적응형 파일을 불러옵니다. 배경색과 글자색도 의도적으로 작성했습니다. 속성 하나를 설정하는 것만으로 완전한 스타일이 제공되지는 않습니다.
앱이 테마를 관리한다면 이 접근법에서 호스트 색 구성도 그 선택과 맞추세요. 배경은 어두운데 호스트가 여전히 밝은 구성을 선언하면 의도와 다른 신호를 보낼 수 있습니다.
실제 브라우저에서 세 경로 비교하기
직접 만든 HTML 실험 페이지 상단에는 색 구성을 고정한 호스트 두 개가 있습니다. 그 아래 버튼은 인라인 마크와 고정 색 외부 이미지가 있는 페이지의 수동 테마를 바꿉니다. 외부 대조 파일에는 같은 형상이 있지만 어두운 테마용 미디어 규칙은 없습니다.
브라우저는 사용자 환경설정을 밝게로 보고했습니다. 수동 테마 버튼을 누르자 인라인 주 채우기는 rgb(24, 60, 53)에서 rgb(245, 240, 231)로, 강조색은 rgb(197, 136, 104)에서 rgb(255, 195, 77)로 바뀌었습니다. 환경설정 표시값은 밝게 그대로였습니다. 페이지 자체 선택자가 색을 바꾼 것입니다.
위쪽 두 이미지는 각 호스트의 색 구성이 선택한 밝은·어두운 색을 표시했습니다. 고정 외부 이미지는 주변 표면이 어두워지고 HTML 이미지 요소의 계산된 color가 보라색이어도 녹색과 구리색 도안을 유지했습니다.
계산된 스타일과 실제 렌더링 결과를 검사했습니다. 외부 이미지 세 개 모두 자연 치수 140 × 105로 불러와 280 × 210으로 표시되었습니다. 이 실험은 이 브라우저 세션에서 해당 파일의 동작을 확인합니다. 여러 브라우저, 이메일 클라이언트, PDF 내보내기, 운영체제 전환 시험은 아닙니다.
독립 파일뿐 아니라 최종 사용처도 시험하세요
원본 SVG를 따로 열어 형상을 확인한 뒤 실제 페이지 삽입 상태에서도 검사하세요. 두 테마 상태, 강조색, 투명 구멍, 바로 뒤 배경을 확인합니다. 반응형 로고는 좁은 크기에서 구도가 바뀔 수도 있습니다. 반응형 로고 조합 안내는 그 별도 결정을 다룹니다.
외부 SVG 이미지에는 제한이 있습니다. MDN은 스크립트가 비활성화되고 외부 리소스가 제한된다고 설명합니다. 여기서 보인 방식에는 필요한 스타일을 자산 내부에 두고 실제 전달 문맥에서 시험하세요. 브라우저 결과가 이메일 렌더러나 디자인 앱에서도 같은 동작을 보장하지는 않습니다.
적합한 로고가 PNG나 JPEG로만 있다면 PerfectVector의 로고 벡터화 작업 과정으로 SVG 후보의 경로를 재구성할 수 있습니다. 테마 버전을 준비하기 전에 실루엣, 글자, 작은 틈을 원본과 비교하세요. 벡터화는 의미에 맞는 색 역할을 지정하거나 앱의 테마 로직을 추가하거나 반전 브랜드 버전을 승인하지 않습니다. 실험 마크는 벡터 도형으로 직접 만들었습니다.
자주 묻는 질문
어두운 페이지가 외부 SVG 로고 색을 자동으로 바꾸나요? 아닙니다. 이미지 내부의 색 규칙이 여전히 중요합니다. 적응형 외부 SVG는 삽입 요소의 색 구성을 자체 환경설정 쿼리에서 사용할 수 있고 고정 색 SVG는 원래 색을 유지할 수 있습니다.
수동 다크 테마 클래스가 prefers-color-scheme을 바꾸나요? 그 자체로는 바꾸지 않습니다. 클래스나 데이터 속성은 앱 상태입니다. 실험에서는 페이지 수동 테마가 바뀌어도 브라우저 사용자 환경설정 쿼리는 밝게 그대로였습니다.
다크 모드용으로 SVG 로고의 모든 색을 반전해야 하나요? 승인된 버전이 있으면 사용하세요. 일괄 반전이 디자인을 유지한다고 가정하지 말고 실제 표면에서 주 색, 강조색, 외곽선, 구멍을 살펴보세요.
출처
- MDN: prefers-color-scheme — 사용자 환경설정 입력과 삽입 SVG의 동작입니다.
- MDN: color-scheme — 색 구성 지원과 작성자의 별도 스타일 책임입니다.
- CSS Color Adjustment: 사용되는 색 구성의 효과 — 삽입 콘텐츠에 제공되는 색 구성 신호입니다.
- MDN: 이미지로서의 SVG — 이미지 문맥의 스크립트와 리소스 제한입니다.
래스터 이미지로만 있는 로고에 편집 가능한 경로가 필요한가요? SVG 후보를 만들고 검사하고 승인된 원본을 보존한 뒤 색 역할을 정의하고 실제 테마 페이지를 시험하세요.
