TOFAS B2B 리뉴얼 · 시안 설계도
option-4 「RED FRAME
— 기업형 리드 엔진」
패스트파이브의 기업형 레이아웃 문법에 공차의 레드 컬러 시스템을 입힌, 통합 브리프 §11 메인 10섹션 참고안을 순서 그대로 이행한 정공법 시안입니다. 이 문서는 “왜 이렇게 설계했는지”의 근거를 담은 설계도이며, 실제 화면은 상단 “시안 보기”에서 확인하실 수 있습니다.
한 줄 컨셉 + 왜 이 방향
패스트파이브의 기업형 레이아웃 문법 + 공차의 레드 컬러 시스템 = 브리프 §11 순서를 그대로 이행한 정공법 이행안
근거 1 · §7 톤앤매너·우측 고정 CTA
"기업형·신뢰감 중심 (기존 B2C 쇼핑몰 느낌 탈피)" · "컬러: 레드 계열 강조 (공차 참고)" · "강력한 CTA 상시 노출 — 우측 항상 고정. 개수·구성은 업체 제안 필요. (토파스 예시: 카탈로그·단가표 / 카카오 상담 / 전화)" (브리프 §7 원문)
→ "개수·구성은 업체 제안"으로 위임하신 부분을 저희는 3층 구조로 제안합니다: ① GNB 대표 오퍼 버튼 1개 ② 우측 고정 레일(카탈로그·단가표 / 카카오 상담 / 전화) ③ 최하단 최종 CTA 섹션. 귀사가 예시로 주신 3항목이 이미 오퍼 문턱 사다리와 정확히 일치해, 별도 재해석 없이 그대로 채택했습니다.
근거 2 · §8 참고 사이트
패스트파이브(기업형 레이아웃·강력한 CTA) / 공차(레드 컬러 톤·가맹점 성장 서사) / 퍼시스·데스커·마켓비(동종 가구기업의 기능·제품 표현·비주얼 톤), 4개 레퍼런스 중 option-4는 패스트파이브 + 공차를 주력으로, 데스커의 카테고리 그리드 관습을 보조로 차용했습니다.
근거 3 · §11 메인 구성
브리프 §11은 "전환에 중요한 '전환 바 · 문제 공감 · 위기 환기' 섹션은 포함·검토 바랍니다"라고 요청하셨습니다(원문). → option-4는 이 3종을 포함한 10섹션을 브리프가 제시한 순서 그대로 배치했습니다(구성 재배열은 option-5·option-6에서 시도).
레퍼런스 → 적용 매핑
아래는 원리를 차용한 것이지, 화면을 복제한 것이 아닙니다. 각 레퍼런스에서 가져온 요소와, option-4에 적용된 구체적 방식을 분리해 기록합니다.
| 레퍼런스 | 참고한 것 | option-4 적용 방식 |
|---|---|---|
| 패스트파이브 | 밴드 리듬 구성 · 로고월+정량 지표 조합 · 필(pill) 버튼 CTA · 우측 상시 고정 CTA | 크림/화이트/ink 밴드 교차 구조, 권위 섹션의 스탯+로고월, 전 CTA를 rounded-full 필 버튼으로 통일, 우측 3버튼 레일 |
| 공차 | 레드 단색 강조 컬러 시스템 · 전환 바 톤(등록 유도 스트립) | 팔레트를 공차 실측값 #C10230/#A61529로 잠금, 히어로 직후 스티키 전환 바(문제 공감 섹션까지 고정) |
| 데스커 | 제품 카테고리 카드 그리드 관습 | 제품·솔루션 섹션의 6종 카테고리 아이콘 카드 |
| 퍼시스 | 라이트 웨이트 대형 타이포·쿨 미니멀 여백 | option-4는 미차용 (option-5 「FACTORY EDITORIAL」이 전담) |
| 마켓비 | 카탈로그 고밀도 관습 | option-4는 미차용 (option-6 「DUAL TRACK」이 전담) |
*패스트파이브 라임 CTA 컬러·공차 외 나머지 팔레트는 채택하지 않았습니다. 컬러는 전 옵션 공통으로 공차 실측 팔레트에 잠겨 있습니다(design-brief-v2.md §1-1).
메인 섹션 맵
| 섹션 | 목적 | 카피 방향 | 섹션 CTA | GA4 이벤트 | 연결 서브페이지 |
|---|---|---|---|---|---|
| ① 히어로 | 첫 화면에서 권위와 이익을 동시 전달 | "35년·전국 500여 가구점의 선택 — 가구 걱정 내려놓고 판매에만 집중" | 대리점 개설 문의 / 거래·납품 문의(듀얼) | cta_click | 거래처 등록, 거래·납품 문의 |
| ② 전환 바 | 조기 전환 유도, 스크롤 중 상단 고정 | "등록하면 3분 안에 거래조건·단가 확인*" | 지금 등록하기 | cta_click | 거래처 등록 |
| ③ 문제 공감 | 공급 불안을 언어화해 공감 형성 | "이번엔 또 뭐가 다르게 올까" + 불안정 공급·발주 불안·책임전가 3카드 | (없음, 다음 섹션 유도) | scroll_depth | — |
| ④ 권위 | 연혁·네트워크·거래처·인증으로 신뢰 확보 | SINCE 1990 · 35년 · 전국 약 500개 · 로고월 5종 · 인증 3종 | (암묵적, 스크롤 유도) | — | 토파스 소개 |
| ⑤ 제조 프로세스 | 제조 신뢰를 공정 단위로 구체화 | 설계 검토 → 생산 → 품질 검수 → 포장·출고 | (암묵적) | — | 토파스 소개(제조/스마트팩토리) |
| ⑥ 제품·솔루션 | 제품군·솔루션 제시 + 자사몰 톤다운 분리 | 데스크~라운지/소파 6종 · 사무실구축/프랜차이즈/대량납품 3종 | 정식 거래처 등록 / 자사몰 바로가기 | cta_click, outbound_mall_click | 제품·솔루션, 자사몰 |
| ⑦ 거래 6단계 | 절차 투명화로 진입 장벽 완화 | 문의→상담→거래등록→전용폐쇄몰ID→발주→수령 | (암묵적) | — | 거래 안내 |
| ⑧ 변화·성공 | 전환 후 체감 이익 제시(BEFORE→AFTER) | 신규 매장 준비 사장님 / 대량납품 법인 담당자 시나리오 2종 | (암묵적) | — | 파트너 찾기 |
| ⑨ 위기 환기 | 미전환 리스크를 짧게 환기 | 프로젝트 놓침 / 손님 잃음 / 마음 졸임 (작게 3개) | (암묵적) | — | — |
| ⑩ 최종 CTA+푸터 | 오퍼 사다리 + 리드폼 2탭으로 최종 전환 | "지금, 걱정 없는 거래를 시작하세요" | 대리점 개설 / 거래·납품 문의(폼 2종) + 카카오·전화 | lead_submit, consult_click | 거래처 등록, 거래·납품 문의 |
우측 고정 CTA 설계
01
카탈로그·단가표
오퍼 사다리 최상단 결합 진입점. 항상 최우선 노출.
02
카카오 상담
브리프 §7 우측 고정 CTA 예시(카카오 상담)를 그대로 반영.
03
전화 상담
카카오와 동일 목적, 채널만 분리 계측.
왜 이 순서인가. 저희가 제안하는 3층 CTA(GNB 대표 버튼 1개 / 우측 고정 레일 / 최하단 CTA) 중 "우측 고정 레일" 자리에, 브리프 §7에서 귀사가 예시로 주신 3항목(카탈로그·단가표 / 카카오 상담 / 전화)을 그대로 채택했습니다. GNB 우측 대표 오퍼 버튼(대리점 개설 문의)과 최하단 최종 CTA 섹션은 별도로 유지해, 3층 구조가 서로 겹치지 않게 했습니다.
모바일 변형. §1-3 공유 규칙대로 데스크톱 세로 레일은 화면폭 제약 때문에 모바일에서 하단 고정 바로 형태를 바꿉니다. 3버튼 순서·목적은 동일하게 유지하고, "설계도 보기" 링크만 하단 바 위 얇은 스트립으로 분리해 상시 CTA 탭 영역을 침범하지 않게 했습니다.
리드 오퍼 6종 배치도
문턱이 낮은 오퍼부터 높은 오퍼 순으로 사다리를 구성하고, 페이지 곳곳에 문턱별로 다른 진입점을 배치했습니다.
| 오퍼 | 페이지 내 위치 |
|---|---|
| 컬러칩 샘플 무료 | 최종 CTA 섹션 오퍼 사다리 + 대리점 탭 관심 항목 select |
| 카탈로그(이메일) | 우측 레일 "카탈로그·단가표" 결합 진입 + 최종 CTA 오퍼 사다리 + 대리점 탭 select |
| 종이 카탈로그 | 최종 CTA 오퍼 사다리 + 대리점 탭 select (이메일 대비 낮은 우선순위) |
| 상담 후 단가표 | 전환 바 "지금 등록하기" + 우측 레일 "카탈로그·단가표" + 대리점 탭 select |
| 거래처 등록 | 전환 바 · 헤더 대표 CTA · 히어로 · 제품 섹션 자사몰 옆 · 최종 CTA 탭1(대리점·가구점 개설) |
| 거래·납품 문의 | 헤더 보조 링크 · 히어로 보조 CTA · 최종 CTA 탭2(거래·납품 문의) |
A/B 테스트 플랜
전제: 아임웹 동시 스플릿 불가 (정직 고지)
- 기간 교차: 2주 단위로 A→B 교체(히어로 카피·CTA 문구). 시즌 편향(월초 발주 시즌 등) 주의.
- 광고 랜딩 URL 분리: 광고 트래픽만 랜딩 2종으로 분할. 유일한 동시 비교 방식.
- 요소 순차 교체: 카피 2~3안 세트를 주 1회 브리프에서 선택·교체.
판정 = 1차 lead_submit 전환율(방문→제출), 2차 cta_click CTR. 월 방문 수천 미만에서는 통계적 유의보다 방향성 판단 + 정성(상담 질) 병행. 최소 관찰 2주 + 1회 1변수 원칙.
option-4 우선 변수 2개
변수 ①
히어로 카피: 권위형 vs 이익형
가설. 신규 방문자 신뢰 형성에는 권위형이, 기존에 공급 불안을 겪은 방문자에는 이익형이 더 유리할 것.
변형. A="35년·전국 500여 가구점의 선택" 단독 / B="가구 걱정 내려놓고 판매에만 집중" 단독 (현재 시안=결합형, 대조군)
판정. lead_submit 전환율
기간. 최소 2주, 기간 교차 또는 광고 랜딩 분리
변수 ②
우측 레일: 3버튼 vs 2버튼
가설. 버튼 수를 줄이면(카카오+전화를 "상담" 1개로 통합) 선택 부담이 줄어 레일 CTR이 오를 것.
변형. A=현재 3버튼(카탈로그·단가표/카카오/전화) / B=2버튼(카탈로그·단가표/상담 통합)
판정. cta_click CTR (position=rail)
기간. 최소 2주
KPI 트리
브리프 §4 성과 지표(KPI) 3종을 GA4 이벤트로 계측 가능하게 매핑했습니다.
| 브리프 §4 성공지표 | GA4 이벤트 | 파라미터 |
|---|---|---|
| ① 리드 수집 수(이메일·연락처) 오퍼별 폼 제출을 각각 집계 | lead_submit | form_type(dealer/supply), offer(colorchip/catalog_email/catalog_print/pricebook/register/inquiry) |
| ② 대리점·가구점 신청 수 거래처 등록 폼 제출 수 | lead_submit | form_type=dealer, offer=register |
| ③ 상담 전환 수 전화·카카오 클릭 + 폼 제출 이후 상담 연결 | consult_click | channel(tel/kakao) |
| 보조 이벤트 | 용도 |
|---|---|
cta_click | cta_id, position(hero/bar/rail/sec-N/footer), label — CTA별 CTR·A/B 판정 재료 |
outbound_mall_click | 자사몰 이탈 분리 계측(B2B 전환율 왜곡 방지) |
scroll_depth | 25/50/75/90, 섹션 도달률로 10섹션 순서 제안의 유효성 검증 |
회신서 합의사항대로 GA4/GTM을 W1에 선설치해 리뉴얼 전 데이터를 기준선으로 확보합니다. A/B 비교 이전에 "리뉴얼 전 vs 후"가 첫 비교입니다.
서브페이지 연결 구조
브리프 §10 사이트맵 기준, GNB에 노출되는 6대 메뉴와 GNB 미노출·버튼 진입 전용 CTA 페이지 3종을 메인 섹션과 연결했습니다.
GNB 6대 메뉴
토파스 소개
왜 토파스·연혁·제조/스마트팩토리·인증특허 ← 메인 ④권위, ⑤제조 프로세스에서 연결
제품·솔루션
제품군 + 솔루션 3종 ← 메인 ⑥제품·솔루션에서 연결
거래 안내
거래 프로세스 6단계·조건·혜택 ← 메인 ⑦거래 6단계에서 연결
파트너 찾기
전국 네트워크 + 성공사례(구글시트 연동 제안) ← 메인 ⑧변화·성공에서 연결
자료실
카탈로그 공개 다운로드 / 단가표 승인제 열람 ← 최종 CTA 오퍼 사다리(카탈로그·단가표)에서 연결
고객지원
문의·연락처·FAQ ← 우측 레일(카카오·전화), 최종 CTA에서 연결
CTA 전용 페이지 (GNB 미노출, 버튼·광고 URL로만 진입)
거래처 등록 (대리점·가구점 개설)
← 헤더 대표 CTA · 히어로 · 전환 바 · 제품 섹션 자사몰 옆 · 최종 CTA 탭1
거래·납품 문의
← 헤더 보조 링크 · 히어로 보조 CTA · 최종 CTA 탭2
자사몰 (기존 유지, 별도 톤)
← 제품·솔루션 섹션 톤다운 구획 → outbound_mall_click
확정 대기 수치 목록
반-날조 정직 고지. 아래 항목은 모두 자리표시자 또는 임시 라우팅입니다. 확정 수치는 10종 항목 요청서를 통해 회수 중이며, 회수 완료 시 시안에 그대로 반영합니다. 회수 전까지는 임의로 수치를 창작하지 않고 아래 표기를 유지합니다.
| 항목 | 현재 시안 표기 | 확정 방법 |
|---|---|---|
| 전환 바 "3분" 문구 | 각주 처리: "*확정 전 운영 목표, 상담 상황에 따라 달라질 수 있어요" | 착수 시 귀사 컨펌 후 확정 |
| "35년" 업력 | 1990년 창업 기준 산출값으로 각주 표기 | 귀사 컨펌 시 정확 연도로 확정 |
| 거래 실적 로고월 | 투썸플레이스·이마트·신세계·마켓컬리·우즈베키스탄 국립아동병원 (브리프 원문 채택) | 사용 승인 + 최신 목록 회수 후 반영 |
| 인증 3종 | ISO 9001 · ISO 14001 · 조달청 등록 (브리프 원문 채택) | 확정 인증서 사본 회수 후 반영 |
| 전화·카카오 실제 채널 | 실 번호·카카오 채널 URL 미확정 → 모든 버튼이 최종 CTA 섹션으로 라우팅 | 실 채널 수령 후 tel:·카카오 링크로 교체 |
| 자사몰 링크 | 기존 도메인(tofas.kr) 유지 전제로 임시 연결 | 실제 서브페이지 구조 확정 후 정식 경로로 교체 |
| 변화·성공 시나리오 | 가상 시나리오로 명시(섹션 하단 각주 고지 완료) | 실 거래처 인터뷰·데이터 수령 시 실사례로 교체 가능 |