#007BFF가 무슨 색인지 바로 떠오르시나요? 색상 코드를 외우는 건 비효율적입니다. 더 스마트하게 작업하는 방법들을 소개합니다.
CSS 변수 활용
--color-primary처럼 의미 있는 이름을 붙이면 코드만 봐도 어떤 색인지 알 수 있습니다. HEX 값은 한 곳에만 정의하고 변수로 참조하세요.
VS Code 확장 프로그램
Color Highlight 확장을 설치하면 코드의 색상 값 옆에 실제 색상이 표시됩니다. 마우스를 올리면 색상 피커도 나옵니다. 별도 도구 없이 에디터에서 바로 확인됩니다.
색상 변환기 북마크
색상 변환기를 북마크해두고 필요할 때 바로 접속하세요. HEX, RGB, HSL 간 변환이 필요할 때 유용합니다.
디자인 토큰
Figma나 Sketch에서 정의한 색상을 JSON으로 내보내고 CSS 변수로 변환하는 자동화 파이프라인을 구축하면 수동 작업이 줄어듭니다.
디자인 도구의 색상 추출
Figma, Sketch, Adobe XD 모두 스포이드 기능이 있습니다. 캔버스 밖의 화면에서도 색상을 추출할 수 있어 편리합니다. 추출한 값을 색상 변환기에 입력하면 다른 형식으로 변환할 수 있습니다.
색상 분석 활용
이미지의 주요 색상을 팔레트로 만들면 브랜드 이미지와 어울리는 색상 조합을 빠르게 찾을 수 있습니다. 사진 위에 텍스트를 올릴 때 어떤 색이 잘 보일지 결정하는 데도 유용합니다.
색상 변수 관리
프로젝트 초기에 colors.js나 theme.ts 같은 파일에 모든 색상을 상수로 정의해두면 IDE 자동완성의 도움을 받을 수 있고, 오타로 인한 버그를 방지할 수 있습니다. TypeScript라면 타입 안전성도 확보됩니다.