블로그

웹사이트 예시를 복사하지 마세요. 그 골격을 훔치세요.

웹사이트 예시를 스크린샷이 아닌 재사용 가능한 결정으로 리버스 엔지니어링하여 모든 클라이언트 사이트가 맞춤형이 되고 전환되게 하세요.

요약

대부분의 웹사이트 예시 조언은 함정입니다. 효과가 있는 것을 복사하라고 하여 SaaS 히어로를 법률 사무소 사이트에 붙여넣고 왜 실패하는지 의아해하게 됩니다. 예시는 결정의 증거이지 복제할 템플릿이 아닙니다. 실제로 효과가 있는 프로세스는 리버스 엔지니어링입니다: 히어로, 증거, 행동 촉구 뒤에 있는 추론을 뽑아낸 다음 각 클라이언트 구매자를 위해 그 결정을 재구축하세요. 이 기사는 SaaS, 에이전시, 포트폴리오 예시에서 무엇을 훔칠지, 그리고 모든 클라이언트에 걸쳐 시스템을 반복 가능하게 만드는 결정 스와이프 파일을 구축하는 방법을 보여줍니다.

대부분의 웹사이트 예시 조언은 함정입니다. "마음에 드는 사이트를 찾아서 훔치세요"라고 말합니다. 그래서 북마크 폴더를 모은 다음, 지붕 수리 업체, 법률 사무소, B2B SaaS 클라이언트를 위해 동일한 히어로, 동일한 레이아웃, 동일한 호버 효과를 재구축합니다. 결과: 모두 똑같이 보이고 똑같이 나쁘게 전환되는 값비싼 클론. 예시는 템플릿이 아닙니다. 똑똑한 팀이 특정 청중, 특정 순간, 특정 상업적 약속을 위해 내린 결정의 증거입니다. 실제로 효과가 있는 프로세스는 리버스 엔지니어링입니다: 예시에서 그 뒤에 있는 결정을 읽고, 그 결정을 평범한 문장으로 기록한 다음, 각 클라이언트 구매자를 위해 처음부터 다시 구축하세요.

히어로를 계약서처럼 읽으세요

모든 예시 검토는 히어로 섹션을 계약서로 읽는 것에서 시작하세요. 헤드라인의 약속, 서브헤드라인의 증거, 단일 행동 촉구를 기록하세요. 나머지는 모두 장식입니다. 그 헤드라인을 쓰기 전에 제작자가 방문자에 대해 어떤 결정을 내렸는지 물어보세요. 그 답이 재사용할 수 있는 부분입니다.

Calendly의 태그라인 — "이메일을 주고받지 않고 미팅을 예약하세요" — 제작자가 방문자를 이메일 탁구에 빠진 바쁜 전문가로 결정했기 때문에 효과가 있습니다. 약속은 시간 절약입니다. CTA는 "미팅 예약"입니다. 그 결정은 서비스 비즈니스로 전환됩니다. 부기 클라이언트의 방문자는 서류 작업을 싫어하는 사업주입니다. 헤드라인은 "스프레드시트 혼란 없이 장부를 마감하세요"를 약속해야 하고 CTA는 "무료 정리 받기"여야 합니다. 같은 결정, 다른 단어. Notion은 동일한 훈련에서 단일 CTA "Notion 무료로 받기"를 목표로 합니다: 한 페이지, 하나의 행동, 방해 요소 없음. 보이지 않는 것을 주목하세요 — 캐러셀 없음, 보조 "더 알아보기" 버튼 없음, 전화번호를 묻는 양식 없음. 각 생략은 결정이며, 생략 결정은 비용이 들지 않기 때문에 복사하기 가장 저렴합니다.

Linear의 히어로는 동일한 훈련을 더 밀어붙입니다. 하나의 헤드라인, 하나의 서브헤딩, 하나의 버튼 — 스크롤하기 전까지 스크린샷 없음. 결정: "이 청중은 이미 문제를 알고 있으므로 우리의 임무는 적합성을 전달하는 것이지 교육하는 것이 아닙니다." 그 결정을 저장하세요. 클라이언트 구매자가 정교하다면 절제를 복사하세요. 그렇지 않다면 클릭을 요청하기 전에 더 많은 설명을 추가해야 한다는 것을 알게 됩니다. 히어로의 단어 수는 결정입니다. 세 가지를 말하려는 히어로는 아무것도 전달하지 못합니다. 예시에 접힌 부분 위에 너무 많은 아이디어가 있다면 모델이 아닌 경고로 취급하세요.

