DUAL TRACK은 첫 화면에서 대리점 개설과 거래·납품 두 갈래 길을 바로 나누어, 방문자가 가장 짧은 동선으로 원하는 창구에 닿게 하는 구성입니다.
이 방향을 잡은 근거는 통합 브리프의 두 가지 방향입니다. (브리프 원문 인용)
여기에 메뉴 구성(§10)에서도 "거래 안내"와 "파트너 찾기"처럼 두 흐름이 필요로 하는 정보가 서로 다르다는 점이 드러난다고 저희는 읽었습니다.
그래서 이 시안은 두 흐름을 페이지 하단에서 겨우 나누는 대신, 히어로부터 최종 CTA까지 전 구간에서 "대리점 개설"과 "거래·납품"을 나란히 병행 노출합니다. 우측 고정 CTA, 상단 메뉴, 최종 리드 폼까지 모두 2트랙 구조를 유지합니다.
참고 사이트의 레이아웃을 그대로 옮기지 않고, 구조적 원리만 가져와 토파스의 컬러·카피로 다시 그렸습니다.
마켓비
참고한 지점: 카탈로그 목록의 고밀도 그리드, "가격 상담" 계열의 라벨 관습→이 시안 적용: 제품 카탈로그를 절제된 3열 그리드로 재구성하고, 소비자 가격 대신 "견적 상담" 라벨을 사용해 B2B 성격을 분명히 했습니다.
데스커
참고한 지점: Biz 전용 회원 영역을 일반 쇼핑몰과 시각적으로 분리하는 구조→이 시안 적용: 대리점(개설) 트랙과 거래·납품 트랙을 헤더·히어로·CTA 전 구간에서 색과 아이콘으로 구분했습니다.
공차
참고한 지점: 가맹 페이지의 레드 강조 컬러, 분기형 CTA 카드 구성→이 시안 적용: 팔레트 정본(레드 1색 강조 원칙)과 전환 바·최종 CTA의 레드 풀블리드 밴드에 반영했습니다.
패스트파이브
참고한 지점: 숫자 중심 지표 대시보드, 강력한 CTA 밀도→이 시안 적용: "권위" 섹션을 tabular-nums(자릿수 정렬 숫자) 스타일의 대시보드 카드로 구성했습니다.
전환 바·문제 공감·위기 환기는 브리프 §11에서 포함·검토를 요청하신 섹션입니다. 나머지 순서는 "즉시 분기 → 신뢰 확인 → 전환"의 흐름으로 저희가 제안드립니다.
| # | 섹션 | 목적 | 카피 방향 | 섹션 CTA | GA4 이벤트 | 연결 메뉴 |
|---|---|---|---|---|---|---|
| 1 | 히어로(스플릿) | 대리점/거래납품 즉시 분기 | "전국 500여 가구점의 선택" / "이미 검증된 파트너들과 같은 조건으로" | 대리점 개설 문의 / 거래·납품 문의 | cta_click | 토파스 소개, 고객지원 |
| 2 | 전환 바(카운터형) | 저마찰 등록 유도 | "등록하면 3분 안에 거래조건·단가 확인"*확정 대기 | 거래처 등록하기 | cta_click | 고객지원 |
| 3 | 문제 공감(체크리스트) | 반복되는 불안 요소 공감 | "이번엔 또 뭐가 다르게 올까" | 없음 (다음 섹션 자연 유도) | scroll_depth | - |
| 4 | 권위(숫자 대시보드) | 숫자로 신뢰 구축 | SINCE 1990 · 35년 · 500여 네트워크 · 인증 · 실적 워드마크 | 없음 | scroll_depth | 토파스 소개, 파트너 찾기 |
| 5 | 제품 카탈로그(6군) | 제품군을 B2B 문의로 연결 | 제품 6종 + 솔루션 3종 태그 | 견적 상담 / 카탈로그 이메일·종이 신청 / 정식 거래 전환 문의 / 자사몰 바로가기 | cta_click, outbound_mall_click | 제품과 솔루션, 자료실 |
| 6 | 제조 프로세스(탭) | 제조 신뢰 보강 | 설계 → 생산 → 품질 → 납기 | 없음 | scroll_depth | 토파스 소개 |
| 7 | 거래 6단계(타임라인) | 거래 절차 투명 공개 | 문의 → 상담 → 거래 등록 → 전용 폐쇄몰 ID → 발주 → 수령 | 없음 (최종 CTA로 유도) | scroll_depth | 거래 안내 |
| 8 | 변화·성공(BEFORE→AFTER) | 이점을 시나리오로 체감 | 시나리오 프레임(후기 인용 아님) | 없음 | scroll_depth | 파트너 찾기 |
| 9 | 위기 환기(3항목, 작게) | 방치 시 반복될 문제 짧게 환기 | 프로젝트 놓침 · 손님 잃음 · 마음 졸임 | 없음 | scroll_depth | - |
| 10 | 최종 CTA + 푸터 | 듀얼 폼 제출 전환 | "지금, 걱정 없는 거래를 시작하세요" | 대리점 개설 폼 / 거래·납품 폼 / 컬러칩·단가표 | lead_submit, cta_click | 고객지원 |
구성: 대리점 개설(화이트+보더) / 납품 견적(레드 채움) / 카카오 상담(원형 아이콘) 3버튼을 화면 우측에 항상 고정합니다.
왜 이 순서인가: 폼 작성이 부담스러운 방문자가 바로 대화로 넘어갈 수 있도록 카카오 상담 경로를 항상 열어두자는 것이 저희 제안입니다(브리프 §7의 우측 CTA 예시에도 카카오 상담이 포함되어 있습니다). 대리점/납품 두 버튼은 리드 2유형을 클릭 단계에서부터 분리 계측(cta_id로 구분)하기 위해 나란히 고정합니다.
모바일에서는 우측 레일이 화면 하단 고정 바로 바뀌며, 동일한 3가지 선택지(대리점 개설 · 카카오 상담 · 납품 견적)를 유지합니다.
문턱이 낮은 오퍼부터 순서대로 배치했습니다. 막대가 짧을수록 방문자에게 요구하는 정보·결정이 적습니다.
낮은 문턱의 오퍼 4종은 별도 폼을 새로 만들지 않고, 거래·납품 문의 폼의 offer 값만 바꿔 재사용합니다. 실제 집계에서는 이 값으로 오퍼별 신청 수를 구분합니다.
전제(정직 고지): 아임웹은 동시 접속자를 50:50으로 나누는 기능이 없습니다. 그래서 ① 기간을 나눠 교체(2주 단위, 시즌 편향 주의) ② 광고 랜딩 페이지만 2종으로 분리(유일한 동시 비교 방법) ③ 카피 세트를 주 1회 순차 교체, 세 가지 방식을 병행합니다.
판정 기준: 1차는 lead_submit 전환율(방문 대비 제출), 2차는 cta_click 클릭률입니다. 월 방문자가 수천 명 미만이면 통계적으로 확실히 유의한 차이가 나오기 어려우므로, 숫자의 방향성과 상담 품질(정성 평가)을 함께 봅니다. 최소 2주 관찰, 한 번에 한 가지 요소만 바꾸는 것을 원칙으로 합니다.
기준선: GA4/GTM을 리뉴얼 시점에 먼저 설치해 현재 방문자 수·전환 수를 확보합니다. A/B 비교보다 "리뉴얼 전 vs 후" 비교가 먼저입니다.
이 옵션의 우선 변수 2개
변수 1 · 대리점 분기 카드 문구
변수 2 · 전환 바 문구
브리프 §4에서 밝혀주신 성공지표 3종(리드 수집 수 · 대리점/가구점 신청 수 · 상담 전환 수)을 실제 측정 이벤트로 연결했습니다.
lead_submit 전체 이벤트 수 (오퍼 6종 합산)lead_submit 중 form_type=dealerconsult_click (channel=tel/kakao)cta_click, scroll_depth, outbound_mall_clickGA4/GTM을 리뉴얼 전에 먼저 설치해 기준선(현재 방문자 수·전환 수)을 확보한 뒤, 리뉴얼 전후를 비교하는 것이 A/B 테스트보다 먼저입니다.
귀사가 메뉴 구성에서 제시해 주신 6대 메뉴를 기준으로, 메인 섹션과의 연결점을 정리했습니다. 정확한 메뉴 명칭·순서·페이지 분할은 최종 확정본 수령 후 반영합니다.
자사몰(소비자 직접구매, 별도 유지)은 메인 [제품 카탈로그] 하단의 톤 다운된 구획에서 외부 링크로만 연결하고, 정식 거래를 원하는 신규 방문자는 같은 자리에서 [거래·납품 문의]로 전환할 수 있게 동선을 열어둡니다.
아래 항목은 외부에서 조사한 수치를 임의로 채워 넣지 않고, 자리표시자로 남겨두었습니다. 확정 수치 요청은 이미 별도로 전달드렸으며, 회신 즉시 시안에 반영합니다.
- 누적 생산 대수: 현재 "{누적 생산 N만 대}"로 표기. 외부 조사 인용 수치는 사용하지 않으며, 자사 확정 수치 회수 후 반영합니다.
- 전환 바 "3분" 소요시간: 평균 상담 기준 참고치로 표기. 수동/자동 처리 방식 확정 후 정확한 수치로 교체합니다.
- 인증 목록(ISO 9001 · ISO 14001 · 조달청 등록): 자사 공개 자료 기준으로 표기. 최종 확정 리스트 회수 후 반영합니다.
- 거래처 성공 사례·인터뷰: 실제 후기 인용 대신 시나리오 프레임으로 대체. 성함·수치 포함 게재 동의를 받은 확정 데이터 수령 후 실제 사례로 교체합니다.
- 6대 메뉴 명칭·순서·하위 페이지 분할: 귀사 메뉴 최종 확정본 수령 후 반영합니다.