수학방

크롬하면 무조건 설치해야 하는 플러그인 중에 Pig Toolbox가 있죠? 이글에서는 Pig Toolbox의 기능 중 하나인 웹페이지 스타일(폰트, 색) 설정에 대해서 알아보죠.

웹서핑을 하다 보면 독특한 테마를 사용하는 사이트가 많아요. 하지만 너무 화려하게 꾸며진 사이트는 읽기도 불편하고 눈이 아프기도 해요. 가끔 가서 보는 블로그가 있는데 검은색 배경에 노란색 글자를 사용하는지라 보고 있으면 눈이 아프고 그 페이지를 나와서 다른 페이지를 보면 어지러움을 느끼거든요. 그래서 그 페이지는 제가 원하는 색으로 바꿔서 보는데 바로 Pig Toolbox의 웹페이지 스타일(폰트, 색) 설정을 이용합니다. 원래 대부분 브라우저에 있는 기능이지만 플러그인을 이용하면 조금 더 많은 부분에서 활용할 수 있어요.

Pig Toolbox 웹페이지 스타일(폰트, 색) 설정하기

Pig Toolbox의 옵션 페이지에서 중간쯤 내려가다 보면 "*웹페이지 스타일(폰트, 색)이라고 된 곳이 나옵니다.

단축키를 지정하는 칸이 있네요.

현재 페이지에 스타일 적용, 해제는 이름 그대로 현재 페이지 하나만 스타일이 적용되는 거고요. 웹페이지에 스타일 적용 시작은 현재 페이지뿐 아니라 새로 열리는 다른 페이지에서도 지정한 스타일을 적용됩니다. 단축키를 지정했다가 사용하면 좋겠죠. 저는 마우스 제스쳐에 등록해서 사용하고 있어요.

패턴 사용하기가 있는데요.

특별한 주소를 입력해서 해당 주소의 웹페이지만 스타일을 사용하거나 해제할 수 있어요. 그림처럼 입력하면 mathbang.net과 네이버에서만 지정된 스타일을 사용하고 다른 사이트에서는 원래 해당 사이트의 스타일을 그대로 사용하는 거죠. 자주 가는 사이트 주소를 입력해두면 따로 단축키를 누르지 않아도 자동으로 색이 바뀌어서 나옵니다.

패턴에 등록되지 않은 페이지에서만 단축키나 마우스 제스쳐를 이용해서 스타일을 적용하면 되고요.

기본으로 정해진 웹페이지의 스타일은 흰 배경에 검은 글자인데, 위에 있는 "스타일(폰트,색) 상세설정"에서 글꼴, 글자색, 배경색 등을 사용하자 원하는 글꼴과 색으로 바꿀 수 있어요.

웹페이지 폰트 대신 자기가 사용하고 싶은 폰트를 고를 수 있는데, 아쉽게도 영문 폰트만 나오네요. 한글 폰트는 직접 입력해도 안 되는 것 같아요.

웹페이지 칼라 사용에서는 배경색, 글자색, 링크색 등을 지정할 수 있어요. 색 입력 칸을 클릭하면 그림처럼 색을 선택할 수 있는 영역이 생겨요. 거기서 원하는 색을 고르세요. "Color Tools"를 누르면 색을 더 자세히 선택할 수 있는 창이 열리니까 그곳을 활용해도 좋을 것 같네요. 그리고 해당 페이지는 새로고침해서 바꾼 설정을 적용할 수 있습니다.

함께 보면 좋은 글

크롬 Pig Toolbox 오류 해결방법
크롬 스크롤바 색 바꾸기
크롬 개발자도구로 블로그 스킨 수정하기

크롬이 업데이트되면 어째서인지 하나씩 안되는 기능들이 늘어나는 것 같아요. 특히 플러그인이 업데이트되는 게 크롬 업데이트 속도를 따라가지 못할 때는 더 그렇고요.

최근에 업데이트하고 나서 필수(?) 확장프로그램 중 하나인 Pig Toolbox에서 사용하던 마우스 제스쳐 몇 가지가 안 되는 문제가 생겼는데, 해결방법이 매우 쉽더군요. 도움말만 봐서는 해결이 안 되는 방법이라 공유해봅니다.