실제 예시를 통해 살펴보세요. 당신이 감탄하는 SaaS 홈페이지를 검토 중입니다. 히어로에는 짧은 헤드라인, 하나의 서브헤딩, 하나의 버튼이 있습니다. 순서대로 결정을 기록하세요: 방문자는 누구인가, 그들의 고통은 무엇인가, 그들을 앞으로 나아가게 하는 한 가지 행동은 무엇인가. 이제 지붕 수리 클라이언트에게 적용하세요. 방문자는 한겨울에 새는 지붕을 가진 건물 관리자입니다. 고통은 위험과 가동 중단입니다. 행동은 "평가 받기"입니다. SaaS 예시가 "방문자가 제품이 작동하는 모습을 봐야 한다"고 결정했다면 제품 애니메이션을 완성된 작업 사진으로 바꾸세요. 같은 결정, 다른 매체. 이것이 닮은 실패 없이 훔치는 방법입니다. 한 페이지-한 행동의 훈련만을 위해 입증된 SaaS 랜딩 페이지 관행을 살펴보세요.

산업이 아니라 의도입니다

예시를 산업 라벨로 분류하는 것을 중지하세요. "이것은 SaaS 사이트입니다"는 거의 유용한 정보를 주지 않습니다. "이것은 구매자가 결정하기 전에 세 가지 옵션을 비교하는 복잡한 결정을 위한 사이트입니다"는 무엇을 훔칠지 알려줍니다. 클라이언트의 구매자 의도로 분류한 다음 예시 유형을 그 의도에 맞추세요.

SaaS 사이트는 구매자의 의도가 "이것이 내 문제를 해결하는지 결정"이기 때문에 전환을 얻습니다. 헤드라인은 약속을 담고, 체험판이나 데모가 증거이며, CTA는 단일합니다. 에이전시 사이트는 구매자의 의도가 "이 사람에게 내 돈, 브랜드, 위기를 맡겨도 될까?"이기 때문에 전환을 얻습니다. 증거는 사례 연구, 클라이언트 로고, 팀 신뢰도입니다. CTA는 종종 상담입니다. 포트폴리오 사이트는 구매자의 의도가 "그들의 취향이 평판만큼 좋은가?"이기 때문에 전환을 얻습니다. 증거는 작업 자체이며, CTA는 의도적으로 숨겨져 있을 때가 있습니다.

예시 유형방문자 의도이것을 훔치세요이것은 건너뛰세요
SaaS"나에게 맞는지 결정"가치 제안 훈련, 단일 CTA, 기능-혜택 카피제품 전용 애니메이션, 가격 페이지 구조, 데모 우선 CTA
에이전시"이 회사를 신뢰할 수 있는가?"사례 연구, 클라이언트 증거, 지정된 팀, 명확한 참여 경로장황한 프로세스 페이지, 전문 용어가 많은 접근 방식 카피
포트폴리오"그들의 취향이 작업만큼 좋은가?"강력한 프로젝트 스토리, 전후, 절제된 프레젠테이션부족한 연락처 정보, 개성 우선 카피, 숨겨진 CTA

여기서 에이전시가 잘못하는 부분입니다: 예시를 클라이언트의 구매자가 아니라 자신의 야망에 맞춥니다. 법률 사무소 클라이언트가 경쟁사가 있기 때문에 "포트폴리오 사이트"를 요청합니다. 의도 테스트를 실행하세요. 변호사를 고용하는 사람은 두려워합니다. 그들은 변호사가 유사한 사건에서 이겼고, 공정하게 청구하며, 자신을 바보처럼 느끼게 하지 않을 것이라는 증거를 원합니다. 그것은 에이전시 패턴 — 증거, 신뢰성, 결과 — 이지 포트폴리오 패턴이 아닙니다. 에이전시 예시에서 훔치세요: 사건 결과, 클라이언트 스토리, 변호사 협회 회원 자격, 명확한 "업무 시작 방법" 섹션. 특정 클라이언트에게 어떤 형식이 실제로 승리하는지 결정해야 할 때, 예시를 열기 전에 형식 선택 프레임워크를 검토하세요.

