Enable!

들어가며


  XE 디자인에 입문하면서 여러 자작 스킨들을 들고 온 적은 있지만 이렇게 강좌 글을 올리는 것은 처음이다. 떨리기도 하고, 실력이 부족한 내가 잘할 수 있을지 모르겠다. 그렇지만 지금껏 스킨을 제작하면서 느끼고 배웠던 것들을 서툴더라도 한번쯤 정리해보는 게 다른 이들과 나 자신에게 도움이 될 것 같아 이 글을 써본다. 이 강좌는 XE 디자인의 난이도가 실질적으로는 그렇게 어렵지 않음에도 불구하고 초보자 눈높이에 맞는 강좌의 부재로 인해 XE에 입문할 생각을 하지 못하고 있는 사람들을 위해 기획되었다. 그러므로 여기서 소개되는 코딩과 디자인의 수준은 매우 초보적이고, 설명 또한 초보자에 적합하게(물론 실제로는 어렵게 느껴질 수도...) 진행될 것이다. 구성은 기초 파트, 레이아웃 파트, 게시판 스킨 파트로 나눠서 설명할 것이다. 자세한 내용은 사정에 따라 바뀔 수 있어 미리 소개하지 못하는 점을 이해하기 바란다. 연재는 비정기적으로 이루어지며 역시 사정에 따라 연재 텀은 달라질 수 있다.





준비


  이 강좌를 시작하고 따라가기 전에 준비해야 할 것은 다음과 같다.


1. 텍스트 편집기

2. FTP 프로그램

3. 웹 서버(웹 호스팅, 개인서버 등 XE를 설치하고 실행할 수 있는 환경)


  텍스트 편집기는 각종 텍스트 파일, 여기서는 html, js, css 등을 열람하고 수정하기 위한 도구이다. 이 종류의 프로그램을 아마 가장 많이 쓸 것이다. 나모 웹 에디터를 사용하지 않는 이유는 코드를 직접 쳐보며 코드를 보고 해석하는 능력을 키우고 실력을 향상시키기 위함이다. 또한 프로그램 특성상 편집이 계속되면 코드가 지저분해질 수 있는데, 이러한 현상을 예방하고자 하는 목적 또한 있다. 필자는 Notepad++를 사용하는데, 코딩에 최적화된 텍스트 편집기라면 그 어떤 것이든 사용할 수 있다. 메모장은 안 된다. 메모장은 지원하는 인코딩의 종류가 적고, 가독성이 떨어지고 기능도 제한적이라 불편하기 때문이다.


  FTP 프로그램은 우리가 작업한 파일들을 서버에 올릴 때 사용할 것이다. 필자는 파일질라를 사용하고, 그것을 가장 추천하지만 역시 FTP 프로그램이라면 아무거나 사용해도 좋다. 단, 알FTP는 안 된다. 오류가 너무 많고 불안정하기에 다들 추천하지 않는다.


  웹 서버는 흔히 계정, 호스팅으로 불리는 것이다. XE를 설치하고 실행할 수 있는 서버라면 아무거나 해도 좋다. 유료 호스팅을 신청해도 좋지만 연습용으로 사용할 것이라면 무료 호스팅을 쓰는 것이 좋다. 호스팅은 카페24, 닷홈, 나야나 등이 유명한데 호스팅 정보는 개별적으로 찾아보기 바란다. 상술한 프로그램의 사용법 역시 따로 설명하지 않을 것이다. 하여튼 서버가 준비되면 XE 1.x 버전을 설치하면 된다. 디자인 강좌이므로 설치법은 설명하지 않겠다. 설치 방법은 쉬우니 잘하리라 생각한다. 강좌를 위해 굳이 쓰지도 않을 호스팅을 신청하는 것은 낭비이기도 하고.




선수지식


  사실 내가 잘 설명할 것이나 알아두면 편한 것은 분명 있다. 기초적인 html, css 지식을 익혀두고 오면 강좌를 따라가기 훨씬 수월하다. 결국 강좌에서 설명하는 것도 html, css, js니까. js는 자바스크립트 자체를 익히기보다는 jQuery를 배우는 것이 좋다. XE에서 제이쿼리를 내장하고 있고 디자인 면에서는 제이쿼리가 더 수월하다. 디자인 지식이 있으면 더 나은 디자인을 구상할 수 있다. 다만 아마추어 수준이니까 여기까지는 공부 안 해도 된다.




관련 사이트


  알아두면 좋을 사이트를 몇 군데 소개한다.


1. XpressEngine 공식 사이트 ( https://www.xpressengine.com/ ) : 말이 필요없을 정도로 필수 사이트이다. 묻고 답하기, 웹마스터 팁에서 유용한 정보를 얻을 수 있따.

2. W3CSchool ( http://www.w3schools.com/ ) : 자세한 설명과 레퍼런스가 수록되어 있다.

3. 오픈튜토리얼스 ( https://opentutorials.org/ ) : 우리말 동영상으로 코딩 기초를 쉽게 가르쳐주는 곳이다.

4. Codecademy ( http://www.codecademy.com/ ) : 역시 코딩 기초를 차근차근 가르쳐주는 곳인데, 실습, 도전과제 등이 있어 공부하기 좋다.

5. Stackoverflow ( http://stackoverflow.com/ ) : 영문 개발자 문답사이트. 역시 꿀정보가 많다.