Indie Hackers

70% of our template library was actively harmful to the market we were selling to

템플릿 라이브러리의 70%가 공략하려던 시장에 오히려 해를 끼치고 있었습니다

이력서 작성 서비스 운영자가 실제 렌더러 기준으로 템플릿을 세어 보니, 영어권 사용자가 고를 만한 레이아웃은 사실상 두 종류뿐이었습니다. 미국식 템플릿에서도 사진이 PDF에 남는 버그를 발견해 스타일을 단일 기준으로 수정하고, 사용자에게 전달되는 결과물을 검증해야 한다는 교훈을 공유합니다.

AI 요약

이력서 작성 서비스를 운영하는 글쓴이는 중국어 중심으로 시작한 제품에 영어 서비스를 추가한 뒤, 템플릿 라이브러리를 실제 렌더러가 읽는 파일 기준으로 다시 셌습니다. 마케팅에서 내세운 템플릿 수와 사용자가 실제로 선택해 내보낼 수 있는 템플릿 수가 달랐습니다.

숫자와 실제 선택지의 차이

전체 47개는 중국식 이력서 레이아웃이었습니다. 사진 칸, ‘희망 직무’ 문단, 성별과 생년월일을 적는 표가 포함됩니다. 중국에서는 자연스러운 형식이지만 미국식 이력서와는 맞지 않습니다. 미국식이라고 표시한 템플릿은 12개였지만, 실제 선택 가능한 것은 7개뿐이었습니다. 나머지 5개는 몇 달 전에 폐기했는데 표시를 고치지 않았습니다. 선택 가능한 7개 중 3개는 거의 같은 단일 열 헤더를 썼습니다. 영어 사용자가 실제로 고를 수 있는 레이아웃은 두 종류 정도였지만, 팀은 60개가 넘는 템플릿이 있다고 여겼습니다.

‘photoless’가 막지 못한 사진

더 큰 문제는 ‘photoless’라는 플래그였습니다. 이름만 보면 레이아웃에서 사진을 빼는 설정처럼 보이지만, 실제로는 미리보기에서 회색 자리표시자 상자를 그릴지 결정할 뿐이었습니다. PDF 렌더러는 사용자가 아바타를 올렸는지만 확인해 사진을 넣었습니다. 템플릿 스타일은 이 판단에 관여하지 않았습니다.

중국식 이력서를 만들며 신분증 사진을 올린 사용자가 미국식 템플릿으로 바꾸고 PDF를 내보내도 사진은 그대로 남았습니다. 미국 고용주는 차별 관련 위험을 피하려고 이력서 사진을 받지 않는 편이므로, 단순한 디자인 문제가 아니었습니다. 사진을 없애려는 템플릿이 정작 사진을 제거하지 못했습니다.

수정 과정에서는 플래그 대신 템플릿 스타일을 단일 기준으로 삼았습니다. 영어식 스타일에서는 사진뿐 아니라 희망 직무 문단, 성별, 생년월일도 출력하지 않습니다. 템플릿별 허용 목록을 관리하지 않고 스타일 규칙으로 막아 이후 추가하는 템플릿에도 기본 동작이 적용되게 했습니다. 사용자 데이터는 삭제하지 않으며, 중국식 레이아웃으로 돌아가면 다시 표시됩니다.

영어권 템플릿과 검증 방식

새로 추가한 미국식 레이아웃 6개는 색상 대신 사용 목적에 따라 나눴습니다. 금융·법률·의료 분야용 보수형, 일반형, 선과 아이콘을 쓰지 않는 ATS용, 임원형, 신입용, 엔지니어용입니다. 사람들이 레이아웃 유형으로 검색하지만 관련 페이지가 없던 문제를 해결하려고 템플릿 유형별 랜딩 페이지도 7개 만들었습니다.

글쓴이는 현지화 과정에서 의도를 나타내는 플래그가 실제 구현과 일치하는지 확인해야 한다고 말합니다. 댓글에서는 설정값이나 미리보기만 검사하지 말고, 실제 사용 흐름으로 PDF를 내보내 결과물을 확인하라는 의견이 나옵니다. 또한 사이트 언어와 이력서를 제출할 국가를 같은 기준으로 취급하면 영어 UI를 쓰면서 중국에 지원하는 사용자 같은 예외가 생길 수 있다는 지적도 나왔습니다.

