웹,그래픽디자인을 비롯해 운영일지 형식으로 웹에 전반적인 관련 내용들을 다루고 있습니다.

최근에 sass에 관심을 갖게 되면서 기존의 css를 어떤식으로 바꿔서 사용할 것인지 한 번 테스트를 해봤습니다. 현재 대부분 사람들이 사용하는 브라우저 상에서는 sass를 해석해서 보여주는 기능은 없습니다.  그래서 sass로 만든 문서는 css로 변환해주는 – 컴파일 과정이 필요합니다. sass는 로컬상에서 작성해서 css라는 결과물로 출력해줘야한다는 이야기입니다. 다만, sass로 css 출력물을 받아보면 체계적으로 잘 정리해서 내놓기때문에 별도로 손댈 것들이 없습니다.

그리고 sass 상에서 주석을 잘 달아놓으면, 나중에 쉽게 가져다 쓰기 좋습니다. 아직은 능숙하게 다룰 수 있는 수준이 아니어서 조잡한 수준으로 활용하고 있습니다만, mixin 기능이 무척 강력하다는걸 조금씩 인지하고 있습니다. mixin을 잘 활용하면 굳이 부트스트랩과 같은 무거운 프레임워크에 의존하지 않고, 다양한 디자인으로 만들어갈 수 있을 것 같아서 오히려 더 매력적으로 다가옵니다.

less를 주로 지원하던 부트스트랩이 차기 버전부터 sass를 지원하기 시작한걸 보면, sass가 얼마나 빠르게 성장하는지 알 수 있습니다. 당장 새롭게 공부해야한다는 점에서 sass가 오히려 처음에는 css보다 작성하는데 속도가 더디겠지만, 추후 관리 면에서는 css보다 훨씬 체계적이고 직관적으로 관리가 가능할 것 같습니다.

이미 여기저기에서 mixin을 서로 공유하는 프론트엔드 개발자들도 많은 걸 보니, 손쉽고 빠른 프론트엔드 개발을 위해서도 sass는 더더욱 중요하게 자리잡을 것 같습니다.

아래 예제는 각각 html과 SASS(scss)로 작성한 코드가 브라우저 상에서 어떻게 작동하는지 확인해볼 수 있는 간단한 예제입니다. header 상에 존재하는 상단 메뉴의 경우 이렇게 만들 수 있다라는 것을 보여주기 위해 작성한 코드입니다. 깔끔하지는 못하지만, css를 이미 알고 계실 경우에는 대충 어떤 구조인지 파악해볼 수 있을 겁니다.

 

 

 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 의 포스팅을 참고하였습니다.

미처 스크린샷을 찍지 못했는데, 서버에 처음 접속하면 아래와 같이 업데이트 가능한 정보에 대해서 미리 알려줍니다. 정기적으로 업데이트 되는 내용들을 반영해주지 않으면, 보안과 관련해서 문제가 될 수 있으니 아래처럼 나오는 메세지를 잘 확인해줘야합니다.

문제는 위의 내용을 보고 보통 sudo apt-get update 와 sudo apt-get upgrade를 통해 업데이트 된 내용들을 적용해줍니다만, 제가 지금 겪은 에러는 sudo apt-get upgrade를 할때 “/usr/sbin/update-info-dir: 3: /etc/default/locale: //: Permission denied dpkg: error processing package install-info (–configure)” 이런식의 에러메세지를 뿜어내며 진행이 안되더군요. 최종적으로는 “E: Sub-process /usr/bin/dpkg returned an error code (1)” 나왔습니다만, 그 전에 installation-info에 문제가 있다는 에러메세지였습니다.

무슨 이유인지 아무리 뒤져도 나오지 않았습니다만, 한가지 껄끄러운 부분이 있었습니다. locale 설정과 관련해서 제가 default 상태가 아니라 한글로 변환해줬던 적이 있는데, 아마도 이게 문제가 되지 않나 싶더군요.

그래서 sudo nano /etc/default/locale 파일을 아래와 같이 다시 수정해주었습니다.

그리고 sudo update-locale 명령으로 변경된 내용을 적용을 해주고 나니, 다시 우분투가 영문으로 나오기 시작했고 sudo apt upgrade 명령도 정상적으로 수행하기 시작했습니다.

우분투 서버에서 워드프레스 사이트를 운영하면서 한글 주소를 사용하다보니 locale 설정도 변경해줘야하는 줄 알고 적용했던 부분인데, 사실상 우분투 ssh 접속시에 나오는 메세지 일부가 한글로 바뀐다는것 이외에 워드프레스 사이트에 영향을 주지는 않습니다. 알면서도 귀찮아서 그냥 놔뒀는데 이런식으로 업그레이드 상황에서 문제가 터질거라고 생각은 못했네요.

