Whitespace debugging in DevTools in action

구글 크롬 위주로 사용하다가 파이어폭스로 옮겨타보려고 시도중입니다. 여느때와 다름없이 퍼블리싱을 하던 중 이상한 현상이 나타났습니다. 무슨 짓을 해도 레이아웃이 틀어지는 기이한 상황(?)이었는데, 도대체 무슨 상황인지 파악이 안되서 애꿎은 css만 계속 수정했습니다만 엉뚱하게도 원인은 공백문자 – whitespace text node 문제였습니다.

크롬과 달리 파이어폭스에서는 html 태그에서 한칸 띄어쓰기를 한것 까지 잡아내서 기어코 공백으로 표현하는 과잉 친절을 베푸는데, 바로 이게 원인이었습니다.

위와 같은 문제(?)때문에 약간의 공간을 표시하면서 결과적으로 전체적인 레이아웃이 틀어졌던 것입니다. 보기 좋게 줄바꿈을 한 덕분에 삽질을 하게 됐네요. 일단 이렇게 또 삽질하면서 한 수 배웠습니다.

 

 

요 며칠동안 꼬여있던 SSL 설정을 해결해보려고 삽질을 했습니다. 아마존 라이트세일 로드밸런서를 사용해도 인증서 발급만 자동으로 해줄뿐, 아파치 서버 설정까지 만져주는것은 아니더군요. 그래서 결국 직접 전부 세팅하게 되었는데, 차후에 또 생길지 모를 일이니 기록하고자 합니다.

작업의 목적은 포트폴리오 사이트, 블로그, 새로만들 포럼 사이트를 각각 virtualhost로 지정해주고, SSL까지 적용하는 것입니다. 작업의 흐름은 아래와 같습니다.

  1. VirtualHost 80 적용.
  2. SSL 인증서 발급
  3. crontab을 이용한 자동 갱신 적용
  4. VirtualHost 443 적용
  5. http 접속을 https로 강제 리다이렉트 redirect
  6. the requested url was not found on this server 에러 발생 해결

 

1.VirtualHost 80 포트 적용

기본적으로 아마존 라이트세일에서 bitnami wordpress로 설치했다면, /opt/bitnami/apache2/conf/extra/httpd-vhosts.conf 파일을 통해서 virtualhost 적용을 하는 것이 편리합니다. 물론 /opt/bitnami/apache2/conf/httpd.conf에서 include /opt/bitnami/apache2/extra/httpd-vhosts.conf에 대한 주석을 제거해서 적용할 수 있도록 먼저 설정해줘야합니다. 아래 내용은 마지막에 또 다시 변경해줘야하므로, 중간과정으로 이해하길 바랍니다.

80포트로 접속했을 경우를 설정해주고 sudo /opt/bitnami/ctlscript.sh restart apache 명령으로 변경된 설정을 적용해줍니다.

2.Certbot-auto를 이용해서 SSL인증서 발급

sudo mkdir /opt/bitnami/letsencrypt 명령을 이용해서 폴더를 생성한 다음 그 곳( cd /opt/bitnami/letsencrypt )에서 아래 명령을 통해 certbot-auto를 다운로드 받고, 파일 권한을 변경해줍니다.

그다음 아래 명령으로 인증서를 발급받습니다. 저같은 경우엔 illustudio.co.kr / blog.illustudio.co.kr / forum.illustudio.co.kr 이렇게 세 차례에 걸쳐서 작업을 해줬습니다.

3.Crontab을 이용한 갱신 자동화

letsencrypt 인증서는 무료인 대신 90일마다 갱신을 해줘야합니다. 그래서 자동으로 갱신될 수 있도록 crontab 명령에 아래 내용을 추가합니다. 매월 초마다 새벽 3시마다 명령이 실행되고, 아파치가 재실행 됩니다. /opt/bitnami/letsencrypt라는 경로는 제가 certbot-auto를 설치한 경로이므로, 본인이 다른 경로에 설치했다면 맞는 경로로 변경해줘야합니다.

2018.8.4일 추가 – blog.illustudio.co.kr은 정상적으로 renew 명령이 작동합니다만, illustudio.co.kr 은 정상적으로 작동하지 않는 문제를 찾았습니다. 검색을 좀 해보니 http 프로토콜로 접속이 되야하는데 강제로 https로 리다이렉트 시켰기 때문에 생기는 문제인 것 같습니다. blog.illustudio.co.kr에도 적용된 사항인데, 유독 illustudio.co.kr만 되지 않는 것이 좀 의아하네요. 아무튼 이 부분은 일시적으로 https 리다이렉트 부분을 수정해서 아파치를 리부트 시킨 후 certbot-auto renew를 하니 정상적으로 갱신 되는 것이 확인됐습니다. 다시 해결책을 찾게 되면 추가 포스팅 하도록 하겠습니다.

