[논문]한국 인터넷신문 HTML 규격 및 시맨틱스 수준 분석

이병학

doi:10.9728/dcs.2017.18.5.949

한국 인터넷신문 HTML 규격 및 시맨틱스 수준 분석
HTML specification and semantics analysis of korean news sites 원문보기

디지털콘텐츠학회 논문지 = Journal of Digital Contents Society, v.18 no.5, 2017년, pp.949 - 956

이병학 (한경대학교 디자인학과)

초록
AI-Helper

오늘날 인터넷 신문들은 대중적인 디지털 콘텐츠로 자리잡고 있다. 인터넷 신문의 시각적 인터페이스는 대동소이하나 그 골조를 이루는 HTML의 수준 및 규격은 천차만별이다. HTML의 가장 기본적인 목적이 다른 컴퓨터도 이해할 수 있도록 문서를 의미론적으로 기술하는 것이기에 HTML5에서 문서의 시맨틱스(semantics)는 더욱 강조되고 있다. 본 연구에서는 글로벌 인터넷 신문 8개의 HTML을 대조군으로 삼아 한국의 110개 인터넷 신문을 분석하여 실질적으로 문서에 사용된 HTML 규격을 점검하고 그 시맨틱스의 수준을 진단하였다. 분석 결과 조사대상인 110개 한국의 인터넷신문 중 68%가 HTML4 규격에 해당하는 것으로 나타났으며, 110개 중 9%에 해당하는 10개의 웹사이트만이 대조군으로 조사한 글로벌 인터넷신문과 동일한 수준의 HTML5 규격으로 작성되었으며 적극적인 시맨틱스를 적용하고 있는 것으로 나타났다. 번역기술이 인공지능으로 인해 한층 개선되고 있는 이 시점에 한국 인터넷신문의 디지털 콘텐츠들이 세계와 소통하기 위해서는 더욱 더 적극적인 시맨틱스를 적용한 HTML 문서 작성 플랫폼으로의 규격 전환이 필요하다.

Abstract ▼ AI-Helper

Visual interfaces of news sites look similar while their HTML have lots of different specifications and qualities. It's getting more and more significant to describe HTML semantically to make every computer able to understand contents to be shared as HTML5 specification refers. In this study, I have analysed HTML codes of 110 korean news sites in comparison to those of 8 global news sites. As results, 68% of news sites are still described in HTML4 specifications and only 10 out of 110 are in HTML5 specification and as high quality and strong semantics as global news sites. The result shows most korean news sites platforms had not been changed since they developed in mid-2000 and it's needed to be upgraded as language translation technologies are making it possible to share korean digital contents with the rest of world.

주제어

AI 본문요약
AI-Helper

* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.

제안 방법

