본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

웹 제작 준비하기

최초 작성일
최종 수정일
이번 시간에는...
웹 제작을 위해 필요한 프로그램들을 살펴봅니다. 웹 브라우저로써 인터넷 익스플로러, 파이어폭스, 크롬, 사파리, 오페라 등을 살펴 보며, 드림위버나 서브라임 텍스트 같은 텍스트 에디터들과 마지막으로 이미지 에디터인 포토샵과 김프를 간단히 살펴봅니다.

이제 본격적으로 시작을 위해서 강의에 필요한 프로그램들을 준비해 보도록 하겠습니다. 일단 홈페이지 제작을 위해 필요한 도구들은 다음과 같습니다.

  • 웹 페이지를 확인해볼 웹 브라우저
  • 본격적으로 페이지를 작성할 만한 텍스트 에디터
  • 웹 페이지에 넣을 이미지를 제작할만한 이미지 에디터

일단 강의를 진행하는데 필요한 프로그램은 이 세 가지입니다. 물론 실제 홈페이지를 웹에 게시하기 위해서는 서버가 필요한데요, 도메인과 호스팅에 관해서는 검색을 통해서 알아보시기 바라며 추후 블로그를 통해서 다루도록 하겠습니다. 일단 공부하시는 데에는 굳이 웹에 게시하실 필요 없이 여러분의 컴퓨터에서 확인하시면 됩니다.

웹 브라우저

가장 먼저 웹 브라우저를 살펴보고 설치 하도록 하겠습니다.

여기 오신분들 중에는, 웹 브라우저에는 '인터넷 익스플로러(Internet Explore)'만 있는 것으로 알고 계신 분도 있으실 겁니다. 하지만, 웹 브라우저는 여러 종류가 있습니다. 게다가 그 '인터넷 익스플로러'에서도 버전이 여러 개가 있습니다. 여러분들은 웹을 제작하면서 이러한 여러 종류의 브라우저들을 고려해야 합니다. 그렇기 때문에 앞으로 소개 드리는 웹 브라우저 중 몇 가지는 꼭 설치하시기 바랍니다.

인터넷 익스플로러 (Internet Explore)

일단 여러분의 PC가 윈도우라면 기본으로 설치되어있을 '인터넷 익스플로러'부터 살펴보겠습니다.

인터넷 익스플로러는 윈도우(Windows)를 개발한 마이크로소프트 사에서 개발한 웹 브라우저 입니다. 줄여서 'IE'라고도 많이 부르며 앞으로 강의에서도 IE로 통칭하도록 하겠습니다.

여러 브라우저가 존재하듯 많은 운영체제(OS)도 여러 종류가 있습니다. 일단 국내에서 대부분의 사용자가 사용하는 윈도우가 있고요, 매킨토시의 맥을 사용하신다면 OSX 운영체제를 사용할 것 입니다. 이 외에도 리눅스 기반 운영체제들이 있고, 스마트폰으로 쓰는 안드로이드도 역시 운영체제의 한 종류입니다. 이렇게 갑자기 운영체제에 대해 말씀 드리는 이유는 운영체제간 프로그램이 따로 개발이 되지 않는 이상, 서로 호환이 안 된다는 점을 먼저 말씀 드리기 위함입니다. 예를 들어서 IE를 안드로이드에서는 설치할 수 없고, 안드로이드 어플 전부를 윈도우나 맥에서 사용할 수 없는 것입니다.

IE는 윈도우에서만 사용 가능한 프로그램입니다. 맥이나 리눅스 사용자는 사용할 수 없는 브라우저입니다. 대부분의 모바일 안드로이드, iOS에서도 마찬가지고요. 이렇게 윈도우를 사용하지 않는 사용자들을 위해서라도, 여러분께서는 홈페이지를 제작할 때에 IE만을 확인하시면 안됩니다. 그리고 IE에는 몇 가지 버전이 존재하는데요, 문제는 버전마다 화면을 보여주는 방식이 좀 상이할 때가 있다는 것입니다. 그래서 웹 페이지를 제작하다 보면, 다른 브라우저들을 맞추는 어렵지 않은데 IE의 최신버전과 예전버전을 맞추는게 더 어려운 경우가 많습니다. 아마도 여러분이 앞으로 웹을 제작하다 보면 IE가 굉장히 싫어질지 모릅니다. (전 싫습니다.)

