HTML 편집기
1. 개요
HTML 편집기는 HTML, CSS 등 웹 기술을 사용하여 웹 페이지를 만들고 수정하는 데 사용되는 소프트웨어 도구이다. HTML 편집기는 크게 텍스트 편집기와 WYSIWYG 편집기로 나뉘며, 텍스트 편집기는 코드 작성을 돕는 구문 강조 기능과 다양한 부가 기능을 제공하는 반면, WYSIWYG 편집기는 웹 브라우저와 유사한 편집 환경을 제공하여 HTML 지식이 없어도 쉽게 사용할 수 있다. 텍스트 편집기는 HTML의 특성을 고려한 기능을 제공하며, WYSIWYG 편집기는 브라우저와 유사한 편집 인터페이스를 제공하지만 구현의 어려움이 존재한다. HTML 편집기는 웹 표준을 준수하는 웹 페이지 제작에 기여하며, 다양한 종류의 편집기가 존재한다.
-
문서 편집기 -
맞춤법 검사기
맞춤법 검사기는 텍스트의 오타와 문법 오류를 검사하여 수정 제안을 제공하는 소프트웨어 도구이며, 1970년대에 처음 등장하여 기술 발전을 거쳐 현재 다양한 플랫폼에서 여러 언어를 지원한다. -
문서 편집기 -
GNU 이맥스
GNU 이맥스는 1984년 리처드 스톨먼이 개발한 자유 소프트웨어 텍스트 편집기로, C 언어와 Emacs Lisp를 사용하며, 다양한 기능과 확장성을 통해 텍스트 편집, 프로그래밍, 파일 관리 등 다양한 용도로 사용된다. -
HTML -
Alt 속성
`alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다. -
HTML -
폰트 패밀리 (HTML)
폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다. -
웹 디자인 -
웹 접근성
웹 접근성은 장애가 있는 사람들이 웹을 사용할 수 있도록 기술 및 디자인 원칙을 적용하는 것이며, 웹 콘텐츠, 저작 도구, 사용자 에이전트의 접근성 향상을 위한 지침과 법률, 인공지능 기술 활용을 통한 접근성 개선 노력이 이루어지고 있다. -
웹 디자인 -
접근성
접근성은 장애인을 포함한 모든 사람이 정보와 서비스에 차별 없이 접근하도록 보장하는 개념으로, 윤리적 책임, 사회적 형평성, 상업적 이익, 공익적 가치 때문에 중요하며, 물리적 환경, 정보 접근, 서비스 접근 등 다양한 영역에서 보조 기술과 적응 기술을 통해 구현되지만, 완전한 확보를 위해서는 지속적인 노력과 정책적 지원이 필요하다.
2. 종류
HTML 편집기는 크게 텍스트 편집기와 WYSIWYG 편집기 두 가지로 나뉜다.
최근에는 정적 웹페이지를 만들고 관리할 수 있는 CMS 도구나 포털 개발 소프트웨어, 블로그 작성 소프트웨어 등이 많이 사용되고 있다. 이러한 도구들은 대부분 HTML이나 CSS를 몰라도 텍스트와 이미지를 추가하거나 템플릿에 끼워 넣어 제작하는 방식이다. 페이지와 이미지 간의 연결은 도구가 자동으로 업데이트해주므로, 끊어진 링크가 발생하지 않는다는 장점이 있다. 페이지 수가 많은 사이트에서는 CMS 도구를 이용하여 콘텐츠를 업로드하는 방식이 일반적이며, 페이지 단위로 콘텐츠 편집을 완결하는 기존의 "웹 페이지 작성 소프트웨어"의 역할은 점차 변화하고 있다.
2.1. 텍스트 편집기
HTML은 마크업 언어이고, 프로그래밍 언어와 같은 구조를 가지고 있다. 이러한 특성에 대응하는 텍스트 편집기를 특히 HTML 편집기라고 부른다.
HTML 편집기는 구문 강조 기능을 제공하며, 일부는 HTML 요소 및 구조를 빠르게 삽입할 수 있는 템플릿, 도구 모음, 키보드 단축키, 마법사, 도구 설명, 자동 완성 기능을 갖추고 있다.
일반적으로 HTML 텍스트 편집기는 버전 관리, 링크 확인, 유효성 검사, 코드 정리 및 서식 지정, 맞춤법 검사, FTP/WebDAV 업로드, 프로젝트 구조화 등의 내장 기능 또는 외부 도구와의 통합 기능을 제공한다.
텍스트 편집기를 사용하려면 HTML, CSS, JavaScript, 서버 측 스크립팅 언어 등 웹 기술에 대한 이해가 필요하다.
2.2. WYSIWYG 편집기
WYSIWYG 편집기는 웹 브라우저에서 보이는 화면과 유사한 환경에서 웹 페이지를 편집할 수 있도록 해준다. 레이아웃 엔진을 통해 구현되며, 편집 중인 내용이 웹 브라우저에서 어떻게 보일지 예측할 수 있게 해준다.
HTML과 CSS 문법을 몰라도 쉽게 사용할 수 있다는 장점이 있다. 개별 웹 페이지를 만들거나, 디렉터리 등 전체 사이트 구성을 관리하고, 만든 파일을 서버에 FTP를 통해 업로드하는 기능을 가진 소프트웨어도 있다. 또한, 사이트 관리에 필요한 이미지를 제작하고 관리하는 기능도 제공한다.
2010년을 기준으로, 드림위버와 같은 대부분의 HTML 편집기는 위지위그와 텍스트 편집 모드를 동시에 제공한다. 또한 위지위그 편집기에서 흔히 발생하던 불필요한 코드 생성도 많이 줄었다.
--
2.2.1. WYSIWYG 구현의 어려움
HTML 문서는 여러 가지 이유로 다양한 컴퓨팅 플랫폼과 컴퓨터에서 일관되지 않은 모양을 갖게 된다.
* 다양한 브라우저와 응용 프로그램은 동일한 마크업을 다르게 렌더링한다.
:* 예를 들어 동일한 페이지가 고해상도 화면의 크롬, 사파리, 엣지, 인터넷 익스플로러 및 파이어폭스에서 약간 다르게 표시될 수 있지만, 완전히 유효한 텍스트 전용 링크스 브라우저에서는 매우 다르게 보인다. PDA, 인터넷 지원 텔레비전, 휴대 전화에서도 다르게 렌더링되어야 한다. 음성 브라우저 또는 점자 브라우저에서, 또는 기존 브라우저와 함께 작동하는 화면 판독기를 통해 사용하려면 기본 HTML의 완전히 다른 측면에 대한 요구 사항이 발생한다. 작성자가 할 수 있는 일은 모양을 제안하는 것뿐이다.
* 웹 브라우저는 모든 컴퓨터 소프트웨어와 마찬가지로 버그가 있다.
:* 현재 웹 표준을 준수하지 않을 수 있다. 모든 일반적인 브라우저의 현재 버그를 중심으로 웹 페이지를 설계하려는 것은 소용없는 일이다. 각 브라우저의 새 버전이 출시될 때마다 월드 와이드 웹의 상당 부분이 새로운 버그와 새로운 수정 사항에 맞게 다시 코딩되어야 한다. 일반적으로 표준에 맞춰 설계하고 안정될 때까지 '최첨단' 기능을 피한 다음 브라우저 개발자가 페이지를 따라잡도록 기다리는 것이 좋다. 예를 들어, CSS는 주요 기능에 대한 일반 브라우저에서 광범위한 지원이 제공되므로 여전히 '최첨단'이라고 주장할 수 없다. 많은 WYSIWYG 및 기타 편집기가 아직 완전히 따라잡지 못했더라도 말이다.
* 단일 시각 스타일은 여러 의미를 나타낼 수 있다.
:* HTML 문서의 기본 구조에서 파생된 의미론적 의미는 검색 엔진과 다양한 접근성 도구에 중요하다. 종이에 우리는 문맥과 경험을 통해 굵은 텍스트가 제목을 나타내는지, 강조를 나타내는지, 아니면 다른 것을 나타내는지 알 수 있다. 그러나 WYSIWYG 편집기에서 이러한 구분을 전달하기는 매우 어렵다. WYSIWYG 편집기에서 텍스트의 일부를 굵게 만드는 것만으로는 독자에게 텍스트가 *왜* 굵게 표시되는지, 즉 굵은 표시가 의미론적으로 무엇을 나타내는지 설명하기에 충분하지 않다.
* 최신 웹 사이트는 WYSIWYG를 유용하게 만드는 방식으로 거의 구축되지 않는다.
:* 최신 웹 사이트는 일반적으로 콘텐츠 관리 시스템 또는 데이터베이스에 저장된 콘텐츠를 사용하여 즉석에서 페이지를 구성하는 다른 템플릿 프로세서 기반 수단을 사용한다. 개별 페이지는 WYSIWYG 편집기에서 설계하고 편집할 수 있으므로 파일 시스템에 저장되지 않으므로 추상화된 템플릿 기반 레이아웃이 불가피하여 WYSIWYG 편집기를 사용하는 주요 이점 중 하나를 무효화한다.
3. 특징
HTML은 마크업 언어이며, 프로그래밍 언어와 같은 구조를 가지고 있다. HTML 편집기는 이러한 HTML의 특성을 고려하여 다음과 같은 기능을 제공한다.
* HTML 요소명이나 리터럴 문자열(쌍따옴표로 둘러싸인 고정 문자열)을 색상으로 구분하여 표시하는 구문 강조 기능
* 문법 검사 기능
* 자동 인덴트 표시 기능
HTML 편집기는 일반적으로 적어도 구문 강조 기능을 제공한다. 일부 편집기는 HTML 요소 및 구조를 빠르게 삽입할 수 있는 템플릿, 도구 모음, 키보드 단축키를 갖추고 있으며, 마법사, 도구 설명 프롬프트 및 자동 완성 기능으로 일반적인 작업을 돕는다.
4. 문제점
많은 상용 웹 저작 도구에는 다음과 같은 문제점이 지적되고 있다.
* HTML 문법대로 출력되지 않는다.
* XHTML을 지원하지 않거나, 지원이 부족하다.
* 권장되지 않는 태그 옵션이 이용된다.
* 이상의 결과로 W3C의 유효성 검사를 통과하지 못한다.
* 저작 도구 고유의 태그와 코멘트 등이 삽입되는 경우가 있다.
* CSS의 자동 생성 기능을 통해 편집을 반복하면 같은 스타일의 이중 정의가 발생하거나, 사용하지 않는 스타일이 증가한다.
* 이와 같이 여분의 태그들이 계속 발생하여 결과적으로 HTML 파일 크기가 상당히 커진다.
특히 오래된 웹 저작 도구는 위와 같은 문제가 많기 때문에, 새로운 도구로 전환하거나 HTML 편집기를 사용하여 수동으로 태그를 수정할 것을 권장한다.
5. 웹 표준 마크업
HTML은 마크업 언어이다. HTML이 월드 와이드 웹에 대한 W3C 표준을 준수하려면 HTML을 작성하는 방법에 대한 특정 규칙이 있다. 이러한 규칙을 따르면 모든 유형과 제조사의 컴퓨터, 신체 건강한 사람과 장애가 있는 사람, 제한된 대역폭과 화면 크기를 가진 무선 장치(예: 휴대폰 및 PDA)에서 웹 사이트에 접근할 수 있다. 그러나 웹상의 대부분의 HTML 문서는 W3C 표준 요구 사항을 충족하지 못한다. 2011년, Alexa 지수가 선정한 가장 인기 있는 웹 사이트 350개를 대상으로 한 연구에서 웹 사이트의 94%가 웹 표준 마크업 및 스타일 시트 유효성 검사 테스트에 실패하거나 문자 인코딩을 부적절하게 적용했다. 구문적으로 정확한 문서조차 불필요한 반복 사용으로 인해 비효율적이거나, 몇 년 동안 사용 중단된 규칙을 기반으로 할 수 있다.
HTML과 함께 CSS를 사용하는 것에 대한 현재 W3C 권장 사항은 1996년에 W3C에 의해 처음 공식화되었으며, 그 이후로 수정 및 개선되었다.
이러한 지침은 콘텐츠(HTML 또는 XHTML)와 스타일(CSS)의 분리를 강조한다. 이는 각 페이지, 각 HTML 요소에서 반복되지 않고 전체 사이트에 대해 한 번만 스타일 정보를 제공하는 이점이 있다.
WYSIWYG 또는 직접 작성 여부에 관계없이 웹 페이지는 가능한 많은 수의 독자와 시청자에게 성공적으로 다가가고, 웹 자체의 '전 세계적인' 가치를 유지하기 위해 무엇보다도 유효한 마크업과 코드로 구성되어야 한다. HTML 및 CSS 구문이 무료 W3C 유효성 검사 서비스([http://validator.w3.org/ W3C HTML 유효성 검사기] 및 [http://jigsaw.w3.org/css-validator/ W3C CSS 유효성 검사기]) 또는 기타 신뢰할 수 있는 대안을 사용하여 성공적으로 유효성 검사될 때까지 월드 와이드 웹에 사용할 준비가 된 것으로 간주해서는 안 된다.
신체적, 시각적 또는 기타 장애가 있는 사람이 웹 페이지에 접근성을 갖는 것은 현대 사회에서 웹의 보편성과 중요성을 고려할 때 좋은 아이디어일 뿐만 아니라 법적으로도 규정되어 있다. 미국에서는 미국 장애인법이, 영국에서는 장애 차별 금지법이 공공 자금 지원 조직에서 운영하는 웹 사이트에 대한 요구 사항을 정하고 있다. 다른 많은 국가에서도 유사한 법률이 이미 존재하거나 곧 시행될 것이다. 페이지 접근성 확보는 유효하게 만드는 것보다 더 복잡하다. 이는 필수 조건이지만 고려해야 할 다른 많은 요소가 있다.
6. 주요 저작 도구
HTML 편집기는 위지위그 (WYSIWYG) 방식을 통해 HTML과 CSS 문법을 몰라도 쉽게 웹 페이지를 제작할 수 있게 해주는 도구이다. 최근에는 어도비 드림위버처럼 위지위그와 텍스트 편집 모드를 동시에 제공하는 제품들이 많으며, 불필요한 코드 생성도 줄어들고 있다.
대표적인 HTML 편집기로는 어도비 드림위버와 나모 웹에디터가 있다. 과거에는 마이크로소프트의 프론트 페이지나 넷스케이프의 컴포저 등이 사용되었으나, 현재는 업데이트가 중단되어 기술 표준에 미치지 못한다.