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로 작성된 문서가 체계적으로 정리되서 출력될 것이다.

우분투

최근 우분투에서 sudo 명령어를 입력하다보면 간혹 저렇게 unable to resolve host ubuntu 라는 메세지가 뜹니다. 왜 그런걸까 이유를 모르다가 찜찜해서 검색해보니 제가 최근에 HP sleekbook 15pc 어쩌고 뭐 이런 긴 이름으로 PC 이름이 설정되어있길래  간단하게 ubuntu로 바꿔놨더니 문제가 발생하는 거였습니다. 실행은 됩니다만, 매번 저런 메세지를 본다는게 좀 껄끄럽죠.

문제는 PC 이름을 바꿔줄때 명시해줘야할 부분이 아래의 두 군데라는 것입니다.

  • /etc/hostname
  • /etc/hosts

현재 상황에서 hostname은 제가 이미 ubuntu로 바꿔놓은 상태이기 때문에, hosts 부분만 바꿔주면 됩니다. 결국 현재 상황을 보면, 호스트 이름은 바뀌었는데, 호스트가 등록되어있지 않으니 에러 메세지가 자꾸 나왔던 셈입니다.

sudo nano /etc/hosts 명령어로 nano 편집기로 들어가서 내용을 살펴보니, 127.0.1.1 부분에 아직 바뀌지 않은 HP sleekbook 15 어쩌고 하는 옛날 이름으로 지정되어있길래 아래와 같이 ubuntu로 수정해주었습니다.

파일을 저장해주고 나서  아래 명령어를 입력해서 서비스를 재시작 시켜주면 완료됩니다.

본 내용은 http://zzaps.tistory.com/283 의 포스팅을 참고하였습니다.

 HTTPS 보안 프로토콜로 바꾸고 나니 이래저래 네이버와 충돌이 많습니다.

네이버 블로그

일단 네이버는 제가 운영하는 블로그에서 발행하는 RSS 피드 조차 인식하지 못합니다. 기존에 이용하던 이웃커넥트 서비스가 갑자기 http에서 https라고 한글자 추가됐는데 정상적인 블로그가 아니라고 퇴짜를 놓습니다.

네이버 웹마스터 도구에 RSS 피드를 제출했는데도, 제출되지 않았다고 뜹니다. 뭐 이건 네이버에서 처리하는데 시일이 좀 걸릴지도 모르니 일주일 정도는 지켜봐야겠죠.

더더욱  불만스러운건 네이버 블로그에 따로 저의 포스팅 업데이트 내용을 올리려고 블로그에 글을 붙여넣으면 제  워드프레스 블로그 링크를 인식하지 못한다는겁니다. 도대체 이게 무슨 이유인가 싶어 이래저래 검색을 해봤죠.

마침 저와 같은 문제를 겪고 계신 분이 있더군요.

이 분은 AlphaSSL을 이용하고 계시는 상황에서 겪는 현상이고, 저는 letsencrypt 인증서를 이용하는 상황이라 인증서는 다르지만, 일단 네이버에서 SSL 보안 인증된 사이트들에 대해서 외면하고 있다는 것이 좀 황당합니다. 허술하면 받아주고, 깐깐하면 돌려보내는게 말이 되나 싶기도 하고…

여튼 다행히도 위의 분이 해결책도 찾아서 남겨주셨습니다.

다행히도 이 포스팅에서 소개해주신 인증방법으로 교체한 다음에는 네이버 블로그에서도 정상적으로 링크를 인식합니다. 덕분에 골치 썪는 문제를 해결 할 수 있어서 무척 고맙습니다.

다음 주말 쯤 RSS 피드만 정상 적용되는지 살펴보고 기다려보면 대략적인 문제는 해결 될 것 같습니다

워드프레스 컨디셔널 태그 – WordPress Conditional tag

워드프레스에서는 Conditional Tag – 컨디셔널 태그라고 상황에 따라 화면에 노출되는 내용을 제어해주는 기능이 있습니다. 먼저 제가 겪은 상황을 하나 예를 들어보겠습니다.

CASE – 구글 애드센스 광고 삽입과 관련된 문제

구글애드센스 광고를 손쉽게 삽입해줄 수 있는 easy adsense 라는 플러그인을 사용하고 있었습니다. 워드프레스는 플러그인이 운영을 편리하게 도와주지만, 플러그인이 많을수록 사이트가 무겁고 느려집니다. 웹브라우저에 보여지기까지 이것저것 불러들어야할 것들이 많아진다는 이야기죠.

