이 페이지는 cta shortcode의 핵심 렌더링 경로와 디자인 상태를 실제 출력으로 확인하기 위한 테스트 글이다.
중앙 설정은 config/_default/params.cta.toml에 있고, 시각 토큰은 theme-vars.css를 상속한다.
1) 기본 preset 렌더링
각 kind가 기본 문구, 아이콘, 링크 정책, 위계를 어떻게 가져오는지 확인한다.
newsletter
trial
price_check
자세히 보기
related
자세히 보기
consult
download
자세히 보기
utility
자세히 보기
external
자세히 보기
2) 위계별 시각 비교
primary는 fill, secondary는 primary-color border + 저채도 fill, tertiary는 secondary의 축소형, utility는 chip으로 읽히는지 확인한다.
primary hero
secondary border + soft fill
Secondary CTA
tertiary compact
Tertiary CTA
utility chip
Utility Chip
3) 우선순위 덮어쓰기
site preset을 기본으로 두고, shortcode 인자만 덮어쓰는 경우를 확인한다. secondary / tertiary / utility의 크기 차이도 함께 본다.
4) 링크 처리
내부 참조와 외부 URL이 서로 다르게 동작하는지 확인한다.
아이콘 없이 출력
5) block shortcode
block content가 있을 때 note와 본문이 지원 영역으로 자연스럽게 들어가는지 확인한다.
문의 내용이 길어도 괜찮습니다.
상담 신청
평일 기준 1영업일 내 회신합니다.
문의 내용이 길어도 괜찮습니다.
PDF 파일은 용량이 있을 수 있다
자료 다운로드
PDF 파일은 용량이 있을 수 있다
다운로드 후에는 파일명을 바꾸지 않고 보관하는 편이 관리에 유리하다.
6) 접근성 / 비활성 / 빈 값 처리
아래 예시는 값이 비어 있어도 렌더링이 끊기지 않는지 확인한다.
문서 주소 복사
링크가 없더라도 컴포넌트는 깨지지 않아야 한다.
자세히 보기
링크가 없더라도 컴포넌트는 깨지지 않아야 한다.
시각적으로는 보이되 상호작용은 막는다.
비활성 상태
시각적으로는 보이되 상호작용은 막는다.
7) size / tone / align / surface 조합
정렬이 실제로 중앙 기준으로 맞는지, 모바일에서 폭이 100%일 때도 흔들리지 않는지 확인한다.
Muted Tertiary
Utility Chip
8) page front matter preset override 확인
이 페이지의 front matter에는 trial, newsletter, consult preset 오버라이드가 들어 있다.
같은 kind를 호출하면 site preset보다 페이지 preset이 우선되어야 한다.
9) 텍스트와 원문 코드 동시 확인
설명과 원문이 함께 보여야, CTA의 실제 사용법과 렌더 결과를 한 화면에서 비교할 수 있다.
예시 코드 1
상담 신청
평일 기준 1영업일 내 회신
예시 코드 2
예시 코드 3
문서 주소 복사