SEO와 웹 디자인을 결합하여 페르소나 및 검색 엔진에 보다 효과적인 페이지를 만드는 방법
게시 됨: 2021-07-12SEO 웹 디자인의 중요성은 우리가 웹사이트 개발에 투자할 때 기능적이고 단순하며 직관적인 탐색을 제공할 뿐만 아니라 즐거운 시각적 요소와 함께 웹사이트가 매우 보기 쉽고 검색 엔진에 친숙하기를 원한다는 것입니다.
이는 모두 우수한 사용자 경험을 제공하기 위한 우려의 일부입니다. 그러나 이 접근 방식을 SEO 서비스 및 기술과 조화시킬 수 있습니까?
검색 엔진 최적화와 웹 디자인을 결합할 때 몇 가지 문제가 있지만 이는 매우 실행 가능한 조합입니다.
이것은 사람과 검색 엔진 모두에게 매력적인 페이지를 만드는 것의 중요성을 이해하고 최적화에 영향을 미치는 디자인 오류를 더 잘 이해함에 따라 명확해집니다.
더 알고 싶으십니까? 그럼 아래를 읽어보세요!
SEO와 웹 디자인을 결합하는 이유는 무엇입니까?
특별한 웹사이트를 만들 때 SEO와 웹 디자인을 동맹으로 고려하는 것에 찬성하는 많은 주장이 있습니다. 둘 다 균형을 유지해야 하는 5가지 주요 이유를 살펴보겠습니다.
1. 대부분의 트래픽은 일반적으로 자연 검색에서 발생합니다.
정교한 검색 엔진 최적화 플랫폼 및 기타 인터넷 마케팅 솔루션을 보유한 회사인 BrightEdge의 연구에 따르면 평균적으로 자연 검색은 웹사이트 트래픽의 50.1%에 해당합니다.
즉, 유료 트래픽 전략이 아무리 효과적이더라도 자연 검색은 결국 더 많은 방문자를 웹사이트로 끌어들이는 것입니다 . 따라서 SEO를 페이지를 최적화하여 잠재 고객을 유치할 수 있는 더 큰 기회로 이 채널을 강화할 수 있는 훌륭한 기회로 봐야 합니다.
[rock_performance lang=”ko”]
회사에 이미 웹 사이트, 블로그 또는 전자 상거래가 있는 경우 웹 분석 도구를 확인하십시오. 유기적 트래픽은 방문자를 확보하는 가장 큰 채널일 가능성이 큽니다. 이것이 SEO 친화적인 웹 디자인을 갖는 것이 중요한 이유입니다.
2. 웹사이트의 외관은 회사의 약속을 반영합니다.
페이지에 액세스할 때 레이아웃, 글꼴, 색상, 이미지 및 기타 시각적 요소를 선택하는 데 실수가 있음을 알게 되면 브랜드가 방문자에게 좋은 경험을 제공하기 위해 최선을 다하지 않는다고 가정하는 것이 일반적입니다.
따라서 회사의 가치 와 페르소나의 특성과 조화를 이루는 디자인으로 양질의 웹 사이트에 투자하는 것이 필수적입니다.
3. 잘못된 디자인은 사용자를 멀리합니다.
브랜드 평판을 손상시키는 것 외에도 시각적 및 사용자 경험이 나쁜 웹 사이트는 일반적으로 사용자 행동에 즉각적인 영향을 미칩니다. 사람들은 해당 페이지를 포기하는 경향이 있습니다.
이러한 좌절은 디자인이 좋지 않은 웹사이트에서만 발생하는 것이 아니라 디자인 요소 가 너무 많은 웹사이트에서도 발생한다는 사실을 기억해야 합니다.
과도한 기능과 바람직한 해상도보다 훨씬 높은 이미지는 탐색을 어렵게 만들고 뒤로 버튼을 클릭하고 싶은 욕구를 증가시킵니다.
4. 특정 기술은 검색 엔진에서 잘 작동하지 않습니다.
Flash가 최고조에 달했을 때 웹 표준에서는 거의 허용되지 않는 효과와 애니메이션으로 웹 사이트를 만들 수 있었습니다.
설계 및 개발 측면에서 가능성은 놀라웠습니다. 그러나 검색 엔진 로봇은 이 기술을 추적할 수 없으므로 이러한 방식으로 구축된 웹사이트의 색인을 생성하는 것은 (매우) 어렵습니다 .
Flash는 가장 주목할만한 예 중 하나이지만 디자인 측면만 중시하는 기술의 사용이 검색 결과 페이지에서 브랜드의 존재를 어떻게 망칠 수 있는지를 아주 잘 보여줍니다.
5. 웹사이트 구축 중에 SEO를 수행하면 재작업을 피할 수 있습니다.
SEO는 최적화로 구성되어 있기 때문에 웹 디자인이나 전체 웹 사이트 개발이 이미 완료되었을 때 회사에서 나중에 이 단계를 떠나는 것이 일반적입니다.
이것은 SEO가 처음부터 페이지 구축 프로세스의 일부인 경우 피할 수 있는 일련의 수정이 필요하다는 것이 밝혀졌습니다.
이 조합에서 빠질 수 없는 원칙은 무엇입니까?
이제 페르소나와 검색 엔진 모두를 위한 매력적인 웹사이트를 만들기 위한 기본 요소와 필수 요소를 알아보겠습니다.
1. 탐색 및 사이트 구조
슈퍼마켓에 가면 과일과 야채, 음료, 냉동, 위생이라는 표지판을 볼 수 있습니다. 예를 들어 위생 섹션에 가면 탈취제, 비누, 치약, 샴푸 등으로 구분된 제품을 볼 수 있습니다.
웹사이트도 비슷한 방식으로 구성되어 있다고 할 수 있습니다. 우리는 계층 구조에 따라 제품이나 콘텐츠를 범주와 하위 범주로 구분합니다. 메뉴에서 사용할 수 있으므로 사용자가 찾고 있는 항목에 따라 탐색할 수 있습니다.
다시 말해, 슈퍼마켓의 부서별 표지판을 사이트 탐색을 디자인하기 위한 지침으로 사용하십시오. 여기서 섹션과 하위 섹션으로의 상점 구분 및 각각의 이름 선택은 웹사이트의 구조와 동일합니다.
Amazon.com을 예로 들어 보겠습니다.

