사이트 디자인을 내맘대로, 크롬 확장 프로그램 Custom Style Script

자주 방문하는 사이트의 디자인이 불편하다면

사실 디자인이 불편을 주는 경우는 거의 없습니다. 단지 시각 테러를 할 뿐이죠. 그럼에도 불구하고 소수의 사이트들은 디자인으로 사용자들에게 큰 불편을 끼치기도 합니다.



Custom Style Script


디자인으로 사용자들에게 불편을 줄 경우엔 두 가지 방법으로 문제를 해결 할 수 있습니다. 발길을 끊고 더 이상 방문하지 않던가 아니면 해당 사이트의 디자인을 변경하면 됩니다.


사이트 디자인을 방문자가 어떻게 변경하냐굽쇼? 왜들그러세요 21세기에. 이미 이와 관련된 부가기능이나 확장 프로그램을 많이 사용하는 것을 알고 있습니다. 파이어폭스 혹은 구글 크롬 브라우저를 사용한다면 간단하게 부가기능/확장 프로그램을 이용하여 사이트의 디자인을 입맛대로 변경할 수 있습니다.



파이어폭스 부가기능 Custom Style Script


파이어폭스 퀀텀용 Custom Style Script 부가기능은 https://addons.mozilla.org/ko/firefox/addon/custom-style-script/?src=userprofile 페이지에서 설치할 수 있습니다.


구글 크롬용 Custom Style Script 확장 프로그램은 크롬 웹 스토어 https://chrome.google.com/webstore/detail/custom-style-script/ecjfaoeopefafjpdgnfcjnhinpbldjij에서 설치 할 수 있습니다.


파이어폭스용이나 구글 크롬용이나 사용 방법은 동일합니다.



Custom Style Script 옵션


파이어폭스에 Custom Style Script 부가기능을 설치하면 툴 바에 위와 같이 </> 모양의 아이콘이 생깁니다. 아이콘을 클릭하면 메뉴가 펼쳐지는데요. 스패너 모양의 아이콘을 클릭하면 옵션 페이지로 진입할 수 있고, 전원 버튼을 클릭하여 활성/비활성으로 전환 시킬 수 있습니다.




Custom Style Script 부가기능 옵션 페이지 하단의 URL, JavaScript, Style (CSS)를 이용하여 웹사이트의 디자인을 입맛대로 변경할 수 있습니다. 물론 변경이 가능한 것들만이요.



딴지일보 개편된 디자인


Custom Style Script 부가기능의 사용 예를 들자면, 지난 연말 딴지일보 사이트가 사이트 개편을 하였습니다. 개편 하는 것은 좋은데 이게 좀 방향이 어긋났습니다. 보시다시피 사이트의 머리 부분이 중복 중복 중복 되어 겹겹이 쌓였고, 몸통은 짜리몽땅하게 짧아져 버렸습니다. 몸통이 짧은 것은 아닌데요. 두껍게 살을 찌워 버렸기에 결과적으로 짧은 몸통이 되어 버렸습니다. 여튼 일단 빨간 색과 파란 색으로 표시한 곳의 크기를 잘 기억해 두시고요.




Custom Style Script 부가기능 옵션 페이지에서 URL에 딴지일보 도메인을 입력하고, Style (CSS) 부분에 다이어트 소스를 첨부한 후 우측의 플러스 버튼을 클릭하면




입력한 내용이 저장됩니다. 참고로 여러 사이트를 등록하여 목록으로 관리할 수 있습니다.



딴지일보 Custom Style Script 적용 후 디자인


다이어트 시킨 CSS 소스가 적용되면 위와 같은 모습으로 보여지게 됩니다. 사이트나 블로그를 운영해 보신 분들은 잘 아시겠지만 폭이나 넓이, 색상, 폰트 등등 거의 대부분의 것들을 입맛대로 변경할 수 있습니다. JavaScript에 jQuery나 Bootstrap 링크를 추가하면 보다 우월한 디자인으로 변경할 수도 있지요.


사실 Custom Style Script 같은 부가기능은 이미 오래전부터 있었습니다. 더 많은 기능을 이용할 수 있는 그리스몽키 같은 것들이 있죠. 이 Custom Style Script은 간단한 기능을 제공하는 만큼 사용 방법이 쉬운 장점이 있습니다. 특정 사이트의 외형을 살짝 변경하기에는 부족함이 없는 부가기능입니다. 문제는 CSS 수정하는 것이 엄청난 노가다라는 것이 문제이지요.


웹브라우저에서 F12키를 누르면 개발자도구가 실행 됩니다. 검사기에서 잘 살펴보면 사이트의 구조와 CSS 스타일을 살펴 볼 수 있습니다. 마음에 안 드는 곳의 넓이, 높이, 색, 글꼴, 백그라운드색 등을 찾아 입맛대로 변경해 주시면 되겠습니다. 응?




딴지 게시판에 공유된 CSS를 제가 사용하는 2560 x 1440 모니터 환경에 맞게 살짝 수정한 CSS입니다. 모니터 하나에 창을 2개 띄워 사용하기에 1280 x 1440이라 해야 맞겠네요. 저와 같은 모니터 해상도로 딴지를 이용하신다면 CSS 내용 복사하여 사용하시면 되겠습니다. 끝~


©몽리, 꿈속으로(mongri.net), 무단전재 및 재배포 금지. 공유와 직접 링크를 선호합니다.
[저작권 규약, 운영 원칙 및 이용자 준수 사항]