본문으로 이동

HTML 편집기

위키백과, 우리 모두의 백과사전.
(웹 디자인 프로그램에서 넘어옴)

HTML 편집기(영어: HTML editor)는 웹 페이지의 마크업인 HTML을 편집하기 위해 사용하는 프로그램이다. 웹 페이지의 HTML 마크업은 어떤 문서 편집기로도 제어할 수 있지만, 전문화된 HTML 편집기는 편의성, 추가 기능 및 조직화 기능을 제공할 수 있다. 예를 들어, 많은 HTML 편집기는 HTML뿐만 아니라 CSS, 자바스크립트 또는 ECMA스크립트와 같은 관련 기술도 처리한다. 어떤 경우에는 FTP 및 WebDAV를 통한 원격 웹 서버와의 통신, Subversion 또는 Git과 같은 버전 관리 시스템도 관리한다. 마이크로소프트 워드나 QuarkXPress와 같이 웹 디자인 전용이 아닌 많은 워드 프로세서, 그래픽 디자인 및 페이지 레이아웃 프로그램도 HTML 문서를 편집하고 내보내는 기능을 갖추고 있다.[1]

문서 편집기

[편집]

HTML 용도로 제작된 문서 편집기는 대개 최소한 구문 강조 기능을 제공한다. 일부 편집기는 일반적인 HTML 요소와 구조를 빠르게 삽입할 수 있도록 템플릿, 도구 모음, 단축키 기능을 추가로 제공한다. 마법사, 말풍선 프롬프트 및 자동 완성 기능이 일반적인 작업을 도와줄 수 있다.

HTML에 흔히 사용되는 문서 편집기에는 일반적으로 버전 관리, 링크 검사 및 유효성 검사, 코드 정리 및 서식 지정, 맞춤법 검사, FTP 또는 WebDAV를 통한 업로드, 프로젝트 구조화와 같은 작업을 위한 내장 기능이나 외부 도구와의 통합 기능이 포함된다. 링크 검사나 유효성 검사와 같은 일부 기능은 온라인 도구를 사용할 수 있으며, 이때 네트워크 연결이 필요하다.

문서 편집기를 사용하려면 사용자가 HTML 및 CSS, 자바스크립트, 서버 사이드 스크립트 언어 등 디자이너가 사용하려는 다른 웹 기술에 대해 이해하고 있어야 한다.

이러한 요구 사항을 완화하기 위해 일부 편집기는 단순한 색상 강조보다 더 시각적으로 조직된 모드에서 마크업을 편집할 수 있게 해주지만, 이는 WYSIWYG로 간주되는 모드는 아니다. 이러한 편집기에는 일반적으로 선택한 객체의 텍스트 기반 매개변수를 편집하기 위해 팔레트 창이나 대화 상자를 사용하는 옵션이 포함되어 있다. 이러한 팔레트를 사용하면 개별 필드에서 매개변수를 편집하거나 화면상의 양식을 채워 새 태그를 삽입할 수 있으며, 매개변수 편집 시 옵션을 제시하고 선택할 수 있는 추가적인 위젯(이미지나 텍스트 스타일 미리보기 등)이나 HTML 객체 및 속성을 확장하고 축소할 수 있는 아웃라인 편집기가 포함될 수 있다.

WYSIWYG HTML 편집기

[편집]
어마야 10 HTML 편집기

WYSIWYG HTML 편집기는 웹 브라우저에서 페이지가 표시되는 방식과 유사한 편집 인터페이스를 제공한다. WYSIWYG 편집기를 사용하는 데 HTML 지식이 필요하지 않을 수 있으므로, 경험이 부족한 컴퓨터 사용자가 시작하기에 더 쉬운 경우가 많다.

WYSIWYG 뷰는 브라우저 엔진을 내장함으로써 구현된다. 이는 직접 작성되거나 웹 브라우저에서 사용되는 엔진을 기반으로 할 수 있다. 목표는 편집하는 동안 항상 렌더링된 결과가 나중에 일반적인 웹 브라우저에서 보게 될 모습을 나타내도록 하는 것이다.[2]

WYSIWYM(What You See Is What You Mean)은 WYSIWYG 편집기의 대안적인 패러다임이다. 문서의 서식이나 표현에 집중하는 대신, 각 요소의 의도된 의미를 보존한다. 예를 들어, 페이지 헤더, 섹션, 단락 등은 편집 프로그램에서 그렇게 레이블이 지정되고 브라우저에서 적절하게 표시된다.

WYSIWYG 구현의 어려움

[편집]

