개인화 랜딩 페이지 검수 8건, 인원을 넣자 결론이 1명으로 돌아갔다

개인화 랜딩 페이지는 왜 인원이 많은 회사에게 거꾸로 읽혔나?

개인화 랜딩 페이지가 인원이 많은 회사에게 거꾸로 읽힌 이유는, 인원 수를 화면 절반에만 반영하고 결론부는 여전히 1명 기준으로 말했기 때문입니다. 방문한 회사의 담당 인원을 받아 “이만큼 낭비하고, 이만큼 아끼고, 이 기간에 회수한다”를 보여 주는 페이지였는데, 위쪽 섹션은 인원을 반영했고 아래쪽 섹션과 마지막 문장은 가장 작은 경우로 돌아가 있었습니다. 읽는 사람 입장에서는 앞에서 키워 놓은 논리가 끝에서 스스로 줄어드는 셈이었습니다.

이 페이지는 AI 업무 자동화 서비스의 견적 전 단계 화면입니다. 콜드메일이나 문의 회신 링크에 회사명·업종·직원 수 같은 값을 붙여 보내면, 페이지가 그 값을 읽어 회사 맞춤 문장과 표를 그립니다. 반복 업무를 맡은 담당자가 몇 명인지에 따라 낭비 금액과 절감 금액이 달라지고, 구축비는 인원과 상관없이 같으니 인원이 많을수록 회수가 빨라진다는 것이 이 페이지의 핵심 논증입니다.

비용으로 보면 이 페이지는 영업 첫 장 역할을 합니다. 사람이 미팅에서 설명할 내용을 페이지가 대신 말하기 때문에, 논리가 한 번 꺾이면 그걸 되돌릴 사람이 화면 앞에 없습니다. 더구나 인원이 많은 회사일수록 계약 규모가 크고, 바로 그 회사들이 “1명이면 1.9년” 같은 문장을 보게 되는 구조였습니다. 실패율로 따지면 가장 놓치기 아까운 방문자에게서 설득이 가장 약해지는 배치였습니다.

이 글은 그 페이지를 배포한 직후 사람이 직접 화면을 넘기며 검수했을 때 나온 지적 6건과, 고치면서 추가로 찾은 2건을 정리한 기록입니다. 처음에 무엇을 옳다고 믿었는지, 그 믿음이 어디서 깨졌는지, 고친 뒤 무엇을 다시 쟀는지를 순서대로 적습니다. 비슷한 숫자 개인화 페이지를 만드는 분께는 수치 블록과 링크가 서로 어긋나 신뢰를 깎은 다른 사례도 함께 참고가 될 것 같습니다.

처음 잰 숫자: 지적 6건, 근거 없는 312만 원, 할인율 10~20%

측정은 자동 테스트가 아니라 사람의 화면 검수로 시작했습니다. 배포된 페이지를 실제 방문자처럼 열고, 섹션마다 숫자와 문장이 앞뒤로 맞는지 읽어 내려가는 방식입니다. 이 검수에서 나온 지적은 6건이었습니다. 숫자가 하나라도 걸려 있는 지적은 모두 그 숫자를 함께 적어 두었습니다.

첫째, 인원별 비교 카드가 1명·3명·5명 순으로 올라가다가 배열 끝에서 다시 1명 카드로 돌아갔습니다. 같은 자리에서 React key 충돌 경고도 함께 났기 때문에 문구 문제가 아니라 실제 버그였습니다. 둘째, 첫 화면에 312만 원이라는 금액이 크게 적혀 있었는데, 어떤 조건에서 나온 숫자인지 화면 어디에도 없었습니다. 읽는 사람에게는 근거 없는 단정으로 보였습니다.

셋째, ② 낭비 섹션은 인원별 금액을 보여 주는데 ③ 아끼는 돈 섹션은 1인 기준 단일값만 보여 주었습니다. 인원 축이 절반만 반영된 상태였습니다. 넷째, 회수 기간을 말하는 문장이 “본전입니다”로 끝났는데, 이 표현이 서비스를 저렴하게 읽히게 만들었습니다. 다섯째, 사례 소개 할인율이 10~20%로 적혀 있었지만 실제로 집행한 할인은 790만 원에서 490만 원, 즉 37.9%였습니다. 여섯째, 상담 신청 폼의 선택지가 3지선다뿐이라 어느 쪽에도 맞지 않는 문의를 받을 칸이 없었습니다.