하지만 구글 애드센스 광고를 굳이 그렇게까지 플러그인에 의존해서 과한 로딩을 만들어주고 싶지 않아서 직접 코드를 삽입하기로 했습니다. 그런데 문제가 생겼습니다. 테마에 따라 다르게 설정되어있습니다만, 워드프레스 상에서 TwentySeventeen 테마의 single.php 기본 코드를 확인해보면 아래와 같은 구문이 발견됩니다.

content라는 템플릿을 호출해서 사용한다는 이야기인데요. 해당 템플릿 파일은 themes/twentyseventeen/template-parts/post/content.php  이런 경로를 타고 가서 필요한 내용을 불러다 쓰게 만들어져 있습니다.

대략적으로 구조를 단순하게 파악하자면 아래와 같이 이해할 수 있습니다.

그래서 본문에 구글 애드센스 소스코드를 삽입하면, 아래와 같이 정상적으로 글 상단에 연금저축과 관련된 광고가 노출되는 구글애드센스가 삽입된게 보입니다.

구글애드센스

본문에서는 원하는 위치에 제대로 삽입된것이 확인됩니다.

그런데 문제는 목록화면에서도 제가 삽입한 구글 애드센스 코드가 노출된다는겁니다. 바로 아래사진처럼 말이죠.

구글애드센스

제목과 섬네일이미지와 구글애드센스가 죄다 뒤섞여있는 총체적인 난국입니다.

제가 원하는건 그저 본문 상단과 하단에 노출되는 것인데, 이렇게 컨텐츠를 죄다 가리는 상황을 바라는건 아니었습니다. 그래서 이 상황을 어떻게 해결해야하나 보니 컨디셔널 태그를 활용하면 된다는 답을 얻었습니다. 역시 구글.

컨디셔널 태그 Conditional Tag

컨디셔널 태그는 워드프레스 코덱스 페이지  에서 더 많은 상황을 제어할 수 있도록 소개하고 있지만, 저는 지금 첫 화면에서 보여지는 목록에서 구글애드센스가 뜨지 않도록 하고 싶은 상황이기 때문에 is_home() 과 is_front_page() 컨디셔널 태그를 활용하기로 했습니다. is_front_page() 만 사용해도 해결이 되는 상황입니다만, 블로그 페이지를 따로 보여질 상황을 위해서 is_home() 까지 설정해주는 것이 권장되는 상황입니다.

보통 첫화면 에서 is_home() 과 is_front_page()를 동시에 사용할 경우엔 아래와 같은 방식으로 사용됩니다.

위의  php 코드 내용은 이런 뜻입니다 “만약에 첫 화면(정적인페이지,최근글) 그리고 블로그 화면 이라면 수행해야할 명령” 그런데 제가 하고 싶은건 첫화면이나 블로그 화면이라면 하지마! 라는 명령을 하고 싶은 상황입니다. 그런 경우엔 아래처럼 사용해야합니다.

차이점은 느낌표가 앞에 들어간 겁니다. 보통 프로그래밍을 배울때 if문을 배울때 느낌표가 앞에 들어가면 not이라는 의미라고 설명합니다만, 저는 이해가 잘 안가더군요. 그래서 그냥 이해하기 쉽게 이야기하자면 저런 상황에서는 이런걸 하지말라는 의미로 쓰는겁니다.

그래서 위의 컨디셔널 태그를 활용해서 구글 애드센스가 첫화면에서는 보여지지 말라고, 느낌표를 붙여서 소스 코드를 삽입해주었더니 정상적으로 작동하게 됐습니다.그 결과는 아래와 같습니다.

애드센스

지저분하게 구글애드센스가 목록에 노출되지 않게 되었습니다

  1. 워드프레스란
  2. 워드프레스의 용도
  3. 워드프레스를 사용하는 두 가지 방법
    1. 로컬 설치
    2. 서버/호스팅 설치
  4. 워드프레스를 더욱 유용하게 해주는 것들

워드프레스란

워드프레스 – WordPress는 CMS입니다. Contents Management System – 컨텐츠 관리 시스템이라고 합니다만, 쉽게 생각하면 워드프레스 자체가 블로그에서 시작되었다는 점을 들어 ‘글을 효율적으로 관리해주는 프로그램’이라고 생각하면 좋습니다.

블로그를 장기간 운용하다보면 수천개의 글들과 그에 따른 미디어 파일들도 수 없이 많이 늘어나기 마련인데요. 이러한 부분들을 손쉽게 관리해줄 필요가 있기 때문에 생겨났다고 볼 수 있겠죠. 다만 윈도우나 맥 같은 OS에서 돌아가는 소프트웨어가 아니라 서버/호스팅에 설치해서 사용하는 웹 응용소프트웨어입니다.

