[웹 퍼블리싱 05] HTML - 링크와 앵커, href의 모든 것 - TheNullPage(널페이지)

앞선 편에서 텍스트를 의미에 맞게 담는 법을 익혔습니다. 그런데 문서 하나만으로는 아직 웹이 아닙니다. 그 문서가 다른 문서로 이어지고, 그 문서가 또 다른 문서로 이어질 때 비로소 웹이라는 거미줄이 생깁니다. 그 실을 잇는 태그가 바로 링크입니다. 제가 처음 링크를 걸어 페이지가 서로 연결되는 것을 봤을 때, 정적인 문서가 살아 있는 웹으로 바뀌는 느낌을 받았습니다.

이번 편에서는 링크 태그와 그 목적지를 가리키는 속성을 두루 살펴봅니다. 새 탭을 열 때의 보안 처리, 외부 링크의 관계 표시, 다운로드와 페이지 내 이동, 그리고 접근성을 살리는 링크 문구까지. 링크는 단순해 보이지만 제대로 다루면 배울 것이 꽤 많습니다.

1. 링크의 목적지, href의 여러 얼굴

링크 태그의 핵심은 목적지를 가리키는 속성입니다. 이 속성에 무엇을 넣느냐에 따라 링크의 성격이 완전히 달라집니다. 가장 흔한 것은 다른 페이지의 주소를 넣는 경우입니다. 전체 주소를 넣으면 외부 사이트로, 우리 사이트 안의 경로만 넣으면 같은 사이트의 다른 페이지로 이동합니다.

목적지에는 페이지 주소만 오는 것이 아닙니다. 우물 정 기호와 함께 특정 위치의 이름을 넣으면 같은 페이지 안의 그 지점으로 이동합니다. 이것을 앵커라고 부릅니다. 긴 문서의 목차에서 각 절로 뛰어내리게 할 때 이 앵커 링크가 요긴합니다.

목적지에 특별한 접두어를 넣으면 페이지가 아니라 앱을 여는 링크가 됩니다. 메일 접두어를 쓰면 메일 작성 창이 열리고, 전화 접두어를 쓰면 전화 걸기가 뜹니다. 모바일에서 특히 유용해서, 저는 연락처 페이지에서 전화번호를 이 링크로 만들어 바로 걸 수 있게 했습니다.

여기서 앵커가 동작하려면 목적지에 해당하는 지점에 같은 이름의 표식이 있어야 합니다. 이동하고 싶은 위치의 요소에 고유한 이름을 붙여 두면, 그 이름을 가리키는 링크가 그 지점으로 화면을 스크롤합니다. 이름은 문서 안에서 유일해야 하며, 같은 이름이 둘이면 브라우저가 헷갈립니다.

아래 예시는 앵커 이동과 메일, 전화 링크가 어떻게 생겼는지 보여 줍니다. 목적지 속성의 값만 바뀔 뿐 태그의 골격은 같습니다.

2. 새 탭을 열 때의 보안 처리

링크를 새 탭에서 열고 싶을 때가 있습니다. 외부 사이트로 나가되 우리 사이트도 남겨 두고 싶은 경우입니다. 이때 새 탭에서 열도록 지정하는 속성을 씁니다. 그런데 여기서 초보들이 놓치기 쉬운 보안 함정이 하나 있습니다.

단순히 새 탭으로만 열면, 새로 열린 페이지가 자바스크립트로 원래 페이지를 조작할 수 있는 통로가 생깁니다. 악의적인 외부 페이지가 이 통로로 원래 탭을 가짜 로그인 화면으로 바꿔치기하는 공격이 가능합니다. 이것을 탭내빙이라고 부릅니다. 눈에 잘 안 띄어서 더 위험한 취약점입니다.

