블로그스팟 날짜 표기 형식 간단하게 바꾸는 방법 (YYYY년 MM월 DD일)
영어로 표시되는 블로그 날짜, 보기 불편하셨죠? 단 1줄의 코드로 우리말 형식으로 깔끔하게 바꿀 수 있어요!
안녕하세요! 요즘 블로그스팟(Blogspot) 테마 작업에 한창 빠져 있는 블로거입니다. 최근에 해외 테마를 적용했는데요, 날짜가 전부 "Apr 15, 2025" 이런 식으로 나오더라고요. 처음엔 그냥 쓰려 했는데, 볼수록 눈에 거슬리는 거예요. 뭔가 내 블로그랑 안 어울리는 느낌? 설정에서 한국식으로 바꾸려고 해봤지만... 안 먹히더라고요. 결국 제가 직접 해결해보자! 하고 방법을 찾아낸 게 있는데요, 너무 쉬워서 혼자 알기 아까울 정도예요. 자바스크립트 코드 한 줄이면 우리 식 날짜 표기로 싹 바뀌니까, 저처럼 날짜 때문에 스트레스 받으셨던 분들께 이 글이 큰 도움이 되었으면 좋겠어요!
목차
왜 서양식 날짜가 표시될까?
블로그스팟은 기본적으로 구글이 제공하는 플랫폼이라 그런지, 날짜 형식도 영어 기반으로 설정된 경우가 많아요. 특히 외국에서 만든 테마를 설치하면 날짜가 "Apr 15, 2025" 같은 서양식으로 나오죠. 물론 설정에서 날짜 형식을 바꿀 수 있는 옵션이 있긴 하지만, 테마 코드에 하드코딩되어 있는 경우엔 이 설정이 무용지물이 되곤 합니다. 사용자 입장에서는 분명 설정을 바꿨는데도 여전히 영어 날짜가 떠서 당황스러울 수밖에 없어요. 이럴 땐 테마 내 날짜 출력을 담당하는 HTML 구조를 조금만 조작해주면 깔끔하게 해결됩니다.
한국식 날짜로 바꾸는 자바스크립트
아래는 날짜 포맷을 YYYY년 MM월 DD일 형식으로 변경해주는 자바스크립트입니다. time 태그를 이용해 날짜가 출력되는 테마에 적용하면 바로 효과를 볼 수 있어요.
<script>
document.addEventListener('DOMContentLoaded', function() {
function formatToKoreanDate(dateStr) {
const date = new Date(dateStr);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
return `${year}년 ${month}월 ${day}일`;
}
const timeTags = document.querySelectorAll('time.published, time.updated');
timeTags.forEach(tag => {
const datetime = tag.getAttribute('datetime');
if (datetime) {
tag.textContent = formatToKoreanDate(datetime);
}
});
});
</script>
블로그스팟에 적용하는 방법
이 스크립트를 블로그스팟 테마에 추가하는 방법은 다음과 같습니다. 생각보다 간단해요!
- 블로그 관리자 페이지에서 ‘테마’로 이동
- ‘HTML 편집’ 버튼 클릭
</head>
태그를 검색- 바로 위에 위 스크립트 전체 복사해서 붙여넣기
- 변경사항 저장 클릭!
적용 시 주의할 팁
실제로 적용하다 보면 놓치기 쉬운 부분들이 있어요. 아래 팁 참고하셔서 문제 없이 수정해 보세요.
-
테마가
time
태그를 사용해야 작동함 - HTML 수정 전 원본 백업 필수!
- 캐시 문제로 바로 반영 안 될 수 있음 (새로고침 여러 번!)
날짜 변경 코드 상세 분석
우리가 사용한 자바스크립트 코드, 단순해 보이지만 구조를 하나하나 뜯어보면 더 깊이 이해할 수 있어요. 코드를 보면 document.querySelectorAll('time.published, time.updated')
로 날짜 요소를 찾아서, datetime
속성을 읽고, 우리가 지정한 날짜 포맷으로 변경해주는 로직이 핵심입니다.
코드 파트 | 설명 |
---|---|
querySelectorAll | 페이지 내 날짜를 가진 모든 time 태그 선택 |
getAttribute('datetime') | 원래 ISO 형식 날짜 문자열 추출 |
new Date() | 문자열을 날짜 객체로 변환 |
tag.textContent | 표시되는 텍스트를 한국식으로 교체 |
이 코드를 다른 데 활용할 수 있을까?
이 코드의 범용성도 꽤 괜찮습니다. 꼭 블로그스팟이 아니더라도, HTML 문서 안에 날짜가 datetime
속성으로 표현되는 곳이라면 어디든 적용할 수 있어요. 예를 들어 회사 내부 게시판, 개인 포트폴리오, 정적 웹페이지 등에서도 충분히 활용 가능합니다.
- 내부 커뮤니케이션 웹페이지
- 프론트엔드 개발 시 로컬 테스트용 HTML
- 블로그 외 다른 CMS에도 삽입 가능 (WordPress, Notion Embed 등)
작동 안 할 때 체크할 것들
"코드 넣었는데 왜 아무 변화가 없지?"라는 생각 드셨다면, 아래 항목들을 꼭 확인해보세요!
-
테마에
<time>
태그가 실제로 사용되고 있는지 - datetime 속성이 있는지 확인
- 코드가 </head> 바로 위에 정확히 삽입되었는지
- 캐시 문제로 새로고침 여러 번 했는지
대부분의 해외 테마는 HTML 템플릿 안에 날짜 형식이 하드코딩돼 있어 설정 변경이 적용되지 않습니다. 그래서 직접 코드를 수정하거나 스크립트를 추가해야 합니다.
네, time
태그와 datetime
속성을 쓰는 웹사이트라면 어디든 적용할 수 있습니다. 정적 웹페이지나 포트폴리오에도 좋아요.
태그가 정확히 <time>
형식으로 되어 있는지, 그리고 datetime
속성이 있는지 확인해보세요. 캐시 문제일 수도 있으니 새로고침도 여러 번 해보세요.
네, 자바스크립트에서 getHours()
나 getMinutes()
같은 메서드를 사용하면 시간 형식도 커스터마이징할 수 있어요.
일반적인 HTML 구조를 가진 블로그라면 가능하지만, 워드프레스나 티스토리처럼 자체 엔진을 가진 곳은 약간의 추가 설정이 필요할 수 있어요.
그럴 수 있어요. 테마를 업데이트하면 HTML이 초기화될 수 있으니, 항상 백업해 두고 재삽입할 수 있게 준비해두는 게 좋아요.
자, 이렇게 간단한 자바스크립트 코드 한 줄로 블로그의 날짜 형식을 깔끔하게 한국식으로 바꾸는 방법을 알아봤습니다. 저도 처음에는 별거 아니겠지 했는데, 실제로 적용해보니까 블로그의 분위기가 훨씬 정리되고 보기 좋아지더라고요. 소소한 디테일이 전체 인상을 크게 바꾼다는 걸 새삼 느꼈달까요? 여러분도 꼭 한번 해보시길 추천드려요. 혹시 중간에 어려운 점이 있거나 다른 활용 아이디어가 떠오르셨다면 댓글로 자유롭게 나눠주세요! 이런 꿀팁은 나눌수록 가치가 커진다고 믿거든요 😊
블로그스팟, 날짜 형식 변경, 한국식 날짜, 블로그 테마 수정, 자바스크립트 활용, Blogspot 커스터마이징, datetime 포맷, time 태그 수정, HTML 편집, 블로그 팁
댓글 쓰기