전환율 최적화를 위해 웹 사이트를 디자인하는 방법
게시 됨: 2020-12-16웹 사이트가 비즈니스 성장에 도움이되는 방법에는 여러 가지가 있습니다. 그러나 웹 사이트 만 있다고해서 더 많은 고객이 보장되는 것은 아닙니다. 잘 설립 된 기업은 고객을 유치하고 전환하기 위해 웹 사이트를 판매 기계로 전환해야한다는 것을 알고 있습니다. HubSpot의 최근 설문 조사에 따르면 :
페이지로드 시간 의 처음 5 초가 전환율에 가장 큰 영향을 미칩니다. 웹 사이트 전환율은로드 시간이 추가 될 때마다 평균 4.42 % 감소합니다.
첫인상을위한 두 번째 기회는 없다고 그들은 말한다. 그리고 첫 순간부터 방문자를 사로 잡고 전환 할 때까지 절대로 보내지 않는 것은 웹 사이트의 디자인입니다. 하지만 웹 사이트를 이런 식으로 "작동" 하는 방법은 무엇입니까? 디자인 기본 사항을 보여 드리겠습니다.
클릭하면 전체 크기로 볼 수 있습니다. 전체 기사를 읽으려면 아래로 스크롤하십시오.
알아야 할 주요 용어
먼저이 튜토리얼에서 논의 된 몇 가지 주요 용어를 이해해야 주제를 더 잘 이해할 수 있습니다.
A / B 테스트 또는 분할 테스트 는 웹 페이지의 두 버전 (A 및 B)을 비교하여 어느 것이 더 잘 변환되는지 확인하는 과학적 프로세스입니다. 제목, 이미지, 클릭 유도 문안 버튼 및 색상을 테스트하여 몇 가지 이름을 지정할 수 있습니다.
클릭 유도 문안 (CTA) 은 방문자가 행동을 취하도록 촉구하는 버튼 또는 텍스트 행입니다. 웹 사이트를 방문 할 때해야 할 일을 알려줍니다. 예를 들면 웹 페이지의 "가입"버튼, 전자 상거래 상점의 "구매"버튼 및 앱의 "다운로드"버튼이 있습니다.
방문자 또는 리드가 원하는 작업을 완료하면 전환이 발생합니다. 방문자가 귀하의 웹 사이트에 성공적으로 가입했거나 귀하의 상점에서 항목을 체크 아웃했음을 의미합니다.
전환율 은 사이트에서 원하는 행동을 취하는 방문자의 비율입니다. 총 전환 수를 웹 사이트의 총 방문자 수로 나누어 전환율을 얻을 수 있습니다.
전환 최적화 또는 전환율 최적화 (CRO) 는 웹 사이트를 개선하는 체계적인 접근 방식이므로 원하는 행동을 취하는 사이트 방문자 수를 늘릴 수 있습니다. 귀하의 목표가 이메일 구독자를 늘리는 것이라면 방문자가 귀하의 뉴스 레터에 가입하기를 원할 것입니다. 또는 판매를 늘리려면 해당 구매 버튼을 누르도록해야합니다.
랜딩 페이지 는 일반적으로 웹 사이트의 홈 페이지이지만 방문자가 리드 또는 고객으로 전환하기 위해 방문하는 사이트의 모든 페이지가 될 수 있습니다.
다 변수 또는 다 변수 테스트 (MVT) 는 특정 페이지에서 동시에 여러 변수를 테스트하는 프로세스입니다. 어떤 조합이 가장 많이 전환되는지 알아 내기 위해 다른 요소를 만드는 것이 포함됩니다.
변환하는 웹 디자인 요소
웹 사이트를 만들거나 재 설계하려는 경우 시각적으로 매력적인 웹 사이트를 만들 때 고려해야 할 사항은 다음과 같습니다.
1. 이미지
이미지는 모든 웹 사이트에서 중요한 역할을합니다. 항상 그런 것은 아니지만 방문자를 쉽게 유치하고 참여시키는 데 사용됩니다. 잠재력을 극대화하기 위해 이미지를 올바르게 사용하는 방법을 알아야합니다.
다음은 사이트에서 이미지를 효과적으로 사용하기위한 몇 가지 팁입니다.
- 사람 얼굴로 이미지 선택
사이트에서 사람의 이미지를 사용하면 방문자에게 공감과 강한 유대감을 제공합니다.
“얼굴을 볼 때 우리는 자동으로 무언가를 느끼거나 그 사람과 공감하도록 트리거됩니다. 문제, 딜레마, 습관 등 웹 사이트의 콘텐츠를 인식하면 연결되고 이해되었다고 느낍니다. " (예쁘지 않음 : 웹 사이트에 감정 구축 by Sabina Idler)
PayPal이 랜딩 페이지에서이 기술을 사용하는 방법을 살펴보십시오.
- 이미지 최적화
웹 사이트를 만들 때 사용하는 이미지를 최적화하여 사이트의 로딩 속도에 영향을주지 않도록하는 것이 중요합니다. 또한 연구 결과에 따르면 페이지 응답이 1 초 지연 되어도 전환율이 7 % 감소 할 수 있습니다.
이미지 최적화의 아이디어는 품질에 영향을주지 않고 이미지를 압축하여 이미지를 밝게 만드는 것입니다. 무료로 사용할 수있는 이미지 최적화 도구는 다음과 같습니다.
- 작은 PNG
- Compressor.io
- JPEG 최적화
- Optimizilla
- Kraken.io
- 쉬운 랭킹
- 사진 크기 조정
- 사진 압축
- 이미지 변환
- 영웅 이미지 사용
명확하게 말하면 영웅 이미지는 슈퍼 히어로의 이미지가 아닙니다. 히어로 이미지는 웹 사이트 상단에 배치되는 큰 웹 배너 이미지입니다. 일반적으로 텍스트 줄 또는 클릭 유도 문안 버튼과 함께 배경에 배치됩니다.
예를 들면 다음과 같습니다.
보너스 팁 : 방문자에게 좋은 사용자 경험을 제공하기 위해 사용하는 이미지가 반응 형인지 확인하십시오.
2. 타이포그래피
Wikipedia에 따르면, 타이포그래피 는 글씨가 표시 될 때 읽기 쉽고, 읽기 쉽고, 매력적으로 보이도록 문자를 배열하는 기술과 기술입니다. 여기에는 서체, 포인트 크기, 줄 길이, 줄 간격 및 문자 간격을 사용하고 문자 쌍 사이의 간격을 조정하는 작업이 포함됩니다.
이 비디오는 타이포그래피가 종이에서 화면으로 어떻게 발전했는지 설명합니다.