일단 여러분 각자의 IE버전을 확인해 보도록 하겠습니다.

  1. 일단 IE를 실행시킵니다.
  2. alt키를 눌러서 메뉴를 활성화 시킵니다.
  3. 메뉴 중에서 도움말 > 'Internet Explorer 정보'를 클릭합니다.

IE는 2014년 5월 현재 11버전이 가장 최신 브라우저입니다. 본인이 사용하는 윈도우 종류에 따라 최종 업데이트할 수 있는 IE버전이 있는데요, 아래를 확인하시고 최신버전으로 업데이트를 하시기 바랍니다.

  • Windows XP 사용자는 IE8 버전까지 업데이트 가능합니다. (Windows XP는 마이크로소프트사의 지원이 종료되었기 때문에 윈도우 업그레이드를 추천합니다.)
  • Windows Vista 사용자는 IE9 버전까지 업데이트 가능합니다.
  • Windows 7, 8 사용자는 현재 가장 최신버전인 IE11까지 업데이트 가능합니다.

IE는 최대한 버전 별로 확인을 하는 것이 좋기 때문에 다른 PC를 통해서라도 여러 버전을 확인하시기를 권장합니다.

일단 최신버전으로 업데이트를 마쳤다면 그 아래버전에 대한 테스트는 어떻게 해야 할까요? IE 자체에 하위 랜더링 하는 모드가 있기 때문에 어느 정도는 확인이 가능합니다. 하지만 IE가 버전이 높아지면서 점점 하위 모드가 실제 하위 브라우저와 보여지는 것이 다르게 나타나기도 합니다. 이러한 문제에 대한 대안에 대해 살펴보겠습니다.

버추얼박스를 통한 IE하위버전 확인

여러분의 컴퓨터에 하위 윈도우 운영체제를 가상으로 설치해서 여러 IE 버전을 다 설치하는 방법입니다. 여러 가상 이미지 파일을 다운로드는 morder.IE에서 무료로 받으실 수 있습니다. 많은 용량을 차지하고 굉장히 무거운 방법이지만, 가장 확실한 방법이긴 합니다.

하지만, 방금 말씀 드렸듯이 많은 용량을 차지하고, 느리고 무거운 방법입니다. 여러분이 개인적인 사이트를 만드실 거라면 이 정도까지는 안 하셔도 됩니다.

IE Tester

IE를 비교적 간단하게 확인 할 수 있는 프로그램입니다. 게다가 무료입니다. (개발자 도구 프로그램은 유료입니다.) IE5.5부터 여러분에게 설치된 버전까지 확인 가능합니다. 몇 가지 버그가 없는 것은 아니지만, 거의 완벽하게 예전 브라우저를 구현합니다. 이 프로그램으로만 확인하셔도 거의 큰 무리가 없습니다.

my-debugbar.com에서 다운로드 가능합니다.

그 외에도 온라인상으로 테스트를 해주는 서비스가 있습니다만, 대부분 유료입니다.

크롬 (Chrome)

이제 IE 이외의 브라우저들을 살펴보겠습니다.

'크롬'은 구글에서 만든 웹 브라우저로써 이미 알 사람은 아는 브라우저입니다. 국내에서는 IE가 절대적인 점유율을 가지고 있지만, 이미 해외에서는 IE를 뛰어넘어 전세계 1위의 점유율을 가지고 있습니다. (출처: gs.statcounter.com / 2014년 5월)

