#3. 웹 코딩을 위한 ATOM 에디터 및 패키지 설치

티스토리 스킨 제작은 웹코딩에 대한 기본적인 이해가 약간 필요하다. 약간이라면 약간이고.. 깊게 들어가면 또 한없이 깊게 들어가는데, 기초 중의 기초만 가지고 스킨을 제작해보려고 한다. 필자가 관련 분야 종사자가 아니기 때문에 전문적인 이해도도 없어서이기도 하지만, 간단한 스킨의 경우 깊은 내용까지 필요하지 않다고 생각하기 때문이다. 

ATOM 에디터 및 패키지 설치

기본적으로 코딩을 한다는 것은 컴퓨터 언어로 무언가를 쓰는 행위를 말한다. 즉, 메모장 같은 곳에 TEXT 형식의 무언가 입력하게 되어 있다. 필자가 초등학교 시절, 방과 후 5명 남짓 듣던 코딩 수업에서는 메모장을 이용했다. 메모장에 프로그래밍 언어를 통해 코딩을 하고, 파일 형식을 변환하여 실행시켜보곤 했다.

하지만 이번에 연재하는 스킨 제작기는 그런 단순한 과정은 거치지 않을 것이다. 물론 이해하기에는 맨땅에 헤딩하는 것이 가장 좋겠지만, 굳이 좋은 툴이 있는데 사용하지 않을 이유는 없다.

메모장을 대신해서, 간단하면서 이쁘고 편리하게 코딩할 수 있는 에디터가 있으니, 바로 ATOM 이다. 개발자라면 누구나 알고 있을 Github라는 곳에서 만든 에디터로, 다양한 종류의 언어를 지원한다. 또 다양한 패키지를 제공해서 사용자의 입맛에 맞게 변형시켜 이용할 수 있다. 여기서 패키지란, 쉽게 얘기해서 핸드폰 어플리케이션 같은 것이다. ATOM 에디터는 안드로이드이고, 그 위에 앱을 깔아서 여러가지 일들을 하지 않는가? 즉, 패키지는 핸드폰 사용을 편리하게 해주는 일종의 어플리케이션들이라고 보면 된다.

ATOM 설치: https://atom.io/

ATOM이 궁금하다면? https://opentutorials.org/module/1579

설치법은 어렵지 않다.  설치 후 설정해두면 좋은 패키지들이 있어서 소개한다.

atom-beautify : 소스 코드 정렬기능

indent-guide-improved : 들여쓴 부분 가이딩 라인 생성

atom-html-preview : CTRL+SHIFT+H를 누르면, 미리보기 창을 띄워줌. (인터넷 창을 다시 킬 필요가 없음)

패키지 설치하는 방법은 아래와 같다.

ATOM을 실행하고, file - settings를 클릭.

뜨는 창에서, 좌측 하단에 Install 클릭 후, 우측에 패키지명을 검색해서 Install 버튼을 눌러주면 끝.

이렇게 컴퓨터 기본 셋팅이 끝났다면, 다음 포스팅에서는 HTML의 기본에 대해 알아보자.

[IT & IT/티스토리 스킨 제작] - #1. 티스토리 스킨 제작기

[IT & IT/티스토리 스킨 제작] - #2. 파워포인트로 티스토리 스킨을 만들어보자.