Communitygithub.com

랜딩 페이지 전환 및 UX

랜딩 페이지, 가입 및 리드 캡처 양식, CTA, 가치 제안, 사회적 증거를 설계하거나 검토할 때 사용합니다. 웹 제품에 대한 UX 연구 및 테스트를 계획할 때도 사용합니다. 구체적이고 테스트 가능한 규칙을 제공합니다.

랜딩 페이지 전환 및 UX란 무엇인가요?

이 스킬은 랜딩 페이지의 전환율을 높이고 사용자 경험(UX)을 개선하기 위한 실용적이고 테스트 가능한 규칙들을 제공합니다. 마케팅, 전환 최적화, UX 전자책에서 추출한 지식을 바탕으로, 가치 제안 전달, 콜투액션(CTA) 최적화, 리드 캡처 양식 설계, 사회적 증거 활용, 페이지 흐름 구성, 피해야 할 디자인 실수 등 6가지 주요 영역을 다룹니다. 각 규칙은 명확한 지침, 간결한 이유, 구체적인 예시로 구성되어 있어 개발자, 디자이너, 제품 관리자가 실무에 즉시 적용할 수 있습니다. 모든 규칙은 모바일 우선 접근성, 사용자 심리학, 데이터 기반 의사 결정을 강조하며, 특히 '5초 테스트', '단일 목표 페이지', '짧은 양식' 등의 원칙을 통해 사용자 행동을 이해하고 전환을 극대화하는 데 초점을 맞춥니다.

지원 대상~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/whoiscarlo/agent-skills/tree/HEAD/skills/landing-conversion-ux

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

랜딩 페이지 전환 및 UX은(는) 무엇을 하나요?

로그인, 가입, 이메일 남기기, 요청 등 하나의 행동을 유도하는 페이지를 위한 규칙입니다. 마케팅, 전환 및 UX 전자책(UserTesting, UXPin, SmartBug, Usabilla 등, 대략 2014~2016년)에서 추출했습니다. 인용된 숫자는 오래되었지만, 그 이면의 행동은 변하지 않았습니다.

각 규칙은 지침, 간단한 이유, 예시로 구성됩니다. 검토 시에는 마지막에 있는 체크리스트부터 시작하세요.


1. 가치 제안 및 어바우트 더 폴드

  1. 5초 테스트를 통과하세요. 이유: 방문자는 몇 초 안에 페이지가 자신에게 적합한지 결정합니다. 그 시간 안에 무엇을 하는지 말할 수 없으면 '뒤로' 버튼을 누릅니다. 예시: 누군가에게 페이지를 5초 동안 보여주고, 숨긴 후 "이게 뭐고 누구를 위한 거죠?"라고 물어보세요. 대답하지 못하면 다른 것은 건드리지 말고 헤드라인부터 다시 작성하세요.

  2. 헤드라인은 당신이 아니라 방문자의 결과에 대해 작성하세요. 이유: '저희는'에 대해 이야기하는 페이지는 독자가 스스로 해석하게 만듭니다. '당신은'과 구체적인 결과가 그 역할을 대신해 줍니다. 예시: "저희는 마케팅 이메일을 큐레이션합니다" -> "400개 브랜드가 이메일을 작성하는 방법을 정렬 및 검색 가능하게 확인하세요."

  3. 헤드라인을 뒷받침하는 2~3개의 구체적인 행동 이유를 제시하세요. 이유: 헤드라인은 동기를 부여하고, 이유는 망설이는 사람들을 전환시킵니다. 예시: 헤드라인 아래에 세 줄: "매주 새로운 브랜드", "전체 이메일, 썸네일 아님", "무료 탐색".

  4. 스톡 사진이 아닌 실제 제품을 보여주세요. 이유: 일반적인 이미지는 채우기 용으로 읽히며 페이지의 신뢰도를 떨어뜨립니다. 제품 스크린샷은 존재를 증명합니다. 예시: 웃는 팀 사진을 실제 보관된 이메일 그리드로 교체하세요.

  5. 첫 화면에서 제안을 명시하고, 스크롤할 수 있게 하세요. 이유: 히어로 영역은 가치 제안과 주요 행동을 전달해야 하지만, 모든 기능을 어바우트 더 폴드에 채우면 복잡해집니다. 계층 구조가 명확하면 사람들은 스크롤합니다. 예시: 히어로에는 헤드라인, 서브라인, 버튼 하나, 제품 미리보기가 포함됩니다. 기능, 증거, FAQ는 아래에 위치합니다.

  6. 작은 화면을 먼저 디자인하세요. 이유: 휴대폰 레이아웃은 콘텐츠의 우선순위를 정하도록 강제합니다. 모바일에서 살아남는 것이 중요하며, 데스크톱 버전은 이를 기반으로 깔끔하게 확장됩니다. 예시: 375px 버전을 헤드라인, 버튼, 증거 한 줄만으로 와이어프레임한 다음, 너비를 늘려 빈 공간이 너무 많아지면 다음 항목을 추가하세요.

  7. 히어로를 빠르게 유지하세요. 이유: 약 1초 이상의 지연은 사람들이 통제 불능이라고 느끼게 만들고, 느린 페이지는 방문자와 검색 순위를 모두 잃게 합니다. 예시: 압축된 미리보기 이미지 하나, 자동 재생 동영상 없음, 슬라이더 없음.