이 크롬의 간단한 특징은 타 브라우저에 비해 빠른 속도를 자랑합니다. 또한 안드로이드나 iOS처럼 자체 앱스토어를 가지고 있어서 브라우저 내에서 어플을 깔고 실행할 수 있습니다. 점점 브라우저와 웹 어플리케이션 경계가 무너지면서 브라우저 그 이상이 되어가는 듯한 브라우저입니다.

크롬은 윈도우, 맥, 리눅스를 모두 지원하는 브라우저로써 사용자가 워낙 많은 브라우저이니 꼭 설치하시기 바랍니다.

파이어폭스 (Firefox)

이른바 '불여우'라는 애칭으로도 불리는 웹 브라우저입니다. '모질라'라는 비영리 재단에서 만든 웹 브라우저로써, 영문 그대로 불 꼬리를 가진 여우를 아이콘으로 삼고 있습니다. 옛날 인터넷이 초창기 보급되던 시절 넷스케이프(Netscape)를 기원으로 하는 브라우저로써, 예전에는 IE의 대항마로 불리던 브라우저입니다. 지금은 크롬에게 사용자가 밀려 점유율 3위의 브라우저이지만, 여전히 많은 사용자를 보유하고 있습니다.

'모질라 재단'은 열린 웹을 추구하는 비영리 소프트웨어 재단입니다. 때문에 오픈 소스로 무료 운영체제인 우분투 리눅스의 기본 브라우저입니다. 또한 모질라 재단은 최근 '파이어폭스 OS'라는 안드로이드 같은 운영체제도 발표했고요, 웹을 기반으로 하는 운영체제로써 파이어폭스에서 시뮬레이션 가능합니다.

파이어폭스의 특징은 나름 역사가 있는 브라우저라 타 브라우저에 비해 부가기능이 많은 편입니다. 특히 예전 파이어 버그라는 플러그인은 웹 개발자에게 필수적인 플러그인이었습니다. 요새는 크롬이나 오페라의 개발자 도구도 많이 발전되었고, 파이어폭스의 기본 개발자 도구 역시 매우 강력해졌습니다. 개발자 도구에 대해서는 추후에 다루도록 하겠습니다.

파이어폭스 역시 윈도우, 맥, 리눅스를 모두 지원하며, 다음으로 살펴보게 될 브라우저들은 꼭 설치를 안 하시더라도, 앞선 IE최신버전과 크롬, 파이어폭스는 꼭 설치하시기 바랍니다.

사파리 (Safari)

애플이 만든 웹 브라우저로써, 맥 운영체제의 기본 브라우저입니다.

맥에서는 아주 가볍고, 빠른 성능과 맥북 터치패드와의 연계성 덕분에 맥에서는 거의 절대적인 위치를 차지하고 있습니다. 하지만 운영체제를 맥에서만 지원하며, 윈도우용 사파리도 있으나 5.1.7버전을 마지막으로 더 이상 지원하지 않습니다. (공식 사이트에서도 다운받는 페이지가 없어진 듯 합니다.)

크롬과 거의 같은 엔진(웹킷엔진을 사용하며, 엔진에 대해서는 다음에 다루겠습니다)을 사용하는 웹 브라우저로 랜더링이 크롬과 거의 비슷합니다. 이런 이유로 스크립트가 아닌 HTML, CSS정도는 크롬과 거의 동일하게 출력됩니다. 만약 윈도우 사용자이시면 꼭 설치하실 필요는 없습니다.

오페라 (Opera)

노르웨이의 오페라 소프트웨어가 만든 웹 브라우저입니다.

점유율은 앞서 말씀 드린 브라우저들에 비하면 많이 낮은 편이긴 하지만, 단지 PC의 웹 브라우저가 아닌 TV나 게임기 등 여러 장치에서도 많이 사용되는 브라우저입니다. 여담으로 예전, 삼성에서 옴니아라는 스마트폰이 나왔을 때에 너무 느린 기본 브라우저 대신 이 오페라브라우저를 사용하신 분들도 많았습니다.

