📢 코딩팩토리 스킨 배포합니다 — 다운로드 / 스킨 설명 / 사용법 안내

안녕하세요, 코딩팩토리입니다.

오랫동안 준비해 온 코딩팩토리 스킨을 드디어 배포하게 되어 이렇게 공지글을 작성합니다. 🎉

 

저는 2017년부터 티스토리를 운영해오면서 늘 하나의 바람이 있었습니다.

바로 “언젠가는 나만의 스킨을 만들어보자” 하는 것이었죠.

 

블로그를 운영하다 보면 글을 돋보이게 하면서도 광고 배치, 위젯 활용, 반응형, 디자인까지 모두 챙기고 싶은 순간이 많습니다. 하지만 현실은 늘 아쉬웠습니다. 깔끔한 구조와 가독성, 구글 SEO 최적화, 애드센스 수익 극대화, 그리고 빠른 로딩 속도까지 모두 만족시키는 스킨을 찾는 건 쉽지 않았기 때문입니다.

 

그래서 결국 직접 만들기로 했습니다.

 

수백 번의 테스트와 디자인 수정 끝에 완성된 결과물이 바로 이번 코딩팩토리 스킨입니다. 이 스킨은 단순히 보기 좋은 디자인을 넘어서, 블로그 운영자에게 꼭 필요한 기능과 블로그를 빠르게 성장시킬 수 있는 효율까지 담아내려고 노력했습니다.

 

✅ 깔끔한 가독성으로 콘텐츠를 돋보이게 하고,

✅ 반응형 UI로 어떤 기기에서도 최적화된 경험을 제공하며,

✅ SEO 친화적 구조와 애드센스 최적화 배치로 성장과 수익을 동시에 챙기고,

✅ 불필요한 리소스를 줄여 빠른 로딩 속도까지 구현했습니다.

 

이 스킨은 단순한 티스토리 스킨에 그치지 않고, 블로그 성장과 수익화를 위한 목적으로 제작한 스킨입니다. 그동안 제가 블로그를 하며 원했던 모든 요소를 담아낸 이번 스킨을 이제 여러분에게 공개하려고 합니다.

 

 

※ 코딩팩토리 스킨 사용을 원하시는분들 아래 링크에서 구매해 주시면 됩니다.

https://kmong.com/self-marketing/693174/2pZLAQneCP

실력 있는 전문가 찾기, 크몽

 

---

 

 

 코딩팩토리 — 반응형 티스토리 스킨 

주요 기능

• 웹 표준 준수 — 성능, 웹 접근성, 권장사항, SEO 검색엔진 최적화
• 완전 반응형 스킨 — 데스크톱·태블릿·모바일 7단 레이아웃 적용 및 최적화, 모바일 햄버거 메뉴 & 검색 제공
• 커버 타입 4종 제공 — 카드형 / 리스트형(좌·우) / 슬라이드형
• 15종의 다양한 사이드바 위젯 제공 — 카테고리 접기/펼치기, 최근 글, 인기 글, 댓글 ,태그, 공지·보관함·링크·방문자수 등
• 가독성 중심 본문 — 선택 가능한 4가지 폰트, 표, 인용문, 코드블록(Mac 스타일) 제작
• AdSense 최적화 — 메인/본문/사이드바/인피드/멀티플렉스 최적화 영역 지원, 변수로 간편 제어

 

PageSpeed Insights 성능 측정

• 성능: 64점 (환경/이미지 최적화에 따라 변동 가능)
• 접근성: 100점
• 권장사항: 100점
• 검색엔진 최적화(SEO): 100점

구글 Lighthouse 검사에서도 다음과 같은 결과를 보여주었습니다.

 

 

✅ 웹 접근성 100점

WCAG(Web Content Accessibility Guidelines, 웹 콘텐츠 접근성 지침)을 준수하여 누구나 불편 없이 콘텐츠를 이용할 수 있도록 설계했습니다.

• 시맨틱 태그(<header>, <footer>, <nav> 등)로 구조화
• 이미지 alt 속성 제공 → 시각장애인 사용자도 이해 가능
• 색상 대비 준수 → 저시력·색약 사용자 배려
• 버튼·링크에 focus 스타일 적용 → 키보드 네비게이션 지원

👉 웹 접근성 지수가 높은 웹 사이트는 구글 노출과 같은 웹 지수에 긍정적 영향이 있습니다.

 

 

✅ 권장사항 100점

W3C기구의 최신 웹 표준과 보안 가이드라인을 충실히 따랐습니다.

• HTTPS 환경 최적화
• viewport, charset 등 필수 메타 태그 반영
• flexbox, grid 기반의 CSS 레이아웃 적용
• 불필요한 코드 최소화 → 크로스 브라우징 안정성 확보
• 자바스크립트 오류 없음 (가끔씩 티스토리 자체 오류 나는것 제외)

👉 웹 표준을 잘 준수하고 있는 웹 사이트는 구글 노출과 같은 웹 지수에 긍정적 영향이 있습니다.

 

 

✅ 검색엔진 최적화(SEO) 100점

검색 상위 노출을 고려해 기본기를 강화했습니다.

• title, description 등 메타 정보 충실
• <h1>, <h2> 등 계층적 헤딩 구조 → 검색엔진이 콘텐츠 중요도 인식
• 반응형 CSS 적용 → 모바일 친화적 사이트로 가산점
• 카테고리·태그·관련 글 네비게이션 → 내부 링크 구조 강화
• 가벼운 코드 구조 → 빠른 로딩으로 구글 선호

👉 SEO 최적화 되어있는 스킨으로 구글 노출과 같은 웹 지수에 긍정적 효과가 있습니다.

 

 

반응형 7단 레이아웃 제공

 

코딩팩토리 스킨은 반응형 구조를 기반으로 제작되었습니다.

 

