내 블로그도 북유럽 잡지처럼! Nordic 템플릿을 주목해야 하는 이유 ✨
혹시 블로그 디자인 때문에 고민하고 계시나요? 오랜만에 글을 쓰려고 관리자 페이지에 접속했지만, 왠지 모르게 촌스럽고 복잡한 레이아웃 때문에 다시 창을 닫아버린 경험은 없으신가요?
사용자가 늘고 있는 블로그스팟(Blogger)에서 '나만의 색깔'을 담은 깔끔하고 트렌디한 디자인을 찾는 것은 쉬운 일이 아닙니다. 하지만 이제 걱정하지 마세요!
오늘 소개해 드릴 템플릿은 무료이면서도 뛰어난 디자인을 자랑하는 'Nordic Blogger Template'입니다. 이름처럼 북유럽 특유의 미니멀하고 세련된 감성이 물씬 풍기는 이 템플릿은, 마치 잘 만든 온라인 매거진이나 포트폴리오처럼 블로그를 탈바꿈시켜 줍니다.
주요 특징: 1컬럼 레이아웃, 미니멀 디자인, 모바일 최적화, 높은 가독성.
추천 대상: 투자 정보, 쇼핑 리뷰, 개인 일상/기록, 포트폴리오 등 깔끔함이 중요한 콘텐츠를 운영하는 분들.
단순히 예쁜 디자인을 적용하는 것에서 끝이 아닙니다. 이 포스팅에서는 Nordic 템플릿의 다운로드부터 적용 방법은 물론, 초보자도 쉽게 따라 할 수 있는 코드 없는 1단계 커스터마이징부터 전문가처럼 활용할 수 있는 CSS/HTML 심화 커스터마이징 팁(2~3단계)까지 단계별로 완벽하게 짚어 드릴 예정입니다.
지금 바로, Nordic 템플릿을 통해 평범했던 당신의 블로그를 개성 넘치는 브랜드 공간으로 만들어 보세요!
📝 1. 5분 완성: Nordic 템플릿 다운로드 및 적용 방법
블로그의 새로운 시작을 위해 Nordic 템플릿을 확보하고 적용하는 가장 기본적인 단계를 설명합니다. 이 과정만 거치면 기본적인 북유럽 감성의 레이아웃이 블로그에 적용됩니다.
A. 다운로드: XML 파일 확보
Nordic 템플릿 상세 페이지에 접속하면 중앙이나 하단에 위치한 "Free Download" 버튼을 클릭합니다.
💡 확보 파일 확인: 다운로드가 완료되면 nordic.xml과 같이 확장자가 .xml인 파일을 반드시 확인하여 저장해 주세요. 이 XML 파일이 바로 블로그스팟 테마의 본체입니다.
B. 적용: Blogger 대시보드에서 템플릿 업로드
다운로드한 XML 파일을 Blogger 블로그에 적용하는 과정입니다.
Blogger 대시보드에 접속합니다.
왼쪽 메뉴에서 '테마'를 선택합니다.
'맞춤설정' 버튼 옆의 아래쪽 화살표(▼)를 클릭한 후, 'HTML 편집' 메뉴로 진입합니다.
HTML 편집기 화면이 뜨면, 화면 오른쪽 상단의 '테마 업로드(Upload Theme)' 버튼을 찾습니다.
버튼을 누른 후, 앞서 다운로드한 nordic.xml 파일을 선택하여 업로드를 진행합니다.
템플릿 업로드가 완료되면 자동으로 새로운 Nordic 디자인이 블로그에 적용됩니다.
C. ⚠️ 주의사항: 기존 테마 백업하기 (선택 사항)
새로운 템플릿을 적용하기 전에 만약을 대비하여 현재 사용하고 있는 테마를 백업해 두는 것이 안전합니다.
🛠️ 2. 초보자 환영! 1단계: 기본 설정으로 커스터마이징
코드를 전혀 몰라도, 마우스 클릭 몇 번으로 Nordic 템플릿의 분위기를 완전히 바꿀 수 있는 가장 쉬운 방법입니다. 이 단계는 'Blogger Template Designer(맞춤설정)' 메뉴에서 진행됩니다.
A. 디자인 맞춤: 색상, 글꼴, 배경 이미지 변경
블로그의 브랜드 톤 앤 매너(Tone & Manner)를 결정하는 가장 빠른 방법입니다.
Blogger 관리자 → 테마 → '맞춤설정(Template Designer)'을 클릭합니다.
여기서 글꼴(폰트), 테마 색상, 배경 이미지를 자유롭게 선택하고 미리보기 화면으로 즉시 확인할 수 있습니다.
콘텐츠의 주제(예: 투자, 여행, 요리 등)에 맞게 주 색상과 보조 색상을 변경해 보세요.
B. 레이아웃 재배치: 위젯 추가/삭제 및 위치 이동
블로그 독자들이 가장 필요로 하는 정보 위주로 메인 화면의 구성을 재배치하는 단계입니다.
Blogger 관리자 → '레이아웃' 메뉴로 이동합니다.
Nordic 템플릿의 다양한 구획(Header, Sidebar, Post Footer 등)에 배치된 위젯(가젯)들을 확인할 수 있습니다.
위젯 추가: '가젯 추가'를 눌러 프로필, 인기 글, 카테고리(라벨), 광고 배너 등을 원하는 위치에 삽입합니다.
위치 이동: 각 위젯을 드래그 앤 드롭(Drag & Drop)하여 사이드바 위아래, 또는 본문 아래 등 원하는 곳으로 손쉽게 옮길 수 있습니다.
위젯 삭제: 필요 없는 기본 위젯은 '수정'을 눌러 '삭제'하여 깔끔한 화면을 만드세요.
🧑💻 3. 브랜딩 완성! 2-3단계: 심화 커스터마이징 (CSS & HTML)
블로그를 진정한 브랜드 채널로 만들고 싶다면, CSS와 HTML을 활용하여 디자인의 세부 요소와 구조를 직접 조정해야 합니다. 위험 부담을 줄여가며 단계적으로 접근해 보세요.
A. 2단계: CSS 디자인 세부 조정 (글꼴 크기, 여백, 색상 등)
이 단계에서는 글꼴의 크기, 섹션 간의 여백(Padding/Margin), 강조 색상의 미세 조정 등 브랜드 톤에 맞는 디테일을 완성합니다.
HTML 편집 진입: 테마 → HTML 편집으로 다시 들어갑니다.
CSS 수정 위치: 편집기 맨 위쪽 또는 <b:skin> 태그 내부의 <style> 섹션을 찾아 수정합니다. 이곳에 블로그의 모든 디자인 규칙이 정의되어 있습니다.
팁: 추가 CSS 덮어쓰기 (가장 안전한 방법)
기존 코드를 건드리는 것이 불안하다면, 레이아웃 메뉴에서 'HTML/JavaScript' 가젯을 하나 추가하고, 그 안에 <style>...</style> 태그를 사용하여 원하는 CSS 코드를 별도로 넣어주는 것이 가장 안전합니다. 이렇게 하면 기존 템플릿의 코드를 덮어쓰기(Overwrite) 하는 효과를 낼 수 있습니다.
B. 3단계: 구조/기능 최적화 (광고, CTA, SEO 조정)
Nordic 템플릿의 구조를 이해하고 광고, 추천 글 등의 기능을 고객 행동에 맞게 최적화하는 단계입니다.
구조 이해: HTML에서 <b:section> (섹션, 구획), <b:widget> (위젯, 가젯) 태그를 이해하면, 특정 위치에 광고 코드, 구독 버튼(CTA), 추천 글 리스트 등을 직접 삽입하여 독자의 행동(구독, 문의, 구매)을 유도할 수 있습니다.
SEO & 가독성 최적화: HTML 편집에서 제목 태그 구조(H1, H2, H3 등)와 메타 태그를 조정하여 검색 엔진 최적화(SEO)와 가독성을 높일 수 있습니다. (예: 정보성 콘텐츠는 H태그를 체계적으로, 쇼핑 정보는 메타 디스크립션을 상세하게)
🔍 로고 변경 커스터마이징 예시 (가장 많이 하는 수정)
가장 먼저 시도해 볼 만한 커스터마이징 항목인 '로고 변경'에 대해, Nordic 템플릿에서 실제 HTML 코드를 수정하는 방법을 단계별로 안내해 드리겠습니다.
대부분의 블로그 템플릿은 기본적으로 텍스트 로고(블로그 제목)를 사용하거나 이미지 로고를 삽입할 수 있는 영역이 정해져 있습니다.
목표: 텍스트 로고를 준비된 이미지 로고로 교체하기
1단계: 사용할 이미지 로고 준비
로고 파일 준비: 블로그 상단에 들어갈 로고 이미지 파일(PNG 또는 JPG)을 준비합니다.
이미지 호스팅: 이 이미지를 Blogger에 업로드하거나, 구글 포토, 드라이브 등을 통해 웹에서 접근 가능한 URL을 확보합니다.
예시 로고 이미지 URL: YOUR_LOGO_IMAGE_URL.png (이 URL을 실제 이미지 주소로 대체해야 합니다.)
2단계: HTML 편집기에서 로고 위치 찾기
Blogger 관리자 → 테마 → HTML 편집으로 이동합니다.
헤더(Header) 영역을 찾기 위해 편집기 내에서 Ctrl + F (또는 Cmd + F)를 눌러 다음 키워드를 검색합니다.
header
logo
b:section id='header'
검색을 통해 아래와 유사한 구조를 가진 부분을 찾습니다. 이 부분이 블로그 제목(텍스트 로고)이 표시되는 영역입니다.
일반적인 Blogger 템플릿 헤더 구조 (예시):
3단계: 텍스트 로고를 이미지 로고 코드로 교체
텍스트로 표시되던 <h1 class='title'>...</h1> 부분을 이미지 로고가 나타나도록 수정합니다.
찾은 코드 내에서 <b:if cond='data:image'> 조건문이 끝나는 <b:else/> 이후의 <h1> 태그를 주석 처리하거나 삭제하고, 그 자리에 로고 이미지를 삽입하는 코드를 넣습니다.
💡 수정 예시 코드
다음과 같이 <b:else/> 부분 아래에 <img> 태그를 삽입합니다.
주요 수정 내용 설명
YOUR_LOGO_IMAGE_URL.png: 1단계에서 준비한 실제 로고 이미지 URL로 변경해야 합니다.max-width: 200px: 로고의 크기를 CSS로 제어합니다. 원하는 로고 크기에 맞게 이 값을 조정해 주세요.height: auto: 이미지 비율을 유지하면서 높이를 자동 설정합니다.
4단계: 변경 내용 저장
HTML 편집기 오른쪽 하단에 있는 '저장' 버튼을 누르면 변경 사항이 블로그에 바로 적용됩니다. 블로그를 새로고침하여 로고가 정상적으로 표시되는지 확인해 보세요.
📄 메뉴 구성 커스터마이징 예시 (네비게이션 바 수정)
로고 다음으로 사용자 경험에 큰 영향을 미치는 것은 바로 메인 메뉴(내비게이션 바)입니다. Nordic 템플릿의 상단 메뉴를 원하는 카테고리나 외부 링크로 구성하는 방법을 안내해 드립니다.
대부분의 Blogger 템플릿은 메뉴를 링크 목록(Link List) 위젯 형태로 관리합니다.
목표: 상단 내비게이션 바의 메뉴 항목(링크) 추가, 수정, 삭제하기
1단계: 레이아웃 메뉴에서 메뉴 위젯 찾기
Blogger 관리자 → '레이아웃' 메뉴로 이동합니다.
템플릿의 구조에 따라 'Main Menu', 'Navigation', 'Link List' 등의 이름으로 된 위젯(가젯)을 찾습니다. 이 위젯이 보통 블로그 상단에 가로로 표시되는 메뉴를 담당합니다.
해당 위젯의 오른쪽에 있는 '수정' 버튼을 클릭합니다.
2단계: 링크 목록 위젯 수정하기
'링크 목록 구성' 창이 열리면 현재 메뉴에 등록된 항목들을 볼 수 있습니다.
A. 메뉴 항목 추가하기
새 항목 이름 입력: 메뉴에 표시하고 싶은 이름(예: '투자 정보', '여행 기록', 'About Me' 등)을 입력합니다.
새 항목 URL 입력: 연결하고 싶은 주소(예: 해당 카테고리 라벨 URL, 외부 웹사이트 주소 등)를 입력합니다.
'링크 추가' 버튼을 클릭합니다.
B. 메뉴 항목 수정 및 순서 변경
수정: 목록에서 수정하고 싶은 항목을 찾아 '편집'을 클릭하여 이름이나 URL을 변경할 수 있습니다.
순서 변경: 항목 오른쪽의 위/아래 화살표를 클릭하여 메뉴의 표시 순서를 원하는 대로 조정합니다.
삭제: 필요 없는 항목은 '삭제'를 클릭하여 제거합니다.
3단계: 특정 카테고리(라벨)를 메뉴에 연결하는 방법
메뉴 항목 URL을 입력할 때, 단순히 블로그 홈 주소가 아닌 특정 카테고리(라벨)로 바로 연결하고 싶을 수 있습니다.
연결할 카테고리 페이지 주소 확인: 블로그에서 원하는 카테고리(예: '여행')가 적용된 글을 하나 열어봅니다. 또는 사이드바의 카테고리 목록에서 해당 카테고리를 클릭합니다.
주소창에 나타나는 URL(일반적으로 https://[내 블로그 주소]/search/label/여행 형태)을 복사합니다.
2단계 A에서 '새 항목 URL'에 복사한 주소를 붙여넣고 메뉴 항목을 추가합니다.
4단계: 변경 내용 저장
모든 메뉴 항목을 수정한 후에는 반드시 '링크 목록 구성' 창 하단의 '저장' 버튼을 누르고, 다시 '레이아웃' 화면에서도 '저장' 버튼을 눌러야 최종적으로 블로그에 반영됩니다.
🖼️ 글 목록 방식 커스터마이징 예시 (그리드/리스트 뷰 조정)
Nordic 템플릿은 미니멀하면서도 매거진 스타일을 추구하기 때문에, 글 목록(Post List)을 어떻게 보여주느냐에 따라 블로그의 인상이 크게 달라집니다. 기본적으로는 리스트(세로 나열) 형태를 사용하지만, 이를 그리드(바둑판 배열) 형태로 바꾸거나 세부 디자인을 조정할 수 있습니다.
목표: 메인 페이지의 글 목록 표시 방식(Layout) 변경 또는 세부 디자인 조정
1단계: HTML 편집기에서 포스트 목록 영역 찾기
글 목록의 레이아웃을 결정하는 코드는 보통 <b:includable id='main'> 내부에 있으며, 포스트 본문 영역을 나타내는 post-body나 blog-posts와 관련된 클래스/ID 주변에 있습니다.
Blogger 관리자 → 테마 → HTML 편집으로 이동합니다.
Ctrl + F (또는 Cmd + F)를 사용하여 다음 키워드 중 하나를 검색합니다.
blog-posts
b:widget id='Blog1'
검색 결과 내에서 다음과 유사한 <b:includable id='post'> 또는 <b:loop> 구문을 찾습니다. 이 부분이 개별 포스트 목록을 반복적으로 출력하는 영역입니다.
2단계: CSS를 이용한 그리드/리스트 뷰 조정
Nordic 템플릿의 글 목록 방식은 대부분 CSS (Cascading Style Sheets)로 제어됩니다. HTML 구조를 건드리는 것보다 CSS 클래스의 속성을 수정하거나 추가하는 것이 더 안전합니다.
💡 예시: 글 목록을 2열 그리드로 바꾸고 싶을 때
Nordic 템플릿의 CSS 섹션(주로 <b:skin> 태그 내 <style> 부분) 또는 추가 CSS 영역에 다음 코드를 삽입하여 메인 포스트 목록을 2열로 배치할 수 있습니다.
주의: Nordic 템플릿이 사용하는 실제 CSS 클래스명(post-outer, post-wrapper 등)에 따라 코드를 조정해야 합니다. 아래는 일반적인 예시입니다.
💡 예시: 포스트 목록의 썸네일 크기/위치 조정
글 목록의 가독성을 높이기 위해 썸네일 이미지의 크기를 조정할 수 있습니다.
3단계: 변경 내용 저장
코드를 수정한 후 HTML 편집기 오른쪽 하단의 '저장' 버튼을 누릅니다. 블로그 메인 페이지를 확인하여 글 목록이 그리드 또는 원하는 스타일로 변경되었는지 확인합니다.

💰 광고 배치 커스터마이징 예시 (수익 최적화)
블로그 운영의 주요 목표 중 하나가 수익 창출이라면, 광고(특히 Google AdSense)를 효과적인 위치에 배치하는 것이 중요합니다. Nordic 템플릿의 미니멀한 디자인을 해치지 않으면서도 클릭률(CTR)을 높일 수 있는 광고 배치 방법을 안내합니다.
대부분의 광고는 'HTML/JavaScript' 가젯을 통해 삽입됩니다.
목표: 광고를 콘텐츠 상단, 중간, 사이드바 등 최적의 위치에 삽입하기
1단계: 광고 코드 확보
Google AdSense나 다른 광고 플랫폼에서 반응형(Responsive) 또는 특정 크기의 광고 단위 코드를 미리 생성하고 복사해 둡니다.
예시 광고 코드:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.ads || []).push({}); </script>
2단계: 레이아웃 메뉴를 활용한 쉬운 광고 배치 (사이드바, 푸터)
광고를 사이드바나 푸터(Footer)에 배치하는 것은 가장 쉽고 안전한 방법입니다.
Blogger 관리자 → '레이아웃' 메뉴로 이동합니다.
광고를 넣고 싶은 구역(예: Sidebar, Footer 등)에서 '+ 가젯 추가' 버튼을 클릭합니다.
목록에서 'HTML/JavaScript' 가젯을 선택합니다.
새 가젯의 제목은 비워두거나(광고 제목을 표시하고 싶지 않다면), [AD] 등으로 표시합니다.
'콘텐츠' 입력란에 1단계에서 복사한 광고 코드를 붙여넣습니다.
'저장'을 누르고, 다시 레이아웃 화면에서 '저장'을 눌러 블로그에 반영합니다.
3단계: HTML 편집을 이용한 본문 상단/하단 광고 배치 (고급)
글 내용 바로 위나 아래(본문 시작/끝)에 광고를 배치하면 노출도가 매우 높아집니다. 이 영역은 '레이아웃' 메뉴로 접근하기 어렵기 때문에 HTML 편집이 필요합니다.
Blogger 관리자 → 테마 → HTML 편집으로 이동합니다.
Ctrl + F를 사용하여 <b:includable id='post'>를 검색합니다. 이 태그 안에 개별 포스트의 내용이 정의되어 있습니다.
A. 본문 상단 광고:
포스트 제목 태그(<h1> 또는 <h2> 형태)가 끝나는 지점, 또는 <div class='post-body entry-content'> 바로 위에 광고 코드를 삽입할 위치를 찾습니다.
해당 위치에 광고 코드를 직접 붙여넣거나, AdSense 코드 대신 다음처럼 가젯을 호출하는 코드를 삽입하여 관리할 수도 있습니다.
B. 본문 하단 광고:
4단계: CSS를 이용한 광고 영역 스타일링 (미관 개선)
광고가 본문과 너무 붙어 있으면 지저분해 보일 수 있습니다. 2단계의 CSS 팁을 활용하여 여백을 추가해 주세요.
변경 내용을 '저장'하고 블로그를 확인합니다.