▲

오래된 HTML 코드 조각과 유물들

(vale.rocks)1P by GN⁺ 3시간전 | ★ favorite | 댓글 1개

• 오래된 웹사이트에 남은 낯선 HTML에는 브라우저마다 다른 동작을 맞추고, 외부 서비스가 페이지를 마음대로 바꾸지 못하게 하던 흔적이 담겨 있음
• IE=edge로 Internet Explorer의 문서 모드를 지정하고, chrome=1로 IE 안에서 Chrome 엔진을 실행하며, 조건부 주석으로 특정 브라우저에만 코드를 적용하던 시절을 돌아봄
• Microsoft가 본문에 링크를 끼워 넣거나 Skype가 전화번호 옆에 아이콘을 붙여 페이지를 망가뜨리자, 개발자들은 그 기능을 끄기 위한 메타 태그까지 추가해야 했음
• 위치 좌표에 대륙간탄도미사일의 약자인 ICBM이라는 이름을 붙이고, 지역 검색 서비스용 revisit-after가 근거 없는 SEO 요령처럼 퍼지는 등 태그마다 뜻밖의 사연이 있음
• IE의 페이지 전환 효과부터 PWA 이전의 웹 앱 설정까지, 표준 기능으로 이어진 시도와 서비스 종료로 용도를 잃은 코드를 모아 웹이 변화해 온 과정을 보여줌

---

사양보다 주변 환경이 남긴 HTML

• 기기, 브라우저, 운영체제, 화면 형태, 사양, 도구, 사용자 선호와 기업 이해관계가 바뀌면서 HTML도 주변 환경에 맞춰 변화해 옴
• 대상은 한때 사양에 포함됐다가 폐기된 HTML이 아니라, 외부 연동·벤더 확장·플랫폼별 우회책 때문에 사이트에 들어갔다가 존재 이유가 잊힌 코드임

브라우저 버전과 렌더링 엔진 제어

• X-UA-Compatible 은 Internet Explorer의 문서 호환 모드를 지정함
  • content="IE=edge"는 지원 가능한 가장 높은 문서 모드를 선택함
  • 문서에 따르면 5~11로 해당 IE 버전을 지정할 수 있음
  • EmulateIE7~EmulateIE11은 유효한 DOCTYPE이 있을 때 해당 버전 모드로 동작하고, 없으면 쿼크 모드로 돌아감
• chrome=1 은 IE 6~9에 설치할 수 있었던 Google Chrome Frame을 활성화함
  • 이 태그가 있는 사이트는 IE의 Trident 대신 Chrome의 수정된 WebKit 엔진으로 렌더링됨
• requiresActiveX=true 는 플러그인을 지원하지 않는 IE 10의 Metro 모드에서 데스크톱 모드로 전환하도록 요청함
• 조건부 주석으로 특정 브라우저나 버전에만 HTML을 적용할 수 있었음
  • IE의 <!--[if gte IE 6]> … <![endif]-->는 IE 6 이상에만 내용을 표시함
  • 조건에는 IE와 버전 번호, 비교 연산자 lt·lte·gt·gte, 논리 연산자 !·&·|, 부분식 (), 상수 true·false를 사용할 수 있었음
  • Netscape의 방식은 주석 시작 직후 JavaScript 엔티티를 넣어 navigator.appName == 'Netscape'나 navigator.platform == 'win95' 등을 평가함
  • 결과가 참이면 내용을 포함하고 거짓이면 주석으로 남겼으며, 다른 브라우저에서는 항상 일반 주석으로 처리됨

위치 정보와 콘텐츠 등급 분류

• ICBM 메타 태그는 웹사이트 주제의 지리적 위치를 위도·경도로 지정함
  • 대륙간탄도미사일의 약자인 ICBM은 Usenet 시절부터 자신의 위치를 뜻하던 해커 은어임
  • GeoURL은 이 좌표로 사이트를 지구상에 배치하고 가까운 지역의 사이트를 찾도록 지원함
• PICS 는 W3C가 1990년대 중반 추진한 인터넷 콘텐츠 라벨링 기술 사양임
  • http-equiv="PICS-Label" 메타 태그에 분류 서비스, 대상 URL, 유효 기간과 등급 등을 넣을 수 있었으며, 여러 필터링 제품과 IE 3 이후 버전에 채택됨
  • 많은 사이트가 잘못된 분류를 넣거나 태그 자체를 추가하지 않았고, 2003년 무렵에는 사실상 완전히 버려짐
  • 후속 규격인 POWDER도 의도한 성과를 거두지 못함

브라우저와 확장 기능의 페이지 개입 차단