여튼 locale 설정을 바꿔줘서 문제는 해결이 됐습니다.

 

SSL 인증서 – 보안에 신경을 써보자

ssl

네이버에서도 보안이 중요하다고 여겨지는 페이지에는 https 프로토콜을 적용하고 있습니다.

SSL 인증이라는 것은 해당 인증이 적용된 사이트가 개인정보와 같이 민감한 내용들을 탈취 당하지 않도록 보호받고 있다는 이야기입니다. 이번에는 호스팅을 사용하던 때와 달리 아마존 웹 서비스로 옮기면서 서버를 직접 세팅할 수 있게 되었기때문에 SSL 인증서를 직접 설치해봤습니다.

특히나 쇼핑몰처럼 개인 정보를 다루는 곳에서는 SSL 인증서를 필수적으로 설치해야하는데요. 비용이 드는 유료 서비스와 공개적으로 무료 배포중인 서비스들이 있습니다. 유료냐 무료냐에 따라 특별히 성능 차이가 있는 것은 크게 없고, 무료 서비스의경우 3개월마다 새롭게 갱신해줘야하는 번거로움이 뒤따른다는 것이 유일한 단점입니다.

제가 SSL 인증서를 설치하면서 참고한 포스팅들은 아래와 같습니다. 이 곳에 기술된 내용들은 모두 아래의 사이트에서 참고하여 저의 환경에 맞춰서 조금씩 수정해서 작성되었습니다만, 좀 더 깊이 있는 이해를 위해서는 아래 사이트들을 참고하시길 바라겠습니다.

  • https://www.xpressengine.com/tip/23021383
  • http://stonerain.tistory.com/119
  • https://blog.lael.be/post/5107
  • https://blog.lael.be/post/73

그리고 이 사이트 – blog.illustudio.co.kr 이 운영되는 환경은 아래와 같습니다.

  • 우분투 리눅스 16.04.1
  • 아파치 2.4.18

1차적으로 해준 작업은 letsencrypt 설치입니다. 우분투 16.04 이상의 버전이라면 아래 명령어로 바로 설치가 가능합니다.

letsencrypt 설치가 끝나고나면 이제 인증서를 다운로드 받을 차례입니다. 아래 명령어를 입력해서 다운받고자하는 사이트를 명시해줘야합니다.

저의 경우엔 절대경로에 워드프레스가 설치되어있는 패스를 지정해주고, 도메인에는 현재 서비스되고있는 blog.illustudio.co.kr이라는 주소를 입력했습니다. 도메인별로 인증서를 따로 받아야하기때문에 -d 옵션을 반복적으로 넣으면서 여러개의 도메인 설치도 가능하다고 합니다만, 저의 경우엔 illustudio.co.kr도 같이 넣으니 에러가 발생해서 하나씩 진행하기로 했습니다.

이메일 주소를 입력받는 확인 창이 뜨고 난 뒤로는 정상 설치가 진행됐을 경우 안내 문구가 출력됩니다만, 에러가 발생하면 에러메세지에 따라 적절한 조치가 필요합니다.

아파치 서버 설정

그리고 https://blog.illustudio.co.kr 이라는 주소가 실질적으로 사용되기 위해 필요한 작업을 apache 설정 파일에서 명시해주도록 합니다. 아래 명령어를 통해 아파치 설정 파일을 열도록 합니다.

‘설정파일’이란 파일 이름은 상황에 따라 다르게 적용되야합니다. default를 그대로 쓰시는 분들도 있겠지만 저의 경우엔 blog로 따로 설정파일을 만들어서 관리해줬습니다. 그리고 아래 내용을 새롭게 추가했습니다.

HTTPS 프로토콜은 443 포트로 들어오기때문에 80번 포트로 들어올 경우 필요한 내용을 기술했더라도 443 포트로 들어올 경우에 어떻게 작동할 것인지 위에 기술한 소스 코드를 추가해주어야 됩니다. 그리고 아래의 명령어를 순서대로 입력해 SSL을 활성화시키고, 수정한 설정파일을 사용할 수 있도록 활성화시키고, 아파치 서버를 재시작해주면 됩니다.

그리고 추가적으로 서버상에서 443포트를 허용해주는 아래 명령어도 입력해줍니다.

위의 명령어를 입력하긴 했습니다만, 만약의 경우를 위해 저는 아마존 웹서비스 상에서 Security Groups 메뉴에서 https 443포트를 허용하는 규칙을 하나 더 추가했습니다.

SSL 적용 상태 확인 및  체크

