NOMO.asia

Twitch 레이아웃 개편 되돌리기 (UserStyle, 확장기능을 이용)

Posted 2019. 9. 27. 23:20, Filed under: 정보

세로로 표시되는 스트리머 닉네임을 가로로 표시하는 방법만 알고싶다면 이곳을 클릭

Twitch 레이아웃 개편

한국시간으로 2019년 9월 26일 저녁, 갑작스럽게 트위치(twitch.tv)가 웹페이지의 레이아웃을 개편했다.

나는 당시 트위치에서 동작하는 UserScript 를 개발 중이라서 내가 개발 중 뭔가를 잘못 건드린줄 알고 확장기능을 다 끄고 별짓을 다해도 그대로길래 갸우뚱했는데 알고보니 트위치가 바뀐 것이었다 -_-;; 개편된 레이아웃이 웹사이트에 css가 제대로 로드되지 않았을 때 모습처럼 생겨먹어서 오해할 수밖에 없었는데, 나 말고도 당시 트위치에 뭔가 오류가 난줄 알고 새로고침을 재차 시도한 사람들이 꽤 있었다고 한다.

이번 트위치 개편의 주제는 『존재감 存在感』이 아닐까?

커다란 팔로잉 타이틀이 웅장함을 뽐내고 있고, 세로로 써진 생
방
송 문구는 자신의 존재를 알리려 화면을 뚫고 나오려고 비비적거리는 중이다. (참고로 생방송 문구가 세로로 나열되어 표시되는 문제는 한국어 언어에서 나타나는 문제로, 영어 언어에서는 LIVE 라고 표시되고 가로로 제대로 나온다.)

 

