SKIN STUDIO · QUICK START

내 블로그를 꾸미는
스킨 스튜디오 사용 가이드

샘플 선택부터 블록 편집, 모바일 확인, 티스토리 적용까지.
이 파일은 이미지나 글꼴을 따로 받지 않아도 인터넷 없이 열립니다.

스킨 스튜디오 열기 ↗

01 · START샘플로 시작하면 빠릅니다

왼쪽 ‘샘플’레이아웃 선택‘이 레이아웃 적용’내용·디자인 수정

캐릭터 놀이터

큰 캐릭터 배너 → 3열 카드 → 프로필. 게임이나 체험 콘텐츠를 소개하기 좋습니다.

사이드바 매거진

넓은 글 영역 + 오른쪽 프로필·광고. 메인·목록·상세 세 화면에 사이드바가 있습니다.

미니멀 기록장

짧은 소개와 썸네일 없는 1단 목록. 읽기에 집중하는 900px 본문입니다.

3단 쇼케이스

게임·도구·소개를 독립된 세 열에 배치합니다. 모바일에서는 세로로 쌓입니다.

샘플 적용은 메인·글 목록·글 상세와 테마·이미지를 새 프로젝트로 교체합니다. 대화창의 현재 작업 백업으로 JSON을 보관하세요. 적용 직후 상단 ↶ 실행 취소로 이전 작업을 복원할 수도 있습니다.

02 · NAVIGATE사이드바의 번호가 화면의 번호입니다

구조

01 헤더

02 배너

03 글 목록

04 푸터

편집 화면

01 · 헤더

02 · 배너

03 · 글 목록
이 위치로 이동 + 파란 테두리

속성

내용

디자인

표시

구조에는 현재 편집하는 화면의 블록이 하나씩 표시됩니다. 왼쪽 번호와 캔버스에 마우스를 올렸을 때 보이는 번호는 같습니다.
행을 클릭하면 캔버스가 해당 블록으로 이동하고 진한 파란 테두리가 생깁니다. 오른쪽에서 내용·디자인·표시를 수정하세요.
캔버스의 블록을 직접 눌러도 구조 목록의 같은 항목이 선택됩니다. 다단 영역의 바깥 여백을 누르면 전체 레이아웃을 선택할 수 있습니다.
행을 드래그하거나 선택 블록의 ↑ ↓ 버튼으로 순서를 바꿉니다. 번호는 바뀐 화면 순서대로 다시 매겨집니다.
잠금 버튼으로 수정·이동을 막을 수 있습니다. 부모 다단을 잠그면 안에 있는 블록도 보호됩니다.

구조 목록의 ‘본문’, ‘사이드바’, ‘1열’ 표시는 블록이 들어갈 자리 이름입니다. 블록 번호가 없으며, ‘＋ 추가’를 누르면 해당 열에 넣을 블록을 고를 수 있습니다.

DRAG & DROP블록을 원하는 위치로 옮기기

PC에서는 캔버스의 블록 본체나 ⠿ 이동 손잡이를 끌 수 있습니다. 구조 패널의 ⠿ 손잡이도 같은 방식으로 동작합니다. 파란 삽입선과 ‘전체 폭 / 몇 열’ 표시를 확인한 뒤 놓으세요.

다단 안에 넣으려면 원하는 열의 안쪽으로 끌어 놓습니다. 다단 밖으로 빼려면 영역 위·아래 가장자리 또는 구조 패널의 전체 폭 블록 사이에 놓습니다.
캔버스나 구조 패널의 위·아래 가장자리에 머무르면 자동으로 스크롤됩니다. 화면을 확대했다면 좌우 가장자리에서도 가로 스크롤됩니다.
모바일에서는 구조 패널의 ⠿ 손잡이를 끌어 순서를 바꾸세요. 손잡이 밖에서는 화면을 스크롤할 수 있습니다. 열을 옮길 때는 속성 → 속한 영역도 사용할 수 있습니다.
잠긴 블록과 잠긴 열에는 이동할 수 없습니다. Esc로 드래그를 취소하거나, 놓은 뒤 실행 취소 버튼으로 되돌릴 수 있습니다.

WORKSPACE작업 공간 넓히기

PC에서는 캔버스 위의 구조 패널과 속성 패널을 따로 접을 수 있습니다. 접힌 패널의 버튼을 다시 누르면 원래 자리에 열립니다. 화면 맞춤 배율은 확보한 공간에 맞춰 자동으로 조절됩니다.