인터넷이 어디서든 잘 되는 우리나라와 달리, 회선환경이 열악한 외국에서 많이 사용되는 브라우저입니다. 오페라는 그만큼 가벼움을 넘어, 인터넷이 열악한 환경에서도 웹 서핑을 하게 해주는 브라우저입니다. 열악한 환경에서도 웹 서핑을 원활하게 하기 위해서 오프로드모드(예전 터보모드)라는 모드가 있는데요, 이는 오페라서버를 통해서 웹 페이지의 용량을 더 줄여서 받아냅니다. (이러한 우회방식 때문에 이 모드에서는 국내에서 접근할 수 없는 사이트들이 접근가능해지기도 합니다.)

게다가 작고 가벼움에도 다양한 기능들을 갖추고 있어, 국내에서 마니아 층을 가지고 있었던 브라우저입니다. (사실 점유율이 낮아 오페라를 사용하는 것만으로도 마니아로 보여지긴 합니다.) 마우스 제스처라던가 스피드 다이얼, 아웃룩같은 이메일 클라이언트까지도 내장되어있던 브라우저로 필자도 한동안 오페라를 주로 사용했었습니다.

하지만, 현재 엔진이 바뀌면서(크롬과 동일한 블링크 엔진으로 바뀌었습니다) 전혀 다른 브라우저가 되어버렸습니다. 이제 새로 시작하는 브라우저라 아직 즐겨 찾기도 제대로 구현이 안되어있습니다. 하지만, 나름 오랜 역사를 가진 경험 있는 브라우저이기에 앞으로가 기대되는 브라우저입니다.

맥스톤 (Maxthon)

이 브라우저는 잘 알려지진 않았으나, 점점 사용자를 늘려가는 브라우저라 소개차원에서 짚고 넘어갑니다.

이 브라우저는 중국 프로그래머가 익스플로러를 자신에 맞게 변형시켜서 만들던 것을 시작으로 탄생된 브라우저입니다. (예전 웹마 브라우저를 기억하시는 분은 그와 비슷하게 나왔다고 보심 됩니다)

이 브라우저는 조금 특이한 게 익스플로러의 엔진과 크롬의 엔진, 이 두 가지를 사용합니다. 아직 국내 웹 환경이 액티브X덕에 IE를 사용하지 않고서는 사용 불가능한 곳이 많이 있는데요, 두 개의 엔진을 쓰기 때문에 평상시에 크롬같이 쓰다가 호환 안 되는 페이지를 IE처럼 사용할 수가 있습니다. 요새 IE가 업데이트하면서 IE에서는 동작하지 않는 페이지가, 오히려 이 맥스톤에서 제대로 동작하는 경우들도 종종 있습니다. 이렇게 두 가지의 엔진을 같이 사용한 브라우저로써 국내 이스트소프트에서 만든 스윙브라우저도 있습니다.

어쨌든 후발 주자로 떠오르는 브라우저라 현재 HTML5 지원 점수도 크롬을 재치고 1위를 하기도 합니다. 또한 다양한 기능들을 많이 가지고 있어서 가끔은 예전의 오페라를 보는듯한 느낌도 받는 그러한 브라우저입니다.

그 외의 브라우저

일단 주요 웹 브라우저들을 살펴보았습니다. 이런 IE 이외의 웹 브라우저들을 처음 들어보신 분들은 생각보다 종류가 많아 놀라셨을지 모르겠습니다. 이번 기회에 IE가 아닌 다른 브라우저로 웹 서핑을 해보시는 것도 괜찮을 것 같습니다. 추후 블로그를 통해 다룰 계획이지만, IE이외의 브라우저들을 사용하면 생각지 못했던 좋은 기능들을 사용하실 수 있습니다.

방금 살펴보신 브라우저 외에도 다른 많은 브라우저가 있는데요, 몇 가지만 간단히 살펴보고 넘어가도록 하겠습니다.

모바일 브라우저

