디자인을 유지하면서 단색 로고 만드는 방법
여러 색의 로고를 하나의 단색으로 바꾸면서 핵심 디테일을 유지하세요. 네거티브 스페이스를 활용하고 밝고 어두운 배경과 작은 크기에서 확인합니다.
목차
단색 로고를 만들려면 칠해진 그림에 하나의 단색을 적용하고, 필요한 곳에서는 핵심 내부 디테일을 빈 공간으로 유지하세요. 모든 채움을 검정으로 바꾸면 다른 색이어서 보이던 기호가 사라질 수 있습니다.
승인된 벡터 원본이나 기존 단색 버전에서 시작하세요. 사본으로 작업하면서 반드시 남겨야 할 디테일을 정한 다음, 여러 배경과 의도한 표시 크기에서 결과를 확인합니다. 아래 예제는 직접 만든 배지와 번개로 디자인 판단과 그 바탕의 SVG 도형 구조를 보여 줍니다.
승인된 로고 파일부터 확인하기
로고를 다시 그리기 전에 브랜드 소유자에게 단색 파일을 요청하세요. 브랜드에는 특정 배경용으로 각각 승인된 풀컬러, 단색, 반전 버전이 이미 있을 수 있습니다.
예를 들어 Penn State의 로고 사용 지침은 내부가 투명한 단색 버전을 설명하며, 다른 버전의 색만 바꿔 만들지 말라고 안내합니다. 특정 브랜드의 규칙이지만 제공된 단색 파일이 풀컬러 원본과 다를 수 있는 이유를 보여 줍니다.
디자인을 소유하고 있어 직접 버전을 만들어야 한다면 다음 자료를 함께 보관하세요.
- 손대지 않은 원본과 편집 가능한 작업 사본
- 내부 기호나 글자 속 공간처럼 로고를 식별하게 하는 디테일 목록
- 가장 작은 예상 표시 크기와 사용할 가능성이 있는 배경색
- 인쇄가 포함된다면 수신자가 허용하는 파일 형식과 잉크 요건
SVG는 벡터 그래픽 파일이지만 편집 가능한 도형 대신 픽셀 이미지가 들어 있을 수 있습니다. PNG나 JPG만 남아 있다면 로고 벡터화 가이드에서 원본 복원 단계를 확인하세요. 도형 복원과 단색 버전 디자인은 별도의 결정입니다.
어떤 경계를 남길지 결정하기
노란 번개가 있는 파란 원형 배지를 생각해 보세요. 색 경계 때문에 번개가 보입니다. 두 도형에 같은 차콜색 채우기를 적용하면 단순한 원만 남습니다. 경로는 여전히 있지만 같은 색이 내부 구분을 가립니다.
네거티브 스페이스는 칠하지 않아 그림 뒤의 표면이 드러나는 영역입니다. 번개를 빈 공간으로 만들면 배지에 칠한 색을 하나만 사용하면서도 무늬를 유지할 수 있습니다.
| 원본의 디테일 | 단색 버전에서의 결정 |
|---|---|
| 핵심 내부 기호 | 필요하면 빈 구멍으로 만들어 경계 유지 |
| 장식적인 색 변화 | 디자인이 계속 올바르게 읽힌다면 제거 |
| 글자 속 공간이나 요소 사이 틈 | 의도한 크기에서도 보일 만큼 분리 유지 |
채움 색만 바꾸면 되는 로고도 있습니다. 그 경우 SVG 색상 변경 가이드를 사용하세요. 여러 색을 유지하면서 비슷한 색을 합치는 작업이라면 먼저 팔레트 축소 과정을 따릅니다.
SVG 도형에 구멍 만들기
재현 가능한 예제를 위해 직접 만든 다음 그림을 original.svg로 저장하세요. 경로는 그리기 명령으로 설명한 도형입니다. 이 파일에는 배지용 닫힌 경로 하나와 번개용 닫힌 경로 하나가 있습니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<path fill="#0d6efd"
d="M128 24 A104 104 0 1 1 128 232 A104 104 0 1 1 128 24 Z"/>
<path fill="#f5d447"
d="M142 54 L88 142 H120 L110 202 L174 108 H138 Z"/>
</svg>- 원본을 브라우저에서 열어 두 색 디자인을 확인합니다.
- 두 번째 사본을 저장하고 두 fill 값을 모두
#111827로 바꾸세요. 다시 열면 번개가 배지에 섞여 보입니다. - 아래 수정 코드를
one-color.svg로 저장하세요. 같은 그리기 좌표를 유지하면서 두 윤곽을 하나의 경로 안에 넣습니다. - 수정 파일을 밝은 배경과 어두운 배경에서 연 다음 의도한 표시 크기에서 확인하세요.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<path fill="#111827" fill-rule="evenodd"
d="M128 24 A104 104 0 1 1 128 232 A104 104 0 1 1 128 24 Z
M142 54 L88 142 H120 L110 202 L174 108 H138 Z"/>
</svg>fill-rule은 경로 안에서 어느 영역을 칠할지 결정합니다. 이 중첩 예제에서 evenodd는 번개 영역을 칠하지 않고 남깁니다. SVG fill-rule 규격은 이 동작을 정의합니다. 파일에는 단색 채우기 하나만 있으며 흰색 전경 도형이나 배경 사각형은 없습니다.
벡터 편집기에서도 이런 구멍을 만들 수 있습니다. Adobe 복합 경로 문서는 투명 영역과 사용 가능한 채우기 규칙을 설명합니다. 여기 코드는 Illustrator 내보내기가 아니라 직접 작성한 SVG입니다. 편집기 문서의 컨트롤을 사용하고 저장 결과를 다시 열어 구멍을 확인하세요.
배경과 작은 버전 확인하기
수정한 로고를 흰색 배경과 대비되는 어두운 배경 또는 유색 배경 위에 놓으세요. 번개 부분으로 각 배경이 보여야 합니다. 흰색으로 칠한 번개라면 흰 배경에서 구멍처럼 보여도 유색 배경에서는 계속 흰색으로 남습니다.
이 자체 제작 예제에서는 저장 파일을 Sharp와 librsvg로 256 및 32픽셀에 렌더링했습니다. 두 크기 모두 수정한 번개 내부의 표본 알파는 0으로 완전히 투명했습니다. 단색 통합 대조군은 같은 점에서 불투명한 차콜색이었고, 별도의 흰색 덮개 대조군은 불투명한 흰색이었습니다. 직접 작성한 파일의 디지털 점검이며 인쇄나 가져오기 애플리케이션 시험은 아닙니다.
실제 32픽셀 보기에서 수정한 번개는 점검한 흰색과 슬레이트색 배경에서 구분 가능했습니다. 이는 이 예제에 유용한 확인이지만 다른 로고의 최소 크기를 정하지는 않습니다. 확대한 캔버스만 보고 판단하지 말고 실제 사용 크기에서 자신의 디자인을 미리 보세요.
버전을 확정하기 전에 다음을 확인하세요.
- 핵심 내부 무늬가 의도대로 읽히는지 확인합니다.
- 빈 영역이 흰색으로 칠한 부분이 아니라 배경을 드러내는지 확인합니다.
- 선택한 크기에서 작은 틈과 글자 속 공간이 보이는지 확인합니다.
- 저장 파일을 다시 열었을 때 의도한 도형과 단색 채우기 하나가 유지되는지 확인합니다.
이 예제의 흰색 반전 버전은 수정 경로의 fill을 #ffffff로 바꾸고 같은 빈 번개 영역을 유지하세요. 어두운 배경에서 확인합니다. 브랜드의 반전 파일은 다른 도형이 필요할 수 있으므로 제공된 버전이 있다면 그 파일을 따르세요.
디테일이 사라진 버전 수정하기
| 보이는 현상 | 바꿀 내용 |
|---|---|
| 색을 바꾸자 내부 기호가 사라짐 | 의도적인 빈 공간으로 경계를 복원하거나 승인된 단색 버전 사용 |
| 구멍이어야 할 곳이 유색 표면에서도 흰색으로 남음 | 칠해진 덮개를 제거하고 실제 빈 영역 만들기 |
| 선택한 크기에서 틈이 잘 보이지 않음 | 디자인 승인 규칙 안에서 넓히거나 단순화한 뒤 작은 크기 점검 반복 |
| 대상 앱으로 가져오자 구멍이 채워짐 | 가져온 경로와 채우기 규칙을 확인하고, 필요하면 그 환경에서 구멍을 다시 만든 뒤 저장 결과 재확인 |
모든 색 영역을 구멍으로 바꾸지는 마세요. 밝은 장식은 없어도 되지만 글자 속 공간은 의미를 전달할 수 있습니다. 디자인의 식별 특징을 기준으로 결정하고 원본과 비교합니다. 실루엣이나 내부 비율을 크게 바꿨다면 브랜드 마크로 사용하기 전에 새 버전의 승인을 받으세요.
전달 요건과 디자인 구분하기
풀컬러 원본, 어두운 단색 버전, 승인된 흰색 반전 버전을 각각 별도 파일로 저장하세요. 레이아웃에서 서로 교체할 용도라면 같은 캔버스와 위치를 유지합니다.
단색 SVG 채우기 하나가 인쇄소의 별색 잉크 이름을 지정하거나 제작용 인쇄판을 만드는 것은 아닙니다. 수신자에게 요청 색상명, 실물 크기, 허용 파일 형식, 배경에 대한 전제를 확인하세요. 로고 파일 형식 가이드는 편집 가능한 원본과 전달 형식을 고르는 방법을 다룹니다. 다른 로고 준비 주제는 로고와 그림 가이드에 모아 두었습니다.
원본이 PNG나 JPG뿐인 경우
남아 있는 래스터 로고가 적합하다면 PerfectVector 로고 벡터화 도구로 SVG 도형을 복원할 수 있습니다. 미리보기는 보호된 래스터 보기이며 실제 SVG 편집과 내보내기는 결과를 잠금 해제한 뒤 사용할 수 있습니다. 복원한 도형을 확인한 다음 단색 버전을 만드는 데 사용하세요.
픽셀을 트레이싱한다고 어떤 디테일을 빈 공간으로 만들지 결정되지는 않습니다. 원본의 가장자리가 흐리거나 구멍이 없거나 두 영역 사이 경계가 보이지 않는다면, 승인된 원본을 사용하거나 없는 디자인을 의도적으로 다시 그리세요. 도형을 바꿀 때마다 배경과 작은 크기 점검을 반복합니다.
자주 묻는 질문
단색 로고란 무엇인가요?
칠한 색을 하나의 단색으로 사용하는 로고입니다. 빈 영역은 배경을 드러냅니다. 어두운 버전과 흰색 반전 버전은 같은 마크에 두 색을 함께 칠한 것이 아니라 별도의 버전입니다.
모든 채움을 검정으로 바꾸면 충분한가요?
그럴 때도 있습니다. 핵심 기호와 주변을 나누는 유일한 경계가 색이라면 채움을 같게 만들 때 그 기호가 가려집니다. 빈 공간으로 경계를 유지하거나 승인된 단색 파일을 사용하세요.
이미 벡터인 로고도 트레이싱해야 하나요?
아닙니다. 기존의 편집 가능한 도형으로 작업하고 원본을 보존하세요. 트레이싱은 적절한 픽셀 이미지에서 원본을 복원하는 단계이며, 벡터 도형으로 단색 버전을 만드는 데 필수인 것은 아닙니다.
흰색 SVG 채우기는 자동으로 흰색 잉크를 지정하나요?
아닙니다. 흰색 채우기는 그림의 채색 색상을 설명하며, 빈 공간에는 칠하지 않습니다. 제작 과정에서 흰색 잉크를 어떻게 식별하고 제공할지는 인쇄소가 정합니다.
출처
- Penn State: 색상과 로고 — 투명한 내부 영역을 포함하는 승인된 단색 및 반전 브랜드 버전의 구체적인 예입니다.
- Adobe: 복합 경로 만들기 — Illustrator 복합 경로의 투명 영역, 채우기 규칙, 경로 방향을 설명합니다.
- W3C: SVG 2 fill-rule — 네이티브 SVG 예제의 복합 경로에서 어느 영역을 칠할지 정의합니다.
PNG나 JPG만 있나요? 로고를 편집 가능한 SVG로 변환하고 결과를 잠금 해제한 다음, 복원된 도형을 확인한 뒤 단색 버전을 만들고 점검하세요.
