최신 웹 브라우저에서의 자바스크립트 즐겨찾기 기능 구현과 제한사항

웹 개발을 하다 보면 사용자 경험을 향상시키기 위한 다양한 기능들을 구현하게 됩니다. 그 중에서도 ‘즐겨찾기’ 기능은 사용자들이 자주 방문하는 웹사이트나 웹 페이지를 쉽게 접근할 수 있도록 도와주는 유용한 기능입니다. 하지만 최신 웹 브라우저에서는 보안 정책으로 인해 자바스크립트를 통한 자동 즐겨찾기 추가가 제한되어 있습니다. 이번 포스팅에서는 이러한 제한사항과 그 대안에 대해 심층적으로 살펴보겠습니다.

브라우저 즐겨찾기 기능의 변천사

과거 초기 웹 브라우저들은 자바스크립트를 통한 즐겨찾기(북마크) 추가 기능을 제공했습니다. Internet Explorer에서는 window.external.AddFavorite() 메소드를, Firefox에서는 window.sidebar.addPanel() 메소드를 사용할 수 있었습니다. 이러한 API를 통해 개발자들은 사용자가 버튼 하나만 클릭하면 해당 페이지를 즐겨찾기에 추가할 수 있는 기능을 쉽게 구현할 수 있었습니다.

// Internet Explorer에서의 즐겨찾기 추가 방법
if(window.external && ('AddFavorite' in window.external)) {
    window.external.AddFavorite(url, title);
}
// Firefox에서의 즐겨찾기 추가 방법 (Firefox 23 이전)
else if(window.sidebar && window.sidebar.addPanel) {
    window.sidebar.addPanel(title, url, '');
}

그러나 웹의 보안이 점점 중요해지면서, 이러한 API들은 잠재적인 보안 위협으로 간주되기 시작했습니다. 악의적인 스크립트가 사용자 모르게 즐겨찾기를 추가하거나 조작할 수 있는 가능성이 있었기 때문입니다.

현대 브라우저에서의 제한사항

현재 대부분의 모던 웹 브라우저(Chrome, Firefox, Safari, Edge 등)에서는 보안 강화를 위해 자바스크립트를 통한 자동 즐겨찾기 추가 기능을 제한하고 있습니다. Firefox는 버전 23부터 window.sidebar.addPanel() 메소드를 제거했으며, 다른 브라우저들도 유사한 API를 지원하지 않거나 제한하고 있습니다.

이러한 변화는 사용자의 브라우저 환경을 보호하기 위한 조치이지만, 웹 개발자들에게는 새로운 도전을 제시했습니다. 기존의 자바스크립트를 통한 즐겨찾기 추가 코드가 더 이상 작동하지 않게 되면서, 사용자에게 즐겨찾기 추가 방법을 안내하는 새로운 접근 방식이 필요해졌습니다.

문제 사례 분석

최근 제가 분석한 웹사이트에서는 여러 AI 서비스를 즐겨찾기에 추가하는 기능을 구현하려 했지만, 문제가 발생했습니다. 사용자가 즐겨찾기 추가 버튼을 클릭했을 때, 선택한 서비스의 URL이 아닌 현재 페이지의 URL만 반복적으로 추가되는 현상이 있었습니다.

HTML에서는 각 체크박스에 올바른 URL 데이터가 설정되어 있었습니다:

<input type="checkbox" id="claude-bookmark" class="bookmark-check" checked data-url="https://claude.ai" data-name="Claude 3.7">
<input type="checkbox" id="gpt-bookmark" class="bookmark-check" checked data-url="https://chat.openai.com" data-name="GPT-4.5">
<input type="checkbox" id="grok-bookmark" class="bookmark-check" checked data-url="https://grok.com/?referrer=website" data-name="Grok-3">
<input type="checkbox" id="perplexity-bookmark" class="bookmark-check" checked data-url="https://perplexity.ai" data-name="Perplexity">

그러나 자바스크립트 코드에서 이 URL을 사용하여 즐겨찾기를 추가하려 했을 때, 브라우저의 보안 정책으로 인해 이 기능이 제대로 작동하지 않았습니다. 결과적으로 사용자는 동일한 현재 페이지가 여러 번 즐겨찾기에 추가되는 현상을 경험했습니다.

해결 방안과 대안

현대 브라우저에서는 자바스크립트를 통한 자동 즐겨찾기 추가가 제한되어 있기 때문에, 다음과 같은 대안적 접근 방식을 고려할 수 있습니다:

1. 사용자 안내 방식

가장 일반적인 방법은 사용자에게 직접 즐겨찾기 추가 방법을 안내하는 것입니다. 다음은 이 방식을 구현한 코드 예시입니다:

addBookmarksBtn.addEventListener('click', function() {
    const checkedBookmarks = document.querySelectorAll('.bookmark-check:checked');

    if (checkedBookmarks.length === 0) {
        alert('선택된 서비스가 없습니다. 최소 하나 이상의 서비스를 선택해주세요.');
        return;
    }

    checkedBookmarks.forEach(bookmark => {
        const url = bookmark.dataset.url;
        const name = bookmark.dataset.name;

        try {
            // 모던 브라우저에서는 대부분 이 부분이 실행됨
            alert(`"${name}" 서비스를 즐겨찾기에 추가하려면:\n\n1. ${url} 페이지를 새 탭에서 열어주세요.\n2. 해당 페이지에서 Ctrl+D(Windows) 또는 Cmd+D(Mac)를 눌러 즐겨찾기에 추가하세요.`);
        } catch(e) {
            console.error('즐겨찾기 추가 중 오류 발생:', e);
        }
    });

    bookmarkPopup.style.display = 'none';
});

이 방식은 사용자에게 각 서비스의 URL과 브라우저의 기본 단축키(Ctrl+D 또는 Cmd+D)를 사용하여 즐겨찾기에 추가하는 방법을 안내합니다.

2. 자동 새 탭 열기 기능

사용자의 편의를 더 높이기 위해, 선택한 서비스의 URL을 새 탭에서 자동으로 열어주는 기능을 구현할 수 있습니다:

if (confirm(`"${name}" 페이지를 새 탭에서 열어서 직접 즐겨찾기에 추가하시겠습니까?`)) {
    window.open(url, '_blank');
}

이 방식은 사용자가 확인하면 해당 URL을 새 탭에서 열어, 사용자가 더 쉽게 즐겨찾기에 추가할 수 있도록 도와줍니다.

3. 로컬 스토리지를 활용한 내부 즐겨찾기 기능

브라우저의 기본 즐겨찾기 기능을 사용할 수 없다면, 웹사이트 내에서 자체적으로 ‘즐겨찾기’ 또는 ‘북마크’ 기능을 구현하는 것도 좋은 대안입니다. 이는 주로 로컬 스토리지(localStorage)나 쿠키를 활용합니다:

// 내부 즐겨찾기에 항목 추가
function addToInternalBookmarks(name, url) {
    let bookmarks = JSON.parse(localStorage.getItem('internalBookmarks') || '[]');
    bookmarks.push({ name, url });
    localStorage.setItem('internalBookmarks', JSON.stringify(bookmarks));
}

// 내부 즐겨찾기 항목 표시
function displayInternalBookmarks() {
    let bookmarks = JSON.parse(localStorage.getItem('internalBookmarks') || '[]');
    const bookmarksList = document.getElementById('bookmarks-list');
    
    bookmarksList.innerHTML = '';
    bookmarks.forEach(bookmark => {
        const item = document.createElement('div');
        item.innerHTML = `<a href="${bookmark.url}" target="_blank">${bookmark.name}</a>`;
        bookmarksList.appendChild(item);
    });
}

이 방식은 브라우저의 내장 즐겨찾기와는 별개로 작동하지만, 사용자가 웹사이트를 재방문했을 때 이전에 저장한 즐겨찾기 항목들을 볼 수 있게 해줍니다.

4. 클립보드 복사 기능 제공

URL을 사용자의 클립보드에 복사해주는 기능을 제공하는 것도 유용한 대안입니다:

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(
        function() {
            alert('URL이 클립보드에 복사되었습니다.');
        },
        function(err) {
            console.error('클립보드 복사 실패:', err);
        }
    );
}

// 사용 예
copyToClipboard(bookmark.dataset.url);

이 방식은 사용자가 URL을 쉽게 복사하여 필요에 따라 사용할 수 있게 해줍니다.

웹 보안과 사용자 경험의 균형

브라우저에서 자바스크립트를 통한 즐겨찾기 추가 기능을 제한하는 것은 보안 강화를 위한 중요한 조치입니다. 이는 악의적인 스크립트로부터 사용자의 브라우저 환경을 보호하는 데 도움이 됩니다. 그러나 이러한 제한은 웹 개발자들이 사용자 경험을 향상시키기 위해 구현하려는 기능에 도전이 될 수 있습니다.

웹 개발에서는 항상 보안과 사용자 경험 사이의 균형을 찾는 것이 중요합니다. 브라우저의 제한사항을 이해하고, 그에 맞는 대안적 접근 방식을 구현함으로써 보안을 유지하면서도 사용자에게 편리한 기능을 제공할 수 있습니다.

결론

현대 웹 브라우저에서 자바스크립트를 통한 자동 즐겨찾기 추가는 제한되어 있지만, 다양한 대안적 접근 방식을 통해 유사한 기능을 구현할 수 있습니다. 사용자 안내, 새 탭 자동 열기, 내부 즐겨찾기 기능, 클립보드 복사 기능 등을 활용하면 사용자에게 편리한 경험을 제공할 수 있습니다.

웹 개발은 끊임없이 변화하는 환경에서 이루어지며, 브라우저의 보안 정책도 지속적으로 업데이트됩니다. 따라서 웹 개발자는 이러한 변화에 적응하고, 보안과 사용자 경험 사이의 균형을 유지하는 방법을 계속해서 모색해야 합니다.

웹 개발에서 즐겨찾기 기능을 구현할 때는 브라우저의 제한사항을 고려하고, 사용자의 눈높이에 맞는 대안적 접근 방식을 선택하는 것이 중요합니다. 이는 사용자에게 더 나은 경험을 제공하고, 웹사이트의 가치를 높이는 데 도움이 될 것입니다.