선택을 돕는 비교 섹션은, 세 담당의 합작입니다.

비교 섹션을 만들 때 가장 흔한 실수는 “우리가 다 이긴다”는 표를 그리는 겁니다. 빨강 X와 초록 체크로 한쪽을 도배하면 보기엔 시원하지만, 방문자는 0.5초 만에 ‘이건 광고구나’ 하고 거리를 둡니다. 신뢰가 빠지면 비교는 설득력을 잃습니다. 그래서 우리는 비교를 한 사람이 아니라 세 담당의 합작으로 봅니다.

그래서, 직접 눌러보세요

설명보다 빠릅니다. 아래 위젯은 ‘빌더(템플릿 제작)’와 ‘베스포크(맞춤 제작)’를 세 관점으로 비교합니다. 탭을 눌러 관점을 바꾸면 표가 그 관점에 맞게 바뀝니다.

// 표의 ‘유지보수’ 탭을 보면, 간단한 수정은 빌더가 더 쉽다고 그대로 적었습니다. 우리에게 불리해 보여도 사실이라 인정한 겁니다. 그래야 ‘완전한 GEO 제어’ 같은 우리의 강점이 더 믿음직해집니다.

탭은 무엇을 하나요?

비교할 관점이 ‘속도·SEO/GEO·유지보수’처럼 여러 개일 때, 표 세 개를 한 화면에 세로로 쌓으면 길어지고 어디를 먼저 볼지 흐려집니다. 탭은 “지금은 속도 관점으로 보는 중”이라고 시야를 좁혀 줍니다. 사용자는 자기에게 중요한 관점만 골라 보고, 나머지는 클릭 한 번 거리에 둡니다. 이 탭 동작은 탭 담당의 UX 설계를 그대로 가져온 것입니다.

비교표는 무엇을 하나요?

표는 한 관점 안에서 두 선택지를 ‘나란히’ 둬서 눈이 좌우로만 움직이게 합니다. 항목 이름 열을 왼쪽에 고정하면 어떤 항목을 비교 중인지 늘 보입니다. 강조가 필요한 셀은 색으로만 살짝 구분하고(여기서는 베스포크가 나은 항목에 민트), 나머지는 평범하게 둡니다. 전부 칠하지 않는 게 핵심입니다. 이 시각 규칙은 디자인 담당의 판단입니다.

왜 ‘공정한 비교’가 결국 더 잘 팔리나요?

방문자는 비교표를 의심하며 봅니다. “이거 자기네가 만든 표잖아.” 그 의심을 푸는 유일한 방법은 우리에게 불리한 사실을 먼저 인정하는 것입니다. 위 표에서 ‘간단한 수정은 빌더가 더 쉽다’고 적은 순간, 방문자는 “아, 이 표는 솔직하구나” 하고 나머지 항목도 믿기 시작합니다. 경쟁사를 깎아내리는 표는 그 반대로 작동합니다 — 깎아낸 만큼 우리 신뢰도 같이 깎입니다.

비교 카피는 어떻게 쓰나요?

‘좋음·나쁨’ 같은 평가어는 누가 봐도 주관적이라 신뢰를 못 얻습니다. 대신 검증 가능한 사실로 바꿉니다. ‘빠름’ → ‘초기 로딩 1초 이내’, ‘유연함’ → ‘구조·코드 전부 수정 가능’. 또 한 셀은 한 줄로 끊습니다. 셀이 두세 줄로 늘어나면 좌우 비교가 아니라 위아래 읽기가 돼서 비교의 장점이 사라집니다. 이 표현 규칙은 카피 담당의 영역입니다.

플랜·경쟁사 비교에도 같은 원칙인가요?

네. 요금 플랜 비교든 경쟁사 비교든 원칙은 같습니다. 모든 플랜에 체크를 도배하지 말고, 각 플랜이 ‘누구에게 맞는지’를 분명히 합니다. 경쟁사 비교는 특히 조심해서, 상대의 사실만 적고 비방하지 않습니다. 비교의 목적은 ‘상대를 이기는 것’이 아니라 ‘방문자가 자기에게 맞는 선택을 하도록 돕는 것’이기 때문입니다.

모바일에서는 어떻게 유지하나요?

열이 많으면 좁은 화면에서 글자가 작아지거나 가로 스크롤이 생깁니다. 그래서 비교는 보통 두 선택지로 제한해 열을 2~3개로 둡니다. 항목 이름 열은 고정해 어떤 항목인지 늘 보이게 하고, 탭은 화면 폭에 맞게 줄바꿈됩니다. 비교가 가장 필요한 사람은 이동 중에 폰으로 보는 사람이므로, 모바일에서 비교가 깨지면 비교 자체가 무의미해집니다.

이 작품에 들어간 기술

• 탭 UX — 관점을 전환하는 탭 동작과 패널 전환은 탭 담당의 UX 설계에서 가져왔습니다.
• 명확한 카피 — 셀을 ‘좋음’이 아니라 검증 가능한 사실로 적고 한 줄로 끊는 규칙은 카피 담당의 작성법입니다.
• 비교표 디자인 — 강조 셀만 색으로 구분하고 항목 열을 고정하는 시각 규칙은 디자인 담당의 설계입니다.

저는 이 비교 모듈을 ‘담당별로 무엇을 했나’로 분해해 봅니다.

그 칸을 만드는 데 실제로 쓰인 기술은 이렇게 겹쳐 있습니다.