따라해 볼 수 있는 튜토리얼과 간단한 팁에 대해서 다루고 있습니다.

카페24 SSL 적용 후 외부 이미지 로딩 안되는 문제

카페24 쇼핑몰 솔루션을 이용할 경우 SSL 보안인증서를 신청하면 무료로 설치가 가능합니다 (2018.2.7기준). 90일마다 새로 갱신된다는것을 보니 아마도 let’s encrypt를 이용하는 것으로 추측됩니다. 저도 현재 운영중인 블로그에 그렇게 적용해서 쓰고 있습니다. 참고 : 무료 인증서 설치 포스트

그런데 문제는 예상 밖의 곳에서 터졌습니다. https는 외부에서 끌어오는 이미지도 같은 보안 프로토콜이 적용 되어있어야 정상적으로 표현이 되는데, 현재 회사에서는 외부 이미지 호스팅(http)에서 이미지를 끌어다 쓰고 있다보니 모두 이미지가 정상적으로 노출 되지 않는다는 문제가 있었습니다. 자바스크립트를 통해 들어오는 경로를 모두 강제로 https로 변경해주는 스크립트를 제공하다보니 http://~ 로 불러오는 이미지가 전부 주소가 https:// 로 바뀌는 것이 원인이라는걸 파악했습니다. 통상적으로 보안프로토콜이 적용되는 사이트에서 이미지 소스를 삽입할때 프로토콜을 따로 명시하지 않도록 권고하고 있습니다. 예를 들어서 https://www.example.com/img.jpg 또는 http://www.example.com/img.jpg 라고 명시하지말고 그냥 //www.example.com/img.jpg 라고 명시하는걸 추천하고 있습니다.

하지만 카페24 쇼핑몰 솔루션에서 이미지를 이렇게 삽입할 경우엔 같은 https:// 프로토콜로 자동으로 변환해서 http://로 불러와야할 이미지도 무조건 https://로 붙어서 이미지가 전부 깨지는 겁니다. 잘못된 경로에서 호출하는 결과가 되는것이죠. 그래서 무척 고민하고 어찌할까 골머리를 싸매며 구글의 도움을 청했습니다. 제가 자바스크립트 실력이 미천해서 한참 검색하고 헤매다가 아래 포스팅을 참고하고 힌트를 얻었습니다.

제품 정보에서 상세이미지가 전부 깨지는것이 원인이었기때문에 , 해당 부분만 탐색해서 img 태그에 삽입되는 주소가 http://로 강제 적용해주는 소스를 삽입했습니다. 아래 내용을 보시면 어느정도 참고가 될 것 같습니다.

See the Pen add ‘http:’ script by 배현기 (@illustudio) on CodePen.

모든 이미지가 http://로 적용될 것은 아니기때문에 상세이미지가 표현되는 영역(prd-detail) 내에서만 img 태그를 골라서 http://로 강제 적용해주는 스크립트로 해결 할 수 있었습니다. 하지만, 또 별개의 상황이 벌어질 수 있기 때문에 이것이 완전한 해결책은 아닙니다. 그냥 임시방편 정도로 볼 수 있겠네요. 조금 더 세밀하게 조절하자면, 각각의 이미지 태그에 클래스를 적용해서 특정 클래스의 이미지만 http:// 프로토콜이 적용되는 식으로 스크립트를 바꿔 써도 괜찮을 것같습니다.

,

메이크샵 -> 카페24 쇼핑몰 이전

최근 회사에서 운영중인 메이크샵 솔루션을 카페24로 옮기는 과정을 경험했습니다.  메이크샵도 크게 부족한 솔루션은 아니지만, 운영하시는 분이 카페24가 더 친숙하다고 여기셔서 옮기기로 결정됐고, 저도 솔루션 이전은 처음 경험해본지라 시행착오가 많았습니다.

우선 솔루션을 이전할때 가장 큰 문제는 상품과 회원정보 이전입니다. 이 부분은 다른 분이 진행해주시긴 했지만, 엑셀 데이터를 활용해서 대규모 데이터 처리를 진행하는 것으로 확인됐습니다. 제가 담당했던 부분은 도메인 네임서버 이전건이었는데, 기존에 AWS나 기타 웹호스팅을 이용해서 직접적으로 컨트롤할 수 있었던 것과 달리 솔루션 업체의 가이드를 따라야하다보니 좀 답답한 부분이 많았습니다.

처음에는 포워딩이 아니라 왜 네임서버 이전을 하는가 의문이었는데, 관리의 주체를 아예 해당 솔루션으로 이전해주면 SSL 적용을 해준다는 장점이 있었습니다. 최근 구글에서 검색 우선순위를 SSL을 적용한 사이트에 유리하도록 정책을 펼치고 있기때문에, 가능하면 신청하는 것이 좋습니다. 하지만 프로토콜이 http에서 https로 변경되기때문에 외부 자바스크립트 플러그인을 활용하고 있거나, 네이버 웹마스터 도구, 소셜 로그인 등을 비롯해  html 태그중에 http라고 명시한 부분은 전부 https로 바꿔줘야하기때문에 번거로운 작업 과정이 수반되기는 합니다.