• Microsoft Smart Tags는 IE 6에서 페이지에 하이퍼링크를 자동 삽입하던 기능임
  • Microsoft의 예시처럼 주요 기업명을 감지해 주가와 기업 정보에 접근하도록 연결할 수 있었음
  • 사이트 운영자들의 반발로 name="MSSmartTagsPreventParsing" content="TRUE"를 통한 거부 기능이 생겼으며, 이후 IE에서 기능 자체가 제거됨
  • Google도 2024년 말 iOS용 Google 앱에서 유사한 Page Annotations을 시도했으나, 반발을 받고 2025년 3월 중단함
• Baidu Browser의 모바일 트랜스코딩은 페이지를 transcoder.baidu.com으로 경유시켜 수정함
  • 레이아웃 재구성, 스타일 제거, 이미지 압축, 브랜드 표시 제거와 함께 기존 광고를 없애고 Baidu Union 광고를 삽입해 사이트를 크게 훼손함
  • 2012~2018년에는 name="applicable-device" content="pc,mobile" 또는 http-equiv="Cache-Control" content="no-siteapp,no-transform" 태그를 넣어 이를 거부할 수 있었음
• Skype Toolbar, 이후의 Skype Click to Call은 2000년대 중반부터 2010년대 중반까지 IE·Chrome·Firefox에서 사용된 확장 기능임
  • Skype와 함께 자동 설치돼 전화번호를 감지하고 통화, 주소록 추가 등의 아이콘을 삽입했으나, 이 과정에서 페이지가 자주 깨짐
  • 개발자는 name="skype_toolbar" content="skype_toolbar_parser_compatible"로 기능을 비활성화함
  • Firefox에서는 불안정성이 심해 Mozilla가 2011년 명시적으로 차단함
• Image Toolbar는 IE 6에서 이미지 위에 저장·공유 버튼 등을 띄웠으며, http-equiv="imagetoolbar" content="no"로 끌 수 있었음
• Reading View는 IE 9부터 브라우저 버튼으로 읽기용 간소화 화면을 제공했으며, name="IE_RM_OFF" content="true"를 넣으면 해당 버튼이 나타나지 않음

페이지 전환, 프레임과 글자 표시

• 페이지 간 전환 효과는 IE 4~8에서 Page-Enter·Page-Exit 메타 태그로 설정할 수 있었음
  • revealTrans(Duration=2.0,Transition=12)처럼 시간과 전환 유형을 지정해 PowerPoint나 Keynote의 슬라이드 전환과 비슷한 효과를 냄
  • IE의 전환 기능과 같은 기능이 웹 플랫폼에 정식으로 들어온 것은 View Transition API 도입 이후임
  • Bramus는 IE의 전환 효과를 새 API로 이식함
• Window-target 의 _top 값은 프레임 안에 로드된 페이지가 부모 페이지에서 벗어나 최상위 브라우저 창으로 열리도록 함
  • 1990년대 중반 Netscape Navigator에서 시작해 IE 등으로 퍼진 비표준 태그로, 다른 사이트의 프레임에 자신의 페이지가 삽입되는 것을 막는 데 널리 쓰임
  • 현재는 페이지 삽입을 방지하는 데 보안 헤더를 사용함
• cleartype 의 on 값은 Pocket Internet Explorer·Internet Explorer Mobile 같은 저해상도 기기에서 글자 표시를 개선하는 용도로 쓰임
  • ClearType은 Microsoft의 글자 가독성 개선 기술임
• msapplication-tap-highlight 의 no 값은 IE 11에서 링크를 탭할 때 생기는 강조 표시를 끔
  • CSS의 -webkit-tap-highlight-color와 유사하지만, 색상 지정 없이 켜기·끄기만 가능했음

검색 엔진 대응과 근거 없이 퍼진 SEO 태그

• AJAX 크롤링용 name="fragment" content="!"는 Google이 JavaScript를 실행하지 않던 시절의 색인 문제에 대응함
  • 크롤러에 _escaped_fragment_ 쿼리 매개변수를 붙여 요청하도록 알리고, 서버가 해당 페이지의 HTML 버전을 반환하는 방식임
  • Google은 2009년 이를 권장하기 시작했으나 2015년 권장을 중단함
• noodp, noydir 는 검색 엔진이 웹 디렉터리 대신 페이지 자체의 제목·설명을 사용하도록 요청하는 robots 값임
  • Yahoo Directory와 directory.mozilla.org에서 이름을 따온 DMoz는 사이트별 제목과 설명을 직접 작성하기도 했고, 일부 검색 엔진이 이를 사용함
  • 두 디렉터리가 모두 종료돼 이 선언은 더 이상 유효한 용도가 없음