고치는 과정에서 검증을 하다가 2건이 더 나왔습니다. 업종을 판정하지 못했을 때 쓰는 기본 그룹의 라벨이 빈 문자열이었고, 그래서 `grp.label || companyName` 이라는 코드가 업종이 들어갈 자리에 회사명을 넣고 있었습니다. 또 회사명을 모르는 채로 들어온 방문자에게는 “귀사”라는 단어가 그대로 노출되고 있었습니다. 합하면 지적은 8건이었습니다.

처음에 세운 가설은 무엇이었나?

처음 설계에는 가설이 크게 세 개 깔려 있었습니다. 지금 보면 셋 다 그럴듯했고, 셋 다 일부는 틀렸습니다. 실패한 가설을 지우지 않고 그대로 적어 두는 이유는, 같은 종류의 페이지를 만들 때 똑같은 자리에서 다시 넘어지기 쉽기 때문입니다.

첫 번째 가설은 “고정 카드 몇 장 뒤에 방문 회사의 인원 카드를 하나 붙이면 비교가 완성된다”였습니다. 1명·3명·5명은 누구에게나 보여 주는 기준점이고, 그 뒤에 방문 회사 카드가 붙으면 자기 위치를 바로 찾을 수 있다고 봤습니다. 코드로는 `[1,3,5].concat([{n:people}])` 한 줄이었습니다.

두 번째 가설은 “첫 화면 금액은 하나로 고정해 두는 편이 안전하다”였습니다. 실제로 검토한 대안 중 하나가 직원 수를 무시하고 첫 화면에 항상 312만 원을 고정하는 안이었습니다. 숫자가 바뀌지 않으니 설명할 일이 줄어든다는 계산이었습니다.

세 번째 가설은 “인원별 회수 기간 예시를 숫자로 보여 주면 구체성이 올라간다”였습니다. 결론부 문장에 1명·3명·5명일 때 각각 몇 년이면 회수하는지 예시를 붙이면, 읽는 사람이 자기 경우를 쉽게 짐작할 거라고 판단했습니다. 구체적인 숫자가 추상적인 문장보다 설득력이 높다는 일반론을 그대로 따른 선택이었습니다.

네 번째 가설은 페이지 밖, 링크 쪽에 있었습니다. 고객 문의에 회신하는 링크는 전부 개인화 페이지로 가는데 콜드메일 링크는 29%만 개인화 페이지로 가고 나머지 71%는 예전 진단 페이지로 가고 있었습니다. 처음에는 이 71%가 개인화 효과를 비교하려고 일부러 남겨 둔 A/B 대조군이라고 판단했고, 그렇게 설명까지 했습니다. 설계 문서에 A/B 대조군 이야기가 실제로 적혀 있었기 때문에 의심 없이 그 칸에 맞춰 읽었습니다.

가설이 틀린 지점

첫 번째 가설은 배열 끝에서 깨졌습니다. 고정 배열 뒤에 방문 회사 카드를 이어 붙이기만 하고 중복을 지우거나 다시 정렬하지 않았기 때문에, 카드 순서가 끝에서 1명으로 돌아가는 화면과 React key 충돌이 같이 나왔습니다. 직원 수 30명으로 들어온 경우가 이 중복을 재현하는 케이스로 따로 잡혔습니다. 비교 카드는 오름차순으로 올라가야 “인원이 늘수록 이득이 커진다”는 논증과 같은 방향을 가리키는데, 끝에서 내려앉으니 그림이 논증을 배신했습니다.

두 번째 가설은 기각 사유가 분명했습니다. 직원 수를 이미 알고 있는데 첫 화면에서 그걸 버리고 312만 원을 고정하면, 개인화라는 장치 전체가 의미를 잃습니다. 고정 금액이 안전해 보였던 이유는 근거를 설명하지 않아도 되기 때문이었는데, 바로 그 “설명 없음”이 검수에서 근거 없는 단정으로 지적받았습니다. 숫자를 고정하는 것이 문제가 아니라 숫자의 조건을 숨긴 것이 문제였습니다.