완성 화면을 누르면 양쪽 패널과 블록 번호·선택 테두리·이동 도구가 숨겨집니다. 메인·글 목록·글 상세와 기기 크기를 바꾸며 결과를 확인하세요. 이 화면은 예시 콘텐츠로 만든 시각 미리보기이며 링크 이동·검색·실제 댓글 작성은 실행하지 않습니다. 모바일 메뉴는 펼쳐볼 수 있습니다.

편집으로 돌아가기 또는 Esc를 누르면 선택한 블록과 이전 패널 배치를 유지한 채 돌아갑니다. 작업 내용이나 실행 취소 기록은 바뀌지 않습니다.

03 · LAYOUT다단과 사이드바 배치하기

‘블록’에서 다단·사이드바를 추가합니다.
오른쪽 내용의 열 구성에서 같은 너비의 2열·3열 또는 왼쪽·오른쪽 사이드바를 고릅니다.
‘구조’에서 원하는 열의 ＋ 추가를 누른 다음 블록을 선택합니다. 기존 블록은 드래그하거나 내용의 속한 영역에서 옮길 수 있습니다.
열 사이 간격, 모바일 순서, 사이드바 스크롤 고정을 조절합니다.

다단 안에 또 다른 다단을 넣는 중첩은 지원하지 않습니다. 3열을 2열로 바꾸면 3열의 블록은 2열로 옮겨집니다. 다단을 삭제해도 자식 블록은 전체 폭 영역에 남습니다.

메인·글 목록·글 상세는 각각 독립된 구성입니다. 헤더·푸터·프로필을 수정한 후 다른 화면에 적용을 누르면 내용과 디자인을 맞출 수 있습니다. 상세 화면의 글 본문은 하나를 유지하며 숨기거나 삭제할 수 없습니다.

04 · CONTENT카테고리별 글과 이미지

영역마다 다른 카테고리 보여주기

글 목록 블록을 선택하고 카테고리를 고릅니다. 직접 입력할 때는 /category/체험/게임처럼 블로그 안의 카테고리 경로를 넣으세요. 이름이 실제 카테고리와 일치해야 합니다. PC·모바일 열 수, 카드/목록형, 썸네일·요약·날짜 표시도 조절할 수 있습니다.

편집기의 글과 댓글은 예시입니다. 실제 글은 티스토리에 적용한 뒤 연결됩니다. 카테고리별 영역은 해당 카테고리 첫 페이지에서 불러올 수 있는 글까지 표시하므로 설정한 글 수보다 적을 수 있습니다. 샘플의 ‘게임’·‘도구’ 경로를 본인 블로그에 맞게 바꾸세요.

이미지 자르기

이미지를 사용하는 블록에서 이미지 자르기를 누르거나 왼쪽 이미지 탭에서 ‘자르기’를 선택합니다.
원본·정사각형·16:9·4:3·3:4 중 비율을 선택합니다.
확대와 가로·세로 위치를 슬라이더 또는 숫자로 조절하거나 이미지를 드래그합니다. 결과 픽셀 크기도 확인하세요.
적용하면 PNG 사본이 추가됩니다. 블록에서 열었으면 그 블록에 바로 적용됩니다.

원본은 보관됩니다. 결과는 최대 2048px이며 GIF 등 움직이는 이미지의 자르기 결과는 정지 이미지가 됩니다. 업로드는 PNG·JPG·WEBP·GIF, 파일당 5MB, 프로젝트 전체 약 20MB까지입니다.

VISITORS & NEIGHBORS방문자 수와 이웃·구독자 표시하기

왼쪽 블록 → 방문자 수 / 이웃·구독자를 눌러 추가하고, 원하는 위치나 사이드바로 옮기세요. 새 프로젝트와 기본 샘플에는 두 블록이 들어 있습니다. 예전에 저장한 JSON은 원래 배치를 유지하므로 필요한 블록을 직접 추가하세요.

오늘·어제·누적 방문자 수

각 항목을 켜고 끄거나 카드형·목록형으로 바꿀 수 있습니다. 편집기의 128·96·24,680은 배치 확인용 예시입니다. ZIP에는 예시 숫자 대신 티스토리 공식 방문자 치환자가 들어가며 적용 후 블로그의 실제 수치가 표시됩니다.

이웃 링크와 구독자 수는 다릅니다

등록한 이웃 링크 수 모드에서 한 줄에 블로그 이름 | https://주소를 입력하세요. 유효한 HTTP·HTTPS 주소만 세고 같은 주소는 한 번만 표시합니다. 여기 등록한 링크 수이며 티스토리의 구독자 수나 관리자 ‘나의 링크’를 자동으로 가져오는 기능은 아닙니다.