하지만 위와 같이 주소 앞에 “안전함”이라고 노출되는 만큼 사용자에게 보안측면에서 안정감을 줄 수 있다는 장점이 이런 번거로움을 상쇄시켜주는 요소가 될 것이라고 생각됩니다. 다시 본론으로 돌아가 네임서버를 이전하겠다고 신청하는 것 자체는 어렵지 않습니다. 카페24 관리자메뉴에서 해당 부분을 링크를 통해 안내해주고 있으며, 네임서버에 카페24에서 제공하는 내용을 기입하기만 하면 됩니다. 다만 시간이 무척 오래걸립니다. 24~48시간 정도 걸리는데, 저같은 경우엔 48시간이 꼬박 넘은것 같습니다.

개인적으로 웹호스팅이나 AWS와 같은 가상서버를 이용할때는 네임서버를 이전하더라도 간헐적으로 사이트가 접속되는 경우도 있었는데, 이번에는 전혀 접속이 되지 않는다는 것을 확인했습니다. 해당부분에 대해서도 카페24측에서 요청사항을 처리해줄때까지 대기해야하는게 아닌가 싶습니다. 네임서버가 이전되면 작업이 완료되는 것으로 생각합니다만, 그렇지 않습니다. 웹호스팅이나 서버를 직접 관리하는 경우엔 이런 부분을 사용자가 직접 만져줄 수 있지만, 카페24도 그렇고 메이크샵도 해당 부분에 대해서는 고객센터에 1:1 문의로 게시글을 남기는 것이 가장 처리가 빠릅니다.

고객센터에 전화는 하지 않는 것이 좋습니다. 전화받는 직원들이 기술지원 인력들이 아닌 관계로 잘못된 안내를 해줄 가능성이 있습니다. 제가 전화로 한 번, 게시판으로 한 번 문의를 넣었는데, 1:1 문의게시판에서는 즉각적으로 30분 이내에 조치가 이루어졌으나, 전화상으로는 도메인 소유자의 신분증을 보내달라는 잘못된 요청을 받았습니다. 이런 경우엔 가급적 1:1 문의 게시판에 화면 캡쳐를 비롯해 현재 상황을 상세하게 안내하는 것이 빠른 해결책을 얻을 수 있는 방법입니다.

아무튼 이번 경험을 통해 쇼핑몰 솔루션 이전이 무척 번거롭고 시간이 많이 소요되는 작업이라는 것을 경험했습니다. 솔루션을 한번 정하면 이토록 이전하는 것이 어려우니 처음에 잘 선택하는 것이 중요합니다. 개인적으로는 카페24도, 메이크샵도 별로 맘에 안드네요. 고도몰이 최근에 NHN이 인수했던데 어떻게 변했는지 좀 궁금합니다.

나중에 시간을 내서 고도몰 관리자 페이지도 한 번 만져봐야겠네요.

django 2.0 에서 달라진 점들 (파이썬 웹프로그래밍 학습중)

늘 그렇듯이 본업과는 좀 거리가 있는 것들에 흥미를 갖는 못된 습성(?)덕분에 요즘 장고(django)라는 파이썬 웹프레임워크를 공부하고 있습니다. 사실 이런 것들에 흥미를 갖는 이유는 어찌보면 현실 도피 내지 소소한 불만들에서 비롯됩니다. 워드프레스가 놀라운 사용자 편의성을 제공하기는 하지만, 사소한 것 하나를 고치더라도 무척 까다로운 기준에 부합해야한다는 것들이 불만으로 쌓이고 있다보니 쉽다는 이야기에 귀가 팔랑거려 장고를 공부하고 있습니다.

일단 각설하고 김석훈님이 쓰신 파이썬 웹프로그래밍이라는 책을 보고 간단하게 블로그를 따라서 만들어보고 있는데, 실수로 장고 2.0을 설치해버렸습니다. 책에서는 장고 1.7 버전을 기준으로 하고 있다보니 달라진 점들이 많습니다.

1.7 버전대만 해도 파이선 2.x 버전을 위해서 아래와 같은 호환성을 유지하려는 목적의 코드들을 일부러 삽입합니다. 하지만 장고 2.x에 들어와서는 파이썬 3.x 버전을 기본으로 사용하기  때문에 파이선 2.x를 고려할 필요가 없습니다. 그래서 아래와 같은 코드를 삽입하면 오류메세지를 출력합니다. 아래 호환성 처리 문장은 사용하지 않습니다.

이제 더이상 django.core.urlresolvers는 쓰이지 않습니다. 간단하게 django.urls로 변경되었습니다.

파이썬 2에 대한 호환성은 이제 더 이상 명시하지 않습니다. 아래 문구 삽입시에도 마찬가지로 오류메세지가 발생합니다.

urlpatterns를 사용하는 방법이 조금 달라졌습니다. 루트에 있는 urls.py에서 app에 있는 – 예를 들면 /blog/urls.py와 연결할때 쓰는 include의 사용법이 조금 달라졌습니다.  django.conf.urls는 django.urls로 간략해졌고 이제는 url 대신 path를 사용합니다. include에서 네임스페이스를 따로 넣지 않는다는 점도 차이점입니다.

