완벽한 URL 디자인

이 기사는 215 호 of .net magazine-웹 디자이너와 개발자를위한 세계에서 가장 많이 팔리는 잡지입니다.

URL 디자인은 최근 1 년 동안 다시 논의의 주제가되었습니다. Twitter의 2010 년 가을 재 설계로 시작되었습니다. 이는 일반적으로 공개 웹 사이트에 적합하지 않은 웹 디자인 기술인‘해시 뱅’URL을 검증 한 것으로 보입니다.

도메인 바로 뒤에서‘#!’또는‘£!’로 시작하는 URL입니다. 예 : twitter.com/kurafire 된다 twitter.com/#!/kurafire . 그런 다음 페이지의 콘텐츠를 고유하게 식별하는 URL 부분이 끝에 추가됩니다. 이 기술은 성능 향상을 목표로합니다. 기본적으로 페이지의 작은 부분 만 다시로드해야 할 때 전체 페이지를 다시로드하지 않는 것을 목표로합니다. 하지만 심각한 단점이없는 것은 아닙니다.



이 튜토리얼은 URL 디자인의 세부 사항을 검토하고 해시 뱅이 권장되지 않는 이유를 설명합니다. 하지만 먼저 기본 사항을 살펴 보겠습니다.

URL이란 무엇입니까?

URL이라는 용어는 Uniform Resource Locator를 나타내며 웹 페이지와 같은 특정 리소스의 위치를 ​​지정합니다. 위치는 장소의 식별이므로 모든 URL은 URI 또는 ​​Uniform Resource Identifier이기도합니다.

그러나 URL은 URI의 위치뿐만 아니라 이에 액세스하는 방법 (체계 또는 프로토콜)도 지정합니다. URL의 구문은 다음과 같습니다.

scheme : // domain / path? query_string # fragment_identifier

여기서는 HTTP 프로토콜을 사용하는 웹 주소에 중점을두고 MAILTO, FTP 또는 FILE과 같은 사항은 물론 포트, 내장 된 사용자 이름 및 비밀번호를 무시합니다. HTTPS 주소는 일반 HTTP URL과 동일하며 보안 연결을 사용해야한다는 추가 요구 사항이 있습니다.

URL의 구문은 구성 부분으로 나뉩니다. URL은 웹 페이지를 포함 할 수있는 특정 리소스의 위치를 ​​지정합니다. 이 튜토리얼에서 우리는

URL의 구문은 구성 부분으로 나뉩니다. URL은 웹 페이지를 포함 할 수있는 특정 리소스의 위치를 ​​지정합니다. 이 자습서에서는 HTTP 프로토콜을 사용하는 웹 주소에 중점을 둡니다.

도메인

도메인 부분은 분명하지만 www를 언급 할 가치가 있습니다. 도메인의 일부가 아닙니다. 웹 사이트에서 일반적으로 사용되지만 기술적으로는 불필요한 하위 도메인 일뿐입니다. 많은 비전문가가 필요하다고 생각하므로 마케팅에서 www.yourdomain.com을 사용해야하는지 아니면 yourdomain.com을 기본 웹 주소로 사용해야하는지 여부는 잠재 고객에 따라 다릅니다. 그럼에도 불구하고 두 주소 모두 방문자를 하나의 동일한 웹 사이트로 유도해야합니다.

통로

경로는 URL 디자인에서 가장 중요한 부분 중 하나이며 백엔드 서버 설정에 관계없이 슬래시를 사용하여 폴더 구조처럼 만들어야합니다. 웹 사이트 또는 웹 애플리케이션의 각 고유 페이지에는 고유 한 경로가 있어야합니다.

이것은 가능한 한 설명적이고 의미가 있어야하며 사람이 읽을 수 있어야합니다. 결국 URL은 검색 엔진이 아니라 사람을위한 것입니다. 후자는 임의의 긴 문자열을 기억하는 데 문제가 없지만 사용자는 다른 사람과 URL을 공유합니다.

경로를 가능한 한 짧게 유지하십시오. / about-this-company는 불필요하게 길다. / about 할 것입니다. yourname.com/wrote/some-blog-post 또는 yourname.com/works-for/a-cool-company와 같은 읽기 쉬운 문구는 멋진 느낌을 더할 수 있지만 간결성을 유지하는 것이 좋습니다.