(1) 선언한 HTML규격과 실제적으로 작성된 HTML규격의 차이를 분석하기 위하여 각 인터넷신문이 선언한 HTML규격을 조사하였다.
(2) 기사를 공유하기 위한 정보를 담고 있는 Open Graph의 작성 여부를 조사하였다.
(3) 실질적인 HTML 규격을 파악하기 위해 [body]의 전체영역을 구분하는 레이아웃 방식을 HTML5의 시맨틱스 방식, HTML4의 [div]방식, HTML3의 [table]방식으로 구분하였다.
(4) 영역 구분(sectioning)에서의 시맨틱스 적용 수준을 판단하기 위하여 [header], [nav], [main], [article], [aside],[footer]요소의 사용 여부를 조사하였다. 이 중 [header],[nav], [footer]는 문서에 필수적으로 포함되는 요소들이며[main], [article], [aside], [section]의 경우 콘텐츠에 따라 선택적으로 포함되는 요소다.
(5) 본문 시맨틱스의 수준을 판단할 수 있는 4가지 기준을 정하여 차례대로 대상을 좁혀나가는 방식으로 본문 시맨틱스의수준을 분석하였다. 4가지 기준은 다음과 같다.
각 HTML의 분석은 크롬(Chrome) 웹브라우저에서 제공하는 ‘개발자 도구’를 사용하였으며, HTML5 규격 상세문서를 토대로 시맨틱스와 관련된 요소를 선정하였다.
HTML4 규격이후 HTML에서는 [br]요소에 의한단순개행보다는 문단을 의미하는 [p]태그의 사용을 권장하고 있다. 따라서 본문의 경우 단락구분 방식, 단락구분 요소, 제목 요소, 도판 및 강조요소의 순서로 대상을 좁혀나가며 본문에 적용된 시맨틱스의 수준을 분석하였다. 결과 연합뉴스, ㅍㅍㅅㅅ, 다음뉴스, KBS WORLD, 경향신문, 전자신문, 텐아시아, 맥스무비, 허핑턴포스트, 헬스조선의 기사 본문에 적절한 수준의 시맨틱스가 적용된 것으로 나타났다.
먼저 대조군으로 삼은 8개의 글로벌 인터넷 신문에 적용된 HTML 특성을 우선적으로 분석하고 그에 비추어 110개 한국 인터넷 신문의 HTML 조사 결과는 5가지 항목별로 나누어 정리하였다.
선언부의 규격보다도 HTML 규격을 더욱 정확하게 판단할 수 있는 영역구분 방식을 분석하였다. [table]요소를 사용한 HTML3, [div]요소를 사용한 HTML4, 시맨틱스를 적용한 HTML5로 나누어 영역을 구분하는 방식에 따라 HTML 규격을 조사한 결과 시맨틱 영역 요소를 사용한 HTML5 규격의 인터넷 신문은 18%에 불과하였으며, 이 중 충분히 시맨틱스가 적용된 인터넷 신문은 전체 110개 조사대상 가운데 16개인 14.
전체 분석 결과를 종합한 결과 110개의 한국 인터넷 신문을 HTML 시맨틱스 요소 적용 여부 및 레이아웃 방식에 따라 우선 HTML5, HTML4, HTML3로 분류하였으며 HTML5로 분류된 그룹은 다시 대조군인 글로벌 인터넷 신문의 HTML에 비추어 적극적으로 시맨틱스를 적용한 HTML5그룹과 그렇지 않은 그룹으로 세분화하고 HTML4로 분류된 그룹에 대해서는 본문의 단락구분에 있어 [br]요소를 사용하여 단순개행을 한 경우와[div]혹은 [p]요소를 사용하여 블록지정을 한 경우로 세분화하였다. 최종적으로 국내 인터넷 신문의 HTML 수준을 총 5가지 수준의 그룹으로 나누었고 각 수준을 분석하였다.

대상 데이터

‘법률신문’, ‘전자신문’, ‘디스패치’ 등 종합일간지가 아닌 특정 카테고리의 기사를 전문적으로 취급하는 중소규모의 인터넷 신문들로 구성되었으며, 종합일간지 중에서는 ‘한겨레21’이 유일하게 포함되었다.
HTML 규격은 W3C의 권장사항(Recommendation)이기에 반드시 규격을 따라야 할 필요는 없다. 따라서 현재 HTML5 규격이 실제로 바람직하게 적용되고 있는 수준을 파악하기 위하여 글로벌 언론사인 뉴욕타임즈(New York Times), 가디언(Guardian), 르몽드(Le Monde), 텔레그래프(Telegraph), CNN,내셔널 지오그래픽(National Geographic), 워싱턴 포스트(Washington Post), 로이터(Reuter)의 웹사이트를 대조군으로 선정하여 2017년 5월 각 언론사에서 운영중인 인터넷신문의 기사 HTML을 분석하였다.
또한 인터넷신문이 대중매체라는 점에서 그 대중성을 고려하지 않을 수 없기에 본 분석에서는 유의미한 결과를 도출하기 위하여 대형 포털사이트인 네이버와 다음에 기사를 제공하는 108개 인터넷신문 및 SNS를 통해 빈번하게 공유되는 인터넷신문인 ‘ㅍㅍㅅㅅ’와 ‘허핑턴포스트 코리아’로 구성된 총 110개 인터넷신문을 실험군으로 선정하여 2017년 5월에 퍼블리싱된 기사의 HTML을 분석하였다.

성능/효과

