Code › tail-villain
기억 훈련을 설명하는 랜딩 페이지
망각 곡선과 RPG 표현을 실제 복습 구조의 설명으로 연결한 랜딩 페이지 개편
랜딩 페이지를 고치다 보니, tail-villain이 무엇을 해주는 제품인지 오히려 흐려질 위험이 생겼다.
표현 재료는 많았다. 빌런, 정복, 흔들리는 카드, 깨지는 지식, 희귀도처럼 보이는 가격 플랜, 마스코트 움직임까지 있었고, 화면은 더 강해질 수 있었으며 RPG 톤도 더 진해질 수 있었다. 그런데 그 모든 장식이 앞에 나오면 사용자가 가장 먼저 이해해야 할 말이 뒤로 밀린다.
이 제품은 기억을 오래 붙잡기 위한 도구이고, 면접장에서 얼어붙지 않도록 배운 것을 다시 꺼내는 연습을 시킨다.
4월 23일과 24일의 랜딩 작업은 단순히 예쁜 페이지를 만드는 일이 아니었다. 기능 목록을 보여주는 페이지에서 벗어나, 사용자가 왜 이 제품을 써야 하는지 설명하는 흐름으로 바꾸는 작업이었다.
처음에는 제품이 가진 요소를 모두 보여주고 싶어진다. AI 로드맵, 모의 면접, 빌런 캐릭터, 기억 곡선, 대시보드, 가격 플랜, 데모 화면 같은 것들은 하나하나 틀린 말이 아니다. 하지만 기능이 많다는 사실만으로는 사용자가 자기 문제를 떠올리기 어렵다.
면접 준비의 문제는 대개 정보를 모르는 데서 끝나지 않는다. 공부할 때는 이해했어도 시간이 지나면 흐려지고, 막상 질문을 받으면 머릿속에 있던 설명이 밖으로 나오지 않는다. 그래서 tail-villain의 핵심은 더 많은 내용을 보여주는 것이 아니라, 잊어버리기 전에 다시 부딪히게 만드는 쪽에 있었다.
그걸 설명하려면 기억 유지와 spaced review가 먼저 보여야 했다. RPG 표현은 그 다음이었다.
Ebbinghaus forgetting curve를 랜딩에 넣은 이유도 그래서였다.
망각 곡선은 사용자를 겁주기 위한 그래프가 아니다. 시간이 지나면 기억이 줄어든다는 당연한 사실을 제품의 행동과 연결해주는 장치다. 오늘 본 내용을 며칠 뒤 다시 물어보는 이유, 약한 토픽을 다시 열어두는 이유, session report가 다음 복습의 입력이 되는 이유를 한 화면에서 설명할 수 있다.
다만 그래프만 넣는다고 제품 이야기가 되는 건 아니었다. 축 label과 legend를 정리하고, retention decay를 시각적으로 보여주더라도, 결국 사용자가 이해해야 하는 문장은 간단하다. 그냥 많이 공부하라는 게 아니라, 잊히기 전에 다시 꺼내보게 만든다는 것이다.
이 차이가 중요했다. tail-villain은 공부량을 과시하는 제품이 아니라 회상 연습을 구조화하는 제품이기 때문이다.
RPG 톤은 계속 남겼다. 빌런을 무찌르고, 흔들리는 토픽을 방어하고, 정복한 상태를 시각적으로 강하게 보여주는 표현은 이 제품의 성격과 잘 맞는다. 건조한 학습 관리 화면으로 만들면 tail-villain이 가진 에너지가 사라진다.
하지만 RPG가 제품의 설명을 대신하면 안 됐다. 정복이라는 단어가 먼저 나오고 왜 다시 복습해야 하는지는 뒤에 나오면, 사용자는 게임처럼 보이는 화면은 기억해도 실제 효용은 놓친다. 가격 플랜도 희귀도 스타일로 꾸밀 수는 있지만, 결국 사용자가 알아야 하는 건 어떤 제한과 어떤 가치가 있는지다.
과장보다 구조가 오래 간다.
대시보드와 토픽 카드도 같은 긴장 안에 있었다.
토픽이 unstable 상태일 때 흔들림이나 crack animation을 주면, 사용자는 지금 이 지식이 약해지고 있다는 상태를 빠르게 읽는다. 다만 애니메이션은 상태를 설명하는 보조 장치여야지, 상태를 대체하면 안 된다.
그래서 dashboard hierarchy를 정리하면서 roadmap과 topic의 관계를 더 잘 보이게 만들었고, 사용자가 이 토픽이 어느 흐름 안에 있는지와 지금 어떤 행동을 해야 하는지 빠르게 이해하도록 했다. 자동 polling을 계속 돌리는 대신 수동 refresh와 짧은 전환 효과를 둔 것도 같은 맥락이다. 눈에 보이는 feedback이 있어야 사용자가 화면의 상태를 믿는다.
인터랙션이 매끄럽다는 건 장식이 많다는 뜻이 아니다. 사용자가 지금 상태를 읽고 다음 행동으로 넘어갈 수 있다는 뜻이다.
4월 24일에는 랜딩 컴포넌트를 더 쪼개고, SSR에서 언어가 튀는 문제를 고치고, beta waitlist까지 붙였다. 마스코트 움직임이나 CTA 주변의 scale 조정 같은 작업도 있었고, 이런 디테일은 첫인상을 만든다. 하지만 첫인상은 제품 설명을 보강해야지, 제품 설명을 가리면 안 된다.
그래서 이 시기의 랜딩 작업을 다시 보면, 질문은 하나로 줄어든다.
사용자가 이 페이지를 보고 tail-villain을 기억 훈련 제품으로 이해하는가.
빌런 캐릭터는 압박감을 만들고, RPG visual은 지루한 복습에 에너지를 준다. 하지만 제품의 중심 문장은 더 단순해야 했다. 배운 건 시간이 지나면 흐려지고, tail-villain은 그 흐려지는 지점을 다시 질문으로 끌어올린다.
이 작업을 하면서 제품 이야기도 시스템 설계처럼 boundary가 필요하다는 생각을 했다.
기술 설계에서는 backend가 소유할 규칙과 frontend가 표현할 상태를 나눈다. 랜딩에서도 비슷했다. retention과 spaced review는 제품의 핵심 규칙이고, RPG는 그 규칙을 느끼게 만드는 표현이다. 둘을 바꾸면 제품은 재미있어 보일 수는 있지만, 왜 써야 하는지는 흐려진다.
tail-villain의 랜딩은 결국 게임을 설명하는 페이지가 아니어야 했다. 사용자가 잊어버리는 문제를 인정하고, 그걸 다시 불러내는 훈련 구조를 보여주는 페이지여야 했다.
빌런은 그 이야기를 기억하게 만드는 얼굴이다. 제품의 이유는 여전히 기억 유지에 있다.