본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

메타 요소 (meta 태그)

최초 작성일
최종 수정일
이번 시간에는...
HTML head 태그에 들어가는 meta 태그에 대해 더 다룹니다. 검색엔진을 위한 description, keyword 외에도 author, refresh, IE용 메타, 그리고 모바일기기를 위한 viewport 메타도 살펴 봅니다.

이번 시간에는 head 요소 안에 들어가는 meta 요소에 대해 살펴봅니다. 사실 우린 이미 메타(meta) 요소에 대해서 지난 'HTML 초급 강의 - head 요소'에서 다뤘습니다. 사실 그것 만으로도 충분할 수 있겠습니다만, 좀더 고급과정으로써 다루지 않았던 meta 요소에 대해서 더 다뤄보도록 하겠습니다. 물론 전 강의에서 다뤘던 메타 항목들도 복습차원에서 간단히 짚고 넘어가겠습니다.

문자셋 (charset) 메타 정보

이미 다뤘던 메타 정보로, 현재 페이지의 인코딩(문자셋)을 어떠한 방식으로 출력할 지 결정하는 속성입니다. 만약 제작한 웹 페이지의 한글이 깨져 보인다면, 거의 이 메타정보와 실제 페이지의 문자셋이 달라 생긴 문제일 가능성이 매우 큽니다. 이러한 현상은 이 메타 정보가 아예 선언되지 않았을 때에도 종종 발생하므로, 올바른 문자셋 정보를 꼭 넣는 것을 권장합니다. (관련 포스트 : 글자 깨짐 현상)

국내에서는 보통 'UTF-8'과 'EUC-KR'을 많이 사용하고 있습니다. 그리고 현재 추세는 다른 언어의 사용자가 접근 시에도 올바르게 보여질 수 있는 'UTF-8'를 권장하고 있습니다.

디스크립션(description)과 키워드(keyword) 메타 정보

이 디스크립션(description)과 키워드(keyword) 메타 정보는 주로 검색엔진과 관련이 있습니다.

디스크립션(description) 정보 같은 경우는 현재 페이지를 간략히 소개하는 문구를 적도록 합니다. 이를 검색엔진이 검색된 페이지에 페이지 제목과 같이 표현하며, '공유하기' 같은 것을 했을 때에 활용이 될 수도 있습니다.

키워드(keyword)는 페이지에 대한 키워드 정보들을 담고 있습니다. 페이지의 주요한 단어들을 콤마(,)로 구분하여 값을 넣어주도록 합니다. 이 키워드 정보는 검색엔진이 보다 검색엔진을 용이하도록 하게 만듭니다만, 이를 악용한 광고성 페이지들은 실제 콘텐츠와는 다른 단어들을 무작위로 넣기도 합니다. 이런 경우 검색엔진이 해당 페이지를 스팸 페이지로 인지할 수 있으니 주의하시기 바랍니다. 또한, 이런 이유 때문에 요새 검색엔진은 이 키워드 정보를 아예 수집하지 않는다는 의견도 있습니다.

작성자(author) 관련 메타 정보

name 속성의 값이 "author"인 정보는 페이지의 저자를 나타냅니다. content의 값으로 저자를 나타내는 문자열을 써야 합니다. 이 메타정보가 큰 의미를 가지진 않지만, 소스 상에서도 자신이 제작했음을 명시할 수 있습니다.

name 속성의 값이 "generator"인 정보는 이 페이지를 생성한 프로그램을 나타냅니다. content의 값은 해당 프로그램의 명칭이 들어갑니다. 다만 이 정보는 손으로 직접 코딩 한 경우에는 이 값을 사용하지 말아야 합니다. (예를 들어 메모장에서 작업한 경우는 직접 코딩 한 경우이므로, 값으로 'notepad'같은 것이 들어갈 일은 없을 것입니다.) 이 정보는 프로그램이 알아서 코드를 생성한 경우에 사용하기 때문에, 보통 그러한 프로그램을 사용할 경우 자동으로 추가가 될 가능성이 큽니다. 그런 이유로 이 메타정보를 쓸 일은 아마 없을 것이라 예상 됩니다.

우회 및 새로고침(refresh) 메타 정보