세 번째 가설은 가장 늦게 깨졌습니다. 직원이 많은 회사, 예를 들어 13명인 회사의 페이지 아래에 “1명이면 1.9년” 같은 문장이 붙으면, 앞에서 인원이 많을수록 유리하다고 말해 놓고 결론에서 가장 불리한 최소 사례를 보여 주는 꼴이 됩니다. 검수에서 지적한 카드 회귀와 정확히 같은 모양의 역행이었습니다. 구체적인 숫자가 늘 설득력을 높인다는 일반론은, 그 숫자가 논증 방향과 반대쪽을 가리킬 때는 성립하지 않았습니다.

네 번째 가설은 “정말 A/B 테스트 때문이냐”는 되물음 하나에 무너졌습니다. 커밋 기록을 문자열로 다시 뒤져 보니, 그 갈래를 옮기지 않은 이전 커밋은 다른 갈래 하나만 옮긴다고 적었을 뿐이고 남은 갈래를 대조군으로 설계했다는 근거는 어디에도 없었습니다. 설명을 먼저 정해 놓고 기록을 그 설명에 맞춰 읽은 셈이었습니다. 이 가설 때문에 개인화가 필요한 링크 424건이 그대로 구 페이지로 새고 있었습니다.

진짜 원인은 무엇이었나?

지적 8건을 한 줄씩 고치다 보니 공통점이 보였습니다. 개별 문장이 틀린 게 아니라, 인원이라는 축을 페이지 전체에 일관되게 관통시키지 않은 것이 원인이었습니다. 낭비 섹션은 인원을 반영했고, 아끼는 돈 섹션은 1인 값이었고, 회수 문장은 최소 사례를 예시로 들었고, 첫 화면 금액은 조건을 말하지 않았습니다. 섹션마다 기준이 달랐습니다.

이렇게 기준이 섞이면 각 섹션은 혼자서 맞는 말을 해도 페이지 전체로는 논증이 끝에서 무너집니다. 스케일 논증은 “구축비는 고정이고 절감은 인원에 비례한다”는 한 문장으로 요약되는데, 이 문장이 성립하려면 절감·회수·구축비를 말하는 모든 자리가 같은 인원 값을 써야 합니다. 그중 한 곳이라도 1인 값으로 남아 있으면, 읽는 사람은 그 1인 값을 결론으로 받아들입니다.

빈 라벨과 “귀사” 노출도 같은 뿌리였습니다. 값이 없을 때 무엇을 보여 줄지 정해 두지 않으니, 코드가 근처에 있는 아무 값이나 끌어다 썼습니다. `grp.label || companyName` 은 라벨이 빈 문자열이면 회사명을 쓰라는 뜻인데, 기본 그룹의 라벨이 빈 문자열이었으니 업종 자리에 회사명이 들어갔습니다. 개인화 페이지에서 기본값은 예외 처리가 아니라 본문의 일부라는 점을 이때 확인했습니다. 링크에 값이 빠진 채로 들어오는 방문자도 실제 독자이고, 그 사람이 읽는 문장도 똑같이 설계해야 합니다. “귀사” 한 단어가 보이는 순간 이 페이지가 자기 회사를 위해 만든 화면이라는 인상은 사라집니다.

이후 같은 페이지의 유입 경로를 점검하면서 이 원인이 더 넓게 퍼져 있다는 사실도 드러났습니다. 콜드메일 링크를 만드는 스크립트가 회사명과 업종 그룹 값을 넘기지 않아서, 메일을 받고 들어온 회사도 회사명 없이 기본값 “귀사”로 렌더링되고 있었습니다. 페이지만 고쳐서는 닫히지 않는 문제였습니다.

어떻게 고쳤나: 인원 축을 페이지 전 섹션에 맞추기

