오늘 하루 종일 매달려서 카드 인증 시스템(CARD GATE)을 완성했다. 실물 회원카드를 사진으로 두 번 인증하면 — 앞면 마크, 뒷면 QR — 그 회원만 볼 수 있는 "숨겨진 페이지"가 열리는 기능이다.
어떻게 작동하나
- STEP 1: 카드 앞면 사진을 픽셀 분석(밝기·엣지 검출)해서 엠보싱 마크를 판정한다.
- STEP 2: 카드 뒷면 QR을 스캔한다. 이 QR은 회원코드를 그대로 넣은 게 아니라 암호화해서 만든 것으로, 그 자체가 비밀번호 역할을 한다.
- 둘 다 통과하면, 암호화돼있던 "숨겨진 페이지"를 그 자리에서 복호화해서 보여준다.
카드 생성 페이지도 손봤다
기존에 있던 자유입력 칸을 "THE B SOCIETY CODE"로 바꿨다. 코드를 입력하면 QR로 변환돼서 카드 이미지의 마크 자리에 그대로 합성된다. 이미지를 저장하면 QR이 포함된 최종 이미지가 통째로 저장되는데, 이게 곧 STEP 2에서 스캔하는 "카드 뒷면"이 되는 셈이다. "하고 싶은 말" 자유 입력 칸은 세 번째 칸으로 따로 복원해뒀다.
자잘한 버그들
- STEP 1·2의 사진 선택 버튼을 누르면 카메라가 바로 켜지던 문제를 고쳤다 (남아있던 속성 하나가 원인이었다).
- STEP 1의 원형 가이드를 바깥 네모 가이드와 같은 둥근 사각형으로 통일했다.
- 안내 문구를 "THE B SOCIETY 마크가 잘 보이도록 찍어주세요."로 다듬었다.
숨겨진 페이지, "초대장" 새로 디자인
인증을 통과하면 먼저 "초대장" / "THE B SOCIETY 멤버와 그 가족분들만 참여 가능합니다."라는 문구가 뜨고, 그 아래로 네이비+골드 아르데코 청첩장 스타일의 카드가 나타난다. 타이틀은 Pinyon Script 필기체 폰트에 흐르는 금빛 셰이머 효과를 넣었고, 실시간으로 갱신되는 D-day 카운트다운도 붙였다. 화면 크기가 달라져도 카드 안 글자가 넘치지 않게 반응형으로 처리하는 과정에서, 좁은 화면에서 텍스트가 카드 밖으로 삐져나오던 버그도 같이 잡았다.
기술적으로 살짝 까다로웠던 부분 하나 — 암호화를 풀고 나온 콘텐츠를 그냥 innerHTML로 집어넣으면 안에 있는 <script>가 브라우저 정책상 실행이 안 된다. 그래서 createContextualFragment 방식으로 바꿔 넣었더니, 카드 안의 카운트다운 스크립트가 제대로 돌아갔다.
실제 데이터로 교체
회원들 코드와 초대장 디자인을 가지고, 실서비스와 똑같은 암호화 로직으로 실제 데이터 묶음을 새로 생성했다. 기존 데모 카드의 해시값이 새로 만든 값과 완전히 일치하는 걸로 로직이 정확하다는 걸 먼저 확인했고, 이후 브라우저에서 실제 QR 이미지를 만들어 여러 회원 코드를 STEP 2에 직접 스캔시켜 전원 정상 통과하는 것까지 확인했다. 데모용 1건뿐이던 걸 실제 회원 코드 전체로 교체하고 배포를 마쳤다.
보안은 이렇게 잡았다
- 사진·QR 전부 브라우저 안에서만 처리되고, 서버로는 아무것도 올라가지 않는다.
- 회원코드는 평문으로 저장되지 않는다. 조회용 해시만 들어있고, 숨겨진 페이지 내용 자체도 각 회원코드로 파생한 키로 암호화돼있어서 코드를 모르면 소스를 봐도 못 푼다.
- 회원코드를 만들어내는 관리자 도구와 실제 코드 목록 파일은 애초에 git에 올라가지 않도록 걸어뒀다.
디스코드 인증 + 카드 마크 인증 + 회원코드 인증까지 3중 보안이다. 재밌구만.
우리 모임은 이미 특별하지만 더 특별해질 것이고, 그런 미래를 위해 준비해두는 이 작업이 기쁘기 그지없다. 뭐, 만드는 자체가 재밌기도 하지만.