<div id="readability-page-1" class="page"><div>
    
    <article>
        <ul id="markdown-toc">
  <li><a href="#trancy" id="markdown-toc-trancy">Trancy</a></li>
  <li><a href="#vimium" id="markdown-toc-vimium">Vimium</a>    <ul>
      <li><a href="#마우스-안-쓰고-클릭하기" id="markdown-toc-마우스-안-쓰고-클릭하기">마우스 안 쓰고 클릭하기</a></li>
      <li><a href="#마우스-안-쓰고-스크롤하기" id="markdown-toc-마우스-안-쓰고-스크롤하기">마우스 안 쓰고 스크롤하기</a></li>
      <li><a href="#열려-있는-탭을-검색해-이동하기" id="markdown-toc-열려-있는-탭을-검색해-이동하기">열려 있는 탭을 검색해 이동하기</a></li>
      <li><a href="#상위-url-경로로-이동하기" id="markdown-toc-상위-url-경로로-이동하기">상위 url 경로로 이동하기</a></li>
    </ul>
  </li>
  <li><a href="#tab-wrangler" id="markdown-toc-tab-wrangler">Tab Wrangler</a>    <ul>
      <li><a href="#탭을-자동으로-종료하고-검색하기" id="markdown-toc-탭을-자동으로-종료하고-검색하기">탭을 자동으로 종료하고 검색하기</a></li>
      <li><a href="#상세-설정" id="markdown-toc-상세-설정">상세 설정</a></li>
    </ul>
  </li>
  <li><a href="#firefox" id="markdown-toc-firefox">Firefox</a>    <ul>
      <li><a href="#상단-베젤-높이-줄이기" id="markdown-toc-상단-베젤-높이-줄이기">상단 베젤 높이 줄이기</a></li>
    </ul>
  </li>
  <li><a href="#함께-읽기" id="markdown-toc-함께-읽기">함께 읽기</a></li>
</ul>

<h2 id="trancy">Trancy</h2>

<p><a href="https://www.trancy.org/download">Download Trancy Extension</a></p>

<p>외국어 공부를 위한 AI 번역기 익스텐션.</p>

<p>웹 페이지에 번역된 문장을 침투시키는 방식이어서 원문과 대조해 읽기 좋다.</p>

<h2 id="vimium">Vimium</h2>

<ul>
  <li><a href="https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb">Vimium (chrome)</a></li>
  <li><a href="https://addons.mozilla.org/ko/firefox/addon/vimium-ff/">Vimium-ff (firefox)</a>
    <ul>
      <li>Firefox용 Vimium은 단축키 설정을 변경할 수 없고, 한 가지 기본 단축키만 제공한다.</li>
    </ul>
  </li>
</ul>

<p>Vimium은 Vim 과 유사한 키 바인딩으로 다양한 웹 브라우저 조작 기능을 제공한다.</p>

<p>기능이 50가지가 넘어가므로, 수시로 <code>?</code>를 입력해 도움말을 보면서 필요한 기능을 찾아보면 된다.</p>

<p>단순히 마우스를 안 쓰게 되는 것 이상의 강력한 기능들이 많으니 익숙해지면 좋다.</p>

<p>대부분의 기능은 Vim의 상식 선에서 동작한다. 즉, Vim을 알고 있다면 별로 외울 것이 없고 자연스럽게 사용할 수 있다.</p>

<h3 id="마우스-안-쓰고-클릭하기">마우스 안 쓰고 클릭하기</h3>

<p>Vimium의 가장 강력한 기능은 <code>f</code>와 <code>F</code>이다.</p>

<p>웹 브라우저를 사용하다 <code>f</code>를 누르면 다음과 같이 클릭 힌트가 나타난다.</p>

<p><img src="https://johngrib.github.io/resource/C3/F7D543-D04C-4FAF-8BB6-867E95298624/vimium-f.png" alt=""></p>

<p>클릭하고 싶은 곳의 힌트를 보고 키보드로 입력하면, Vimium이 해당 항목을 클릭해주는 방식이다.</p>

<p>위의 화면에서는 키보드의 <code>d</code>를 누르면 검색 입력칸을 클릭하는 효과가 난다.</p>

<p><code>F</code>는 <code>f</code>와 비슷하지만 "새 탭에서 열기"로 클릭을 해준다.</p>

<h3 id="마우스-안-쓰고-스크롤하기">마우스 안 쓰고 스크롤하기</h3>

<p>Vimium은 Vim과 비슷한 키 바인딩을 활용한 스크롤 기능을 제공한다.</p>

<table>
  <thead>
    <tr>
      <th>입력</th>
      <th>기능</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>j</code></td>
      <td>아래로 스크롤</td>
    </tr>
    <tr>
      <td><code>k</code></td>
      <td>위로 스크롤</td>
    </tr>
    <tr>
      <td><code>d</code></td>
      <td>반 페이지 아래로 스크롤</td>
    </tr>
    <tr>
      <td><code>u</code></td>
      <td>반 페이지 위로 스크롤</td>
    </tr>
    <tr>
      <td><code>gg</code></td>
      <td>최상단으로 스크롤</td>
    </tr>
    <tr>
      <td><code>G</code></td>
      <td>최하단으로 스크롤</td>
    </tr>
    <tr>
      <td><code>h</code></td>
      <td>왼쪽으로 스크롤</td>
    </tr>
    <tr>
      <td><code>l</code></td>
      <td>오른쪽으로 스크롤</td>
    </tr>
    <tr>
      <td><code>zH</code></td>
      <td>가장 왼쪽으로 스크롤</td>
    </tr>
    <tr>
      <td><code>zL</code></td>
      <td>가장 오른쪽으로 스크롤</td>
    </tr>
  </tbody>
