<div id="readability-page-1" class="page"><div>
                  <p><a href="/m/category/%EA%B8%B0%ED%83%80"><span>기타</span></a></p><h3>하이라이트 링크 복사 원리를 파해쳐보자 : Text Fragment</h3>
                </div><p><cite>chancethecoder</cite>
                  <span> 2021. 11. 19. 14:56</span>
                </p><div>
                                <p data-ke-size="size16">본문에서는 크롬 브라우저의 하이라이트 링크 복사 기능을 사용해보고, 어떻게 동작하는지 URL 구조를 분석해보겠습니다.</p>
<h3 data-ke-size="size23">하이라이트 링크 복사(Copy To Link)가 뭔가요?</h3>
<figure data-ke-mobilestyle="widthOrigin" data-filename="Screen Shot 2021-11-19 at 11.46.44 AM.png" data-origin-width="2410" data-origin-height="762">
    <span data-url="https://k.kakaocdn.net/dn/bMmUnw/btrlCpEw36e/ndOTDKYqONTx2W0xNcYug0/img.png" data-lightbox="lightbox" data-alt="출처:&amp;nbsp;chrome://whats-new/?auto=true">
        <img src="https://k.kakaocdn.net/dn/bMmUnw/btrlCpEw36e/ndOTDKYqONTx2W0xNcYug0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="Screen Shot 2021-11-19 at 11.46.44 AM.png" data-origin-width="2410" data-origin-height="762">
    </span>
    <figcaption>출처:&nbsp;chrome://whats-new/?auto=true</figcaption>
</figure>
<p data-ke-size="size16">하이라이트 링크 복사는 최신 크롬 브라우저(95+ 버전부터 기본 지원)에서 추가된 기능으로, 웹페이지 본문 내에 존재하는 텍스트로 바로 이동 가능하도록 링크를 복사하는 기능입니다. 복사된 링크는 상당히 긴 URL로 생성되며, 이를 공유할수도 있고 링크로 만들 수도 있기 때문에 유용하게 쓰일 수 있습니다.</p>
<p data-ke-size="size16">저는 해당 기능이 어떻게 동작하는지 궁금해졌고, 링크에 비밀이 숨어있을거라는 생각이 들어 조금 더 자세하게 파악해보기로 했습니다.</p>
<h3 data-ke-size="size23">URL 구조 살펴보기</h3>
<p data-ke-size="size16">먼저 하이라이트 링크 복사를 해보겠습니다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="1950" data-origin-height="673">
    <span data-url="https://k.kakaocdn.net/dn/kyZxQ/btrlw2YGcwi/L5KLbZN1gpqI9QA8tVpq31/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/kyZxQ/btrlw2YGcwi/L5KLbZN1gpqI9QA8tVpq31/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="1950" data-origin-height="673">
    </span>
    
</figure>
<p data-ke-size="size16">위처럼 텍스트 블럭을 우클릭해서 하이라이트 링크 복사하기를 누르고, 탭을 하나 더 켜서 주소창에 붙여넣기를 합니다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="2190" data-origin-height="271">
    <span data-url="https://k.kakaocdn.net/dn/bGe7HQ/btrlwIMTDpM/kroFixezvsl7gVehvaFiO0/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/bGe7HQ/btrlwIMTDpM/kroFixezvsl7gVehvaFiO0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="2190" data-origin-height="271">
    </span>
    