워드프레스의 용도

워드프레스가 블로그에서 시작되었지만, 오픈 소스로 공개되어 운용되다보니 많은 사람들이 직접 필요한 기능들을 덧붙이기 시작했고, 이러한 기능들 또한 무료로 많이 공개되었습니다. 그러다보니 점차 사용자가 늘어나고 사용자들이 직접 참여해서 만들어가는 형태가 되서 더더욱 효율적인 면모로 거듭나는 선순환 구조가 성립됐습니다.

이러한 강력한 생태계가 성립된 덕분에 워드프레스는 다양한 용도로 뻗어나갈 수 있게 되었습니다. 플러그인이라고 불리는 추가 기능들을 가져다 설치하면 워드프레스는 쇼핑몰이 될 수도 있고, 커뮤니티가 될 수도 있고, 갤러리/포트폴리오 사이트로 변신할 수도 있습니다. 기업 홍보용 홈페이지는 물론이고, 언론사 홈페이지로 활용되는 사례도 있습니다.

www.news-y.co.kr www.news-y.co.kr

하지만 워드프레스가 만능은 아닙니다. 어디까지나 기본은 블로그에서 시작되었기때문에, 쇼핑몰 기능을 이용했을때 장기적인 측면에서 봤을때 국내 솔루션들에 비해서 부족한 기능들이 많아서 필요한 기능들을 구현하기 위해서는 개발자 없이는 어려운 실정입니다. 추가적인 기능을 지나치게 많이 추가하면 사이트가 무거워져서 로딩이 오래 걸리거는 문제도 발생할 수 있음을 간과할 수 없습니다.

그럼에도 불구하고 전세계의 25% 가량의 웹사이트가 워드프레스로 만들어지는 이유는 10이라는 목표에 도달하기 위해 1부터 시작하지 않고, 적어도 4~5에서 시작할 수 있기때문에 상대적으로 가벼운 접근성에서 그 장점을 찾아볼 수 있습니다.

특별한 기능 추가가 필요하지 않다면, 이미 만들어진 기능 안에서 디자인 정도는 HTML/CSS에 대한 기술을 가진 디자이너 혼자서도 충분히 활용 가능한 수준이기 때문입니다.

워드프레스를 사용하는 두 가지 방법

워드프레스는 보통 설치형 블로그라고 알려져 있습니다만, 네이버 블로그나 텀블러, 블로거처럼 가입하면 바로 사용할 수 있는 가입형 블로그 서비스도 제공되고 있습니다.

워드프레스 닷컴에서는 가입형 서비스를 제공하고 있기때문에 가입과 동시에 무료로 블로그를 이용할 수 있긴 합니다만, 추가적인 기능을 추가하거나 테마 (스킨)을 바꾸기 위해서는 추가적인 사용요금이 발생할 수 있습니다.

기본적으로 주어지는 기능과 무료 테마로도 충분히 이용은 가능합니다만, 입맛대로 고쳐쓰려면 돈이 드는 셈이죠.

워드프레스 org 에서는 워드프레스 웹 응용소프트웨어를 다운로드 받을 수 있습니다. 서버에서 직접 압축해제 할 수 있는 tar.gz 파일이나 하드에서 압축을 풀 수 있는 zip 파일로 제공됩니다. 이 말은 가입해서 사용하는게 아니라 직접 서버나 호스팅에 설치해야 사용이 가능하다는 이야기입니다.

설치형 워드프레스 로컬 설치

위의 방법은 워드프레스를 내 컴퓨터에 설치해서 어떻게 돌아가는지 확인해볼 수 있는 방법입니다. 추가적인 비용이 필요하지 않고, 실제로 워드프레스가 어떻게 작동하는지 공부하기 좋은 방법입니다. 하지만 특별한 설정 없이는 외부에서 내가 만든 워드프레스 사이트를 접속할 수 없기때문에 특별히 개발이나 공부 용도로 사용하기에 좋은 방법입니다. 위의 튜토리얼에서는 오토셋을 활용한 방법을 보여주고 있습니다만, WAMP1 나 APM2  이나 어떤 방법이건 PHP 웹서버를 구축할 수 있는 방법이라면 상관 없습니다.

맥에서도 물론 사용이 가능합니다. WAMP나 MAMP나 이미 눈치 채셨겠지만, 모두 앞글자가 OS를 이야기하는 것이죠. 리눅스에서도 LAMP를 이용해서 설치할 수 있습니다. 관련 컨텐츠는 제가 얼마전에 작성한 포스트를 참고하시면 도움이 될 것입니다.

설치형 워드프레스 호스팅 설치

