FastBoot 스킨 보안접속(https) 강제 적용 후 각종 오류 해결

Posted by sunstar
블로그 팁

2019.01.21 티스토리 발행글에도 보안접속이 강제 적용되었는데요.


https로 전환된 보안접속은 이전에 티스토리 공지글로 올라와 있었지만 저는 맥을 놓고 있다가 엊그제 폰으로 제 블로그에 접속했다가 깜놀했습니다.


아래 샷은 현재는 오류 수정으로 카테고리 메뉴 버튼이 이전 http 적용 때와 같은 상태로 표시된 샷이구요.

FastBoot스킨보안접속강제적용후각종오류해결_1 FastBoot스킨보안접속강제적용후각종오류해결_2


아래 샷은 지금은 블로그에 손을 놓고 계신 FastBoot 스킨 개발자 Readiz님 블로그와 역시 방치하고 있는 제 딸래미 블로그인데요.

문제점이 뭔 줄 아시겠죠?

티스토리가 https로 강제 적용 후 발생한 FastBoot 스킨 문제점을 해결하지 않으면 폰으로 접속한 블로그 방문자가 혹시 카테고리의 다른 글을 보려고 해도 볼 수 없다는 데에 있습니다.

FastBoot스킨보안접속강제적용후각종오류해결_3 FastBoot스킨보안접속강제적용후각종오류해결_4


문제점은 이뿐만이 아닙니다.


PC에서 블로그에 접속했을 시 운영자 발행 글에 댓글이 올라왔을 경우, 페이지로 이동해서 답글을 달으려고 하면 수정/삭제, 댓글쓰기 버튼이 활성화되질 않아 답글을 달 수가 없었구요.


그외 SNS 글 보내기 플러그인 아이콘이 보이지 않는 등의 오류가 있습니다.

(플러그인 오류는 미해결)

FastBoot스킨보안접속강제적용후각종오류해결_5


또 카테고리 펼침 버튼과 다음 글 및 이전 글 버튼이 아래 샷처럼 보여야 되는데요.

FastBoot스킨보안접속강제적용후각종오류해결_6


오류를 해결하지 않으면 이전 글 및 다음 글 버튼은 안 보이고 카테고리 펼침 버튼에 아이콘이 표시되지 않습니다.

FastBoot스킨보안접속강제적용후각종오류해결_7


그렇다면 위에 열거한 오류는 어떤 식으로 해결해야 할까요?

문제의 핵심은 블로그 관리 홈 > 스킨 편집 > html 편집 > HTML에서 http로 되어있는 부분을 https로 바꿔주면 문제는 해결됩니다 ㅎㅎ


*****


그럼 해결 팁을 알아볼까요?

HTML 탭에서 찾기 기능(Ctrl + F)으로 http를 입력해서 아래 코드 부분을 찾습니다.


<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />



그리고 위 코드의 주소 http를 https로 바꾼 후 적용 버튼을 누르고 페이지를 새로고침하면 위에 열거했던 오류는 한방에 해결됩니다.

FastBoot스킨보안접속강제적용후각종오류해결_8


여기서 끝이 아니고 위 오류 해결은 FastBoot 스킨에 적용되는 각종 아이콘 및 버튼에 대한 문제 해결이지만 썸네일 오류를 해결하려면 더 해야할 작업이 있는데요.


티스토리가 보안접속을 강제 적용하면서 패스트부트 스킨은 썸네일 이미지가 깨져 표시되고 있습니다.


이유는 보안접속, 즉, https로 적용되면서 스킨 편집 > 파일업로드로 가서 gif나 png 등 이미지 파일을 우클릭하고 링크 주소 복사를 해서 확인해 보면 이유를 알 수 있는데요.


강제 적용 이전 http로 접속했을 때는 우클릭 주소가 http://cfile2 ~~~~이런 식으로 표시되던 게, https 적용 후론 https://tistory2 ~~~~ 등으로 주소가 바뀌었습니다.

따라서 스킨 개발자가 손을 놓은 FastBoot 스킨 사용자는 손수 아래 코드를 찾아 변경해 줘야 합니다.


class="article">',0),tl);var a;e='http://cfile';if(b.match(e+"(.*?)"+g)!=null)



위 코드에서 이미지를 나타내게 해주는 주소 http://cfilehttps://t1, t2, t3, t4 등으로 변경해서 적용해 주시구요.

FastBoot스킨보안접속강제적용후각종오류해결_9


파일업로드 탭으로 가서 images/fastboot.min.js 파일을 적당한 폴더(ex, 바탕 화면 등)로 내려받습니다.