모바일 브라우저에 대해서는 요새 스마트폰을 많이 사용하셔서 익숙하시리라 봅니다. 모바일 브라우저 역시 기본 브라우저뿐만 아니라 여러 종류의 브라우저들이 있습니다. 앞서 살펴보았던 브라우저들 역시 모바일용 버전이 또 있습니다. 다만 PC용과 보여지는 모습이 조금 다릅니다.

모바일의 경우 화면이 작을 수 있고, 브라우징을 터치를 통해서 스크롤도 하고 클릭도 하기 때문에 웹을 제작할 때 이런 부분들을 고려해야 합니다.

텍스트 기반 브라우저

텍스트 기반의 브라우저는 평소 우리가 봐오던 브라우저와는 많이 다릅니다. 모든 웹 페이지를 모두 텍스트로만 보여줍니다.

w3m으로 웨버스터디를 접속했을 때 화면입니다
텍스트 브라우저 예시

이러한 생소한 모습에 당황하실지 모르겠습니다. 그리고 대체 왜 이런 브라우저를 사용하나 싶으실 수 있겠습니다만, 이러한 브라우저는 터미널 창(도스 창 같은 곳)에서도 웹 서핑을 할 수 있으며, 매우 가볍게 필요한 정보만 보기에 좋습니다. 물론, 이러한 브라우저를 사용하는 사람은 많지 않습니다.

하지만 그럼에도 이런 브라우저를 어느 정도 염두 해 두셔야 합니다. 물론, 실제로 이런 브라우저를 사용하는 사람은 많지 않습니다. 하지만, 시각적인 장애가 있는 사람이나, 검색 엔진의 경우, 이런 브라우저로 보는 것과 거의 흡사하게 여러분의 웹 사이트를 접근하게 됩니다. 그렇기 때문에 이런 브라우저를 염두하면서 웹 페이지의 텍스트 정보가 어떠한 지를 인지하도록 합니다.

텍스트 에디터

이제 텍스트 에디터를 살펴보도록 하겠습니다. 텍스트 에디터는 말 그대로 여러분들이 직접 코드를 치게 될 프로그램을 말씀 드리는 것입니다. 앞으로 말씀 드리는 것 중에서 본인에게 맞는 에디터를 선택하시기 바라며, 이 외에도 에디터가 많으니 다른 에디터를 설치하셔도 전혀 문제될 것이 없습니다.

메모장

조금 황당하신가요? 제가 처음 HTML을 배워보려고 강의 사이트를 찾아 다녔을 때, 처음 배우는 데는 메모장으로 배우는 것이 좋다라는 글을 접하고서 메모장으로 공부를 며칠 해봤습니다. 하지만, 지금 여러분들에게 절대 권하고 싶지 않습니다. 그냥 그만큼 코딩은 무엇으로도 가볍게 작업할 수 있다는 것만 알아두세요. 여러분들이 에디터를 선택할 땐 적어도 코드 문법에 색으로 읽기 쉽게 강조해주는 기능 정도는 있는 에디터로 작업하길 바랍니다. 메모장으로 작업하는 것은 제 경험상 너무 재미가 없습니다.

특징

  • 윈도우에 기본적으로 설치되어있는 프로그램
  • 매우 가벼움
  • 아무런 기능이 없음

드림위버 (Dreamweaver)

포토샵으로 유명한 어도비사의 웹 제작 프로그램입니다.

워드프로세서처럼 화면에서 직접 보면서 홈페이지를 제작할 수 있으며, 국내에 비슷한 프로그램으로 나모 웹 에디터가 있습니다. 이 프로그램의 특징은 코딩을 할 줄 모르더라도 마우스로 클릭해가면서 웹을 제작할 수 있다는 점입니다. 하지만, 저는 이러한 방식을 권장하지 않습니다. 실무에서 코딩 할 때에도 이러한 방식으로는 거의 작업하지 않고요. 이러한 방법은 아무래도 한계가 있고, 소스가 지저분해지며 코딩을 모르고 작업을 하다 보면, 작업 중에 생길 수 있는 조그마한 문제점도 해결하기 힘듭니다. 여러 브라우저와(모바일까지 포함해서) 검색엔진을 고려하는 부분에 있어서도 분명 한계가 있고요. 코딩을 모르고 작업을 할 생각이라면, 이 강의도 더 이상 의미가 없습니다.