해당 튜토리얼에서는 닷홈을 이용한 설치를 안내하고 있습니다만, 유료호스팅이라고 할지라도 대부분 방법이 유사합니다. 카페24와 같이 사용자가 많은 호스팅들은 더욱 간편하게 워드프레스를  버튼하나로 설치할 수 있는 옵션을 제공하기도 합니다.  하지만 별도로 하위 폴더를 생성하고 설치하는 경우도 있기때문에 직접 설치하는 방법을 추천하고 싶습니다.

설치과정을 간략하게 요약하자면 아래와 같습니다.

  1. wordpress.org 에서 워드프레스 압축파일을 받아서 압축을 풀어 놓는다.
  2. ftp 접속을 통해 (ftp 접속 관련정보는 호스팅마다 별도로 제공하고 있는 내용을 참고합니다) 압축이 풀린 파일들을 올립니다.
  3. 업로드가 끝나면 해당 도메인으로 접속합니다.
  4. 설치화면에서 요구되는 내용(은 호스팅에서 제공되는 정보를 참고해서 입력합니다.

위의 단계를 통해서 설치가 완료되기때문에 적절한 데이터를 입력하는 것만으로 간단하게 끝납니다.

워드프레스를 더욱 유용하게 해주는 것들

워드프레스를 더욱 효율적으로 사용하기 위해서는 플러그인이라는 외부기능들을 설치해 주어야 합니다. 아래에서는 워드프레스를 처음 설치하고 거의 필수적으로 설치해야할 플러그인들을 소개 하고 있습니다.

젯팩

젯팩은 워드프레스를 만든 매트 물렌웨그의 회사 automattic에서 제공하는 플러그인입니다. 자유로운 선택권을 주기 위해서인지 처음부터 설치되어있지는 않지만, 많은 사용자들이 거의 필수적으로 설치하고 있습니다. 관련 포스트 노출, 소셜 공유 기능 등 편리한 기능들을 제공하고 있습니다.


아키스멧

아키스멧 Akismet은 스팸 댓글들을 걸러주는 유용한 플러그인입니다. 이 플러그인도 필수로 추천되는 플러그인 입니다.


Yoast SEO

Yoast SEO 와 All in one SEO 두가지 플러그인이 거의 막상막하로 선호되고 있습니다만, 늘 All in one SEO를 쓰다가 바꿔봤는데 생각보다 만족스러워서 Yoast SEO를 활용하고 있습니다. SEO는 사이트 검색 노출에서 중요한 부분이기 때문에, 플러그인의 도움을 받는 것이 좋습니다.


Google XML Sitemaps

사이트맵을 만들어주는 플러그인입니다. 구글이나 네이버에 사이트맵을 제출할때 필요합니다. 사이트맵을 제출해야 검색결과에 수월하게 반영되기 때문에 이 플러그인도 필수적으로 설치하는 것이 좋습니다.


Updraft Plus WordPress Backup PlugIn

백업 플러그인은 갑작스레 워드프레스 사이트가 망가졌을 경우 백업본을 이용해 되살릴 수 있도록 도와주는 플러그인입니다. 네이버 블로그와 같은 가입형 블로그와 다르게 워드프레스 설치형 블로그는 사용자가 직접 컨텐츠에 대해 보호하고 관리해줘야할 필요가 있습니다. 따라서 백업은 항상 중요하게 강조해도 모자라지 않습니다. 몇가지 설정을 통해서 구글 드라이브나 드롭박스 같은 클라우드에 스케쥴에 맞춰 자동으로 백업본을 저장해줄 수 있으므로 무척 편리하게 사용할 수 있습니다.


이 밖에도 유용한 플러그인들은 무척이나 많습니다만, 다짜고짜 좋다고 무작정 다 깔아놓다보면 사이트가 너무 무거워지기때문에 적절히 필요한 것들만 설치해주는 것이 좋습니다. 그리고 워드프레스가 업데이트 될때마다 플러그인들도 같이 업데이트가 되는데 제작자가 신경쓰지 않고 내팽겨쳐놓은 플러그인들도 있습니다.

이미 워드프레스에 기능이 삽입되서 더 이상 사용할 필요가 없어진 플러그인이거나 인기가 없는 플러그인들은 그렇게 사장되기도 하기 때문에, 잘못 설치하면 사이트가 마비되는 상황도 발생 할 수 있습니다. 따라서 가급적이면 사람들이 많이 이용하고, 최근에 나온 플러그인을 사용하는 것이 안전한 방법입니다.


  1. WAMP = Windows + Apache (서버) + MySQL(DB) + PHP(언어) 
  2. Apache (서버) + PHP(언어) + MySQL(DB)