What are hyperlinks?

이 글에서, 우리는 하이퍼링크가 무엇이고 왜 중요한지를 살필 것이다.

선행 지식: 인터넷이 작동하는 법을 알아야 하고 웹 페이지, 웹사이트, 웹 서버 그리고 검색엔진의 차이에 익숙해야 한다.
목적: 하이퍼링크가 무엇이고 왜 중요한지를 배울 것이다.

요약

보통 링크라고 불리는 하이퍼링크는 웹에서 기본적인 개념이다. 링크가 무엇인 지 설명하기 위해, 웹의 매우 기본적인 구조로 돌아볼 필요가 있다.

1989년으로 돌아가, 웹의 발명가인 Tim Berners-Lee는 웹을 대표하는 3가지 축에 대해 말하였다.

  1. URL, 웹 문서를 추적하는 주소 시스템
  2. HTTP, URL들이 주어졌을 때, 문서들을 찾는 전송 프로토콜
  3. HTML, 내장된 hyperlinks 를 허용하는 문서 형식

3가지 축에서 본 것처럼, 웹에 대한 모든 것들은 문서들과 어떻게 문서에 접근할 것인 지에 관련되어 있다. 웹의 기본 목적은 텍스트 문서를 통해서 도달하고, 읽고, 찾기쉬운 방식을 제공하는 것이다. 그리고 나서, 웹은 이미지와 동영상, 이진 데이터에 접근하는 것을 제공하도록 진화했다. 그러나, 이런 발전은 3가지 축은 거의 바꾸지 못 하였다.

웹 이전에는, 문서에 접근하고 문서끼리 이동하는 것은 꽤 어려웠다. 인간이 읽을 수 있는 URL은 이런 것들을 훨씬 쉽게 만들었다. 하지만, 문서에 접근할 때마다 긴 URL을 타이핑하는 것은 어려웠다. 이것이 하이퍼링크가 개혁한 모든 것이다. 링크는 URL을 가진 텍스트와 연결될 수 있다. 그렇게 된 링크를 활성화함으로써, 타겟 문서에 즉시 도달할 수 있다.

기본적으로 파란색으로 밑줄이 된 링크는 주위 텍스트에서 보여진다. 활성화하기 위해 링크를 클릭하거나 Tab키로 링크를 선택하고 Enter키나 Space바를 누르면 된다.

Example of a basic display and effect of a link in a web page

링크는 웹을 유용하고 성공적으로 만든 돌파구이다. 이 글의 나머지엔, 다양한 유형의 링크와 현대 웹 디자인의 중요성을 얘기할 것이다.

깊게 들어가기

다시 말하면, 링크는 URL이 연결된 텍스트이다. 그리고, 링크를 사용하면, 하나의 문서에서 다른 문서로 쉽게 이동할 수 있다. 이런 내용들을 말하다보면, 몇몇의 생각해볼 뉘앙스차이가 있다.

링크의 유형들

Internal link(내부 링크)

당신의 웹사이트에 속하는 두 개의 웹사이트 사이의 링크는 내부 링크라고 불린다. 내부 링크가 없다면, 웹 사이트와 같은 것은 없을 것이다. (물론, 한 페이지의 웹 사이트 빼고).

External link(외부 링크)

당신의 웹사이트에서 다른 사람의 웹사이트로 가는 링크이다. 외부 링크가 없다면, 웹이 존재하지 않는다. 왜냐하면 웹은 웹페이지들의 네트워크이기 때문이다. 당신이 유지하는 내용 외의 정보를 제공하기위해 외부 링크를 사용해라.

Incoming links(들어오는 링크)

다른 사람의 웹 사이트에서 당신의 사이트로 가는 링크이다. 단지 외부링크의 반대이다. 누군가 당신의 사이트로 링크를 걸 때 당신이 역으로 링크를 걸 필요하는 없다는 것을 기록해라.

당신이 웹사이트를 구축할 때, 내부링크에 집중해야 한다. 왜냐하면 내부링크가 당신의 사이트를 사용가능하게 해주기 때문이다. 링크가 너무 많거나 너무 적지 않게 좋은 밸런스를 찾아야 한다. 우리는 다른 글에서 웹 사이트 네비게이션을 디자인하는 것에 대해 이야기 할 것이다. 그러나 룰로써, 당신이 새 웹페이지를 추가할 때마다, 적어도 당신의 1개 이상의 페이지에는 새 페이지에 대한 링크를 걸어야 한다. 반면에, 만약 당신의 사이트가 10페이지 이상이라면, 모든 페이지에 링크를 거는 것은 역효과이다.

당신이 처음 시작할 때, 외부와 들어오는 링크를 많이 걱정할 필요가 없다. 그러나, 그것들은 검색 엔진에서 당신의 사이트를 찾을 때, 매우 중요하다. (자세한 사항은 밑에 있다.)

Anchors(앵커)

대부분의 링크는 두 개의 웹사이트를 연결한다. 앵커는한 문서에서 다른 부분들을 연결한다. 앵커가 가리키는 링크를 따라가면, 브라우저는 새 문서를 불러오는 것 대신에 현재 문서의 다른 부분으로 이동한다. 그러나 다른 링크과 같은 방식으로 만들고 사용한다.

Example of a basic display and effect of an anchor in a web page

링크와 검색엔진

링크는 유저와 검색엔진 모두에게 중요하다. 검색 엔진이 웹페이지를 크롤링할 때마다, 검색엔진은 웹 페이지에서 이용가능한 링크를 따라가면서 웹 사이트를 인덱싱한다. 검색 엔진이 웹 사이트의 다양한 페이지를 발견하기 위해 링크를 따라가는 것뿐만 아니라 타켓 웹페이지에 도달하기 위해 어떤 검색 쿼리가 적절한 지를 결정하기 위해 링크의 텍스트를 사용한다.

그래서 링크는 얼마나 쉽게 검색 엔진이 너의 사이트를 찾는 지에 영향을 미친다. 문제는 검색 엔진의 활동을 측정하는 것은 어렵다. 회사들은 그들의 사이트가 검색 결과에 높은 랭크가 되기를 자연스럽게 원한다. 그리고, 모든 연구 결과는 적어도 몇몇은 분명하게 해준다.

  • 링크의 텍스트는 어떤 컴색 쿼리들이 주어진 URL을 찾는 지에 영향을 미친다.
  • 웹 페이지가 더 많은 들어오는 링크를 자랑할 수 있다면, 검색 결과 랭킹은 더 높이진다.
  • 외부 링크는 소스 웹페이와 타겟 웹페이지의 검색 랭킹에 영향을 미친다. 그러나 얼마나 많은 지는 분명치 않다.

SEO (search engine optimization, 검색 엔진 최적화)는 검색 결과에 웹페이지 랭크를 높게 만드는 법에 대한 연구이다. 웹페이지의 링크 사용을 증가시키는 것이 유용한 SEO 기법이다.

다음 단계

그래서 이젠, 당신은 링크가 있는 웹페이지들을 설정하고 싶을 것이다!

  • 더 많은 이론적인 배경을 배우기 위해, URLs 과 구조를 배울 것이다. 왜냐하면 모든 링크는 URL을 가리키기 때문이다.
  • 좀 더 실용적인 것을 원하나요? HTML 도입하이퍼 링크 만들기 모듈은 링크를 구현하는 법에 대한 상세한 내용을 설명한다.