Indie Hackers 반응

  • @octyn — ‘photoless’가 실제 사진은 PDF에 남겨 둔 채 회색 자리표시자만 없앤다는 점은 꽤 심각한 버그입니다. 템플릿 스타일을 기준으로 고친 방식은 타당해 보입니다. 사용자가 먼저 발견했나요, 아니면 PDF와 미리보기를 비교하다가 발견했나요?
    • @Simon — 아무도 신고하지 않았습니다. 내보낸 PDF와 미리보기를 비교하다가 제가 찾았습니다. 사용자가 알리지 않고 그냥 떠났을 수도 있다는 점이 조금 무섭습니다.
  • @aryan_sinh — 미국 사용자를 위한 새 레이아웃을 추가한 뒤, 현지화 수정이 영어 퍼널을 개선했다고 판단할 지표는 무엇인가요? 템플릿 선택, 완료된 내보내기, 아니면 그보다 뒤 단계인가요?
    • @john_forsythe — 설득력 있는 지표는 수정 전후의 영어 방문자 세션당 완료된 내보내기입니다. 새 레이아웃 6개 때문에 템플릿 클릭은 늘 수 있지만, 완료 여부만 퍼널이 나아졌는지 말해 줍니다. 버그 수정과 퍼널 개선은 따로 검증해야 합니다. 각 스타일에서 실제 PDF를 내보내고 결과를 비교해야 버그가 사라졌는지 알 수 있습니다. 영어 사용자의 수정 전 내보내기율이 중국어 사용자보다 낮았는지도 확인해야 합니다. 영어 사용자가 애초에 거의 내보내지 않았다면 사진 버그는 실제 결함이지만 퍼널의 병목은 아닐 수 있습니다. 영어 템플릿으로 시작한 사용자와 세션 중간에 영어 템플릿으로 바꾼 사용자의 완료율을 비교해 보면 원인을 가리는 데 도움이 됩니다.
    • @Simon — 시작 사용자와 전환 사용자를 나누는 방법은 생각하지 못했습니다. 템플릿 클릭이 아니라 완료된 내보내기를 측정하고, 트래픽이 쌓이면 해당 집단도 살펴보겠습니다.
  • @moneyhub — “렌더러가 읽는 파일을 기준으로 세라”는 문장을 메모해 두겠습니다. 저도 템플릿을 만드는데, 사용자가 실제로 고르고 쓸 수 있는 템플릿과 맞지 않는 숫자는 의미가 없다는 지적이 와닿습니다. 자신만만한 이름을 붙인 설정이 가장 위험한 버그를 가릴 수 있다는 점도 제품 설정이 있는 곳이라면 어디든 적용되는 교훈입니다.
  • @mehdizare — 현지화 과정에서는 로케일을 표현 방식이 아니라 정책으로 다뤄야 한다고 봅니다. 각 로케일의 실제 데이터 경로를 사용하는 렌더링 테스트를 하나씩 두고, 내보낸 결과물에 금지된 필드가 없는지 확인하면 오해를 부르는 플래그가 사용자 문제로 번지기 전에 잡을 수 있습니다.
  • @cubig21 — 지원하는 국가와 인터페이스 언어를 분리하고 있나요? 영어 UI를 쓰면서 중국에 지원하는 사용자도 있을 수 있으니, 언어에 이력서 규칙을 연결하면 또 다른 예외가 생길 수 있습니다.
    • @Simon — 좋은 지적입니다. 지금은 사이트 언어에 연결돼 있어 말씀하신 예외가 그대로 있습니다. 지원 국가와 UI 언어를 분리하는 일은 할 일 목록에 있으며, 사진 규칙에도 그 기준을 적용하는 편이 맞을 것 같습니다.
  • @HoldCashSheets — 템플릿 수는 사용자가 실제로 선택하고 내보낼 수 있는 수와 맞아야 한다는 점을 과소평가하기 쉽습니다. 스타일 수준에서 수정하면 새 템플릿을 만드는 사람이 취약한 플래그를 기억하지 않아도 안전한 동작을 기본값으로 적용할 수 있어 좋습니다. 미리보기와 PDF가 조용히 달라지는 일을 막으려면 스타일별 내보내기 테스트도 추가하겠습니다.
  • @innokentyB — 템플릿마다 따로 테스트하기보다 금지 필드 표를 두는 편이 좋겠습니다. 시장이나 스타일마다 내보낸 결과물에 절대 나타나면 안 되는 필드를 정하고, 선택 가능한 모든 템플릿에 같은 규칙을 적용하면 현재 사진 문제뿐 아니라 앞으로 생길 변형도 잡을 수 있습니다. CI에 일부러 잘못된 템플릿 하나를 넣어 보세요. 테스트가 통과한다면 결과물이 아니라 설정 이름만 검사하는 것입니다.
  • @Mythex — 새 랜딩 페이지 7개에도 같은 교훈을 적용할 수 있습니다. 누군가 한 번 만든 스크린샷 대신 빌드 시 실제 렌더러로 만든 샘플을 보여 주면 마케팅 페이지와 제품이 다시 어긋나는 일을 막을 수 있습니다. 템플릿을 폐기하는 날 관련 페이지에서도 빠지고, 페이지가 PDF에 없는 사진을 보여 주는 일도 없어집니다. 저희도 앱의 요금제 카드와 가격 페이지가 달라지지 않도록 같은 상수에서 HTML을 생성하게 바꿨습니다. 폐기한 템플릿을 쓰던 사용자는 있었나요? 그 사용자에게는 어떤 템플릿을 제공했나요?
  • @James_UtilitySEO — ‘photoless’와 같은 문제를 SEO 마크업에서도 자주 봅니다. 페이지가 스페인어라고 hreflang 태그에 적어 놓고 실제 콘텐츠는 영어인 경우입니다. 태그를 설정한 뒤 콘텐츠와 맞는지 확인하지 않은 것입니다. 저희도 사이트를 7개 언어로 현지화하면서 사람이 한 번 설정하고 잊는 로케일 필드가 아니라 번역 파이프라인에서 언어를 도출해야 한다는 점을 배웠습니다. 렌더러가 읽는 기준으로 세라는 원칙은 템플릿 밖에도 적용됩니다. 마케팅 숫자와 실제 제품 숫자가 서로 다른 파일에 있으면 템플릿을 폐기하는 순간부터 조용히 어긋나며, 그 차이는 늘 실제보다 낙관적인 방향으로 커집니다.

원문: Indie Hackers / 번역·요약: Trawling