쿼리 문자열

대부분의 웹 사이트에서는 방문자가 검색 할 수 있습니다. 이것은 페이지 내용 필터링 및 정렬과 같은 관련 작업뿐만 아니라 쿼리 문자열이 가장 적합한 것입니다.

과거에는 많은 서버 측 시스템에서 somesite.com/index.php?p=about과 같이 사이트의 다른 페이지를 제공하기 위해 쿼리 문자열 매개 변수를 오용했습니다. 다른 사이트는 올바른 방향으로 너무 멀리 이동하여 검색 쿼리 문자열을 경로로 다시 작성했습니다. / q / My % 20search % 20 query / sortby / date / order / desc /.

이 두 가지 접근 방식은 모두 피하는 것이 좋습니다. 가장 중요한 것은 쿼리 문자열을 페이지에 대한 선택적 추가로 처리해야한다는 것입니다. URL은 삭제 된 경우에도 유효하고 유용한 페이지를 생성하도록 작동해야합니다. 페이지 매김은 콘텐츠 스트림이 변경되는 페이지에 유효한 쿼리 문자열 사용입니다.

조각 식별자

재미있는 사실 : 조각 식별자는 페이지를 호스팅하는 서버로 전송되지 않는 URL의 유일한 부분입니다. 대신 FAQ의 특정 섹션이나 기사 끝의 각주와 같이 결과 페이지 내의 특정 위치를 식별하기위한 것입니다.

브라우저는 페이지를 새로 고침하지 않고도 여러 조각 식별자 사이를 탐색 할 수 있습니다. 사람들이 탐색 사이에 페이지를 새로 고침하지 않고도 전체 사이트가 작동하도록 악용하기로 선택한 메커니즘입니다 (새로운 twitter.com 예).

이것이 바람직한 사용자 환경이기 때문에 브라우저 공급 업체는 페이지 새로 고침을 트리거하거나 조각 식별자를 남용하지 않고 사이트를 탐색 할 수있는 적절한 (새로운 것이 긴하지만) 기술인 HTML5 History API를 만들었습니다.

HTML5 History API 사용 방법에 대한 자세한 지침은‘ 역사 조작 ’Mark Pilgrim의 온라인 책 Dive Into HTML5 장.

웹 주소의 명확하고 간결한 구조를 위해

웹 주소의 명확하고 간결한 구조를 위해 Doepud Web Design의 사이트에 훌륭한 기사가 있습니다.

계약 위반

URL 구성 요소의 모든 조합은 조용한 계약을 나타냅니다.이 특정 URL은 고유 한 리소스 또는 데이터 개체를 반환하며 선택적으로 해당 리소스 내의 특정 하위 섹션을 참조합니다.

조각 식별자는 서버로 전송되지 않기 때문에 해시 뱅 URL이 기술적으로 유효하지 않다고 주장 할 수 있습니다.

인용 URL의 Wikipedia 페이지 : '컴퓨팅에서 URL (Uniform Resource Locator)은 식별 된 리소스를 사용할 수있는 위치와이를 검색하는 메커니즘을 지정하는 URI (Uniform Resource Identifier)입니다.' 해시 뱅 기반 URL은 서버가 이미 브라우저에 HTML 페이지를 보낸 후 서버로 자바 스크립트를 왕복해야하기 때문에 콘텐츠 검색 메커니즘을 불충분하게 지정합니다.이 페이지는 콘텐츠와 관련된 콘텐츠가없는 페이지입니다. 요청 된 URL (아직).

다시 말해서 해시 뱅은 리소스 검색 메커니즘을 변경합니다. 더 이상 단순히 URL의 스키마에 의해서만 정의되는 것이 아니라 '서버에서 결정하고 전달하며 브라우저 급 JavaScript 프로세서에 의해 해석되는 완전한 기능의 JavaScript'에 의해 정의됩니다.