• revisit-after 는 알려진 사용처가 지역 검색 시스템 하나뿐인데도 SEO 통념처럼 퍼짐
  • Vancouver Webpages의 브리티시컬럼비아 지역 검색 서비스 searchBC가 content="7 days" 같은 값을 재수집 주기로 사용함
  • Google을 포함한 주요 검색 엔진이 이 태그를 사용했다는 증거는 없음

PWA 이전의 웹 앱 이름과 고정 사이트

• application-name 은 PWA가 정착하기 전 여러 브라우저의 웹 앱 구현에서 앱 이름을 지정했으며, 없으면 대개 <title>을 사용함
• IE의 고정 사이트는 Windows 7의 IE 9 이상에서 작업 표시줄에 사이트를 고정)하고, 현대 PWA처럼 일부 기능을 운영체제·브라우저 수준으로 노출함
  • msapplication-tooltip: 아이콘에 마우스를 올렸을 때 표시할 문구를 지정함
  • msapplication-starturl: 고정 사이트의 시작 URL을 설정함
  • msapplication-window: 초기 창 크기를 지정하며, 최소 너비는 800px, 높이는 600px임
  • msapplication-navbutton-color: 브라우저의 뒤로·앞으로 이동 버튼 색상을 설정함
  • msapplication-task#using-msapplication-task): 작업 표시줄 아이콘을 보조 클릭했을 때 나타나는 블로그 바로가기 등의 빠른 작업을 정의함
• Microsoft 웹 앱 타일은 Windows 데스크톱 UI, Metro UI, Windows Mobile에서 전용 메타데이터로 모양을 설정함
  • msapplication-TileColor·msapplication-TileImage와 msapplication-square70x70logo·msapplication-square150x150logo·msapplication-wide310x150logo·msapplication-square310x310logo로 색상과 여러 크기의 타일 이미지를 지정함
  • msapplication-config로 browserconfig.xml을 연결하는 선언도 사용됨
  • msapplication-badge)는 Live Tile 알림을 위해 주기적으로 조회할 웹 주소를 정의함
• Chrome의 고정 웹 앱은 application-url을 시작 URL로 사용함
• Safari의 고정 사이트·탭은 자주 쓰는 웹사이트를 계속 열어 두고 쉽게 접근하도록 했으며, rel="mask-icon"에 SVG 아이콘과 color 값을 지정할 수 있었음

Chrome과 iOS의 전용 웹 앱 선언

• CRX-less Web Apps 는 온라인 JSON 매니페스트로 호스팅 앱을 정의하던 Chrome 앱 방식임
  • rel="chrome-application-definition" 링크로 application_definition.json 같은 파일을 연결함
  • 매니페스트에는 name, description, launch_url, launch_container, icons, permissions를 넣어 이름·설명·시작 페이지·실행 형태·아이콘·알림 권한 등을 지정함
  • 확장 프로그램용 .crx 전체 패키지 없이 JSON 매니페스트와 아이콘만으로 Chrome Web Store에 배포할 수 있었음
  • 이후 Chrome Apps로 이름이 바뀌었으며, 현재는 단계적으로 종료되고 있음
• iOS 홈 화면 웹 앱은 Apple의 전용 태그로 실행 경험을 조정함
  • apple-touch-icon, apple-touch-startup-image, apple-mobile-web-app-title은 각각 아이콘·시작 이미지·제목을 설정함
  • apple-mobile-web-app-capable은 브라우저 UI를 숨김
  • apple-mobile-web-app-status-bar-style은 세 가지 값을 지원함: default는 흰 배경에 검은 글자·아이콘, black은 검은 배경에 검은 글자·아이콘, black-translucent는 웹페이지 배경색에 흰 글자·아이콘을 사용함
  • 이 태그들은 현대의 PWA 정의로 대체됨
• apple-touch-fullscreen 은 iOS 2의 초기 데모에 등장했지만, Apple 공식 문서에는 apple-mobile-web-app-capable만 실림
  • 출시 전 데모를 통해 먼저 널리 퍼졌고, 그 때문에 Apple이 이를 apple-mobile-web-app-capable의 별칭으로 만든 것으로 보임

모바일 브라우저와 PDA 최적화

• UC Browser와 QQ Browser는 데이터 절감과 저가 기기 최적화 덕분에 2010년대 초·중반 아시아에서 특히 인기가 높았음
  • UC Browser는 screen-orientation으로 화면 방향을 강제하고 full-screen으로 브라우저 UI를 숨김
  • QQ Browser는 각각 x5-orientation과 x5-fullscreen을 사용하며, X5는 Tencent의 브라우저 엔진 이름임
  • 표준 전체 화면·화면 방향 API와 더 성능 좋은 브라우저의 보급으로 이 태그들이 필요 없어짐