이 통로를 막으려면 링크에 관계 속성을 붙여 새 페이지가 원래 페이지를 참조하지 못하게 끊어 줍니다. 요즘 브라우저는 새 탭 링크에 이 차단을 기본으로 적용하는 방향으로 바뀌었지만, 저는 여전히 명시적으로 붙여 둡니다. 브라우저 설정이나 버전에 상관없이 안전을 보장하기 위해서입니다.

함께 붙이면 좋은 또 하나의 관계 값은 참조 정보를 넘기지 않게 하는 것입니다. 우리 사이트에서 왔다는 정보를 외부에 굳이 알리고 싶지 않을 때 유용합니다. 새 탭 링크에 이 두 관계 값을 함께 붙이는 것이 저의 기본 습관이 되었습니다.

아래 예시는 새 탭으로 외부 사이트를 열면서 보안 속성을 함께 붙인 형태입니다. 목적지, 새 탭 지정, 관계 속성이 한 세트로 묶인 것에 주목하세요.

3. 외부 링크의 관계 표시와 다운로드

관계 속성은 보안뿐 아니라 검색엔진에 신호를 주는 데에도 쓰입니다. 우리가 보증하지 않는 외부 링크에는 따라가지 말라는 값을 붙일 수 있습니다. 협찬이나 광고로 걸린 링크에는 스폰서임을 밝히는 값을, 사용자가 남긴 링크에는 사용자 생성 콘텐츠임을 밝히는 값을 붙입니다.

이 관계 표시는 검색엔진이 링크의 신뢰도를 판단하는 데 참고됩니다. 우리 사이트가 특정 외부 사이트를 검색 순위 측면에서 보증하는 것으로 오해받지 않도록, 광고나 사용자 링크에는 적절한 관계 값을 붙이는 것이 안전합니다. 저는 사용자가 댓글에 남긴 링크에는 자동으로 이 값이 붙도록 처리해 두었습니다.

링크를 클릭했을 때 페이지로 이동하는 대신 파일을 내려받게 하고 싶을 때도 있습니다. 이때는 다운로드를 지시하는 속성을 붙입니다. 이 속성에 파일 이름을 값으로 주면 그 이름으로 저장됩니다. 다만 이 동작은 같은 사이트의 파일이거나 특정 형식의 데이터에서만 안정적으로 작동합니다.

제가 보고서 파일을 배포할 때 이 다운로드 속성이 편리했습니다. 링크를 누르면 브라우저가 파일을 열려고 시도하는 대신 곧바로 저장을 시작했고, 저장 파일 이름도 제가 지정한 대로 깔끔하게 붙었습니다. 사용자가 파일을 관리하기 훨씬 쉬워졌습니다.

아래는 다운로드 링크와 관계 값이 붙은 외부 링크의 모습입니다. 같은 링크 태그가 속성에 따라 전혀 다른 역할을 하는 것을 볼 수 있습니다.

4. 접근성을 살리는 링크 문구

링크에서 의외로 중요한 것이 링크 안에 담기는 글자입니다. 화면 낭독 프로그램 사용자는 페이지의 링크만 모아서 목록으로 훑는 기능을 자주 씁니다. 이때 링크 문구가 여기 클릭이나 더보기처럼 뭉뚱그려져 있으면, 목록에는 여기 클릭만 잔뜩 나열되어 어디로 가는 링크인지 알 수 없습니다.

그래서 링크 문구는 목적지를 설명하는 말이어야 합니다. 여기 클릭 대신 보고서 내려받기, 더보기 대신 반응형 디자인 글 전체 보기처럼 씁니다. 이렇게 하면 링크만 따로 떼어 읽어도 각 링크가 어디로 가는지 분명합니다. 저는 이 원칙을 알고 나서 제 사이트의 모든 더보기 링크 문구를 구체적으로 고쳤습니다.

이 원칙은 눈으로 보는 사용자에게도 좋습니다. 훑어 읽기를 할 때 링크 문구만 봐도 목적지를 알 수 있으니 편리합니다. 검색엔진에도 유리합니다. 링크 문구는 그 링크가 가리키는 페이지가 무엇에 관한 것인지를 알려주는 단서가 되기 때문입니다.