Pig Toolbox NPAPI 플러그인 로딩 문제 해결 방법

크롬 업데이트 후에 Pig Toolbox의 마우스 제스쳐가 안되길래 옵션 페이지에 가봤더니 제일 위에 다음 메시지가 나오더라고요.

Pig Toolbox 윈도우용 NPAPI 플러그인 로딩에 실패했습니다. 윈도우 전용 기능들이 작동하지 않습니다.  Pig Toolbox FAQ

Pig Toolbox FAQ에 가봐도 해결책이 제대로 나와있지 않습니다.

검색을 해봤더니 마우스 제스쳐가 안될 때는 슈퍼 제스처를 사용하지 않게 설정을 바꾸면 된다고 나와 있어서 그렇게 했는데도 해결이 안 되더라고요. 문제가 생긴 이유가 달라서 그런 거겠죠.

문제 해결법은 아주 간단히 찾을 수 있었습니다. 바로 경고메시지에 그 원인을 알려줬으니까요. 경고 메시지에 나온 것처럼 NPAPI 플러그인을 로딩하지 못해서 생긴 문제라면 NPAPI 플러그인을 로딩하도록 해주면 되겠지요.

크롬의 주소창에 chrome://flags라고 입력하고 이동하세요.

10번째에 NPAPI 사용설정을 하는 곳이 있는데 여기서 사용을 클릭하고 크롬을 껐다가 다시 실행해주면 끝입니다. 간단하죠?

NPAPI 사용 Mac, Windows
NPAPI 플러그인을 사용 설정합니다. #enable-npapi

크롬을 다시 실행하고 Pig Toolbox 옵션 페이지에 가보면 경고 메시지가 사라진 걸 확인할 수 있습니다. 물론 되지 않던 마우스 제스쳐도 잘 됩니다.

보통 플러그인이 필요하면 자동으로 알아서 사용하고 그런 거 아니었나요? 참 이상하네요.

함께 보면 좋은 글

티스토리의 고질적인 문제 중의 하나가 크롬에서 글을 쓸 때 <span style="font-size: 9pt; line-height: 1.5;">라는 태그가 자동으로 붙는 거죠. 이게 글쓰기 화면의 기본값이어서 style.css의 설정을 무시하는 바람에 원하는 형태로 표시되지 않아요.

뭐 아주 간단한 해결방법은 크롬이 아닌 다른 브라우저를 이용해서 글을 쓰면 되지만 단순히 글쓰기용으로 다른 브라우저를 사용한다는 건 엄청나게 불편한 일이죠.

그래서 간단히 이 태그를 지워주는 유틸을 만들었습니다. 유틸이라고 하기에도 조금 어색하긴 하지만요.

티스토리 9pt로 글씨 크기 작아지는 버그 해결방법

사실 티스토리의 글쓰기 브라우저에 따라서 생기는 문제가 많이 다릅니다.

저는 블로그 특성상 수식을 많이 넣는데, 그림으로 넣는 거라서 <img src="" alt="" />이렇게 되어야 하는데, 인터넷 익스플로러에서는 꼭 뒤에 /가 삭제돼버려요. 그리고 소문자로 쓰여야 할 태그들이 대문자로 써지는 문제도 있고요.

익스나 크롬 양쪽에서 문제가 생긴다면 더 쉽게 문제를 수정할 수 있는 크롬을 사용하는 편이 낫죠. 그렇다고 매번 수동으로 고칠 수 없어서 한 번에 수정할 수 있는 유틸을 사용하는데 이걸 공유합니다. (개인적으로 사용하는 건 조금 더 많은 기능이 있는데, 이건 제 블로그의 특성에 맞게 고쳐놓은 거라서 필요한 부분만 뗐습니다.)

tistory_chrome_v2.exe

사용법은 간단합니다.

1. 일단 크롬에서 글을 다 씁니다.
2. HTML 모드로 들어가서 본문을 전부 복사합니다.
3. 다운받은 유틸을 실행시킵니다.
4. 끝 메시지가 나오면 다시 티스토리 글쓰기의 HTML에 붙여넣습니다.