대신 이 드림위버에는 화면 모드뿐만 아니라, 코드로 입력하는 모드가 있습니다. 코드로 입력하는 모드에는 다른 에디터만큼 좋은 기능들이 있으니, 드림위버로 작업하실 분은 이 모드로 작업하시기 바랍니다. 다만 아무래도 화면모드 같은 기능들 덕분에 타 에디터에 비해 좀 무겁습니다.

예전에 초보자는 나모 웹 에디터를 쓰고, 전문가는 드림위버를 사용한다는 말이 있던 것으로 압니다. 이 때문인지 학원 중에는 여전히 웹 제작을 위해 드림위버를 교육하는 학원도 있다고 알고 있는데요, 사실 여러분들이 코딩을 할 줄 안다면 어떤 툴을 쓰느냐는 전혀 상관없습니다. 사실 실제로 디자이너 분들 중에는 드림위버를 많이 사용하시긴 합니다. 하지만, 전문 웹 퍼블리셔들 중에서는 드림위버로 코딩 하는 사람이 많진 않습니다. 일단 무겁고, 비싸기 때문입니다. 만약 여러분이 이 공부를 위해서 드림위버를 사실 생각이라면 제 개인적으로는 다시 고민해보셨으면 합니다.

특징

  • 직접 화면에서 작업가능
  • 코드모드 작업 시 자동완성 기능
  • 코드로 작업 하더라도 브라우저에서 어떻게 보여질 것인지 프로그램 내에서 어느 정도 확인 가능
  • 타 에디터에 비해 비싸고, 무거움.

에디트 플러스 (Edit Plus)

저는 사실 이 에디터를 써본 적은 없으나, 국내 많은 퍼블리셔들이 쓰고 있는 국산 에디터입니다.

매우 가볍고, HTML, CSS 뿐만 아니라 여러 프로그래밍 언어의 구문을 강조해줍니다. 국산 프로그램이기 때문에 한글메뉴라는 것도 강점입니다. 현재 3만원이 조금 안 되는 가격으로 구입할 수 있고, 그 외 강력한 기능들이 있는 것으로 알고 있으나 자세한 정보는 따로 찾아보시기 바랍니다. 이와 비슷한 에디터로 Ultra Edit나 Notepad++ 등이 있습니다.

특징

  • 매우 가벼움
  • 여러 언어의 구문 강조
  • 한글 메뉴
  • 가격이 저렴한 편
  • 그 외 기타 기능

압타나 (Aptana)

프로그래밍 에디터 중에 이클립스라는 강력한 에디터가 있습니다. 이 압타나는 이 이클립스를 웹에 좀 더 특화되도록 제작된 에디터입니다.

프로그램이 무료임에도 편리한 기능들을 많이 가지고 있습니다. 기능들이 많아 종종 '무료 에디터 계의 드림위버'란 말도 있습니다. 또한, 지원하는 플러그인도 많아 확장성도 매우 좋습니다. 그 외에도 홈페이지를 구축할 때에 프로젝트 별로 관리를 하기 때문에 프로젝트 단위로 작업을 할 때에 매우 유용합니다. 이러한 이유로 필자가 주로 사용하고 있는 에디터이기도 합니다.

다만 이런 프로젝트 별로 관리를 하는 것이 처음 공부하는 입장에서는 더 복잡하게 다가올 수 있습니다. 또한 기능이 매우 많은 대신, 굉장히 무겁습니다. 때론 드림위버로 작업하는 것보다도 무겁게 느껴질 때가 있는데, 이 부분이 텍스트 에디터로써 조금 큰 단점이긴 합니다.