특정 HTML 문서는 여러 가지 이유로 다양한 컴퓨팅 플랫폼과 컴퓨터에서 일관되지 않은 모습을 보일 수 있다.

서로 다른 브라우저와 애플리케이션은 동일한 마크업을 다르게 렌더링한다.
동일한 페이지라도 고해상도 화면의 크롬, 사파리, 엣지, 인터넷 익스플로러, 파이어폭스에서 약간씩 다르게 표시될 수 있으며, 텍스트 전용인 링크스 브라우저에서는 매우 다르게 보일 것이다. PDA, 인터넷 지원 텔레비전, 휴대 전화에서도 다시 다르게 렌더링되어야 한다. 음성 또는 점자 브라우저에서의 사용성, 또는 일반 브라우저와 함께 작동하는 스크린 리더를 통한 사용성은 기본 HTML의 완전히 다른 측면을 요구하게 된다. 저자가 할 수 있는 일은 외관을 제안하는 것뿐이다.
모든 컴퓨터 소프트웨어와 마찬가지로 웹 브라우저에도 버그가 있다.
브라우저가 현재의 웹 표준을 준수하지 않을 수도 있다. 모든 일반적인 브라우저의 현재 버그에 맞춰 웹 페이지를 설계하려는 시도는 무모한 짓이다. 각 브라우저의 새 버전이 나올 때마다 새로운 버그와 수정 사항에 맞추기 위해 월드 와이드 웹의 상당 부분을 다시 코딩해야 하기 때문이다. 반대의 경우보다는 표준에 맞춰 설계하고, '최첨단' 기능이 안정될 때까지 거리를 두었다가 브라우저 개발자가 페이지를 따라잡기를 기다리는 것이 일반적으로 훨씬 현명하다고 여겨진다.[3] 예를 들어, 이제 모든 주요 기능에 대해 일반적인 브라우저에서 광범위한 지원이 제공되므로 CSS가 여전히 '최첨단'이라고 주장할 수는 없지만,[4] 많은 WYSIWYG 및 기타 편집기는 아직 이를 완전히 따라잡지 못했을 수 있다.[5]
하나의 시각적 스타일이 여러 의미론적 의미를 나타낼 수 있다.
HTML 문서의 기본 구조에서 파생된 의미론적(Semantic) 의미는 검색 엔진과 다양한 접근성 도구에 중요하다. 종이 위에서는 문맥과 경험을 통해 굵은 텍스트가 제목인지, 강조인지, 아니면 다른 것인지 알 수 있다. 그러나 WYSIWYG 편집기에서 이 차이를 전달하는 것은 매우 어렵다. WYSIWYG 편집기에서 단순히 텍스트의 일부를 굵게 만드는 것만으로는 독자에게 텍스트가 *왜* 굵은지, 즉 굵음이 의미론적으로 무엇을 나타내는지 알려주기에 충분하지 않다.
현대적인 웹사이트는 WYSIWYG가 유용한 방식으로 구성되는 경우가 드물다.
현대적인 웹사이트는 일반적으로 저작물 관리 시스템이나 기타 템플릿 프로세서 기반의 수단을 사용하여 데이터베이스에 저장된 콘텐츠를 실시간으로 구축한다. 개별 페이지는 WYSIWYG 편집기에서 설계하고 편집할 수 있는 방식처럼 파일 시스템에 저장되지 않으므로, 어떤 형태의 추상화된 템플릿 기반 레이아웃이 불가피하며, 이는 WYSIWYG 편집기 사용의 주요 장점 중 하나를 무효화한다.

유효한 HTML 마크업

[편집]

HTML은 구조화된 마크업 언어이다. W3C의 월드 와이드 웹 표준을 준수하려면 HTML을 작성하는 방식에 특정한 규칙이 있다. 이러한 규칙을 따르면 신체 건강한 사람과 장애인 모두, 그리고 대역폭과 화면 크기가 제한된 휴대 전화 및 PDA와 같은 무선 통신 기기를 포함한 모든 유형과 기종의 컴퓨터에서 웹 사이트에 접근할 수 있다. 그러나 웹상의 대부분의 HTML 문서는 W3C 표준의 요구 사항을 충족하지 않는다. 2011년 알렉사 지표에 의해 선정된 가장 인기 있는 웹사이트 350개를 대상으로 실시한 연구에 따르면, 웹사이트의 94%가 웹 표준 마크업 및 스타일 시트 유효성 검사 테스트를 통과하지 못하거나 문자 인코딩을 부적절하게 적용하고 있다. 구문적으로 올바른 문서조차도 불필요한 반복 사용으로 인해 비효율적이거나, 몇 년 동안 더 이상 권장되지 않는 규칙을 기반으로 할 수 있다. HTML과 함께 CSS를 사용하는 것에 대한 현재의 W3C 권장 사항은 1996년에 W3C에 의해 처음 공식화되었으며[6] 그 이후로 계속 수정되고 개선되어 왔다.[7][8]

