Twitch 화질 설정을 원본 화질(1080p)로 고정하기 (UserScript)
개발/UserScript 2019.10.07 17:44

트위치에서 원본 화질(source, 1080p)로 라이브 시청을 즐겨하는 시청자라면 간혹 화질이 저절로 낮은 화질로 변경되거나 "자동"으로 바뀌는 것을 경험한 적이 있을 것이다. 가장 자주 체감할 수 있는 것은 아래의 두 경우이다.사용자가 브라우저의 다른 탭으로 전환하여 현재 재생 중인 탭이 비활성화 된 상태로 약 1분이 지난 경우 화질을 낮춤사용자가 원본 화질(Source) 로 설정하고 약 24시간이 지난 경우 화질을 "자동"으로 설정자동 화질 변경 시 가끔 오류가 발생하기도 하고 24시간마다 매번 원본 화질을 다시 설정해야 하는 것이 귀찮은 일이다. 그래서 화질 자동 변경을 막고, 매번 재생 시마다 화질을 원본 화질로 설정해주는 툴을 브라우저 확장 기능의 일종인 UserScript 기반으로 만들었다...

VIEW POST
Twitch 스트리머 닉네임이 세로로 표시되는 현상 해결하기
개발 2019.10.05 15:38

Twitch.tv 스트리머의 닉네임이 세로로 표시되는 현상 2019년 10월 5일, Twitch.tv 스트리머의 닉네임이 세로로 표시되는 현상이 발생하고 있다. 큰 문제는 아닌만큼 금방 수정되겠지만 보기 영 거슬린다면 아래와 같은 방법으로 고칠 수 있다.문제 해결 방법 1. Stylish 설치 Stylish 는 웹사이트에 유저가 커스텀한 스타일시트(css) 를 덮어씌우는 브라우저 확장기능이다. Stylish 를 이용하면 twitch.tv 에 맞게 개발된 유저스타일을 덮어씌워 문제가 발생하지 않도록 레이아웃을 수정하는 것이 가능하다. 먼저 아래의 링크에서 자신의 브라우저에 맞는 Stylish 확장기능을 설치하여야 한다. Chrome - Stylish Firefox - StylishOpera - Stylis..

VIEW POST
Twitch 레이아웃 개편 되돌리기 (UserStyle, 확장기능을 이용)
정보 2019.09.27 23:20

세로로 표시되는 스트리머 닉네임을 가로로 표시하는 방법만 알고싶다면 이곳을 클릭Twitch 레이아웃 개편 한국시간으로 2019년 9월 26일 저녁, 갑작스럽게 트위치(twitch.tv)가 웹페이지의 레이아웃을 개편했다.나는 당시 트위치에서 동작하는 UserScript 를 개발 중이라서 내가 개발 중 뭔가를 잘못 건드린줄 알고 확장기능을 다 끄고 별짓을 다해도 그대로길래 갸우뚱했는데 알고보니 트위치가 바뀐 것이었다 -_-;; 개편된 레이아웃이 웹사이트에 css가 제대로 로드되지 않았을 때 모습처럼 생겨먹어서 오해할 수밖에 없었는데, 나 말고도 당시 트위치에 뭔가 오류가 난줄 알고 새로고침을 재차 시도한 사람들이 꽤 있었다고 한다. 이번 트위치 개편의 주제는 『존재감 存在感』이 아닐까? 커다란 팔로잉 타이틀..

VIEW POST
Twitch.tv 서버 위치 확인하는 브라우저 확장기능 (UserScript)
개발/UserScript 2019.09.18 22:46

요즘 저녁만 되면 트위치의 버퍼링이 심해지고 있다. 버퍼링이 심한 근본적인 이유는 모르겠다. 트위치 live는 작은 동영상 조각들을 연속해서 다운 받아 이어 재생하는 형식인데, 그냥 단순하게 2초짜리 동영상 조각을 받는데 2초보다 더 걸려서 버퍼링이 걸리고 있었다.나는 KT 회선을 사용 중인데 서울(SEL) 서버로 연결되면 버퍼링이 없었지만, 주말 피크 시간에는 10차례 이상 새로고침을 해도 서울 서버에 연결이 안 되는 경우도 있었다. 평일 저녁에는 Akamai Korea 서버도 상태가 괜찮았지만 주말 피크 시간에는 여기도 버퍼링이 걸렸고, 서울 서버가 아니고서는 답이 없었다. 이전에는 서버가 어떤 서버로 잡혔는지 확인하기 위해 Twitch Server Locator 라는 크롬 확장 기능을 사용했었는데,..

VIEW POST
unsafeWindow 의 의미와 사용법
개발/UserScript 2019.09.12 01:31

unsafeWindow 는 UserScript 를 개발하면서 함수를 덮어쓰고 싶을 때 주로 사용되는 도구 중 하나이다. 페이지 내에 전역으로 선언된 funcA 라는 이름의 함수를 덮어쓰고 싶은 경우 메타태그 블록에 @grant unsafeWindow 를 적어두고 아래와 같이 하면 된다. unsafeWindow.funcA = function(){console.log("funcA 하이재킹됨")}; UserScript 를 가장 처음 야매로 개발하던 아주 옛날에는(지금도 야매지만) 그냥 함수를 덮어씌우는 예제를 보고 그대로 따라한 것이라, unsafeWindow 가 함수를 덮어씌우는 역할을 하는가 싶었는데 알고보니 그런 것이 아니었고 unsafeWindow를 쓰는 이유가 따로 있었다.UserScript 가 아닌..

VIEW POST
FLO 뮤직 웹의 속도가 느린 이유??
개발/JavaScript 2019.09.05 22:35