얼마나 많은 글꼴이 있는지 아십니까? 답은 아무도 모릅니다. 이것이 올바른 글꼴 조합을 선택하는 것이 쉬운 일이 아닌 이유입니다.
따라서 사용할 조합을 결정하는 데 도움이되는 몇 가지 글꼴 페어링 도구는 다음과 같습니다.
- 유형 연결
- Google 유형
- 글꼴 쌍
- Genius 유형
- 유형 늑대
- 아름다운 웹 유형
- 사용중인 글꼴
- 그냥 내 타입
- Typ.io
- 블렌더
- 글꼴 조합기
- 타이포 테크
- Adobe Typekit
- Matcherator
- 조판
웹 사이트에 가장 적합한 글꼴을 선택하는 방법
3. 공백
Google이 웹 사이트의 공간을 최대화하지 않는 이유가 궁금하십니까? 공백의 힘을 사용하기 때문입니다.
공백 이라고도하는 여백은 웹 사이트에서 비어 있거나 비어있는 부분입니다. 방문 페이지에서이를 사용하여 방문자가 클릭 유도 문안에 집중하고 전환을 늘릴 수 있습니다. 공백이 반드시 사이트의 배경이 흰색이어야 함을 의미하지는 않습니다. 색상을 가지고 놀거나 이미지를 배경으로 사용할 수도 있습니다. 목표는 단순하게 만들면서 최고의 사용자 경험을 제공하는 것입니다.
기억하세요 : 깔끔한 웹 사이트는 방문자의 관심을 사로 잡습니다. 깔끔하고 잘 정리 된 사이트를 검색하는 것은 그들에게 즐거운 경험입니다.
4. 색상
웹 사이트를 만들 때 고려해야 할 또 다른 중요한 요소는 색상입니다. 색상에는 의미가 있으므로 어떤 색상을 선택하든 청중에게 전달하려는 메시지를 반영해야합니다.
예를 들어, 미국의 대부분의 은행은 신뢰를 의미하는 파란색을 사용합니다.