이것은 모두 현명한 것처럼 보일 수 있지만 리소스에 액세스하는 방법의 현실을 고려하면 중요성이 분명해집니다. URL을로드하는 브라우저는 웹 페이지를로드하는 가장 일반적인 방법이지만 유일한 방법은 아닙니다. 웹에서 콘텐츠를 가져 오려는 간단한 wget 또는 curl 기반 시도는 더 이상 작동하지 않으며 웹 콘텐츠를로드하는 모든 소프트웨어는 이제 이러한 URL을 지원하기 위해 완전한 JavaScript 파서를 포함해야합니다. 이는 자바 스크립트가 일부 프록시 서버 나 방화벽에 의해 필터링되지 않고 페이지의 어느 곳에도 오류가 포함되어 있지 않다고 가정 한 것입니다. 사용자가 브라우저에서 JavaScript를 끄면 이러한 사이트의 작동이 중지됩니다.

조용한 계약을 위반하고 전체 사이트가 취약한 기술에 의존하도록하는 것이 나쁘지 않은 경우 해시 뱅은 영구적 인 유지 관리 및 지원을위한 일방 통행입니다. 다시 디자인하더라도 URL에 서버 측 다시 쓰기를 사용할 수 없습니다. 따라서 들어오는 링크와 사람들의 북마크를 끊고 싶지 않다면 URL을 게시 한 후에는 항상 도메인의 기본 방문 페이지에서 일부 처리를 수행하여 이러한 URL을 지원해야합니다.

그곳에

AppStorm의 해시 뱅 문제에 대한 훌륭한 요약이 있습니다.

나쁜 습관

URL을 디자인하는 방법에는 여러 가지가 있습니다. 위의 기본 사항은 모두 훌륭한 기술이지만, 좋은 URL 디자인을 좋게 만드는 요소를 완전히 이해하고 이해하려면 잘못된 URL 디자인의 원인을 알아야합니다. 다음은 피해야 할 몇 가지 관행입니다. 최악의 범죄자부터 시작하여 단지 잘못된 방법으로 진행하는 것입니다.

페이지 식별 해시

일부 (대부분 오래된) 콘텐츠 관리 시스템 또는 블로그 엔진은 임의의 긴 문자열로 각 고유 페이지를 식별합니다. 다음과 같이 : 5F0C866C-6DDF-4A9A-9515-531B0CA0C29C.html. 콘텐츠 관리 시스템 또는 사이트 엔진에서 이러한 URL을 생성하는 경우 해당 동작을 즉시 덮어 쓰거나 끄는 방법을 찾으십시오. 가능하지 않다면 더 현대적인 CMS를 얻는 것이 좋습니다. 이러한 URL에는 사용자와 자신을위한 단점이 있으며,이 끔찍한 기술을 피하는 사이트를 강화하는 데 사용할 수있는 수많은 훌륭하고 현대적인 시스템이 있습니다.

세션 해시

페이지에 사용될 때만 큼 나쁘지는 않지만 사이트의 세션에 사용되는 해시는 여전히 나쁩니다.

처음에는 SEO에 부정적인 영향을 미칠 수 있습니다. 그러나 더 큰 우려는이를 사용하는 대부분의 시스템이 비교적 안전하지 않은 SHA-1을 사용한다는 것입니다. 이는 확실히 민감한 데이터가 포함 된 사용자 세션이나 로그인에 적합합니다.

파일 확장자

URL에는 .php, .aspx 등이 없어야합니다. 파일 확장자는 순방향 호환이되지 않으므로 백엔드 시스템을 변경하고 모든 URL에 .aspx가 포함 된 경우 사이트의 모든 단일 페이지에 대해 서버 측 다시 쓰기를 수행해야합니다. 비용이 많이 들고 비효율적이며 완전히 불필요합니다. .html 확장자도 실제로 권장되지는 않지만 구축중인 페이지 만 정적 파일로 제공 할 것이라고 확신하는 경우 허용되는 기술입니다.

비 ASCII 문자

문자 언어를 기본 콘텐츠 언어로 사용하는 사이트는 다소 용인되지만 라틴어 및 비 기본적인 구두점은 피하는 것이 가장 좋습니다.

아크릴로 하늘을 그리는 법

밑줄

사용성 및 SEO 가치가 떨어지며 하이픈에 대한 실질적인 이점이 없습니다.

키워드 채우기

URL에 여러 키워드를 추가하면 SEO에 도움이 될 수 있지만 사용자에게 혼란을 줄 수 있습니다. 또한 키워드 스패머로 표시 될 위험이 빠르게 발생합니다.

