SNUCSE-Bootstrap

이 툴킷은 매번 스누씨 테마를 제작할 때 느끼던 불편한 점들(반복 작업, 모듈화의 부재, 간편한 테스트) 등을 해결하기 위해 제작하였다. 새로운 테마를 제작할 때마다 했어야하는 반복작업을 최대한 줄이고 시작할 수 있는 시작점을 제공하고자 하는게 주 목표다.

개발환경 세팅

SNUCSE-Bootstrap를 이용한 테마 개발 환경 세팅법

1. SNUCSE-Bootstrap 포크하기

자신만의 테마를 개발하기 위해 먼저 포크를 하자. https://github.com/thefron/snucse-bootstrap을 방문하여 포크를 한 다음 체크아웃을 한다.

2. LESS로 개발 및 컴파일하기

SNUCSE-Bootstrap은 반복작업을 줄이고 최대한 모듈화를 하기 위해, 동적 스타일시트 언어 중 하나인 LESS 문법을 사용한다. 기존 css 문법과 거의 동일하며, 몇몇 추가적인 기능들만 익히면 능숙하게 사용할 수 있다. 자세한 내용은 이 곳을 방문하여 익혀보도록 하자. LESS 컴파일러는 npm을 이용하여 설치할 수 있다.

$ npm install less

LESS 컴파일러를 깔았으면, 커맨드라인에서

$ lessc ./less/main.less > main.css

를 실행하여 컴파일된 결과물을 얻을 수 있다.

매번 수정사항이 있을 떄마다 컴파일을 하는 것이 귀찮을 경우 이용할 수 있는 몇가지 도구를 소개하고자 한다.

3. 스누씨에서 테스트하기

이번에는 개발한 내용을 실제 스누씨에서 확인하는 방법을 소개하고자 한다. 지금까지 몇 개의 테마를 릴리즈하면서 느꼈던 불편했던 점이 몇 가지 있다. 테스트하기위해 원격지에 css 파일을 올려야하는 점, 학내의 서버에 올려두고 테스트하는 경우 반복적인 GET 요청이 들어갈 시, 빈번한 블락을 당하는 등 개발에 많은 애로사항이 꽃피곤 했다. 이런 불편한 점들을 피하기 위해서 생각한 방법은 python의 SimpleHTTPServer를 사용하는 것이다. 간편하게 서버를 돌릴 수 있어 less로 컴파일 한 결과를 그자리에서 바로 적용해 볼 수 있고 로컬에서 돌기때문에 빠르며, 중전에 의해 블락당할 우려가 없다.

$ python -m SimpleHTTPServer 8000

이처럼 간단하게 웹서버를 띄우고, 스누씨의 마이페이지-환경설정에 들어간다. '내 스타일시트 사용하기'를 체크한 후, '내 스타일시트'에 다음과 같이 입력한다.

@import url('http://localhost:8000/main.css');

사용하고 있던 테마를 비활성화하는 것도 잊지 말자.