SSL이 제대로 적용되고 있는지 체크하는 사이트를 통해 점검을 해봤습니다.

그 결과가 아래 스크린샷입니다.

SSL 인증서

정상적으로 모두 검사를 통과했네요

그리고 아래 사이트를 통해서 인증서도 제대로 설치되었고, 보안도 제대로 작동하고 있는지 등급을 체크해볼 수 있습니다.

 

SSL

A 등급이 나왔군요. 다행입니다. 저는 구형브라우저는 배려하지 않습니다.

A등급이 나왔다는건 SSL 인증서가 완벽하게 설치됐으며, 보안이 취약한 구형 브라우저(대표적으로 IE6~8) 에서는 정상작동하지 않는다는 이야기입니다. B등급 정도면 제대로 설치도 됐고, 대부분의 브라우저에서 작동한다는 이야기이고, C등급이 나왔다면 SSL 인증서를 설치하나 마나라는 이야기입니다.

인증서 자동 갱신

그리고 letsencrypt SSL 인증서는 3개월마다 한번씩 인증을 새롭게 해줘야하기때문에 까먹고 있다가는 어렵게 해놓은 인증서가 도루묵이 됩니다. 그렇다고 3개월마다 꼬박꼬박 챙기기도 어려우니 자동으로 매주 월요일 새벽에 업데이트 내용을 확인하고 자동으로 인증하는 코드를 추가했습니다. – https://blog.lael.be/post/5107 4번 챕터 참고

아래 명령어를 입력해 자동으로 수행할 명령을 입력할 수 있는 화면으로 진입합니다. 에디터를 고르라는 창이 뜰 경우 원하는 에디터를 선택하면 됩니다. 저는 2번 nano가 쉽고 편해서 nano로 편집했습니다.

편집 창이 뜨면 아래 소스코드를 맨 하단에 넣어줍니다. 제가 참고한 사이트에서 설명하는 바에 의하면 “월요일 5시 10분에 새로운 인증서가 발급됐는지 확인하고 적용한다음, 5분뒤인  5시 15분에 아파치 서버를 리로드 하는 명령이 순차적으로 진행”되도록 예약해놓는 내용이라고 합니다.

ssl

이런식으로 작성되었습니다.

워드프레스 접속 주소 설정

이제 마지막으로 워드프레스 상에서 설정 > 일반으로 들어가서 아래와 같이 https로 주소를 바꿔주고 저장해주어야합니다.

저의 경우에는 관리자 화면으로 바로 들어갈 수가 없어서 어쩔수 없이 phpmyadmin으로 접속해서 데이터베이스상에서 wp_options 테이블에서 바로 수정해주었습니다. 혹시라도 사이트 주소를 잘못 바꿔서 정상접속이 안될 경우에도 아래 사진과 같이 데이터베이스상에서 직접 수정해주면 잘못 연결된 워드프레스 주소를 정정 할 수 있습니다.

이러한 과정을 모두 마무리하고 웹브라우저에서 https://blog.illustudio.co.kr로 접속하면, 아래와 같이 PC와 모바일 브라우저에서도 보안상 안전한 사이트라고 안내되는걸 확인할 수 있습니다.

ssl

PC용 구글 크롬 브라우저 주소창

ssl

아이폰용 사파리 모바일 브라우저

ssl

아이폰용 구글 크롬 모바일 브라우저

HTTPS 보안 프로토콜로 접속되도록 설정

하지만 보통 사용자들이 입력할때 https://까지 입력하는 경우는 흔치 않습니다. 보통 그냥 blog.illustudio.co.kr을 입력하는 편이 더 자연스럽죠. 이런 경우에는 힘들게 https로 준비된 사이트임에도 불구하고 http로 접속이 됩니다.

그래서 아파치 mod_redirect 를 이용해 http 즉 80번 포트로 접속할 경우 강제로 https 프로토콜로 접속하도록 설정해주는 부분을 추가했습니다. 참고 – http://taesachi.com/?p=6 

아래 화면과 같이 virtualhost 80번 포트 접속시에 리다이렉트 시키도록 설정 된 부분이 맨 밑에 기술 되어있는 것을 확인할 수 있습니다.

이 과정을 모두 마무리 한다음 다시 아파치 서버를 재시작 (sudo service apache2 restart) 시켜주면 별도 입력 없이도 https 보안 프로토콜을 통해 접속하는 것을 확인 할 수 있습니다.

좋은 내용을 공유해주신 분들 덕분에 성공적으로 SSL 설치를 마칠 수 있었습니다. 추후에 다시 설치할 불상사(?)를 겪을지도 몰라 설치 과정을 기록하는 차원에서 포스팅했습니다.