블로그스팟 최적화: 번역 가젯 대신 '심플 가이드'를 선택한 이유

해외 유입이 많다면 블로그스팟의 번역 가젯(Google Translate Widget)은 필수지만, 난 번역 가젯 대신 HTML/JavaScript 가젯을 이용해 브라우저 자체 번역 기능을 안내하는 방식을 선택했다.

번역 가젯을 제거한 이유

1. 페이지 로딩 속도의 개선

구글 번역 가젯은 외부 스크립트를 불러오는 과정에서 블로그 로딩 속도를 늦춘다.
가젯을 제거하면 LCP 점수가 개선되고, 구글 서치콘솔의 '코어 웹 바이탈' 점수 향상으로 이어진다.

2. 브라우저 네이티브 기능의 우수성 (UX)

크롬, 엣지, 사파리 등 요즘 대부분의 브라우저는 자체적으로 번역 기능을 제공한다.
가젯을 통한 번역은 레이아웃이 깨지는 경우가 있다.

※ (좌) 번역 기능 가젯과 (우) HTML/JavaScript를 통한 번역 안내 비교.

(사진 1) 번역 가젯과 HTML/JavaScript 가젯 비교

기본적으로 이렇게 번역 기능을 제공하며, 사용도 편리하다.

(사진 2) 크롬 브라우저 번역 기능

(사진 3) 엣지 브라우저 번역 기능

HTML/JavaScript 가젯으로 번역 안내 가이드 만드는 방법

블로그스팟 관리자 화면 > 레이아웃 > 사이드바(상단) 가젯 추가 > HTML/자바스크립트를 누르고, 아래의 코드를 복사해서 붙여 넣으면 (사진 1)의 우측 LANGUAGE GUIDE를 볼 수 있다.

HTML


<div class="slim-guide">
    <div class="slim-header">LANGUAGE GUIDE</div>
    <div class="slim-body">
        <p class="slim-intro">Select your language via browser menu</p>
        
        <div class="slim-row">
            <strong>PC:</strong> Right-click &gt; Translate
        </div>
        <div class="slim-row">
            <strong>Mobile:</strong> Menu(⋮) or 'AA' &gt; Translate
        </div>
    </div>
</div>

<style>
.slim-guide {
    margin: 10px 0 30px 0; /* 상하 여백으로 본문과 구분 */
    font-family: 'Noto Sans KR', sans-serif;
    border: none; /* 테두리 없음 */
    background: transparent; /* 배경색 없음 */
    padding: 0; /* 불필요한 안쪽 여백 제거 */
}

.slim-header {
    font-size: 15px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: 1px;
    margin-bottom: 12px;
    border-bottom: 2px solid #1a1a1a; /* 상단 포인트 가로선 */
    padding-bottom: 6px;
    text-transform: uppercase;
    display: inline-block; /* 선 길이를 글자 길이에 맞춤 */
    min-width: 150px; /* 최소 선 길이 확보 */
}

.slim-body {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.slim-intro {
    margin: 5px 0 10px 0;
    font-size: 13px;
    color: #888;
    font-style: italic;
}

.slim-row {
    margin-bottom: 4px;
}

.slim-row strong {
    color: #000;
    font-weight: 700;
    margin-right: 6px;
}
</style>

오늘의 한마디

기본 제공되는 구글 번역 가젯이 나쁘다는 의미가 아니니 깊은 오해는 금지! 중요한 것은 덜어냄을 통한 최적화다.

이 블로그 검색

더한스픽