페이지 색상 자동 매핑과 글자 대비 자동 보정

AI로 만든 페이지나 다른 곳에서 가져온 페이지는 프리셋 테마를 눌러도 색이 그대로인 경우가 있습니다. 페이지가 그 테마의 색 값으로 만들어지지 않았기 때문입니다. 에디터의 페이지 색상 자동 매핑은 페이지에 실제로 쓰인 색을 찾아 선택한 테마의 색으로 옮겨 주고, 옮긴 뒤 글자가 배경에 묻히면 읽히는 색으로 고쳐 줍니다. 여기에 섹션 배경을 번갈아 칠하는 섹션 배경 교차까지, 모두 AI 크레딧 없이 바로 적용됩니다.

1. 어디에 있나요

왼쪽 레일의 프리셋 테마 패널을 열고 아래로 내려 보세요. 테마 10개 목록과 더 많은 팔레트 버튼 바로 아래에 페이지 색상 자동 매핑 체크 상자가 있고, 그 아래에 섹션 배경 교차 상자가 이어집니다. 자동 매핑은 처음부터 켜져 있습니다.

2. 자동 매핑 켜기와 끄기

체크 상자 아래 설명대로, 켜 두면 페이지에서 실제 쓰인 색(CSS·인라인·Tailwind)을 분석해 선택한 테마 색으로 바꿉니다. 대표 색과 같은 계열의 진한 색·연한 색이 함께 옮겨지고, 흰색이나 회색 같은 무채색은 그대로 남습니다. 끄면 이전 테마의 정확히 같은 색 값만 바꿉니다.

아래는 주황 계열로 만든 페이지에 오션 블루를 적용한 모습입니다. 켠 상태에서는 제목, 버튼, 카드 배경, 큰 배경 띠, 숫자까지 파란 계열로 바뀌었습니다. 끈 상태에서는 이 페이지에 바뀐 곳이 없었습니다.

체크 상태는 이 브라우저에 기억되어 새로 고침해도 유지됩니다. 테마 줄에 마우스를 올리는 미리 보기도 이 설정을 따릅니다. 적용한 뒤에는 상단 바의 저장을 눌러 저장하세요.

3. 글자 대비 자동 보정과 안내 문구

색을 옮기면 배경과 글자가 따로 바뀌어 짝이 어긋날 수 있습니다. 자동 매핑을 켠 채로 적용하면 에디터가 글자와 그 뒤 배경의 밝기 차이를 계산해, 읽기 어려운 글자만 읽히는 색으로 바꿉니다. 앞의 비교에서 오션 블루 버튼의 글자가 흰색에서 어두운 색으로 바뀐 것이 그 예입니다. 다크 테마를 적용하면 배경을 지정하지 않은 섹션에도 테마 배경이 채워져 글자와 극성이 맞습니다.

적용이 끝나면 체크 상자 아래에 안내 문구가 나옵니다.

• 배경에 묻히는 글자 N곳은 읽히도록 색을 조정했습니다.: 보정한 글자 수입니다.
• 바꿀 색을 찾지 못했습니다. 이미 같은 색이거나 흰색·회색 위주의 페이지입니다.: 옮길 색이 없을 때 나옵니다. 같은 테마를 연달아 적용하면 이 문구가 나옵니다.

4. 섹션 배경 교차

섹션 배경을 번갈아 칠하고 글자와 카드는 읽히게 자동 조정하는 기능입니다. 설정을 고른 뒤 섹션 배경 교차 적용을 누릅니다.

• 밝은 / 연한 교차: 흰색과 연한 색을 번갈아 칠합니다. 기본값입니다.
• 밝음 / 어두움 교차: 밝은 섹션과 어두운 섹션을 번갈아 칠합니다.
• 첫 섹션(히어로)을 어둡게: 끄면 첫 섹션도 다른 섹션과 같은 순서로 칠해집니다.
• 헤더·푸터는 제외 (메뉴 섹션 유지): 켜 두면 헤더와 푸터는 색을 바꾸지 않고 교차 순서에도 세지 않습니다.
• 기준 색: 기본은 현재 페이지 색 (자동)입니다. 프리셋 테마를 고르면 배경뿐 아니라 버튼·강조색도 그 테마 색으로 함께 바뀝니다.

적용하면 4개 섹션의 배경을 교차 톤으로 바꿨습니다. 건너뛴 섹션: 5번째(헤더·푸터).처럼 결과가 안내됩니다. 배경 이미지·그라데이션·영상이 있는 섹션은 건너뛰고 그 이유를 함께 알려 줍니다. 기준 색을 고른 경우에는 버튼·강조색을 바꾼 섹션 수도 함께 나옵니다.

5. 이렇게 활용해 보세요

• AI로 만들었거나 가져온 페이지에 브랜드와 어울리는 테마를 입혀 보고 싶을 때 자동 매핑을 켠 채 테마를 적용해 볼 수 있습니다.
• 다크 테마를 적용한 뒤 안내 문구의 조정 개수를 확인하면, 색이 바뀌며 손본 글자가 얼마나 되는지 가늠할 수 있습니다.
• 색은 그대로 두고 섹션 구분만 또렷하게 하고 싶다면 섹션 배경 교차의 기준 색을 현재 페이지 색 (자동)으로 두고 적용해 볼 수 있습니다.

6. 알아 두실 점

• 모두 AI를 쓰지 않아 크레딧이 들지 않습니다. 적용한 뒤에는 저장해야 페이지에 남습니다.
• 글자 대비 보정은 자동 매핑을 켠 상태에서 적용할 때 함께 동작합니다. 끄고 적용했다면 글자 색을 직접 살펴봐 주세요.

프리셋 테마 10종 고르는 방법과 더 많은 팔레트는 별도 글에서 다룹니다.