HTML+CSS 기초 강의 - 2. HTML뷰어, 웹에디터, 웹브라우저
엑셀 문서(XLS 포맷)는 엑셀 프로그램에서 열면 그 내용을 볼 수 있고, 또 수정할 수 도 있습니다.
즉, 엑셀 프로그램은 XLS 문서를 보는 뷰어이기도 하고 편집기이기도 합니다.
반면, 엑셀 뷰어 프로그램은 보기 전용이기 때문에 엑셀 문서를 볼 수만 있고 수정할 수는 없습니다.
웹브라우저는 엑셀 뷰어 프로그램 같은 것입니다. HTML 문서를 읽어서 태그를 해석하고 CSS를 적용해 문서를 예쁘게 화면상에 보여주지만 거기까지가 웹브라우저의 역할이고, HTML 문서를 만들고 수정할 수 있는 에디터의 기능을 하는 편집기는 별도의 프로그램을 사용해야 합니다.
구글 크롬, 애플 사파리, 모질라 파이어폭스 같은 웹브라우저는 모두 HTML 뷰어입니다.
웹브라우저는 내 컴퓨터에 있는 HTML 문서를 열어서 볼 수도 있지만 인터넷에 공개된 웹사이트의 HTML 문서를 URL을 통해 접근해서 보는 전용 뷰어 프로그램입니다.
HTML 문서를 편집하기 쉽도록 특화된 편집 프로그램을 웹편집기, 또는 웹에디터라고 합니다.
웹에디터는 웹페이지 상에서 바로 실행하는 온라인 웹에디터도 있고, 내 컴퓨터에 설치해 독립 프로그램으로 실행하는 프로그램 형태인 것도 있습니다.
내 컴퓨터에서 프로그램으로 실행하는 웹에디터 프로그램도 2가지로 구분됩니다.
디자인 중심의 GUI 툴을 사용해 위지윅(WYSIWYG) 방식으로 페이지를 만드는 프로그램과 텍스트 에디터 기반으로 HTML 페이지를 직접 작성해나가는 방식이 있습니다.
과거에는 지금처럼 웹 관련 기술이 복잡하지도 않았고, HTML 태그를 직접 코딩하는 것이 일반적이지 않았기 때문에 GUI 중심의 웹에디터 프로그램을 주로 사용했습니다.
또 웹페이지 제작의 주체가 디자이너인 경우가 많았기 때문에 어도비 드림위버나 나모 웹에디터 같은 GUI 중심의 웹에디터 프로그램들을 주로 사용했습니다.
웹 관련 기술들이 많이 복잡해지고 CSS나 자바스크립트를 함께 사용해야만 하는 환경이 일반화되면서 디자인 중심의 웹에디터로는 더이상 동적인 웹페이지 제작이 어렵게 되었습니다.
웹페이지 제작 환경이 변하면서 텍스트 중심의 코딩형 웹에디터를 사용하는 것이 좀더 일반화 되고 웹페이지 제작의 중심이 되게 됩니다.
초보자들이나 HTML이나 CSS 코딩이 익숙하지 않은 디자이너들은 GUI기반의 웹에디터 프로그램을 선호하지만, 이런 GUI 기반 웹에디터 툴들이 더이상 버전업이 되지 않고 있고 시장에서 서서히 퇴출되고 있기 때문에 우리는 텍스트 기반의 코딩형 웹에디터를 이용해 HTML 문서를 만드는 것에 익숙해져야 합니다.
어도비 드림위버(https://www.adobe.com/kr/products/dreamweaver.html), 구글 웹디자이너(https://www.google.com/webdesigner/), 커피컵HTML에디터(https://www.coffeecup.com/html-editor/), 마이크로소프트 익스프레션웹4(https://www.microsoft.com/en-us/download/details.aspx?id=36179) 같은 프로그램들이 내 컴퓨터에 설치해서 사용하는 GUI 웹에디터 프로그램의 대표적인 예입니다.
구지 꼭 GUI형 웹에디터를 사용해보고 싶다면 무료로 사용할 수 있는 프로그램으로 마이크로소프트 익스프레션웹4를 추천합니다.
추천한다고 했지만 실상은 그나마 무료로 쓸 수 있는 유일한 GUI 웹에디터 프로그램입니다.
마이크로소프트가 만들었으니 기능적인 완성도나 한글 지원은 괜찮지만, 2012년 버전 4 이후 더이상의 업그레이드 없이 단종되었기 때문에 HTML5와 CSS3 최근 표준이나 기능들에 대한 지원은 상당히 미흡한 편입니다.
온라인 웹에디터는 블로그에 글을 쓰거나, 게시판에 글을 쓰거나, 방명록에 글을 남기거나 할 때 글을 쓰는 입력기도 웹에디터의 일종입니다. 웹에디터의 용도나 기능에 따라 사용할 수 있는 태그나 기능에는 차이가 있지만 이런 입력기들 대부분은 간단한 웹에디터의 기능 정도는 제공을 합니다.
최근에는 전문적인 코딩 환경(IDE - Intergrated Develop Environment)을 온라인으로 제공하는 서비스가 많이 생겨나서 이런 서비스를 이용하면 온라인으로 HTML, CSS, Javascript 파일을 작성해서 실행/미리보기까지 해볼 수 있습니다.
대표적인 서비스로
코드펜(Codepen)과 JS피들(Jsfiddle) 을 들 수 있습니다. 국내에서도 이 서비스를 이용하는 이용자가 적지 않습니다.
https://codepen.io
https://jsfiddle.net
개인적으로는 코드펜을 주로 이용하지만 다른 서비스들도 HTML/CSS 코딩 환경은 훌륭하기 때문에 어떤걸 이용해도 괜찮습니다.
태그에 익숙하지 않거나 HTML 문서 구조를 일일이 작성하는게 어렵다면 GUI형 웹데이터 프로그램이 다소 도움이 될 수 있습니다.
그러나, 앞에서 언급했듯이 HTML 태그에 일단 익숙해지고 직접 태그나 속성을 텍스트로 입력할 수 있게되면 GUI형 웹에디터 프로그램을 이용하는 것보다 코딩형 웹에디터나 클라우드형 코딩 서비스를 사용하는 것이 더 빠르게 최신 기술을 사용하는 웹페이지나 웹사이트를 제작할 수 있습니다.
이 강의에서 배우고자 하는 것도 이런 최신 기술을 사용하는 웹페이지, 또는 웹사이트를 제작하는 것을 목표로 하고 있기 때문에 이런 코딩형 웹에디터의 사용에 빨리 익숙해질 것을 추천합니다.