쇼핑(상점), 계정 및 일일 거래와 관련된 옵션이 있는 글로벌 탐색 메뉴가 있습니다. Stores 메뉴 내에서 Books로 이동하면 더 많은 하위 범주(All Books, Books on Sale, Best Sellers 및 기타)를 볼 수 있습니다.
All Books를 클릭하면 사용자가 장르, 저자 또는 출판사별로 제목에 액세스할 수 있는 지역 메뉴와 제안이 있는 특정 페이지로 이동합니다.

Amazon이 가능한 모든 옵션을 동일한 메뉴에 넣지 않도록 주의했습니다. 탐색은 분명히 더 넓은 범주에서 더 구체적인 범주로 이동합니다.
사용자가 사이트에서 제공하는 내용을 이해하고 원하는 곳으로 이동할 수 있도록 하는 것 외에도 수준 및 하위 수준별로 구성하면 검색 엔진이 페이지 간의 컨텍스트와 중요성 정도를 이해하는 데 도움이 됩니다.
따라서 화려한 메뉴 구성을 피하여 단순함 에 중점을 둡니다 . 대신 카테고리 및 하위 카테고리를 적절하게 구분하여 콘텐츠 또는 제품을 그룹화하십시오. 이 과정에서 어려움에 직면하면 정보 아키텍처가 큰 도움이 될 것입니다.
2. 콘텐츠 레이아웃
SEO 콘텐츠의 품질이 구글 알고리즘에서 가장 중요한 요소 중 하나라는 것은 이미 잘 알려져 있습니다. 따라서 귀하의 사이트가 제공하는 정보를 소중히 여기십시오.
웹에서는 사용자의 관심을 끌기 위해 경쟁합니다. 사용자는 귀하의 페이지 외에 다른 탭이 여러 개 열려 있을 수 있습니다. 이러한 맥락에서 귀하의 사이트를 방문할 때마다 승리로 간주될 수 있는 상황에서 우리는 콘텐츠에 집중해야 하며 추가적인 주의를 산만하게 만들지 않아야 합니다.
따라서 내용을 소홀히 하지 않도록 텍스트, 시각적 요소 및 공백의 균형을 맞춰 독자가 원하는 것을 찾을 수 있도록 항상 생각 하십시오 .
3. 반응성
사용자 장치의 화면 크기에 적응할 수 있는 반응형 디자인은 특히 전 세계적으로 모바일 인터넷 사용이 증가함에 따라 필수 불가결한 요소입니다. 이를 설명하기 위해 모바일은 이미 전 세계 많은 국가에서 인터넷 액세스의 주요 수단입니다.
이러한 관련성으로 인해 Google 검색은 이미 모바일 장치와 페이지의 호환성을 검색 엔진 순위 요소 중 하나로 고려합니다.
따라서 방문자의 자유를 소중히 여기고 데스크톱 또는 다른 장치에서 웹 사이트를 방문하는 것을 선호하는지 여부에 관계없이 항상 즐거운 경험을 제공하십시오.
4. 이미지 사용
웹사이트의 시각적 매력은 방문자와 브랜드 간의 연결을 생성하는 데 매우 중요합니다. 이러한 의미에서 이미지는 외관을 개선하고 페이지에 있는 텍스트 콘텐츠를 보완하는 중요한 동맹자입니다.
검색 엔진은 (아직) 사진에 있는 내용을 해석할 수 없습니다. 이러한 이유로 SEO 측면에서 추가하기로 결정한 이미지에 설명을 포함해야 합니다. 이렇게 하려면 대체 텍스트 속성을 사용하여 '대체 텍스트'를 삽입하기만 하면 됩니다.
불행히도 이것이 우리가 이미지에 대해 가져야 할 유일한 관심사는 아닙니다. 아래에서 볼 수 있듯이 SEO를 방해하는 많은 실수의 원인이 되는 경우가 많습니다.
어떤 웹 디자인 실수가 SEO에 가장 큰 영향을 미칩니까?
두 요소를 결합할 때의 이점을 배우고 이 결합의 기둥을 이해한 후 검색 순위에서 브랜드의 위치를 망칠 수 있는 10가지 웹 디자인 실수를 살펴보겠습니다.
1. 이미지 압축을 잊어버린 경우
품질 이미지는 의심할 여지 없이 좋은 디자인의 중요한 부분입니다. 그러나 해상도가 매우 높으면 사이트 로드 속도에 영향을 줄 수 있습니다 .
사용자는 페이지가 열릴 때까지 몇 초 이상 걸릴 때까지 기다리는 인내심이 거의 없을 것입니다. 모바일 장치에서 액세스하는 경우에는 더욱 그렇습니다. 따라서 Google의 경우 사이트의 로딩 속도가 순위 요소입니다.
따라서 웹 페이지 속도가 느려지지 않도록 이미지의 크기(크기 및 메가바이트 측면에서)에 주의하는 것이 중요합니다. 웹사이트에 이미지를 추가하기 전에 항상 이미지 압축 도구를 사용해 보십시오.
TinyPNG를 확인하십시오. 이 예에서는 이미지를 75%까지 압축할 수 있었습니다!