PC 화면에서는 좌측 또는 우측에 사이드바가 고정되어 있어 블로그의 주요 메뉴나 위젯에 바로 접근할 수 있습니다. 반면, 태블릿과 모바일 환경에서는 화면 공간을 효율적으로 활용하기 위해 사이드바가 하단으로 이동합니다. 특히 태블릿에서는 사이드바가 2단 레이아웃으로 제공되어 한눈에 다양한 정보를 확인할 수 있으며, 모바일에서는 화면 크기에 맞춰 1단 레이아웃으로 깔끔하게 정리됩니다.

 

또한 태블릿과 모바일 모두 상단에 위치한 햄버거 버튼을 통해 검색창과 메뉴창을 열 수 있어 직관적인 네비게이션을 제공합니다. 여기에 더해 화면 크기에 따라 폰트 사이즈와 레이아웃 배치가 자동으로 최적화되기 때문에, 어떤 기기에서 접속하더라도 사용자에게 최적의 가독성과 편리한 UI를 경험할 수 있습니다.

 

• max-width : 1920px - 대형모니터 화면
• max-width : 1420px - 중형모니터 화면
• max-width : 1220px - 소형모니터 화면
• max-width : 1100px - 대형 태블릿 화면
• max-width : 700px - 소형 태블릿 화면(갤럭시 폴드)
• max-width : 560px - 대형 휴대폰 화면
• max-width : 500px - 소형 휴대폰 화면

 

 

커버타입 4종과 사이드바 위젯 15종 제공

 

커버 타입

• Type 1 — 카드형: 썸네일이 강조되는 3열 카드 그리드
• Type 2 — 리스트(좌): 좌측 썸네일·우측 정보형 목록
• Type 3 — 리스트(우): 우측 썸네일·좌측 정보형 목록
• Type 4 — 슬라이드: 좌/우 컨트롤로 넘기는 가로 캐러셀

 

수익성이 높은 위치에 자동으로 애드센스 광고를 탑재해보세요

 

 

 

코딩팩토리 스킨은 다년간 실험으로 찾아간 최적의 광고위치를 미리 지정해 놓았습니다. 티스토리 관리자 > 꾸미기 > 스킨 편집에서 애드센스 설정을 손쉽게 할 수 있습니다. 자신의 애드센스 ID와 광고 SLOT를 넣고, 아래 라디오 버튼으로 제어하시면 됩니다.

 

AdSense 설정 팁

• Client ID만 먼저 넣고, 영역별 *_show를 하나씩 켜며 레이아웃 확인
• 인피드 광고는 간격 변수로 노출 밀도를 조절 (예: 3 → 5)
• 과도한 광고는 체류시간/가독성을 저하시킬 수 있으니 단계적으로 적용

 

스킨 설정만으로 즉시 바뀝니다.
설치뒤에는 콘텐츠 제작에만 집중하세요

 

 

 커스터마이징(주요 변수) 

• 레이아웃
  • 본문 가로 크기
  • 사이드바 가로 크기
  • 본문·사이드바 간격
  • 사이드바 위젯 간격
  • 기본 글꼴
  • 본문 글자 크기
• 헤더
  • 헤더 배너 사용 여부
  • 헤더 배경 이미지 교체
• 메뉴
  • 메뉴 사용 여부
  • 메뉴 카테고리 사용 여부
  • 메뉴 카테고리 확장 크기
• 목록/커버
  • Type1/2/3 선택
• 사이드바
  • 사이드바 오른쪽 표시 여부
  • 프로필 이미지 둥글게 여부
• 광고
  • 메인 / 본문 / 사이드바 / 인피드 / 멀티플렉스 제어

 

 

FAQ

Q. 커버 타입은 어떻게 바꾸나요?
A. 스킨편집에서 cover_type을 Type1/2/3 중 선택하세요. 슬라이드(커버 Type4)는 커버 그룹 섹션에서 사용합니다.

Q. 사이드바를 오른쪽으로 옮길 수 있나요?
A. 스킨편집에서 "사이드바 오른쪽" 기능을 활성화하면 됩니다.

Q. 헤더를 없앨 수 있나요?
A. 스킨편집에서 헤더 배너 사용을 미사용으로 체크해 주시면 헤더 이미지 없이, 로고만 간략히 표기됩니다.

 

---

 

 스킨 설치 방법 

1. 스킨을 설치하기 전에, 기존 스킨의 헤더에 구글·네이버 등 검색 노출에 필요한 메타 태그가 적용되어 있지 않은지 반드시 확인해 주세요. 메타 태그는 티스토리 플러그인에서 관리하는 것이 가장 안전합니다. 이렇게 설정하면 스킨을 변경하더라도 메타 태그가 유실되지 않아 안정적으로 유지할 수 있습니다.

 

2. 사용할 스킨을 등록해야겠죠? 티스토리 관리자 > 꾸미기 > 스킨 변경 > 스킨 목록에서 "스킨 보관함"을 클릭합니다.

 

3. 스킨 등록에서 "추가"를 누르고, ZIP 파일 압축해제하여 나온 파일들을 모두 업로드(images 폴더의 파일 포함) 하고 저장을 누릅니다. 이후 스킨 이름을 설정하시고, 확인 버튼 클릭ㅎ

 

• index.xml — 스킨 정보/변수/커버 정의
• skin.html — 스킨 구조
• style.css — 스킨 스타일
• images/ — 코드블록 스크립트, 대체 이미지 등

4. 이런 팝업창이 나오면 스킨명을 입력하고 확인 버튼을 클릭해 주세요.

 

5. 이후 스킨 목록에서 "스킨 보관함"을 클릭해 주세요.

 

6. 등록한 스킨이 있을 텐데 이걸 적용해 주시면 됩니다.