</figure>
<p data-ke-size="size16">역시나 매우 긴 URL이 생성되는것을 볼 수 있습니다. 한글이 포함된 URL이 길어지는 이유는, 인터넷 통신에서 사용되는 URL이 ASCII 문자열로만 이루어져야 하기 때문입니다. 한글을 ASCII 코드로 표현하기 위해서는 인코딩을 거쳐야 하고, 이 과정에서 길어지게 됩니다. (참고: <a href="https://www.w3schools.com/tags/ref_urlencode.asp" target="_blank" rel="noopener">https://www.w3schools.com/tags/ref_urlencode.asp</a>) 이는 <i>encodeURIComponent</i>라는 내장 함수를 통해 재현할 수 있으며, 반대로 인코딩된 URL을 한글 포맷으로 변환하려면 <i>decodeURIComponent</i> 함수를 통해 확인할 수 있습니다.</p>
<p data-ke-size="size16">개발자 콘솔에서 디코딩을 통해 한글 포맷으로 변환해보겠습니다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="Screen Shot 2021-11-19 at 12.58.47 PM.png" data-origin-width="2236" data-origin-height="324">
    <span data-url="https://k.kakaocdn.net/dn/b5Y1jT/btrlyX9ZHcd/3qPbqnxQkxVYFI2UAYx2HK/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/b5Y1jT/btrlyX9ZHcd/3qPbqnxQkxVYFI2UAYx2HK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="Screen Shot 2021-11-19 at 12.58.47 PM.png" data-origin-width="2236" data-origin-height="324">
    </span>
    
</figure>
<p data-ke-size="size16">이제 URL의 구조가 한 눈에 들어옵니다. 중간에 보면 특이한 녀석이 보이는데요, 바로 <b>#:~:text=</b> 입니다. 해당 값 바로 뒤에 문자열이 들어가는것으로 보니 결국 저 부분이 비밀의 열쇠일 것 같습니다.</p>
<h3 data-ke-size="size23">Scroll To Text Fragment</h3>
<p data-ke-size="size16">위에서 찾아낸 #:~:text=의 정체는 <a href="https://github.com/WICG/scroll-to-text-fragment" target="_blank" rel="noopener">Text Fragment</a> 였습니다. 해당 내용은 아직 proposal 단계이며, <a href="https://url.spec.whatwg.org/">URL Standard</a>에서는 찾아볼 수 없습니다. (2021.11.19 기준) 이는 웹 문서 내에 존재하는 텍스트를 URL에 포함하고자 하는 시도로 Fragment(#) 뒤에 특정 규칙에 따라 지정할 수 있습니다. 문법은 아래와 같습니다.</p>
<p data-ke-size="size16">예시 : <a href="https://en.wikipedia.org/w/index.php?title=Cat&amp;oldid=916388819#:~:text=Claws-,Like%20almost,the%20Felidae%2C,-cats">https://en.wikipedia.org/w/index.php?title=Cat&amp;oldid=916388819#:~:text=Claws-,Like%20almost,the%20Felidae%2C,-cats</a></p>
<div>
<pre data-ke-language="javascript"><code>:~:text=[prefix-,]textStart[,textEnd][,-suffix]
         context  |-------match-----|  context</code></pre>
<p data-ke-size="size16">크롬 브라우저에서는 Text Fragment가 포함된 URL을 입력받을 경우, 해당 영역에 대한 스크롤 및 하이라이트를 지원해주는 것으로 보입니다. 이는 아직 모든 브라우저에서 완전 호환되는 기능은 아닙니다만, 일부 테스트가 진행되고 있는 것으로 보입니다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="Screen Shot 2021-11-19 at 2.14.53 PM.png" data-origin-width="1250" data-origin-height="288">
    <span data-url="https://k.kakaocdn.net/dn/4YLqJ/btrlAtgQjVP/ON6NkKS6S5nAkB7NQ0IVb1/img.png" data-lightbox="lightbox" data-alt="참조:&amp;nbsp;https://wicg.github.io/scroll-to-text-fragment/">
        <img src="https://k.kakaocdn.net/dn/4YLqJ/btrlAtgQjVP/ON6NkKS6S5nAkB7NQ0IVb1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="Screen Shot 2021-11-19 at 2.14.53 PM.png" data-origin-width="1250" data-origin-height="288">
    </span>
    <figcaption>참조:&nbsp;https://wicg.github.io/scroll-to-text-fragment/</figcaption>
</figure>
<h3 data-ke-size="size23">Text Fragment가 왜 필요한가?</h3>
<p data-ke-size="size16">그럼 이런 기능이 왜 필요한지 궁금해졌습니다. 일반적인 URL에 익숙한 사람으로써, 이런 해괴망측한(?) 표현식을 넣어가면서까지 표준화 하려는 이유가 무엇일까요? proposal 내용을 정리하면 아래와 같습니다. (참고: <a href="https://github.com/WICG/scroll-to-text-fragment#motivating-use-cases" target="_blank" rel="noopener">https://github.com/WICG/scroll-to-text-fragment#motivating-use-cases</a>)</p>
<h4 data-ke-size="size20">1. 검색 엔진의 이점</h4>
<p data-ke-size="size16">예를 들어, 구글에 질의하면 그에 연관된 페이지들의 링크 목록을 보여줍니다. 이 때 각 페이지의 HTML 요소에 ID 값이 포함되어있을 경우 해당 영역으로 바로 스크롤 되도록 "Jump to" 링크를 만들어줍니다. (이는 기존의 Fragment 기능을 사용하는 것이겠죠)</p>
<p data-ke-size="size16">하지만 ID 값이 하나도 없는 페이지일 경우 어디로 스크롤 해야할지 모르기 때문에 페이지의 최상단에 머물러 있겠죠. 이럴 때 Text Fragment를 통해 원하는 질의 응답에 해당하는 영역을 지정하면 손쉽게 "Jump to" 링크를 만들 수 있습니다.</p>
<h4 data-ke-size="size20">2. 레퍼런스 효율성</h4>
<p data-ke-size="size16">위키 페이지와 같이 인용이 많이 되는 페이지는 종종 특정 문구를 인용하는 것인데도 불구하고 전체 페이지를 살펴보게 만들기도 합니다. 이런 경우 Text Fragment를 통해 정확히 인용하고자 하는 텍스트 영역을 링크로 참조를 건다면 효율성이 올라갑니다.</p>
<h4 data-ke-size="size20">3. 웹 페이지의 특정 구절 유저 간 공유하기</h4>
<p data-ke-size="size16">유저 간 웹페이지 문서를 주고받을 때, 특정 부분을 공유하고자 하는 경우 Text Fragment를 통해 정확하게 전달이 가능합니다.</p>
<h3 data-ke-size="size23">&nbsp;정리</h3>
</div>
<ul data-ke-list-type="disc">
<li>크롬 브라우저의 하이라이트 링크 복사하기는 Text Fragment를 통해 구현된 기능입니다.</li>
<li>Text Fragment는 웹 문서 내의 정확한 텍스트 레퍼런스를 URL에 표현하기 위한 실험적인 URL 표준입니다.</li>
</ul>
            
            
                </div></div>

생각나는대로 적어본다.

본문에서는 크롬 브라우저의 하이라이트 링크 복사 기능을 사용해보고, 어떻게 동작하는지 URL 구조를 분석해보겠습니다.
하이라이트 링크 복사(Copy To Link)가 뭔가요?
하이라이트 링크 복사는 최신 크롬 브라우저(95+ 버전부터 기본 지원)에서 추가된 기능으로, 웹페이지 본문 내에 존재하는 텍스트로 바로 이동 가능하도록 링크를 복사하는 기능입니다. 복사된 링크는 상당히 긴 URL로 생성되며, 이를 공유할수도 있고 링크로 만들 수도 있기 때문에 유용하게 쓰일 수 있습니다.
저는 해당 기능이 어떻게 동작하는지 궁금해졌고, 링크에 비밀이 숨어있을거라는 생각이 들어 조금 더 자세하게 파악해보기로 했습니다.
URL 구조 살펴보기
먼저 하이라이트 링크 복사를 해보겠습니다.
위처럼 텍스트 블럭을 우클릭해서 하이라이트 링크 복사하기를 누르고, 탭을 하나 더 켜서 주소창에 붙여넣기를 합니다.
역시나 매우 긴 URL이 생성되는것을 볼 수 있습니다. 한글이 포함된 URL이 길어지는 이유는, 인터넷 통신에서 사용되는 URL이 ASCII 문자열로만 이루어져야 하기 때문입니다. 한글을 ASCII 코드로 표현하기 위해서는 인코딩을 거쳐야 하고, 이 과정에서 길어지게 됩니다. (참고: https://www.w3schools.com/tags/ref_urlencode.asp) 이는 encodeURIComponent라는 내장 함수를 통해 재현할 수 있으며, 반대로 인코딩된 URL을 한글 포맷으로 변환하려면 decodeURIComponent 함수를 통해 확인할 수 있습니다.
개발자 콘솔에서 디코딩을 통해 한글 포맷으로 변환해보겠습니다.
이제 URL의 구조가 한 눈에 들어옵니다. 중간에 보면 특이한 녀석이 보이는데요, 바로 #:~:text= 입니다. 해당 값 바로 뒤에 문자열이 들어가는것으로 보니 결국 저 부분이 비밀의 열쇠일 것 같습니다.
Scroll To Text Fragment
위에서 찾아낸 #:~:text=의 정체는 Text Fragment 였습니다. 해당 내용은 아직 proposal 단계이며, URL Standard에서는 찾아볼 수 없습니다. (2021.11.19 기준) 이는 웹 문서 내에 존재하는 텍스트를 URL에 포함하고자 하는 시도로 Fragment(#) 뒤에 특정 규칙에 따라 지정할 수 있습니다. 문법은 아래와 같습니다.
예시 : https://en.wikipedia.org/w/index.php?title=Cat&oldid=916388819#:~:text=Claws-,Like%20almost,the%20Felidae%2C,-cats
:~:text=[prefix-,]textStart[,textEnd][,-suffix]
         context  |-------match-----|  context
크롬 브라우저에서는 Text Fragment가 포함된 URL을 입력받을 경우, 해당 영역에 대한 스크롤 및 하이라이트를 지원해주는 것으로 보입니다. 이는 아직 모든 브라우저에서 완전 호환되는 기능은 아닙니다만, 일부 테스트가 진행되고 있는 것으로 보입니다.
Text Fragment가 왜 필요한가?
그럼 이런 기능이 왜 필요한지 궁금해졌습니다. 일반적인 URL에 익숙한 사람으로써, 이런 해괴망측한(?) 표현식을 넣어가면서까지 표준화 하려는 이유가 무엇일까요? proposal 내용을 정리하면 아래와 같습니다. (참고: https://github.com/WICG/scroll-to-text-fragment#motivating-use-cases)
1. 검색 엔진의 이점
예를 들어, 구글에 질의하면 그에 연관된 페이지들의 링크 목록을 보여줍니다. 이 때 각 페이지의 HTML 요소에 ID 값이 포함되어있을 경우 해당 영역으로 바로 스크롤 되도록 "Jump to" 링크를 만들어줍니다. (이는 기존의 Fragment 기능을 사용하는 것이겠죠)
하지만 ID 값이 하나도 없는 페이지일 경우 어디로 스크롤 해야할지 모르기 때문에 페이지의 최상단에 머물러 있겠죠. 이럴 때 Text Fragment를 통해 원하는 질의 응답에 해당하는 영역을 지정하면 손쉽게 "Jump to" 링크를 만들 수 있습니다.
2. 레퍼런스 효율성
위키 페이지와 같이 인용이 많이 되는 페이지는 종종 특정 문구를 인용하는 것인데도 불구하고 전체 페이지를 살펴보게 만들기도 합니다. 이런 경우 Text Fragment를 통해 정확히 인용하고자 하는 텍스트 영역을 링크로 참조를 건다면 효율성이 올라갑니다.
3. 웹 페이지의 특정 구절 유저 간 공유하기
유저 간 웹페이지 문서를 주고받을 때, 특정 부분을 공유하고자 하는 경우 Text Fragment를 통해 정확하게 전달이 가능합니다.
 정리
크롬 브라우저의 하이라이트 링크 복사하기는 Text Fragment를 통해 구현된 기능입니다.
Text Fragment는 웹 문서 내의 정확한 텍스트 레퍼런스를 URL에 표현하기 위한 실험적인 URL 표준입니다.

하이라이트 링크 복사 원리를 파해쳐보자 : Text Fragment

댓글