2. 나쁜 콘텐츠 게시
콘텐츠가 항상 디자인 및 개발과 관련되는 것은 아니지만 사용자의 참여를 방해할 수 있는 미학적 측면이 있음을 기억해야 합니다. 매우 큰 단락과 문장, 매우 작은 글꼴, 텍스트 색상 으로 인해 가독성이 떨어지는 요소는 검색자가 감지할 수 있습니다.

단어가 어떻게 같은지 아래 이미지에서 주목하십시오.

매우 큰 텍스트 블록, 대문자로 된 전체 단락, 적절한 대비가 없는 색상이 경험을 얼마나 악화시키는지 확인하십시오.
3. 과도한 JavaScript 호출 추가
웹은 더 동적인 요소로 웹사이트를 개선하거나 다른 서비스의 미디어를 포함 기능으로 통합하는 데 도움이 되는 스크립트로 가득합니다. 문제는 너무 많은 외부 리소스를 요청하면 로딩이 느려질 수 있다는 것입니다. 이는 사용자 경험과 SEO 모두에 해롭다는 것을 이미 알고 있습니다.
이를 염두에 두고 웹 개발을 수행할 때 타사 스크립트 호출을 드물게 사용하십시오. 반드시 필요한지 또는 다른 솔루션을 사용할 수 있는지 분석하십시오.
이 블로그의 경우를 참조하십시오. 전송된 2.4MB 중 654KB가 JavaScript에 해당하며, 이는 이 특정 페이지를 로드할 때 전송 데이터의 약 26%입니다.
4. 사이트의 상당 부분을 Flash로 구축
Flash가 웹 사이트에 놀라운 효과를 줄 수 있는 것은 사실이지만 사용자가 이를 보려면 장치에 Adobe Flash Player가 설치되어 있어야 한다는 점을 기억할 가치가 있습니다.
또한 검색 엔진은 이 기술로 구축된 콘텐츠를 잘 인덱싱하지 않습니다.
따라서 탐색 및 텍스트 콘텐츠에 Flash를 사용하지 않거나 단순히 웹 표준을 따르는 다른 대안을 선택하는 것이 이상적입니다.
5. 모바일 장치 사용자 무시
우리는 이미 태블릿과 스마트폰을 통한 연결의 상당한 증가에 대해 논의했으며, 이는 귀하의 사이트 방문자 대부분이 이러한 장치를 통해 올 가능성이 매우 높다는 것을 의미합니다.
귀하의 페이지가 이러한 장치에 대해 준비되지 않은 경우 방문자는 거의 확실하게 귀하의 사이트를 떠날 것입니다.
검색 엔진은 사이트가 모바일 친화적인지 여부를 고려하여 순위를 정의하므로 SEO 측면에서도 반응형 디자인에 투자할 가치가 있습니다.
모바일에 대해 이야기하면서 페이지에 소셜 미디어 공유 버튼을 추가하는 것을 잊지 마십시오!