4.VirtualHost 443 포트 적용

SSL 인증서 설치까지 완료 됐으니 HTTPS 프로토콜을 사용할 수 있도록 443 포트 설정을 해줘야합니다. 사실, 이 과정까지 오기전에 라이트세일 인스턴스에서 https 443 포트도 사용할 수 있도록 설정해주는 것이 좋습니다. 기본적으로 80, 22, 443, 3306 포트는 사용할 수 있도록 설정하는 것이 관리상 편리합니다. 443 포트에 대한 설정은 아래와 같습니다. 이 부분도 중간과정입니다.

기본적으로 illustudio.co.kr의 경우만 해놨습니다. 이전 과정으로 심볼릭 링크를 걸어주는 방법이 있는데, 사이트가 여러개일 경우엔 그 방법으로 컨트롤 하기 어렵다고 생각되서, 이렇게 바로 발급된 링크를 연결해줬습니다.

여기까지 하고 나면, http와 https 둘다 연결이 될 수 있도록 설정이 된 상태입니다. 하지만, https로 강제로 사용할 수 있도록 설정해주기로 했습니다.

5. http 접속을 https로 강제 리다이렉트 redirect

RewriteRule을 검색해서 HTTP_POST나 SERVER_NAME으로 설정하는 방법도 있지만, 그냥 무식하게 해당 도메인으로 바로 연결해버렸습니다. 사실 포폴 사이트, 블로그, 포럼 셋다 전부 저런식으로 각각 설정해줘야했기때문에 상관 없을 것 같습니다. 여기까지하면, http로 접속해도 자연스럽게 그냥 https 프로토콜로 접속이 되는 것을 확인할 수 있습니다. 80포트에 대한 virtualhost 설정은 이것이 최종 결과물입니다.

문제는 여기서 블로그나 포폴사이트 게시글을 클릭했을때 the requested url was not found on this server 에러가 발생하는것을 발견해서 그 부분을 해결해주는 내용이 필요했습니다.

6.the requested url was not found on this server 에러 발생 해결

게시글을 눌렀을때 the requested url was not found on this server 에러가 발생하는 것은 이런식으로 해결해주었습니다. 역시 구글의 도움을 많이 받았습니다. 일요일 오후부터 끙끙 매고 여기까지 오는데 3일 정도 걸린것 같습니다. 모든 문제가 정상적으로 해결되었습니다. 443포트에 대한 virtualhost 설정도 이것이 최종 결과물입니다.

 

기존에 사용하던 테마는 automattic에서 제공하는 Underscores starter theme을 이용해서 제가 직접 만들어서 사용했는데, 포트폴리오 사이트를 kalium 테마를 구입해서 만들고나서 보니 생각보다 괜찮더군요. 그래서 묵혀두었던 enfold 테마도 좀 개선되었겠지 싶은 생각이 들었습니다. enfold 테마를 다시 공부해보고 싶어서 변경해봤습니다. 그런데 이거 참 시간들여서 한참 만졌는데도 후회가 될 정도로 엉망이네요.

이게 제가 잘못해서 설정을 못하고 있나 싶어서 한참 끙끙매던 부분인데, 반응형 테마로 적용했을때 햄버거 메뉴가 뜨지 않는 오류가 있습니다.  왜 이런 상황이 발생하는가 봤더니 ul을 감싸고 있는 div 태그를 display:none으로 놓고 햄버거 메뉴는 그나마 ul 하위의 li에서 뜨게끔 해놨더군요.

div > ul > li 이런 구조로 되어있는 상황에서 div에 display:none을 걸어놓으면 당연히 그 하위 태그들은 전부 노출되지 않죠. 도대체 왜 이런 구조로 짰는지 알 수가 없습니다만, enfold와 같은 손쉬운 제작을 표방하는 테마들은 이런식으로 크고 작은 문제들이 있는것 같습니다. enfold mobile menu not working으로 검색해보면 정말 수두룩하게 나올 정도라 문제가 심각해보이는데도 좀처럼 해결되지 않고 있는 상황입니다.

어찌됐건 조만간 테마를 다시 만들도록 하고, 일단은 하루종일 끙끙대며 세팅을 했으니 당분간은 enfold 테마로 블로그를 운영해야겠습니다. 덕분에 모바일에서는 메뉴를 구경할 수 없음을 참고하세요 ㅋㅋㅋㅋ 이거 참 심각하네