글자가 아예 없는 링크, 예를 들어 아이콘만 있는 링크는 특별한 처리가 필요합니다. 아이콘 이미지에는 화면 낭독 프로그램이 읽을 이름을 따로 부여해야 합니다. 그러지 않으면 그 링크는 이름 없는 링크로 읽혀 사용자가 목적지를 짐작할 수 없습니다. 눈에 보이는 글자가 없다면 보이지 않는 이름이라도 반드시 넣어야 합니다.

링크와 버튼을 혼동하지 않는 것도 중요합니다. 다른 곳으로 이동하는 것은 링크, 어떤 동작을 실행하는 것은 버튼입니다. 저장이나 삭제 같은 동작을 링크처럼 보이게 만들면 새 탭 열기나 주소 복사 같은 링크의 편의 기능이 엉뚱하게 작동합니다. 이동은 링크, 동작은 버튼이라는 구분을 지키는 것이 좋습니다.

정리하면 링크 문구는 목적지를 말하고, 아이콘 링크에는 숨은 이름을 넣으며, 이동과 동작을 헷갈리지 않는 것이 접근성을 살리는 핵심입니다. 이 작은 정성들이 보이지 않는 사용자에게는 큰 차이로 다가옵니다.

5. 링크를 다룰 때의 나의 점검표

실무에서 링크를 걸 때 저는 몇 가지를 습관적으로 점검합니다. 첫째, 새 탭으로 여는 링크에는 보안 관계 속성을 붙였는가. 이것을 빠뜨리면 탭내빙 통로가 열린 채로 방치됩니다. 새 탭 지정을 쓸 때마다 관계 속성을 세트로 붙이는 것을 규칙으로 삼았습니다.

둘째, 외부나 광고, 사용자 링크에는 적절한 관계 값을 붙였는가. 검색엔진에 잘못된 신호를 주지 않기 위해서입니다. 특히 사용자가 자유롭게 남기는 링크에는 자동으로 관계 값이 붙도록 처리해 두면 안심입니다.

셋째, 링크 문구가 목적지를 설명하는가. 여기 클릭이나 더보기 같은 뭉뚱그린 문구가 남아 있지 않은지 살핍니다. 아이콘만 있는 링크에는 숨은 이름을 넣었는지도 함께 확인합니다.

넷째, 이 링크가 정말 이동인지 동작인지 되짚습니다. 동작이라면 링크가 아니라 버튼으로 바꿉니다. 이 구분이 어긋나면 접근성과 사용성 양쪽에서 미묘한 문제가 생깁니다.

이 네 가지 점검을 몸에 붙이고 나서, 저는 링크와 관련된 자잘한 사고를 거의 겪지 않게 되었습니다. 링크는 웹에서 가장 흔한 요소인 만큼, 여기서 실수하면 사이트 전체에 그 실수가 퍼집니다. 흔한 것일수록 기본을 정확히 지키는 것이 중요합니다.

링크를 다루다 보면 새 탭 자체에 대한 고민도 하게 됩니다. 저는 한때 외부로 나가는 링크는 무조건 새 탭으로 여는 것이 친절하다고 생각했습니다. 하지만 지나고 보니 그것이 늘 좋은 것만은 아니었습니다. 새 탭을 강제로 열면 사용자가 뒤로 가기로 돌아오려 할 때 그 기능이 먹히지 않아 당황하게 됩니다. 특히 화면 낭독 프로그램 사용자나 모바일 사용자에게는 갑자기 늘어난 탭이 오히려 혼란이 됩니다.

