기본 소프트웨어 설치하기

기본 소프트웨어 설치하기에서는 간단한 웹 개발을 하기 위해 어떤 도구가 필요하고, 어떻게 설치할 수 있는지 보여드립니다.

전문가들이 사용하는 도구는 뭔가요?

  • 컴퓨터. 당연한 얘기로 들리겠지만, 여러분 중 누군가는 이 글을 휴대폰이나 도서관의 컴퓨터로 읽고 계실겁니다. 진지한 웹 개발을 위해서는 데스크탑 컴퓨터(윈도우, 맥, 또는 리눅스)에 투자하는것이 좋습니다.
  • 코드 작성을 위한 텍스트 편집기. 순수 텍스트 편집기(Sublime, Brackets, Atom, Visual Studio Code 등) 또는 하이브리드 편집기(Dreamweaver, WebStorm 등)를 사용하시면 됩니다. 사무용 문서 편집기는 웹 브라우저의 렌더링 엔진을 방해하는 숨겨진 요소를 사용하기 때문에 코드 작성 용도로는 적합하지 않습니다.
  • 코드를 테스트하기 위한 웹 브라우저. 현재 가장 널리 사용되는 브라우저로는 Firefox, Chrome, Opera, Safari, Internet Explorer, 그리고 Microsoft Edge가 있습니다. 또, 여러분의 웹 사이트가 휴대용 장치와 오래된 브라우저(IE 8~10 등)에서는 어떻게 동작하는지도 시험해보셔야 합니다.
  • 웹 페이지를 위한 이미지를 만들 수 있는 이미지 편집기. GIMP, Paint.NET, Photoshop 등이 있습니다.
  • 서버 파일 관리, 프로젝트 협업, 코드와 자원 공유, 수정 충돌 방지를 위한 버전 관리 시스템. 지금은 Git이 제일 대중적인 버전 관리 시스템이며 Git 기반의 코드 공유 서비스인 GitHub도 매우 유명합니다.
  • 오래 된 웹 호스팅 계정에 파일을 올리기 위한 FTP 프로그램. 지금은 점점 Git이 FTP를 대체하고 있습니다. (S)FTP 프로그램은 Cyberduck, Fetch, FileZilla 외에도 무수히 많습니다.
  • 코드 압축과 테스트 등 반복 작업을 자동으로 수행하기 위한 자동화 시스템. GruntGulp 등이 있습니다.
  • 흔히 쓰이는 기능의 코드 작성 속도를 높히기 위한 템플릿, 라이브러리, 프레임워크, 기타 등등.
  • 이 밖에도 더 많은 도구들을 써요!

지금 당장 필요한 도구는 뭔가요?

전문가가 사용하는 리스트가 두렵게 다가올지도 모르지만, 다행히도 여러분은 저런 대부분의 것들을 모르더라도 웹 개발을 시작하실 수 있습니다. 이 글을 통해 여러분이 최소한의 도구(텍스트 편집기와 최신 웹 브라우저 같은)를 마련할 수 있도록 할 것입니다.

텍스트 편집기 설치하기

지금도 기본적인 텍스트 편집기는 아마 갖고 계실겁니다. Windows는 기본으로 메모장을, macOS는 TextEdit을 포함하고 있습니다. Linux는 배포판마다 다르지만, Ubuntu는 gedit을 가지고 있습니다.

웹 개발을 위해서라면 메모장이나 TextEdit보다는 좋은걸 써야 할겁니다. Brackets를 추천드립니다. 무려 무료인데다가(쫭쫭) 실시간 미리보기와 코드 힌트도 제공하기 때문이에요!

최신 웹 브라우저 설치하기

이제, 코드를 테스트할 데스크탑 웹 브라우저를 몇 가지 설치할겁니다. 다음 목록에서 여러분의 운영체제를 고른 후 원하시는 브라우저의 링크로 들어가 설치하세요.

다음으로 진행하기 전에, 테스트를 위해 최소 두 개 이상의 브라우저를 설치해야 합니다.

로컬 웹 서버 설치하기

어떤 예제는 제대로 작동하려면 웹 서버가 필요합니다. 로컬 테스트 서버 설치하기에서 설치하는 방법을 알아보세요!