기본 소프트웨어 설치하기

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

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

컴퓨터. 당연한 얘기로 들리겠지만, 여러분 중 누군가는 이 글을 휴대폰이나 도서관의 컴퓨터로 읽고 계실겁니다. 진지한 웹 개발을 위해서는 데스크탑 컴퓨터(윈도우, 맥, 또는 리눅스)에 투자하는것이 좋습니다.
코드 작성을 위한 텍스트 편집기. 순수 텍스트 편집기(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 외에도 무수히 많습니다.
코드 압축과 테스트 등 반복 작업을 자동으로 수행하기 위한 자동화 시스템. Grunt나 Gulp 등이 있습니다.
흔히 쓰이는 기능의 코드 작성 속도를 높히기 위한 템플릿, 라이브러리, 프레임워크, 기타 등등.
이 밖에도 더 많은 도구들을 써요!

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

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

텍스트 편집기 설치하기

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

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

로컬 웹 서버 설치하기

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