HTML5로 분류된 전체 20개(18%)의 HTML5 규격을 시맨틱스 적용 정도에 따라 다시 두 그룹으로 세분화 한 결과 9%에 해당하는 10종의 인터넷 신문만이 대조군으로 설정한 글로벌 인터넷 신문과 동등한 수준의 HTML을 갖추고 있었으며 그 다음으로 전체 110개 조사대상 중 75개(68%)로 가장 많은 수를 차지한 것은 영역구분에 시맨틱요소가 아닌 [div]요소를 사용한 HTML4 규격이었다. 이 중 본문 단락구분을 여전히 단순 줄바꿈에 해당하는 [br]요소로 작성한 인터넷신문이 53개(48%)로 가장 비중이 높았다.
0을 거쳐 2014년 10월 HTML5가 등장했다. XHTML이 XML과 HTML을 통합하기 위한 규격이라는 점에서 사실상 HTML4와 별다른 차이가 없음을 감안할 때 HTML4 이후 HTML5가 등장하기까지 15년의 세월이 걸렸기에 가장 오랜 기간 동안 보급된 버전은 HTML4다. 본 연구의 결과에서도 HTML4 규격으로 작성된 인터넷신문이 가장 많은 것으로 나타났다.
선언부의 규격보다도 HTML 규격을 더욱 정확하게 판단할 수 있는 영역구분 방식을 분석하였다. [table]요소를 사용한 HTML3, [div]요소를 사용한 HTML4, 시맨틱스를 적용한 HTML5로 나누어 영역을 구분하는 방식에 따라 HTML 규격을 조사한 결과 시맨틱 영역 요소를 사용한 HTML5 규격의 인터넷 신문은 18%에 불과하였으며, 이 중 충분히 시맨틱스가 적용된 인터넷 신문은 전체 110개 조사대상 가운데 16개인 14.5%로 나타났다. 뉴스토마토, 디스패치, 맥스무비, 법률신문, 블로터, MBC, 서울경제, 시사저널, 전자신문, 조선일보, 코리아헤럴드, 텐아시아, ㅍㅍㅅㅅ, 한국경제, 한겨레21, 허핑턴포스트가 이에 포함되었다.
따라서 본문의 경우 단락구분 방식, 단락구분 요소, 제목 요소, 도판 및 강조요소의 순서로 대상을 좁혀나가며 본문에 적용된 시맨틱스의 수준을 분석하였다. 결과 연합뉴스, ㅍㅍㅅㅅ, 다음뉴스, KBS WORLD, 경향신문, 전자신문, 텐아시아, 맥스무비, 허핑턴포스트, 헬스조선의 기사 본문에 적절한 수준의 시맨틱스가 적용된 것으로 나타났다.
대조군으로 삼은 인터넷 신문의 경우, 공히 HTML5 규격의 시맨틱스를 적극적으로 적용하고 있는 것으로 나타났다. 영역 구분에 사용된 시맨틱 요소의 경우 모든 신문이 [head] 요소와[footer]요소를 공통으로 사용하고 있었으며, 이외에 최소 4개의 요소를 사용하고 있다.
이 중 [header],[nav], [footer]는 문서에 필수적으로 포함되는 요소들이며[main], [article], [aside], [section]의 경우 콘텐츠에 따라 선택적으로 포함되는 요소다. 대조군의 경우 최소한 4종의 영역 구분 시맨틱스 요소를 사용한 것으로 나타났다.
이 중 본문 단락구분을 여전히 단순 줄바꿈에 해당하는 [br]요소로 작성한 인터넷신문이 53개(48%)로 가장 비중이 높았다. 마지막으로 전체의 14%를 차지하는 15개의 인터넷신문이 HTML3 및 그 이전 규격의 공통적 관행인 전체를 하나의 표로 레이아웃하는 [table]요소를 사용하고 있기에 HTML5 규격으로의 개선이 시급한 것으로 판단된다.
XHTML이 XML과 HTML을 통합하기 위한 규격이라는 점에서 사실상 HTML4와 별다른 차이가 없음을 감안할 때 HTML4 이후 HTML5가 등장하기까지 15년의 세월이 걸렸기에 가장 오랜 기간 동안 보급된 버전은 HTML4다. 본 연구의 결과에서도 HTML4 규격으로 작성된 인터넷신문이 가장 많은 것으로 나타났다.
영역 구분에 사용된 시맨틱 요소의 경우 모든 신문이 [head] 요소와[footer]요소를 공통으로 사용하고 있었으며, 이외에 최소 4개의 요소를 사용하고 있다. 본문 작성의 경우 모든 신문이 기본적으로 [h1]~[h6]과 [p]요소의 권장사항을 준수하고 있었으며, 75%에 해당하는 6개의 신문이 HTML5 규격에서 새롭게 정의된 도판 요소인 [figure]태그를 적용하고 있는 것으로 나타났다. 또한 강조의 스타일링에 [b]또는 [i]요소를 지양하고[strong]과 [em]을 사용하고 있는 등 글로벌 인터넷 신문의 경우 전반적으로 HTML5 규격의 권장사항을 적극적으로 준수하고 있는 것으로 나타났다.
특히 인터넷신문과 같은 대중매체일수록 공유를 통해 확산될 가능성이 높기 때문에, 검색과 공유를 위해 보다 해석되기 용이한 HTML을 작성하는 것이 필요하다. 분석결과 네이버나 포털에 기사를 제공하지 않고 SNS 통해주로 공유되는 ‘ㅍㅍㅅㅅ’와 ‘허핑턴포스트’가 HTML5의 시맨틱스를 적극적으로 사용하고 있다는 점이 이를 반증한다. 하지만 현재 한국 인터넷 신문의 주를 이루는 규격은 HTML4(68%)로 나타났고 HTML5 규격을 적극적으로 적용한 경우는 9%에 불과했다.
전체 분석 결과를 종합한 결과 110개의 한국 인터넷 신문을 HTML 시맨틱스 요소 적용 여부 및 레이아웃 방식에 따라 우선 HTML5, HTML4, HTML3로 분류하였으며 HTML5로 분류된 그룹은 다시 대조군인 글로벌 인터넷 신문의 HTML에 비추어 적극적으로 시맨틱스를 적용한 HTML5그룹과 그렇지 않은 그룹으로 세분화하고 HTML4로 분류된 그룹에 대해서는 본문의 단락구분에 있어 [br]요소를 사용하여 단순개행을 한 경우와[div]혹은 [p]요소를 사용하여 블록지정을 한 경우로 세분화하였다. 최종적으로 국내 인터넷 신문의 HTML 수준을 총 5가지 수준의 그룹으로 나누었고 각 수준을 분석하였다.
특히 포털 사이트에 콘텐츠를 노출하지 않고 SNS을 통해서만 공유되는 ‘ㅍㅍㅅㅅ’과 ‘허핑턴포스트’가 상대적으로 높은 수준의 HTML을 갖추고 있으며, 공유에 적합한 것으로 나타났다.

