Bookmarklet: 한글이 들어간 주소(URL)를 한글 그대로 복사

북마크바에 북마크릿 (Bookmarklet)을 넣어 클릭 한 번으로 한글이 포함된 주소(URL)를 한글 그대로 복사할 수 있도록 간단한 방법을 소개합니다.

이 방법을 통해 작업 효율을 높이고, 인코딩 문제로 인한 불편을 줄이세요! 😊

 

티스토리 URL을 한글로 설정한 이유

"티스토리의 포스트 주소를 문자로 설정합니다."

 

최근에 제 티스토리 블로그의 포스트 주소 형식을 숫자에서 문자로 변경했습니다. 초기 포스트가 많지 않을 때 변경하는 것이 적절하다고 생각했습니다.
티스토리 블로그의 포스트 주소를 숫자 대신 문자로 설정한 이유는 다음과 같습니다:

• 검색엔진 최적화(SEO): 구글 SEO 기본 가이드에 따르면, 숫자 기반 URL보다 의미 있는 문자가 포함된 URL이 검색엔진과 사용자 모두에게 더 직관적입니다.
• 사용자 경험 향상: 사용자들이 URL을 보고 내용을 유추할 수 있습니다.

특히, 티스토리는 Canonical 태그를 통해 문자 주소를 기본값으로 설정하며, 모바일 페이지에서도 동일한 주소를 설정해 관리가 간편합니다.

 

한글 URL의 문제점

숫자 기반 주소는 다음과 같이 간단하게 표현됩니다:

 

https://eoureo.tistory.com/29

 

하지만 한글이 포함된 이 글의 URL을 웹브라우저 주소창에서 복사해 보면, 다음과 같이 인코딩 된 긴 주소로 변환됩니다:

 

https://eoureo.tistory.com/entry/Bookmarklet-%ED%95%9C%EA%B8%80%EC%9D%B4-%EB%93%A4%EC%96%B4%EA%B0%84-%EC%A3%BC%EC%86%8CURL%EB%A5%BC-%ED%95%9C%EA%B8%80-%EA%B7%B8%EB%8C%80%EB%A1%9C-%EB%B3%B5%EC%82%AC

 

반면, 인코딩 되지 않은 한글 URL은 훨씬 보기 쉽고 직관적입니다:

https://eoureo.tistory.com/entry/Bookmarklet-한글이-들어간-주소URL를-한글-그대로-복사

 

문제 해결: Bookmarklet 활용하기

옵시디언이나 기타 문서 도구에 URL을 붙여 넣는 경우, 인코딩 되지 않은 URL을 복사하려면 불편한 과정을 거쳐야 합니다. 예를 들어:

• URL의 일부만 복사(예: https:// 부분 제외)하거나,
• URL 앞에 공백을 추가한 뒤 복사하는 방법 등이 있습니다.

이런 번거로움을 줄이기 위해 Bookmarklet을 사용해 한 번의 클릭으로 해결할 수 있는 방법을 준비했습니다. 아래 코드를 북마크바에 추가하면 간단히 사용할 수 있습니다.

 

 

Bookmarklet 만드는 방법

방법 1: 북마크 링크 추가하기

아래 "URL 한글 복사" 링크를 북마크바로 드래그하거나, 링크 주소를 복사해 북마크바에 새로 추가하세요.

 

URL 한글 복사 - 먼저 이 링크를 눌러서 테스트해 보세요.

 

방법 2: 북마크에 직접 코드 추가하기

1. 북마크바에 새 북마크를 생성하거나 기존 북마크를 편집합니다.
2. 아래 코드를 복사해 북마크 URL로 설정합니다.
3. 북마크 이름은 "URL 한글 복사"처럼 알아보기 쉽게 설정합니다.

 

이제 북마크바에 추가된 Bookmarklet을 클릭하면, 한글 주소가 클립보드에 복사되었음을 알리는 창이 뜨게 됩니다.

 

Bookmarklet 소스

javascript:(function() {
    var url = decodeURIComponent(window.location.href);

    /* 최신 방식: navigator.clipboard 사용 */
    navigator.clipboard.writeText(url).then(function() {
        alert('URL이 클립보드에 복사되었습니다:\n\n' + url);
    }).catch(function(err) {
        console.warn('navigator.clipboard 실패:', err);

        /* 전통적인 방식: textarea + document.execCommand 사용 */
        var fakeElem = document.createElement('textarea');
        fakeElem.value = url;
        fakeElem.setAttribute('readonly', '');
        fakeElem.style.position = 'absolute';
        fakeElem.style.left = '-9999px';
        document.body.appendChild(fakeElem);
        fakeElem.select();

        try {
            if (document.execCommand('copy')) {
                alert('URL이 클립보드에 복사되었습니다:\n\n' + url);
            } else {
                alert('클립보드 복사에 실패했습니다.');
            }
        } catch (e) {
            alert('클립보드 복사에 실패했습니다. 브라우저가 이 기능을 지원하지 않을 수 있습니다.');
            console.error('execCommand 실패:', e);
        } finally {
            document.body.removeChild(fakeElem);
        }
    });
})();

 

위 소스는 최신 방식인 navigator.clipboard를 우선 사용하고, 실패할 경우 전통적인 방식인 document.execCommand를 사용하는 Bookmarklet 코드입니다. 이 코드는 최신 브라우저와 구형 브라우저 모두에서 안정적으로 작동할 것입니다.

 

작동 원리

1. 최신 방식: navigator.clipboard.writeText로 먼저 URL을 클립보드에 복사 시도.
   
   • 성공 시 복사 완료 알림을 표시합니다.
   • 실패 시 catch 블록으로 넘어갑니다.
2. 전통적인 방식: textarea 요소를 만들어 document.execCommand('copy')로 복사 시도.
   
   • 복사가 성공하면 동일한 알림을 표시합니다.
   • 실패 시 사용자에게 실패 메시지를 표시합니다.

 

기준	최신 방식 (navigator.clipboard)	전통적인 방식 (document.execCommand)
브라우저 호환성	최신 브라우저에서만 작동	구형 및 최신 브라우저 모두 지원
코드 간결성	간결하고 명확	다소 복잡하고 길다
작동 방식	비동기 처리	동기 처리
HTTPS 환경 필요	필요	불필요
추가 요소 사용	필요 없음	임시 textarea 요소 생성
추천 여부	최신 환경에서는 추천	호환성 중요할 경우 추천

 

 

 

 

 

참고 사이트

Canonical 태그로 URL을 묶어주자 - 검색엔진최적화 101 :: 검색마케팅 101
https://seo-sem.tistory.com/4

Canonical 태그로 URL을 묶어주자 - 검색엔진최적화 101

 

SEO 기본 가이드: 기본사항 | Google 검색 센터 | 문서 | Google for Developers
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko

SEO 기본 가이드: 기본사항 | Google 검색 센터  |  문서  |  Google for Developers

 

티스토리 URL 주소 문자 vs 숫자 by 구글 SEO
https://brunch.co.kr/@seoarena/4

티스토리 URL 주소 문자 vs 숫자 by 구글 SEO

 

한글이 포함된 url을 한글 그대로 복붙하기
https://lazymatlab.tistory.com/251

한글이 포함된 url을 한글 그대로 복붙하기