reCAPTCHA의 디자인 맞춤설정

중요: reCAPTCHA API 버전 1.0은 더 이상 지원되지 않습니다. 버전 2.0으로 업그레이드하세요. 자세히 알아보기

사이트에 reCAPTCHA를 성공적으로 설치했다면 디자인을 변경하는 것이 좋습니다. 이 페이지에서는 (1) 표준 reCAPTCHA 테마 중 하나를 선택하는 방법, (2) reCAPTCHA의 모양을 완전히 맞춤설정하는 방법, (3) 위젯의 언어를 변경하여 reCAPTCHA를 다국어화하는 방법을 설명합니다.

표준 테마

reCAPTCHA 위젯에 다른 테마가 표시되도록 하려면 먼저 기본 HTML 페이지에서 reCAPTCHA가 표시되는 <form> 요소 앞에 다음 코드를 추가해야 합니다. reCAPTCHA가 처음 호출된 기본 스크립트 다음에 배치하면 작동하지 않습니다.

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'theme_name'
 };
 </script>

표준 테마를 사용하려면 'theme_name'를 다음 4가지 테마 이름 중 하나로 바꿔야 합니다.

'red' (기본 테마)	'흰색'
'blackglass'(검은색 글래스)	'깨끗한'

맞춤 테마 설정

커스텀 테마를 사용하면 reCAPTCHA 이미지가 표시되는 방식을 정확하게 제어할 수 있습니다. (여기에서 맞춤 테마 설정의 데모를 확인하세요.) 맞춤 테마 설정을 사용하려면 먼저 RecaptchaOptions의 테마 속성을 '맞춤'으로 설정해야 합니다. 이 옵션은 자체 사용자 인터페이스를 만들어서는 안 된다고 reCAPTCHA에 알려줍니다. reCAPTCHA는 다음 ID가 있는 HTML 요소를 기반으로 사용자에게 보안문자를 표시합니다.

• ID가 recaptcha_image인 빈 div입니다. 여기에 실제 이미지가 배치됩니다. 이 div는 300x57픽셀이 됩니다.
• ID와 이름이 있는 텍스트 입력은 모두 recaptcha_response_field로 설정됩니다. 여기에 사용자가 답변을 입력할 수 있습니다.
• 필요한 경우 전체 reCAPTCHA 위젯이 포함된 div입니다. 이 ID div를 custom_theme_widget에 배치하고 div 스타일을 display:none로 설정해야 합니다. reCAPTCHA 테마 설정 코드가 완전히 로드되면 div가 표시됩니다. 이 요소는 로드되는 동안 페이지 깜박임을 방지합니다.

이 모든 기능을 구현하려면 먼저 기본 HTML 페이지에서 reCAPTCHA가 표시되는 <form> 요소 앞에 다음 코드를 삽입합니다.

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
 };
 

그런 다음 reCAPTCHA를 표시할 <form> 요소 안에 다음을 배치합니다.

 <div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

 </div>

 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
        value="manual_challenge">
 </noscript>

마지막 몇 줄은 이 가이드 소개에서 설명하는 reCAPTCHA를 표시하는 표준 방법에 불과합니다.

위 코드에서 이루어지는 작업은 다음과 같습니다. Recaptcha 자바스크립트 객체는 보안문자의 상태를 변경할 수 있는 메서드를 제공합니다. reload 메서드는 새로운 보안문자 질문을 표시하고 switch_type 메서드는 이미지와 오디오 보안문자 간에 전환합니다. reCAPTCHA의 전체 UI를 만들기 위해 보안문자의 상태가 다를 때 다른 정보를 표시합니다. 예를 들어 사용자가 이미지 보안문자를 보고 있다면 '오디오 보안문자 받기' 링크가 표시됩니다. 스테이트풀(Stateful) UI를 만드는 데 사용할 수 있는 CSS 클래스는 4가지입니다.

CSS 클래스	표시되는 경우
recaptcha_only_if_image	이미지 보안문자가 표시되고 있습니다.
recaptcha_only_if_audio	오디오 보안문자가 표시됨
recaptcha_only_if_incorrect_sol	이전 솔루션이 올바르지 않음
recaptcha_only_if_no_incorrect_sol	이전 솔루션이 정확하지 않았음

테마를 설정하면 많은 옵션이 제공되지만 몇 가지 사용자 인터페이스 일관성 규칙을 따라야 합니다.