FastBoot스킨보안접속강제적용후각종오류해결_10


그리고 내려받은 images/fastboot.min.js 파일을 메모장으로 전환해 열고 찾기 기능(Ctrl + F)으로 http를 검색하면 딱 2개가 검색되는데요.

첫번째 검색되는 http://","" 를 https://",""로 변경하고 두번째로 검색되는 http://cfilehttps://t1, t2, t3, t4 등으로 바꿔주고 저장해 주세요.

FastBoot스킨보안접속강제적용후각종오류해결_11


수정된 images/fastboot.min.js 파일은 다시 업로드하여 덮어쓰기하고 혹시 모르니 활성화되지는 않겠지만 적용 버튼을 누른 후 페이지 새로고침하면 썸네일 이미지도 되살아 날 겁니다.


그런데 위 images/fastboot.min.js 파일 편집이 귀찮은 분은 아래 첨부된 파일을 내려받아 파일업로드에서 추가하여 덮어쓰기 하세요.


fastboot.min.js


여기까지가 패스트부트 스킨 아이콘 및 버튼, 썸네일 오류 해결 팁이었구요.


저처럼 예전 방식의 나눔 고딕 웹폰트을 적용한 블로그는 폰트가 풀리더군요.


그래서 저는 한결 간편해진 구글 웹폰트로 대체했는데요.


블로그에 구글 웹폰트 적용하기


https://fonts.google.com


위 페이지에 접속, Nanum Gothic으로 검색합니다.

Nanum Gothic을 검색하지 않아도 한국인이라면 페이지 첫머리에 나눔 고딕 폰트가 첫머리에 올라와 있을 텐데요.


Nanum Gothic체 오른쪽 상단 붉은 원형으로된 + 아이콘을 누릅니다.

블로그에구글웹폰트적용하기_1


그러면 페이지 하단에 Family Selected라는 검은색 바가 생성되는데요.

바를 클릭하고 확장된 메뉴에서 CUSTOMIZE 탭으로 이동, reguar 400, bold 700, extra-bold 800 세가지 옵션 중 선호하는 글꼴 굵기를 선택한 후, Languages에서는 Latin만 선택되어 있는데, Korean도 함께 선택하고 EMBED 탭으로 이동합니다.

블로그에구글웹폰트적용하기_2


EMBED에서 1번으로 표시한 코드가 블로그 html 편집 <head>와 </head> 사이에 넣어주면 되는데요.

STANDARD 코드를 넣을건지, @IMPORT 코드로 넣을건지 입맛대로 하시구요.

2번 코드는 'Nanum Gothic', sans-serif; 만 복사해서 CSS에서 font-family: 바로 뒤에 붙여넣기 하면 됩니다.

블로그에구글웹폰트적용하기_3


저는 @IMPORT 코드로 적용한 상태이구요.

블로그에구글웹폰트적용하기_4


CSS font-family 제일 앞에 'Nanum Gothic', sans-serif;를 배치하면 간단히 적용됩니다.

그런데 만약 이전 웹폰트를 적용했었다면 대부분 CSS 제일 상단에 코드가 심어져 있을 텐데요.

이전 코드를 제거하면 좀 더 간결한 CSS가 되겠죠?

블로그에구글웹폰트적용하기_5


이상으로 이 글은 여기까지 이고 끝까지 읽어 주셔서 감사합니다.



이 댓글을 비밀 댓글로
  1. 와.. 감사합니다.
    저도 fastboot 스킨 사용자인데,
    갑자기 오류가 발생해서 당황하고 있었어요.
    자체 해결이시면 능력자시군요 ㅎㅎ
    도움받고 갑니다!!
    • ㅎㅎ 자체 해결은 아닙니다.
      다른 분의 소스를 참고했습니다~;)
    • 2019.02.04 13:38
    비밀댓글입니다
    • 저도 한동안 사용했었습니다만, 그건 팁이 아니라
      개인적 취향이라고 생각하는데요? ㅎ
      즐건 설연휴되시길요~^^
    • 첫눈
    • 2019.06.27 17:12
    위 내용으로 수정하니 메뉴바 ▶ 이미지는 뜨는데 클릭하니 메뉴바가 활성화가 안되네요
    설정 > 메뉴바> 메뉴바를 표시합니다로 되어있는데 활성화가 안되네요 ㅠㅠ
    혹시 이 부분도 어디서 수정하는지 혹시 아시는지요?
    • 저는 문제가 없는데요.
      블로그 메뉴바를 표시하지 않습니다.로 설정해 보시길요.