Honsal's Dailylife

Chrome DevTools Network 탭의 엄청난 렉 확장 프로그램 개발하랴 웹 사이트 개발하랴 API 테스트하랴 올해들어 크롬이 가장 바쁘게 일하고 있다. 당연히 DevTools도 재보지는 않았지만 한 시간에 수백번은 열고 닫는 것 같은데 사실 이렇게 많이 열고 닫을 일은 아니다. 한 번 열어놓고 앵간하면 닫을 일이 없으니까… 하다 못해 외부 사이트에서 열더라도 닫는 건 내가 닫을 일이 없다. 탭을 닫으면 닫히니까. 그럼 왜 이렇게 많이 닫게 됐나? Network 탭의 미친듯한 렉 그 이유는 바로 Network 탭의 미친듯한 렉에 있다. 어느 버전부터 이런 증상이 생긴 것인지는 모르겠지만, 요청이 100개 정도 쌓이면 도저히 사용할 수 없을 정도의 버벅임이 발생한다. 문제는 Network 탭에서만 발생 한다는 것이다. 콘솔에 수백만 줄이 올라가도, 수천 줄짜리 소스를 리포맷해도 이런 문제는 발생하지 않는다. 1 원인 파악 비슷한 사례가 없나 구글링을 해보니 넘쳐나고 있었다. 그 중 한 글에서는 chrome://flags 에서 Force color profile 을 sRGB 로 바꿔보라는 내용도 있었는데, 댓글을 보면 효과를 본 사람이 있는 것 같았지만 일단 나는 아니었다. 그 밑에는 확장 프로그램 관련 문제일 수 있으니 React Developer Tools, Firebug, Omnibug, ... 등을 비활성화 해보라고 하길래 아예 devtools 기능이 있는 모든 확장프로그램을 비활성화 했다가, 전부 다 비활성화 했다가, 별 지랄을 다 해봤으나 증상은 동일했다. 시간은 흘러가고, 일단 파이어폭스로 작업을 하다가 문득 생각이 들었다. 이게 정말 크롬 업데이트 이후로 생긴 문제일까? 결론부터 말하자면, 반은 맞고 반은 틀렸다. Overview 기능 왜 반만 맞고 반만 틀리냐면, 언젠가 업데이트 된 기능 때문이긴 하니까. 문제는 얼마나 오래전에 추가된 기능인지 알 수가 없다. 즉, 얼마 전에 업데이...

  바로 전에 탬퍼몽키 포스트 를 올렸습니다. 바로 이 글을 위해서죠. 우선 해당 포스트에서 탬퍼몽키 확장 도구를 설치한 뒤 읽어주시기 바랍니다.   이 포스트는 크롬 또는 파이어폭스 의 Tampermonkey  애드온/확장 도구가 설치돼 있어야 사용 가능합니다.   또한, 이 포스트는 크롬 기준으로 작성됨을 알립니다. 쓰잘데기 없이 짜증만 나는 우클릭 방지 알림   옥션에서 상품 페이지를 둘러보다 우클릭을 하면, 쓰잘데기 없이 뜨는 짜증나는 알림이 있습니다.   바로 위와 같은 알림이죠. 저는 우클릭 드래그 제스쳐로 여러 기능(페이지 앞으로, 뒤로, 새로고침, 다음 탭, 이전 탭, 탭 닫기 등등)을 사용하는 사람인데 우클릭 할 때마다 저 알림이 뜨니 정말 짜증이 났습니다.   심지어, 상품 상세설명은 우클릭을 막는다고 막아지지도 않습니다. 크롬이나 IE나 파이어폭스나 오페라나 사파리나 그 어떤 브라우저든지 개발자 도구를 열고 해당 HTML 엘리먼트로 이동한 뒤 내부 내용을 복사하면 되거든요. 뭐 이것 말고도 방법은 많지만, 가장 간단한 방법이 위와 같습니다. 한 마디로 저 알림은 사용자를 짜증나게 하는 보여주기식 알림창 일 뿐이죠. 알림을 없애기 위한 검색, 그러나   짜증이 난 저는 처음엔 페이지마다 window.oncontextmenu 프로퍼티를 수정해 알림을 없애고 돌아다녔지만, 그것도 한두번이지 너무 귀찮더라고요. 그래서 혹시 이미 나와있는 우클릭 방지 해제 스크립트가 있나 찾아보고 설치했지만, 작동을 하지 않더라고요.   그렇다고 확장 도구를 하나 설치하자니 이미 깔린 게 많아서 뭔가 거부반응이 일어나고... 그래서 그냥 Tampermonkey 스크립트를 직접 하나 만들었습니다. 옥션 우클릭 방지 알림 해제 스크립트   포스트 맨 위에서 다들 Tampermonkey는 설치하셨나요? 이 스크립트를 사용하기 위해...

