이 블로그에는 최근 공개된 티스토리 매거진 스킨인 Magazine이 적용되어 있습니다. 스킨 그대로 사용해도 괜찮지만 저는 이전 레이아웃과 거의 비슷하게 바꾸었습니다.
데모의 헤더를 보면 왼쪽에 블로그 이름이 표시되고, 오른쪽에 검색 아이콘과 메뉴 아이콘이 배치되어 있습니다.
저는 PC 버전에서는 이전 스킨과 비슷하게 만들었습니다. (모바일 버전은 모바일 스킨을 사용하고 있습니다.)
블로그 타이틀 옆에 배너가 표시되도록 했고, 메뉴는 메뉴 아이콘을 클릭했을 때 표시되도록 하는 대신 메뉴 아이콘을 삭제하고 메뉴 항목이 표시되도록 메뉴 내비게이션을 막코딩으로 추가했습니다.ㅎㅎ 검색 아이콘은 CSS를 사용하여 오른쪽 끝으로 위치를 이동시켰습니다. 이 부분에 대해서도 기회가 되면 수정하는 방법을 설명해보겠습니다. HTML과 CSS를 조금 알면 쉽게 가능한 부분입니다.
검색 아이콘을 클릭하면 본래 다음과 같은 모달 창으로 검색 폼이 표시됩니다.
검색어를 입력하고 엔터를 누르면 포트폴리오 형식(그리드 형식)으로 검색 결과가 표시됩니다.
깔끔하게 검색 결과가 표시되어 레이아웃적인 측면에서는 만족스러운 것 같습니다. 이대로 사용해도 되지만, 저는 티스토리 검색 기능 대신 구글 맞춤검색 기능을 사용하도록 스킨을 조금 수정했습니다.
Magazine 스킨에서는 비교적 수월하게 구글 맞춤검색 기능으로 대체할 수 있는 것 같습니다.
구글 맞춤검색 기능을 이용하면 지정된 사이트에 대하여 구글에서의 검색 결과가 표시됩니다. 해당 티스토리 사이트 내에서만 검색할 수도 있고, 원하는 경우 여러 사이트의 검색 결과를 함께 표시할 수도 있습니다. 또는, 사이트 일부만 검색하는 것도 가능합니다.
운영 중인 사이트가 여러 개 있고 여러 개의 사이트에서의 검색 결과를 사용자들에게 제시하고 싶은 경우 유용합니다. 그리고 구글 AI가 검색해주니 검색 품질도 믿을 수 있고요.
구글 맞춤검색 기능을 사용하려면 먼저 맞춤검색(Google Custom Search) 사이트에 접속하여 새로운 검색엔진을 추가해야 합니다.
위와 같은 화면이 표시되면 "추가"를 클릭합니다.
검색할 사이트에 사이트 URL을 포맷에 맞게 추가합니다. 여러 개의 사이트를 추가할 수 있고, www.example.com/docs/*처럼 사이트의 일부를 검색하도록 할 수도 있습니다.
설정이 완료되었으면 하단의 "만들기"를 클릭합니다.
맞춤 검색엔진이 성공적으로 생성되었다는 페이지가 나타납니다. "코드 가져오기"를 클릭합니다.
지침과 같이 제시된 코드를 복사하여 스킨 편집 페이지에서 기존 검색 폼을 대체하면 됩니다.
검색엔진을 수정하려면 왼쪽의 "검색엔진 수정" 메뉴를 클릭하고 해당 검색엔진을 선택한 후에 설정을 변경할 수 있습니다.
설정 탭에서 구글 애드센스 계정과 연결할 수 있습니다. 디자인 탭에서는 구글 맞춤검색 폼이 표시되는 레이아웃을 지정할 수 있습니다. 기본 설정인 '오버레이'가 무난한 것 같습니다.
이제 복사한 코드를 스킨 파일에 붙여넣기 위해 티스토리에서 꾸미기 > 스킨 편집을 클릭합니다.
위와 같은 페이지가 표시되면 'html 편집'을 클릭합니다.
저는 HTML에서 다음 부분을 찾아서 바꾸어주었습니다.
찾을 부분:
<s_search>
<input type="text" name="" title="검색어 입력" placeholder="검색어 입력.."
value="" class="inp_search" onkeypress="if (event.keyCode == 13) { }">
</s_search>
바꿀 내용:
<s_search>
<div class="area_search">
<script>
(function() {
var cx = 'xxxxxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</div>
</s_search>
그리고 바로 아래의 다음 코드는 삭제했습니다.
<button type="button" title="검색어 삭제" class="btn_search_del">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"
class="img_svg">
<defs>
<path id="textDelBtnSvg" d="M20 2C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm8 24.6L26.6 28 20 21.4 13.4 28 12 26.6l6.6-6.6-6.6-6.6 1.4-1.4 6.6 6.6 6.6-6.6 1.4 1.4-6.6 6.6 6.6 6.6z" />
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-2 -2)">
<path d="M0 0h40v40H0z" />
<mask id="textDelBtnSvgMask" fill="#fff">
<use xlink:href="#textDelBtnSvg" />
</mask>
<g fill="#000" fill-opacity="1" mask="url(#textDelBtnSvgMask)" class="svg_bg">
<path d="M0 0h40v40H0z" />
</g>
</g>
</svg>
</button>
변경 사항을 저장하고 테스트해보면 구글 맞춤검색 기능이 원하는 대로 잘 작동할 것입니다.
PC에서 이 블로그의 검색 아이콘을 클릭하면 다음과 같은 모달 창이 표시됩니다.
검색을 해보면 지정한 사이트를 검색하여 검색 결과가 표시됩니다.
