최근 카페24 스킨을 잘못 구매한 덕분에 쓰레기 치우느라(?) 아주 곤욕입니다. CSS 코드를 중복해서 여러번 불규칙적으로 정의해놓은 덕분에 5000여줄의 코드에서 일일이 찾아 지워주고 나니 1000여줄로 줄어드는 상황에 어이가 없는데, 이게 문제는 카페24 솔루션 특징상 CSS 코드가 수십개는 되는데다 만든 놈이 추가한 파일들도 있다는거죠. 그래서 이런 반복 되는 작업을 어떻게 해결할 수 있을까 고민한 끝에 css-purge라는 tool을 발견했습니다. 15800여줄의 코드를 보고 이건 안되겠다 싶어서 찾게 됐는데 간단하게 1700여줄로 줄여주는걸 보면서 감탄과 동시에 스킨 제작자를 저주하게 되더군요. 물론 완전하진 않습니다. 자동으로 중복된 코드를 지우면서 다이어트 하는 과정에서 불필요하다고 판단되는 것들을 지우다보니 지워선 안될 코드들도 일부 지운게 확인 됐습니다.그럼에도 불구하고 이 툴은 정말 쓸만합니다. 누락된 부분은 찾아서 추가하면 되는데 3군데 정도 누락되서 크게 어려움을 겪지 않고 문제를 해결 할 수 있었습니다. 아래에 관련 링크를 걸어두겠습니다. 저처럼 중복된 정의들을 지우기 위해서 애쓰지 마시고 css-purge로 스트레스를 덜 받으시길 바랍니다. http://rbtech.github.io/css-purge/그리고 추가로 minify된 코드를 해제하는 플러그인도 있더군요 atom 패키지 중에서 atom-beautify 를 이용하면 간단하게 해결 가능합니다. install package를 통해서 설치 가능합니다

sftp-config.json에서ftp 설정을 해줄때 중요한 점은 바로 위에서 보여지는 내용 중에 빨간 밑줄을 그어준 부분들이다. 보통 인터넷에서 검색했을때 ftp인지,sftp인지 타입을 선택하고 호스트와 유저,패스워드,포트, 컨트롤할 리모트 패스까지는 설명이 되어있는데 좀처럼 폴더에 해당 파일들이 저장되지 않는다는 점이 내가 겪은 문제였다.

심지어 보통 yes / no를 묻는 창이 뜬다는데 그 창조차 뜨질 않아서 내용을 보니 confirm_downloads 항목이 false로 되어있었다. 나처럼 default 값이 false일 경우도 있으니 이 부분을 true로 바꿔 주어야 정상적으로 파일이 다운로드 된다.

그리고 파일을 수정한 다음에는 반드시 upload files 명령을 실행해줘야하는 번거로움이 뒤따르는데, 이 또한 upload_on_save 값에 true로 고쳐주면 저장과 동시에 업로드가 되서 바로바로 결과를 확인할 수 있다.

 SASS, COMPASS, SUSY, REAKPOINT 소개

간략하게 정리하자면 sass,compass,susy,breakpoint는 아래와 같다.

  • SASS – CSS를 더욱 체계적이고 효율적으로 작성할 수 있도록 도와주어 관리, 재사용에 유리하다
  • Compass – SASS Framework : SASS를 좀 더 편리하게 사용할 수 있도록 준비되어있는 프레임워크
  • SUSY – Grid System Framework : 그리드 시스템을 이용하여 편리하게 레이아웃을 잡을 수 있도록 도와주는 프레임워크
  • Breakpoint – SASS용 미디어쿼리 라이브러리 : 반응형 웹 사이트를 제작할때 미디어쿼리를 쉽게 삽입할 수 있도록 도와주는 라이브러리

sass 설치

먼저 윈도우 환경이라면, http://rubyinstaller.org 에서 루비를 다운로드 받아 설치해야한다. sass가 꼭 ruby기반에서 돌아가는 것만 있는 것은 아니지만, susy2를ruby기반 sass가 완벽 지원하기 때문이다. 참고로 아래 내용들은 우분투 16.04.2에서 설치하는 과정들을 적어놓았지만, 루비를 이용한 설치이므로 윈도우와 큰 차이는 없을 것이다.

루비가 설치되어 있는 상태에서 커맨드 창을 띄워 아래 명령어를 순서대로 입력해서 sass와 compass를 설치한다. 우분투라면 루트 권한으로 설치했기때문에 sudo 명령어는 생략했다. 루트상태가 아니라면 ‘sudo gem install sass’ 와 같은 식으로 앞에 sudo를 붙여줘야한다.

Susy와 Breakpoint를 설치하는 방법은 여러가지가 있지만 여기서는 ruby를 이용해서 설치하도록 한다.

설정

설치가 모두 이뤄지고 나면, config.rb 파일에서 susy와 breakpoint를 사용할 수 있도록 설정해줘야한다.

sass

위의 이미지처럼 compass를 설치하면 맨 처음에 require ‘compass/import-once/activate’ 명시가 되어있다. 그 밑에 require ‘susy’ require ‘breakpoint’ 를 추가해주어 susy와 breakpoint를 사용한다는 것을 알려줘야한다.

require 밑에 명시된 부분들은 수정이 가능한 부분들이므로 자신에게 맞도록 바꾸면 된다. http_path에서는 실제로 작업이 이뤄지고 있는 폴더를 명시해줘야하고, css_dir에는 sass 파일이 css로 컴파일된 결과물이 저장될 위치다. sass_dir는 작업중인 sass 파일의 위치, images_dir와  javascripts_dir는 이미지와 자바스크립트 파일이 저장될 위치다.

그리고 난 다음에는 sass 파일에 compass와 susy, breakpoint를 사용한다는 것을 또 알려줘야한다.

compass/reset, compass/css3, compass/typography, compass/utilities는 선택사항들이고, compass,susy,breakpoint가 지금 설치한 것들을 활용하기 위해서 필수로 명시해줘야하는 부분들이다. 나머지는 필요에 의해 추가된 것들이다.

나머지로 추가된 파일들은 저렇게 연결 – @import만 해주면 된다. 지금 수정한 sass 파일만 컴파일 하면 나머지는 알아서 연결되기때문에 모든 sass 파일을 컴파일 할 필요가 없다.

sass는 작성만 해주면 바로 css처럼 웹페이지에서 읽어들일 수가 없다. 그래서 sass로 작성된 파일을 따로 css로 컴파일 해주어야한다. 이러한 과정또한 compass가 알아서 해준다.

위와 같은 준비가 다 끝나고나면 커맨드 입력창에서 아래와 같은 명령어를 입력해준다.

위의 스크린샷에서 볼 수 있듯이 이제 컴파스는 sass 파일을 지켜보면서, 사용자가 sass 파일의 내용을 바꾸고 저장할때마다 css로 바꿔서 아까 지정한 css_dir에 파일을 저장해줄 것이다. 그래서 html문서의 head 부분에 css_dir에 명시된 파일을 link로 css파일을 연결해주면 sass로 작성된 문서가 체계적으로 정리되서 출력될 것이다.