지난 편에서 소리와 영상을 화면에 담는 법을 익혔습니다. 이번에는 화면에 전혀 보이지 않지만 문서의 정체를 규정하는 메타 태그를 다룹니다. 지금까지 다룬 것들이 사용자의 눈에 보이는 콘텐츠였다면, 이번 편의 주인공은 브라우저와 검색엔진에게만 말을 거는 숨은 정보입니다. 보이지 않는다고 사소한 것이 아닙니다. 오히려 이 정보들이 잘못되면 문서 전체가 어긋납니다.
제가 초보 시절에는 문서의 머리 부분을 그냥 복사해서 붙여 쓰기만 했지, 그 안의 각 줄이 무슨 일을 하는지 몰랐습니다. 나중에야 이 짧은 줄들이 문자 인코딩, 화면 크기 대응, 검색 결과에 뜨는 요약까지 좌우한다는 것을 알게 되었습니다. 이번 편에서는 문서의 머리 부분에 들어가는 핵심 정보들을 하나씩 뜯어보겠습니다.
1. 문서의 머리와 몸통
모든 문서는 크게 머리와 몸통으로 나뉩니다. 몸통에는 사용자가 화면에서 보는 모든 것이 들어가고, 머리에는 화면에 보이지 않는 문서에 관한 정보가 들어갑니다. 이 구분을 분명히 이해하는 것이 메타 태그를 다루는 출발점입니다. 화면에 보여야 할 것을 머리에 넣거나, 문서 정보를 몸통에 넣으면 뒤죽박죽이 됩니다.
머리에 들어가는 정보는 대개 문서 자신을 설명합니다. 이 문서가 어떤 문자 체계로 쓰였는지, 어떤 언어인지, 제목이 무엇인지, 무엇에 관한 내용인지 같은 것들입니다. 사용자는 이런 정보를 직접 보지 않지만, 브라우저는 이것을 읽어 문서를 올바르게 해석하고, 검색엔진은 이것을 읽어 문서를 분류합니다.
이 문서 정보를 담는 태그를 흔히 메타 태그라고 부릅니다. 메타라는 말은 무언가에 관한 정보라는 뜻으로, 문서 자체에 관한 정보를 담는다는 의미입니다. 메타 태그는 화면에 아무 모양도 만들지 않지만, 문서의 동작과 표시에 깊이 관여합니다.
머리에 들어가는 정보에는 순서가 중요한 것도 있습니다. 특히 문자 인코딩 정보는 머리의 가장 앞쪽에 두어야 합니다. 브라우저가 문서를 읽기 시작할 때 어떤 문자 체계로 해석할지를 가장 먼저 알아야 하기 때문입니다. 이 정보가 뒤에 오면 브라우저가 이미 잘못 해석한 것을 되돌려야 해서 낭비가 생깁니다.
제가 문서의 머리를 제대로 이해하고 나서 좋았던 점은, 이상한 증상들의 원인을 짚을 수 있게 된 것입니다. 글자가 깨져 보이거나, 모바일에서 화면이 이상하거나, 검색 결과에 엉뚱한 요약이 뜨는 문제들이 모두 이 머리 부분과 관련되어 있었습니다. 머리를 알면 이런 문제의 실마리가 보입니다.
정리하면 문서는 머리와 몸통으로 나뉘고, 머리에는 문서에 관한 정보가 들어갑니다. 이 정보들이 문서의 해석과 표시를 좌우하므로, 보이지 않는다고 소홀히 하면 안 됩니다. 이제 머리에 들어가는 핵심 정보들을 하나씩 살펴보겠습니다.
2. 문자 인코딩과 언어
가장 먼저 챙길 것은 문자 인코딩입니다. 문자 인코딩은 컴퓨터가 글자를 저장하고 해석하는 규칙입니다. 이 규칙을 문서에 명시하지 않으면 브라우저가 잘못된 규칙으로 글자를 해석해, 한글이나 특수문자가 깨져 알아볼 수 없는 기호로 변합니다. 그래서 인코딩 선언은 모든 문서의 필수 첫 단추입니다.
오늘날 표준으로 쓰는 인코딩은 세계 거의 모든 언어의 글자를 담을 수 있는 통합 문자 체계입니다. 이것을 문서 머리의 맨 앞에 선언하면, 브라우저가 한글이든 이모지든 올바르게 표시합니다. 특별한 이유가 없다면 이 통합 문자 체계를 쓰는 것이 정답이고, 저는 예외를 둔 적이 거의 없습니다.
인코딩 선언에서 흔히 겪는 문제가 있습니다. 문서를 저장할 때의 실제 인코딩과 선언한 인코딩이 다르면 여전히 글자가 깨집니다. 선언은 통합 문자 체계로 해 놓고 파일은 다른 체계로 저장하면 어긋나는 것이죠. 그래서 선언과 실제 저장 방식을 일치시키는 것이 중요합니다. 저는 글자가 깨질 때 항상 이 둘의 불일치부터 의심합니다.
다음으로 문서의 언어를 지정하는 것도 중요합니다. 이 문서가 한국어인지 영어인지를 밝히면, 화면 낭독 프로그램이 그 언어에 맞는 발음으로 읽어 줍니다. 언어 지정이 없거나 틀리면, 한국어 문서를 영어 발음으로 읽는 우스꽝스러운 일이 벌어집니다. 소리로 듣는 사용자에게는 심각한 문제입니다.
언어 지정은 검색엔진과 번역에도 영향을 줍니다. 검색엔진은 이 정보로 문서의 언어를 판별해 알맞은 사용자에게 보여 주고, 브라우저의 번역 기능도 이 정보를 참고합니다. 한 문서 안에 다른 언어의 문단이 섞여 있다면, 그 부분에만 별도로 언어를 지정해 정확도를 높일 수도 있습니다.
아래는 인코딩과 언어를 지정한 예시입니다. 인코딩이 머리 맨 앞에 오는 점에 주목하세요.
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
3. 화면 크기 대응
모바일 대응에서 절대 빠뜨리면 안 되는 정보가 있습니다. 화면 크기에 관한 지정입니다. 이 지정이 없으면, 스마트폰 브라우저는 문서가 넓은 데스크톱 화면을 기준으로 만들어졌다고 가정하고, 그 넓은 화면을 작은 화면에 욱여넣어 아주 작게 축소해 보여 줍니다. 글자가 개미만 해져서 사용자가 계속 확대해야 하죠.
이 화면 크기 지정은 브라우저에게 문서의 폭을 기기 화면의 실제 폭에 맞추라고 알려 줍니다. 그러면 스마트폰에서는 스마트폰 폭에, 태블릿에서는 태블릿 폭에 맞춰 문서가 표시됩니다. 이것이 있어야 우리가 만든 모바일 대응 배치가 제대로 동작합니다. 이 지정 하나가 모바일 경험의 토대입니다.
이 지정에는 초기 확대 배율을 함께 명시하는 것이 보통입니다. 문서가 처음 열릴 때 확대나 축소 없이 원래 크기로 보이도록 하는 것이죠. 이렇게 해야 사용자가 페이지를 열자마자 자연스러운 크기로 읽을 수 있습니다.
여기서 조심할 점이 있습니다. 사용자가 화면을 확대하지 못하게 막는 설정을 넣는 경우가 있는데, 이는 접근성 관점에서 좋지 않습니다. 시력이 약한 사용자는 화면을 확대해 읽어야 하는데, 확대를 막으면 그들이 내용을 볼 수 없게 됩니다. 그래서 확대 금지는 아주 특별한 경우가 아니면 넣지 않는 것이 원칙입니다.
제가 이 화면 크기 지정을 빠뜨렸다가 겪은 일이 있습니다. 데스크톱에서는 멀쩡하던 페이지가 스마트폰에서 터무니없이 작게 나와, 사용자들이 읽을 수 없다는 신고를 했습니다. 이 한 줄을 추가하자 문제가 즉시 해결되었습니다. 그 뒤로 저는 새 문서를 시작할 때 이 지정을 반드시 넣습니다.
아래는 화면 크기 대응 지정의 예시입니다. 폭을 기기에 맞추고 초기 배율을 정한 것을 보세요.
<meta name="viewport" content="width=device-width, initial-scale=1">
4. 제목과 요약
문서의 제목은 머리에 들어가는 정보 중 사용자가 간접적으로 마주하는 것입니다. 이 제목은 브라우저 탭에 표시되고, 즐겨찾기에 저장할 때의 이름이 되며, 검색 결과에서 파란 제목 줄로 나타납니다. 그래서 제목은 그 문서가 무엇인지 명확하고 간결하게 담아야 합니다. 각 페이지마다 고유한 제목을 붙이는 것이 기본입니다.
제목을 지을 때 저는 페이지 고유의 내용과 사이트 이름을 함께 담는 방식을 씁니다. 어떤 페이지인지와 어느 사이트인지를 함께 보여 주면, 검색 결과나 여러 탭 속에서 사용자가 쉽게 알아봅니다. 다만 너무 길면 검색 결과에서 뒷부분이 잘리므로, 핵심을 앞쪽에 두고 적당한 길이로 유지하는 것이 좋습니다.
제목 다음으로 중요한 것이 문서의 요약입니다. 이 요약은 문서의 내용을 한두 문장으로 압축한 것으로, 검색 결과에서 제목 아래 회색 글씨로 나타나는 경우가 많습니다. 사용자는 이 요약을 읽고 이 페이지가 자기가 찾는 것인지 판단합니다. 그래서 요약은 사용자의 클릭을 부르는 짧은 홍보 문구 같은 역할을 합니다.
요약을 쓸 때는 그 페이지의 실제 내용을 정직하게 담아야 합니다. 클릭을 유도하려고 내용과 다른 요약을 쓰면, 들어온 사용자가 실망하고 금방 나가 버립니다. 검색엔진은 이런 이탈을 감지하므로, 과장된 요약은 결국 손해입니다. 저는 요약을 그 페이지를 대표하는 정직한 소개로 씁니다.
요약도 각 페이지마다 고유해야 합니다. 모든 페이지에 같은 요약을 복사해 쓰면, 검색엔진이 페이지들을 구별하지 못하고, 사용자도 어떤 페이지를 골라야 할지 알 수 없습니다. 페이지 수가 많아 일일이 쓰기 어렵다면, 각 페이지의 내용에서 핵심 문장을 뽑아 자동으로 요약을 만드는 방법도 있습니다.
아래는 제목과 요약을 지정한 예시입니다. 각각이 어떤 형식으로 들어가는지 보세요.
<title>메타 태그 입문 - 배움터</title>
<meta name="description" content="문서 머리에 들어가는 정보를 한눈에 정리합니다.">
5. 그 밖의 문서 정보
머리에는 지금까지 다룬 것 외에도 여러 정보를 둘 수 있습니다. 그중 하나가 검색엔진에게 이 페이지를 색인에 넣을지 말지를 지시하는 정보입니다. 아직 준비 중인 페이지나 검색에 노출되면 곤란한 페이지에는 색인하지 말라는 지시를 두어, 검색 결과에 뜨지 않게 할 수 있습니다.
대표 주소를 지정하는 정보도 중요합니다. 같은 내용의 페이지가 여러 주소로 접근될 수 있을 때, 그중 어느 것이 대표인지를 검색엔진에게 알려 주는 것입니다. 이것이 없으면 검색엔진이 같은 내용을 여러 페이지로 오해해 평가가 분산됩니다. 이 부분은 뒤편 검색 최적화에서 더 깊이 다루겠습니다.
브라우저의 겉모습에 관여하는 정보도 있습니다. 예를 들어 모바일 브라우저의 주소 표시줄 색을 문서가 지정할 수 있어서, 사이트의 분위기에 맞춰 브라우저 상단 색을 물들일 수 있습니다. 사소해 보이지만 사이트의 완성도를 높이는 작은 손질입니다.
탭에 표시되는 작은 아이콘을 지정하는 정보도 머리에 둡니다. 이 아이콘은 브라우저 탭과 즐겨찾기 목록에서 사이트를 알아보게 하는 시각적 표식입니다. 아이콘이 없으면 밋밋한 기본 모양이 뜨는데, 사이트 고유의 아이콘을 두면 여러 탭 속에서도 우리 사이트가 눈에 띕니다.
제가 실무에서 얻은 원칙은, 머리에 넣는 정보는 그 페이지에 정말 필요한 것만 두라는 것입니다. 남들이 넣으니까 무작정 따라 넣기보다, 각 정보가 무슨 일을 하는지 이해하고 필요한 것만 두는 편이 관리하기 쉽습니다. 이해 없이 복사한 정보는 나중에 문제의 원인을 찾기 어렵게 만듭니다.
또 하나 덧붙이자면, 머리에 넣는 정보는 순서와 위치도 신경 쓰는 것이 좋습니다. 앞서 말한 인코딩 선언은 반드시 맨 앞에 두어야 하고, 나머지 정보들도 성격에 따라 가지런히 묶어 두면 나중에 문서를 손볼 때 원하는 정보를 빨리 찾을 수 있습니다. 저는 인코딩과 화면 크기 대응 같은 기본 정보를 위쪽에, 제목과 요약을 그다음에, 공유나 검색 관련 정보를 아래쪽에 모아 두는 나름의 순서를 정해 일관되게 적용합니다. 이런 작은 정돈이 쌓이면 문서 전체의 관리가 한결 수월해집니다.
이번 편에서는 문서의 머리에 들어가는 인코딩, 언어, 화면 크기 대응, 제목, 요약, 그리고 그 밖의 정보들을 살펴봤습니다. 다음 편에서는 이 메타 정보를 소셜 공유로 확장한 오픈그래프 태그로 넘어가겠습니다. 문서의 기본 정보를 알렸으니, 이제 그 문서가 소셜에서 어떻게 보일지를 다듬는 법을 배울 차례입니다.