스팸필터 모듈의 구글 리캡차는 매우 유용한 기능인데요.

이게 사이즈 문제 때문에 골치가 아플 때가 있습니다.

 

요소 안에 아이프레임이 들어오는 방식이기 때문에 요소 사이즈나 폰트 사이즈를 직접 제어하기가 어렵다는 문제입니다.

가령 모바일에서 가로 폭이 좁아지는 경우에는 padding값 같은 것 때문에 캡차 요소의 사이즈가 디바이스 바깥으로 침범하는 경우도 있죠.

그래서 스팸필터 모듈에서 캡차 크기를 작은 것으로도 해보는데요.

그렇게 되면 한글에 최적화된 게 아니다보니 "로봇이 아닙니다"에서 글자 '다'가 아래줄로 내려오게 됩니다ㅜ

 

(그럴 때는 구글링...)

 

이럴 때 .g-recaptcha 요소에 scale 속성을 주는 것만으로도 제법 효과를 볼 수 있습니다.

캡차 크기가 '일반' 사이즈라 하더라도요.

 

바로 이렇게 하면

.g-recaptcha { transform:scale(0.7); transform-origin:0 0; }

되는 거죠.

0.7 정도면 모바일에서 padding값이 어지간하더라도 버텨볼 만할 겁니다ㅎ

(그래도 디바이스 사이즈를 넘치면 숫자를 더 줄이면 되구요)

 

다만 캡차 요소를 가운데 정렬을 하는 경우에는 요소 크기가 줄어들므로 가운데에서 좌측으로 쏠리는 효과가 생길 겁니다.

그럴 때는 이런 식으로 하면 좋습니다.

.g-recaptcha {
    display: flex;
    justify-content: center;
    transform: scale(0.7);
    transform-origin: 0 0;
    width: calc(100% / 0.7);
}

 

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • profile
    요새는 invisible recaptcha도 많이 사용되는거 같은데, 그걸 활용하는것도 괜찮지 않을까요?
  • profile profile

    아항, 그러게요...
    라르게덴님의 프로알라 에디터에 패키지로 포함되어 있었던 것으로 기억하는데, 라이믹스에서는 그외의 서드파티로는 인비저블 리캡차가 없었었죠? 혹시 있었던가요?

  • profile profile
    음.. 라이믹스에서 적용을 했던거 같기도 아닌거 같기도.. 기억이 잘 나지 않네요 XD

    아마 스팸필터 모듈에 없으면 라이믹스에서는 지원하지 않는게 아닐까요?

    캡챠 v2(클릭식, T or F)이랑 v3(인비저블, 로봇 점수) 처리 로직이 달라서 서로 호환은 안되던걸로 기억해요
  • profile profile
    검색해보니 그렇네요.
    그럼 v3가 일반화될 때까지 이 팁도 유효한 것으로 해주세요 ㅎㅎ
  • profile profile
    예전에 제가 만든 게 있습니다. (타운에서 사용중)
    https://github.com/conory/rx-addon-recaptcha
  • profile profile

    헐 이게 공개되어 있었군요.
    그것도 2년 전에ㄷㄷ

    (와, 라이믹스의 비밀이 또 하나 밝혀졌다!)

    이거면 v2, v3 다 되는 거겠네요?

  • profile profile
    네. v3도 있긴 하지만, 정해둔 수 이하의 점수를 받으면 칼 차단하는 방식이라 선호하지 않습니다.
  • profile profile
    v3가 그런 이슈가 있는 모양이더라구요.
    쿠키 제공으로 인한 불안감도 있는 것 같고요.
    암튼 감사합니다.
    코드 보는 것만으로도 엄청 공부가 되고 있어요 ~☆