한 도구가 들어가는 자리들
처음에는 색 코드 변환에 한 번 쓰는 도구. 한 번 익히고 나면 의외로 들어가는 자리가 많다는 걸 알게 된다. 자주 쓰게 되는 7가지 활용처.
1. 디자인 시안 색 정리
피그마·일러스트 시안에서 추출한 색을 HEX·RGB·HSL·CMYK 네 표기로 정리. 매체별 적용에 그대로 활용.
2. CSS 코드 변환
디자인 시안의 HEX를 CSS RGBA로 변환. 알파값 추가도 같은 자리에서 처리.
3. 다크모드 변형
라이트모드 색을 HSL로 변환 후 명도 반전. 자연스러운 다크모드 색 생성.
4. 인쇄 시안 변환
웹 시안의 HEX를 CMYK로 변환. 인쇄소 전달용 시안 작성. 색상 변환기로 한 번에 두 표기 정리.
5. 색 대비비 점검
RGB 기반 휘도 계산. 글자색·배경색 대비비가 4.5:1 이상인지 확인. 접근성 점검에 활용.
6. 색감 변형 시리즈
한 색에서 명도 단계별 변형(100·200·...900) 시리즈 생성. 디자인 시스템 컬러 토큰에 활용.
7. 브랜드 컬러 가이드
브랜드 메인·보조 컬러를 매체별 표기로 정리. 가이드 문서로 공유. 일관성 확보.
한 도구로 일곱 자리
같은 도구가 일곱 자리에 들어간다. 디자인·코드·인쇄·접근성까지. 컬러 변환기를 즐겨찾기에 두면 매번 검색 없이 한 도구로 처리.
활용 우선순위
- 본인 자주 쓰는 자리 우선 익히기
- 한 번 흐름 자리 잡으면 다른 자리 따라옴
- 매 작업마다 같은 도구로 점검
마무리
도구 자체는 단순하지만 들어가는 자리는 다양하다. 한 번 익혀 두면 일곱 자리에서 활용 가능.