리뉴얼이 정한 색을 흔드는 순간
웹사이트 리뉴얼은 색을 새로 정하는 자리. 기존 색을 그대로 쓸지, 톤을 바꿀지 결정해야 한다. 단계별 점검표로 한 번 정리해 본다.
STEP 1: 기존 색 추출
- 현재 사이트 메인 색 HEX 추출
- 보조·배경·텍스트 색 동시 추출
- 4표기로 정리
기존 색을 그대로 정리해 두면 새 색과 비교가 쉽다.
STEP 2: 신규 색 후보
- 브랜드 가이드 갱신 사항 반영
- 트렌드 색 후보 정리
- 접근성 기준 통과 후보만 선별
STEP 3: 후보 비교
기존 색과 후보 색의 HSL 비교. 색상(H)·채도(S)·명도(L) 차이를 분석. 색상 변환기로 두 색의 표기를 동시에 띄워 비교하면 차이가 분명하다.
STEP 4: 신규 색 결정
- 메인 컬러 1개
- 보조 컬러 2~3개
- 배경 컬러 1~2개
- 텍스트 컬러 2~3개
STEP 5: 명도 단계 시리즈
각 메인·보조 색을 100·200·...900 단계로 변형. 디자인 시스템에 통합.
STEP 6: 다크모드 매핑
라이트모드 색을 다크모드로 매핑. HSL 명도 반전. 컴포넌트별 매핑 검증.
STEP 7: 접근성 검증
- 글자색·배경색 대비비 ≥ 4.5:1
- 큰 글자 대비비 ≥ 3:1
- UI 요소 대비비 ≥ 3:1
STEP 8: 매체별 표기 정리
- 웹·앱 → HEX·RGB·HSL
- 인쇄 마케팅 자료 → CMYK·Pantone
- 영상 광고 → RGB
STEP 9: 가이드 문서화
리뉴얼 결과를 디자인 시스템·브랜드 가이드 문서에 옮겨 정리. 디자이너·개발자·마케팅이 같은 가이드 사용. 컬러 변환기로 정리한 4표기를 가이드에 그대로 옮겨 두면 매체 변환 부담이 작다.
점검 체크리스트
- 기존 색 추출 완료
- 신규 색 후보 정리
- 최종 색 결정
- 명도 시리즈 생성
- 다크모드 매핑
- 접근성 검증
- 매체별 표기 정리
- 가이드 문서화
마무리
웹사이트 리뉴얼은 색 결정의 큰 자리. 점검 흐름 한 번 거쳐 두면 리뉴얼 결과가 단단해진다.