카드 배열은 `Array.from(new Set([1,3,5,people])).sort()` 로 바꿨습니다. 집합으로 중복을 지운 뒤 정렬하고, 방문 회사 카드만 브랜드 색으로 강조했습니다. 방문 회사의 인원이 1·3·5 중 하나여도 카드가 두 번 나오지 않습니다.

첫 화면 금액에는 기준을 말하는 슬롯을 새로 만들었습니다. 인원이 1명이면 “가장 보수적인 기준”, 1명보다 많으면 “담당 N명·반복 업무 1개 기준”이라고 금액 옆에 밝힙니다. 금액을 고정하지 않고 조건을 드러내는 쪽을 골랐습니다. ③ 아끼는 돈 섹션에는 ② 낭비 섹션과 같은 인원별 절감액 표를 추가해서, 두 섹션이 같은 인원 축을 쓰게 맞췄습니다.

회수 문장은 “본전”을 “회수”로 바꾸고, 회수 기간이 1년 미만이면 개월로 환산해 보여 주도록 했습니다. 결론부에는 숫자 예시 대신 원리를 말하는 문장을 넣었습니다. “구축비는 인원 수와 무관하고, 시스템 한 벌의 처리량에는 인원 상한이 없습니다. 담당이 2배면 절감도 2배, 회수 기간은 절반입니다.” 1명·3명·5명 회수 기간 숫자 예시는 일부러 넣지 않았습니다.

나머지는 작은 수정이었습니다. 사례 소개 할인율은 실제 집행 37.9%를 근거로 10~20%에서 37~49%로 고쳤습니다. 상담 폼에는 “기타”를 더해 3지선다를 4지선다로 바꿨습니다. 기본 업종 그룹의 빈 라벨은 “동종”으로 채웠고, “귀사” 노출은 `{company:폴백}` 처럼 값이 없을 때 쓸 문구를 문장 안에 바로 적는 기본값 문법으로 바꿨습니다.

변경은 PR #110 하나로 묶었고, 페이지 컴포넌트와 문구 파일 2개에서 109줄을 더하고 38줄을 지웠습니다. 다음 날에는 링크 쪽 누수도 막았습니다. 앞에서 적은 대로 대조군이 아니었던 그 갈래의 실험이 보는 지표는 열람 대비 클릭률이고 클릭은 착지 페이지에 닿기 전에 확정되므로, 착지 페이지를 바꿔도 실험이 흐트러지지 않았습니다. 그래서 그 갈래를 개인화 페이지로 옮기고, 회사명과 업종 그룹 값도 함께 넘기도록 고쳤습니다.

재측정 결과는 어떻게 나왔나?

재측정은 두 층으로 했습니다. 먼저 타입 검사(`tsc --noEmit`)와 프로덕션 빌드(`next build`)가 통과하는지 봤고, 그다음 서버에서 렌더링한 결과물을 세 가지 진입 조건으로 직접 열어 문자열을 셌습니다. 세 조건은 파라미터 없이 들어온 경우, 직원 수 126명인 경우, 그리고 중복을 재현하던 직원 수 30명인 경우입니다.

결과는 카드 중복 0, “본전” 노출 0회, “37~49%” 노출 1회, 상담 폼 선택지 4개였습니다. 고치기 전과 비교하면 카드가 배열 끝에서 1명으로 돌아가는 현상이 사라졌고, 할인율은 실제 집행과 같은 구간을 말하게 되었으며, 폼은 3지선다에서 4지선다가 되었습니다. 검수 지적이 화면 문자열로 바뀌어 기계가 셀 수 있는 형태가 되었다는 점이 이번 재측정의 가장 큰 소득이었습니다.

링크 쪽 재측정도 했습니다. 콜드메일 발송 대기열 955건을 다시 만들어 세어 보니, 한 갈래 288건과 옮긴 갈래 424건을 합친 712건이 개인화 페이지로 갔습니다. 콜드메일에서 개인화 페이지로 가는 비율이 29%에서 74%로 올라갔습니다. 다른 실험의 대조군으로 쓰던 243건만 의도적으로 구 페이지에 남겼습니다. 테스트는 463건이 통과했고, 실패 4건은 이번 변경과 무관하게 기존 브랜치에도 똑같이 있던 실패였습니다.