이 메타 요소는 조금 특이한 역할을 합니다. 바로 웹 페이지를 주기적으로 새로고침 하도록 만들어 줍니다. 이를 활용해서 광고를 새로고침 시키는 페이지들도 종종 있습니다만, 이는 좋은 방법이 아닙니다. 예상치 못하는 새로고침은 사용자로 하여금 불편을 야기하며, 특히 스크린리더로 접근하는 사람은 더욱 그렇습니다. 부분적인 영역의 새로고침 같은 경우는 자바스크립트를 통해 부분적으로 해결하는 것이 좋습니다. 요새 이 메타 요소를 사용하는 서비스는 별로 없으며, 이 요소는 사용하지 마시길 바랍니다.

추가적으로 이 요소에 'content'값을 약간 수정하면 페이지를 우회 시킬 수 있습니다.

예를 들어 위와 같이 content 값에 기존 숫자를 ';'으로 구분 짓고서 'url='로 시작하는 부분에 URL 주소를 넣어준다면, 해당 숫자만큼의 초가 지나면 해당 주소의 페이지로 이동하게 됩니다. 예를 들어 어떤 페이지가 '공사 중 입니다. 10초 후에 다른 페이지로 이동합니다' 라는 식의 문구를 가진 페이지는 보통 이런 방식을 사용합니다. 그리고 만약 해당 숫자를 '0'으로 바꾼다면 페이지 접속하자마자 해당 url로 이동하게 됩니다.

이러한 우회 방식은 기존 링크이동과는 다르게 히스토리 조차 남지 않으며, 뒤로 가기에도 남아있지 않습니다. 그 만큼 이러한 방식 역시, 사용자에게 예상치 못한 상황을 발생시키기 때문에 접근성에 있어서도 좋지 않습니다. 또한 이런 방식은 검색엔진에 있어서도 좋지 않기 때문에 구글에서도 이와 같은 방식을 권장하지 않으며, 해당 페이지의 URL을 변경해야 하는 경우 '301 리디렉션'을 사용하길 권장합니다. (구글 - 301 리디렉션으로 페이지 URL 변경)

IE 모드(mode) 메타 정보

이 메타 요소는 전에 크로스 브라우징 시간에 다뤘던 요소입니다. 이 메타 정보는 IE(인터넷 익스플로러)가 하위 버전 IE모드로 렌더링 하도록 만들어 줍니다. 예를 들어 content속성 값에 "IE=EmulateIE7"로 넣는 경우, IE8 이상의 최신 IE 브라우저라도 IE7 버전처럼 페이지를 렌더링 합니다.

물론 전에 말씀 드렸듯이 이런 하위 렌더링 모드는 버전 업이 되면서, 조금씩 버그들이 생겨나고 있습니다. 때문에, 부득이한 경우가 아니라면 하위 모드는 사용하지 마시고, 대신 "IE=edge"를 넣어 해당 브라우저가 가장 표준적인 페이지로 렌더링 되도록 하시기 바랍니다.

뷰포트(viewport) 메타 정보

이 메타 요소는 스마트폰이나 태블릿과 같은 모바일 환경을 위해 생긴 메타 정보입니다. 그래서 사실 이번 시간엔 다루지 말까 하다 XHTML에 넣어도 표준에 위배 되지 않고, 요즘 시대에 분명 유용한 메타 정보이기에 소개해드립니다.

요새는 많은 페이지들이 모바일용으로 따로 제작되긴 합니다만, 만약 스마트폰을 이용해서 PC 버전의 페이지를 접근했을 경우 보통 해당 페이지가 축소되어 전체 너비가 한 화면 안에 쏙 들어오게 보여집니다.

모바일에서 PC용 웹 페이지를 봤을 때 모습.
모바일에서 본 웹 페이지

이 메타정보는 해당 페이지의 콘텐츠 너비를 명시 해줍니다. 만약 이 메타 정보를 명시하지 않고, 쇼핑몰 같은 곳에 들어가는 '최근 본 상품' 윙 영역 같은 부분이 있다면, 해당 윙 영역이 계산되지 않은 채 화면에 가려질 수 있습니다. 또한, 스마트폰에서 자동으로 맞게 축소하는 것은 부정확한 크기로 보여질 수 있으니, 이 메타 요소를 명시해 주는 것이 좋습니다.

뷰포트값을 웹 페이지 너비와 같은 값을 줬을 땐 페이지가 꽉 차서 보이지만, 웹 페이지보다 큰 너비를 줄 경우 상대적으로 페이지가 작어 보입니다.
뷰포트 너비에 따른 페이지 비교

