색상 처리는 이후 결과에 큰 영향을 미치는 하나의 옵션입니다. 변환하기 전에 올바르게 설정해 두면 나중에 다시 스타일을 수정하는 수고를 크게 덜 수 있습니다.
두 가지 모드
- 원본 색상 유지 — 모든 텍스트 색상, 배경, 테두리 색상, 그림자 색상이 위젯에 명시적 값으로 기록됩니다. 결과는 원본과 정확히 일치합니다.
- 사이트 색상 사용 — 위젯별 색상은 건너뛰고 Elementor 글로벌 색상을 대신 참조합니다. 제목은 Primary, 본문 텍스트는 Text, 버튼 배경은 Accent 등으로 매핑됩니다.
각 모드를 사용해야 할 때
기존 브랜드 사이트에 블록을 가져올 때는 사이트 색상을 선택하세요. 섹션이 즉시 팔레트를 적용하며, 나중에 글로벌 색상을 변경하면 가져온 섹션도 함께 바뀝니다. 사이트에 장기적으로 유지될 요소에는 이 방식이 관리하기 좋은 선택입니다.
디자인 자체가 중요할 때는 원본 색상을 선택하세요. 클라이언트 목업, 일회성 랜딩 페이지, 또는 원본 팔레트가 사이트의 나머지 부분과 의도적으로 다를 때가 그런 경우입니다.
어떤 색상 값이 유지되는가
단색은 직접 변환됩니다. 두 개의 색상 정지점이 있는 선형 그라데이션은 인식되어 각도와 두 정지점이 모두 보존된 Elementor 그라데이션 배경이 됩니다. 방사형 그라데이션, 다중 정지점 그라데이션처럼 더 복잡한 배경은 같은 컨트롤로 표현할 수 없으므로 빈 배경을 만들지 않고 합리적인 대안으로 첫 번째 단색을 사용합니다.
박스 그림자도 변환되지만 Elementor의 그림자 컨트롤은 하나의 그림자만 담을 수 있습니다. CSS에서 여러 그림자를 겹쳐 사용했다면 가장 앞에 있는 그림자만 유지되고 나머지는 직접 추가해야 한다는 경고가 표시됩니다.
CSS 변수
var(--brand) 같은 사용자 지정 속성은 읽히기 전에 브라우저에서 해석되므로 변수 이름이 아니라 최종 계산된 색상을 얻게 됩니다. 이는 대개 원하는 결과입니다. 테마 설정에 변수를 사용하고 있다면 사이트 색상으로 전환하고 Elementor 글로벌 색상에서 팔레트를 관리하세요. 이는 같은 개념을 WordPress 네이티브 방식으로 구현한 것입니다.
투명도
완전히 투명한 배경은 투명 색상으로 기록되지 않고 “배경 없음”으로 처리되어 설정 패널을 깔끔하게 유지합니다. rgba(255,255,255,.88) 같은 반투명 값은 그대로 보존됩니다.
전체 매핑
사이트 색상 모드에서는 각 위젯 유형이 팔레트의 특정 슬롯에 연결됩니다.
- 제목 → Primary
- 본문 텍스트 → Text
- 버튼 배경 → Accent
- 아이콘 → Primary
- 구분선 → Secondary
사이트 타이포그래피를 켜면 글꼴에도 동일한 방식이 적용됩니다. 제목은 Primary 타이포그래피를 사용하고 본문 텍스트는 Secondary 타이포그래피를 사용합니다.
두 옵션은 서로 독립적입니다. 사이트 색상과 원본 글꼴을 함께 쓰는 것은 일반적이고 합리적인 조합입니다. 블록이 팔레트는 적용하면서 디자인에 중요한 디스플레이 글꼴은 유지하기 때문입니다. 하나의 스위치처럼 취급하지 말고 각각 따로 설정하세요.
연결이 복사본이 아니라 실시간인 이유
이 부분은 이해할 가치가 있습니다. 이 선택이 나중에 왜 그렇게 중요한지 설명해 주기 때문입니다. 사이트 모드는 Primary 색상을 조회해서 그 헥스 값을 위젯에 붙여넣지 않습니다. 글로벌 색상에 대한 참조를 기록합니다. Elementor는 이를 값이 아닌 팔레트 항목을 가리키는 포인터로 저장합니다.
따라서 바인딩은 살아 있습니다. 지금부터 6개월 후 사이트 설정에서 Primary를 변경하면 사이트 모드로 변환된 모든 제목이 모든 페이지에서 함께 변경되며, 페이지를 하나씩 열 필요도 없습니다. 변환된 페이지는 오늘 우연히 일치하는 이질적인 요소가 아니라 디자인 시스템의 정상적인 구성원이 됩니다.
원본 색상에서는 값이 고정됩니다. 충실하게 재현해야 하는 클라이언트 목업에는 정확히 적합하고, 2년 동안 유지 관리할 섹션에는 정확히 부적합합니다.
먼저 팔레트를 설정하세요
사람들이 자주 실수하는 전제 조건이 하나 있습니다. 사이트 모드는 현재 글로벌 색상에 담긴 값에 바인딩되며 색상을 새로 만들거나 추측하지 않습니다. 팔레트가 여전히 Elementor의 공장 기본값인 사이트에서 변환하면 섹션도 공장 기본값을 그대로 적용하게 되어 변환이 실패한 것처럼 보입니다.
유지할 항목을 변환하기 전에 사이트 설정 → 글로벌 색상에서 5분만 투자해 Primary, Secondary, Text, Accent를 정의하세요. 이후에 가져오는 모든 항목이 첫 시도에 올바르게 적용됩니다.
아이콘은 약간 다르게 동작합니다
사이트 모드에서 변환된 아이콘에는 고정 값이 아닌 currentColor가 지정됩니다. 즉, 아이콘을 둘러싼 요소에서 색상을 상속받습니다. 그 아이콘을 어두운 섹션에 놓으면 주변 텍스트와 함께 밝은 색으로 바뀌며, 위젯별 설정을 기억할 필요도 없습니다.
이 작은 기능이 특정한 성가신 작업을 덜어 줍니다. 섹션 배경을 바꾼 뒤에도 아이콘 12개가 모두 흰색 배경에서의 색상 그대로 남아 있어 하나하나 찾아다녀야 하는 일을 피할 수 있습니다.
실용적인 권장 사항
확신이 서지 않는다면 먼저 원본 색상으로 한 번 변환해 레이아웃이 충실한지 확인한 다음, 실제로 게시할 버전은 사이트 색상으로 다시 변환하세요. 두 결과를 비교하는 데는 2분이면 충분하며 결정이 분명해집니다.
기본 원칙: 내 사이트에 올라갈 항목에는 사이트 색상을 사용하세요. 승인을 위해 다른 사람의 디자인을 재현하는 경우에는 원본 색상을 사용하세요. 목업이 승인되어 실제 페이지가 되면 수동으로 색을 다시 지정하지 말고 사이트 모드로 다시 변환하세요.