<span style="font-size: 9pt; line-height: 1.5;">테스트 1</span>, <span style="background-color: transparent;">테스트 2</span>

클립보드에 복사된 내용을 가져와서 <span style="font-size: 9pt; line-height: 1.5;"></span>만 지우고 다시 클립보드로 복사하니까 블로거는 본문 복사 - 유틸 실행 - 붙여넣기만 하면 됩니다.

수정된 후에 삭제되면 안되는 게 삭제됐을 수도 있으니 글의 내용은 꼭 직접 확인하시기 바랍니다.

내용추가

댓글에 네이버에서도 비슷한 문제가 있다는 얘기가 있어서 그것도 수정할 수 있도록 바꿨습니다. 다만 제가 네이버 블로그를 사용하지 않아서 문제가 완전히 해결되는지에 대해서는 장담하지는 못해요.

언제부터인지 모르겠는데, 크롬을 업데이트했더니 스크롤바가 옅은 회색이라서 눈에 잘 띄지 않게 되었어요. 내용이 적어서 페이지가 짧으면 괜찮은데, 내용이 길어져서 스크롤바가 작아지면 눈에 잘 띄지 않더라고요. 그게 너무 불편해서 스크롤바의 색을 바꿀 수 있는 플러그인을 찾다가 겨우 찾았어요.

처음에는 테마를 설치하면 바뀔 줄 알고 여러 테마를 설치도 해보고, 직접 테마를 만들기도 했는데, 결국 스크롤바의 색은 바꿀 수 없더군요. 플러그인만 설치하면 되는 간단한 방법이 있는지도 모르고요.

그래서 저랑 같은 불편함을 느끼는 분들을 위해 플러그인 두 개를 소개해드립니다.

Chrome scrollbar 바꾸기

Simple Black Scrollbar 바로가기

플러그인 이름 그대로 아주 간단하게 스크롤바를 검은색으로 바꿔주는 플러그인이에요. 플러그인을 설치하고 페이지를 새로고침하면 바뀐 스크롤바를 볼 수 있어요. 아래 그림을 보세요.

왼쪽은 원래 크롬의 스크롤바 색인 회색이고 오른쪽은 Simple Black Scrollbar를 적용한 후에 검은색으로 바뀐 모습이에요. 회색일 때보다 확실히 눈에 잘 띄죠? 대부분의 웹페이지의 배경이 흰색이니까 검은 스크롤바가 눈에 잘 띄죠.

아이프레임이나 텍스트 입력창 등 페이지 내부에 있는 스크롤바의 색상도 검은색으로 바꿀 수 있어요.

Rescroller

이 플러그인에서는 색을 바꿀 수 없어요. 검은색이 아닌 다른 색을 사용하고 싶다면 Rescroller라는 플러그인을 사용하세요.

Rescroller 바로 가기

Rescroller를 설치하면 주소창 오른쪽에 R 모양의 아이콘이 생기는데, 아이콘을 누르면 설정 창이 열립니다.

아래 그림에서 빨갛게 네모 쳐진 부분이 스크롤바의 색을 바꾸는 설정이고 그 아래는 배경, 경계색 등을 정하는 설정입니다. 색 외에도 두께, 모서리 등 다양한 설정을 할 수 있어요.

이 외에도 스크롤바의 색상을 바꾸는 플러그인은 몇 개 더 있더라고요. 일부는 특이한 기능이 있기도 하고요. 모바일 페이지에서처럼 평상시에는 보이지 않다가 마우스를 오른쪽 끝으로 이동하면 보이기도 하고 이동 버튼을 표시해주기도 해요. 저야 그냥 단순히 색만 바꾸면 되니까 별 필요가 없는 기능이지만요.

아무쪼록 유용한 정보였으면 좋겠습니다.

티스토리의 블로그 스킨을 수정하다 보면 굉장히 어렵죠. 고치고 나서 제대로 나오는지 미리보기를 눌러서 확인하고, 또 고치고 미리보기하고 이런 걸 몇 번씩 반복해야 해요. 카테고리 목록이라든지 댓글 목록처럼 미리보기로 볼 수 없는 곳은 일일이 저장해서 확인해야 하고요.

