웹 사이트 구조 모범 사례
게시 됨: 2020-12-17웹 사이트는 본질적으로 사람들이 사용할 수 있도록 게시 된 정보 리소스입니다. 책과 비슷하게 책의 양이 작거나 많을 수 있습니다. 그러나 책과 달리 웹 사이트의 콘텐츠는 표현과 디자인의 자유를 활용하여 다양한 방식으로 구성 될 수 있습니다.
동시에 웹 사이트는 최고의 업계 UX 관행과 사용자 습관 및 기대치를 따라야하므로 자유는 매우 제한적입니다. 웹 사이트 구조는 타겟 고객이 정보에 액세스하고 사용하는 방법의 핵심입니다. 따라서 많은 규칙에 따라 구축해야합니다.
웹 사이트 구조가 중요한 이유는 무엇입니까?
웹 사이트의 구조는 사이트가 구축되는 방식, 그 안의 모든 단일 하위 페이지가 서로 연결되는 방식 및 따르는 계층을 나타냅니다. 구조가 좋으면 정보를 직관적이고 사용하기 쉽게 찾을 수 있습니다.
디자이너는 사이트 구조를 만들 때 방문자가 웹 사이트를 사용하고 콘텐츠를 탐색하는 방법을 생각해야합니다. 초점은 어떻게 그리고 왜에 게시하는 것과 이동한다.
웹 사이트 구조는 비즈니스 소유자의 목표, 사이트 방문자의 경험, 혜택을받는 사이트, 콘텐츠를 크롤링하고 순위를 매기고 적절한 사용자에게 콘텐츠를 제공하는 검색 엔진의 세 가지 주요 관점에서 기본 개념입니다.
좋은 웹 사이트 구조의 작동 원리
웹 사이트의 정보가 잘 구성되어 있고 관련 디자인에 의해 지원되면 사이트 소유자, 사용자 및 검색 엔진 등 모두가 만족합니다.
좋은 구조가 작동하는 방법은 다음과 같습니다.
사업주의 목표를 지원하고 예상 결과를 높입니다.
웹 사이트에 투자 할 때는 성능에 대한 명확한 목표를 설정해야합니다. 이러한 목표는 사이트의 구조에 의해 통합되고 표현되어야합니다.
예를 들어 게시 된 블로그와 리소스에 집중하려면 홈페이지에 최고의 기사를 포함하고 메뉴에서 리소스 섹션을 눈에 띄게 만들어야합니다. 디지털 게시자와 블로거가 사용하는 일반적인 WordPress 옵션 인 최신 블로그 게시물에서 열리도록 홈페이지를 설정할 수도 있습니다.
WordPress 관리자 패널, 읽기 설정 – 정적 페이지 및 블로그 페이지로 홈페이지 선택
사용자 경험 향상
웹 사이트 구조는 웹 사이트의 사용자 경험에 밀접한 영향을 미칩니다. 정보가 논리적 방식으로 구성되고 모든 것이 직관적으로 액세스 할 수있는 경우 사용자는 콘텐츠를 원활하게 이동하여 원하는 것을 찾고 사용합니다.
로봇 크롤링을 최적화하여 SEO 향상
검색 엔진 (Google)은 사이트 콘텐츠를 크롤링하고 사용자를 위해 정렬하는 도구와 함께 작동합니다. 크롤러 친화적 인 웹 사이트는 구조가 좋기 때문에 엔진별로 순위가 높습니다.
XX 웹 사이트 구조 모범 사례
웹 사이트를 계획하고 구조를 구축하는 방법에 대한 명확한 비전 없이는 웹 디자인 및 개발을 수행 할 수 없습니다.
다음 모범 사례에는 웹 사이트 계획에 접근 할 때 위에서 설명한 관점과 이점이 포함됩니다.
웹 사이트 디자인 팁 : 웹 디자인에서 게임을 강화하는 방법
1. 비즈니스 목표 및 대상 고객 설정
귀하의 웹 사이트는 귀하의 비즈니스를위한 도구입니다. 게시 할 정보와 업데이트 빈도를 계획하는 것은 웹 사이트 구조의 기본입니다. 사이트에서 제공하고 판매 할 제품 또는 서비스를 결정해야합니다.
목표와 의사 소통 목표에 따라 두 가지 기본 접근 방식 중에서 선택할 수 있습니다.
- 사용자 중심 설계 – 모든 정보가 대상 사용자 그룹에 따라 분류되고 구조화됩니다. 이 접근 방식은 통신 또는 기관과 같은 대기업에 필수이며, 사용자가 자신의 요구에 맞는 자신의 범주와 정보를 찾아야하는 수백만 명의 사람들에게 서비스를 제공합니다.
ATT.com은 "개인"섹션에서 직접 열리지 만 중소기업 및 기업용 섹션도 있습니다. 이 이미지에서 – 선택된 엔터프라이즈 섹션
자세히보기 : 인포 그래픽 : 사용자 중심 WordPress 개념을 개발하는 방법
- 회사 또는 제품 중심 디자인 – 이러한 웹 사이트는 회사 소유자 자체 및 / 또는 해당 제품을 소개하도록 구축되었습니다. 또한 특정 사용자 그룹을 대상으로하는 섹션과 페이지를 포함 할 수 있지만 여전히 브랜드가 주요 초점입니다.
IMDB.com 웹 사이트 구조는 영화, TV 쇼 및 유명인과 같은 프로덕션에 중점을 둡니다.
2. 경쟁자 조사
웹 사이트를 디자인 할 때 경쟁 업체를 조사해야하는 몇 가지 이유가 있습니다. 그중 하나는 사이트가 어떻게 구성되어 있는지 조사하는 것입니다.
사이트 구조에 중점을두면 경쟁사의 홈 페이지 레이아웃, 서비스를 그룹화하고 표시하는 방법, 내부 페이지의 계층 구조, 탐색 구성 방법 및 사용자 행동 흐름을 조사 할 수 있습니다.
SEO 관점에서 경쟁 업체 조사는 사이트의 기본 페이지 이름과 URL, 카테고리, 섹션 및 탐색에 사용할 업계 관련 키워드 를 찾는 데 도움이됩니다.
경쟁사 연구를 사용하여 마케팅 전략을 다듬는 방법
3. 모든 콘텐츠 목록 만들기
콘텐츠를 구조화하려면 먼저 사이트에 게시 할 내용을 설명해야합니다. 모든 것이있을 때 범주별로 그룹화하고 적절한 레이블을 선택하기 만하면됩니다.
새 웹 사이트 인 경우 게시해야하는 항목의 목록을 만들 수 있습니다. 콘텐츠 제작 책임자와 콘텐츠 제작 및 업데이트 빈도에 대한 메모를 추가하는 것을 잊지 마십시오.
사이트를 재 설계 할 때 콘텐츠 감사도 수행해야 할 첫 번째 단계 중 하나입니다.
콘텐츠 우선 접근 방식으로 웹 사이트 재 설계를 수행하는 방법
4. 게시물 유형 결정
게시물 유형은 다양한 유형의 WordPress 사이트 콘텐츠를 나타내는 데 사용되는 용어입니다. 각 게시물 유형은 일반적으로 다른 페이지 디자인, 사용자 정의 필드 및 기능과 연결됩니다.
DevriX는 포트폴리오 게시물 유형을 사용하여 고객을위한 사례 연구를 게시합니다.
기본적으로 WordPress에는 페이지 및 게시물 이라는 두 가지 주요 게시물 유형이 있습니다. 이는 CMS가 오로지 블로깅 플랫폼이었을 때 블로그에 더 영구적 인 콘텐츠를위한 여러 "정적"페이지와 뉴스 및 업데이트를위한 블로그 게시물이 필요했던 경우에 발생합니다.
웹 사이트의 목적이 무엇이든이 두 가지 기본 게시물 유형을 사용해야합니다. 따라서 귀하가 원하고 사이트에 게시해야하는 모든 콘텐츠를 수집하고 설명했으면이를 두 가지 유형으로 나눕니다.
- 페이지의 경우 – 보다 영구적이고 보수적이거나 상시적인 부분으로, 수행하는 작업, 핵심 서비스는 무엇이며 비즈니스를 수행하는 이유와 같이 정보가 정기적으로 변경되지 않는 부분입니다. 대부분은 시간에 민감하지 않습니다.
- 게시물의 경우 – 뉴스, 블로그 게시물, 백서, 연구 등과 같은 동적 부분 또는 현재 정보를 포함하고 있으며 앞으로 지속적으로 생성 될 모든 콘텐츠입니다.
포트폴리오, 추천 글, 프로젝트 와 같은 더 많은 게시물 유형이 필요함을 발견 할 수 있습니다. 좋은 소식은 WordPress에서 사용자 지정 게시물 유형을 만드는 여러 플러그인이 있으며 일부 테마에는 다양한 것이 포함되어 있다는 것입니다. 또한 이후 버전에서 WordPress는 사용자 지정 게시물 유형 등록을 활성화했습니다.
필요한 게시물 유형 선택을 완료하면 해당 게시물을 포함하도록 사이트를 구성하는 것이 훨씬 쉽습니다.
WordPress 페이지 대 WordPress 게시물, 상식 및 SEO
5. 구매자 여정 및 사용 사례 만들기
웹 사이트에서의 구매자 여정은 사용자가 처음 방문 할 때부터 사이트에서 제품이나 서비스를 구매하는 순간까지 거치는 과정입니다. 웹 사이트 구조는이 구매 프로세스를 기반으로하여 사용자가 필요한 정보를 쉽게 찾고 다음 단계로 넘어갈 수 있도록해야합니다.
전환 경로 : 웹 사이트에서 사용자 여정 정의
사용 사례는 사용성의 기본 개념입니다. 방문자가 귀하의 웹 사이트를 사용하는 방법에 대한 설명입니다. 각 사용 사례를 설명하려면 사용자 의도에 따라 일련의 간단한 단계를 나열하고 목표에 도달하면 종료해야합니다.
사이트 구조를 결정할 때 모든 대상 그룹에 대한 사용 사례를 기록해야합니다. 그러면 사이트의 사용자 행동에 대한 명확한 비전을 제공하여 사이트의 구조가이를 지원할 수 있습니다. 이것은 사이트의 기능을 계획하는 가장 좋은 방법이기도합니다.
MVP 웹 사이트 : 알아야 할 모든 것 + 인포 그래픽
6. 기본 키워드 연구 수행
웹 사이트를 구축 한 후에는 원하는만큼 많은 콘텐츠를 추가 할 수 있습니다.
그러나 사이트를 계획하거나 재 설계하는 과정에서 순위를 매기려는 가장 중요하고 관련성있는 키워드를 사용하여 웹 사이트 구조를 구축하는 것이 가장 중요합니다.
서비스를 "제품"또는 "솔루션"이라고 부르시겠습니까? 온라인 상점에 "브랜드"섹션이 필요합니까?
당신이하는 일과 관련된 가장 인기있는 용어를 포함해야합니다. 앞으로 몇 년 동안 SEO 마케팅 전략의 핵심이 될 단어와 표현을 사용하십시오.
무료 및 유료의 많은 도구와 웹 사이트의 기본 키워드 조사를 수행하는 방법에 대한 자습서가 있습니다. 그것들을 현명하게 결합하고 가장 상식적인 선택부터 시작하십시오.
SEO에 대한 키워드 연구가 올바르게 완료되었습니다.
7. 분류법 활용
분류는 게시 된 콘텐츠를 분류하는 데 사용되는 시스템입니다. 게시하는 내용에 레이블과 설명 용어를 추가하는 전략입니다. 분류는 유사한 유형의 콘텐츠를 그룹화하고 이러한 그룹 간의 관계와 유사성을 정의하는 데 사용됩니다.
WordPress에서는 분류가 게시물 유형에 추가됩니다. 계층적일 수있는 카테고리 및 독립형 라벨 인 태그 가 있습니다. 게시물 유형에 대한 분류 시스템을 만들어 사용자가 원하는 콘텐츠를 쉽게 찾을 수 있도록합니다.
DevriX 사이트에 카테고리 게시
검색 엔진은 또한 관련 방식으로 콘텐츠를 정렬하고 순위를 매기는 데 도움이되는 분류법을 사용합니다. 순위를 매길 키워드와이를 사용할 게시물 유형을 확정 한 후에는 선택한 키워드를 카테고리 및 태그로 분류하기 만하면됩니다.
WordPress를 사용하면 분류가 필수가 아닙니다. 그러나 사이트 메뉴에 추가 할 수 있으므로 사이트 구조와 밀접한 관련이 있습니다. 예를 들어 DevriX 블로그에는 비즈니스, 마케팅 및 개발의 세 가지 주요 범주를 기반으로 한 기사에 대한 하위 메뉴가 있습니다.
8. 단순하고 논리적 인 탐색 만들기
웹 사이트의 구조는 주로 메뉴에 의해 디자인에서 시각화됩니다. 비즈니스의 우선 순위는 메뉴 구조에서 구현되어야하며 최상의 콘텐츠를 제공해야합니다.
메뉴에 포함 된 페이지와 범주는 하위 계층을 포함하거나 계층없이 동일하게 생성 될 수 있습니다. 각 레벨의 링크 수를 메뉴 폭이라고하고 레벨 수를 메뉴 깊이라고합니다.
메뉴의 폭과 깊이에 관해서는 따라야 할 몇 가지 간단한 규칙이 있습니다.
- 수평 범주를 많이 사용하지 마십시오 . 최대 7-8 개로 이동하십시오.
- 너무 깊게 만들지 마십시오. 종속이 3 단계 이상 내려 가면 안됩니다.
- 대칭과 균형을 유지하십시오. 한 섹션에 너무 많은 서브 페이지가 있고 다른 섹션에 두 페이지 만 있으면 전체 구조가 잘못 될 수 있습니다.
일반적인 비즈니스 웹 사이트는 표준 위치에있는 간단하고 예측 가능한 탐색을 사용해야합니다. WordPress 웹 사이트에서 일부 테마는 두 개 이상의 메뉴 위치를 허용하며 각각에 대해 서로 다른 페이지와 링크를 선택할 수 있습니다. 사이트 바닥 글에 메뉴를 추가하고 사이드 바 탐색을 별도로 유지하는 것이 좋습니다.
WordPress 편집 메뉴 옵션에는 페이지, 게시물, 기타 게시물 유형, 사용자 정의 링크, 카테고리가 포함될 수 있습니다.
9. 웹 사이트의 URL 구조 및 영구 링크 결정
WordPress의 URL 구조는 설정에 미리 정의되어 있습니다.
키워드 조사를 올바르게 수행하고 분류법을 만들고 메뉴 계층 구조를 결정하면 영구 링크를 쉽게 완성 할 수 있습니다. 가장 중요한 키워드와 분류법은 URL로 이동하여 SEO를 강화해야합니다.
다음은 WordPress 웹 사이트의 URL 구조에 대한 몇 가지 모범 사례입니다.
- 다음과 같이 게시물 이름과 도메인을 결합하는 영구 링크 구조를 사용하십시오. https://yourwebsite.com/ post-name
- 기본적으로 WordPress는 제목의 모든 단어를 포함하여 페이지 및 게시물에 대한 영구 링크를 생성합니다. 그러나 너무 길고 중요하지 않은 단어가 포함되어있을 수 있으므로 편집하십시오.
- Google에서 페이지 순위를 가장 높이려면 영구 링크를 약 60 자 길이로 유지하세요.
- 가능하면 제목에서 가장 중요한 키워드를 유지하여 더 짧은 URL을 만드십시오. 그러면 검색 엔진이 페이지 색인을 생성하는 데 도움이됩니다.
- 접속사 및 대명사와 같은 불용어를 모두 제거하십시오.
- 사용자와 검색 엔진 모두가 페이지 내용을 볼 수 있도록 하이픈을 사용하여 영구 링크의 단어를 구분합니다.
워드 프레스 옵션의 퍼머 링크 / URL 구조 – 포스트 이름 유형은 일반적으로 키워드를 포함하므로 가장 선호되는 유형입니다.
10. 웹 사이트에 대한 Sitemap 추가
사이트의 사이트 맵은 웹 사이트의 모든 페이지와 게시 된 미디어를 포함하고 서로 어떻게 관련되어 있는지 보여주는 파일입니다. 콘텐츠를 통해 Google 및 기타 검색 엔진을 로드맵으로 제공하고 콘텐츠를 더 빠르고 지능적으로 크롤링하고 분류하는 데 도움이됩니다.
사이트 맵은 필수는 아니지만 특히 복잡한 사이트의 경우 적극 권장됩니다. 또한 파일을 자동으로 생성하고 업데이트해야합니다.
플러그인을 포함하여 WordPress 사이트에 사이트 맵을 만들고 추가하는 데 도움이되는 많은 도구가 있습니다. 그러나 최신 릴리스 WordPress 5.5에서는. XML 사이트 맵은 기본적으로 활성화되어 있으며 사용자도 볼 수 있습니다.
사이트의 구조와 검색 엔진과 사람들이 탐색하는 동안 보는 내용에 대해 의문이있는 경우 사이트 맵을 확인하십시오.
ATT.com 사이트 맵 – 디자인과 일치하는 내부 페이지로 생성
웹 사이트 계층 구조 계획
위의 모든 작업을 완료하면 사이트 구조를 쉽고 빠르게 완성 할 수 있습니다. 최종 선택을 할 때 고려해야 할 몇 가지 일반적인 유형의 사이트 구조는 다음과 같습니다.
계층 적 웹 사이트 는 일부 페이지가 다른 페이지에 종속되고 구조가 트리와 유사 함을 의미합니다. 일반적인 웹 사이트에서 홈 페이지는 맨 위에 있습니다. 여기에서 하위 페이지를 추가로 가질 수있는 메인 메뉴의 다른 페이지로 이동합니다.
비 계층 적 웹 사이트 구조는 하위 페이지가 없음을 의미합니다. 콘텐츠가 많지 않고 페이지가 여러 개인 경우 모두 동일하게 만들어 메인 메뉴에 가로로 표시 될 수 있습니다.
계층 구조가없는 웹 사이트의 예 – Nika Agency –이 사이트에는 포트폴리오 섹션이 있지만 프로젝트 페이지는 하위 페이지가 아닙니다 (예 : https://nika.agency/ apothe-pure-details .html).
단일 페이지 웹 사이트 는 비 계층 구조의 또 다른 좋은 예입니다. 모든 것이 한 페이지에 게시되기 때문에 상위 / 하위 페이지가 없습니다. 단일 페이지 디자인은 수명이 짧은 이벤트 및 홍보 웹 사이트, 티저 페이지 또는 명함과 유사한 매우 간단한 표현이 필요한 비즈니스에 적합한 솔루션입니다.
GlobeKit은 개발자가 애니메이션 및 대화 형 지구본을 웹으로 빠르게 가져올 수있는 단일 서비스 웹 사이트입니다. 6 개의 섹션으로 구성되어 있으며 모든 섹션은 대화 형 애니메이션 탐색 (스크롤)이있는 홈페이지에 있습니다.
Sequential, Matrix 및 Database와 같이 덜 인기있는 유형의 웹 사이트 구조가 있습니다. 그들의 이름에서 짐작할 수 있듯이
- Sequential 모델 은 일련의 단계에서 사용자를 참여시킵니다.
- Matrix를 통해 사용자는 사이트 콘텐츠를 탐색하는 방법을 자신 만의 방식으로 선택할 수 있습니다.
- 데이터베이스 는 데이터베이스 를 기반으로 구축되며 그 속성을 사용하여 사용자 경험을 검색하고 생성합니다.
마지막 생각들
비즈니스 웹 사이트의 일반적인 구조는 깨끗하고 단순하며 논리적이어야합니다. 구조 디자인은 웹 사이트 디자인 및 개발의 기본 프로세스입니다. 위에서 언급 한 모범 사례를 따르면 비즈니스 목표 및 대상 그룹과 관련된 사이트 구조를 만들기 위해 모든 중요한 요소를 고려할 수 있습니다.
로시 비체 바
게스트 저자