포트폴리오 사이트를 전부터 오픈하려고 벼르고 별렀습니다. ‘중이 제 머리 못 깎는다’는 말처럼 자기 사이트를 만드는데 시간을 투자한다는게 참 쉽지 않더군요. 그래서 그냥 유료테마를 구입해서 커스터마이징 하기로 했습니다. 일단은 오픈부터 하고 봐야지 싶어서 말이죠. AWS 프리티어 기간이 3달정도 남긴 했는데, 기간이 임박해서 이전하다보면 왠지 또 뭔가 꼬일거 같다는 생각에 어제 다급하게 라이트세일 호스팅으로 옮겨탔습니다. 아직 한국 리전은 없고 가장 가까운 도쿄 리전으로 진행했는데 속도면에서 처진다는 느낌은 없어서 만족합니다.

다만 세팅할때 삽질을 많이 했습니다 ㅎㅎ  https://swiftcoding.org – 이 블로그 주인장분에게 무척 고마울 정도로 소상하게 많은 정보를 올려놓으셨더군요. 세팅하는데 참 큰 도움이 됐습니다. 삽질의 순간이 많긴 했지만, 그래도 어떻게 꾸역꾸역 해내고보니 새벽 늦은 시간이 되더군요. 결국 오후에 되서야 서버세팅과 SSL 세팅까지 마무리 지을 수 있었어요.

 

그런데 참 유료테마들도 아쉬운 구석이 많긴 하네요. 비주얼 컴포저 같은 사이트 빌더를 사용하면 일단 겉보기에 기능을 추가하는건 무척 쉽습니다만, 이래저래 손 봐줘야할 부분이 무척 많다는걸 느낍니다. 게다가 쓸데없이 태그의 계층이 깊게 파고 들어가 속도면에서 손실이 생기는 점도 있죠. 그래도 나름 SASS를 지원하는 테마더군요. 조금씩 시간들여서 커스터마이징 하면 어느정도 쓸만해질것 같아요.

그리고 나중에는 다시 underscore나 understrap으로 만들어서 써야지 싶습니다. 지금 운영하는 이 블로그 스킨도 막상 급하게 만들어서 쓰다보니 이래저래 손 봐야할 곳들도 많네요.

워드프레스 시장 점유율은?

wordpress.com 사이트에 들어가면, 세계 28%의 사이트가 워드프레스로 만들어졌다고 소개하고 있습니다. 전세계에서는 28%일지 몰라도, 한국에서 워드프레스가 얼마나 사용되고 있는지 궁금해졌습니다. 그래서 통계자료를 찾아봤습니다.

워드프레스

워드프레스

출처 : builtwith.com

위의 데이터를 보면 워드프레스가 30.52%의 사용량을 보여주고 있는데요. 버전별로 나뉘어져있다보니 별도 버전까지 다 합친 양을 보면 48.26%라는 것을 알고 있습니다. 생각보다 많은 사용량이라 저도 조금 놀라운데요. 그누보드, XE,킴스큐와 같은 국산 CMS가 있는데도 노출되지 않고 있네요. 사용량이 적어서인지, meta값에서 파악이 되지 않는것인지 모르겠습니다. 그리고 .kr로 끝나는 사이트들만 통계에 잡힌것으로 생각되는데요. .com이나 .net 같은 사이트까지 합치면 더 많을것 같습니다.

나모 웹에디터(namo webeditor)나 에디트 플러스(edit plust)는 CMS가 아님에도 불구하고 리스트에 올라가 있는 것이 보입니다. 아마도 이 통계사이트에서 meta 태그 내용을  긁어오다보니, 사이트를 만드는 사람들이 해당 에디터들로 작성하고 미처 head부분의 meta 태그에서 수정하지 않았기 때문일거라 생각합니다.

그리고 눈에 띄는 것이 wix(윅스)인데요. premium(프리미엄)이나 non-flash(논-플래시)버전을 가리지않고 사용량을 파악해보면 20.71%나 사용하고 있음을 알 수 있습니다.  해당 통계로 보면, 워드프레스와 윅스가 양분하고 있는 상황으로 보여지죠. 윅스는 편리한 구축이 장점이고, 워드프레스는 다양한 커스터마이징이 가능하다는 것이 강점이죠.

이 사이트에서 CMS를 구분하는 기준을 잘 모르겠는데요. Blogger가 CMS로 구분된 것을 보면 네이버 블로그나 티스토리도 CMS의 범주로 편입할 수 있을것 같은데, 통계에 잡히지 않은 것이 좀 의아합니다.

호기심에 찾아본 통계입니다만 생각보다 많은 사이트들이 워드프레스로 운영되고 있어서 놀랐습니다. 윅스가 빠르게 치고 올라왔지만 다양한 요구에 워드프레스가 빠르고 손쉬운 방법으로 제공하고 있기때문에, 훨씬 더 강력한 무언가가 나타나지 않는 이상 한동안 계속 사랑받을 것으로 생각됩니다.