6. 중요한 HTML 요소를 이미지로 교체
인상적인 이미지를 만들고 머리글 태그와 같은 중요한 HTML 요소 대신 사용하는 것은 보기에는 매우 좋을 수 있지만 SEO에서는 작동하지 않습니다.
H1, H2 및 H3 태그는 SEO 콘텐츠의 각 부분의 관련성을 강조하고 해당 페이지의 키워드를 더 강조할 수 있도록 합니다.
7. 이미지에 많은 텍스트 추가
우리는 이미 검색 엔진이 페이지의 HTML 코드의 일부인 텍스트 콘텐츠를 분석할 수 있는 것과 같은 방식으로 이미지를 해석할 수 없다고 설명했습니다.
이러한 이유로 페이지의 실제 텍스트 요소로 이미지를 재현하는 것보다 주로 텍스트로 구성된 이미지를 사용하는 것은 좋지 않습니다.
이러한 경우 alt text 속성이 유용할 수 있지만 보완 텍스트를 만들거나 별도의 이미지와 텍스트를 유지하는 것이 이상적입니다 . 대안은 CSS 기능을 사용하여 텍스트로 오버레이 레이어를 만드는 것입니다.
8. 지나치게 세련된 메뉴 만들기
우리는 탐색이 사용자와 검색자에게 어떤 관련이 있는지 이미 알고 있습니다. 따라서 웹에서 이러한 요소에 대해 이미 예상되는 패턴( 예: 세로 또는 가로의 정리되지 않은 목록) 을 따르는 간단한 메뉴를 만드는 것보다 더 좋은 것은 없습니다.
탐색은 조직화되어야 하며 페르소나에 대한 혼란을 일으키지 않아야 합니다. 이를 방지하려면 균형을 유지하십시오. 메뉴 프레젠테이션의 품질에 대해 작업하되 너무 혁신적이지는 마십시오.
Rock Content의 블로그는 상단 메뉴에 범주 목록이 있고 바닥글에 액세스 대안이 있는 훌륭한 예입니다.

