HTML 편집기
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
HTML 편집기는 HTML, CSS 등 웹 기술을 사용하여 웹 페이지를 만들고 수정하는 데 사용되는 소프트웨어 도구이다. HTML 편집기는 크게 텍스트 편집기와 WYSIWYG 편집기로 나뉘며, 텍스트 편집기는 코드 작성을 돕는 구문 강조 기능과 다양한 부가 기능을 제공하는 반면, WYSIWYG 편집기는 웹 브라우저와 유사한 편집 환경을 제공하여 HTML 지식이 없어도 쉽게 사용할 수 있다. 텍스트 편집기는 HTML의 특성을 고려한 기능을 제공하며, WYSIWYG 편집기는 브라우저와 유사한 편집 인터페이스를 제공하지만 구현의 어려움이 존재한다. HTML 편집기는 웹 표준을 준수하는 웹 페이지 제작에 기여하며, 다양한 종류의 편집기가 존재한다.
HTML 편집기는 크게 텍스트 편집기와 WYSIWYG 편집기 두 가지로 나뉜다.
HTML은 마크업 언어이며, 프로그래밍 언어와 같은 구조를 가지고 있다. HTML 편집기는 이러한 HTML의 특성을 고려하여 다음과 같은 기능을 제공한다.
2. 종류
최근에는 정적 웹페이지를 만들고 관리할 수 있는 CMS 도구나 포털 개발 소프트웨어, 블로그 작성 소프트웨어 등이 많이 사용되고 있다. 이러한 도구들은 대부분 HTML이나 CSS를 몰라도 텍스트와 이미지를 추가하거나 템플릿에 끼워 넣어 제작하는 방식이다. 페이지와 이미지 간의 연결은 도구가 자동으로 업데이트해주므로, 끊어진 링크가 발생하지 않는다는 장점이 있다. 페이지 수가 많은 사이트에서는 CMS 도구를 이용하여 콘텐츠를 업로드하는 방식이 일반적이며, 페이지 단위로 콘텐츠 편집을 완결하는 기존의 "웹 페이지 작성 소프트웨어"의 역할은 점차 변화하고 있다.
2. 1. 텍스트 편집기
HTML은 마크업 언어이고, 프로그래밍 언어와 같은 구조를 가지고 있다. 이러한 특성에 대응하는 텍스트 편집기를 특히 '''HTML 편집기'''라고 부른다.
HTML 편집기는 구문 강조 기능을 제공하며, 일부는 HTML 요소 및 구조를 빠르게 삽입할 수 있는 템플릿, 도구 모음, 키보드 단축키, 마법사, 도구 설명, 자동 완성 기능을 갖추고 있다.
일반적으로 HTML 텍스트 편집기는 버전 관리, 링크 확인, 유효성 검사, 코드 정리 및 서식 지정, 맞춤법 검사, FTP/WebDAV 업로드, 프로젝트 구조화 등의 내장 기능 또는 외부 도구와의 통합 기능을 제공한다.
텍스트 편집기를 사용하려면 HTML, CSS, JavaScript, 서버 측 스크립팅 언어 등 웹 기술에 대한 이해가 필요하다.
2. 2. WYSIWYG 편집기
WYSIWYG 편집기는 웹 브라우저에서 보이는 화면과 유사한 환경에서 웹 페이지를 편집할 수 있도록 해준다. 레이아웃 엔진을 통해 구현되며, 편집 중인 내용이 웹 브라우저에서 어떻게 보일지 예측할 수 있게 해준다.[1]
HTML과 CSS 문법을 몰라도 쉽게 사용할 수 있다는 장점이 있다. 개별 웹 페이지를 만들거나, 디렉터리 등 전체 사이트 구성을 관리하고, 만든 파일을 서버에 FTP를 통해 업로드하는 기능을 가진 소프트웨어도 있다. 또한, 사이트 관리에 필요한 이미지를 제작하고 관리하는 기능도 제공한다.[1]
2010년을 기준으로, 드림위버와 같은 대부분의 HTML 편집기는 위지위그와 텍스트 편집 모드를 동시에 제공한다. 또한 위지위그 편집기에서 흔히 발생하던 불필요한 코드 생성도 많이 줄었다.
2. 2. 1. WYSIWYG 구현의 어려움
HTML 문서는 여러 가지 이유로 다양한 컴퓨팅 플랫폼과 컴퓨터에서 일관되지 않은 모양을 갖게 된다.
:* 예를 들어 동일한 페이지가 고해상도 화면의 크롬, 사파리, 엣지, 인터넷 익스플로러 및 파이어폭스에서 약간 다르게 표시될 수 있지만, 완전히 유효한 텍스트 전용 링크스 브라우저에서는 매우 다르게 보인다. PDA, 인터넷 지원 텔레비전, 휴대 전화에서도 다르게 렌더링되어야 한다. 음성 브라우저 또는 점자 브라우저에서, 또는 기존 브라우저와 함께 작동하는 화면 판독기를 통해 사용하려면 기본 HTML의 완전히 다른 측면에 대한 요구 사항이 발생한다.[1] 작성자가 할 수 있는 일은 모양을 제안하는 것뿐이다.
:* 현재 웹 표준을 준수하지 않을 수 있다. 모든 일반적인 브라우저의 현재 버그를 중심으로 웹 페이지를 설계하려는 것은 소용없는 일이다. 각 브라우저의 새 버전이 출시될 때마다 월드 와이드 웹의 상당 부분이 새로운 버그와 새로운 수정 사항에 맞게 다시 코딩되어야 한다. 일반적으로 표준에 맞춰 설계하고 안정될 때까지 '최첨단' 기능을 피한 다음 브라우저 개발자가 페이지를 따라잡도록 기다리는 것이 좋다.[1] 예를 들어, CSS는 주요 기능에 대한 일반 브라우저에서 광범위한 지원이 제공되므로 여전히 '최첨단'이라고 주장할 수 없다.[2] 많은 WYSIWYG 및 기타 편집기가 아직 완전히 따라잡지 못했더라도 말이다.[3]
:* HTML 문서의 기본 구조에서 파생된 의미론적 의미는 검색 엔진과 다양한 접근성 도구에 중요하다. 종이에 우리는 문맥과 경험을 통해 굵은 텍스트가 제목을 나타내는지, 강조를 나타내는지, 아니면 다른 것을 나타내는지 알 수 있다. 그러나 WYSIWYG 편집기에서 이러한 구분을 전달하기는 매우 어렵다. WYSIWYG 편집기에서 텍스트의 일부를 굵게 만드는 것만으로는 독자에게 텍스트가 *왜* 굵게 표시되는지, 즉 굵은 표시가 의미론적으로 무엇을 나타내는지 설명하기에 충분하지 않다.
:* 최신 웹 사이트는 일반적으로 콘텐츠 관리 시스템 또는 데이터베이스에 저장된 콘텐츠를 사용하여 즉석에서 페이지를 구성하는 다른 템플릿 프로세서 기반 수단을 사용한다. 개별 페이지는 WYSIWYG 편집기에서 설계하고 편집할 수 있으므로 파일 시스템에 저장되지 않으므로 추상화된 템플릿 기반 레이아웃이 불가피하여 WYSIWYG 편집기를 사용하는 주요 이점 중 하나를 무효화한다.
3. 특징
HTML 편집기는 일반적으로 적어도 구문 강조 기능을 제공한다. 일부 편집기는 HTML 요소 및 구조를 빠르게 삽입할 수 있는 템플릿, 도구 모음, 키보드 단축키를 갖추고 있으며, 마법사, 도구 설명 프롬프트 및 자동 완성 기능으로 일반적인 작업을 돕는다.
4. 문제점
많은 상용 웹 저작 도구에는 다음과 같은 문제점이 지적되고 있다.
- HTML 문법대로 출력되지 않는다.
- XHTML을 지원하지 않거나, 지원이 부족하다.
- 권장되지 않는 태그 옵션이 이용된다.
- 이상의 결과로 W3C의 유효성 검사를 통과하지 못한다.
- 저작 도구 고유의 태그와 코멘트 등이 삽입되는 경우가 있다.
- CSS의 자동 생성 기능을 통해 편집을 반복하면 같은 스타일의 이중 정의가 발생하거나, 사용하지 않는 스타일이 증가한다.
- 이와 같이 여분의 태그들이 계속 발생하여 결과적으로 HTML 파일 크기가 상당히 커진다.
특히 오래된 웹 저작 도구는 위와 같은 문제가 많기 때문에, 새로운 도구로 전환하거나 HTML 편집기를 사용하여 수동으로 태그를 수정할 것을 권장한다.
5. 웹 표준 마크업
HTML은 마크업 언어이다. HTML이 월드 와이드 웹에 대한 W3C 표준을 준수하려면 HTML을 작성하는 방법에 대한 특정 규칙이 있다. 이러한 규칙을 따르면 모든 유형과 제조사의 컴퓨터, 신체 건강한 사람과 장애가 있는 사람, 제한된 대역폭과 화면 크기를 가진 무선 장치(예: 휴대폰 및 PDA)에서 웹 사이트에 접근할 수 있다. 그러나 웹상의 대부분의 HTML 문서는 W3C 표준 요구 사항을 충족하지 못한다. 2011년, Alexa 지수가 선정한 가장 인기 있는 웹 사이트 350개를 대상으로 한 연구에서 웹 사이트의 94%가 웹 표준 마크업 및 스타일 시트 유효성 검사 테스트에 실패하거나 문자 인코딩을 부적절하게 적용했다.[4] 구문적으로 정확한 문서조차 불필요한 반복 사용으로 인해 비효율적이거나, 몇 년 동안 사용 중단된 규칙을 기반으로 할 수 있다.
HTML과 함께 CSS를 사용하는 것에 대한 현재 W3C 권장 사항은 1996년에 W3C에 의해 처음 공식화되었으며[4], 그 이후로 수정 및 개선되었다.[5][6]
이러한 지침은 콘텐츠(HTML 또는 XHTML)와 스타일(CSS)의 분리를 강조한다. 이는 각 페이지, 각 HTML 요소에서 반복되지 않고 전체 사이트에 대해 한 번만 스타일 정보를 제공하는 이점이 있다.
WYSIWYG 또는 직접 작성 여부에 관계없이 웹 페이지는 가능한 많은 수의 독자와 시청자에게 성공적으로 다가가고, 웹 자체의 '전 세계적인' 가치를 유지하기 위해 무엇보다도 유효한 마크업과 코드로 구성되어야 한다.[7] HTML 및 CSS 구문이 무료 W3C 유효성 검사 서비스([http://validator.w3.org/ W3C HTML 유효성 검사기] 및 [http://jigsaw.w3.org/css-validator/ W3C CSS 유효성 검사기]) 또는 기타 신뢰할 수 있는 대안을 사용하여 성공적으로 유효성 검사될 때까지 월드 와이드 웹에 사용할 준비가 된 것으로 간주해서는 안 된다.[7]
신체적, 시각적 또는 기타 장애가 있는 사람이 웹 페이지에 접근성을 갖는 것은 현대 사회에서 웹의 보편성과 중요성을 고려할 때 좋은 아이디어일 뿐만 아니라 법적으로도 규정되어 있다. 미국에서는 미국 장애인법이, 영국에서는 장애 차별 금지법이 공공 자금 지원 조직에서 운영하는 웹 사이트에 대한 요구 사항을 정하고 있다. 다른 많은 국가에서도 유사한 법률이 이미 존재하거나 곧 시행될 것이다.[7] 페이지 접근성 확보는 유효하게 만드는 것보다 더 복잡하다. 이는 필수 조건이지만 고려해야 할 다른 많은 요소가 있다.[8]
6. 주요 저작 도구
HTML 편집기는 위지위그 (WYSIWYG) 방식을 통해 HTML과 CSS 문법을 몰라도 쉽게 웹 페이지를 제작할 수 있게 해주는 도구이다. 최근에는 어도비 드림위버처럼 위지위그와 텍스트 편집 모드를 동시에 제공하는 제품들이 많으며, 불필요한 코드 생성도 줄어들고 있다.[1]
대표적인 HTML 편집기로는 어도비 드림위버와 나모 웹에디터가 있다. 과거에는 마이크로소프트의 프론트 페이지나 넷스케이프의 컴포저 등이 사용되었으나, 현재는 업데이트가 중단되어 기술 표준에 미치지 못한다.[1]
6. 1. 오픈 소스 및 기타 도구
7. 한국의 웹 저작 도구 현황
대한민국에서는 Editplus, 엠에디터, UltraEdit과 같은 텍스트 편집기가 여전히 사용되고 있다. 이들은 위지위그(WYSIWYG) 기능이 지원되지 않아 문서 편집기로 분류된다. 과거에는 나모 웹에디터가 널리 사용되었으나, 현재는 다양한 웹 저작 도구 및 편집기가 사용되고 있다. 최근에는 웹 표준 준수 및 웹 접근성 향상을 위한 노력이 이루어지고 있다.
참조
[1]
웹사이트
An essay on W3C's design principles
http://www.w3.org/Pe[...]
W3C
2003-03-06
[2]
웹사이트
Cascading Style Sheets
http://www.w3.org/St[...]
W3C
2013-10-23
[3]
웹사이트
Cascading Style Sheets
http://www.w3.org/St[...]
W3C
2013-10-23
[4]
웹사이트
Cascading Style Sheets, level 1
http://www.w3.org/TR[...]
W3C
2013-10-23
[5]
웹사이트
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
http://www.w3.org/TR[...]
[6]
웹사이트
XHTML™ 1.1 - Module-based XHTML - Second Edition
http://www.w3.org/TR[...]
[7]
서적
Refactoring HTML
Addison Wesley
[8]
웹사이트
Web Content Accessibility Guidelines (WCAG) 2.0
http://www.w3.org/TR[...]
W3C
2013-10-23
[9]
웹사이트
Dave Raggett's Introduction to HTML
http://www.w3.org/Ma[...]
W3C
2005-05-24
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com