스킨 스튜디오는 티스토리 스킨을 화면에서 조립하는 웹 편집기예요. 헤더, 글 목록, 프로필 같은 블록을 옮기고 색상과 여백을 바꾼 뒤, 티스토리에 등록할 스킨 파일을 내려받아요.
레이아웃 편집은 코드 입력 없이 진행해요. 완성한 파일을 티스토리 관리자에 올리고 적용하는 단계는 직접 해야 해요. 편집할 때는 양쪽 설정 패널을 함께 볼 수 있는 PC 화면을 권해요.
블로그 성격에 맞는 샘플 고르기
처음부터 빈 화면을 채울 필요는 없어요. 왼쪽 ‘샘플’에서 아래 네 가지 중 하나를 골라 적용하고, 문구와 사진을 바꾸는 것부터 시작하세요.
| 샘플 | 이런 구성이에요 |
|---|---|
| 캐릭터 놀이터 | 큰 배너와 카드형 글 목록. 게임이나 도구를 소개할 때 어울려요. |
| 사이드바 매거진 | 넓은 글 영역 옆에 프로필·광고를 두는 구성. |
| 미니멀 기록장 | 썸네일 없는 1단 목록으로 글 제목을 보여주는 구성. |
| 3단 쇼케이스 | 콘텐츠를 세 열에 나누고, 모바일에서는 세로로 쌓는 구성. |
샘플을 적용하면 메인·글 목록·글 상세 구성이 함께 바뀌어요. 이미 작업 중이라면 적용 창의 ‘현재 작업 백업’으로 JSON부터 보관하세요.
글 목록 옆에 프로필을 놓아보면
프로그램 소개 글을 모아 보여주는 블로그라면 ‘사이드바 매거진’에서 시작해보세요. 가운데는 도구 관련 글, 오른쪽은 내 프로필을 두는 식으로 꾸밀 수 있어요.
왼쪽 구조 목록에서 블록을 누르면 화면이 그 위치로 이동하고 파란 테두리가 생겨요. 오른쪽 패널이 선택한 블록의 설정이에요. 제목이나 이미지를 바꾸고, 순서를 옮길 때는 블록 또는 ‘⠿ 이동’ 손잡이를 끌어 파란 삽입선에 놓으세요. 잘못 놓았다면 상단 실행 취소로 되돌리면 돼요.
글 목록을 선택한 뒤 카테고리 경로를 내 블로그에 맞게 지정하세요. 이 블로그의 도구 글은 /category/체험/도구에 있어요. 프로필 사진의 비율이 맞지 않으면 ‘이미지 자르기’에서 비율·확대·위치를 조정해보세요. 원본을 남기고 자른 사본을 만드는 방식이에요.
배치를 마치면 상단에서 메인·글 목록·글 상세를 번갈아 확인하세요. 세 화면은 따로 편집되므로 헤더나 프로필을 함께 맞출 때는 ‘다른 화면에 적용’을 사용해요. 모바일 미리보기에서는 사이드바가 아래로 내려왔을 때 순서와 여백이 자연스러운지도 봐주세요.
편집기의 글과 댓글은 예시예요. 실제 글은 스킨 적용 후 연결되며, 카테고리별 목록은 해당 카테고리 첫 페이지에서 가져올 수 있는 글까지 표시해요. 설정한 개수보다 적게 나올 수 있어요. 광고 블록 역시 실제 송출을 확인해주는 기능은 아니므로 본인 광고 설정을 따로 확인해야 해요.
새로고침 전에 JSON을 저장하세요
편집 내용은 자동 저장되지 않아요. 직접 넣은 이미지와 작업 내용은 현재 브라우저 탭에 임시 보관돼요. 새로고침하거나 탭을 닫기 전에 상단 ‘JSON 다운로드’를 눌러 파일을 보관하세요.
사용자가 추가한 이미지는 서버의 공용 저장소에 올리지 않는 방식이에요. 다시 편집할 때는 저장한 JSON을 불러오면 돼요.
JSON은 이미지와 편집 구성을 보관하는 파일이고, ZIP은 티스토리에 등록할 스킨 파일 묶음이에요. ZIP만 받아서는 편집용 백업이 되지 않으니 두 파일을 함께 보관하세요.
완성한 스킨을 티스토리에 적용하기
상단 ‘내보내기’로 ZIP을 받은 뒤 ‘티스토리 적용’을 열면 파일 등록 순서를 안내하는 도우미가 나와요. 가이드는 내려받아 인터넷 없이도 볼 수 있어요.
적용할 때는 다음 순서로 진행하세요.
- 티스토리에서 사용 중인 스킨을 보관해요. 직접 넣은 광고·통계 코드와 메뉴 설정도 별도로 남겨두세요.
- ZIP의 압축을 풀고 꾸미기 → 스킨 변경 → 스킨 등록에서 기본 파일과
images폴더 안의 파일을 올려요. ZIP이나 JSON 자체를 올리는 단계가 아니에요. - 등록한 스킨을 저장한 뒤 스킨 보관함에서 적용해요. 저장만 하면 블로그 화면은 바뀌지 않아요.
- 실제 글과 이미지·댓글을 PC와 휴대폰에서 확인해요. 휴대폰에 티스토리 기본 화면이 뜬다면 ‘모바일웹 자동 연결’을 끄고,
/m/이 없는 블로그 기본 주소로 다시 열어보세요.
처음 적용할 때는 테스트 블로그에서 먼저 확인하는 편이 좋아요. 파일별 선택 방법과 원래 스킨으로 돌아가는 순서는 사용 가이드에 정리해뒀어요.
'체험 > 도구' 카테고리의 다른 글
| Filee 소개: 이미지·PDF·HWP·영상을 바꾸는 무료 파일 변환기 (0) | 2026.10.13 |
|---|