단순히 배치나 크기만 문제인 것이 아니라 색상 선정도 문제이다. 기본 모드의 과거 배경색은 연한 보랏빛이 도는 회색(#FAF9FA) 이었는데 지금은 연한 회색(#FAFAFA)과 완전한 하얀색(#FFFFFF) 이 섞인 형태가 되었고, 상단바의 배경은 과거 보라색이었지만 현재는 완전한 하얀색(#FFFFFF)이 되었다. 오랜시간 영상을 보는 곳인 만큼 전보다 눈이 아파지게 되었다.

특히 어두운 테마는 짙은 회색으로 표시되던 부분이 퓨어한 어둠의 다크하게(#000) 표시되도록 바뀌어서 엄청 욕을 먹으며 원래대로 돌려달라는 요구를 받고있다.

짤막 트위치 레딧(reddit) 반응

Twitch 레딧에 들어가봤는데 상단 고정된 두개의 글을 제외하면 대부분의 상위 글이 이번 개편과 관련된 글이고, 맨 위의 글은 이번 레이아웃 변경을 어떻게 이전으로 다시 되돌리는지에 대한 글일정도로 해외에서의 평도 좋지 않았다.

레딧 반응은 이렇다.

Twitch design literally going back in time. We're in 2007 again.
트위치는 표현 그대로 '시간을 거슬러' 가고있어. 우리는 다시 2007년에 있어!

It looks as if an unpaid intern did it..
무급 인턴이 작업한 것처럼 보여...

Wow new design decisions really are terrible. Is this the beginning of a twitch downfall? i wonder how many users will use to opportunity to move to mixer now
와우 새 디자인은 정말 끔찍해. 이게 트위치 몰락의 시작일까? 나는 얼마나 많은 유저가 믹서(MIXER, 마이크로소프트의 라이브 스트리밍 플랫폼)로 옮겨가게 될지 궁금해.

좋은 반응을 하나도 찾아볼 수 없을 정도로 부정적인 반응 뿐이다.

이번 Twitch 의 개편이 얼마나 반응이 안 좋은지를 체감할 수 있는 다른 지표는, 개편 후 하루밖에 지나지 않았음에도 빠른 속도로 UI 를 개편 전으로 되돌리거나 불편한 부분을 수정하기 위한 UserStyle, UserScript 가 작성되어 올라오고 있다는 것이다.

이 글에서는 이렇게 올라온 것 중 몇가지만 소개해보고자 한다.

주의: 아래에서 소개하는 유저스타일, 유저스크립트, 확장기능을 설치하여 발생할 수 있는 보안 문제, 브라우저 오류로 인한 손해 등에 있어 글쓴이는 책임지지 않습니다.

Twitch 레이아웃 개편 되돌리기 - Stylish 사용하기

Stylish 는 웹사이트에 유저가 커스텀한 스타일시트(css) 를 덮어씌우는 브라우저 확장기능이다. Stylish 를 이용하면 twitch.tv 에 맞게 개발된 유저스타일을 덮어씌워 레이아웃을 개편 전과 유사하게 or 거슬리지 않게 수정하는 것이 가능하다.

먼저 아래 링크에서 자신의 브라우저에 맞는 Stylish 확장기능을 설치하고 그 후에 다시 유저스타일(Userstyle) 을 설치하는 방식으로 사용할 수 있다.

참고로 Stylish 설치 후 Stylish 의 관리자 메뉴는 스크립트 설치 후 브라우저 툴바에 생겨난 {S} 모양의 버튼을 누르고, 그 안의 Manage 버튼을 누르면 진입할 수 있다.

스트리머 닉네임, 생방송 문구를 가로로 표시하기 (Twitch.tv fix streamer's display name nowrap)

세로로 표시되는 스트리머 닉네임과 생방송 문구가 거슬려서 간단히 만든 것으로, 자신의 브라우저에 맞는 Stylish 를 설치하였다면 아래의 링크로 접속하여 Install Style 버튼을 눌러주면 된다.

Twitch.tv fix streamer's display name nowrap (https://userstyles.org/styles/176034/twitch-tv-fix-streamer-s-display-name-nowrap)

혹은 아래의 내용을 직접 새 유저스타일로 추가해주면 된다.

div.channel-header .tw-mg-l-05.tw-sm-mg-l-1.tw-visible {
      white-space: nowrap;
}
div.channel-header p.tw-font-size-5 {
      white-space: nowrap;
}
.tw-nowrap {
      white-space: nowrap;
}

설치를 완료하면 아래와 같이 생방송 문구가 깔끔하게 나온다.

개편 직후에는 생방송 문구만 세로로 나오다가 10월 5일부터 스트리머 이름이 세로로 나오기 시작했는데, 이것도 아래처럼 깔끔하게 나온다.

 → 

Fix Twitch Redesign 2019

Fix Twitch Redesign 2019 는 어두운 테마를 보기 좋게 수정하는 유저스타일이다. 어두운 테마를 수정하는 유저스타일 중 개인적으로 이 유저스타일이 가장 마음에 들었다. Stylish 확장기능을 이미 설치하였다면, 그냥 아래 링크로 들어가서 Install Style 버튼을 누르면 설치된다.

https://userstyles.org/styles/175738/fix-twitch-redesign-2019

▼ 기본

▼ 유저스타일 설치 후. 배경 톤이 조금 밝아지고 폰트도 바뀌었다.

참고로 어두운 테마를 켠 상태에서만 제대로 적용되고 어두운 테마를 끄면 이상하게 보인다. 어두운 테마를 사용하지 않을 때는 Stylish 에서 수동으로 꺼줘야한다. 어두운 테마는 Twitch.tv 의 상단바 가장 우측의 내 프로필 사진을 클릭하면 나오는 메뉴에서 켤 수 있다.

Dark Theme for TwitchTV

Dark Theme for TwitchTV 는 앞서 소개한 것과 마찬가지로 어두운 테마를 수정하는 유저스타일이지만 약간 다르다. 아래 링크에서 설치할 수 있다.

https://userstyles.org/styles/148766/dark-theme-for-twitchtv

Light theme

기본 밝은 테마 기준의 유저스타일은 여기서 찾았는데 완벽하지는 않다. 혹시 테스트해보고 싶다면 아래의 파일을 Stylish 의 관리자(Manage) 메뉴에서 Import 하면 된다.

Twitch_light_theme.json

Twitch 레이아웃 개편 되돌리기 - UserScript 사용하기

UserScript 의 경우 UserStyle 과 비슷한 것이지만 스타일시트(css) 대신 자바스크립트(js)를 삽입하여 웹페이지를 수정한다는 점이 다르다. 아래에서 소개할 Script 를 설치하기 전 자신이 사용하는 브라우저에 맞는 Script Manager를 설치해주어야 한다.

Twitch, I don't like change

https://greasyfork.org/ko/scripts/390527-twitch-i-don-t-like-change

Twitch, I don't like change 는 어두운 테마 사용 시 색상을 개편 이전으로 돌려주는 UserScript 이다. 별도의 설정은 없고 설치만 하면 자동으로 적용된다.

▼ 기본

▼ 유저스크립트 설치 후. 폰트, 배경색, 테두리 색 등이 전체적으로 다 바뀌었다.


FrankerFaceZ 사용하기

FrankerFaceZ 는 Twitch.tv 의 기본 UI를 베이스로 UI 수정/기능 추가, 채팅 기능 추가, 테마 수정 등을 가능하게 하는 브라우저 확장기능이다.

이번 레이아웃 개편과 관련해서는 어두운 모드를 현재보다 조금 더 밝게 사용할 수 있게 하는 기능을 제공한다.

▼ 확장기능 설치 및 기능 적용 후.

적용 방법

  1. https://www.frankerfacez.com/ 로 가면 브라우저 별 확장 기능 링크를 찾을 수 있다. 해당 링크로 접속하여 설치한다.
  2. 설치를 마치고 Twitch.tv 에 접속하면 상단바 우측에 FrankerFaceZ Control Center 버튼이 생기는데, 클릭하면 설정 창이 열린다.
  3. Appearance -> Theme -> Gray(No Purple) 에 체크한다.

어두운 테마가 켜져있을 때만 적용되는 기능이다.

그 외에 Font Famliy 에 폰트 이름을 입력하면 글자체를 바꿀 수도 있다. 영문 언어 기준으로 개편 전 폰트의 이름은 Helvetica 이었다고 하니 새 영문 폰트가 마음에 들지 않는다면 Font Family 란에 입력해주면 되겠다. 또 다른 기능도 무척이나 많으니 이것저것 건드려보면 괜찮은 기능을 찾을 수 있을 것이다.

나는 어두운 테마 + Fix Twitch Redesign 2019(UserStyle) + Twitch.tv Korean live text nowrap(UserStyle) 조합으로 사용 중이다.

Twitch.tv 의 개편이 진행된지 아직 하루밖에 지나지 않았는데도 UI 를 이전으로 되돌리기 위한 툴들이 벌써 이만큼이나 나온 것을 보니, 주말이 닥친 지금 앞으로 이러한 기능들이 더욱 개발될 것으로 기대된다. 앞으로 좋은 유저스타일, 확장기능을 찾으면 이 글에 계속 업데이트 하도록 하겠다. (이 글에 없는 유저스타일, 스크립트를 찾으시면 댓글로 공유해주세요!)

'정보' 와 연관된 글

티스토리툴바