또한 이 속성은 PC버전용 페이지를 모바일 기기에서 접속했을 때 보다, 모바일용 페이지에서 더욱 중요한 역할을 합니다. content 속성 값에 "width" 말고 다른 속성을 넣을 수 있습니다. 다음과 같이요.

이 내용을 처음 크기를 1:1 비율로 보여줍니다. 만약 'initial-scale'에 해당하는 값이 '2.0' 이라면 크기를 두 배 확대된 모습을 보여줄 것입니다. 모바일용 페이지라면 화면이 처음에 축소된 모습을 보이지 말아야 하기 때문에, 반드시 넣어줘야 하는 값입니다. 그리고 사실 이 속성값 말고도 추가적으로 더 넣어줍니다.

content 값에 너무 많은 내용이 들어 간 듯 하지만, 천천히 살펴 보도록 하겠습니다.

width=device-width
페이지 너비를 기기의 너비와 동일하게 합니다. 'initial-scale=1.0'과 동일하다 할 수 있습니다.
minimum-scale=1.0
기기에서 줌 아웃을 할 때 가장 줄어들 수 있는 비율입니다. 예를 들어 0.8이라면 실제 페이지의 80%까지 더 축소할 수 있습니다. 1이면 실제 페이지에서 축소가 안됩니다.
maximum-scale=1.0
기기에서 줌 인을 할 때 가장 커질 수 있는 비율입니다. 2라면 두 배까지 확대 가능 합니다. 역시 1이라면 확대가 되지 않습니다.
user-scalable=no
이는 사용자가 페이지를 줌 인, 줌 아웃을 할 수 없도록 만듭니다. minimum-scale=1.0, maximum-scale=1.0 이 두 가지를 선언 한 것과 같은 기능이라 할 수 있습니다.

위에 어떻게 보면 중복된 기능을 담은 내용을 같이 적어 줬는데요, 모바일 기기 중에는 메타 정보 중에 몇 가지는 지원하지 않을 수 있기 때문에, 호환성을 위해 같이 넣었습니다.

모바일 기기에서 페이지를 접근 시, 사용자가 원하는 대로 줌 인, 줌 아웃을 할 수 있도록 하는 게 좋습니다. 하지만, 모바일 페이지의 경우 확대/축소 시 레이아웃 깨짐이 발생할 수 있기 때문에 이를 방지하는 경우가 많은데요, 그런 경우에는 꼭 글자 크기를 조절할 수 있는 옵션을 만들어 주는 것이 좋습니다. 대부분의 확대/축소는 글자를 보기 위함이기 때문이고, 이런 부분 하나하나가 사용자의 접근성을 보다 향상 시켜줍니다. (물론 그런 옵션 '동작'은 자바스크립트로 처리되어야 합니다.)

정리

일단 기본적인 메타 정보는 이제 거의 다 살펴 보았습니다. 이 외에도 SNS나 웹 마스터 도구 등에서 활용하는 임의의 메타 태그들도 존재합니다. 이런 부분들은 스스로 서비스할 웹 페이지를 만들고 따로 찾아보셔도 어렵지 않으리라 생각됩니다. 그럼 다음 강의에서 뵙도록 하겠습니다.

요점 정리
  • charset 메타는 페이지의 문자셋을 지정함.
  • description과 keyword는 검색엔진에서 주로 사용.
  • author 메타로 작성자를 명시 가능
  • generator 메타는 프로그램에 의해 자동으로 제작된 소스에서만 사용, 실제 직접 코딩 시에는 사용할 수 없음.
  • refresh 메타로 주기적인 새로고침을 하거나, 지정 시간 후 페이지 우회를 할 수 있음. 하지만, 사용자의 접근성을 매우 떨어트리며 검색엔진에도 악영향을 미칠 수 있기 때문에 비 권장.
  • X-UA-Compatible 메타 정보를 통해서 IE의 하위버전 렌더링 모드로 표현 가능, 하지만 하위 렌더링에는 버그가 더 생길 수 있으므로, "IE=edge" 사용을 권장
  • viewport 메타로 모바일 기기에서 접속 시, 보여지는 너비를 정할 수 있음. 모바일용 페이지가 아니더라도, 지정하는 것을 권장
  • 모바일 페이지의 경우, 레이아웃이 깨지지 않도록 확대/축소를 막을 수 있지만, 그럴 경우 글자 크기를 조절할 수 있도록 하는 등의 접근적 대안이 필요.

이 글이 유용하셨다면 친구들에게 공유 해주세요.