1. SVG 요소 색상 정리
미리캔버스에 SVG 요소를 등록할 경우, 사용자가 색상을 커스터마이징 할 수 있도록 설정해 주어야
합니다! 이와 같은 작업을 색상 정리라고 칭합니다.
1) SVG 요소 내에 있는 비슷한 계열의 색상은 모두 한 색상으로 최대한 통일해주세요.
2) 명암이 들어간 부분은 블랙(#000000), 밝기가 들어간 부분은 화이트(#FFFFFF)로 처리한 후,
투명도(Opacity)로 세기를 조절해주세요.
2. SVG 요소 색상 잠금
SVG 요소를 제작할 때, 어떤 색을 잠금 설정할지 계획한 후 유의하여 작업해야 합니다!
1) SVG 요소는 '제출 예정' > '색상 잠금 설정'에서 필요한 컬러만 변경할 수 있도록 설정할 수 있습니다.
2) 큰 면적을 위주로 색상 변경을 할 수 있도록 설정합니다.
- 변경할 수 있는 색상은 최대한 5개 미만으로 맞춰주세요.
- 명암으로 사용한 블랙과 화이트는 꼭 잠금처리 해주세요.
3. 색상 관련 유의사항
1) 인물 (또는 인간 캐릭터) SVG 요소는 피부 색상을 변경할 수 있도록 제작해야 합니다.
2) 패스가 지나치게 많거나, 복잡한 형태 또는 그라데이션이 많이 사용된 요소는 용량 등의 문제가 생길 수
있으므로 PNG 요소로 등록해줍니다.
QnA
1) 명암 블랙(화이트) 처리는 왜 하는 건가요?
SVG요소의 메인 색을 변경해도 명암이 블랙처리 되어있지 않으면, 사용자가 명암의 색상까지 변경하는
경우가 생깁니다. 그 과정에서 생기는 불편을 해소하기 위해 명암을 블랙 또는 화이트로 변경해줍니다.
예시) 명암을 명암을 블랙(또는 화이트)로 처리하게 되면 메인 색상만 변경해도 크게 어색해지지
않습니다.
2) 색상을 정리하기엔 너무 많은 색이 사용되었어요
너무 많은 색이 사용된 SVG 요소의 경우 최대한 어색하지 않게 색상 정리를 해주세요.
그 후, 큰 면적이나 사용자들이 색상을 변경하여 사용하기 좋은 부분(옷, 머리, 피부색)을 제외하고
나머지는 잠금 처리해주세요.
1. 어색하지 않도록 비슷한 톤의 색끼리 묶어서 색상을 정리합니다.
2. 색상 정리 후, 색상이 똑같아 겹치는 부분은 명암을 넣어 경계를 구분해줍니다. 이렇게 하면
메인 색상을 변경해도 색상이 함께 바뀝니다.
3. 큰 면적 또는 색 변경의 사용성이 높은 색상을 변경할 수 있도록 설정합니다. (변경할 수 있는 색상은
최대한 5개 미만으로 맞춰주세요.)