DESIGN BLUEPRINT · OPTION 5
FACTORY EDITORIAL
제조 실증
퍼시스·데스커의 제품·제조 비주얼 톤으로 "제조·품질의 시각적 표현"을 최대화한 브랜드 스토리 우선안입니다. 전환보다 신뢰를 먼저 세우고, 전환 장치는 그 신뢰 위에 얹습니다.
BLOCK 01
한 줄 컨셉 + 왜 이 방향
"퍼시스·데스커의 제품·제조 비주얼 톤으로, 제조·품질의 시각적 표현을 최대화한 브랜드 스토리 우선안."
① 컬러 근거 (§7): 브리프 §7에서 "컬러: 레드 계열 강조 (공차 참고)"를 명시해 주셨습니다. 3종 공통 불변식으로 공차 실측 팔레트(#C10230)를 잠갔고, option-5는 이 red를 라벨·라인·CTA에만 최소 면적으로 운용해 "제조 실증" 서사가 색으로 방해받지 않게 합니다.
② 레이아웃 근거 (§8): 참고 사이트 중 퍼시스·데스커는 "동종 가구기업의 제품 표현"으로 지정됐습니다. 두 사이트 모두 여백을 넉넉히 쓰는 저밀도 편집 문법을 씁니다. option-4(정공법)·option-6(전환 최단)과 달리, 이 옵션은 그 여백 문법을 그대로 가져와 "믿을 만한 제조사"라는 인상을 먼저 세웁니다.
③ 순서 근거 (§11): 브리프는 메인 10섹션을 나열하되 "최종 구성·순서는 업체 제안"으로 위임했습니다. option-5는 신뢰(권위·제조 프로세스)를 히어로 직후로 당기고, 문제 공감·전환 바를 그 뒤에 배치해 "왜 믿어야 하는가"를 먼저 답한 뒤 전환을 요청하는 순서를 제안합니다.
BLOCK 02
레퍼런스 → 적용 매핑
복제가 아니라 원리 차용입니다. 레이아웃 문법·타이포 체급·컬러 운용 방식만 가져오고, 콘텐츠·카피·이미지는 토파스 고유로 새로 씁니다.
| 레퍼런스 | 실측 특징 | 적용 방식 (원리 차용) | 반영 위치 |
|---|---|---|---|
| 퍼시스 fursys.com |
라이트 웨이트 대형 타이포, 쿨 미니멀 여백 (실측 #EBF0F2 배경 무드) | #EBF0F2 쿨톤을 팔레트 잠금값인 크림(#FDFAF7)으로 치환. Pretendard Light(300) 40~64px 헤드라인, 저밀도 그리드 | 전 섹션 타이포 체급·여백 리듬, 히어로·권위·제조 프로세스 헤드라인 |
| 데스커 desker.co.kr |
제품 카테고리 표현, 그레이 카드 그리드 (실측 #FF5948 red-orange, 미채택) | 데스커의 red-orange는 채택하지 않고 공차 red(#C10230)로 대체. 카테고리 카드 그리드 구조만 차용 | 제품·솔루션 섹션 6타일 그리드 (데스크/체어/테이블/파티션/수납/라운지) |
| 공차 gong-cha.co.kr |
레드 포인트 컬러, 성장 서사 톤 (팔레트 정본 출처) | #C10230·#A61529·#FDFAF7 팔레트를 그대로 잠금 채택. red는 라벨·라인·CTA 등 최소 면적으로만 운용 | CTA 버튼, 전환 바 배경, 위기 환기 dot, 타일 3색 순환 중 1색 |
※ 패스트파이브·마켓비는 option-4·6에서 주로 참조. 이 옵션에서는 레이아웃 밀도 대비군으로만 참고합니다.
BLOCK 03
메인 섹션 맵 (10섹션)
| # | 섹션 | 목적 | 카피 방향 | 섹션 CTA | GA4 이벤트 | 연결 서브페이지 |
|---|---|---|---|---|---|---|
| ① | 히어로 | 제조 파트너 첫인상, 판매 집중 이익 제시 | "가구 걱정 내려놓고, 판매에만 집중하세요" | 카탈로그 받기 / 거래 상담 신청 | cta_click (hero) | 회사소개, 거래·납품 문의 |
| ② | 권위 (로고월·인증) | 신뢰를 전환 이전에 선세팅 | "이미 검증된 파트너들과 같은 조건으로 거래하세요" | (정보 섹션) | scroll_depth | 회사소개(제조력·연혁·인증) |
| ③ | 제조 프로세스 | 설계~납기 전 공정 시각화로 품질 확신 | "설계부터 납기까지, 하나의 공정에서" | (정보 섹션) | scroll_depth | 회사소개(제조력) |
| ④ | 문제 공감 | 불안정 공급 경험 환기 (다크 밴드) | "이번엔 또 뭐가 다르게 올까" | (정보 섹션) | scroll_depth | - |
| ⑤ | 전환 바 (필수) | 낮은 문턱 오퍼로 1차 전환 유도 | "등록하면 3분 안에 거래조건·단가 확인" | 지금 등록하기 (offer=register) | cta_click (bar) | 거래·납품 문의 |
| ⑥ | 제품·솔루션 | 제품군 6종 + 자사몰 구획 분리 안내 | "큰 프로젝트도 재고 걱정 없이 수주하세요" | 타일별 구성 문의 / 자사몰 바로가기 | cta_click (sec-6), outbound_mall_click | 제품 카탈로그, 자사몰(외부) |
| ⑦ | 거래 6단계 | 리드 2유형 분기 + 절차 투명화 | 문의→상담→거래 등록→전용 폐쇄몰 ID→발주→수령 | 대리점 개설 문의 / 거래·납품 문의 | cta_click (sec-7) | 대리점 개설, 거래·납품 문의 |
| ⑧ | 변화·성공 | BEFORE→AFTER 시나리오로 이익 체감 | "이렇게 달라집니다" (시나리오 프레임, 후기 아님) | (정보 섹션) | scroll_depth | - |
| ⑨ | 위기 환기 (필수) | 미전환 리스크 소환 (작은 밴드) | "안정적인 공급사가 없으면, 프로젝트를 놓치고·손님을 잃고·마음을 졸입니다" | (정보 섹션) | scroll_depth | - |
| ⑩ | 최종 CTA + 폼 | 리드 폼 제출, 2유형 분기 재확인 | "지금, 걱정 없는 거래를 시작하세요" | 리드 폼 (form_type/offer 선택) | lead_submit, consult_click | 대리점 개설, 거래·납품 문의 |
BLOCK 04
우측 고정 CTA 설계
구성 · 순서
- 1카탈로그 받기: 오퍼 문턱 최저(이메일 수집), 먼저 노출
- 2거래 상담: 준비된 방문자를 위한 2차 옵션
왜 2버튼인가
이 옵션은 정보 밀도를 의도적으로 낮췄습니다(§2 매트릭스). 저밀도 페이지에 3개 이상의 선택지를 상시 노출하면 여백의 효과가 상쇄됩니다. "선택지 압축"이 이 옵션의 CTA 설계 원칙입니다. option-4(기업형, 3버튼)와 명확히 대비됩니다.
모바일 변형
데스크톱 우측 레일(2버튼 세로)은 모바일에서 하단 고정 바(2분할 가로)로 변형됩니다. 두 UI 모두 동일한 GA4 position=rail 값으로 계측해, 디바이스와 무관하게 "항상 보이는 CTA"의 CTR을 하나의 지표로 합산합니다.
BLOCK 05
리드 오퍼 6종 배치도
문턱 낮음 → 높음 순서. 브리프 §6 "이메일 우선 수집" 원칙에 따라 이메일 수집형 오퍼를 상단 CTA에 우선 배치했습니다.
문턱 최저
① 컬러칩 샘플 (무료)
배치: 제품·솔루션 타일 CTA, 최종 CTA 오퍼 선택지
② 카탈로그 (이메일) (이메일 우선 수집 핵심 오퍼)
배치: 히어로 1차 CTA, 우측 고정 CTA 버튼1, GNB CTA, 모바일 하단 바
③ 종이 카탈로그
배치: 최종 CTA 오퍼 선택지 (이메일 오퍼의 서브 옵션)
④ 상담 후 단가표
배치: 전환 바("등록하면 3분 안에 거래조건·단가 확인"), 최종 CTA 오퍼 선택지
⑤ 거래처 등록
배치: 거래 6단계 카드A(대리점 개설), 최종 CTA 버튼1, 전환 바 오퍼값
문턱 최고
⑥ 거래·납품 문의
배치: 거래 6단계 카드B, 최종 CTA 버튼2·기본 폼, 우측 고정 CTA 버튼2, GNB 주 CTA
BLOCK 06
A/B 테스트 플랜
전제 정직 고지: 아임웹은 동시 트래픽 스플릿(50:50)이 불가합니다. 아래 3방식 중 상황에 맞게 조합합니다.
- 기간 교차: 2주 단위 A→B 교체. 시즌 편향(월초 발주 시즌 등) 주의.
- 광고 랜딩 URL 분리: 광고 트래픽만 랜딩 2종으로 분할. 유일한 동시 비교 방식.
- 요소 순차 교체: 카피 2~3안 세트를 주 1회 브리프에서 선택·교체.
우선 변수 ①
히어로 비주얼 : 제조 현장 vs 제품 스튜디오
- 가설:
- 제조 현장 사진이 신뢰(품질·안정 공급 확신)를 더 강하게 전달해 CTA 클릭률이 높을 것
- 변형 A(현재):
- 제조 현장(목재 가공 기계 와이드샷)
- 변형 B:
- 제품 스튜디오(데스크/체어 스틸컷)
- 판정 지표:
- cta_click CTR(position=hero) 1차 · lead_submit 2차
- 기간:
- 최소 2주 관찰, 방식 ① 또는 ②
우선 변수 ②
권위 섹션 위치 : 히어로 직후 vs 문제 공감 뒤
- 가설:
- 권위를 히어로 직후에 두면 이탈 전에 신뢰가 먼저 형성되어 이후 섹션 도달률이 오를 것
- 변형 A(현재):
- 히어로 → 권위 → 제조 프로세스 → 문제 공감
- 변형 B:
- 히어로 → 문제 공감 → 권위 → 제조 프로세스
- 판정 지표:
- scroll_depth(50/75) 도달률 1차 · lead_submit 2차
- 기간:
- 최소 2주 관찰, 방식 ①
BLOCK 07
KPI 트리
웹사이트 리뉴얼 성공지표 3종 (브리프 §4)
① 리드 수집 수
GA4 lead_submit 전체 합산 (offer 파라미터 전체)
② 신청 수
GA4 lead_submit 중 offer=register·inquiry(확정적 신청 성격 오퍼) 세분화. 🔶 "리드"와 "신청"의 정확한 정의 구분은 PM 확인 필요
③ 상담 전환 수
GA4 consult_click channel(tel/kakao) 합산
GA4/GTM을 W1에 선설치해 리뉴얼 전 기준선을 확보합니다(회신서 합의사항). A/B 비교 이전에 "리뉴얼 전 vs 후"가 첫 비교입니다.
BLOCK 08
서브페이지 연결 구조
🔶 클라이언트 메뉴 최종본(§10) 확정 전 임시안입니다. 기존 시안 3종의 공통 골격을 기준으로 제안합니다.
1. 회사소개
↔ 메인 ②권위 · ③제조 프로세스 섹션
2. 제품 카탈로그
↔ 메인 ⑥제품·솔루션 6타일 (각 타일 → 카탈로그 하위 필터 연결)
3. 대리점 개설
↔ 메인 ⑦거래 6단계 카드A · ⑩최종 CTA 버튼1 (참고: 기존 대리점 개설 리드 페이지 패턴)
4. 거래·납품 문의
↔ 메인 ⑤전환 바 · ⑦카드B · ⑩폼(기본값) · 우측 고정 CTA 버튼2
5. 자사몰 (외부 연결)
↔ 메인 ⑥제품·솔루션 자사몰 구획 (새 창, outbound_mall_click 계측)
6. 고객지원
↔ 푸터 nav (공지사항·FAQ·A/S, 브리프 §8 가구 특화 기능 조사 결과 반영 예정 위치)
BLOCK 09
확정 대기 수치 목록
아래 항목은 이번 시안에 노출하지 않았거나 자리표시자로 처리했습니다. 확정 수치 회수(10종 요청 발송됨) 후 반영합니다.
| 항목 | 현재 처리 | 비고 |
|---|---|---|
| 누적 생산 대수 | 미노출 | 외부 조사 수치(672만 대 등), 자사 확정치 수령 전 사용 금지 |
| 재거래율 · 거래처 유지율 | 미노출 | 확정 데이터 없음 |
| 성공사례 매출·수치 | 미노출 (시나리오 프레임으로 대체) | ⑧변화·성공 섹션은 BEFORE→AFTER 시나리오, 실제 거래처 인터뷰 아님 |
| 전환 바 "3분" 소요 시간 | 노출 + 각주("확정 대기") | 브리프 원문 예시 문구, 실측 검증 필요 |
| 상담 전화번호 | 자리표시자(1588-0000) | 실 연락처 수령 후 교체 |
| 인증 목록 최종본(ISO 9001/14001, 조달청) | 노출(자사 공개 정보 기준) | 유효기간·인증번호 최신본 재확인 필요 |
| 납품 실적 워드마크 리스트 | 노출(브리프 원문 5개사) | 추가/삭제 여부 최종 확인 필요 |
| 서브페이지 메뉴 최종본(§10) | 임시 6메뉴 제안(블록08) | 귀사 메뉴 최종본 수령 후 IA 확정 |
| 제조 프로세스 "설계" 단계 실사진 | CSS 그래픽 대체 + TODO_IMAGE_REQUIRED | 자체 설계팀 CAD 작업 사진 필요 |
| 파티션 제품 실사진 | CSS 패턴 대체 + TODO_IMAGE_REQUIRED | 파티션·스크린 스튜디오 촬영본 필요 |
🚫 자사몰 월매출·마진율·가격맵 구조는 어느 문서에도 노출하지 않습니다 (design-brief-v2.md §1-4 금지 목록).