• 보안문자 위젯 근처에 reCAPTCHA를 사용 중임을 명시해야 합니다.
• 새로고침 함수를 호출하는 표시 버튼을 제공해야 합니다.
• 시각 장애가 있는 사용자가 오디오 보안문자에 액세스할 수 있는 방법을 제공해야 합니다.
• reCAPTCHA 위젯에서 버튼으로 사용하는 이미지의 대체 텍스트를 제공해야 합니다.

다국어 지원: 위젯 언어 변경

reCAPTCHA 위젯을 국제화하는 방법에는 두 가지가 있습니다.

번역 기능 내장

reCAPTCHA에는 여러 가지 번역 기능이 내장되어 있습니다. RecaptchaOptions의 lang 매개변수를 설정하여 사용할 수 있습니다.

<script type="text/javascript">
var RecaptchaOptions = {
   lang : 'fr',
};
</script>

커스텀 번역

사용 중인 언어의 번역이 없다면 직접 번역할 수 있습니다. reCAPTCHA 자바스크립트의 모든 문자열을 번역하고 RecaptchaOptions의 'custom_translations' 변수를 설정해야 합니다. 설정하지 않은 문자열은 사용자 언어의 기본 번역에서 가져옵니다. 이를 사용하여 기본 번역의 일부만 재정의할 수 있습니다 (예: 선택한 번역이 지역에 맞지 않는 경우). 예를 들면 다음과 같습니다.

<script type= "text/javascript">
var RecaptchaOptions = {
   custom_translations : { instructions_visual : "This is my text:" }
};
</script>

다음은 맞춤 이탈리아어 번역의 실제로 작동하는 예입니다. reCAPTCHA를 호출하기 전에 이 코드를 삽입하세요.

<script type="text/javascript">
        var RecaptchaOptions = {
                custom_translations : {
                        instructions_visual : "Scrivi le due parole:",
                        instructions_audio : "Trascrivi ci\u00f2 che senti:",
                        play_again : "Riascolta la traccia audio",
                        cant_hear_this : "Scarica la traccia in formato MP3",
                        visual_challenge : "Modalit\u00e0 visiva",
                        audio_challenge : "Modalit\u00e0 auditiva",
                        refresh_btn : "Chiedi due nuove parole",
                        help_btn : "Aiuto",
                        incorrect_try_again : "Scorretto. Riprova.",
                },
                lang : 'it', // Unavailable while writing this code (just for audio challenge)
                theme : 'red' // Make sure there is no trailing ',' at the end of the RecaptchaOptions dictionary
        };
</script>

RecaptchaOptions 참조

RecaptchaOptions 사전에서 다음 필드를 설정할 수 있습니다.

키	가능한 값	기본값	의미
테마	'빨간색' | '흰색' | '블랙 글래스' | '깨끗함' | '맞춤'	'빨간색'	reCAPTCHA에 사용할 테마를 정의합니다. 빨간색, 흰색, 검은색 글래스, 클린 테마는 reCAPTCHA가 사용자 인터페이스를 제공하는 사전 정의된 테마입니다. 맞춤 테마에서는 사이트에서 reCAPTCHA 모양을 완벽하게 제어할 수 있습니다.
lang	지원되는 언어 코드.	'en'	사전 정의된 테마의 인터페이스에서 사용되는 언어 지원되는 언어는 다음과 같습니다. 언어 코드 영어 en 네덜란드어 nl 프랑스어 fr 독일어 de 포르투갈어 파인트 러시아어 ru 스페인어 es 튀르키예어 tr 사이트의 언어가 지원되지 않는 경우 언제든지 커스텀 테마 설정을 사용하여 reCAPTCHA를 원하는 언어로 입력할 수 있습니다.
custom_translations	번역 사전	null	reCAPTCHA 문자열의 커스텀 번역을 지정하려면 이 속성을 사용합니다.
custom_theme_widget	DOM 요소의 ID가 포함된 문자열	null	맞춤 테마 설정을 사용하는 경우 이 요소는 위젯이 포함된 div 요소입니다. 사용 방법은 맞춤 테마 설정 섹션을 참고하세요.
탭 색인	모든 정수	0	reCAPTCHA 텍스트 상자의 tabindex를 설정합니다. 양식의 다른 요소에서 tabindex가 사용된 경우 사용자가 더 쉽게 탐색할 수 있도록 설정해야 합니다.

예를 들어 다음 스크립트 태그는 reCAPTCHA를 흰색 테마와 tabindex 2로 만듭니다.

<script>
var RecaptchaOptions = {
   theme : 'white',
   tabindex : 2
};
</script>