질의응답

핵심어	질문	논문에서 추출한 답변
	컴퓨터가 HTML4 규격의 문서구조를 이해하기 어려운 이유는 무엇인가?	HTML(Hyper Text Markup Language)이 처음 고안될 당시의 목적은 과학문서를 공유하고 특히 컴퓨터가 이해할 수 있는 문서를 만드는 것이었다[1]. 하지만 [div]요소를 주축으로 작성되었던 HTML4 규격의 2000년대 초중반 웹사이트들은 기사, 머리말, 제목, 본문, 꼬릿말 등의 구조적 명칭을 임의적인 명칭의 id속성이나 class속성으로 작성하였기에 컴퓨터가 문서구조를 이해하기 어려운 난점이 존재하였다. 이와 관련하여 HTML 개발을 주도했던 팀 버너스리는 줄곧 파악하기 쉬운 ‘의미론적 웹(semantic web)'을 강조하였으며[2], 지난 2014년 10월 발표된 HTML5 규격에서는 HTML은 시맨틱 웹(semantic web)의 개념을 적극적으로 명시하며 컴퓨터가 이해할 수 있도록 작성함으로써 어떤 플랫폼과 서비스에서도 공유가 가능하도록 의미론적으로 기술하는 것을 중요시하고 있다[3].
	팀 버너스리가 설명한 의미론적 웹은 무엇인가?	“시맨틱 웹(semantic web)은 별개의 웹이 아니라 체계적으로 정의된 의미의 정보가 담긴 현재 웹의 개선안이다. 시맨틱 웹을 통해 컴퓨터와 사람들은 협동할 수 있다. 현재 쓰고 있는 웹의 구조에 시맨틱 웹을 더하려는 움직임은 이미 시작되었으며, 머지않아 컴퓨터들은 지금은 단순히 표시하는 것에 그치고 있는 정보들을 “이해”하는 것으로 그 기능이 향상될 것이다[2].“
	HTML5은 시맨틱스 도입을 통해 무엇을 극복하였는가?	본 연구에서 주목한 HTML5의 특징은 시맨틱스다. HTML5는 시맨틱스 도입을 통해 HTML4의 단점인 [div]태그의 복잡성을 극복하고 본래 HTML의 의미를 충실히 따르고자 했다. 다음은 규격별 HTML 문서에서 설명하는 HTML의 의미다.

참고문헌 (15)