구독자 수 등을 보여주려면 직접 입력 모드를 고르고 수치 이름을 ‘구독자’로 바꾼 뒤 확인한 숫자를 넣으세요. 비워 두면 —로 표시합니다. 이 수치는 자동 갱신되지 않으므로 변경되면 직접 수정해야 합니다. 다른 화면에 적용으로 같은 종류 블록의 설정을 맞출 수 있습니다.

05 · RESPONSIVEPC와 모바일을 각각 확인하세요

조절할 항목	위치와 동작
화면 크기	상단 PC 1200px · 태블릿 768px · 모바일 390px. 화면 맞춤이나 50%·75%·100% 배율로 확인합니다.
블록 여백	오른쪽 디자인 → PC 안쪽 여백 / 모바일 안쪽 여백을 각각 설정합니다.
글 카드 열 수	글 목록 내용 → PC 열 수 / 모바일 열 수. 모바일은 1~2열을 지원합니다.
다단 쌓임	760px 이하에서 각 열을 세로로 쌓습니다. 다단의 모바일 순서로 방향을 바꿉니다.
기기별 표시	표시 → PC·태블릿 / 모바일. 숨김 기준은 640px입니다. 숨긴 블록은 구조 목록에서 다시 선택해 표시를 켤 수 있습니다.

작은 화면에서 편집할 때는 하단 블록·스타일 / 캔버스 / 속성 탭으로 패널을 전환합니다. 구조 목록에서 블록을 누르면 캔버스로 전환되고, 하단 ‘속성’에서 선택한 블록을 편집할 수 있습니다.

06 · SAVE & EXPORT백업부터 티스토리 적용·복구까지

PC 브라우저에서 티스토리 관리자와 이 안내를 나란히 열어두세요. 이 도우미는 파일 등록과 적용을 직접 진행할 수 있도록 안내하며 블로그에 접속하거나 변경하지 않습니다.

내 스킨 적용 순서백업 → 파일 등록 → 적용 → 확인

1 먼저 되돌아갈 준비

편집기의 JSON 다운로드로 이미지와 편집 구성을 보관합니다. 새로고침하면 현재 작업은 초기화됩니다. 백업하지 않은 변경이 있으면 상단 안내와 페이지를 떠날 때 브라우저 경고가 표시됩니다. JSON 다운로드 후 다운로드 폴더에서 파일을 확인하고 파일 저장 확인을 누르세요. ZIP 다운로드만으로는 편집용 백업이 되지 않습니다. 모바일 앱 강제 종료 등에서는 경고가 생략될 수 있으니 작업 중간에도 JSON을 보관하세요.
티스토리 관리 → 꾸미기 → 스킨 변경에서 사용 중인 스킨을 보관하고 알아보기 쉬운 이름을 붙입니다.
직접 추가한 광고·방문 통계·검색 사이트 인증 코드, 메뉴와 사이드바 설정도 별도로 복사하거나 화면을 남깁니다. 새 스킨에 자동으로 옮겨지지는 않습니다.
편집기에서 ZIP 다운로드 후 압축을 풀어 둡니다. JSON은 편집용이고 ZIP은 등록용입니다.

기존 스킨과 필요한 설정을 보관했습니다

2 파일은 두 번 나눠 추가

관리 → 꾸미기 → 스킨 변경 → 스킨 등록을 엽니다. 메뉴 이름이나 위치는 관리자 버전에 따라 다를 수 있습니다.

첫 번째: 압축을 푼 폴더의 7개 파일

skin.html
style.css
index.xml
preview.gif
preview256.jpg
preview560.jpg
preview1600.jpg

‘추가’를 누르고 위 파일을 함께 선택합니다.

두 번째: images 폴더 안의 파일

script.js
모든 이미지 파일

‘추가’를 다시 누른 뒤 images 폴더 안으로 들어가서 파일을 모두 선택합니다. 폴더 자체를 선택하지 않습니다.

ZIP·JSON·적용안내.txt·적용가이드.html은 스킨 등록 화면에 올리지 않습니다. 파일명을 바꾸거나 다른 ZIP의 파일을 섞지 마세요. 미리보기 그림이 보이는 것만으로 등록 파일이 모두 맞는 것은 아닙니다.

루트 7개와 images 안의 모든 파일을 추가했습니다

3 저장한 다음 실제로 적용