표는 분류 도구이지 감옥이 아닙니다. 상업 프로젝트에 입찰하는 건설 하도급업체의 경우 구매자의 의도는 "이 팀이 일정과 예산 내에서 작업을 수행할 수 있는가?"입니다. 그것은 포트폴리오 증거가 있는 에이전시 신뢰입니다. 하이브리드는 끊임없이 발생합니다. 하나의 형식을 선택해야 한다고 생각하는 것이 오류입니다. 어떤 패턴이 지배할지 선택하는 것이지 단일 형식을 선택하는 것이 아닙니다. 건설 사이트는 전후 사진(포트폴리오 패턴)을 보여주면서도 안전 인증과 노동 조합 회원 자격(에이전시 패턴)으로 이끌 수 있습니다. 의도로 비율을 결정한 다음, 클라이언트의 브랜드 목소리가 최종 레이아웃을 결정하게 하세요.

두 번째 시나리오를 살펴보세요: 프랙셔널 CFO 컨설팅. 구매자는 이전 컨설턴트에게 데인 적이 있는 창업자입니다. 그것은 에이전시 문제입니다. 클라이언트와 정확한 결과를 명시하는 에이전시 사이트를 연구하세요. 클라이언트가 항상 이름을 공개할 수는 없습니다 — NDA — 그래서 결정은 전달되지만 증거는 바뀝니다: 로고 대신 익명화된 "핀테크 포트폴리오 회사"와 결과 언어. "신뢰는 증거의 구체성에 달려 있다"를 계획에 포함하세요. 이제 클라이언트는 각 요소가 왜 존재하는지 알게 됩니다.

디자인이 아니라 결정을 빌리세요

대부분의 "모범 사례" 기사는 디자인 선택이 이동한다고 말합니다. 그렇지 않습니다. 전체 너비 비디오 히어로는 드론 사진 포트폴리오에서 효과가 있습니다. 청중의 작업은 이미지를 판단하는 것이기 때문입니다. 같은 전체 너비 비디오를 법률 문서 서비스 홈페이지에 넣으면 제품을 숨기게 됩니다. 당신이 행동할 수 있는 최악의 조언은 "예술가처럼 훔치세요"입니다. 결과물을 훔치면 닮은꼴이 생깁니다. 결정을 훔치면 우연히 전환되는 맞춤 작업이 생깁니다.

따라서 예시의 모든 주목할 만한 선택에 대해 한 문장의 "때문에"를 쓰세요. 여백: "이 청중은 공간을 프리미엄과 동일시하기 때문." 어두운 배경: "이 청중은 엔지니어링으로 생각하고 다크 모드가 기술적으로 느껴지기 때문." 미소 짓는 사람: "이 청중은 거래를 두려워하고 따뜻함을 원하기 때문." 이제 결정은 이식 가능합니다. 프리미엄 법률 사무소는 여백 결정이 필요할 수 있습니다. 할인 법률 서비스는 그것을 거부해야 합니다. 이제 복사할 스크린샷이 아니라 적용할 규칙이 있습니다.

스크린샷을 찍기 전에 "때문에"를 쓰세요. 당신의 기억은 스크린샷을 "멋진 디자인"으로 분류하고 일주일 안에 추론을 잃을 것입니다. 쓰여진 "때문에"는 메커니즘을 표현하도록 강제합니다. 쓸 수 없다면 예시를 이해하지 못한 것입니다 — 단지 좋아했을 뿐입니다. 그 구분이 게임의 전부입니다.

구체적인 예시를 쌓아보세요. 솔로 디자이너를 위한 포트폴리오 사이트를 봅니다. 모든 프로젝트는 거대한 이미지로 시작한 다음 결과, 그다음 클라이언트 이름이 나옵니다. 결정: "이 청중은 결과를 보고 구매합니다." 이제 홈 리모델링 사이트를 재설계 중입니다. 구매자의 작업도 사물을 보는 것입니다 — 변화를 보는 것입니다. 그래서 결정이 전달됩니다: 전후 프로젝트 갤러리로 시작하세요. 그러나 구매자는 팀이 정시에 나타난다는 것을 신뢰해야 하므로 에이전시 열에서 결정을 추가하세요: 상담 CTA와 접힌 부분 위의 추천서. 이것이 뼈대 훔치기 방법입니다: 두 개의 빌린 결정, 디자인은 전혀 빌리지 않음.