특징

  • 무료 에디터
  • 자동완성 및 다양한 기능 구현
  • 프로젝트 관리 기능
  • 다양한 플러그인 지원
  • 타 에디터들에 비해 많이 무거운 편

서브라임 (Sublime)

요새 외국에서 참 잘나가는 에디터입니다.

매우 가벼우면서도 기능들은 강력하고, 게다가 심플하기까지 합니다. 나오자마자 큰 인기를 받을 만한 에디터란 생각이 듭니다. 다만 유료로 현재 약 70달러 정도하는 가격입니다. 하지만 돈을 내지 않더라도 어느 정도 사용은 가능하니 다운받아서 사용해 보는 것도 괜찮을 것 같습니다.

또한 이 에디터의 장점이자 단점이 에디터의 옵션을 텍스트 명령어 방식으로 작업하는 것인데요. 이런 방식은 코딩을 자주하던 사람들에게는 더욱 더 빠른 작업을 할 수 있게 하지만, 초보자가 처음 접근하기에는 더 어렵게 느껴질 수 있습니다. 그리고 국내에서 사용하는 데에 인코딩과 관련해서 약간의 문제가 있었던 것으로 알고 있습니다. (인코딩에 대해서는 추후에 잠깐 다루도록 하겠습니다.)

특징

  • 많은 기능을 가졌음에도 가벼움
  • 해외에서 많이 사용되어, 지원하는 플러그인도 많음
  • 기능들이 텍스트 방식이라 초보자에게 어려울 수 있음
  • 유료 약 70달러
  • 국내 인코딩 지원이 부족

브라켓 (Brackets)

포토샵과 드림위버를 만든 어도비사의 무료 에디터입니다. 어도비사의 프로그램이지만 드림위버와는 전혀 다른 에디터입니다.

가볍고 다양한 기능들을 가지고 있는 에디터로, 이 글을 통해서 에디터를 처음 접하는 분들에게 추천하고 싶은 에디터입니다.

이 에디터는 정말 html, css, js를 작업하기 위해 태어난 에디터로 크롬에서 실시간으로 보며 작업이 가능합니다. 그 외에도 익스텐션이라는 플러그인같은 것을 프로그램 내에서 검색하여 받을 수 있는데요, 괜찮은 기능들이 많이 있습니다.

하지만, 앞서 살펴본 서브라임과 마찬가지로 인코딩 문제가 있습니다. 때문에 국내에서 제작되는 웹 페이지들 일부의 소스가 깨져 보일 수 있는데요, 아직 해결방법도 없는 듯합니다. 또한 텍스트 파일의 용량이 커질 수록 무거워지는 듯 합니다. 처음 공부용 또는 utf-8인코딩만을 사용한다는 전제로 사용하기에 좋은 에디터입니다.

특징

  • 무료 에디터
  • 실시간 프리뷰와 같은 좋은 기능들을 많이 가졌음
  • 다양한 익스텐션 지원
  • 가벼운 편이나 파일이 커질 수록 조금 무거워짐
  • 인코딩을 utf-8만 지원하는 관계로 국내의 euc-kr같은 문자셋은 깨져 보임

에디터 정리

이상으로 텍스트 에디터에 대해 살펴보았습니다.

일단 몇 가지를 살펴보았는데요, 이 외에도 에디터는 굉장히 많습니다. 다루진 않았지만, 맥(Mac)에서는 코다(CODA)라는 에디터도 매우 유명합니다. 제가 몰라서 그렇지, 웹 개발에 관련된 좋은 에디터는 계속해서 나오고 있습니다. 심지어 웹 페이지에서 코딩 하는 서비스도 있고요. 에디터는 사용해 보시면서 본인에게 맞는 것을 찾아가시면 됩니다.

다시 한번 말씀 드리지만, 결국 작업은 에디터가 아닌 여러분이 합니다. 너무 에디터에 연연하기 보다는 코딩 공부에 더 집중하세요.

이미지 에디터

