[HTML 강좌] 3. WebSite를 만들기 위한 기본적인 도구
HTML을 공부하는 목적은 사용자마다 틀리겠지만, 최종적으로 본인의 홈페이지를 만들고, 운영하는데 있다고 생각됩니다.
기본적인 소프트웨어 설치하기
홈페이지를 만드는 도구는 매우 많은 코드 편집기, 이미지 편집기, 테스트 도구에서 시작하여 심지어는 홈페이지를 워드처럼 작성만 해도 만들어지는 도구들이 제공됩니다.
그럼 전문가들이 사용하는 도구는 어떻게 분류하고 어떤 것이 있을까요?
-. 시스템:
당연한 얘기이지만 웹 개발을 위해서는 윈도우, 맥, 또는 리눅스라는 운영체제를 가지고 있는 컴퓨터를 가지고 있어야 합니다.
-. 코드 작성
코드 작성을 위한 편집도구는 코드를 직접 입력하여 작성하는 텍스트 편집기(Sublime,Brackets,Atom,Visual Studio Code등) 와 하이브리드 편집기(Dreamweaver,WebStorm등)등이 있습니다. 사무용 문서 편집기는(HWP, MS-WORD)등은 숨겨져 있는 자체 기능으로 코드 작성용으로는 적합하지 않습니다.
-. 테스트
작성한 코드가 적정한지 테스트를 하기 위한웹 브라우저가 필요합니다. 현재 가장 널리 사용되는 브라우저로는Firefox,Chrome,Opera,Safari,Internet Explorer, 그리고Microsoft Edge가 있습니다.
-. 이미지 편집
웹에서는 다양한 이미지를 사용하게 됩니다. 사용하고자 하는 이미지를 만들 수 있는 이미지 편집기가 필요하며,GIMP,Paint.NET,Photoshop등이 있습니다.
-. 버젼 관리시스템
작성한 코드를 단순히 컴퓨터에만 저장해 놓는게 아니라 수정한 이력과 여러명이 같이 작업할 수 있는 협업을 할수 있도록 도와 주는 도구를 버젼 관리시스템이라고 하며, 다양한 버젼관리 도구가 있으며, 지금은Git이 제일 대중적인 버전 관리 시스템이며 Git 기반의 코드 공유 서비스인GitHub도 매우 유명합니다.
또한 오래 된 웹 호스팅 계정에 파일을 올리기 위한FTP 프로그램이나, 코드 압축과 테스트 등 반복 작업을 자동으로 수행하기 위한자동화 시스템으로Grunt나Gulp등이 있습니다.
흔히 쓰이는 기능의 코드 작성 속도를 높히기 위한 템플릿, 라이브러리, 프레임워크, 기타 등등.
이 밖에도 더 많은 도구들을 사용하고 있습니다.
그럼 지금 우리가 HTML을 작성하고 확인하기 위하여 가장 필요한 도구는 뭘까요.
1. 텍스트 편집기 설치하기
지금도 기본적인 텍스트 편집기는 아마 갖고 계실겁니다. Windows는 기본으로메모장을, macOS는TextEdit을 포함하고 있습니다. Linux는 배포판마다 다르지만, Ubuntu는gedit을 가지고 있습니다.
웹 개발을 위해서라면 메모장이나 TextEdit보다는 좋은걸 써야 할겁니다.
우리는 Visual Studio Code를 활용할겁니다. 사용하기에 아주 좋아요.
2. 최신 웹 브라우저 설치하기
이제, 코드를 테스트할 웹 브라우저를 몇 가지 설치할겁니다. 다음 목록에서 여러분의 운영체제를 고른 후 원하시는 브라우저의 링크로 들어가 설치하세요.
Linux:Firefox,Chrome,Opera.
Windows:Firefox,Chrome,Opera,Internet Explorer,Microsoft Edge(Window 10은 Edge를 탑재하고 있습니다. Windows 7 이상에선 Internet Explorer 11을 설치할 수 있습니다. 이외에는 다른 브라우저를 설치해야 합니다)
Mac:Firefox,Chrome,Opera,Safari(Safari는 iOS와 macOS에 탑재되어 있습니다)
테스트를 위해 최소 두 개 이상의 브라우저를 설치해야 합니다. 뭐, 귀찮으면 안하셔도 됩니다.
3. 로컬 웹 서버 설치하기
어떤 예제는 제대로 작동하려면 웹 서버가 필요합니다.
웹서버는 IIS, Apache, WebToBe, express 등 종류가 매우 많습니다.
위 세가지 전문가 도구중 텍스트 편집기는 Visual Studio Code를 사용하기로 결정하고, 이전 글에서 잠깐 살펴봤으며, 앞으로 적절한 예제와 함께 추가 사용법에 대하여 언급할 예정입니다.
최신 웹브라우져는 너무 기본적인 내용이라서 여기서 언급한 정도만 진행하겠으며, 로컬 웹서버의 경우 단순히 도구만이 아닌 이론적인 지식에 대한 설명과 같이 제공을 해야 하므로 다른 글로 자세히 다루도록 하겠습니다.
이번 글에서는 이만 마치도록 하겠습니다.
댓글