이미지 크레딧 : The Epoch Times
올바른 색상 조합을 선택할 때 색상이 나타내는 긍정적 인 느낌과 부정적인 느낌을 기록해 두십시오.
- 검은 색 – 물리학에서 검은 색은 사람에게 심리적 영향을 미치지 만 색상이 아닙니다. 그것은 힘과 힘을 상징하지만 죽음, 불행, 악을 상징하기도합니다.
- 흰색 – 일반적으로 흰색은 순수함과 순수함을 나타냅니다. 병원은 흰색을 사용하여 불임 감을 만듭니다. 그러나 차갑고 단조롭고 고립 된 것을 나타낼 수도 있습니다.
- 빨강 –이 색은 우리의 감정을 불러 일으 킵니다. 그것은 사랑, 흥분, 자신감과 관련 될 수 있습니다. 부정적인 측면에서는 공격성과 분노를 상징합니다.
- 파란색 – 하늘색, 바다색이며 남성이 가장 선호하는 색상입니다. 파란색은 평온함, 평온함, 안정감 및 신뢰성을 상징합니다. 그러나 슬픔을 나타낼 수도 있으므로 "푸른 느낌"이라는 용어가 사용됩니다.
- 녹색 – 숲의 색이며 종종 자연을 나타냅니다. 녹색은 평온함, 낙관주의 및 행운을 의미합니다.
- 노란색 – 태양과 마찬가지로 노란색은 밝기와 따뜻함을 나타냅니다. 색상을 얻는 것이 가장 관심을 끌기 때문에 도로 표지판에서 일반적으로 사용됩니다. 그러나 반사되는 빛의 양으로 인해 눈의 피로를 유발할 수도 있습니다.
- 보라색 – 라벤더 색입니다. 보라색은 왕족과 부를 상징하지만 일부는 그것을 이국적이거나 인공적인 것으로 해석 할 수 있습니다.
- 브라운 – 그것은 자연스럽고 자연스러운 색상입니다. 탄력성, 신뢰성 및 안전성을 나타냅니다. 슬픔과 고립을 의미 할 수도 있습니다.
- 주황색 – 노란색과 마찬가지로 주황색도주의를 끌기 위해 사용됩니다. 그것은 따뜻함, 흥분 및 에너지를 나타냅니다. 종종 할로윈과 관련이 있습니다.
- 핑크 –이 색상은 진정 효과가 있습니다. 그것은 친절, 양육 및 여성 성과 관련이 있습니다. 브랜드가 너무 여성스러워 보이지 않게하려면이 색상을 사용하지 않아야합니다.
보너스 팁 : 웹 디자인에 가장 적합한 색상을 결정할 수없는 경우 A / B 테스트 또는 다 변수 테스트를 사용할 수 있습니다. 어떤 색상이 더 잘 변환되는지 아는 데 도움이됩니다.
5. 모바일 친화적
웹 사이트에서 전환을 극대화하려면 모바일 친화적이어야합니다. 스마트 폰 사용의 증가로 인해 오늘날 사람들은 데스크톱, 태블릿 및 휴대폰과 같은 여러 화면에서 웹 사이트에 액세스합니다. 10 명 중 8 명은 스마트 폰을 통해 인터넷을 사용합니다.
모바일 트래픽을 위해 WordPress 레이아웃을 최적화하는 방법
다음 도구를 사용하여 다양한 화면 크기에 대한 웹 사이트의 응답 성을 파악하십시오.
- Google Search Console의 모바일 친 화성 테스트
- MobileTest.me
- Bing의 모바일 친 화성 테스트 도구
- MobiReady 모바일 친화적 검사기
- Urlitor
- 브라우저 스택
- RankWatch
- Google의 PageSpeed Insights
기억하세요 : 모바일 친화적 인 웹 사이트는 그렇지 않은 웹 사이트보다 순위가 높습니다.
결론
전환율 최적화를 수행 할 때 웹 디자인이 트래픽을 수익으로 전환하는 데 큰 역할을한다는 점을 명심해야합니다. 사이트에서 높은 이탈률을 방지하려면 위에서 제공 한 도움말을 따르세요.