또 다른 점을 보자면 include를 했을때 namespace를 명시해주지 않았기에 /blog/urls.py에서 새롭게 추가해줘야하는 부분과 정규표현식을 다뤘을때 다른 점이 있습니다. 달라진 점은 마찬가지로 django.urls가 쓰인다는 점과 path와 re_path로 구분되어서 정규표현식을 쓸때는 re_path 함수를 써야한다는 점이 다릅니다. 그리고 namespace 대신 app_name 이라는 것이 필요하게 되었습니다.

책에서 본 그대로 소스를 입력해서 결과가 나오질 않아서 오류메세지와 함께 django 2.0 document를 뒤져보니 이런 변화들을 적용해야 작동한다는 점을 알게 되었습니다. 아무래도 또 까먹을것 같아서 이렇게 정리해 놓습니다.

주로 참고한 부분은 하단에 링크되어있는 url dispatcher부분입니다. django documentation이 잘되어있다는 이야기는 여러번 들었습니다만, 언어의 장벽때문에 읽어볼 생각을 못해봤는데, 의외로 궁하면 통한다고, 목마른 놈은 우물을 파게 되어있네요 ㅎㅎ

 

,

css 파일에서 중복된 내용 삭제하기

최근 카페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를 통해서 설치 가능합니다

도서 리뷰 – 따라하면 그림이 되는 크리타 Krita

드디어 국내에도 크리타에 대한 서적이 나왔습니다. 무척 반갑네요.

크리타는 포토샵,페인터와 같은 비트맵 방식의 드로잉 어플리케이션입니다. 크리타는 기부를 통해 수익을 창출하고 있을 뿐 오픈소스 즉, 무료로 배포되는 소프트웨어입니다. 그럼에도 불구하고 크리타는 꽤 수준높은 퀄리티를 보여주고 있습니다. 맥, 윈도우, 리눅스 등 다양한 OS에서 작동하고 있어서 대부분의 사용자들이 부담없이 사용할 수 있습니다.

크리타는 드로잉에 특화된 툴 답게 포토샵에서는 찾아보기 힘든 기능들이 있습니다. 패턴 드로잉이라던지, 좌우 대칭으로 그려주거나, 만화경처럼 다각도로 그릴 수 있는 다중 붓 도구같은 기능들 이외에도 무료 소프트웨어가 맞나 싶을정도의 퀄리티를 보여줍니다.

 

책의 내용들을 몇 장면 찍어봤습니다. 밑그림을 스캔해서 불필요한 부분들을 정리하고 라인만 살려서 채색하고 완성하는 과정을 다루고 있습니다. 크리타에서 편리하게 사용할 수 있는 기능들을 사용해서 작업하는 내용들을 확인할 수 있는데요, 크리타는 포토샵에 비해서 회전과 반전하는 기능이 편리합니다. 포토샵에서는 Rotation 이외에는 반전시키고자 한다면 별도의 단축키를 생성해서 만들어야하는데, 크리타는 처음부터 관련 기능들이 단축키로 지정되어 있습니다.

그래서 포토샵과 단축키가 약간 다르게 지정되어 있는 부분들이 있는데, 원한다면 포토샵과 같은 단축키로 지정해주는 옵션도 있습니다. 여러모로 사용자가 드로잉하는데 편의를 많이 제공하고 오로지 순수하게 그림 그리는 재미에 집중할 수 있도록 프로그램이 설계되어 있습니다.

수채화풍의 느낌도 살릴 수 있는 것을 보여주는 튜토리얼 입니다. 책은 스케치북에 그린 밑그림을 가져와서 다루는 방법부터, 셀 애니메이션 스타일, 아크릴/유화풍, 수채화풍 스타일까지 다양한 화풍을 소개하고 있습니다. 책 후반부에 다루고 있는 소소한 팁들은 크리타를 통해 좀 더 폭 넓고 편리한 이미지 편집이 가능하다는 것을 보여주고 있습니다.

일본에서 쓰여진 책 답게 다뤄지고 있는 튜토리얼의 화풍은 대부분이 일본 아니메 스타일로 다뤄지고 있습니다만, 해외 유저 들이 올린 작업들을 보면, 회화수준의 작업들도 확인 할 수 있습니다

크리타가 한국어로도 서비스가 되고 있고, 국내에도 관련 서적이 출시 되었다는 것은 무척 반가운 일입니다. 포토샵, 페인터는 물론이거니와 최근 클립스튜디오, 사이툴과 같은 드로잉 툴들도 많은 관심을 끌고 있습니다만, 크리타도 그 못지 않은 재미있고 훌륭한 툴입니다.

본 서적의 출간으로 국내에도 크리타 유저가 많아졌으면 좋겠습니다.

구매에 대한 정보는 아래 링크를 참고하시기 바랍니다.

 

해당 리뷰에 쓰인 도서는 출판사로부터 제공받았습니다.