2%20ChatGPT%20Image.jpg)
지난 글에서는 제가 블로그스팟(Blogger)에 네이버 스타일 글목록을 만들게 된 과정과 시행착오를 소개했습니다.
이번 글에서는 실제로 적용한 HTML 코드와 적용 방법을 처음부터 차근차근 정리해 보겠습니다.
저 역시 HTML을 거의 모르는 상태에서 ChatGPT와 Gemini의 도움을 받아 하나씩 수정하며 완성한 방법입니다.
그래서 전문 개발자를 위한 설명보다는 "컴맹도 그대로 따라 할 수 있는 설명"에 초점을 맞췄습니다.
처음에는 HTML을 수정한다는 것 자체가 부담스럽게 느껴질 수 있습니다.
하지만 차례대로 따라 하면 생각보다 어렵지 않습니다.
이 글에서 알려드리는 내용
이번 글에서 소개하는 코드를 적용하면 다음과 같은 기능을 사용할 수 있습니다.
- 네이버 스타일 '글목록 열기 · 닫기' 버튼
- 페이지 번호(페이징)
- 글목록에서 게시일 함께 표시
- 선택한 라벨(카테고리) 유지
- 새 글을 읽어도 글목록 열린 상태 유지
제가 실제 블로그에서 사용하고 있는 코드이며, 여러 번 수정하면서 안정적으로 사용할 수 있도록 다듬은 버전입니다.
HTML이 처음인 분도 순서대로 따라 하면 적용할 수 있습니다.
작업을 시작하기 전에 꼭 확인하세요
HTML을 수정하기 전에 현재 사용 중인 테마를 먼저 백업하는 것을 추천합니다.
이 과정은 꼭 생략하지 않았으면 좋겠습니다.
저는 처음 블로그스팟을 시작했을 때 무료 스킨을 설치하면서 백업해둘 생각을 미처 하지 못해서, 안 해도 되는 고생까지 하게 되었답니다.
당시에 저는 백업의 중요성조차 모르는 초초보였던지라... ㅠㅠ
결국 스킨을 삭제하는 과정에서 예상보다 훨씬 많은 시간을 허비했고, 원래 상태로 되돌리는 데도 꽤 고생했습니다.
지금 생각하면 백업 파일 하나만 있었어도 몇 시간은 아낄 수 있었을 것 같습니다.
혹시 저처럼 HTML이 처음이라면 수정 전에 백업부터 하는 습관을 꼭 들이셨으면 합니다.
1단계｜현재 테마 백업하기
HTML을 수정하기 전 가장 먼저 해야 할 작업입니다
HTML을 수정하다 보면 오타 하나 때문에 화면이 깨지는 경우도 있습니다.
물론 대부분은 쉽게 수정할 수 있지만, 백업 파일이 있으면 훨씬 마음 편하게 작업할 수 있습니다.
백업 방법은 어렵지 않습니다.
① 블로그스팟 관리자 화면에서 [테마] 메뉴를 클릭합니다.
② [맞춤설정] 옆의 [▼] 버튼을 클릭합니다.
③ [백업] 을 선택해 현재 사용 중인 테마를 다운로드합니다.
여기까지 완료했다면 준비는 끝났습니다.
.jpg)
2단계｜HTML 편집 화면으로 이동하기
① 글목록 코드를 넣을 위치를 찾습니다
이제 글목록 코드를 추가할 차례입니다.
먼저 HTML 편집기로 이동합니다.
HTML 편집 화면이 열리면 코드가 아주 많이 보일 것입니다.
처음 보면 당황할 수도 있습니다.
저도 처음에는 "이걸 어떻게 찾지?"라는 생각부터 들었습니다.
하지만 걱정하지 않으셔도 됩니다.
검색 기능을 사용하면 금방 찾을 수 있습니다.
② Ctrl + F를 눌러 아래 코드를 검색합니다
코드 창 안을 클릭한 후
를 눌러 검색창을 엽니다.
그리고 아래 코드 중 하나를 검색합니다.
📌 블로그 템플릿 코드에서 아래와 같은 소스 코드를 찾아주세요.
<b:section id='main'또는
<b:section class='main' id='main'사용 중인 테마에 따라 둘 중 하나가 나타납니다.
둘 다 없는 것은 거의 드물기 때문에 천천히 확인해 보시면 됩니다.
.jpg)
③ 찾았다면 바로 위에 코드를 넣으면 됩니다
검색한
바로 윗줄이 글목록 코드를 넣는 위치입니다.
처음에는 HTML 코드가 너무 길어서 어디에 넣어야 할지 헷갈릴 수 있습니다.
하지만 위치만 정확하게 찾으면 이후 작업은 생각보다 간단합니다.
다음 단계에서는 제가 실제로 사용하고 있는 네이버 스타일 글목록 전체 코드를 붙여 넣겠습니다.
3단계｜네이버 스타일 글목록 전체 코드 삽입
🟢 아래는 제가 실제 블로그에 적용해 사용 중인 전체 코드입니다.
(지난 글에서 언급했던 수 차례의 시행착오 끝에 완성한 최종본입니다.)
📌 네이버 스타일 글목록 전체 소스코드
<!-- 네이버 스타일 글목록 시작 -->
<div id='custom-post-list-wrapper'>
<div class='list-header'>
<button id='toggle-list-btn' onclick='togglePostList()'>목록 열기 ▼</button>
</div>
<div id='post-list-container' style='display: none;'>
<ul id='post-list-ul'/>
<div id='post-list-pagination'/>
</div>
</div>
<style>
/* 디자인(CSS) 설정 */
#custom-post-list-wrapper {
margin: 10px auto 20px auto; /* 헤더와의 간격(10px), 아래 간격(20px) */
max-width: 100%;
font-family: inherit;
}
.list-header {
text-align: right; /* 왼쪽 정렬을 원하시면 left로 변경 */
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}
#toggle-list-btn {
background: transparent; /* 배경 투명 */
border: 1px solid #007BFF; /* 깔끔한 기본 블루 테두리 */
padding: 6px 12px;
cursor: pointer;
border-radius: 4px;
font-size: 0.85em;
color: #007BFF; /* 기본 블루 글씨 */
font-weight: bold;
transition: 0.2s;
}
#toggle-list-btn:hover {
background: rgba(0, 123, 255, 0.1); /* 마우스를 올리면 아주 연한 파란색 배경이 깔림 */
color: #0056B3; /* 글씨는 살짝 더 진한 파란색으로 */
border-color: #0056B3;
}
#post-list-container {
padding: 10px 0;
background: #fff;
}
#post-list-ul {
list-style: none;
padding: 0;
margin: 0;
}
#post-list-ul li {
border-bottom: 1px dashed #eee;
padding: 10px 5px;
display: flex;
justify-content: space-between;
font-size: 1em; /* 글목록 폰트 크기 (본문보다 약간 작게 아님) */
}
#post-list-ul li a {
text-decoration: none;
color: #333;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 15px;
}
#post-list-ul li a:hover {
text-decoration: underline;
}
#post-list-ul li span.date {
color: #999;
font-size: 1em;
white-space: nowrap;
}
#post-list-pagination {
text-align: center;
margin-top: 20px;
}
#post-list-pagination button {
background: none;
border: 1px solid #ddd;
margin: 0 3px;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
color: #555;
}
#post-list-pagination button.active {
font-weight: bold;
background: #666;
color: #fff;
border-color: #666;
}
</style>
<script>
// 카테고리(라벨) 기억을 위한 설정
var listCategoryName = "";
var savedLabel = sessionStorage.getItem('currentBloggerLabel');
</script>
<b:if cond='data:blog.searchLabel'>
<!-- 1. 특정 라벨(카테고리) 페이지에 들어왔을 때: 현재 라벨을 저장 -->
<script>
listCategoryName = "<data:blog.searchLabel/>";
sessionStorage.setItem('currentBloggerLabel', listCategoryName);
</script>
<b:elseif cond='data:blog.pageType == "item"'/>
<!-- 2. 개별 글(포스팅)을 읽고 있을 때: 저장해둔 라벨을 그대로 불러옴 -->
<script>
if (savedLabel) {
listCategoryName = savedLabel;
}
</script>
<b:elseif cond='data:blog.url == data:blog.homepageUrl'/>
<!-- 3. 블로그 메인 화면(홈)으로 돌아갔을 때: 기억을 지우고 전체글 보기로 초기화 -->
<script>
listCategoryName = "";
sessionStorage.removeItem('currentBloggerLabel');
</script>
</b:if>
<script type='text/javascript'>
//<![CDATA[
var listCurrentPage = 1;
var listPostsPerPage = 5; // 한 페이지당 보여줄 글 개수
var listTotalPosts = 0;
var listLoaded = false;
function togglePostList() {
var container = document.getElementById('post-list-container');
var btn = document.getElementById('toggle-list-btn');
if (container.style.display === 'none' || container.style.display === '') {
// 목록 열기
container.style.display = 'block';
btn.innerHTML = '목록 닫기 ▲';
sessionStorage.setItem('isBloggerListOpen', 'true'); // 열린 상태를 저장
if (!listLoaded) {
loadPostList(1);
listLoaded = true;
}
} else {
// 목록 닫기
container.style.display = 'none';
btn.innerHTML = '목록 열기 ▼';
sessionStorage.setItem('isBloggerListOpen', 'false'); // 닫힌 상태를 저장
}
}
function loadPostList(page) {
listCurrentPage = page;
var startIndex = (page - 1) * listPostsPerPage + 1;
var feedUrl = '/feeds/posts/summary';
if (listCategoryName !== "") {
feedUrl += '/-/' + encodeURIComponent(listCategoryName);
}
feedUrl += '?alt=json&max-results=' + listPostsPerPage + '&start-index=' + startIndex;
fetch(feedUrl)
.then(function(response) { return response.json(); })
.then(function(data) {
// 검색 결과가 없는 경우 방어 코드
if (data.feed && data.feed.openSearch$totalResults) {
listTotalPosts = parseInt(data.feed.openSearch$totalResults.$t);
} else {
listTotalPosts = 0;
}
renderPostList(data.feed && data.feed.entry ? data.feed.entry : []);
renderPagination();
});
}
function renderPostList(entries) {
var ul = document.getElementById('post-list-ul');
ul.innerHTML = '';
if(entries.length === 0) {
ul.innerHTML = '<li>글이 없습니다.</li>';
return;
}
entries.forEach(function(entry) {
var title = entry.title.$t;
var link = '';
for (var i = 0; i < entry.link.length; i++) {
if (entry.link[i].rel === 'alternate') {
link = entry.link[i].href;
break;
}
}
var published = new Date(entry.published.$t);
var dateStr = published.getFullYear() + '.' + (published.getMonth()+1) + '.' + published.getDate();
var li = document.createElement('li');
li.innerHTML = '<a href="' + link + '">' + title + '</a> <span class="date">' + dateStr + '</span>';
ul.appendChild(li);
});
}
function renderPagination() {
var pagination = document.getElementById('post-list-pagination');
pagination.innerHTML = '';
var totalPages = Math.ceil(listTotalPosts / listPostsPerPage);
if(totalPages <= 1) return;
var startPage = Math.floor((listCurrentPage - 1) / 5) * 5 + 1;
var endPage = Math.min(startPage + 4, totalPages);
if (startPage > 1) {
var prevBtn = document.createElement('button');
prevBtn.innerText = '이전';
prevBtn.onclick = function() { loadPostList(startPage - 1); };
pagination.appendChild(prevBtn);
}
for (var i = startPage; i <= endPage; i++) {
var btn = document.createElement('button');
btn.innerText = i;
if (i === listCurrentPage) btn.className = 'active';
btn.onclick = (function(pageNumber) {
return function() { loadPostList(pageNumber); };
})(i);
pagination.appendChild(btn);
}
if (endPage < totalPages) {
var nextBtn = document.createElement('button');
nextBtn.innerText = '다음';
nextBtn.onclick = function() { loadPostList(endPage + 1); };
pagination.appendChild(nextBtn);
}
}
// 브라우저가 열릴 때, 이전에 목록이 열려있었는지 확인하고 자동으로 열어주는 기능
window.addEventListener('DOMContentLoaded', function() {
var isOpen = sessionStorage.getItem('isBloggerListOpen');
if (isOpen === 'true') {
var container = document.getElementById('post-list-container');
var btn = document.getElementById('toggle-list-btn');
container.style.display = 'block';
btn.innerHTML = '목록 닫기 ▲';
if (!listLoaded) {
loadPostList(1);
listLoaded = true;
}
}
});
//]]>
</script>
<!-- 네이버 스타일 글목록 끝 -->
4단계｜저장 후 제대로 적용됐는지 확인하기
코드를 모두 붙여 넣고 저장했다면 이제 블로그를 새로고침해 보세요.
정상적으로 적용됐다면 글 상단에 '글목록 열기 · 닫기' 버튼이 나타납니다.
버튼을 눌렀을 때 글목록이 열리고 다시 누르면 닫히면 정상입니다.
처음에는 "정말 되는 걸까?" 하는 마음이 들 수도 있습니다.
저도 저장 버튼을 누르기 전까지는 반신반의했습니다.
그런데 새로고침한 화면에 버튼이 딱 나타나는 순간 정말 기분이 좋았습니다.
1편에서도 이야기했지만, 그날 혼자 방에서 "됐다!"를 몇 번이나 외쳤는지 모릅니다.
✌ 다음은 저장 후 최종적으로 구현된 실제 모습입니다.
글목록이 보이지 않는다면 먼저 이것부터 확인하세요
코드를 그대로 붙여 넣었는데도 글목록이 나타나지 않는다면 대부분 아래 항목 중 하나가 원인입니다.
① HTML 삽입 위치가 다른 경우
가장 흔한 원인입니다.
코드는 조금만 다른 위치에 넣어도 원하는 대로 동작하지 않을 수 있습니다.
② 저장하지 않고 창을 닫은 경우
의외로 자주 발생합니다.
코드를 붙여 넣은 뒤에는 반드시 오른쪽 위의 저장 버튼을 눌러야 합니다.
저장하지 않으면 수정 내용은 적용되지 않습니다.
③ 브라우저 캐시 때문일 수도 있습니다
가끔은 수정이 정상적으로 적용됐는데도 이전 화면이 그대로 보이는 경우가 있습니다.
이럴 때는 새로고침을 한 번 더 해 보거나 브라우저 캐시를 비운 뒤 다시 확인해 보세요.
PC와 모바일을 각각 확인해 보는 것도 좋습니다.
이 코드를 그대로 사용해도 될까요?
제가 사용하는 환경에서는 현재까지 문제없이 사용하고 있습니다.
다만 블로그스팟은 사용하는 테마에 따라 HTML 구조가 조금씩 다를 수 있습니다.
그래서 같은 코드를 적용해도 일부 테마에서는 위치를 조금 조정해야 하는 경우가 있을 수 있습니다.
만약 원하는 대로 동작하지 않는다면 먼저 HTML 삽입 위치를 다시 확인해 보시길 권합니다.
또한 코드를 수정하기 전에는 항상 현재 테마를 백업해 두는 것을 추천합니다.
자주 묻는 질문(FAQ)
Q1. HTML을 전혀 몰라도 따라 할 수 있을까요?
가능합니다.
저 역시 HTML을 거의 모르는 상태에서 시작했습니다.
처음에는 코드가 너무 길어서 어디를 수정해야 하는지도 몰랐습니다.
하지만 백업을 먼저 하고, 한 번에 한 가지씩만 수정하는 방법으로 차근차근 진행하니 생각보다 어렵지 않았습니다.
처음부터 모든 코드를 이해하려고 하기보다, 수정한 뒤 결과를 확인하는 과정을 반복하는 것이 훨씬 도움이 됐습니다.
Q2. 적용했는데 글목록이 보이지 않습니다.
가장 먼저 아래 세 가지를 확인해 보세요.
- HTML 코드를 올바른 위치에 삽입했는지
- 저장 버튼을 눌렀는지
- 브라우저 캐시 때문에 이전 화면이 보이는 것은 아닌지
대부분은 이 세 가지를 확인하면 해결됩니다.
그래도 해결되지 않는다면 사용하는 블로그스팟 테마마다 HTML 구조가 조금씩 다를 수 있으므로, 코드를 삽입한 위치를 다시 확인해 보는 것을 추천합니다.
Q3. 버튼 색상이나 페이지당 글 개수도 변경할 수 있나요?
가능합니다.
코드 안에서 CSS의 색상 코드와 페이지당 글 개수를 설정하는 부분만 수정하면 원하는 형태로 바꿀 수 있습니다.
저도 처음에는 기본 상태로 사용하다가, 버튼 크기와 색상, 페이지당 글 개수까지 조금씩 수정하면서 지금의 형태로 완성했습니다.
Q4. 특정 라벨을 선택한 상태를 계속 유지할 수 있나요?
가능합니다.
이번에 공유한 코드는 방문자가 선택한 라벨을 유지하도록 수정한 버전입니다.
덕분에 같은 주제의 글을 연속해서 읽을 때 훨씬 편하게 사용할 수 있습니다.
이 기능이 제가 이번 프로젝트에서 가장 만족했던 부분이기도 합니다.
마무리
처음에는 단순히 네이버 블로그처럼 글목록 하나만 있으면 좋겠다는 생각으로 시작했습니다.
그런데 막상 시작해 보니 버튼 하나를 만드는 것에서 끝나지 않았습니다.
버튼 크기를 조정하고, 페이지당 글 개수를 바꾸고, 선택한 라벨이 유지되도록 수정하고, 마지막에는 버튼 색상까지 손보게 됐습니다.
돌이켜 보면 단순히 기능 하나를 추가한 것이 아니라, 블로그스팟을 조금 더 제 방식대로 만들어 가는 과정이었습니다.
무엇보다 HTML을 거의 모르던 제가 원하는 기능을 직접 구현했다는 사실이 가장 큰 자신감을 주었습니다.
혹시 지금 이 글을 읽고 계신 분도 저처럼 블로그스팟의 글목록이 아쉬워서 방법을 찾고 계셨다면, 이 글이 조금이나마 도움이 되었으면 좋겠습니다.
처음에는 낯설고 어렵게 느껴질 수 있습니다.
하지만 백업만 제대로 해두고, 하나씩 차근차근 따라가다 보면 생각보다 어렵지 않게 적용할 수 있습니다.
저도 그렇게 시작했습니다. 그리고 결국 원하는 기능을 제 손으로 완성할 수 있었습니다.
뿐만 아니라 이 포스팅에 사용된 여러 갖지 기능들도 요 며칠 사이에 익히게 된 것입니다.
여러분도 꼭 성공하시길 응원하겠습니다.
여기까지 컴맹 초보 블로거의 블로그스팟 글목록 만들기 좌충우돌 프로젝트였습니다.
오늘은 시원한 맥주 한 잔으로 스스로를 칭찬해주고 싶습니다.
앞으로 한 일주일 정도는 행복할 것 같습니다.
긴 글 읽어주셔서 감사합니다. 나날이 행복하세요.
댓글 없음:
댓글 쓰기