FLO 뮤직을 사용한지 대충 3개월정도 되었는데, 이 서비스는 분명한 장단점이 있다. FLO 뮤직의 좋은 점으로는 PC로 이용할 때 별도의 프로그램 설치 없이 웹기반으로 이용할 수 있다는 점, 그리고 추천 음악 리스트가 꽤 괜찮다는 점이 있다.그렇지만 속도와 편의성 면에 있어서 불편점이 꽤 많았다. 전체적인 동작 속도가 느렸고, 각 메뉴를 이동하는데 꽤 오랜 시간이 걸렸으며, 어떤 동작을 실행하려고 할 때 잠깐 먹통이 되는 경우가 잦았다. 그리고 편의성 면에서 불편한 것이 엄청 많았다. 특히 플레이리스트가 마음에 안 드는데, 한 곡을 표시하는 높이가 너무 두꺼워서 한 화면에 많은 곡을 보기가 힘들었고, 플레이리스트에 등록된 곡을 삭제하려면 매번 편집 메뉴로 들어가야 한다는 점이 불편했다. 또, 추천 음악..

VIEW POST
갤럭시 노트10, 노트10+ 에 폰트 파일(ttf, ttc, otf) 적용하기
정보 2019.08.31 17:28

주의: 본 방법을 따라하여 발생할 수 있는 보안 문제, 휴대폰 고장 등에 있어 글쓴이는 책임지지 않음. 최근 갤럭시노트 10+ 로 스마트폰을 바꾸었다. 새 스마트폰을 산 기념으로 이것저것 꾸미다가, 기본으로 제공하는 폰트들이 전부 마음에 안 들어서 폰트 파일로부터 글꼴을 적용할 수 있는 방법이 있나 찾아보았다. 결론부터 먼저 설명하면... 한 줄 요약: Wings Fonts v3.2 버전을 이용하면 된다.갤럭시 스마트폰에 폰트 파일을 적용하기 위한 알려진 방법들은 꽤 있었지만, 노트 10과 노트 10+ 에 대해서는 아직 업댓이 안 되어서 제대로 안 되는 방법들이 많았다. 내가 테스트해본 결과 현재 시점에서 확실한 방법은 Wings Fonts v3.2 버전을 이용하는 것이다.Wings Fonts? Wing..

VIEW POST
UserScript 로 click 이벤트를 수정 및 삭제(hijacking) 하기
개발/UserScript 2019.08.30 04:26

이 글은 UserScript 환경에서 JavaScript 를 이용해 이벤트의 동작을 수정 및 삭제(hijacking) 하는 과정을 정리한 글이다. 꼭 UserScript 뿐만이 아니라 웹사이트의 동작을 바꾸는 브라우저 확장기능을 JavaScript 기반으로 개발한다면 모두 사용할 수 있는 방법이다. 예제어떤 웹 채팅 시스템이 있다. 이 채팅 시스템은 다른 사용자가 올린 링크를 클릭할 때 아래와 같은 확인 창을 띄운다.문제는 이것이 링크의 안전성 여부를 직접 확인해주는 것도 아니고, 최초 1회만 물어보는 것도 아니면서 매번 링크를 클릭할 때마다 단순히 물어보기만 하기 떄문에 결국 사용자를 귀찮게만 만드는 쓸모없는 절차라는 점이다.그래서 나는 브라우저 확장 기능의 일종인 UserScript 로 이러한 동작,..

VIEW POST
visibilitychange 이벤트를 무력화하기 위한 방법들
개발/UserScript 2019.08.26 02:32

Twitch, Youtube 같은 웹사이트는 사용자가 웹페이지를 최소화 했거나 다른 탭을 보고있는지를 체크한 후 재생 중인 동영상의 화질을 낮추거나, 화면은 내보내지 않고 음성만 재생하거나, 자동 재생이 되지 않도록 막아 데이터 전송량을 줄이는 동작을 한다. 이 때 사용자가 웹페이지를 보고있는지를 확인하기 위한 것이 바로 visibilitychange 이벤트 (https://developer.mozilla.org/ko/docs/Web/API/Page_Visibility_API)이다. 이 이벤트에 리스너로 등록된 함수는 웹페이지의 visibility 상태가 변하면, 즉 사용자가 탭을 다른 탭으로 변경하거나 원래 탭으로 복귀하는 등의 행동을 취하면 실행되게 된다. 따라서 웹사이트의 관리자가 앞서 설명한 경우..

VIEW POST
Javascript 로 Twitch API 접근하여 Stream 정보 얻기 - v3 과 v5 버전의 차이
개발/JavaScript 2019.08.12 11:04

이전에 [Javascript 로 Twitch API 접근하여 Stream 정보 얻기] 라는 글을 포스팅한 적이 있었는데 당시 Twitch API v3 을 이용하며 적은 것이었다.최근 한 통의 메일을 받았는데, 이 메일에는 Twitch API 의 버전이 v3 에서 v5 로 변경되어서(사실 바뀐지는 꽤 되었다) 구버전인 v3 은 더 이상 지원하지 않을 예정이라 몇 가지를 수정해주어야 한다는 내용이 담겨있었다. 다음의 링크로 가면 이에 대한 내용을 볼 수 있다. [v3 to v5 Migration Guide - Twitch Developers] Twitch API v5 의 변경점 - Login name 대신 User ID 를 사용해야 함 대표적인 변경점으로, v5 에서는 Live stream 의 정보를 가져올..

VIEW POST
≪ Previous : 1 : 2 : 3 : 4 : ··· : 16 : Next ≫