지도에 없는 섬 32개 — 랜딩을 이틀 동안 뜯어고쳤다

랜딩 페이지는 잘 있는 줄 알았습니다. 히어로가 있고, 스크린샷이 있고, 사용자 후기가 있고, 다운로드 버튼이 있으니까요. 앱을 고치는 동안 랜딩은 마음속 “완성된 것” 폴더에 들어가 있었습니다.

이틀 전, 오랜만에 전수 조사를 했습니다. 페이지를 하나하나 세어 보고, 링크를 따라가 보고, 공유하면 어떻게 보이는지 확인했습니다. 결과가 좀 민망했습니다.

조사 결과

• 사용 가이드를 44페이지나 정성 들여 써 뒀는데, 가이드 허브에 링크된 건 12개뿐이었습니다. 나머지 32개는 사이트맵에만 존재하는, 지도에 없는 섬이었습니다. 검색엔진은 찾아가도 사람은 갈 수 없는 곳.
• 사이트 헤더와 푸터가 있는 화면은 홈과 블로그뿐이었습니다. 가이드 88페이지(한/영), 소개, 공개 라이브러리, 약관 — 전부 “← Back” 텍스트 링크 하나가 전부였습니다. 검색으로 가이드에 도착한 방문자에게는 다운로드 버튼도, 다른 곳으로 가는 길도 없었습니다.
• 블로그 글을 SNS에 공유하면 이미지가 안 떴습니다. 기본 OG 이미지가 SVG 로고였는데, 트위터도 카카오톡도 SVG는 렌더링하지 않습니다. 백 편이 넘는 글이 전부 맨몸으로 공유되고 있었던 거죠.
• package.json의 프로젝트 이름은 아직도 Astro 스타터가 지어 준 “orbital-orbit”이었습니다.

부끄러운 목록이지만, 패턴은 하나였습니다. 콘텐츠를 만드는 속도가 잇는 속도보다 빨랐던 겁니다. 가이드도 블로그도 부지런히 쌓였는데, 구조는 페이지가 열 개이던 시절의 첫 설계에 멈춰 있었습니다.

잇기

고치는 것 자체는 오래 걸리지 않았습니다.

헤더와 푸터는 페이지마다 붙이는 대신 공통 레이아웃에 내장하고, 예외(홈, IR 덱)만 옵트아웃하게 바꿨습니다. 페이지 100여 개가 수정 한 줄 없이 한 번에 내비게이션을 얻었습니다. 가이드 허브에는 44페이지 전체 색인을 붙였고, 푸터는 사이트맵 역할을 하도록 넓혔습니다.

OG 이미지는 PNG 폴백으로 바꿨습니다. 여기서 하나 배웠습니다. 소셜 스크레이퍼는 SVG를 읽지 않습니다. og:image에 SVG를 넣으면 에러도 없이, 조용히, 아무것도 보여주지 않습니다. 조용한 실패가 제일 무섭습니다.

블로그 인덱스는 128편 플랫 리스트였던 걸 월별로 묶었고, 죽은 컴포넌트와 스타터 잔재 2만여 줄을 지웠습니다.

만들었다 지운 것

히어로 헤드라인에 글자가 한 자씩 나타나는 애니메이션도 만들었습니다. 그라디언트 텍스트는 글자를 쪼개 움직이면 Safari에서 클립이 깨지는 함정이 있어서, 그걸 피해 가며 꽤 공들여 만들었습니다. 막상 띄워 놓고 보니 답이 나왔습니다. 움직인다는 것 자체는 가치가 아니었습니다. 하루 뒤 전부 지웠습니다. 코드는 사라졌지만 함정 지도는 남았으니 손해는 아니라고 생각하기로 했습니다.

대입하게 만들기

구조를 잇고 나니 더 어려운 질문이 남았습니다. 방문자가 “써 보고 싶다”고 느끼는 순간은 언제인가.

지금까지 랜딩은 보여주고(스크린샷) 설명하는(문단) 페이지였습니다. 그런데 fecit의 차별점 — 목표 하나에 현재·희망·난관·실행 지침·회고까지 이름 붙은 공간이 펼쳐지는 것 — 은 정적으로 보여주면 그냥 폼처럼 보입니다. 이 구조의 가치는 자기 목표를 넣어 봐야 보입니다.

그래서 “하나의 목표가 펼쳐지는 방식” 섹션을 인터랙티브로 바꿨습니다. 10km 달리기, 자격증 시험, 발표 준비, 이직 준비 — 칩을 누르면 그 목표가 여섯 개의 공간으로 펼쳐집니다. 첫 화면에는 실제 앱이 도는 폰 목업을 앉혔고(스무 메가짜리 시뮬레이터 녹화를 516KB로 눌렀습니다), 가입 없이 구경할 수 있는 공개 라이브러리로 가는 길도 히어로에 냈습니다.

배운 것

1. 콘텐츠는 만드는 것보다 잇는 게 문제다. 페이지는 쌓이는데 내비게이션이 첫 설계에 멈춰 있으면, 정성 들인 콘텐츠가 지도에 없는 섬이 된다.
2. 조용한 실패는 정기 순찰이 필요하다. SVG OG 이미지는 어떤 에러도 내지 않았다. 공유가 얼마나 초라하게 보이는지는 직접 공유해 보기 전엔 모른다.
3. 보여주기와 대입하게 만들기는 다르다. 기능 설명은 읽고 끝나지만, 자기 목표를 넣어 본 사람은 다음 화면을 상상하게 된다.

홈에서 목표 칩을 눌러 보실 수 있습니다. 당신의 목표는, 여섯 칸으로 펼치면 어떤 모양인가요?