당신을 적극적으로 싫어하는 Login Portal

Source: Dev.to

개요

DEV April Fools 챌린지를 위해 만든 장난스러운 “프리미엄 보안 포털”. 인증을 불가능하게 만들기 위해 의도적으로 안티‑UX 패턴을 사용하여 일반적인 접근성 및 전환 문제를 뒤집어 놓았습니다.

라이브 데모

• Demo:
• Source:

기술 구현

Panic Multiplier

포털은 커서와 입력 필드 중심 사이의 유클리드 거리를 계산합니다:

[ d = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2} ]

이 거리의 역수를 이용해 탈출 속도를 스케일링하므로, 커서가 가까워질수록 입력 필드가 더 빠르게 도망칩니다. 또한 커서 이동 속도를 고려해 더욱 급박한 탈출을 구현합니다.

UI 동작

• Teleporting Inputs:
  입력 필드는 커서가 200 px 반경 안에 들어오면 즉시 위치를 옮겨 포커스를 방지합니다.

• Parasitic Fields:
  사용자가 “긴급 우회”를 강제하면 이메일 필드에 타이핑할 때마다 비밀번호 필드의 문자를 실시간으로 삭제하는 스크립트가 실행됩니다.

• Disabled Yet Styled:
  필드는 기술적으로 disabled 상태이지만 활성화된 것처럼 스타일링되어 사용자가 하드웨어, 브라우저, 혹은 자신의 정신 상태에 문제가 있다고 착각하게 합니다.

• Glassmorphism & Animations:
  폼은 유리‑모핑 카드 효과, 선형‑그라디언트 키프레임 배경 애니메이션, 그리고 CSS ::before 가상 요소 플레어를 사용해 프리미엄 품질이라는 잘못된 인상을 줍니다.

Gemini‑Assisted Development

Google Gemini는 다음 작업에 사용되었습니다:

• 좌절감을 주는 로직 흐름 브레인스토밍.
• 캐릭터 삭제 스크립트를 반응적이고 자의식 있게 다듬기.
• Panic Multiplier의 탈출‑속도 스케일링 최적화.
• 가짜 제출 순서를 위한 풍자적인 상태 메시지 생성.

상태 메시지 (가짜 제출 순서)

✅ Asking Trump for help...
✅ Verifying database from NASA...
✅ Cross-referencing with CERN...
✅ Almost there... (it never is)

준수

이 포털은 HTCPCP(Hyper Text Coffee Pot Control Protocol, RFC 2324) 표준을 준수합니다. 푸터에는 고전적인 “418 I’m a teapot” 응답을 참조하여, 기능하지 않는 로그인 폼을 커피를 끓이는 것을 거부하는 티팟에 비유하는 유머를 담고 있습니다.

스택

• Vanilla JavaScript
• CSS3 (Glassmorphism 및 키프레임 애니메이션 포함)
• Bootstrap 5
• Google Gemini (브레인스토밍, 스크립트 정제, 메시지 생성용)