보드팩토리에 리빌더 부가기능 대응을 넣으면서 정한 원칙은 하나였습니다. 부가기능 파일은 한 줄도 고치지 않고, 테마 쪽에서만 맞춘다. 부가기능은 각자 업데이트되고, 남의 코드를 고쳐 두면 업데이트 때 덮여 버리기 때문입니다. 그 과정에서 쓴 방법들을 정리해 둡니다.

1. 부가기능이 무엇에 기대는지 먼저 읽는다

대부분의 부가기능은 리빌더 기본 테마(rb.basic)를 기준으로 만들어져 있습니다. 실제로 걸린 것들:

• 테마 폴더의 CSS 를 찾는 경우 — G5_THEME_URL . '/rb.css/point.css' 처럼 지금 테마 폴더에서 CSS 를 부릅니다. 꾸러미에는 theme/rb.basic/… 에만 그 파일이 들어 있어서, 다른 테마에서는 404 가 납니다.
• 기본 테마의 자리를 찾는 경우 — 자동번역은 언어 단추를 기본 테마 헤더의 li.qm_wrap 옆에만 붙입니다. 그 자리가 없으면 단추도 없습니다.
• 기본 테마의 그림에 기대는 경우 — 결제위젯은 체크 · 라디오 칸을 1px · 투명으로 숨기고, 보이는 그림은 기본 테마 form.css 의 label::before 에 맡깁니다. 다른 테마에서는 동의 칸 · 결제수단 칸이 아예 안 보였습니다.

2. 화면을 내보내기 직전에 끼어든다

그누보드는 HTML 을 내보내기 전에 html_process_buffer 훅을 거칩니다. 여기서 부가기능이 넣은 <link> 를 찾아, 바로 뒤에 테마의 보정 CSS 를 붙입니다. 바로 뒤에 두면 같은 세기의 선택자라도 테마 쪽이 이깁니다.

• 404 가 나는 기본 테마용 링크는 같은 훅에서 빼 버립니다.
• 부가기능이 자기 CSS 를 우선순위 100000 같은 늦은 시점에 붙이면, 테마 훅을 100001 로 두어 그 뒤에 돕니다.
• 훅조차 지나간 뒤 자기 ob_start 로 마지막에 태그를 넣는 부가기능(PWA)은, 부가기능 파일이 있으면 늘 테마 CSS 를 붙이고 선택자를 그 부가기능의 id 에만 걸었습니다.

3. 그림은 테마가 그린다

체크 · 라디오처럼 기본 테마에 맡겨진 그림은 테마 CSS 에서 input + label::before 로 직접 그렸습니다. 색은 전부 테마의 색 변수(토큰)로 써서, 다크 모드를 따로 쓰지 않아도 따라갑니다.

4. 불리는 순서를 확인한다

인기 검색어에서 봇 문자열을 거르는 함수를 테마 라이브러리에 두었더니, 통합검색 화면에서는 걸러지지 않았습니다. 통합검색이 테마 라이브러리가 불리기 전에 연관 검색어를 만들고 있었기 때문입니다. 함수를 더 일찍 불리는 extend 파일로 옮겨 해결했습니다.

5. 시험은 설치했다 지운다

부가기능마다 로컬에 잠깐 설치하고 표를 만들어 확인한 뒤, 파일 · 표 · 시험 자료를 모두 지웠습니다. 배포 도구가 git 이 아니라 폴더를 훑어 올리기 때문에, 지우지 않으면 남의 부가기능 파일이 내 데모 사이트에 같이 올라갑니다. 판매 꾸러미에 섞이지 않았는지도 매번 zip 안을 검사합니다.