• PDA·초기 모바일 최적화에는 viewport의 width=device-width 설정이 보편화되기 전 HandheldFriendly와 MobileOptimized가 널리 쓰임
  • HandheldFriendly는 AvantGo용으로 만들어진 뒤 Blackberry Browser로 확산됨
  • MobileOptimized는 구형 Windows Mobile을 위해 Microsoft가 만든 태그)로, 예시에서는 content="320"을 사용함

사전 렌더링과 AMP 페이지 연결

• rel="prerender" 는 다음 페이지를 미리 가져와 처리해, 사용자가 이동할 때 준비된 상태로 만드는 링크 선언임
  • Chrome 13~62에서만 완전히 지원됐고 정식 사양으로 채택되지 않았으며, 기능은 Speculation Rules API로 대체됨
• rel="amphtml" 은 더 빠른 콘텐츠 로딩을 위해 재구성한 AMP 버전의 페이지를 연결함
  • AMP는 더 이상 널리 쓰이지 않고 Google도 적극적으로 추진하지 않아, 이 태그의 필요성이 사라짐

제작 도구와 블로그 관리·알림 연동

• Microsoft FrontPage는 WYSIWYG 웹사이트 제작 도구로, HTML 주석 형태의 WebBot Components를 삽입함
  • 예시에는 수정 시각용 Timestamp, 사이트맵용 TableOfContents, 방문 횟수용 HitCounter, 편집 메모용 PurpleText가 있음
  • 주석 자체가 페이지에 직접 나타나는 대신 FrontPage Server Extensions(FPSE)가 처리하고 FrontPage 편집기가 활용함
  • 개발자는 FrontPage Software Developer’s Kit로 자체 구성요소를 만들 수도 있었음
• Really Simple Discovery(RSD) 는 블로그 관리 서비스를 클라이언트에 공개하는 방식임
  • rel="EditURI" 링크가 XML 문서를 가리키고, 문서는 Windows Live Writer·BlogJet·MarsEdit 같은 도구가 접속할 엔드포인트를 제공함
  • WordPress·Blogger·LiveJournal·TypePad·MediaWiki 등에 구현됐으나, 현대 게시 시스템에서는 대체로 지원을 폐기함
• Pingback은 다른 사이트에 링크했음을 알리는 시스템으로, rel="pingback"으로 수신 엔드포인트를 공개함
  • 알림을 받은 사이트는 발신 사이트에 실제 링크가 있는지 확인한 뒤, 자신의 페이지에 어느 사이트가 링크했는지 표시함
  • Webmention과 다소 유사하지만, 빠르게 스팸과 검색 순위 조작 수단이 됐고 사이트를 DDoS 공격에 악용하는 취약점까지 널리 이용되면서 인기를 잃음

공유 미리보기와 Twitter 전용 메타데이터

• Share Partners는 Facebook이 Open Graph를 만들기 전에 운영하던 공유 미리보기 메타데이터 체계임
  • rel="image_src", rel="audio_src", rel="video_src"로 미리보기에 사용할 이미지·오디오·비디오를 지정함
  • Digg 등도 비공식 표준처럼 채택했으며, 여러 태그의 지원 수준은 사이트마다 달랐음
• Twitter 카드 태그는 링크 미리보기의 형식과 메타데이터를 지정함
  • twitter:card, twitter:site, twitter:creator, twitter:url, twitter:title, twitter:description, twitter:image, twitter:image:alt로 카드 유형·사이트 계정·작성자 계정·URL·제목·설명·이미지·대체 텍스트를 설정함
  • 기존 문서와 카드 검증기에 더 이상 접근할 수 없고, X는 Open Graph 태그를 대체 정보로 사용하므로 Twitter 전용 선언은 대체로 쓸모가 없어졌으며 Open Graph로 교체할 것을 권장함
  • 기술적 이유 외에도 X의 부실한 관리, 소유주의 공개적인 나치식 경례, 미국과 세계의 파시즘 확산에 대한 기여를 강하게 비판하며 태그 삭제를 권고함
• twitter:dnt 의 on 값은 Twitter for Websites 위젯 사용 시 추적을 거부하는 용도로 쓰임
  • 관련 문서에도 더 이상 접근할 수 없으며, 태그 역시 더는 존중되지 않는 것으로 보임

이 목록의 범위

• 여기에는 비교적 유명하거나 주목할 만한 비표준 HTML 확장만 담겼으며, 더 생소한 사례도 많이 남아 있음
• WHATWG Wiki에서 추가 메타 확장 목록을 볼 수 있지만, 각 항목에 상세 설명이 붙어 있지는 않음

댓글과 토론