문제 인식
워드프레스처럼 테마에 따라 글로벌 스타일을 덮어 씌우는 방식에서 외부 요소를 일관된 조형으로 유지하는 것은 어려운 일입니다. CSS는 ‘명시도’라는 우선순위가 있어 이 부분에 대한 설계가 중요합니다.
템플릿의 의존성을 낮추기 위해 보통 Elementor Pro에서 제공하는 Template Kit는 Custom CSS와 ID, Class 없이 제공됩니다. Themeforest 역시 엘레멘터 템플릿에 Custom CSS와 ID, Class를 설정하면 템플릿 키트 자체를 빌드할 수 없습니다.
하지만 미관상의 문제로 종국에는 엔드 유저의 손에서 이것들이 대부분 추가됩니다. Jetcraft의 템플릿은 최종 사용자의 수정 작업을 최소화하는 것에 촛점을 두기에 이들 Custom CSS와 Class를 적극적으로 활용합니다.
템플릿 자체로 해결
템플릿 초기화 코드 사용
일단 조형을 통일하는 방법으로, 템플릿 내에서 시작해서 해결이 안되는 경우 사용자 환경으로 넓혀가는 방향으로 합니다. Jetcraft에서 제공하는 코드를 사용자의 워드프레스에 적용하면 대부분의 문제는 해결됩니다.
이 코드는 사용자 환경에 영향을 주지 않으며 오로지 템플릿에 한정됩니다. 초기화 코드에 대한 자세한 설명은 별도의 문서에서 다루고 있습니다.
사용자 환경에서 해결
Elementor 최신 버전 확인
Jetcraft의 템플릿은 항상 최신 버전의 Elementor에 맞춰 제작 혹은 업데이트 됩니다. 따라서 사용자가 사용중인 엘리멘터의 버전이 현재 엘리멘터 최신 버전과 다를 경우 제대로 표현되지 않을 수 있습니다.
사용자의 엘리멘터 버전이 3.1이고 현재 엘리멘터의 최신 버전이 3.1.6 같은 경우는 큰 문제가 없지만, 3.1과 3.3처럼 버전 차이가 크면 Break Point가 포함되어 문제가 발생할 수 있습니다.
Custom CSS 활성화 여부
템플릿 요구사항에 엘리멘터 프로 태그가 있다면 높은 확률로 Custom CSS가 사용됐을 수 있습니다. 무료 버전 엘리멘터는 Custom CSS를 사용할 수 없으므로 이곳에 정의된 스타일이 무시되어 템플릿 조형이 다르게 나타납니다.
엘리멘터 프로로 업그레이드 할 준비가 안되었다면 무료 플러그인을 통해 임시방편으로 Custom CSS를 비롯한 엘리멘터 프로가 제공하는 기능을 사용할 수 있습니다.
엘리멘터 애드온 컴포넌트를 사용하면 해당 기능을 활성화해서 템플릿을 정상적으로 표현할 수 있습니다. 하지만 이 애드온은 엘리멘터 제작사의 이용약관에 위배되며 워드프레스 플러그인 보관소에도 등록되지 않은 다소 다크한 애드온이므로 맛보기 정도로만 사용하는 것이 좋습니다.
Hello Elementor 테마 사용
엘리멘터의 모든 위젯과 블록은 Hello Elementor 테마와 완전히 호환됩니다. 보통 아주 사소한 픽셀 차이는 HTML 요소의 line-height 차이에서 나타납니다. Jetcraft 템플릿은 초기화 코드에서 font-size: 16px / line-height: 160%로 설정했습니다.
지금 당장 테마를 Hello Elementor로 변경할 수 없다면 현재 사용중인 테마의 Body 요소의 font-size를 16px, 그리고 line-height를 1.6 혹은 1로 변경해 보세요. 레이아웃이 유의미하게 망가지지 않는다면 이 수치 중 하나로 변경하는 것이 좋습니다.
너무 작은 폭의 컨텐츠 너비 해결
템플릿은 최소 1280px 이상의 너비를 가진 컨텐츠 너비에서 제대로 미리보기가 가능합니다. Twenty Twenty-Four 테마의 620px 폭 처럼 좁은 블로그 환경에서는 템플릿이 제대로 표현되지 않습니다.
템플릿은 containerQuery가 아니라 mediaQuery에 반응하므로, 브라우저 크기가 아닌 컨테이너 요소의 크기가 너무 작은 경우에는 템플릿 파일을 열었을 때 표현이 제대로 안될 수 있습니다.
글꼴의 두께가 달라보이는 경우
사용자의 OS나 웹브라우저의 렌더링 엔진에 따라 글꼴의 두께가 달라보일 수 있습니다. 참고 이미지는 윈도우즈 10 운영체제에서 동일한 size와 font-weight에 대한 서브픽셀 렌더링이 모두 다르게 표현되는 것을 보여줍니다.
이 문제에 대해 Pretendard 서체의 모든 제공 버전에 대한 테스트, CSS의 font-smooth 속성을 포함한 수많은 텍스트 관련 속성 테스트를 진행한 결과, 사용자가 해결할 수 있는 문제가 아니라고 판단합니다.
Jetcraft 템플릿은 가장 사용자층이 많은 윈도우즈 10 / 구글 크롬 브라우저에 맞춰 제작합니다. 그래서 템플릿에서는 font-weight가 600으로 설정되어 있다면 피그마에서는 500으로 설정되어 있습니다.
Size 24px / font-weight: 700 설정에 대한 렌더링