| Stylus | |
| | |
| 제작자 | Jason Barnabe |
| 제작일 | 2017년 1월 8일# |
| 종류 | 브라우저 확장 기능, 프리웨어 |
| 사이트 | 공식, wiki |
| 설치 | 크롬·엣지, Firefox, CSS |
1. 웹 브라우저 확장 기능 Stylus
CSS 편집을 통해 모든/특정 웹사이트나 웹페이지의 구성을 사용자가 원하는 모양으로 리디자인[1] 가능한 웹 브라우저 확장 기능이다.2005년에 제작된 스타일리시의 후속 프로그램으로 기능 및 편리성이 좋아졌고 대용량 CSS코드로 인한 렉 감소 등 속도가 빨라졌다.
1.1. 사용 방법
사용하는 브라우저의 스타일러스 확장기능을 설치하여 CSS코드를 직접 만들거나 다른 유저가 제작한걸 설치하면 된다. 코드를 직접 만들경우 아래 설명처럼 하면 된다.- 1. 리디자인하고싶은 웹사이트에서 CSS검사기(Ctrl+Shift+C or 우클릭-요소검사)를 열어 편집할 코드를 복사한다.[2]
- 2. 스타일러스 아이콘 클릭 - (새로 만드는 경우) '적용대상URL' 클릭 or '관리'-'새 스타일 작성'('as Usercss'체크필요) 클릭. 재편집 할 경우 이름 우클릭.(혹은 연필모양 단추 클릭)
'as Usercss'체크 안하고 만들경우 용량이 클수록 속도가 매우느리고 파폭의 구글 등 일부사이트에서 스타일러스가 저절로 해제되는 버그가 발생하므로 반드시 체크하고 만들어야한다. 체크한 경우 document url의 ()안에 양쪽끝에 따옴표(')가 있어야 적용된다. - 3. 복사한 코드를 '스타일 수정' 편집창에 붙여넣기[3]하고 코드 맨 뒷자리에 "!important" 붙이기.[4]
- 4. 적용 대상에 URL지정 - 이름 지정[5] - 저장(Ctrl+S).
웹사이트마다 HTML 요소가 많이 다르기 때문에 이런 경우 각 웹사이트마다 따로 만들어서 적용해야 한다.(아래 적용 예시 참조) 또한 웹사이트가 업데이트되면서 일부 요소가 바뀌는데 스타일러스에서 적용한 일부 코드가 적용이 안되거나 문제가 생기는 경우가 있어서 이럴경우 다시 수정/재설계해야 한다.[6]
1.2. 문제점
일부 웹사이트에서 CSS 충돌이 일어나 여러 문제[7]가 발생할 수 있다.이런 경우 스타일러스를 활성/비활성시키는 단축키 설정을 통해 해결 가능하다. 추천 단축키:Alt+Z[8]
※주의: 크롬,엣지에서 단축키 설정할 때 단축키 우측은 선택항목은 손대지말것.[9]
옵션에서 단축키를 크롬은 F1~F12,단일 단축키 적용불가고 Ctrl,Alt,Shift와 영숫자 조합으로 설정가능하다.
- Edior settings: CSS코드가 많을경우 편집시 속도가 느려질수 있으므로 모두 체크해제하는걸 추천한다.
다크모드 프로그램을 2개 이상 사용시에도 CSS 충돌이 일어나 배경이 회색으로 변하거나 글자색이 잘 안보이거나 렉이 발생되는 등 부작용이 생길 수 있으므로 되도록 하나만 사용하도록 한다.[10]
1.3. 다크모드 설정
윈도우 다크모드 2가지 설정방법: "시작 - 설정 - 개인설정 - 색: 어둡게" or "시작 - 설정 - 접근성 - 고대비: 켬" (윈도우10)- 크롬: 주소창에 "chrome://flags/#forced-colors"입력, Disabled 설정.
- 파폭: 설정 - 일반 - 언어와모양:어둡게. / - 색상관리 - '위에서 선택한 색상으로 페이지에서 지정한 색상을 재정의':안함. (테마는 'Matte Black' 추천)
파폭의 기본 웹사이트들에 스타일이 적용이 안 되는데 적용되도록 하는 방법은 아래와 같다. 크롬의 경우 심각한 문제가 생겨서 제외..[11]
- 파폭: 주소창에 "about:config"입력, "privacy.resistFingerprinting.block_mozAddonManager : true", "extensions.webextensions.restrictedDomains : remove" (스타일리시는 적용불가)
엣지,크롬에서 만약 스타일 적용후 일부 글씨색이 어둡게 보인다면 chrome://flags/#enable-force-dark : Enable 로 설정되어 있어서 그럴수도 있으니 이런경우 Default로 설정한다.
1.4. 유저 스타일 (Userstyles)
userstyles.world, uso.kkx.one스타일러스 혹은 스타일리시 유저들이 만든 CSS코드를 위 사이트에 등록가능하고, 다른 유저들도 설치를해서 같이 사용할 수 있다.
유저 스타일 제작자가 새로운 코드를 업데이트하면 설치한 다른 유저들도 몇시간후 자동으로 최신버전으로 업데이트된다. 옵션에서 자동업데이트 간격이 기존 24시간으로 설정되어있으니 1시간으로 설정해야 빨리 업데이트 된다.
1.4.1. 유저 스타일 적용 예시
uin1유저가 제작한 트위터에 대한 다크모드 적용효과 시범 영상이다. 축소된 사진에 커서를 갖다대면 자동으로 원본크기로 확대된다.
CSS코드가 모두 공개되어 있으니 CSS코드를 제작할 때 참고해도 된다.
모든 사이트의 공통된 적용 효과는 아래와 같다.
- 다크 모드: 배경색은 완전한 검정색(블랙), 글자는 기존 흰색에서 초록,노랑,주황,빨강 등 글 종류마다 다양한 색으로 바꿔서 블루라이트 제거, 눈부심 현상 최소화하여 선명하게 잘보이고 글 종류마다 구분이 잘됨.
각 사이트마다 필요한 CSS코드를 적용시켰기 때문에 모든 사이트에 똑같은 대량의 코드를 적용시키는 다크모드 프로그램(Dark Reader 등)에 비해 속도 저하(렉) 현상이 적다. (물론 일부 사이트에서 렉이 약간 발생한다.)
사진,동영상,버튼의 밝기 15% 감소, 커서를 대면 원래 밝기로 강조표시된다.(일부는 적용안될수 있음) - 공간 최적화: 불필요한 빈공간 축소, 불필요한 요소(광고,절취선,테두리,아이콘,중복내용 등) 제거, 스크롤바 두께 축소로 스크롤 압박이 다소 감소되었고 일부 페이지는 한 화면에 모두 표시되도록 공간을 압축시켜 아예 스크롤이 불필요하게 만들었다.
좁은 페이지 화면 너비 확장으로 표시 내용 증가. (와이드 화면 기준)
글 위치가 좌측or우측으로 치우친 경우 중앙으로 약간 이동 배치.
검색란,사이드바,상단표시줄(header): 화면에 고정,투명화. (적용사이트: 위키,디키,남간,유튜브,뇌이버 등)
검색란,옵션,필터 등의 드롭다운메뉴에서 커서가 안/밖으로 이동시 자동표시/숨김. 화면을 가리는 드랍다운메뉴를 닫기위해 닫기버튼or외부영역을 클릭해야하는 번거러움이 없다. (적용사이트: 구글,위키,디키,디시갤,남간,트위터,다음,뇌이버,쥐마켓,쿠팡,11st,aliexpress 등 / 검색란 적용불가: 유튜브,바나나몰,오나미몰,userstyles / 모두적용불가: 일베 / 검색란 자동표시적용: 옥션)
화면을 가리는 일부 팝업창 배경 투명화.
큰 글자,이미지 크기 축소, 짧은 링크(이름,메뉴 등),페이지이동버튼 선택영역 확장. - 가독성 최적화
작은 글자,이미지 기본 크기 확대, 작은 이미지에 커서 댈시 자동으로 더크게 확대,숨겨진 영역 짤림없이 모두 표시.(클릭 불필요)
방문한 링크 색변경: 내부링크(문서,게시글 등):초록→빨강, 내부링크2(각주,유저 등):노랑/주황/연두/핑크/민트→핑크/파랑/흰색/갈색, 외부링크:하늘→보라 등 다양한 색깔을 입혀 서로 다른 종류의 글들을 쉽게 구분할 수 있게 했다.
검색란의 방문한 연관검색어 색변경. (적용:디키,바나나몰,위키,티몬,11번가 / 적용불가:구글,남간,뇌버,뇌트,다음,오나미몰,옥션,유튭,위메프,쥐마켓,쿠팡)
좁은 공간(표) 안의 숨겨진 내용 짤림없이 모두표시or표시영역 확장.
동영상: 영상안에 표시되는 표시줄,단추,그림자를 최소화or제거시켜 깔끔하게 표시되고 자막가림 문제없음, 진행바(progress bar) 선택영역 확장으로 재생위치이동 편리,재생위치 미리보기 이미지 확대. (적용 동영상: 네이버,누누TV,다음,카카오,동아일보,밴드,아프리카TV,연합뉴스,유튜브,유메이커,줌,트위치,트위터,페북,BBC,Bilibili,Chobit,Dlsite,KBS,MBC,SBS,Pornhub,Videosection,Xnxxvn,Xvideos 등)
1.5. 같이 보기
- 스타일러스(위키백과), Stylus(영문위키)
- 다크 모드: 전체적인 밝기가 대폭 감소되고 블루라이트 역시 많이 감소되어서 야간에 장시간 컴퓨터 작업시 눈에 부담이 적다.
- 문서 편집기: CSS편집할 때 유용한 기능이 많은 엠에디터같은 편집기를 쓰면 편리하고 작업영역 자동저장, 실수에인한 파일 변경 방지로 안전하게 편집할 수 있다.
- AhnLab Safe Transaction: 안랩에서 만든 보안프로그램. 인터넷 속도를 매우 느려지게하므로 자동시작 안함으로 설정하자.
- RAM(램): 인터넷이 느리고 메모리 부족으로 자주 꺼진다면 고용량 램을 구입해서 설치하거나 메모리 최적화 프로그램을 사용해보자.
2. 스타일시트 언어 Stylus
CSS로 컴파일되는 동적 스타일시트 전처리기 언어. 설계 디자인은 Sass와 LESS의 영향을 받았다. 루나(Luna) 언어의 창시자인 TJ Holowaychuk이 2010년에 만들었다.선택기에 괄호 대신 들여쓰기 사용이 가능해서 깔끔하게 볼 수 있지만 한줄로 이어 붙일수 없는 단점이 있다. 변수를 정의할 수 있고 LESS와 Sass와 달리 변수 정의를 위해 심볼을 사용하지 않는다.# 파이썬의 변수와 비슷하다.
2.1. 문제점
HTML Tag의 배치순서에 맞게 정렬해야 적용되는 등 사용하기 까다롭다. 일반적인 CSS마냥 순서를 뒤죽박죽 섞으면 아래의 에러메시지가 뜨면서 적용안된다.에러메시지: "expected ")", got "newline"" / "expected "ident", got "*""
속성 요소([])안에 쉼표(,)와 쌍점(:)(일부만 문제)가 있을시 앞에 \를 붙여야 적용된다. 예:"[style*='a:0,1'])"→"[style*='a\:0\,1'])"
3. 스타일러스 펜 (터치펜)
[1] 글자/배경 색상 변경, 크기 조절, 특정 요소(광고,절취선) 제거 등[2] 파폭의 경우 검사기-규칙 우측 "인라인:(숫자)"는 스타일러스에서 적용한것.(하지만 낮은숫자인경우 해당 사이트에서 적용한 경우가 많다)[3] 코드가 많아 로딩이 오래걸리는 상탱에서 스타일러스 창을 열자마자 붙여넣기하면 코드가 중복 추가되는 버그현상이 있다. 그레서 마지막 섹션 제목에 마지막 섹션 번호를 적어서 중복복사되었느지 확인 필요.[4] 해당 사이트 html 요소에 !important가 없거나 경로가 같거나 더 복잡하거나 새로운 코드인 경우는 붙일필요없다.[5] '적용대상URL'을 클릭한 경우 URL과 이름이 자동으로 만들어져서 편리하다. 일치하는 URL을 적용시키고 싶다면 그냥 'URL'을 선택하고 URL주소 뒤에 사선(/)을 넣어야 인식된다.[6] 특히 유튜브,X(트위터),네이버가 자주 바뀐다. 힘들게 만들어놓고 기다렸다는듯이 몇일만에 바뀌버리면 만든게 적용안되어서 다시 재설계해야되어서 스트레스가 심할 수밖에 없다.[7] 일부 영역 미표시, 일부 글의 가독성 저하, QR코드 인식불가 등[8] 파폭은 단축키 설정시 Alt키 적용시 a,l,t,+ 문자4개를 일일이 입력해야하는 불편함이 있다.[9] 그 선택항목에서 전체/글로벌 선택시 오히려 다른 브라우저에서 해당 단축키 안먹힌다.[10] Dark Reader와 같이 전체 사이트에 대량의 CSS,자바스크립트 등을 똑같이 적용하는 다크모드 프로그램의 단점은 일부 웹페이지에서 렉이 심하게 걸리고(네이버 등) 다크모드 적용이 잘 안 되는 경우(네이버포스트 등)도 있다.[11] 크롬은 "chrome://flags/#enable-force-dark": Enable로하면 되지만 일부 이미지가 지멋데로 반전되고 특히 선택된 텍스트 배경색이 너무어두워져 잘안보이므로 쓰지말것.