명확하고 접근성 높은 웹사이트 CTA 만들기

CTA 버튼 생성기

웹사이트 CTA 링크를 디자인하고, 색상과 크기를 미리 확인하며, 텍스트 명암비를 점검한 후, 오류 없는 HTML 및 CSS 코드를 복사하거나 다운로드하세요.

CTA 세부 정보 및 스타일

목적지와 표시될 레이블을 입력한 다음, 웹사이트에 사용할 버튼 스타일을 선택하세요.

버튼 텍스트 *

CSS 클래스 * 문자, 숫자, 밑줄 또는 하이픈으로 구성된 하나의 클래스 이름.

목적지 URL * 완전한 HTTP 또는 HTTPS 주소를 입력하세요. 추적 매개변수와 최종 목적지를 확인하세요.

접근성 라벨 선택 사항입니다. 표시된 텍스트만으로는 목적지를 명확하게 알 수 없는 경우에만 사용하십시오.

단추 크기 *

글꼴 굵기 *

배경색 *

마우스 오버 배경 *

글자 색상 *

모서리 반경 * 0에서 48 픽셀 사이의 정수를 사용하십시오.

새 브라우저 탭에서 열기 링크에 nofollow 속성을 추가하세요 CTA를 전체 너비로 설정하세요

CTA 텍스트와 이동할 페이지를 입력하여 버튼 코드를 생성하세요.

CTA 미리보기 및 코드

게시하기 전에 표시되는 링크, 대상 호스트, 대비, 포커스 스타일 및 생성된 마크업을 검토하십시오.

CTA 미리보기, HTML 및 CSS가 여기에 표시됩니다.

0:1기본 대비

0:1마우스 오버 시 대비

—WCAG AA 참조 자료

—호스트 국가

HTML

CSS

웹사이트 CTA를 만드는 방법

1. 다음 조치를 설명하십시오.

방문자에게 무엇을 얻을 수 있는지 알려주는 “견적 요청”이나 “제품 사양 보기”와 같은 명확한 문구를 사용하세요.”

2. 방향과 명암을 확인하십시오.

최종 URL, 기본 색상 및 마우스 오버 색상, 버튼 크기, 접근성 이름, 키보드 포커스 스타일을 확인하십시오.

3. 코드를 추가하고 테스트하기

HTML과 CSS를 사이트에 삽입한 다음, 키보드, 스크린 리더, 휴대폰, 데스크톱 브라우저를 사용하여 실제 링크를 테스트해 보세요.

코드, 대비 및 접근성 관련 참고 사항

이 CTA는 대상 URL을 열기 때문에 생성기가 스타일이 적용된 앵커를 생성합니다. 버튼 텍스트, 접근성 레이블, 클래스 이름 및 URL은 유효성 검사를 거치고 이스케이프 처리됩니다. 완전한 형식의 HTTP 또는 HTTPS 대상 URL만 허용됩니다. 새 탭에서 열 경우 `noopener noreferrer`가 자동으로 추가되며, `nofollow`는 선택된 경우에만 추가됩니다.

명암비 계산은 WCAG 2.2의 상대 휘도 공식을 따릅니다. ‘콤팩트’ 및 ‘표준’ 사전 설정은 4.5:1 AA 텍스트 기준을 사용합니다. '대형' 사전 설정은 글자 두께가 700 또는 800일 때 3:1 대형 텍스트 기준을 사용하며, 글자 두께 600의 대형 텍스트는 계속해서 4.5:1을 사용합니다. 기본 색상과 마우스 오버 색상을 모두 확인하십시오. 이 테스트는 CTA 텍스트 색상만을 다루며, 포커스 가시성, 주변 레이아웃, 확대/축소, 터치 크기, 링크 용도 또는 전체 페이지의 접근성은 포함하지 않습니다.

W3C: 명암비(최소값) 이해하기

데이터 처리: CTA 세부 정보, 미리보기, 생성된 코드, 클립보드에 복사된 내용 및 다운로드 파일은 모두 사용자의 브라우저에 저장됩니다. 이곳에 입력한 내용은 이 도구를 통해 업로드되거나 저장되지 않습니다.