당신이 보여준 수상 경력에 빛나는 예시처럼 보이는 사이트를 원하는 클라이언트의 반발을 듣게 될 것입니다. 정중하게 저항하세요. 그 예시가 픽셀이 아니라 결정으로 상을 받았고, 그들의 구매자는 예시의 구매자가 아니라고 말하세요. 한 문장의 "때문에"를 가리키며 "이 결정은 효과가 있습니다. 이 비주얼은 당신의 청중에게는 그렇지 않습니다"라고 말할 수 있으면 대화가 쉬워집니다.

주의: 클라이언트의 구매자가 시각적으로 정교하다면 — 건축가, 크리에이티브 디렉터, 사내 브랜드 팀 — 취향이 제품입니다. 더 문자 그대로 빌리세요. 질문은 결코 "이 예시가 마음에 드는가?"가 아닙니다. "내 클라이언트의 구매자가 이 결정을 필요로 하는가?"입니다. 그렇지 않다면 죄책감 없이 버리세요.

맥락과 함께 스와이프 파일을 구축하세요

일회성 영감은 연간 여러 사이트를 구축할 때 쓸모없습니다. 결정을 저장하는 스와이프 파일을 구축하세요. 스크린샷이 아닙니다. 간단한 표를 사용하세요: 예시, URL, 청중, 의도, 약속, 증거, CTA, "이 용도로는 사용하지 마세요." 한 문장의 "때문에" 열을 하나 더 추가하세요. 그 열에 가치가 있습니다.

각 행에는 다음이 필요합니다: 예시 URL, 스크린샷, 한 문장의 "때문에", 지배적인 구매자 의도, 약속, 증거, CTA, "이 용도로는 사용하지 마세요" 경고. 각 행에 의도 라벨을 태그하세요: "긴급 지역 서비스," "고려된 구매," "신뢰에 민감한 전문가," "취향 중심 창의적." 새 클라이언트 브리프가 도착하면 먼저 의도 라벨로 필터링하세요. 산업은 단지 타이브레이커입니다. 치과 클라이언트와 배관 클라이언트는 "지금 견적 받기" 의도를 공유할 수 있습니다 — 배관 예시가 지난주에 저장한 화려한 치과 전용 사이트보다 치과 페이지에 더 잘 맞을 수 있습니다.

분기별로 파일을 검토하세요. 더 이상 전환되지 않거나 만료된 예시를 삭제하세요. 단일 CTA라도 매주 한 가지 발견을 추가하세요. 두 분기 후에는 어떤 단일 예시도 제공할 수 없는 내부 결정 라이브러리를 소유하게 됩니다.

클라이언트 킥오프에서 파일을 사용하세요. 필터링된 보기를 제시하세요: "우리는 귀하의 구매자에게 맞는 세 가지 결정으로 이 페이지 시스템을 구축했습니다." 그것은 에이전시가 취향만이 아니라 시스템을 가지고 있음을 보여줍니다. 그것만으로도 유행하는 레이아웃을 복사하는 것보다 더 많은 작업을 얻습니다.

무언가를 출시하기 전에 신경 쓰지 않는 고객이 하는 방식으로 결과를 감사하세요. 그 감사는 제자리를 차지하지 못하는 모든 훔친 디자인 결정을 잡아냅니다.

결론

웹사이트를 수집하는 것을 중지하세요. 이유를 수집하기 시작하세요. 다음에 클라이언트 브리프를 받으면 스와이프 파일을 열고, 구매자와 일치하는 의도를 찾고, 맞는 결정을 훔치세요. 디자인은 필연적으로 그들의 것이 될 것입니다 — 시장, 브랜드, 예산이 다르기 때문입니다. 그것이 핵심입니다. 리버스 엔지니어링된 사이트는 다른 사람의 청중에게 사실이었던 결정으로 구축되고 당신의 청중에게 다시 테스트되었기 때문에 전환됩니다.

Sources (5)