Tampermonkey   Tampermonkey, 탬퍼몽키? 이름만 들어서는 뭐 하는 확장 프로그램인지 감이 안 오실 겁니다. 직역하면 쓸데없이 참견해대는 원숭이 정도가 되겠네요. 어찌 보면 딱 알맞는 이름일지도 모릅니다. 현재 페이지에 커스텀 자바스크립트를 실행해주는 확장 도구   이유는 탬퍼몽키를 사용하면 특정 사이트, 혹은 사이트의 특정 페이지에 원하는 자바스크립트를 실행시킬 수 있기 때문입니다. 예를 들어서, 쇼핑몰 사이트의 정말 쓰잘데기 없는 우클릭 방지 스크립트를 비활성화시키는 행위 등을 말이죠.   한 번 옥션을 예로 들어볼까요? 옥션 상품 페이지에서 우클릭을 하면 알림창이 뜹니다. 상품 상세설명 무단도용 방지를 위해 우클릭을 비활성화했다는 정말 쓰잘데기 없는 알림이죠. 하지만 탬퍼몽키에 해당 사이트의 우클릭 방지 기능을 비활성화하는 스크립트를 넣어두면, 몇 번을 열고 몇 번을 새로고침해도 다시는 우클릭에 대한 알림이 뜨지 않게 됩니다. 다양한 활용   요즘은 크롬, 파이어폭스 모두 다양한 확장 도구가 나와있습니다. 정말 다양하죠. 하지만 그럼에도 불구하고 자신에게 딱 맞는 확장 도구를 찾기란 쉽지 않습니다. 예를 들어서, 구글 검색 결과 우측에 '제목 복사' 버튼이 생겨서 클릭하면 클립보드에 해당 제목이 복사되는 기능 등, 사용자마다 원하는 기능은 다른데 확장 도구는 그렇게 다양한 사용자 환경까지 고려하지는 않죠.   하지만 Tampermonkey 확장 도구와 자바스크립트 지식이 있다면 웹 페이지 안에서  가능한 모든 기능을 제작해 사용할 수 있습니다. 방금 위에 말씀드린 제목 복사 뿐 아니라, 깊게 들어가면 구글 검색 결과 페이지의 배경을 바꾼다던가, 애니메이션 처리를 하는 등 디자인적인 변경은 물론 네이버 검색 결과 페이지에서 쓸데없는 부분을 없애고 구글과 같이 심플하게 만들어린 뒤 '이 제목을 구글로 검색'과 같은 버튼을 다는 것도 가능하죠. 뭐든지 ...

매번 보는 지겨운 페이스북 화면   개인적으로 페이스북 처음 시작했을 때부터 느꼈지만 페이스북 디자인은 참 뭐랄까... 개인적으로 심플하면서도 촌스러운 느낌이 있습니다.   예전엔 데스크탑보다 모바일 페이스북을 더 많이 했기 때문에 신경을 쓰지 않았지만 회사를 다니고 맨날 컴퓨터 앞에 앉아있다 보니 뭔가 데스크탑 페이스북 테마를 좀 더 보기 좋게 바꿔보고 싶어서 알아보던 참에 Facebook Flat 이라는 쓸만한 크롬 확장 프로그램을 알게 돼 공유합니다. Flat 스타일의 페이스북 :: Facebook Flat   Facebook Flat 확장 프로그램 을 설치한 제 페이스북 타임라인입니다. 취향에 따라 다르겠지만, 전 맨날 보던 기본 페이스북 테마보다 훨씬 낫다고 느끼고 만족하며 사용중입니다.   맨 위 헤더의 촌스러운 그라데이션이 Flat 스타일로 변경됐고, 여백에 메뉴만 덩그러니 올려진 듯 했던 사이드바도 색상이 입혀진 채 좀 더 보기 좋게 바뀌었습니다. 바뀐 헤더 바뀐 사이드바   상태 업데이트 패널도 쓸데없는 그라데이션이 사라지고 좀 더 세련된 느낌으로 바꼈습니다. 달라진 상태 업데이트 패널   심지어 다양한 색상은 없지만 색상 테마도 선택할 수 있습니다. 색상 테마 선택   이제 더이상 뭔가 2% 허전한 페이스북이 아닌 심플하고 깔끔한 페이스북으로 바뀌었네요. 개인적으로 굉장히 만족하면서 사용중입니다.