앞서 브라우저와 텍스트 에디터를 다루면서 좀 지루해졌을 거 같아, 이미지 에디터는 아주 간단히만 소개 드리겠습니다. 사실 소개 드릴 것도 별로 없습니다.

포토샵 (Photoshop)

컴퓨터를 잘 못하는 사람들도 이 이름만을 알고 있는 어도비사의 포토샵입니다.

합성한다라는 말을 '포샵한다'라고 할 정도로, 이미지 에디터에서는 독보적인 위치를 차지하고 있는 프로그램입니다. 그만큼 강력하고 다양한 기능들을 많이 보유하였고, 웹 이미지를 제작, 편집하는 데에도 전혀 부족함이 없습니다. 하지만 그만큼 가격이 만만치 않기 때문에 개인이 구매해서 사용하기에는 부담스러운 프로그램입니다.

김프 (Gimp)

처음 들어보신 분들께서도 많으시겠지만, 리눅스 계의 포토샵이라 불릴만한 프로그램입니다. 게다가 무료입니다.

물론 포토샵보다는 기능이 조금 부족하지만, 웹 이미지를 제작하는 데에는 사실 그렇게 많은 기능이 필요하지 않습니다. 그리고 리눅스에서 유명한 프로그램이지만, 윈도우나 맥(OSX)에서도 설치 가능한 프로그램입니다. 기존 포토샵 사용자는 포토샵과 다른 부분들이 많이 있기 때문에 좀 어색하실 수 있습니다만, 정말 괜찮은 무료프로그램이기 때문에 포토샵이 부담스러우신 분들께 추천 드립니다.

준비하기 마무리

앞서 살펴본 준비물들을 모두 준비하셨나요?

그렇다면 여러분들은 드디어 배울 준비가 다 완료되었습니다. 이제 본격적으로 배우는 일만 남았습니다. 혹시 긴장되시나요? 걱정 마세요. 의외로 꽤 재미있을지 모릅니다.

그럼 다음 장에서 뵙겠습니다.

요점 정리
웹 브라우저
  • 인터넷 익스플로러(IE) - 윈도우의 기본 브라우저, 최신 브라우저까지 업데이트. IE Tester를 통해 버전별 확인
  • 크롬 - 구글의 전세계 점유율 1위 브라우저. 필수 설치 권장
  • 파이어폭스(FF) - 모질라 재단의 브라우저, 크롬만큼 빠른 브라우저 점유율 3위. 필수 설치 권장
  • 사파리 - 맥(OSX)의 기본 브라우저, 크롬과 비슷한 엔진
  • 오페라 - PC뿐만 아닌 여러 기기에서 사용되는 브라우저. 현재 새로 태어나 크롬과 같은 엔진으로 출시
  • 맥스톤, 스윙 - IE와 크롬의 엔진을 차용한 브라우저
  • 모바일 브라우저 - 안드로이드나 iOS등 모바일 기기에 들어가는 브라우저. 터치로 접근
  • 텍스트 브라우저 - 텍스트 정보만 보여주는 브라우저. 검색엔진이나 스크린리더와 유사한 접근.
텍스트 에디터
  • 메모장 - 윈도우 기본 내장. 최소한의 기능.
  • 드림위버 - 화면에서 확인하며 작업가능. 비싸고, 무거움
  • 에디트플러스 - 가벼움. 유료이나 가격이 저렴
  • 압타나 - 무료 에디터. 지원 기능이 많으나 무거움
  • 서브라임 - 가볍고 많은 기능 지님. 유료. 초보자가 쓰기에 어려울 수 있음.
  • 브라켓 - 무료 에디터. 지원기능도 많고 가벼운 편. 하지만 문자셋 지원이 부족함
이미지 에디터
  • 포토샵 - 강력한 기능의 이미지 에디터. 비싼 가격.
  • 김프 - 무료 이미지 에디터. 포토샵에 비해 기능이 부족

이 글이 유용하셨다면 친구들에게 공유 해주세요.