9. 콘텐츠 접근을 어렵게 하는 기능 사용
사용자가 Google과 같은 검색 도구를 통해 귀하의 사이트에 도달하면 원하는 것을 찾을 수 있다는 생각이 들 것입니다. 그렇죠? 메인 콘텐츠 앞에 팝업, 공지, 광고 등의 요소를 배치하면 접근이 어렵게 됩니다.
아래 이미지의 뉴스 사이트를 예로 들어보겠습니다. 메인 페이지를 열 때 독자가 실제로 보고 싶어하는 정보 전용 공간이 매우 협소하다는 점에 유의하십시오.

검색 엔진은 이러한 유형을 감지할 만큼 충분히 똑똑하므로 웹사이트 순위에 영향을 미칩니다.
10. 테스트 및 결과 무시
웹 디자인이 검색 엔진 최적화에 부정적인 영향을 미치는지 확인하는 가장 좋은 방법은 테스트를 수행하고 결과를 평가하는 것입니다.
흥미로운 측정은 분석 플랫폼에 주석을 포함하는 것입니다. 사이트 디자인에 중대한 변화가 있을 때마다 날짜를 기록하고 유기적 트래픽에 중대한 변화가 있었는지 모니터링합니다 .
자연 검색을 통한 방문자 획득 감소는 서버 문제 또는 Google 검색 알고리즘의 변경과 같은 다른 이유가 있을 수 있음을 기억하는 것이 중요합니다.
SEO와 웹 디자인이 제대로 정렬되었는지 확인하는 데 도움이 되는 도구는 무엇입니까?
이제 SEO 관점에서 사이트를 개선하려는 모든 웹 디자이너가 알아야 할 도구를 살펴보겠습니다.
비명 개구리
Screaming Frog는 검색 엔진 로봇처럼 웹사이트 를 크롤링하는 데 사용됩니다. 컴퓨터에 설치되면 URL을 입력하고 시작을 클릭하여 크롤링 프로세스를 시작하십시오.
절차가 끝나면 다음과 같은 정보를 볼 수 있습니다.
- 페이지 응답 시간;
- 내부 및 외부에 로드된 리소스(HTML, JavaScript, CSS, 이미지, Flash, PDF 및 기타)의 수
- 제목 태그;
- 제목 태그;
- 메타 설명;
- 이미지 수.

PageSpeed 인사이트
PageSpeed Insights는 페이지 속도를 분석하고 이를 기반으로 0에서 100까지의 점수를 제공하는 Google 도구입니다.
그런 다음 데스크톱 및 모바일 모두에서 로드 시간을 개선하는 방법에 대한 몇 가지 제안이 포함된 보고서를 제공합니다.

모바일 친화성 테스트
Google 자체의 또 다른 유용한 기능은 모바일 친화성 테스트입니다. 웹사이트의 URL을 입력한 후 도구는 콘텐츠를 검사하고 이러한 장치에 최적화되어 있는지 여부를 결정 합니다 .
이와 관련하여 문제가 있는 경우 도구는 개선이 필요한 측면을 보여줍니다.
지금까지 본 모든 제안을 통해 이미 SEO와 웹 디자인이 잘 통합되도록 하는 훌륭한 기반을 갖추고 있습니다. 사용자가 항상 먼저 와야 함을 기억하십시오.
방문자에게 최고의 경험을 제공하는 기술 및 시각적 측면을 고려할 때 검색 엔진 결과에서 웹사이트의 위치는 향상될 뿐입니다.
페이지 속도가 판매에 어떤 영향을 미칠 수 있는지 알고 싶으십니까? 무료 인포그래픽을 다운로드하고 판매 실적을 개선할 수 있는 방법을 확인하십시오!
