웹사이트를 만들고 싶은데 어디서부터 시작해야 할지 막막하신가요? 이 글이 도움이 될 것입니다. 웹사이트를 처음부터 직접 만드는 일은 결코 간단하지 않습니다. 아이디어가 필요하고, 디자인이 필요하고, 사이트를 구축할 도구도 필요합니다. 게다가 실제 작업에 들어가기 전에는 웹의 언어인 HTML을 어느 정도 익혀야 한다고들 하죠.
하지만 꼭 그럴 필요는 없습니다. HTML, XHTML, CSS 등 관련 언어를 완벽히 마스터하지 않아도 충분히 쓸만한 웹사이트를 만들 수 있습니다. 물론 이 중 하나라도 능숙하게 다룰 수 있다면 분명 큰 도움이 되지만, 열정만 있다면 누구든 바로 시작할 수 있습니다.
목표: 코딩 없이 웹사이트 만들기
이를 위해 많은 사람들이 HTML 에디터를 활용합니다. HTML 에디터는 입력한 텍스트에 자동으로 관련 코드를 적용해 주는 웹 제작 프로그램으로, 사용자가 기술적인 세부 사항에 얽매이지 않고 콘텐츠 자체에 집중할 수 있도록 도와줍니다.
이번 글에서는 웹사이트 제작에 활용할 수 있는 HTML 에디터 두 가지를 소개합니다. 두 프로그램 모두 WYSIWYG(What You See Is What You Get, '보는 대로 얻는다') 방식으로, 복잡한 컴파일이나 변환 과정 없이 최종 결과물을 실시간으로 바로 확인할 수 있습니다. 주인공은 바로 KompoZer와 Bluefish입니다.
Bluefish: 개발자를 위한 강력한 멀티 언어 에디터
Bluefish는 주로 프로그래머와 웹 개발자를 위해 만들어진 강력한 멀티 언어 에디터입니다. 다양한 프로그래밍 언어와 마크업 언어를 지원하며, 특히 동적이고 인터랙티브한 웹사이트 제작에 강점을 보입니다. Linux와 Mac 환경에서 사용할 수 있습니다.
Bluefish는 놀랄 만큼 방대한 옵션을 갖춘 에디터입니다. 웹 개발이 처음이라면 수많은 메뉴와 카테고리에 잠시 압도될 수도 있습니다. 그럼에도 화면이 다소 복잡해 보일 뿐, 의외로 사용 난이도는 높지 않습니다.
문서 작성 시 코드만으로 작업할 수도 있고, 내장된 마법사(wizard) 기능을 활용할 수도 있습니다. HTML 지식이 부족한 초보자라면 처음에는 마법사 기능을 사용하는 것이 좋습니다. 라디오 버튼을 만드는 과정을 예로 들어 보겠습니다.
원하는 설정을 마치면 버튼이 자동으로 생성됩니다. 무엇보다 좋은 점은, Bluefish가 해당 요소를 만드는 데 사용된 코드를 그대로 보여준다는 것입니다. 덕분에 방금 수행한 작업을 코드를 통해 자연스럽게 익힐 수 있습니다.
작업 중 언제든지 만들고 있는 페이지를 미리 볼 수도 있습니다. 메뉴의 External 카테고리에서는 여러 브라우저로 생성된 문서를 확인할 수 있으며, 다른 브라우저를 추가하는 것도 가능합니다. 특히 복잡한 CSS 스타일을 사용할 때는 브라우저 엔진마다 페이지를 조금씩 다르게 렌더링하는 경향이 있어, 출력 결과를 비교해 볼 때 이 기능이 매우 유용합니다.
Opera에서 우리가 만든 라디오 버튼이 어떻게 표시되는지 살펴보겠습니다.
Bluefish는 강력한 기능을 자랑합니다. C, CSS, HTML, Java, JavaScript, Perl, PHP, Python, Ruby, XML, 심지어 Matlab까지 폭넓은 마크업 및 프로그래밍 언어를 지원합니다. lint나 tidy 같은 외부 플러그인도 사용할 수 있으며, HTML·XML 문서의 태그 자동 완성과 무제한 실행 취소/다시 실행 기능도 제공합니다.
중급자와 고급 사용자에게 Bluefish를 적극 추천합니다. 입문자에게는 처음에 다소 부담스러울 수 있지만, 프로그램을 효과적으로 사용하는 데 수많은 기능을 모두 알 필요는 없습니다. 참고로 Bluefish에는 LaTeX 편집기인 Winefish라는 자매 프로젝트도 있습니다.
KompoZer: 초보자를 위한 친절한 웹 제작 도구
KompoZer는 단순하고 친근한 웹 제작 프로그램으로, HTML이나 웹 코딩 경험이 거의 없거나 전혀 없는 사용자를 위해 설계되었습니다. Bluefish보다 기능은 적지만, 그만큼 뛰어난 사용 편의성으로 보완합니다. Windows, Linux, Mac을 모두 지원합니다.
KompoZer는 Linspire 배포판이 시작하고 후원했던 Nvu 프로젝트(현재는 개발 중단)의 후속작입니다. KompoZer는 버그 수정과 새로운 요소들이 반영되었으며, 특히 Nvu에 비해 훨씬 깔끔한 마크업을 생성합니다.
KompoZer는 Mozilla 계열 브라우저를 구동하는 Gecko 엔진을 기반으로 합니다. 자체 렌더링 엔진을 내장하고 있어, 외부 브라우저를 실행하지 않고도 KompoZer 안에서 HTML 문서를 바로 미리 볼 수 있다는 것이 큰 장점입니다.
그 밖에도 사이트 관리자, CSS 편집기, HTML 검증기, 맞춤법 검사기 기능을 갖추고 있으며, Firefox처럼 확장 기능(익스텐션) 설치도 지원합니다. 새로운 테마나 Tidy 같은 유틸리티를 더해 에디터의 생산성과 외관을 자유롭게 향상시킬 수 있습니다.
특히 CSS 편집기는 텍스트 편집기로 직접 스타일을 작성하고 싶지 않은 사용자에게 매우 유용합니다. CSS는 스타일과 내용을 분리하여 모듈화되고 깔끔한 웹 콘텐츠를 만드는 권장 방식이므로, 이 기능을 잘 활용하면 체계적인 웹사이트를 구축할 수 있습니다.
KompoZer는 특히 HTML이나 CSS 지식이 부족한 초보자에게 현명한 선택입니다. Windows 사용자를 위한 포터블 버전도 제공되니, 설치 없이 간편하게 사용해 볼 수도 있습니다.
결론: 나에게 맞는 에디터는?
웹사이트 제작에 관심이 있다면 Bluefish와 KompoZer만으로도 충분히 시작할 수 있고, 그 이상의 성과도 거둘 수 있습니다. 동적 웹사이트를 지향하는 숙련된 사용자라면 Bluefish가 더 적합하고, 초보자이거나 옵션이 적은 단순한 인터페이스를 선호한다면 KompoZer를 선택하는 것이 좋습니다.
다행히 두 프로그램 모두 고급 기능 사용을 강요하지 않습니다. 원치 않으면 그대로 두었다가, HTML에 자신감이 생기면 그때 하나씩 활용하면 됩니다. 이는 자신에게 꼭 맞는 유연한 학습 곡선을 약속합니다.
어떤 것을 선택하든 두 프로그램은 모두 무료이면서 가볍고, 멋진 웹사이트를 빠르고 쉽게 만들도록 도와줄 것입니다. 무엇보다 상황에 따라 둘을 함께 사용할 수도 있습니다. 앞으로 더 많은 HTML 에디터를 소개하고, 생산성 향상 팁과 함께 tidy, lint 같은 HTML 보조 도구 리뷰도 이어갈 예정입니다.
즐거운 웹 제작 되시길 바랍니다!