그래서 지금 저는 새 탭을 아껴 씁니다. 사용자가 지금 하던 작업을 잃지 않아야 하는 특별한 경우에만 새 탭을 열고, 대부분의 링크는 같은 탭에서 자연스럽게 이동하게 둡니다. 어디로 이동할지는 사용자가 스스로 정하는 것이 원칙이라는 생각입니다. 새 탭이 필요하면 사용자가 직접 새 탭으로 여는 방법을 이미 알고 있으니까요.

앵커 링크와 관련해서도 작은 배려가 있습니다. 앵커로 페이지 안을 이동하면 화면이 순간 이동하듯 툭 튀는데, 이 갑작스러운 이동이 어지럼증을 유발할 수 있습니다. 그래서 부드럽게 스크롤되도록 스타일로 처리하되, 움직임을 줄이고 싶어 하는 사용자에게는 그 효과를 꺼 주는 배려가 함께 필요합니다. 이 부분은 뒤에서 접근성을 다룰 때 더 자세히 이야기하겠습니다.

링크가 현재 페이지를 가리키는 경우도 신경 씁니다. 메뉴에서 지금 보고 있는 페이지에 해당하는 링크는 사용자가 지금 여기 있다는 것을 알 수 있게 표시해 주는 것이 좋습니다. 화면에서는 색이나 굵기로, 기계에게는 현재 위치임을 알리는 속성으로 표시합니다. 이렇게 하면 눈으로 보든 소리로 듣든 자신이 어디에 있는지 알 수 있습니다.

제가 겪은 사소하지만 잦은 실수 하나는 목적지 속성을 빈 값으로 두거나 우물 정 기호만 덜렁 넣은 것이었습니다. 아직 목적지가 정해지지 않은 링크를 임시로 그렇게 두었다가 그대로 배포한 것이죠. 이런 링크는 누르면 페이지 맨 위로 튀거나 아무 일도 일어나지 않아 사용자를 당황시킵니다. 목적지가 없는 링크라면 차라리 링크가 아닌 다른 요소로 두는 것이 낫습니다.

이런 자잘한 사례들이 쌓이면서 저는 링크가 결코 단순하지 않다는 것을 배웠습니다. 목적지 하나만 정하면 끝인 것 같지만, 새 탭 여부와 보안, 관계 표시, 문구, 현재 위치 표시까지 챙길 것이 제법 많습니다. 그러나 이 모든 것이 결국 사용자가 길을 잃지 않게 돕는 일이라 생각하면, 하나하나가 그럴 만한 가치가 있는 정성입니다.

링크의 색과 밑줄에 대해서도 한마디 보태고 싶습니다. 저는 예전에 디자인을 이유로 링크의 밑줄을 모두 지우고 색만으로 구분했습니다. 그런데 색을 구분하기 어려운 사용자에게는 그 링크가 그냥 평범한 글자로 보였습니다. 어디를 누를 수 있는지 알 수 없었던 것이죠. 그 뒤로 저는 본문 속 링크에는 색과 함께 밑줄 같은 다른 단서를 반드시 남겨, 색에만 의존하지 않도록 바꾸었습니다.

이렇게 링크 하나에도 챙길 것이 많다는 사실이 처음에는 부담스러웠습니다. 하지만 지나고 보니 이 모든 것이 결국 사용자를 길에서 헤매지 않게 하는 안내판이라는 하나의 목적으로 모입니다. 목적지를 정확히 가리키고, 안전하게 열고, 누구나 알아볼 수 있게 표시하는 것. 이 세 가지만 기억하면 링크는 더 이상 어렵지 않습니다. 오히려 웹에서 가장 정직하고 강력한 도구가 됩니다.

이번 편에서는 웹을 잇는 실인 링크를 속속들이 살펴봤습니다. 다음 편에서는 문서에 생기를 불어넣는 이미지, 그리고 그 이미지를 눈으로 볼 수 없는 사람에게도 전하는 대체 텍스트로 넘어가겠습니다. 텍스트를 이었으니 이제 그림을 담을 차례입니다.