한 가지는 정직하게 적어 둡니다. 코드가 머지된 시점에 Vercel 무료 플랜의 하루 배포 한도 100건을 이미 넘긴 상태라, 고친 내용이 실제 사이트에 바로 반영되지 못했습니다. 한도가 초기화된 뒤 다시 배포해야 했습니다. 머지가 곧 반영이라고 가정했다면 고친 줄 알고 넘어갔을 지점입니다.

남는 한계는 무엇인가?

첫 번째 한계는 구체성입니다. 인원별 회수 기간 숫자 예시를 빼면서 결론부는 원리 문장만 남았습니다. 논리가 끝에서 역행하는 문제는 사라졌지만, “그래서 우리 회사는 몇 달이면 회수하느냐”는 질문에 결론부가 직접 답하지는 않습니다. 이 값은 인원별 표에서 찾아 읽어야 합니다.

두 번째 한계는 계산식 자체였습니다. 한 달쯤 뒤 같은 페이지를 다시 진단했을 때, 회수 기간 계산이 월 19만 원 유지비, 연으로 228만 원을 빼지 않고 절감액만으로 계산해 실제보다 짧게 표시된다는 사실이 나왔습니다. 이번 정정이 인원 축을 맞췄을 뿐 계산의 입력값까지 검증하지는 않았다는 뜻입니다. 이후 절감액에서 12×190,000원을 뺀 순절감으로 다시 계산하고, 순절감이 0 이하면 “회수 안 됨”을 그대로 보여 주도록 바꿨습니다. 테스트 5건을 추가했고 전체 테스트 141건이 통과했습니다.

그 결과 담당 1~2명인 작은 회사에게는 이제 불리한 숫자가 그대로 보입니다. 40% 절감을 가정하면 1명은 회수가 안 되고, 2명은 16.2년이 걸립니다. 인원이 많을수록 유리하다는 논증은 그대로 맞지만, 반대로 인원이 적은 회사에게 이 서비스가 이득이 아닐 수 있다는 사실도 함께 드러났습니다. 개인화는 설득 장치이기 전에 계산을 정직하게 보여 주는 장치여야 한다는 점을 이 단계에서 다시 확인했습니다.

세 번째 한계는 공개 문구와 실제 협상 사이의 간격입니다. 페이지에는 사례 소개 할인 37~49%를 적고 “정확한 비율은 업무 범위 확정 후 상담에서 결정”이라는 괄호를 달았는데, 이후 실제 견적에서는 1,050만 원 구축에 할인 20%를 적용한 840만 원으로 제안한 건이 생겼습니다. 공개 하한 37%를 그대로 적용했다면 660만 원 선이었습니다. 괄호 문구로 설명은 가능하지만, 고객이 물으면 왜 공개 하한보다 낮은 할인인지 따로 설명해야 합니다. 숫자를 실제 집행에 맞춘 정정이, 다음 집행에서는 다시 어긋날 수 있다는 뜻입니다.

네 번째 한계는 발견 경로입니다. 지적 8건 중 6건은 사람이 화면을 직접 넘기며 찾았고, 자동 검사는 그 뒤에 따라붙었습니다. 재측정에 쓴 문자열 개수 확인도 진입 조건 3케이스에 한정됩니다. 직원 수가 1·3·5 중 하나인 경우나 업종을 판정하지 못한 경우처럼 경계에 있는 값은 이번 재측정 범위 밖이라, 같은 종류의 역행이 다른 인원 값에서 다시 나올 여지는 남아 있습니다. 검수에서 찾은 문제를 다음부터는 진입 조건 목록으로 바꿔 두는 일이 필요했습니다.

정리하면, 이번 정정으로 인원이라는 축은 페이지 전 섹션에 맞췄고 그 결과를 문자열 개수로 다시 셀 수 있게 되었습니다. 계산식의 입력값과 공개 문구의 범위는 그 뒤에도 따로 점검해야 했습니다. 숫자로 설득하는 페이지를 직접 운영하면서 같은 고민을 하고 계시다면 상담에서 이야기 나눠도 좋습니다.