스킨 이름을 정해 저장합니다.
스킨 보관함에서 방금 등록한 스킨을 찾아 적용합니다. 파일을 저장한 것과 블로그에 적용한 것은 별도 단계입니다.
홈 화면 설정은 이 스킨의 일반 글 목록을 사용합니다. 기존 홈 커버가 유지되고 있다면 커버 사용 여부를 확인합니다.
꾸미기 → 모바일에서 모바일웹 자동 연결을 사용하지 않습니다로 설정하고 저장합니다. 휴대폰에서 /m/ 주소가 아닌 블로그 기본 주소로 다시 엽니다.

글 목록 수는 티스토리의 글 표시 수 설정에도 영향을 받습니다. 이 편집기에 입력한 개수는 최대 표시 개수입니다.

보관함에서 적용하고 모바일 설정도 확인했습니다

4 적용 후 한 번씩 열어보기

메인: 배너·이미지·게임/도구 영역이 보이는지 확인합니다.
카테고리·검색: 본인 블로그의 카테고리 경로와 메뉴 주소를 확인합니다. 분류별 영역은 해당 카테고리 첫 페이지에서 글을 가져옵니다.
글 상세: 긴 제목, 큰 이미지, 표, 코드, 동영상이나 게임이 있는 글을 하나씩 확인합니다.
댓글·방명록: 입력창·로그인·답글·비밀글은 실제 티스토리 화면에서 확인합니다. 편집기의 댓글은 예시입니다.
모바일: 메뉴와 글이 잘리지 않는지, 숨긴 블록이 보이지 않는지 확인합니다.
광고: 본인 게시자·광고 단위 ID와 승인 상태를 확인합니다. ID가 비어 있으면 광고 영역을 출력하지 않습니다. 편집기는 광고 송출을 확인하지 않습니다.

PC와 모바일에서 주요 화면을 확인했습니다

문제가 생기면 여기부터

증상	확인할 것
이미지가 안 나옴	images 안의 이미지 파일을 빠짐없이 추가했는지, 파일명을 바꾸지 않았는지 확인합니다.
글이 비거나 로딩만 됨	images/script.js 누락과 카테고리 경로를 확인합니다. 해당 카테고리에 공개 글이 있는지도 확인합니다.
꾸밈 없이 글자만 나옴	style.css 등록 여부와 같은 ZIP에서 나온 파일인지 확인합니다.
휴대폰만 예전 화면	모바일웹 자동 연결 설정을 확인하고 /m/을 뺀 기본 주소로 다시 접속합니다.
변경 전 화면이 남음	보관함에서 적용했는지 먼저 확인한 뒤 브라우저를 새로고침합니다.
빠르게 원상복구	관리 → 꾸미기 → 스킨 변경 → 스킨 보관함에서 처음에 보관한 스킨을 다시 적용합니다. 별도로 바꾼 모바일·메뉴·광고 설정도 기록대로 복구합니다. 새 스킨의 등록 파일을 지우는 것만으로는 복구되지 않습니다.

안내의 체크 표시는 저장되지 않습니다. 스킨 변경은 게시글 본문을 수정하지 않지만 화면 설정과 직접 넣은 코드는 달라질 수 있습니다. 티스토리 실제 적용·광고 송출은 직접 확인하세요.

근거: 공식 파일 구조 · 공식 스킨 등록 안내(기존 관리자 화면) · 스킨 보관 안내

07 · QUICK HELP막힐 때 확인할 것

상황	확인 방법
블록이 안 보임	구조 목록에서 ‘이 기기에서 숨김’ 문구를 확인하고 속성 → 표시를 켭니다. 다단 부모의 표시 설정도 확인하세요.
수정·이동이 안 됨	블록이나 상위 다단의 잠금을 해제합니다. 본문은 삭제할 수 없습니다.
카테고리에 글이 없음	실제 카테고리 경로를 확인합니다. 예시가 없는 카테고리는 편집기에서 빈 안내로 보이며 실제 블로그 적용 후 연결됩니다.
샘플을 잘못 적용함	바로 ↶ 실행 취소. 브라우저를 다시 열었다면 미리 저장한 JSON을 불러옵니다. 실행 취소 기록은 새로고침 후 유지되지 않습니다.
이미지가 흐림	원본 해상도와 자른 크기를 확인합니다. 작은 이미지를 크게 확대해도 세부 정보는 늘어나지 않습니다.

단축키

⌘/Ctrl Z 실행 취소 · ⌘/Ctrl Shift Z 다시 실행
⌘/Ctrl S JSON 다운로드 · Delete 선택한 블록 삭제

이 문서를 PDF로 보관하려면 위쪽 ‘인쇄 / PDF로 저장’을 누르고 프린터 대신 PDF 저장을 선택하세요.