Whitespace debugging in DevTools in action

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

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

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

 

 

최근 아이패드에서도 포토샵이 구동되도록 변하면서 소소한 변화가 있네요. 오늘 새롭게 버전업된 포토샵 CC 2019 (V.20)으로 갈아타고 작업하면서 가장 황당했던 상황이 바로 자유변형툴이었습니다. 상당히 자주 쓰는 툴인데, 보통 단축키 CTRL + T를 누른다음 Shift(고정된 비율로 제어하기)를 누르고 제어하는게 통상적인 패턴입니다. 그런데 이게 shift를 누르고 조작하니 막 이미지가 고정비율이 아닌 자유로운 비율로 막  찌그러지는겁니다(?)

뭔 일인가해서 검색해보니 위의 링크와 같이 이슈로 기록되어있네요. 이제는 기본적으로 Shift를 누르지 않고 제어해야 고정비율로 움직이고, shift를 누르면 자유로운 비율로 제어가 되도록 바뀌었습니다. 일일이 shift를 누르지않아도 된다는 생각으로 바꾼 모양인데, 저 처럼 오랜세월 동안 포토샵을 사용해 온 사람들에게는 습관을 뜯어고치라는 이야기라, 굉장히 불만스러운 내용이 아닐 수 없네요.

대부분 정비율로 움직이는 작업이 많으니 나름 합리적인 변화이긴합니다만, 그래도 영 달갑지 않은 이유는 몸에 밴 것들을 뜯어고쳐야한다는 부담감때문이겠죠? ㅎㅎ

포토샵

포토샵은 이미 많은 분들에게 알려진대로 사진 편집 및 보정, 디자인, 일러스트레이션, 합성 등 다양한 분야에서 활용되고 있는 그래픽 소프트웨어입니다.

포토샵은 그래픽에 대한 만능도구처럼 다양한 기능이 존재합니다. 하지만 전문가들도 포토샵에 있는 모든 기능을 모두 활용하지는 않습니다. 본인의 업무에 필요한 도구들 이외에는 거의 사용할 일이 없기 때문이죠.

포토샵

그래서 포토샵을 막연하게 잘 하고 싶다고 하면 더 없이 어려워질 수 밖에 없습니다. 합성, 사진, 디자인, 일러스트레이션 등 모든 분야를 다룰 것이라는 이야기와 마찬가지이기 때문입니다.

실제로 그렇게 일하는 사람은 없다고 봐도 무방합니다. 한 분야에서 전문성을 인정받기도 어려운 세상에 모든 분야를 다 잘한다는것은 불가능에 가깝죠.

그래서 일단 당장 필요한 것을 익히면서 포토샵이라는 도구에 겁을 내지 않도록 친해지는 것이 가장 중요합니다. 나머지 기능은 필요없거나, 필요하면 나중에 배워도 무방한 것들이기 때문이죠.

지금도 어도비에서는 소소한 업데이트를 통해서 포토샵에 기능을 추가하고 있습니다. 이 모든 기능을 모두 마스터한 다음 포토샵을 사용하겠다고 하면, 아무래도 무척 오랜 시간이 필요할 겁니다.

시작은 가벼울 수록 좋습니다. 모든걸 다 짊어지고 가려고 마음먹으면 한 걸음도 딛을 수 없기 때문입니다. 쉬운  것부터 – 따라할 수 있는 것 부터- 시작하면 됩니다.

포토샵 버전도 크게 개의치마세요. 기초적인 기능의 대부분은 CS3 이후로 크게 변하지 않았습니다. 물론 가능하면 최신버전일 수록 좋습니다. 최신 버전은 번거러운 일을 쉽게 해결할 수 있도록 기능을 개선하고 있기 때문입니다.

앞으로 짬짬히 포토샵에 대한 내용을 포스팅할 예정입니다.

요 며칠동안 꼬여있던 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 설정도 이것이 최종 결과물입니다.

 

기존에 git에 저장해두었던 gulp 세팅이 되어있던 파일을 불러오는 과정에서 node-sass가 설치 되지 않는 문제가 발생한다.

주로
“user “root” does not have permission to access the dev dir”
라는 문구를 내뱉으며 문제를 일으키는데 아래 화면처럼 계속 권한이 없다는 말만 반복하면서 무한 루프에 빠져버린다. 그래서 권한을 주고 벼라별 짓을 다 해도 몇시간 동안 node-sass 설치에 실패했다.

구글을 아무리 뒤져도 답이 나오질 않아서 한참 해메며 포기할까 싶은 무렵 실낱같은 희망이 되어준 옵션이 하나 나타났다. –unsafe-perm

이를테면 이런식으로 사용하는 것이다.

이 옵션을 주면 위와같이 권한 문제로 무한루프에 빠지는 것을 해결 할 수 있다. 좀처럼 풀리지 않는 문제라 주말 내내 골치 썩고 이제는 포기하고 싶었는데, 자기전에 극적으로 해결이 됐다… 주말이 다 날아갔다는 이야기.ㅋㅋㅋ

추가적으로 node-sass를 설치하는 과정중에 컴파일 하는 과정이 있는데 이럴 경우 컴파일러가 없으면 “make g++ command not found” 오류를 내뿜는다. 이런 경우에는 구글에서 아래와 같은 답을 내어주었다.

sudo apt-get install build-essential g++

여기까지 해주고나니 기나긴 컴파일 과정을 거치고 난 후 정상적으로 모듈이 설치되고 작업환경이 완성됐다.