칸아카데미 밖에서 웹 페이지 개발하기

HTML을 시험해보고, 빠른 피드백을 얻고, 작업물을 공유하는 것을 쉽게 하기 위해 칸아카데미 웹 사이트에서는 브라우저에 내장된 코딩 에디터를 제공합니다.

그러나 칸아카데미의 코딩 에디터는 여러분이 모든 것을 시도하도록 두지 않습니다. 안전상의 이유도 있고, 그런 작은 공간에 모든 기능을 갖춘 에디터를 제공하는 것은 어렵기 때문이죠!

여기서 HTML/CSS를 다 배우고나면, 파일 복사하기, 파일 찾기, 사용자 정의 플러그인, 그리고 그 이상의 더 많은 기능을 제공하는 에디터에서 웹 페이지 개발을 시작하고 싶을 것입니다. 어떤 에디터를 사용하든, 파일을 저장할 때 파일이름을 ".html"로 끝내세요. 이것은 모든 HTML 페이지에서 사용되는 파일 확장자이며, 에디터와 브라우저 둘 다 그 파일이 무엇인지 확실히 알 수 있도록 하기 위함입니다.

또 다른 선택은 칸아카데미의 것과 유사하지만 더 많은 기능들을 갖춘 온라인 에디터를 사용하는 것입니다. 만약 응용 프로그램을 다운로드할 수 없는 컴퓨터를 사용하고 있거나, 같은 에디터를 여러 컴퓨터에서 같이 사용하고 싶다면 아마 온라인 에디터가 좋을 것입니다. 온라인 에디터들은 실시간 다중 편집 도구를 갖고 있는 경우가 많습니다. 유명한 온라인 에디터에는 JSBin, Repl.it, Glitch, CodePen이 있습니다. 크롬북을 사용하고 있다면 크롬 웹 응용 프로그램인 Caret이나 Zed 등이 있습니다. 이 동영상은 Cloud9에서 웹 페이지를 편집하는 동영상입니다:

또 다른 방법은 데스크톱 에디터를 사용하는 것입니다: 컴퓨터에 응용 프로그램을 다운로드하고 하드 드라이브에 파일을 저장해 사용합니다. 운영체제와 가격에 따라 고를 수 있는 데스크톱 에디터들이 수 없이 많습니다. 유명한 데스크톱 에디터로는 Visual Studio Code, Atom, Sublime Text, Adobe Brackets, Notepad++ (윈도우즈용) 등이 있습니다. 이건 Sublime Text로 웹 페이지를 편집하는 동영상입니다:

세 번째 방법은 커맨드 라인 에디터를 사용하는 것입니다. 만약 커맨드 라인과 친숙하지 않다면, 먼저 커맨드 라인에 대해서 많은 것을 배워야 하기 때문에 이 방법은 좋지 않습니다. 반면에, 만약 마우스를 사용하는 대신에 키보드를 사용하는 것을 좋아한다면, 아마도 커맨드 라인 도구들을 좋아하는 자신을 발견할지도 모르겠습니다. 유명한 커맨드 라인 에디터들에는 Emacs나 Vim이 있으며, Macs과 Linux와 같은 Unix 기반의 시스템에 미리 설치되어 있는 경우가 많습니다. 다음은 Vim에서 웹 페이지를 편집하는 동영상입니다:

어떤 것을 선택해야 할까요? 지금으로써는 칸아카데미 HTML/CSS 에디터를 계속 사용해도 괜찮습니다. 그렇지만 나중엔 적어도 하나의 에디터는 능숙히 사용할 줄 아는것이 좋습니다. 몇 개의 무료 에디터를 시도해보고 가장 맘에 들어하는 것을 골라 보세요. 또한 주변 친구들이나 동료들이 무엇을 사용하는지 물어봐도 좋습니다. 주변 사람들이 가장 많이 사용하는 도구를 이용하는 것이 도움이 될 수도 있습니다. 어려울 때 주변에 도움을 요청할 수 있으니까요.

다음은 제 칸아카데미 동료들이 무엇을 사용하는지 나타내는 그래프입니다. HTML/CSS를 쓰지 않는 사람들도 있는데 그럼 사람들이 좋아하는 에디터는 좋은 선택이 아닐 수도 있습니다.

이것을 보고 있는데 이미 웹 페이지 개발에 다른 에디터를 쓰고 있다면 밑에 어떤 것을 쓰는지, 왜 그것을 좋아하는지 써 보세요. 그리고 좋아하는 에디터 플러그인이나 브라우저 개발 도구가 있다면 공유해 보세요. 다른 사람에게 도움이 될지도 모릅니다. 😊