Whitespace debugging in DevTools in action

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

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

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

 

 

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

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

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

포토샵은 아주 오랜시간동안 큰 변화없이 인터페이스를 유지해왔습니다. 그 말은 즉 버전에 크게 구애받지 않고 기능들을 찾아쓸 수 있다는 이야기이기도 합니다.

포토샵에서는 주로 아래와 같이 큰 맥락으로 나눠서 볼 수 있습니다.

  • 메뉴표시줄
  • 툴패널 + 옵션바
  • 캔버스
  • 윈도우 패널

이러한 화면구성을 효율적으로 이용하며 자기만의 방법으로 작업하는 다양한 방식들이 존재합니다. 이렇듯 정해진 인터페이스지만, 정답은 없습니다. 오히려 더 나은 방법이 여러사람의 아이디어 속에서 계속해서 나오고 있습니다.

포토샵을 통해서 나오는 다양한 이미지들도 결국 이러한 기본 기능을 어떻게 조합해서 잘 사용하느냐에 따라 퀄리티가 다르게 나옵니다. 모든 메뉴를 다 잘 알 필요는 없습니다. 필요한 것만 익히면 됩니다.

대부분의 사용자들이 그렇게 포토샵을 활용하고 있고, 지나치게 많은걸 알아야할 필요도 없습니다.

보시다가 궁금하신 점 있으면 댓글 남겨주시고, 구독 및 좋아요도 부탁드릴께요. 계속되는 컨텐츠 생산에 큰 응원이 되어줍니다.

 

기존에 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++

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

카페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:// 프로토콜이 적용되는 식으로 스크립트를 바꿔 써도 괜찮을 것같습니다.