이러한 지침은 콘텐츠(HTML 또는 XHTML)와 스타일(CSS)의 분리를 강조한다. 이는 각 페이지나 HTML 요소에서 반복하지 않고 전체 사이트에 대해 스타일 정보를 한 번만 전달할 수 있다는 장점이 있다. 이는 사용자에게 기본 현실을 노출하지 않으면서 이러한 개념을 가장 잘 제시하는 방법을 고민해 온 WYSIWYG 편집기 디자이너들에게 도전 과제가 되고 있다.

유효한 마크업은 페이지가 직접 작성되었든 WYSIWYG 편집기를 통해 생성되었든 상관없이 접근성과 일관성을 증진한다. 웹 표준을 준수하면 다양한 브라우저와 장치에서 콘텐츠가 올바르게 렌더링되도록 보장하는 데 도움이 된다. W3C HTML Validator 및 W3C CSS Validator와 같은 유효성 검사 도구를 사용하면 작성자가 게시 전에 구문을 확인하고 기술적 정확성을 확인할 수 있다.[9]

신체적, 시각적 또는 기타 장애가 있는 사람들의 웹 페이지 접근성은 현대 사회에서 웹의 편재성과 중요성을 고려할 때 좋은 아이디어일 뿐만 아니라 법으로도 의무화되어 있다. 미국의 경우 장애인법(Americans with Disabilities Act), 영국의 경우 장애인 차별 금지법(Disability Discrimination Act)이 공적 자금 지원을 받는 조직이 운영하는 웹 사이트에 요구 사항을 부과하고 있다. 다른 많은 국가에서도 유사한 법률이 이미 존재하거나 곧 제정될 예정이다.[9] 페이지를 접근 가능하게 만드는 것은 단순히 유효하게 만드는 것보다 더 복잡하다. 그것은 전제 조건이지만 고려해야 할 다른 많은 요소가 있다.[10] WYSIWYG 도구를 사용하든 사용하지 않든, 좋은 웹 디자인은 이러한 요소들도 고려해야 한다.

웹 페이지를 설계, 생성 및 유지 관리하는 데 어떤 소프트웨어 도구를 사용하든 기본 HTML의 품질은 페이지에서 작업하는 사람의 기술에 달려 있다. HTML, CSS 및 기타 스크립트 언어에 대한 지식과 이러한 분야의 현재 W3C 권장 사항에 대한 익숙함은 WYSIWYG HTML 편집기를 사용하든 사용하지 않든 디자이너가 더 나은 웹 페이지를 제작하는 데 도움이 될 것이다.[11]

같이 보기

[편집]

각주

[편집]
  1. ↑ “How to create and edit an HTML document with Microsoft Word 2002”. 《Microsoft Support》. 2025년 10월 27일에 확인함.
  2. ↑ “Rendering Engines Used By Different Web Browsers”. 《GeeksforGeeks》. 2023년 12월 7일. 2025년 10월 27일에 확인함.
  3. ↑ Bos, Bert (2003년 3월 6일). “An essay on W3C's design principles”. W3C. 2013년 10월 23일에 확인함.
  4. ↑ “Cascading Style Sheets”. W3C. 2013년 10월 23일에 확인함.
  5. ↑ “Cascading Style Sheets”. W3C. 2013년 10월 23일에 확인함.
  6. ↑ Håkon Wium Lie; Bert Bos. “Cascading Style Sheets, level 1”. W3C. 2013년 10월 23일에 확인함.
  7. ↑ “Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification”. 《W3C》.
  8. ↑ “XHTML™ 1.1 - Module-based XHTML - Second Edition”. 《W3C》.
  9. 1 2 Harold, Elliotte Rusty (2008). 《Refactoring HTML》. Boston: Addison Wesley. ISBN 978-0-321-50363-3.
  10. ↑ “Web Content Accessibility Guidelines (WCAG) 2.0”. W3C. 2008. 2013년 10월 23일에 확인함.
  11. ↑ “Dave Raggett's Introduction to HTML”. W3C. 2005년 5월 24일. 2013년 10월 23일에 확인함.
원본 주소 "https://ko.wikipedia.org/w/index.php?title=HTML_편집기&oldid=41408293"