에

'Old Twitter'에서는이 단일 트윗 전체가 두 번 표시됩니다. 한 번은 설명으로 콘텐츠에, 한 번은 페이지에 표시됩니다. 하나...

... 새 트위터에는 트윗이 전혀 포함되어 있지 않으며 크기는 44KB입니다. 해당 페이지는 트윗을로드하기 위해 JS 파싱 환경에서 실행되어야합니다.

... 새 트위터에는 트윗이 전혀 포함되어 있지 않으며 크기는 44KB입니다. 해당 페이지는 트윗을로드하기 위해 JS 파싱 환경에서 실행되어야합니다. 그렇지 않으면 검색 할 수 없습니다.

좋은 습관

어떤 기술을 피해야하는지 아는 것이 중요하지만 어떤 기술을 사용해야하는지 아는 것이 훨씬 더 가치가 있습니다. 이제 모든 기본 사항을 다루었으므로 훌륭한 URL을 만드는 몇 가지 고급 전술을 살펴 보겠습니다.

Tim Berners-Lee가 1998 년에 말했듯이“멋진 URI는 변하지 않습니다.”라고 말했지만 재 설계시 영구적으로 유지하는 것 외에 다른 좋은 주소는 무엇입니까? 몇 가지 주요 고려 사항은 견고성, 해킹 가능성 및 네임 스페이스입니다.

강력한 URL 매핑

사람들은 URL을 공유하며 때로는 수신자의 환경이 URL을 두 줄로 줄 바꿈 할 수있는 매체에서 공유합니다. 이는 URL에 전체 날짜와 긴 제목이 포함 된 블로그 게시물에서 가장 일반적입니다.

한 가지 해결책은 모든 URL을 70 자 미만으로 유지하는 것이지만 이것이 항상 이상적인 것은 아닙니다. 또한 관계형 데이터베이스 시스템의 특성으로 인해 ID 값은 빠르게 조회 할 수 있지만 문자열은 검색 할 수 없습니다.

많은 양의 트래픽이 있으면 서버를 다운시킬 수있는 심각한 병목 현상이 될 수 있습니다. 더 많은 하드웨어를 추가하는 것은 비용이 많이 드는 솔루션이 될 수 있습니다.

강력한 URL 매핑은 이러한 문제를 모두 해결할 수 있습니다. 경로 초기에 고유 ID를 삽입하면 필요할 때 길고 완전한 설명이 포함 된 URL을 가질 수 있지만 여전히 짧은 URL의 안정성과 ID 조회 속도를 누릴 수 있습니다.

다음 URL을 사용하십시오. yourdomain.com/news/1982-this-is-a-longer-news-posts-title- which-would-almost-certainly-get-broken-onto-a-new-line-in-some- 클라이언트. 이 예에서‘1982’는이 특정 게시물에 대한 데이터베이스 레코드의 ID 값입니다. 그러면 CMS는 URL에서 yourdomain.com/news/1982라는 성공적인 조회를 위해이 부분 만 사용할 수 있습니다.

그 이후의 모든 것은 선택 사항이며 사람과 SEO에게 좋지만 두 줄로 묶여도 문제가되지 않습니다.

이 기술의 유일한 단점은 ID 자체가 사람에게 친숙하지 않으므로 고려해야 할 절충안입니다.

해킹 가능한 URL

해킹 가능한 좋은 URL에서 사람은 경로의 일부를 조정하거나 제거하고 사이트에서 예상되는 결과를 얻을 수 있습니다. 방문자가 페이지 주위에 더 나은 방향을 제공하고 쉽게 레벨을 올릴 수 있습니다. 예 : yourdomain.com/blog/2011/05/20/some-article. 각 슬래시로 줄이면 예상 할 수있는 결과가 생성됩니다. 예를 들어 domain.com/blog/2011/05/20/는 2011 년 5 월 20 일에 게시 된 모든 게시물을 반환해야합니다. yourdomain.com/blog/2011/05/는 2011 년 5 월 게시물의 개요를 제공하고 yourdomain.com/blog는 / 2011 /을 사용하여 2011 년 게시물의 개요를 가져 오거나 너무 세분화되어있는 경우 매월 게시물 합계 만 표시 할 수 있습니다. yourdomain.com/blog/는 실제 게시 날짜에 관계없이 최신 업데이트를 반환해야합니다.

