빌딩 인 퍼블릭: 29일차 - 성격 카드 공개 경험 구현

텍스트에서 보물로

예쁜 성격 카드를 만들어 놓고 제대로 활용하지 못하고 있었습니다. 엔딩 페이지는 MBTI 결과를 텍스트로만 보여줬습니다. 유형, 설명, 스펙트럼 차트. 기능은 되지만 기억에 남지 않았습니다.

오늘 그걸 바꿨습니다. 이제 I, Robot 스토리를 끝내면 “성격 카드 보기” 버튼을 누르고, 카드가 뒤집히는 애니메이션을 봅니다. 포켓몬 카드팩을 열 때처럼요. 바로 그 경험을 원했습니다.

두 가지 방법을 고민했습니다. 별도 카드 페이지를 만들거나, 엔딩 위에 모달을 띄우거나. 모달 쪽을 선택한 이유는 다음과 같습니다.

카드는 3D 회전 효과로 뒤집히고, 마우스를 올리면 은은한 빛이 반짝입니다. 작은 터치지만, 카드가 실물처럼 느껴지게 합니다.

예상 못 한 문제가 있었습니다. 카드 페이지 URL을 공유하면, 새로운 방문자는 아무것도 볼 수 없습니다. 카드는 브라우저에 저장된 선택 기록에 의존하기 때문입니다. 선택 기록이 없으면 카드도 없습니다.

문제를 보니 해결책이 보였습니다. 페이지가 아니라 카드 이미지 자체를 공유하면 됩니다. 이제 공유 버튼을 누르면 카드 이미지와 함께 스토리 초대 메시지가 전송됩니다. 바이럴 핵심은 URL이 아니라 이미지입니다.

이미지 공유를 지원하지 않는 브라우저를 위한 대체 방식도 있습니다. 이미지를 저장하고, 미리 작성된 공유 텍스트를 복사하면 됩니다.

영어와 한국어 카드가 모두 통합됐습니다. 시스템이 스토리 언어를 감지해서 맞는 카드를 불러옵니다. 한국어 독자는 한국어 카드를, 영어 독자는 영어 카드를 봅니다. 각 언어마다 MBTI 유형별 디자인이 따로 있습니다.

대부분 배관 작업이었습니다. 카드 폴더 정리, 경로 처리 업데이트, 모달 UI 번역. 하지만 주요 타겟인 한국 시장을 위해 중요한 작업이었습니다.

오늘 작업의 실제 범위입니다.

엔딩 페이지가 훨씬 단순해졌습니다. 성격 텍스트가 가득하던 화면 대신, 눈에 띄는 버튼 하나만 있습니다. 이제 카드가 스토리를 말해줍니다.

성격 공개는 공유의 순간입니다. 그 전은 빌드업이고, 그 후는 공유입니다. 그 순간이 밋밋하면 바이럴 루프가 끊깁니다.

카드를 단순한 결과 표시가 아닌 수집 가능한 보물로 다루면 공유에 대한 느낌이 달라집니다. 예쁜 카드는 자랑하고 싶어집니다. 텍스트 덩어리는 그렇지 않습니다.

실제 기기에서 테스트하고 싶습니다. 특히 iOS와 Android의 공유 흐름을요. 데스크톱에서 애니메이션은 부드럽지만, 중요한 건 모바일입니다. 그 다음은 다른 스토리팩에도 카드를 생성하는 게 우선입니다.