W3C(World Wide Web Consortium). What is HTML? [internet]. Available: https://www.w3.org/TR/1999/REC-html401-19991224/intro/intro.html#h-2.2.
Berners-Lee, Tim(2001, May). The Semantic Web. Scientific American.com, [internet]. Available: https://www.scientificamerican.com/article/the-semantic-web/.
W3C. HTML 5 [internet]. Available: https://www.w3.org/TR/2014/REC-html5-20141028/.
National Election Commission. The definition of internet journals [internet]. Available: http://www.nec.go.kr/portal/knowLaw/quanDetailView.do?contId201202150112&contSid0001&quanId201203038058.
Hyun-Gee Jeon and Chan KOH, "Text Extraction Algorithm using the HTML Logical Structure Analysis", The Journal of Digital Contents Society, Vol. 16, No. 3, pp. 445-455, June 2015.

원문보기 상세보기
Jeff P., Dan R., "Extracting Article Text from the Web with Maximum Subsequence Segmentation," The 18th international conference on World wide web, pp.971-980, 2009.
W3C. HTML 4 [internet]. Available: https://www.w3.org/TR/1999/REC-html401-19991224/intro/intro.html#h-2.3.2
Joongang-Il-Bo. HTML source [internet]. Available: http://news.joins.com/article/21557874?clocjoongang|home|newslist1
Yonhap News. HTML source [internet]. Available: http://www.yonhapnews.co.kr/politics/2017/05/10/0501000000AKR20170510072400001.HTML?template2085
Daum News. HTML source [internet]. Available: http://v.media.daum.net/v/20170514094213264
Berners-Lee, Tim. Hypertext Markup Language - 2.0 [internet]. Available: https://www.w3.org/MarkUp/html-spec/html-spec_toc.html
Raggett, Dave. HTML 3.2 Reference Specification [internet]. Available: https://www.w3.org/TR/REC-html32-19970114
New York Times. HTML source [internet]. Available: https://www.nytimes.com/2017/05/09/opinion/an-agenda-for-south-koreas-new-leader.html?actionclick&pgtypeHomepage&clickSourcestory-heading&moduleopinion-c-col-right-region(R)ionopinion-c-col-right-region&WT.navopinion-c-col-right-region&_r0
The Guardian. HTML source [internet]. Available: https://www.theguardian.com/world/2017/may/09/moon-jae-in-the-south-korean-pragmatist-who-would-be-presidentc
Byoung Hak, Lee. Analysis of korean internet journalism HTML specification and quality of semantics research result [internet]. Available: https://docs.google.com/spreadsheets/d/1BE7ZMnzVoLkkDF82MrVOxqj7fbFiGTm2HeiUGgF8gOs/edit#gid0

표제어: PCR

동의어: Packet Collision Rate

용어 설명 출처 목록 (6)

용어 설명: PCR은 세균 특이성이 있는 primer를 이용하여 적은 수의 세균이 있을지라도 쉽게 검출할 수 있는 유용한 방법이며, 이를 이용하여 구강 내 치면세균막이나 타액에서 직접 세균을 검출할 수 있게 되었다[8].

내보내기 구분	파일저장 인쇄 메일전송
구성항목	기본정보 상세정보 관리번호, 논문명, 저널/프로시딩명, 저자 , 발행년, 권, 호, 시작페이지, 끝페이지, 발행기관 관리번호, 논문명, 대등논문명, 저자 , 저널/프로시딩명, 발행기관, 발행년, 발행언어, 권, 호, 시작페이지, 끝페이지, ISBN, ISSN, 주제분야, 키워드, 초록(한글), 초록(영문), 저자(소속기관)
저장형식	Text(ASCII format) Excel format RefWorks Direct Export RIS format (for Reference Manager, ProCite, EndNote), Scholar's Aids, Mendeley
메일정보	받는사람 (필수) @ 보내는사람 (선택) @ 제목 내용 KISTI 검색결과 이메일 서비스
안내	총 건의 자료가 검색되었습니다. 다운받으실 자료의 인덱스를 입력하세요. (1-10,000) 검색결과의 순서대로 최대 10,000건 까지 다운로드가 가능합니다. 데이타가 많을 경우 속도가 느려질 수 있습니다.(최대 2~3분 소요) 다운로드 파일은 UTF-8 형태로 저장됩니다. 파일의 내용이 제대로 보이지 않을실 때는 웹브라우저 상단의 보기 -> 인코딩 -> 자동선택 여부를 확인하십시오. ~ Text(ASCII format) Excel format

연합인증