</table>

<h3 id="열려-있는-탭을-검색해-이동하기">열려 있는 탭을 검색해 이동하기</h3>

<p>Vimium의 <code>T</code>를 사용하면 현재 열려 있는 탭을 검색할 수 있다.</p>

<ul>
  <li>검색어를 입력하면 실시간으로 필터링된다.</li>
  <li>화살표로 위아래 이동하는 것도 가능하다.</li>
  <li>나는 <code>space</code>키를 <code>T</code>와 똑같이 기능하도록 등록해 두었다.(<code>Vimium Options</code> - <code>Custom key mappings</code>에서 설정)
    <div><pre><code><span>map</span> <span>&lt;</span>space<span>&gt;</span> Vomnibar<span>.</span>activateTabSelection
</code></pre></div>
  </li>
</ul>

<p>웹 브라우저를 사용하다 <code>space</code>를 누르면 다음과 같이 탭 선택기가 열린다.</p>

<p><img src="https://johngrib.github.io/resource/C3/F7D543-D04C-4FAF-8BB6-867E95298624/vimium-t.png" alt=""></p>

<h3 id="상위-url-경로로-이동하기">상위 url 경로로 이동하기</h3>

<ul>
  <li><code>gu</code>를 입력하면 상위 경로 url로 이동한다.</li>
</ul>

<p>현재 페이지가 <code>https://github.com/johngrib/johngrib.github.io/</code> 일 때, <code>gu</code>를 입력하면…</p>

<p><code>https://github.com/johngrib/</code> 로 이동한다는 뜻이다.</p>

<ul>
  <li><code>gU</code>를 입력하면 최상위 경로 url로 이동한다.</li>
</ul>

<p>현재 페이지가 <code>https://github.com/johngrib/johngrib.github.io/</code> 일 때, <code>gU</code>를 입력하면…</p>

<p><code>https://github.com/</code> 로 이동한다는 뜻이다.</p>

<h2 id="tab-wrangler">Tab Wrangler</h2>

<ul>
  <li><a href="https://chrome.google.com/webstore/detail/tab-wrangler/egnjhciaieeiiohknchakcodbpgjnchh?hl=ko">Tab Wrangler(chrome)</a></li>
  <li><a href="https://addons.mozilla.org/ko/firefox/addon/tabwrangler/">Tab Wrangler(firefox)</a></li>
</ul>

<h3 id="탭을-자동으로-종료하고-검색하기">탭을 자동으로 종료하고 검색하기</h3>

<p>Tab Wrangler를 사용하면 일정 시간 이상 들어가지 않은 탭을 자동으로 닫아주고, 자체 히스토리에 기록한다.</p>

<p>물론 단축키를 등록해 수동으로 닫고 기록하는 방법도 있다. 나는 다음과 같이 설정해 두었다.</p>

<ul>
  <li><code>option</code> - <code>s</code>: 현재 탭을 닫고 탭 랭글러에 저장
    <ul>
      <li>다시 볼 필요가 없는 탭은 <code>command</code>-<code>w</code>로 닫는다.</li>
      <li>다시 볼 탭은 <code>option</code>-<code>s</code>로 닫는다.</li>
    </ul>
  </li>
  <li><code>option</code> - <code>a</code>: 탭 랭글러 검색.</li>
</ul>

<p>웹 브라우저를 사용하다가 <code>option</code> - <code>a</code>를 누르면 다음과 같이 탭 랭글러가 열린다.</p>

<p>검색 입력에 커서가 있으므로 곧바로 검색을 할 수 있다.</p>

<p><img src="https://johngrib.github.io/resource/C3/F7D543-D04C-4FAF-8BB6-867E95298624/tab-wrangler.png" alt=""></p>

<h3 id="상세-설정">상세 설정</h3>

<p><img src="https://johngrib.github.io/resource/C3/F7D543-D04C-4FAF-8BB6-867E95298624/config.png" alt=""></p>

<ul>
  <li>들어가지 않은 지 2시간 반이 지난 탭을 탭 랭글러가 수거하게 해 두었다.</li>
  <li>탭이 10개 이상인 경우에만 탭을 수거하게 했다.</li>
  <li>히스토리 사이즈는 1,000(최대값)으로 한다.</li>
  <li>1초 활성화 옵션은 탭 이동을 통해 잠시 스쳐 지나간 탭의 타이머를 갱신하지 않게 해준다.</li>
</ul>

<h2 id="firefox">Firefox</h2>

<h3 id="상단-베젤-높이-줄이기">상단 베젤 높이 줄이기</h3>

<ul>
  <li><code>about:config</code> 에서 <code>browser.compactmode.show</code>를 <code>true</code>로 바꾸면, customize toolbar에서 <code>density</code>를 <code>compact</code>로 바꿀 수 있다.</li>
</ul>

<h2 id="함께-읽기">함께 읽기</h2>

<ul>
  <li>[[web-browser-vim]]</li>
</ul>


        
        
    </article>

    
    
    


</div></div>

웹 브라우저 이것저것

댓글