> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # 과학 그림: 색 없이도 의미가 전달되게 만들기 > 레이블, 도형, 선 스타일을 사용해 과학 도해를 회색조로 점검하세요. 완전한 SVG 예제로 데이터를 바꾸지 않고 조건을 구분하는 방법을 알아봅니다. Source: https://perfectvector.com/ko/blog/scientific-figure-color-redundancy Language: ko Author: Irene Kim Published: 2026-10-15T08:00:00+09:00 과학 도해가 색 없이도 제 역할을 하려면 중요한 각 조건에 색조 이외의 시각적 구분 수단을 부여해야 합니다. 직접 레이블을 붙이고, 용도에 맞는 기호나 선 스타일로 차이를 준 다음, 실제 표시 크기에서 회색조 사본을 살펴보세요. 팔레트를 바꾸면 도움이 될 수 있지만, 레이블이 없는 조건에 이름을 붙여 주지는 못합니다. 이 글은 두 조건, 집단 또는 경로를 보여 주는 모식도처럼 범주를 설명하는 도해를 다룹니다. 실험 데이터가 들어 있지 않은 두 행짜리 자체 제작 SVG(Scalable Vector Graphics) 파일을 사용합니다. 연속형 히트맵, 현미경 이미지, 측정값 그래프는 각각 데이터 특성에 맞게 처리해야 합니다. 더 또렷하게 보이게 하려고 그 안의 표시를 새로운 도형으로 따라 그리지 마세요. ## 색이 독자에게 무엇을 알려 주는지 정리하기 편집 가능한 원본, 그림 범례, 가장 작게 재현될 크기부터 확인하세요. 독자가 파악해야 하는 차이를 나열합니다. 기호가 어느 조건에 속하는지, 경로가 어디로 이어지는지, 레이블이 어느 패널을 설명하는지 등이 여기에 해당합니다. 그다음 머릿속에서 색을 지워 보세요. 안내가 “주황색 선을 따라가세요” 또는 “파란 원들을 비교하세요”가 된다면, 독자가 그림 안에서 찾을 수 있는 이름으로 바꿔야 합니다. 실제 투고물에서는 의미 있는 조건 이름을 사용하세요. 아래의 “조건 A”와 “조건 B”는 배치 방법을 보여 주기 위한 임시 이름입니다. W3C의 [색 사용 지침](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html)은 색이 정보를 전달할 때 텍스트나 도형 같은 눈에 보이는 단서를 함께 제공하도록 요구합니다. 이는 웹 접근성 지침이며 과학 학술지의 심사 기준은 아닙니다. 하지만 다른 단서를 통해 차이를 유지한다는 같은 디자인 원칙을 여기에도 활용할 수 있습니다. ## 각 조건에 두 번째 구분 수단 부여하기 대응 관계를 명확하게 만드는 데 필요한 최소한의 단서를 사용하세요. 단순한 모식도라면 각 경로 옆의 짧은 레이블만으로 충분할 수 있습니다. 경로가 길다면 반복되는 마커나 서로 다른 연결선 스타일이 독자가 범례로 돌아가지 않고도 경로를 따라가는 데 도움이 됩니다. | 조건 | 이 예제의 색 | 기호 | 연결선 | 직접 레이블 | | -- | ------- | --- | --- | ------ | | A | 파란색 | 원 | 실선 | 조건 A | | B | 주황색 | 삼각형 | 파선 | 조건 B | 여러 패널에 걸쳐 이 대응 관계를 일관되게 유지하세요. 해당 분야에서 삼각형이 이미 특정 구성 요소를 뜻한다면 그 의미를 유지하고 다른 단서를 선택해야 합니다. 마찬가지로 가설적 연결을 뜻하는 파선을 다른 의미로 바꾸어 쓰지 마세요. 중복 부호화란 하나의 구분 정보를 여러 단서로 표현한다는 뜻이지, 익숙한 기호에 서로 충돌하는 의미를 부여한다는 뜻이 아닙니다. 목적에 맞는 팔레트를 선택하고, 배경 위에서도 레이블이 잘 읽히게 하세요. [Nature의 그림 제작 규격](https://research-figure-guide.nature.com/figures/preparing-figures-our-specifications/)은 접근성을 고려한 팔레트를 요구하며, 색이 있는 범례 상자에 검은색 텍스트를 짝지은 예를 보여 줍니다. 또한 패턴과 장식적 요소의 남용을 피하라고 안내합니다. 따라서 모든 객체를 해칭으로 채우기보다 간결한 레이블과 목적이 분명한 기호를 사용하는 편이 적절합니다. ![색으로만 구분한 두 모식도 조건과 레이블, 도형, 연결선 스타일로 구분한 조건을 비교하는 삽화](https://perfectvector.com/blog/scientific-figure-color-redundancy/condition-labels-and-shapes.webp) *삽화: 직접 레이블과 서로 다른 도형 또는 선 스타일은 색과 함께 조건을 구분하는 단서가 됩니다. 아래의 SVG 렌더링 점검에는 별도로 제작한 예제를 사용했습니다.* ## 두 조건을 담은 SVG 사용해 보기 다음의 완전한 예제를 `conditions.svg`로 저장하세요. 브라우저나 벡터 편집기에서 엽니다. 흰색 배경과 레이블이 있는 두 행으로 구성되며, 외부 이미지나 가져온 글꼴은 사용하지 않습니다. 서로 다른 기호는 의도적으로 일반적인 도형을 사용했으며 생물학적 기전을 나타내지 않습니다. ```xml Condition A Condition B ``` 원본에서는 레이블을 텍스트로 유지합니다. `stroke-dasharray="12 8"`은 아래쪽 연결선에 대시와 공백이 반복되는 패턴을 적용합니다. [SVG의 대시 선 규격](https://www.w3.org/TR/SVG2/painting.html#StrokeDashing)은 이러한 길이가 경로를 따라 어떻게 배치되는지 정의합니다. 레이블과 삼각형 모두 주황색을 알아보지 못해도 식별할 수 있습니다. 1. 600 × 240 버전을 여세요. 두 레이블이 모두 있고, 원은 A에, 삼각형은 B에 속하는지 확인합니다. 2. 컬러 사본을 내보낸 다음 그 결과의 회색조 사본을 만드세요. 컬러 원본은 유지합니다. 색에 대한 설명을 참조하지 않고 두 조건을 이름으로 식별하고 연결선을 따라갈 수 있는지 확인합니다. 3. `viewBox`는 그대로 두고 `width="300"`과 `height="120"`으로 작은 원본 사본을 만드세요. 두 가지 내보내기를 반복합니다. 이는 한 가지 축소 비율을 점검하는 것이며 보편적인 최소 크기를 정하는 것은 아닙니다. 4. 원고나 슬라이드에 실제로 넣을 파일을 살펴보세요. 내보내기와 이후의 크기 조절을 거친 뒤에도 레이블, 기호, 연결선 스타일이 유지되는지 확인합니다. 의도적으로 구분 단서를 줄인 대조 예제를 만들려면 텍스트 그룹을 제거하고, 삼각형을 같은 위치의 원으로 바꾼 다음 `stroke-dasharray`를 제거하세요. 색이 있는 두 행은 그대로 남습니다. 중요한 것은 두 회색 톤이 우연히 똑같아 보이는지가 아니라 조건 이름을 계속 알 수 있는지입니다. 두 버전을 librsvg로 600 × 240과 300 × 120픽셀로 렌더링한 뒤, RGB 가중치 `0.299R + 0.587G + 0.114B`를 사용해 각 출력을 회색조로 변환했습니다. 중복 단서를 넣은 네 가지 결과 모두에서 레이블, 원과 삼각형의 차이, 실선과 파선 연결선이 잘리지 않고 보였습니다. 대조 예제의 파란색과 주황색은 0\~255 척도에서 각각 87과 119라는 서로 다른 회색값이 되었습니다. 따라서 대조 예제를 구분 불가능하다고 설명하지는 않습니다. 개선된 점은 색조에 의존하지 않고 조건을 명시적으로 식별할 수 있다는 것입니다. 이는 자체 제작한 SVG를 디지털 환경에서 점검한 결과입니다. 실제 인쇄물 시험이나 독자 대상 연구는 진행하지 않았습니다. 회색조 변환이 모든 유형의 색각 이상을 재현하는 것도 아닙니다. 대상 독자와 학술지에 맞는 점검과 함께 사용하는 하나의 확인 방식으로 생각하세요. ## 최종 크기에서 구분되지 않는 단서 수정하기 레이블이 너무 작아지면 의미를 해치지 않게 줄이거나 큰 글자를 넣을 공간을 확보하세요. 대시가 합쳐져 실선처럼 보인다면 대시 간격을 조정하거나 다른 적절한 단서를 사용합니다. 마커의 모양을 알아보기 어렵다면 단순화하거나 크기를 키우세요. 한 곳을 고칠 때마다 전체 그림을 다시 확인해 다른 위치에 겹침이 생기지 않게 합니다. 실물 크기 계산은 별도 글인 [과학 그림의 글꼴 크기와 선 두께](https://perfectvector.com/ko/blog/scientific-figure-font-size-line-width)를 참고하세요. 이 글의 300픽셀 예제는 화면 렌더링 점검용이며 학술지 단 너비에 대한 권장값이 아닙니다. 범례와 그림의 내용을 일치시키세요. “주황색 선” 대신 “조건 B, 파선 연결선”처럼 조건 이름과 눈에 보이는 단서를 사용합니다. 온라인 그림에는 핵심 비교 내용을 설명하는 적절한 대체 텍스트나 캡션도 제공하세요. 눈에 보이는 레이블만으로 그림을 볼 수 없는 사람의 접근성이 확보되지는 않습니다. ## 표현 방식을 바꾸면서 과학적 내용 유지하기 측정값 그래프는 그래프를 만든 원본 도구에서 수정하고 기초 값을 유지한 채 다시 내보내세요. 현미경 이미지라면 원본 이미지를 보관하고 학술지의 이미지 처리 규정을 따라야 합니다. [Nature의 이미지 무결성 정책](https://www.nature.com/nature/editorial-policies/image-integrity)은 최종 이미지가 원본 데이터를 정확하게 나타내도록 요구하며, 처리 내역 공개 요건도 설명합니다. 보기 좋게 정돈될 때까지 이미지를 다시 그리는 작업으로 이 절차를 대신할 수는 없습니다. 별도의 래스터 모식도만 남아 있다면 [PerfectVector의 과학 도해 SVG 변환 과정](https://perfectvector.com/ko/scientific-diagram-to-svg)을 통해 편집 가능한 도형을 복원할 수 있습니다. 미리보기를 확인한 다음 결과를 잠금 해제해 SVG를 편집하고 내보내세요. 복원한 모든 연결선과 기호를 원본과 비교하고, 필요하면 레이블을 텍스트로 다시 만듭니다. 복원한 도형은 과학적 의미가 유지될 때만 유용합니다. 이미 편집 가능한 그림이 있다면 직접 수정하세요. [SVG 색상 변경](https://perfectvector.com/ko/blog/how-to-change-svg-color) 글은 이보다 범위가 좁은 색상 편집을 다룹니다. 각 조건의 이름이 명확하고, 배치된 그림에서 색 이외의 단서를 읽을 수 있으며, 범례가 그림과 일치하면 작업을 마칩니다. 별도 모식도의 벡터 원본이 없어 작업이 막혔다면 [PerfectVector로 도형을 복원](https://perfectvector.com/ko/scientific-diagram-to-svg)한 다음 내보낸 결과에서 이 구분 점검을 반복하세요. ## 자주 묻는 질문 **과학 도해에는 색각 이상을 고려한 팔레트만 사용하면 충분한가요?** 적절한 팔레트는 도움이 되지만, 직접 레이블이나 다른 적절한 단서를 통해서도 조건을 식별할 수 있어야 합니다. 범례를 포함한 전체 그림을 실제 사용 크기에서 확인하세요. **회색조 점검을 통과하면 그림의 접근성이 입증되나요?** 아닙니다. 색조를 제거한 한 가지 렌더링을 확인하는 것입니다. 모든 색각 차이, 저시력, 화면 읽기 프로그램을 통한 접근, 특정 학술지의 요건을 모두 점검하지는 못합니다. **모든 과학 기호를 원과 삼각형으로 바꿔야 하나요?** 아닙니다. 예제는 일반적인 임시 도형을 사용합니다. 이미 과학적 의미가 있는 기호와 선 스타일은 유지하고, 레이블이나 그 의미와 양립할 수 있는 다른 단서를 추가하세요. ## 출처 1. [W3C — 색 사용의 이해](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html) — 색을 대신하는 눈에 보이는 단서와 이 접근성 기준의 한계를 설명합니다. 2. [Nature — 그림 준비: 제작 규격](https://research-figure-guide.nature.com/figures/preparing-figures-our-specifications/) — 본문에서 인용한 Nature 그림의 팔레트, 범례 텍스트, 시각적 복잡성에 관한 지침을 제공합니다. 3. [W3C — SVG 대시 선](https://www.w3.org/TR/SVG2/painting.html#StrokeDashing) — 완전한 원본 예제에서 사용한 대시와 공백 패턴을 정의합니다. 4. [Nature — 이미지 무결성과 기준](https://www.nature.com/nature/editorial-policies/image-integrity) — 과학 이미지 지침의 근거가 되는 원본 데이터와 처리의 경계를 정합니다. ## Explore - [Read the HTML article](https://perfectvector.com/ko/blog/scientific-figure-color-redundancy) - [디자인을 유지하면서 단색 로고 만드는 방법](https://perfectvector.com/ko/blog/one-color-logo-negative-space.md) - [Shopify 사용자 지정 SVG 아이콘: 깔끔한 브랜드 표식 준비하기](https://perfectvector.com/ko/blog/shopify-custom-svg-icon.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)