Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

링크와 URL의 차이점 완벽 정리: 일상 속 개념부터 HTML 구조까지

링크(link)와 URL의 차이점은 무엇이며, 과연 이 차이가 중요할까요?

웹페이지의 특정 콘텐츠로 바로 이동하는 경로를 공유하는 일상적인 대화 속에서는 링크와 URL의 구분이 크게 중요하지 않습니다. 좋아하는 글을 친구에게 공유할 때처럼 말이죠.

비전문적인 관점에서 보면, 링크는 클릭하면 특정 위치로 이동시켜 주는 사용자 인터페이스(UI)를 의미합니다. 그리고 그 목적지의 위치는 URL로 정의됩니다.

시각적으로 링크는 텍스트, 이미지, 버튼 등 다양한 UI 요소로 표현될 수 있으며, 이 모든 것은 HTML 코드로 정의됩니다(뒤에서 자세히 다룹니다).

정리하면, 클릭할 수 있고 표면 아래에 URL이 숨어 있다면 그것이 바로 링크입니다.

기술 전문가든 비전문가든 대부분 링크와 URL이라는 용어를 혼용해서 사용합니다. 사람들이 서체(typeface)와 폰트(font)를 같은 것으로 여기는 것과 비슷하죠(엄밀히는 다르지만). 다만 기술적으로 하나씩 뜯어보기 시작하면 URL과 링크 사이에는 분명한 차이가 존재합니다.

자, 이제 조금 더 기술적인 이야기를 들어가 보겠습니다.

URL의 기술적 구조

URL은 일반적으로 프로토콜(protocol), 도메인 이름(domain name), 최상위 도메인(top-level domain), 슬러그(slug)의 요소로 구성됩니다. 타이포그래피 튜토리얼 페이지의 URL을 예로 들어 살펴보겠습니다.

https://techstacker.com/typography-italic-vs-bold
  • https:// → 프로토콜
  • techstacker → 도메인 이름
  • .com → 최상위 도메인
  • typography-italic-vs-bold → 슬러그(slug)

참고로 URL은 Universal Resource Locator(범용 자원 위치 지정자)의 약자입니다.

일상 언어에서는 위와 같은 주소를 흔히 '링크'라고 부릅니다. 비전문적인 관점에서는 틀린 말이 아닙니다. 하지만 기술적으로 보면 URL은 어디까지나 링크를 구성하는 한 부분일 뿐입니다. 위 URL을 실제로 클릭할 수 있는 인터랙티브한 링크로 만들려면 다른 요소와 결합해야 하는데, 그 역할을 담당하는 것이 바로 HTML입니다.

HTML이 링크(URL)를 정의하는 방식

웹사이트에서 링크를 접할 때는 보통 문장 중 강조 처리된 부분으로 표시됩니다. TechStacker 메인 페이지로 연결되는 이 텍스트처럼 말이죠.

  • 화면에 보이는 강조된 텍스트는 클릭 가능한 링크입니다.
  • 그 시각적 표면 아래에는 목적지를 가리키는 URL이 숨어 있습니다.

링크 텍스트와 URL은 모두 HTML 앵커(anchor) 요소인 <a> 안에 정의됩니다.

앵커 요소는 소스 역할을 하는 href 속성을 포함하며, 그 속성값이 바로 클릭한 사용자를 지정된 목적지로 안내하는 URL입니다.

TechStacker 메인 페이지로 연결되는 링크가 포함된 단락의 HTML 코드는 다음과 같습니다.

<p>
  Usually when people talk about links, they refer to a highlighted part of a
  sentence, like <a href="https://techstacker.com">this text</a> that leads to
  TechStacker's front page.
</p>

텍스트 외의 UI 요소로도 링크를 만들 수 있습니다

이미지를 클릭했을 때 사용자를 특정 페이지로 이동시키고 싶다면 어떻게 해야 할까요? 방법은 간단합니다. 이미지 요소 <img>를 앵커 요소로 감싸주기만 하면 됩니다.

먼저 앞선 예제의 앵커 요소를 가져옵니다.

<a href="https://techstacker.com">this text</a>

그리고 링크로 만들고 싶은 이미지 요소를 준비합니다.

<img
  src="https://kr.wsxdn.com/UploadFiles_1288/202203/2022033109302583.png"
  width="150"
  height="150"
  alt="Eric Cartman"
/>

이제 앵커 요소 안의 this text를 이미지 요소로 교체합니다.

<a href="https://techstacker.com">
  <img
    src="https://kr.wsxdn.com/UploadFiles_1288/202203/2022033109302583.png"
    width="150"
    height="150"
    alt="Eric Cartman"
  />
</a>

그 결과, 클릭 가능한 링크로 동작하는 이미지가 완성됩니다.

링크와 URL의 차이점 완벽 정리: 일상 속 개념부터 HTML 구조까지

마우스 커서를 이미지 위에 올려보세요. 브라우저 창 왼쪽 하단에 이 웹사이트의 URL이 표시되는 것을 확인할 수 있습니다.

이미지를 클릭하면 앵커 요소에 지정된 URL에 따라 메인 페이지로 이동합니다. 링크를 새 브라우저 탭에서 열고 싶다면 CMD(Mac) 또는 Ctrl(Windows) 키를 누른 상태에서 클릭하면 됩니다.

링크 vs URL, 핵심 정리

기술 전문가든 아니든, 대부분의 사람에게 다음과 같이 요청한다고 가정해 봅시다.

  • "X에 관한 웹사이트의 URL 좀 알려줘"
  • "X에 관한 웹사이트 링크 좀 보내줘"

어느 쪽이든 상대방은 대개 브라우저 주소창에서 URL을 복사해 전달해 줄 겁니다. 엄밀히 따지면 전달받은 것은 URL이지만, 링크라고 불러도 전혀 문제되지 않습니다. 결과는 같으니까요.

반면, 블로그 글에 링크를 삽입하는 작업을 맡게 된다면 이야기가 달라집니다. URL 외에도 고려해야 할 요소가 많습니다.

  • 링크를 클릭했을 때 새 브라우저 탭에서 열리게 할 것인가?
  • 팔로우(follow) 링크로 할 것인가, 노팔로우(nofollow) 링크로 할 것인가? (SEO 관련)
  • 링크는 어떤 콘텐츠를 감싸야 하는가? 텍스트인가, 이미지인가?
  • 그 밖의 다양한 옵션들

즉, 링크가 어떻게 동작해야 하는지에 대한 이야기가 시작되는 순간 기술적인 세부 사항이 중요해집니다. 단순히 'URL을 준다' 또는 '링크를 건다'는 표현만으로는 더 이상 충분하지 않습니다. 사용자를 원하는 목적지로 안내하기 위해 경로를 어떻게 활용하고 어떤 형태로 보여줄지, 그 맥락까지 이해해야 하는 것이죠.