나는 절대 떠나게 하지 않는 CAPTCHA를 만들었다
Source: Dev.to
What I Built
나는 I’m Not a Robot이라는 가짜 CAPTCHA 게임을 만들었습니다.
보통의 인간 인증 흐름처럼 시작합니다:
- 체크박스 클릭
- 이미지 챌린지 해결
- 인증하고 일상으로 돌아가기
하지만 절대로 실제로는 진행되지 않습니다.
주된 농담은 가장 짜증나는 실제 CAPTCHA 경험 중 하나를 기반으로 합니다: 올바른 이미지 타일을 모두 클릭했는데도 계속해서 새로운 타일이 로드됩니다. 때로는 새로운 타일에도 클릭해야 할 대상이 들어 있습니다. 때로는 그렇지 않기도 합니다. 때로는 드디어 끝났다고 생각하지만, 시스템은 전혀 끝나지 않았다고 판단합니다.
그래서 나는 그 짧은 인터넷 좌절감을 전체 제품으로 만들었습니다. 이 프로젝트는 의도적으로 쓸모 없고, 약간 적대적이며, 가장 익숙한 방식으로 여러분의 시간을 낭비하는 데 완전히 전념합니다.
Demo
Live demo: CodePen demo
직접 시도해 보고 CAPTCHA가 개인적인 느낌을 주기 시작할 때까지 얼마나 걸리는지 확인해 보세요.
Code
전체 프로젝트는 가벼운 프론트‑엔드‑전용 프로토타입으로 구축되어 CodePen에 호스팅됩니다.
CodePen: View the code here
How I Built It
먼저 인지하기 쉬운 느낌을, 그 다음에 터무니없게 만들고 싶었습니다.
과도하게 스타일링하거나 미래지향적으로 보이게 하는 대신, 사람들이 이미 알고 있는 익숙한 CAPTCHA 흐름을 닮도록 디자인했습니다:
- 간단한 체크박스 시작
- 파란색 챌린지 헤더
- 3×3 이미지 그리드
- 인증 버튼
- 올바른 타일을 선택한 후 반복되는 이미지 교체
여기서부터 상호작용을 서서히 터무니없게 만들었습니다.
Tech Used
- HTML
- CSS
- Vanilla JavaScript
CodePen을 사용해 호스팅하고 공유했습니다.
The Core Idea
전체 프로젝트에서 가장 중요한 상호작용은 다음과 같습니다: 올바른 타일을 클릭하면 단순히 해결된 상태로 남지 않고 즉시 새로운 타일로 교체됩니다. 마치 여러분의 인내심을 시험하려는 듯한 실제 이미지 CAPTCHA와 같습니다. 이 교체 루프가 바로 농담의 핵심입니다.
조금 더 믿음직스럽게 만들기 위해 다음과 같이 구현했습니다:
- 클릭된 타일만 교체됨
- 일부 교체 타일에는 또 다른 소화전이 포함됨
- 일부 교체 타일에는 포함되지 않음
- 프롬프트가 시간이 지날수록 점점 더 터무니없게 변함
- 챌린지는 여러분이 거의 끝났다고 가장함
- 최종 화면은 여러분이 계속 버틴 것에 대해 벌을 줌
또한 프로젝트가 외부 자산 없이도 자체적으로 실행될 수 있도록 코드 안에 가짜 사진 타일 이미지를 직접 만들었습니다.
Prize Category
나는 주로 Best Ode to Larry Masinter 부문에 제출하고, 가능하면 Community Favorite 부문에도 넣고 싶습니다.
Why Best Ode to Larry Masinter
- 의도적으로 쓸모가 없음
- 익숙한 인터넷 표준 같은 경험을 터무니없는 것으로 변형
- 비트를 완전히 고수함
- 아무도 필요로 하지 않았지만, 인터넷이 어쩐지 받아야 할 것 같은 느낌
Why Community Favorite
- 농담이 즉각적임
- 좌절감이 보편적임
- 거의 모든 사람이 이미지 CAPTCHA를 겪어본 적이 있음
- 이해하고 클릭하고 공유하기 매우 쉬움
Final Thoughts
나는 약 5초 정도는 정상적으로 느껴지다가 서서히 끝없는 가짜 진행 루프에 가두는 무언가를 만드는 아이디어가 마음에 들었습니다. 이는 4월 1일 장난 과제에 매우 적합한 느낌이었습니다.
가장 쓸모 없는 소프트웨어가 기술적으로는 작동하지만 감정적으로는 상황을 악화시키는 소프트웨어라면, 이 프로젝트가 그 조건에 부합한다고 생각합니다.
읽어 주셔서 감사합니다, 그리고 인간임을 증명하는 데 행운을 빕니다.