시작은 탈모 자가진단 질문 하나였다
탈모 정보 서비스를 운영하면서 계속 걸리던 게 있었다.
사람들이 탈모 정보를 처음 찾을 때 약물, 주사, 이식, 두피문신이 한꺼번에 쏟아지는데 정작 "내가 지금 어디쯤인지"를 아무도 정리해주지 않는다.
그러다 생각했다.
진단은 못 하지만(의료법) 유형 분류는 할 수 있지 않나.
의사가 아니어도 "비슷한 고민을 하는 사람들이 뭘 먼저 찾아보는지" 정도는 안내할 수 있다.
MBTI라는 익숙한 포맷에 얹으면, 탈모라는 무거운 주제에 사람들이 웃으면서 들어올 수 있겠다 싶었다.
이 지점이 중요하다.
처음부터 "재미"는 장식이 아니라 기획의 핵심이었다.
탈모 정보는 무겁다.
검색하여 자가진단 하는것조차 스트레스다.
그 문턱을 낮추는 게 목적이었고, 캐릭터와 유형 테스트는 그걸 위한 의도적 선택이었다.
흥미롭게도 의료법이라는 제약이 오히려 기획을 날카롭게 만들었다.
"진단하면 안 된다"는 벽에 부딪히자 "그럼 뭘 할 수 있나"를 파고들게 됐고, 그게 유형 안내라는 답으로 이어졌다. 제약이 방향을 좁혀준 셈이다.
방대한 초안, 그리고 덜어내기
여기서부터가 진짜다. 이 프로젝트는 코드보다 판단이 훨씬 많았다.
유형은 몇 개여야 하는가
처음 초안엔 유형이 3개뿐이었다.
성의 없어 보였다.
그렇다고 무작정 늘리면 분기가 감당이 안 된다.
탈모케어랩 내부페이지의 실제 갈래(초기, M자, 정수리, 적극관리, 치료, 커버, 원형, 여성 헤어라인, 안전)를 하나씩 따져가며 9개에 중도 포기형을 더해 수렴시켰다.
각 유형이 그냥 "재미 결과"로 끝나면 안 됐다.
각 유형이 실제 콘텐츠 페이지로 이어지는 통로여야 했다.
그래서 유형을 정할 때마다 "이게 어느 페이지로 연결되는가"를 같이 물었다.
유형 설계가 곧 사이트 구조 설계였다.
설계에서 특히 신경 쓴 건 원형탈모다.
원형탈모는 다른 유형과 축이 완전히 다르다.
성별과 나이에 무관하고, 갑자기 생기고, 긴급성이 높다.
이걸 다른 유형들과 같은 점수 계산에 섞으면 엉뚱한 결과가 나온다.
그래서 두 번째 질문에서 즉시 분기시켜, 다른 경로로는 절대 이 결과가 안 나오게 격리했다.
쏟아진 카피를 쳐내는 일
캐릭터 카피는 수십 개 초안이 나왔다.
개그가 과하면 싸구려가 되고, 약하면 안 웃기다.
의료법 선을 넘으면 아예 못 쓴다.
재미와 정확성과 합법성, 이 셋의 교집합만 골라내는 게 일이었다.
예를 들어 원형탈모 캐릭터 카피에 처음엔 "스트레스가 동그라미를 그리고 갔다"가 있었다.
웃기다. 근데 원형탈모 원인은 의학적으로 스트레스라고 단정할 수 없다.
자가면역 등 복합적이다.
재미를 위해 부정확을 넣을 순 없었다.
"어느 날 갑자기 은하수가 생겼다"로 바꿨다.
원인 단정 없이, 현상만, 그래도 웃기게.
정수리 적극관리 캐릭터인 '정수리 119'도 마찬가지였다.
초안엔 "당장 병원 가라"는 직접 지시가 있었는데, 이건 특정 행동을 지시하는 거라 의료광고로 오해될 수 있다.
"지금 알아볼 타이밍"으로 톤을 낮췄다.
사이렌 같은 급박함은 살리되 지시는 뺐다.
결과 화면의 그래프도 그랬다.
처음엔 "당신은 진행도 62% 지점" 같은 걸 생각했는데, 이건 진단에 너무 가깝다.
의학적 진행도를 판정하는 것으로 읽힐 수 있다
대신 "비슷한 고민을 하는 분들이 이 구역 정보를 많이 찾아봐요"라는 관심 밴드로 바꿨다.
진행도를 재는 게 아니라 관심 위치를 보여주는 것.
같은 시각화도 프레이밍 하나로 진단과 정보 안내를 가른다.
캐릭터에 이름을 붙이는 일
유형에 "동전 포착범", "정수리 119", "흑채 반죽이" 같은 이름을 붙였다.
그냥 "정수리형"이 아니라.
이유가 있다.
사람은 "나 정수리형 나왔어"보다 "나 동전 포착범 나왔어ㅋㅋ"를 공유한다.
이름 자체가 바이럴 장치다.
결과 유형명이 곧 캐릭터 IP가 되도록 설계했다.
혼자 하지 않았다, AI 협업의 실제
이 규모를 혼자 다 쳐내는 건 무리였다. 역할을 나눴다.
기획과 최종 판단은 내가 했다. 무엇을 만들고 무엇을 버릴지는 사람이 결정한다.
유쾌한 카피 초안은 제미나이에게 맡겼다.
개그와 B급 감성은 이쪽이 잘한다.
살 붙이기와 검수, 구현은 클로드에게 맡겼다. 논리 검증과 코드는 이쪽.
캐릭터 이미지는 이미지 생성 AI를 썼다.
핵심은 AI가 초안을 쏟아내고 사람이 골라낸다는 구조다.
그리고 한 AI가 던진 걸 다른 AI가 검수하게 했다.
카피 AI가 유쾌하게 던지면 검증 AI가 의료법과 논리를 짚고, 최종 판단은 내가 했다.
AI끼리 교차 검증을 시키니 각자의 약점이 서로 보완됐다.
이번 작업에서 내 역할의 대부분은 "만들기"가 아니라 "고르기"였다.
AI는 100개를 만들어주지만, 그중 쓸 3개를 고르는 건 결국 사람의 몫이다.
구현, 생각을 작동하게 만들기
기획이 굳고 나서야 코드였다.
순서가 중요했다.
유형과 분기가 확정 안 된 상태에서 이미지부터 만들면 다 다시 그려야 한다.
작동 골격(HTML 프로토타입)을 먼저, 이미지는 나중에.
프로토타입은 이미지 자리에 네모 플레이스홀더만 두고, 질문과 분기와 결과가 실제로 작동하는지부터 확인했다.
그런데 로컬에선 완벽하던 게 워드프레스로 넘어가니 깨졌다. 여기서 삽질이 시작됐다.
삽질 기록, CSS가 사이트 전체를 밀어버렸다
프로토타입 땐 편하다고 * { margin:0; padding:0 }과 body {}를 썼다.
독립 HTML에선 문제없다.
근데 이걸 워드프레스에 넣으니 테마 전체 레이아웃이 무너졌다.
전역 셀렉터가 사이트의 모든 요소를 건드린 것.
모든 클래스에 hmbti- 프리픽스를 붙이고, :root 변수와 @keyframes까지 전부 격리해서 .hmbti-app 컨테이너 안에 가뒀다.
위젯 하나가 사이트 전체에 영향을 주지 않게 하는 건 기본인데, 프로토타입의 편의가 배포에서 발목을 잡았다.
내가 만든 버그
프리픽스를 자동으로 붙이는 스크립트를 짰다. 편하려고. 근데 이게 과했다.
CSS 클래스만 바꿔야 하는데 JS 객체 속성명(.options, .band)까지 .hmbti-options로 바꿔버렸다.
문제는, 자바스크립트에서 q.hmbti-options는 q.hmbti 빼기 options로 읽힌다.
하이픈이 빼기 연산자가 되면서 SyntaxError가 나고, 스크립트 전체가 죽는다.
버튼이 하나도 안 눌렸다.
교훈은 두 가지다.
자동 변환은 편하지만 문맥을 모른다.
그리고 node -c 한 번이면 잡혔을 문법 에러였다.
자동화를 믿되 검증은 따로.
인스타 썸네일과 메타 캐시
결과를 공유하면 인스타 DM에 링크 미리보기가 떠야 하는데, 이미지가 "로드 불가"로 나왔다.
원인은 og:image 파일명이 한글이라 인스타가 URL을 못 읽은 것.
영문으로 바꿨다.
그런데도 안 떴다.
브라우저 캐시를 아무리 지워도 소용없었다.
진짜 원인은 메타 서버 캐시였다. 메타는 URL을 처음 긁을 때 og 정보를 자기 서버에 저장하는데, 예전의 깨진 이미지가 거기 박혀 있던 것.
페이스북 공유 디버거에서 "다시 스크랩"을 눌러야 갱신된다.
내 쪽에서 뭘 해도 안 되는 이유가 이거였다.
이걸 몰라 한참 돌아갔다.
onclick을 버리다
버튼 이벤트도 문제였다.
onclick="start()"가 함수를 못 찾았다.
WPCode가 JS를 감싸면서 전역 함수가 안 보이게 된 것.
결국 onclick을 다 버리고 addEventListener로 바꿨다.
전역 스코프에 의존하지 않으니 어떤 환경에서도 확실하다.
결과 카드, 공유를 설계하다
바이럴이 목적이니 공유가 쉬워야 했다.
결과를 인스타 스토리에 올릴 수 있게 canvas로 1080x1920 세로 카드를 그려서 다운로드하게 했다.
캐릭터, 유형명, 한 줄 요약, CTA.
여기서 작은 디테일 하나. 카드 하단 CTA를 "링크"가 아니라 "탈모케어랩 탈모 MBTI 검색"으로 했다.
이미지 속 URL은 클릭이 안 되기 때문이다.
이번에 만든 탈모 MBTI는 마케팅의 언어로 정의하면 ‘인터랙티브 리드 콘텐츠’에 가깝다.
정보를 일방적으로 보여주는 대신 사용자가 직접 참여하고, 결과를 통해 자신과 관련된 정보를 더 찾아보거나 다음 페이지로 이동하게 만드는 방식이다.
중요한 건 테스트 자체가 아니다.
검색으로 들어온 사람을 참여시키고, 그 참여를 정보 탐색과 다음 선택으로 이어지게 만드는 구조다.
옵티스랩에서는 이런 인터랙티브 콘텐츠 역시 하나의 고객 유입 방식으로 보고 기획한다.
마치며, 만드는 일과 고르는 일
하루 만에 기획부터 배포까지 끝냈다.
빠르게 한 것 같지만 사실 대부분의 시간은 버리는 데 썼다.
수십 개의 카피, 여러 개의 유형 안, 분기 구조들.
만드는 건 AI가 도왔지만 무엇을 남길지는 계속 사람이 판단해야 했다.
개발도 마찬가지였다.
삽질의 대부분은 "새로 만드는" 문제가 아니라 "이미 만든 게 왜 다르게 동작하는가"였다.
로컬과 배포 환경의 간극, 자동화가 만든 사고, 서버 캐시처럼 눈에 안 보이는 벽.
좋은 결과물은 좋은 걸 더하는 게 아니라,
덜 좋은 걸 덜어내고 안 보이는 걸 잡아내는 일이라는 걸 다시 느꼈다.