이러한 URL을 얼마나 자세하게 디자인해야하는지는 사이트의 콘텐츠와 대상에 따라 다릅니다. 주제별 콘텐츠가 많을수록 URL의 게시 날짜로부터 더 많은 이점을 얻을 수 있습니다. 새 콘텐츠가 더 자주 게시 될수록 더 세분화 된 이점이 있습니다.

카테고리, 제품 및 서비스와 같은 다른 영역에는 날짜 구성 요소가 필요하지 않지만 URL이 아무리 상세하거나 아니더라도 궁극적으로 완전히 해킹 가능해야합니다.

해킹 가능한 URL은 기술에 정통한 방문자 만 사용한다고 말하고 잠재 고객이 그 틈새 시장에 있지 않으면이를 무시하는 것은 잘못입니다. 우선, 사용자는 시간이 지남에 따라 기술에 대해 더 잘 알고 있습니다. 하지만 더 중요한 것은 현재와 미래의 모든 방문자를 알 수 없다는 것입니다.

네임 스페이스

경로의 최상위 섹션은 URL에서 가장 가치있는 부동산입니다. 사이트에서 사용자가이 수준에서 가입하고 자신의 프로필을 가질 수 있도록 허용하는 경우 현재 및 향후 사용할 수있는 모든 기능을 포함하는 사용자 이름 블랙리스트를 만들어야합니다. 멋진 예제 목록을 찾을 수 있습니다. Quora 이것을 위해.

사용자 이름 뒤에있는 네임 스페이스 기능 : 목록 또는 / 팔로어는 각 사용자에게 개별적으로 속하는 공개 기능을위한 훌륭한 솔루션입니다.

계정 설정과 같은 비공개 항목은 사용자 이름 뒤에 네임 스페이스가 지정되어서는 안되며 / account 또는 / settings 뒤에 나타나야합니다. 또한 여기에서 기술을 혼합하고 일치시키지 마십시오. 일부 기능을 / feature / 아래에 추가하고 다른 기능을 / feature 아래에 배치하면 사용자를 혼란스럽게 할뿐입니다.

사이트를 블로그로 시작하지만 나중에 더 많이 구축 할 것으로 예상되는 경우, 나중에 잠재적 충돌을 피하기 위해 / blog / 아래의 모든 게시물을 최상위 네임 스페이스로 추가하는 것이 좋습니다.

Quora는 귀하의 사용자 이름 가입을

Quora는 귀중한 URL 키워드를 '도용'하는 사용자 이름 가입을 방지하는 데 유용한 조언을 제공합니다.

비즈니스 사례

URL은 웹 사이트 또는 애플리케이션에서 매우 중요한 부분이므로 팀과 함께 계획하고 작업하는 첫 번째 항목 중 하나 여야합니다. 시간이 지남에 따라 변경할 필요가 없기 때문이 아니라 훌륭한 구조를 미리 만들어 사용자의 요구 사항과 요구 사항은 물론 비즈니스 요구 사항을 이해하고 구체화하는 데 크게 도움이되기 때문입니다.

훌륭한 URL을 디자인하는 것은 공동 작업이어야합니다. 팀에 전담 정보 설계자가 있다면 참여해야합니다. 데이터베이스 설계자, 프런트 엔드 관리자 및 수석 디자이너도 마찬가지입니다. 훌륭한 URL을 만드는 것은 마케팅이나 사용자 경험 담당자를위한 일이 아닙니다. 제품을 만드는 데 관련된 모든 사람에게 관련성이 있고 중요합니다.

URL 구조가 있으면 전체 사이트 맵을 빠르고 쉽게 그릴 수 있습니다. 이를 통해 정보 설계자는 훌륭한 계층 구조 및 탐색을 설계하고 백엔드 엔지니어는 효율적으로 작업하며 프런트 엔드 개발자는 섹션과 페이지의 범위를 깔끔한 마크 업 및 코드로 전환 할 수 있습니다. 개념 설계 단계부터는 사전에 공동으로 설계된 훌륭한 URL 구조가 모든면에서 웹 제품을 개선하는 데 도움이됩니다.