[출처: Inbound Marketing's Most Wanted 33 Website Design Crimes; Lead Generation Techniques for High Conversions and Great UX; The Elements of Successful UX Design; Timeless UX Design Trends: Responsive and Adaptive; Responsive Web Design Best Practices]


2. 콜투액션(CTA)

  1. 랜딩 페이지에 하나의 목표와 하나의 기본 CTA를 부여하세요. 이유: 모든 추가 행동은 원하는 행동과 경쟁합니다. 동영상 시청, 여섯 개의 사용 후기 읽기, 양식 작성을 요구하는 페이지는 그 과정에서 방문자를 잃습니다. 예시: 상단과 하단에 반복되는 "아카이브 열기" 버튼 하나, 다른 것은 버튼 스타일로 디자인하지 않음.

  2. 버튼 레이블은 다음에 일어날 일을 나타내세요. 이유: "제출"과 "여기를 클릭"은 메커니즘을 설명할 뿐 보상을 설명하지 않습니다. 동사와 대상을 함께 사용하면 페이지의 목표가 명확해집니다. 예시: "제출" -> "이 브랜드 요청"; "로그인" -> "아카이브 열기".

  3. 방문자가 약속하기 전에 무엇을 얻는지 알려주세요. 이유: 사람들은 "내 이메일과 무엇을 교환하는 거지?"라고 묻습니다. 텍스트와 가능하면 결과 사진으로 답하세요. 예시: 게이트된 버튼 옆에 "무료. Google로 로그인. 10초 소요."라는 문구와 그 뒤에 있는 아카이브 미리보기를 넣으세요.

  4. CTA는 강조가 아니라 대비를 통해 눈에 띄게 만드세요. 이유: 차분한 페이지의 채도가 높은 버튼은 시선을 끕니다. 브랜드와 충돌하는 자극적인 색상은 사이트 전체를 싸구려로 보이게 합니다. 예시: 주변 UI를 채도를 낮추고 기본 버튼에만 브랜드의 가장 강력한 색상을 지정하세요.

  5. 버튼처럼 보이는 것은 버튼뿐이어야 합니다. 이유: 아무 기능도 없는 박스형 텍스트나 가짜 버튼은 클릭을 낭비하고 사람들이 페이지의 나머지 요소를 신뢰하지 못하게 만듭니다. 예시: "400+ 브랜드"에 테두리가 있는 알약 모양을 사용하지 말고 레이블 또는 일반 텍스트로 스타일링하세요.

  6. 터치 대상은 크게 만들고 간격을 충분히 두세요. 이유: 손가락은 커서보다 정밀도가 떨어집니다. 작거나 좁은 대상은 잘못된 터치와 이중 터치를 유발합니다. 예시: 기본 버튼은 최소 44x44 포인트, 가장 가까운 링크와 충분한 공간 확보.

  7. 중요한 것을 호버 뒤에 숨기지 마세요. 이유: 터치 스크린에는 호버가 없습니다. 마우스 오버 시에만 나타나는 정보는 휴대폰 사용자에게 보이지 않습니다. 예시: "무엇을 얻는지"에 대한 설명을 툴팁이 아닌 버튼 아래에 표시하세요.

  8. 준비되지 않은 사람들을 위한 더 쉬운 경로를 제공하세요. 이유: 대부분의 방문자는 첫 방문 시 주요 행동을 할 준비가 되어 있지 않습니다. 덜 부담스러운 보조 옵션은 그들이 빈손으로 떠나는 것을 막지만, 시각적으로 보조적으로 유지해야 합니다. 예시: 기본 버튼 아래에 텍스트 링크 "또는 새 브랜드가 등록될 때 이메일 받기".

[출처: 33 Website Design Crimes; The Elements of Successful UX Design; Designing Better UX with UI Patterns; Responsive Web Design Best Practices; Timeless UX Design Trends: Responsive and Adaptive]


3. 리드 캡처 및 가입 양식

  1. 지금 당장 사용할 것만 요청하세요. 이유: 모든 필드는 완료율을 낮춥니다. 한 테스트에서 양식을 11개 필드에서 4개로 줄이자 리드 품질 저하 없이 가입이 100% 이상 증가했습니다. 예시: "다음 브랜드 요청" 양식에는 브랜드 이름과 이메일만 필요합니다. 이름, 회사, 전화번호는 필요 없습니다.

  2. 혼란을 주는 필드는 제거하세요. 이유: 모호한 필드 하나가 양식을 망칠 수 있습니다. 유명한 사례에서 사람들이 잘못 읽은 선택적 "회사" 필드 하나를 제거하고 수백만 달러의 수익을 얻었습니다. 예시: 브랜드 요청에 "웹사이트"를 추가하면 귀하의 사이트인지 브랜드의 사이트인지 사람들이 알지 못할 수 있습니다. 삭제하거나 정확하게 레이블을 지정하세요.

  3. 한 번에 모두 수집하지 말고 나중에 더 수집하세요. 이유: 각 방문 시 조금씩 묻는 점진적 프로파일링은 한 번에 긴 양식을 작성하게 하여 사람들이 가짜 정보를 채우는 것보다 더 많은 완료와 깨끗한 데이터를 얻습니다. 예시: 첫 번째 요청은 이메일만 묻고, 이후 이메일에서는 "어떤 업계에 종사하시나요?"라고 묻습니다.

  4. 합리적인 형식의 입력을 모두 수용하세요. 이유: "Nike.com"을 거부하고 "Nike"를 원하는 것은 사용자를 파서로 처벌하는 것입니다. 서버에서 정리하세요. 예시: 공백 제거, "www." 및 ".com" 제거, 대소문자 구분 없이 일치.

  5. 양식을 잠금 해제하는 가치 옆에 배치하세요. 이유: 유용한 콘텐츠 바로 뒤에 있는 양식은 사람들이 무시하는 법을 배운 일반적인 사이드바 박스보다 훨씬 더 잘 전환됩니다. 예시: "브랜드가 없나요? 요청하세요"를 아카이브 미리보기 바로 아래에 배치하고, 푸터에는 배치하지 마세요.

  6. 로그인과 가입을 시각적으로 구분하세요. 이유: 두 양식이 함께 쌓여 있으면 많은 신규 방문자가 잘못된 양식을 작성하기 시작합니다. 예시: 두 경우를 모두 처리하는 "Google로 계속" 버튼 하나, 또는 명확하게 분리된 두 개의 패널.

  7. 비밀번호 표시 토글과 눈에 보이는 "비밀번호 찾기" 링크를 제공하세요. 이유: 모바일에서 비밀번호를 잘못 입력하면 재설정 이메일을 보내게 되어 흐름에서 벗어나게 됩니다. 예시: 비밀번호 필드에 눈 아이콘; 바로 아래에 재설정 링크.

  8. 페이지에서 일반 언어로 성공을 확인하세요. 이유: 사람들은 양식이 작동했는지와 다음에 무엇이 일어나는지 알아야 합니다. 예시: "알겠습니다. Glossier가 아카이브에 추가되면 이메일을 보내드리겠습니다."

  9. 이메일로 무엇을 하는지 한 줄로 간단히 설명하세요. 이유: 개인정보 보호에 대한 우려는 사람들이 마지막 필드에서 멈추는 일반적인 이유입니다. 일반 언어가 법적 텍스트 링크보다 낫습니다. 예시: "브랜드가 추가되면 한 통의 이메일. 요청하지 않으면 뉴스레터 없음."

[출처: 3 Common UX Mistakes Killing Good Design; 33 Website Design Crimes; The Elements of Successful UX Design; Lead Generation Techniques for High Conversions and Great UX; Designing a Checkout Flow That Converts (form rules only)]


4. 사회적 증거와 신뢰

  1. 가능하면 실제 숫자를 사용하세요. 이유: 사람들은 형용사보다 구체적인 숫자를 더 신뢰합니다. 예시: "거대한 라이브러리"보다 "312개 브랜드의 2,140개 이메일"이 더 낫습니다.

  2. 모든 사용 후기는 실제 사람에게 귀속시키세요. 이유: 이름, 역할, 사진은 인용문을 공감하게 만듭니다. 익명의 인용문은 지어낸 것으로 읽힙니다. 예시: "환영 시리즈에 몇 시간을 절약했습니다." DTC 브랜드의 라이프사이클 마케터 Priya S., 헤드샷 포함.

  3. 인지도 있는 로고를 조용히 보여주세요. 이유: 연관성을 통한 신뢰성은 효과적이지만, 화려한 로고는 CTA와 경쟁합니다. 예시: 히어로 바로 아래에 회색조 브랜드 로고 한 줄.

  4. 의심이 생기는 곳에 증거를 배치하세요. 이유: 페이지 중간에, 지지하는 주장 옆에 있는 사용 후기는 끝에 있는 의견 모음보다 효과적입니다. 예시: "전체 이메일, 썸네일 아님" 뒤에 전체 크기 보기를 사용한 사람의 인용문.

  5. 사회적 증거가 도움이 된다고 가정하지 말고 테스트하세요. 이유: 구독자 수는 때때로 전환율을 낮추며, 특히 숫자가 적을 때 그렇습니다. 예시: '800명의 마케터와 함께하세요'가 있거나 없는 히어로를 A/B 테스트하세요.

  6. 정교함과 정직함으로 신뢰를 얻으세요. 이유: 시각적 품질은 사람들이 신뢰성을 판단하는 첫 번째 요소입니다. 오타, 고장난 버튼, 지저분한 정렬은 모두 "진짜가 아님"으로 읽힙니다. 예시: 모든 문자열을 교정하고, 출시 전에 모든 링크를 클릭하세요.

  7. 다크 패턴을 절대 사용하지 마세요. 이유: 숨겨진 옵트인이나 찾기 어려운 취소 링크와 같은 속임수는 한 번 성공하고 사용자를 영원히 잃습니다. 예시: 명확하게 레이블이 지정되고 체크되지 않은 "주간 다이제스트도 보내기" 상자. 절대 작은 글씨에 숨겨진 사전 체크된 상자를 사용하지 마세요.

  8. 비용과 조건을 솔직하게 알리세요. 이유: 사람들은 가격을 일찍 보는 것을 선호하며, 조건부로 판명되는 "무료" 주장은 신뢰를 파괴합니다. 예시: 탐색은 무료이지만 다운로드는 유료라면, 로그인 후가 아니라 랜딩 페이지에서 그렇게 말하세요.

[출처: The Elements of Successful UX Design; Lead Generation Techniques for High Conversions and Great UX]


5. 페이지 흐름과 구조

  1. 페이지를 디자인하기 전에 경로를 매핑하세요. 이유: 계획된 "다음에 무엇을 하는가" 없이 페이지는 막다른 골목이 됩니다. 예시: 적어보세요: 도착, 헤드라인 읽기, 미리보기 보기, "아카이브 열기" 클릭, 로그인, 아카이브 내부로 이동.

  2. 단일 목표 랜딩 페이지에서 기본 탐색을 제거하세요. 이유: 모든 탐색 링크는 제안에서 나가는 출구입니다. 예시: 헤더에 로고와 하나의 CTA, "블로그 / 정보 / 가격" 메뉴 없음.

  3. 실제 페이지 앞에 스플래시 페이지를 절대 배치하지 마세요. 이유: 단계를 추가하고 방문자에게 아무것도 알려주지 않습니다. 예시: "사이트 입장" 게이트 없음. 랜딩 페이지가 정문입니다.

  4. 모든 페이지가 다음 단계로 끝나게 만드세요. 이유: 그냥 끝나는 페이지는 방문자가 찾게 만듭니다. 몇 초 안에 어디로 가야 할지 찾지 못하면 떠납니다. 예시: FAQ는 히어로와 동일한 CTA로 끝납니다.

  5. 스캐너를 위해 작성하세요. 이유: 대부분의 사람들은 제목, 부제목, 첫 문장만 읽습니다. 예시: 짧은 단락, 명확한 소제목, 기능에 대한 글머리 기호 목록.

  6. 콘텐츠를 그룹화하고 간격을 두어 인지 부하를 줄이세요. 이유: 여백은 이해도를 높이고, 관련 항목을 묶으면 아무것도 제거하지 않고도 더 많은 정보를 흡수할 수 있습니다. 예시: 기능을 9개의 흩어진 줄 대신 3개의 카드로 그룹화하세요.

  7. 패턴이 더 낫다는 증거가 없으면 익숙한 패턴을 사용하세요. 이유: 인식 가능한 패턴은 사람들이 생각하지 않고 행동하게 합니다. 패턴을 깨면 학습을 강요하고 오류를 유발합니다. 예시: 로그인을 숨겨진 제스처가 아닌 오른쪽 상단에 배치하세요. 패턴에 대한 규칙에 "~하지 않는 한" 또는 "예외"가 필요하다면, 그것이 재고할 때입니다.

  8. 링크 뒤에 있는 내용으로 링크 레이블을 지정하세요. 이유: 명확한 레이블은 "정보의 냄새"를 제공합니다. 귀여운 레이블은 그것을 숨깁니다. 예시: "좋은 것"이 아닌 "브랜드 찾아보기".

  9. 기본적인 접근성을 충족시키세요. 이유: 밝은 햇빛 아래 있거나 느린 휴대폰을 사용하는 사람을 포함하여 모든 사람에게 좋은 UX입니다. 예시: 텍스트 대비 최소 4.5:1, 본문 텍스트 최소 16px, 줄 높이 약 1.5, 양식 필드에 실제 레이블.

  10. 빈 상태와 대기 상태를 의도적으로 디자인하세요. 이유: 로그인 후 빈 화면은 고장난 것처럼 보입니다. 명확한 빈 상태나 로딩 상태는 사람들에게 무엇을 기대해야 하는지 알리고 통제감을 유지하게 합니다. 예시: 흰 페이지가 아닌 스켈레톤 그리드와 함께 "2,140개의 이메일 로딩 중...".

[출처: 33 Website Design Crimes; 3 Common UX Mistakes Killing Good Design; Designing Better UX with UI Patterns; The Elements of Successful UX Design; Responsive Web Design Best Practices; Idiot Buttons: The Placebo in UX Design]


6. 피해야 할 디자인 실수

페이지를 가장 자주 망치는 실수에 대한 빠른 목록입니다. 각 항목은 대신 무엇을 해야 하는지 알려줍니다.

  • 슬라이더와 캐러셀. 첫 번째 이후 슬라이드를 클릭하는 사람은 거의 없으며, 페이지 속도를 늦춥니다. 대신 하나의 강력한 이미지를 보여주세요.
  • 자동 재생 동영상 또는 소리. 사람들을 놀라게 하고 떠나게 합니다. 재생 버튼을 사용하고 선택하도록 하세요.
  • 싸구려 스톡 사진. 데이터를 요구하는 페이지에서 의심스러워 보입니다. 실제 제품 사진을 사용하세요.
  • 랜딩 페이지에 여러 개의 경쟁 CTA. 하나를 선택하세요.
  • 기본 "제출" 버튼. 행동으로 이름을 변경하세요.
  • 제안의 가치보다 긴 양식. 최소한으로 줄이세요.
  • 복잡함. 모든 블록은 그 자리를 정당화해야 합니다. 아플 때까지 제거하세요.
  • 텍스트 벽. 제목, 짧은 단락, 글머리 기호로 나누세요.
  • 대비가 낮거나 아주 작은 텍스트. 흰색 배경에 밝은 회색은 가독성에 실패합니다.
  • 페이지 콘텐츠와 관련 없는 CTA. 페이지와 일치하지 않는 글로벌 사이드바 제안은 전환율이 낮습니다. 제안을 페이지에 맞추세요.
  • 자기 자신에 대해 말하기. '저희는'을 '당신은'과 방문자의 결과로 바꾸세요.
  • 모바일을 무시하거나 축소판으로 취급. 작은 화면에서 디자인하고 확장하세요.
  • 원치 않는 팝업. 이탈 의도를 보여주는 팝업은 대개 무시되거나 차단됩니다. 이탈 의도를 개선하는 데 집중하세요.
  • 혼란스러운 메뉴와 비표준 내비게이션. 단순하고 예측 가능하게 유지하세요.
  • 필수 필드를 명확하게 표시하지 않음. 별표(*)와 설명을 사용하세요.
  • 오류 메시지 없이 양식 재설정. 사용자가 모든 것을 다시 입력하게 만듭니다. 오류 메시지를 인라인으로 표시하고 입력 내용을 보존하세요.
  • 페이지당 많은 링크. 중요한 내용을 묻습니다. 정보의 냄새를 유지하면서 줄이세요.
  • 끝나지 않는 스크롤. 방문자를 막다른 골목으로 이끕니다. 명확한 중단점과 행동 유도를 제공하세요.
  • 시각적 계층 구조 부족. 크기, 색상, 간격으로 중요성을 전달하세요.
  • 깨지거나 누락된 이미지에 대한 대체 텍스트 없음. 접근성과 오류 허용에 실패합니다.

[출처: 33 Website Design Crimes; The Elements of Successful UX Design]


7. 측정 및 테스트 (자신을 속이지 않고)

통계적 유의성에 대한 전체 튜토리얼은 아니지만, 일반적인 함정을 피하기에 충분합니다.

  1. 실행하기 전에 가설을 작성하세요. 이유: 변화를 먼저 측정하고 나중에 이유를 생각하는 것은 발견한 것을 해석하기 어렵게 만듭니다. 예시: "히어로에 '800명의 마케터'를 추가하면 가입 전환율이 5% 증가할 것입니다."

  2. 테스트당 한 가지 요소만 변경하세요. 이유: 헤드라인, CTA, 이미지를 동시에 변경하면 어떤 변화가 결과를 만들었는지 알 수 없습니다. 예시: 헤드라인을 한 버전에서만 변경하고, 이미지는 동일하게 유지하세요.

  3. 유의미한 데이터를 얻을 때까지 기다리세요 (너무 일찍 확인하지 마세요). 이유: 충분한 데이터 없이 테스트를 중단하면 우연이 규칙으로 보입니다. 예시: 방문자가 적은 사이트는 테스트가 유효해지기까지 몇 주가 걸릴 수 있습니다. "눈에 띄어 보이는" 결과를 매일 확인하지 마세요.

  4. 세그먼트가 아닌 전체 전환을 측정하세요. 이유: 신규 방문자는 자신을 알지만, 재방문자는 무시해야 합니다. 별도로 측정하거나 각 그룹에 대한 충분한 데이터를 모으세요. 예시: "향상된" 전환이 전적으로 재방문자에게서 나오고 신규 방문자는 그렇지 않은 경우, 실제로 개선된 것은 없습니다.

  5. 대시보드 전후 비교에 주의하세요. 이유: 계절성, 프로모션, 트래픽 소스 변경은 실제 변화를 가장합니다. 예시: 변경 전후 한 달을 비교하는 것은 휴일 트래픽 급증과 겹치면 의미가 없습니다. 통제된 A/B 테스트를 동시에 실행하세요.

  6. 낮은 트래픽으로 테스트할 때는 베이지안 방법을 사용하세요. 이유: 빈도주의 테스트(카이제곱, p-값)는 표본이 적으면 신뢰할 수 없습니다. 베이지안 접근법은 더 적은 데이터로 중단할 수 있습니다. 예시: 구글 옵티마이즈 또는 VWO의 베이지안 계산기를 사용하세요.

  7. 세그먼트별로 결과를 분석하세요. 이유: 전체 전환은 동일하게 보이지만 한 그룹(예: 모바일)에서는 개선되고 다른 그룹(데스크톱)에서는 악화될 수 있습니다. 예시: 기기별, 트래픽 소스별, 신규 대비 재방문별로 전환율을 확인하세요.

  8. 큰 승리뿐만 아니라 작은 변화도 기록하세요. 이유: 무의미한 테스트도 패턴을 드러냅니다. 실패는 작은 승리만큼 가치 있습니다. 예시: 헤드라인 색상 변경이 영향을 주지 않았다는 것을 기록해 두면 다음에 그 요소를 테스트하는 시간을 절약할 수 있습니다.

[출처: The Elements of Successful UX Design; Lead Generation Techniques for High Conversions and Great UX]


체크리스트 (검토용)

각 질문에 예/아니오/해당 없음으로 대답하세요. '아니오'가 있으면 항목을 수정해야 합니다.

가치 제안

  • 5초 테스트 통과: 사람들이 즉시 페이지의 목적을 말할 수 있습니까?
  • 헤드라인은 방문자의 결과를 중심으로 작성되었습니까?
  • 헤드라인 아래에 2-3개의 구체적인 이유가 있습니까?
  • 영웅 이미지는 제품 또는 결과의 실제 스크린샷입니까?
  • 첫 화면은 제안을 명시하고 스크롤을 권장합니까?

CTA

  • 페이지에 하나의 기본 CTA가 있습니까?
  • 버튼 레이블은 다음에 일어날 일을 설명합니까? ("제출"이 아님)
  • 약속하기 전에 '무엇을 얻는지'가 명확합니까?
  • CTA는 소리보다 대비로 눈에 띕니까?
  • 버튼처럼 보이는 것은 버튼뿐입니까?
  • 터치 대상이 크고 충분히 떨어져 있습니까? (44x44pt+)
  • 호버 뒤에 중요한 정보가 없습니까?
  • 준비되지 않은 사람들을 위한 덜 부담스러운 보조 옵션이 있습니까?

양식

  • 필드가 최소화되었습니까? (다음 단계를 위한 것만)
  • 필드가 명확하고 모호하지 않습니까?
  • 나중에 더 많은 정보를 수집합니까 (점진적 프로파일링)?
  • 입력 형식이 유연합니까?
  • 양식이 잠금 해제하는 콘텐츠 옆에 있습니까?
  • 로그인과 가입이 시각적으로 구분됩니까?
  • 비밀번호 표시 토글과 '비밀번호 찾기' 링크가 있습니까?
  • 제출 후 명확한 성공 확인이 있습니까?
  • 이메일 사용에 대한 개인정보 보호 설명이 있습니까?

신뢰와 증거

  • 가능하면 구체적인 숫자가 사용되었습니까?
  • 사용 후기에 실제 이름/역할/사진이 있습니까?
  • 로고가 있으면 방해가 되지 않습니까? (회색조, 단일 행)
  • 증거가 의심이 생기는 지점에 배치되었습니까?
  • 사회적 증거가 가정되지 않고 테스트되었습니까?
  • 페이지가 정교하고 오류가 없습니까?
  • 다크 패턴이 사용되지 않았습니까?
  • 비용과 조건이 명확하게 명시되었습니까?

흐름

  • 페이지 경로가 계획되고 문서화되었습니까?
  • 단일 목표 페이지에서 기본 탐색이 제거되었습니까?
  • 스플래시 페이지가 없습니까?
  • 모든 섹션이 명확한 다음 단계로 이어집니까?
  • 텍스트가 스캔 가능합니까? (짧은 단락, 글머리 기호)
  • 콘텐츠가 그룹화되고 간격이 적절합니까?
  • 패턴이 표준적이고 예측 가능합니까?
  • 링크 레이블이 설명적입니까?
  • 기본적인 접근성 표준이 충족됩니까?
  • 빈 상태와 로딩 상태가 의도적으로 디자인되었습니까?

기타

  • 슬라이더, 자동 재생 동영상, 싸구려 스톡 사진이 없습니까?
  • 페이지가 모바일에서 먼저 디자인되었습니까?
  • 속도가 최적화되었습니까? (1초 이내 히어로)
  • 원치 않는 팝업이나 이탈 의도 팝업이 없습니까?

측정

  • 각 테스트에 대한 가설이 기록되었습니까?
  • 테스트당 한 가지 변수입니까?
  • 결정을 내리기 전에 충분한 데이터가 수집되었습니까?
  • 세그먼트가 혼합되지 않았습니까? (신규 vs 재방문)
  • 대시보드 전후 비교를 실제 테스트로 착각하지 않습니까?

관련 스킬