이 문서는 CTA 업그레이드 작업의 변경점을 빠르게 훑기 위한 요약본이다.

중앙 제어 구조

  • config/_default/params.cta.toml
    CTA의 preset, 정책, 정렬 기본값을 한 곳에 모았다.
  • themes/(0000-0000-0000-0001)/assets/css/core/theme-vars.css
    CTA 시각 토큰의 중앙 원본이다. primary / secondary / tertiary / utility 위계를 다시 정리했다.
  • themes/(0000-0000-0000-0001)/assets/css/extended/cta.css
    토큰을 상속받아 실제 레이아웃, 상태, 정렬, 반응형 동작만 조합한다.
  • themes/(0000-0000-0000-0001)/layouts/partials/cta/render.html
    shortcode, page params, site params를 병합하고 align / surface / href 정책까지 최종 계산한다.
  • themes/(0000-0000-0000-0001)/layouts/shortcodes/cta.html
    shortcode 진입점은 얇게 유지하고 공유 partial로 전달한다.
  • content/ko/theme-upgrade-lab/cta-shortcodes.md
    실제 프론트엔드에서 CTA 종류별 기능과 코드 예시를 비교하는 테스트 글이다.

디자인 정리

  • 기본 정렬값을 center로 두고, inline surface만 예외적으로 left를 기본값으로 유지했다.
  • align="center"가 모바일에서 무시되지 않도록 block CTA의 폭과 justify 동작을 분리했다.
  • primary CTA는 더 강한 대비와 미세한 그라디언트는 유지하되, 글자 weight는 한 단계 낮춰 과도한 무게감을 줄였다.
  • secondary는 primary-color border + 저채도 fill, tertiary는 secondary의 축소형, utility는 chip 성격으로 정리했다.
  • CTA 텍스트에는 기본 underline을 두지 않고, 버튼성 인터랙션에 맞는 UI 톤만 남겼다.
  • CTA는 본문 폰트보다 더 신뢰감 있는 UI 폰트와 weight를 상속한다.
  • mobile에서는 CTA가 한 줄에서 읽히고, desktop에서는 중앙 정렬된 구조가 유지되도록 맞췄다.

기술 정리

  • href / ref 충돌 정책을 policy.prefer 기준으로 처리하도록 정리했다.
  • target="_blank"일 때 rel 자동 보정이 들어가도록 유지했다.
  • unknown kind는 default preset으로 안전하게 폴백하고, 경고를 남기도록 했다.
  • 값이 비어도 렌더링이 끊기지 않도록 fallback을 유지했다.
  • data-cta-align과 data-cta-* 속성을 유지해 QA와 테스트에 활용할 수 있게 했다.

검증 포스트

아래 테스트 페이지에서 주요 경로를 확인한다.

  • content/ko/theme-upgrade-lab/cta-shortcodes.md

기본 preset, page override, 내부/외부 링크, block shortcode, compact, disabled, 빈 값, 아이콘 없음, target/rel 보정, 정렬, primary/secondary/tertiary 비교까지 한 번에 확인하도록 구성했다.

수정 파일

  • config/_default/params.cta.toml
  • themes/(0000-0000-0000-0001)/assets/css/core/theme-vars.css
  • themes/(0000-0000-0000-0001)/assets/css/extended/cta.css
  • themes/(0000-0000-0000-0001)/layouts/partials/cta/render.html
  • content/ko/theme-upgrade-lab/cta-shortcodes.md