🕰️ 어디서 튀어나온 법칙일까 (짧은 배경 지식)

60-30-10 법칙의 뿌리는 인테리어 디자인이야.
방 하나를 꾸밀 때 벽(60%) · 가구와 커튼(30%) · 쿠션과 소품(10%)으로
색을 나누면 공간이 안정적으로 보인다는 경험칙에서 출발했지.

이게 왜 웹으로 넘어왔냐면, 인간의 시지각 원리가 동일하기 때문이야.

🛠️ 실전 : 상세페이지에 적용하는 5단계

STEP 1. 주조색(60%)부터 정한다 — 대부분은 "무채색"

초보가 가장 많이 하는 실수가 뭔 줄 알아?
주조색에 브랜드 컬러를 넣는 것.

예를 들어 브랜드 컬러가 쨍한 빨강인데,
페이지 60%를 빨강으로 채우면? 눈이 아파서 3초 만에 이탈이야.

💬 정리하자면,
주조색 = "안 보이는 색"이어야 한다.
사용자가 "이 페이지 배경 무슨 색이었지?" 하고 기억 못 하면 성공이야.

STEP 2. 보조색(30%)으로 구조를 만든다

보조색은 페이지를 덩어리로 나누는 역할을 해.
스크롤이 긴 상세페이지일수록 이게 진짜 중요해.

왜냐면 상세페이지는 보통 이런 구조거든:

보조색 고르는 요령:

STEP 3. 강조색(10%)은 "돈이 되는 곳"에만

자, 여기가 진짜 하이라이트야.
상세페이지에서 10%의 강조색은 전환율(CVR)과 직결돼.

강조색을 써야 하는 곳:

반대로 절대 강조색을 쓰면 안 되는 곳:

STEP 4. 색 개수는 3개 + 텍스트 컬러로 마무리

"3색으로 어떻게 페이지를 다 만들어요?" 하는 사람 있을 텐데,
실무에서는 여기에 텍스트용 무채색 2~3단계를 더해.
이건 색상 카운트에 안 넣는 게 관례야.

/* 실전 컬러 토큰 예시 (CSS 변수) */
:root{
  --color-base:      #FFFFFF;  /* 60% 주조색 */
  --color-secondary: #F3F5F9;  /* 30% 보조색 */
  --color-accent:    #FF5A3C;  /* 10% 강조색 */

  /* 텍스트 무채색 계단 */
  --text-strong: #1A1A1F;  /* 제목 */
  --text-body:   #4A4F58;  /* 본문 */
  --text-muted:  #8A919E;  /* 캡션·안내 */
  --line:        #E5E8EE;  /* 구분선 */
}

이렇게 토큰으로 정리해두면,
나중에 브랜드 컬러가 바뀌어도 변수 한 줄만 바꾸면 끝.
디자이너와 개발자가 같은 언어로 대화할 수 있게 되는 건 덤이고.

STEP 5. 흑백 테스트로 검증한다

완성했으면 마지막 관문.
디자인 시안을 그레이스케일(흑백)로 변환해봐.

🔧 60-30-10을 확장하는 고급 기술

확장 1 : 60-30-10-5 (서브 액센트 추가)

실무에서 3색만으로 부족한 경우가 있어.
특히 상태 표시가 필요할 때.

확장 2 : 60-30-10 안에서 명도 계단 쓰기

같은 파랑이라도 Blue-50 / Blue-300 / Blue-600 / Blue-900처럼
명도 단계를 만들어두면, 색을 늘리지 않고도 표현이 풍부해져.

--brand-50:  #EEF4FF;  /* 아주 연한 배경 */
--brand-100: #D9E5FF;  /* 뱃지 배경 */
--brand-300: #8FB2F5;  /* 비활성 상태 */
--brand-600: #2B5FD9;  /* 기본 버튼 */
--brand-800: #1B3C8C;  /* 호버 · 눌림 */

이게 요즘 디자인 시스템(Material, Tailwind 등)에서 쓰는 방식이야.
"색 3개"라는 말은 색상(Hue) 3개라는 뜻이지,
톤까지 3개라는 뜻은 아니라는 걸 기억해.

확장 3 : 스크롤 구간별 비율 재설정

긴 상세페이지는 화면 하나가 아니라 여러 개의 화면이 연결된 것이야.
그래서 60-30-10을 뷰포트 단위로 다시 적용하는 게 정확해.

🚨 자주 하는 실수 7가지

❓ 자주 묻는 질문

Q1. 60-30-10을 자로 재듯 정확히 맞춰야 하나요?

A. 아니. 이건 목표치가 아니라 방향성이야.
70-20-10, 65-25-10 다 괜찮아.
중요한 건 "압도적 1등 색 - 중간 색 - 아주 적은 포인트 색"이라는 구조를 지키는 것.
33-33-33처럼 비슷해지는 순간이 위험한 거야.

Q2. 브랜드 컬러가 이미 정해져 있으면요?

A. 그 브랜드 컬러를 10% 자리에 넣으면 돼.
로고와 CTA 버튼에만 브랜드 컬러를 쓰면,
오히려 그 색이 브랜드의 시그니처로 각인돼.
쿠팡의 빨강, 토스의 파랑도 화면 전체를 덮지 않잖아?

Q3. 무채색만 쓰면 재미없지 않나요?

A. 무채색 기반이 심심해 보인다면, 색이 아니라
타이포그래피 대비 · 여백 리듬 · 이미지 품질이 부족한 거야.
색을 늘려서 심심함을 메우려 하면 100% 촌스러워진다.

Q4. 상세페이지가 20스크롤 넘게 길어요. 계속 같은 비율?

A. 전체적으로는 유지하되,
구매 결정 구간(가격·혜택·CTA 근처)에서는 강조색 밀도를 살짝 높여도 돼.
정보 전달 구간은 차분하게, 결정 구간은 또렷하게.
이 강약 조절이 고수의 영역이야.

Q5. 배너 광고 이미지도 똑같이 적용되나요?

A. 배너는 노출 시간이 1~2초라서 조금 달라.
강조색 비율을 15~20%까지 올려도 괜찮아.
다만 그만큼 주조색은 더 단순하고 평평하게 가야 균형이 맞아.