메일침프 임베디드 폼 한글화 하는 방법 (Embedded forms)

메일침프 임베디드 폼(Embedded form)은 필드를 입력하고 제출 버튼을 누르면기 폼 유효성 검사를 해줍니다. 그래서 이메일 형식이 어긋나거나, 필수 입력필드를 비워뒀다고 경고 메시지가 나오고 사용자가 수정할 수 있게끔 안내를 해줍니다.

메일침프 제너럴 폼(General form)의 경우 번역하기 기능이 있어서 경고 메시지를 한국어로 바꿀 수 있습니다. 하지만 경고 메시지를 한국어로 바꾸더라도 메일침프 임베디드 폼은 경고 메시지가 영문으로 나옵니다.

그 이유는 소스를 살펴보면 알 수 있습니다.


/**
         To customize your embedded form validation messages, place this code before the closing script tag.
      */
     $mcj.extend($mcj.validator.messages, {
         required: "This field is required.",
         remote: "Please fix this field.",
         email: "Please enter a valid email address.",
         url: "Please enter a valid URL.",
         date: "Please enter a valid date.",
         dateISO: "Please enter a valid date (ISO).",
         number: "Please enter a valid number.",
         digits: "Please enter only digits.",
         creditcard: "Please enter a valid credit card number.",
         equalTo: "Please enter the same value again.",
         accept: "Please enter a value with a valid extension.",
         maxlength: $mcj.validator.format("Please enter no more than {0} characters."),
         minlength: $mcj.validator.format("Please enter at least {0} characters."),
         rangelength: $mcj.validator.format("Please enter a value between {0} and {1} characters long."),
         range: $mcj.validator.format("Please enter a value between {0} and {1}."),
         max: $mcj.validator.format("Please enter a value less than or equal to {0}."),
         min: $mcj.validator.format("Please enter a value greater than or equal to {0}."),
         mc_birthday: "Please enter a valid month and day.",
         mc_date: "Please enter a valid date.",
         mc_phone: "Please enter a valid phone number.",
     });

메일침프 임베디드 폼은 자바스크립트로 유효성 검사를 합니다. 만약 검사상 문제되는 부분이 있으면 경고 메시지를 보여주는데 현재 임베디드폼의 소스 코드는 위와 같이 영문 메시지만 지원합니다.

그럼 임베디드 경고 메시지를 한국어로 바꾸려면 어떻게 하면 될까요? 우선 위의 소스코드를 복사한 뒤 경고 메시지를(“따옴표”로 감싸여 있는 부분) 한국어로 번역합니다.


$mcj.extend($mcj.validator.messages, {
         required: "필수 항목입니다.",
         remote: "이 필드를 수정하십시오.",
         email: "올바른 이메일 주소를 입력하십시오.",
         url: "올바른 URL을 입력하십시오.",
         date: "유효한 날짜를 입력하십시오.",
         dateISO: "유효한 날짜 (ISO)를 입력하십시오.",
         number: "유효한 번호를 입력하십시오.",
         digits: "숫자만 입력하십시오.",
         creditcard: "유효한 신용 카드 번호를 입력하십시오.",
         equalTo: "동일한 값을 다시 입력하십시오.",
         accept: "올바른 확장자로 값을 입력하십시오.",
         maxlength: $mcj.validator.format("최대 {0}자 이하의 문자를 입력하십시오."),
         minlength: $mcj.validator.format("최소 {0}자 이상의 문자를 입력하십시오."),
         rangelength: $mcj.validator.format("{0}자 이상 {1}자 이하의 문자를 입력하십시오."),
         range: $mcj.validator.format("{0} ~ {1} 사이의 값을 입력하십시오."),
         max: $mcj.validator.format("{0}보다 작거나 같은 값을 입력하십시오."),
         min: $mcj.validator.format("{0}보다 크거나 같은 값을 입력하십시오."),
         mc_birthday: "유효한 월과 일을 입력하십시오.",
         mc_date: "유효한 날짜를 입력하십시오.",
         mc_phone: "유효한 전화 번호를 입력하십시오.",
     });

위 코드는 제가 해당 경고메시지를 한국어로 번역한 부분입니다. 메일침프에서 이런 메시지 번역 부분을 다국어로 지원하긴 하지만 아쉽게도 한국어는 그 지원 부분에 빠져 있습니다. 대신 한국어는 제가 번역한 아래 코드를 사용하세요.

이것을 적용하려면 임베디드 폼 클래식 모드에서 복사하는 스크립트의 맨 마지막 부분에 있는 바로 전에 넣어주면 됩니다.


(...)
var $mcj = jQuery.noConflict(true);
</script>


이 코드를 다음과 같이 바꿔주세요.


(...)
var $mcj = jQuery.noConflict(true);
$mcj.extend($mcj.validator.messages, {
         required: "필수 항목입니다.",
         remote: "이 필드를 수정하십시오.",
         email: "올바른 이메일 주소를 입력하십시오.",
         url: "올바른 URL을 입력하십시오.",
         date: "유효한 날짜를 입력하십시오.",
         dateISO: "유효한 날짜 (ISO)를 입력하십시오.",
         number: "유효한 번호를 입력하십시오.",
         digits: "숫자만 입력하십시오.",
         creditcard: "유효한 신용 카드 번호를 입력하십시오.",
         equalTo: "동일한 값을 다시 입력하십시오.",
         accept: "올바른 확장자로 값을 입력하십시오.",
         maxlength: $mcj.validator.format("최대 {0}자 이하의 문자를 입력하십시오."),
         minlength: $mcj.validator.format("최소 {0}자 이상의 문자를 입력하십시오."),
         rangelength: $mcj.validator.format("{0}자 이상 {1}자 이하의 문자를 입력하십시오."),
         range: $mcj.validator.format("{0} ~ {1} 사이의 값을 입력하십시오."),
         max: $mcj.validator.format("{0}보다 작거나 같은 값을 입력하십시오."),
         min: $mcj.validator.format("{0}보다 크거나 같은 값을 입력하십시오."),
         mc_birthday: "유효한 월과 일을 입력하십시오.",
         mc_date: "유효한 날짜를 입력하십시오.",
         mc_phone: "유효한 전화 번호를 입력하십시오.",
     });
</script>


참고로 이것은 자바스크립트를 이용한 것이므로 자바스크립트 비활성화(Disable all javaScript) 옵션을 체크 해제한 상태여야만 이용가능합니다. 여기까지 하면 경고 메시지가 잘 번역된 것을 볼 수 있습니다.

다만 이것은 폼 유효성 검사만 번역한 것으로, 만약 인증 메일이나 성공 메시지도 부분도 번역하고 싶으시다면 메일침프 사이트의 제너럴 폼에서 번역 기능을 사용하셔서 바꾸시면 됩니다.