캠페인 자산을 통합된 시장 입지로 전환하세요

더 명확한 영업 콘텐츠를 준비하고, 시장에 바로 활용할 수 있는 자산을 체계적으로 정리하며, 국제 시장 전반에서 인지도를 높일 수 있는 TradeGoAI 서비스를 살펴보세요.

Explore TradeGoAI Services →

자주 묻는 질문

이 생성기는 링크를 만드는 건가요, 아니면 양식 버튼을 만드는 건가요?

이 기능은 행동 유도(CTA) 버튼 스타일의 앵커 링크를 생성합니다. CTA를 클릭했을 때 다른 페이지가 열리도록 할 때 이 기능을 사용하세요. 양식 제출, 대화상자 열기, 현재 인터페이스 변경과 같은 작업을 수행할 때는 실제 버튼 요소를 사용하세요.

어떤 대상 URL이 허용되나요?

목적지는 완전한 HTTP 또는 HTTPS URL이어야 합니다. JavaScript, 데이터, 파일, 상대 경로 및 인증 정보가 포함된 URL은 허용되지 않습니다. CTA를 게시하기 전에 최종 목적지와 추적 매개변수를 다시 한 번 확인하십시오.

대조 결과의 의미는 무엇입니까?

이 결과는 선택된 텍스트 색상을 기본 배경색 및 마우스 오버 시의 배경색과 비교합니다. 이 기능은 일반 텍스트의 경우 4.5:1, 700 또는 800 두께의 대형 사전 설정 텍스트의 경우 3:1이라는 WCAG 2.2 AA 기준을 적용합니다. 이 색상 검사를 통과한다고 해서 그 자체만으로 전체 페이지가 접근성이 보장된다는 것을 증명하는 것은 아닙니다.

언제 접근성 라벨을 추가해야 할까요?

가시적인 CTA 텍스트가 이동할 위치를 명확하게 설명하지 않는 경우에만 선택 사항인 접근성 레이블을 사용하십시오. 우선은 명확하고 가시적인 텍스트를 사용하십시오. 생성된 aria-label은 보조 기술에서 링크 이름으로 가시적인 텍스트를 대체하므로, 동일한 목적을 설명해야 합니다.

제 CTA 정보는 업로드되거나 저장되나요?

아니요. 유효성 검사, 미리 보기, 대비 계산, 코드 생성, 복사 및 다운로드 작업은 모두 사용자의 브라우저에서 이루어집니다. TradeGoAI는 이 도구에 입력된 내용을 수신하거나 저장하지 않습니다.

표시할 버튼 텍스트를 입력하세요. 목적지 URL을 완전히 입력하세요. 로그인 자격 증명이 포함되어 있지 않은 완전한 HTTP 또는 HTTPS 대상 주소를 사용하십시오. 문자나 밑줄로 시작하는 CSS 클래스 이름을 하나 사용하십시오. 0에서 48 사이의 정수 값으로 모서리 반경을 입력하십시오. 유효한 6자리 색상을 선택하세요. CTA 버튼이 생성되었습니다. 게시하기 전에 링크 대상, 대비, 코드 및 실제 페이지 동작을 확인하십시오. CTA 설정이 변경되었습니다. 미리보기와 코드를 새로 고치려면 다시 생성해 주세요. 패스 리뷰 기본 텍스트 색상과 마우스 오버 시 표시되는 텍스트 색상 모두, 선택된 WCAG AA 대비 기준을 충족합니다. 적어도 하나의 버튼 상태가 선택된 WCAG AA 대비 기준에 미달합니다. 게시하기 전에 색상을 조정하십시오. HTML이 복사되었습니다. CSS를 복사했습니다. 브라우저에서 복사가 차단되었습니다. 코드를 선택하여 수동으로 복사해 주세요. HTML 파일 다운로드가 완료되었습니다. 샘플이 로드되었습니다. 확인하려면 CTA 버튼을 생성하세요. CTA 설정 및 결과 초기화.