크롬의 개발자도구를 이용하면 이런 작업을 조금 간단히 할 수 있어요. 미리보기를 따로 할 필요없이 바로 적용해서 볼 수 있거든요. 개발자도구를 이용하면 현재 보고 있는 페이지의 html, css 코드를 수정할 수 있어요. 이런 기능을 이용해서 블로그의 스킨을 수정한다면 블로그 스킨 수정이 훨씬 쉬워집니다.

크롬 개발자도구로 블로그 스킨 수정하기

개발자도구는 다른 브라우저에도 있는 기능인데, 보통은 오류를 찾거나 소스 코드 분석을 할 때 사용해요. 크롬에는 현재 보이는 화면의 코드를 수정할 수 있는 기능이 있어서 더 편리하죠. (다른 브라우저는 사용해보지 않아서 이런 기능이 있는지는 모르겠어요.)

블로그 스킨을 수정하고 싶은 페이지에 접속합니다.

도구 - 개발자도구를 선택해도 되고, 아래 그림처럼 수정하고 싶은 곳에 마우스 오른쪽 클릭을 해서 요소 검사를 선택해도 됩니다. 요소 검사를 선택하면 html에서 원하는 위치로 바로 이동할 수 있어서 더 편리해요.

"Recent Posts"에서 "요소 검사"를 클릭했더니, 개발자도구 창에서 해당하는 html 소스가 선택되어 있어요.

html에서 고치고 싶은 곳에 마우스 커서를 놓고 F2를 누르면 편집할 수 있는 창이 나와요. Recent Posts를 최신글 목록이라고 바꿔보죠.

개발자도구의 왼쪽 창에는 html 소스가 나오고 오른쪽 창에는 css가 나와요. 왼쪽의 html 창에서 소스를 하나씩 선택하면 그 소스에 해당하는 css가 오른쪽 창에 나옵니다. css는 구조와 클래스에 따라 여러 css가 함께 적용되기도 하는데, 이때, 우선순위에서 밀려서 적용되지 않는 건 가로줄이 그어져 있어요. 아래 그림에서 font-size: 1.3em이 그렇죠.

체크박스가 있는데, 여기서 선택을 해제하면 해당 css 속성을 적용되지 않도록 바뀝니다.

다음은 css를 수정해보죠. text-aling:center를 추가해봤어요. 글자를 가운데 정렬하는 css에요.

두 부분을 수정했더니 화면에서 왼쪽 정렬이 되어있던 "Recent Posts"가 가운데 정렬의 "최신글 목록"으로 바뀌었어요.

실제로 블로그 스킨의 html과 css를 수정한 게 아니라 그냥 그 화면에 보여지는 것만 임시로 바꾼 거예요. 따라서 저장되지는 않아요. 이렇게 하나씩 바꾸고 수정하면서 내 블로그에 맞는 설정을 찾을 수 있어요.

이렇게 찾은 설정들을 모아서 html, css를 한 번에 수정하는 거죠.

아래 그림은 css 편집창의 제일 아래에 있는 화면인데, 레이아웃을 보여주는 그림이에요. 파란색 300 x 16이 실제 크기, 그 주변으로 padding, border-width, margin을 상하좌우의 네 부분으로 나눠서 보여줘요. margin-top:12px, margin-bottom:10px, border-bottom:1px, padding-bottom:10px이라는 걸 알 수 있어요.

생활코딩 - 크롬 개발자도구에 동영상으로 설명된 게 있으니까 한 번 둘러보세요. 버전이 조금 다르긴 하지만 글을 읽는 것보다 훨씬 더 이해가 잘 될 거예요.

함께 보면 좋은 글

티스토리 반응형 스킨 사용할 때 문제점 한 가지
애드센스 최적화 배치 도움되는 곳
검색엔진 최적화, SEO를 위한 meta, title, desciption, keywords 사용법
검색엔진 최적화 측정 사이트 - SEOCert.net
블로그 속도 측정 - Google PageSpeed Insights