🎬 미리보기
기본 Odyssey 스킨에 다크 개발자 테마를 적용한 결과입니다.
- 🌑 GitHub Dark 스타일 다크모드
- 📐 3컬럼 듀얼 사이드바 레이아웃
- ✨ 11가지 인터랙티브 이펙트
- 🐧🐸 화면을 돌아다니는 마스코트 2마리
✅ 주요 기능
🎨 다크모드 테마
- GitHub Dark 컬러 (#0d1117 배경)
- JetBrains Mono 개발자 폰트
- CSS 변수 기반으로 커스터마이징 쉬움
- 글 상세 페이지 완전 다크 처리
- VS Code 스타일 하단 상태바 (브랜치, UTF-8, 스크롤 위치, 시계)
- 블로그 제목에 ~/ 터미널 프리픽스 + 타이핑 이펙트
📐 3컬럼 듀얼 사이드바 레이아웃
- 프로필 / 카테고리 / 태그 / 검색 → 왼쪽 사이드바
- 방문자수 / 최근글 / 최근댓글 / 달력 → 오른쪽 사이드바
- 본문 영역 최대 활용
- 모바일에서 자동 1컬럼 반응형 변환
✨ 인터랙티브 이펙트 (11개)
| 🎆 폭죽 | 버튼 클릭, 더블클릭, 코나미코드로 발사 |
| 🖱️ 커스텀 커서 | 초록 dot + ring, 호버 시 시안 변환, 클릭 리플 |
| 🌧️ 매트릭스 레인 | 카타카나 + 코드 문자가 배경에 내려옴 |
| 📊 스크롤 진행바 | 상단에 네온 초록→시안→블루 그라데이션 |
| 🌟 파티클 트레일 | 마우스 뒤에 빛나는 입자가 따라옴 |
| 🚀 로켓 버튼 | 스크롤하면 로켓 등장, 클릭하면 발사 애니메이션! |
| ⌨️ 타이핑 이펙트 | 블로그 제목이 타이핑되듯 나타남 |
| 🔍 글 미리보기 | 글 목록에서 호버 시 미니 프리뷰 팝업 |
| 📜 스크롤 스파이 | 글 목록 순차 페이드인 애니메이션 |
| 💬 토스트 알림 | 웰컴 메시지 + 60초마다 랜덤 개발자 팁 |
| 🎮 코나미 코드 | ↑↑↓↓←→←→BA → 메가 폭죽 30발! |
🐧🐸 화면 돌아다니는 마스코트
- Linux Tux 펭귄 + 개구리왕 2마리
- 화면 전체를 자유롭게 이동 + 발자국 남김
- 6가지 행동: 걷기, 대기, 앉기, 점프, 수다, 잠자기
- 잠들면 💤 이모지가 떠오름
- 서로 가까이 가면 대화 이벤트 발생!
- 클릭 반응 (3번째=점프, 5번째=폭죽!)
📦 설치 방법 (3분 컷)
Step 1: Odyssey 스킨 적용
- 관리자 → 꾸미기 → 스킨 변경
- Odyssey 스킨 선택 → 적용
- (이미 Odyssey를 사용 중이라면 이 단계 건너뛰세요)
Step 2: HTML 교체
- 관리자 → 꾸미기 → 스킨 편집 → HTML 편집 클릭
- HTML 탭 선택
- 기존 내용 전체 선택 (Ctrl+A) → 삭제
- 첨부파일 skin.html 내용을 전체 복사 → 붙여넣기
- 적용 클릭
Step 3: CSS 교체
- 같은 화면에서 CSS 탭 선택
- 기존 내용 전체 선택 (Ctrl+A) → 삭제
- 첨부파일 style.css 내용을 전체 복사 → 붙여넣기
- 적용 클릭
Step 4: 확인
- 블로그 새로고침 (Ctrl+Shift+R)
- 다크 테마가 적용되고 폭죽이 터지면 성공! 🎆
⚠️ 주의: 반드시 Odyssey 스킨이 적용된 상태에서 교체해주세요. 다른 스킨에서는 레이아웃이 깨질 수 있습니다.
⚙️ 커스터마이징
색상 변경
CSS 내의 :root 변수를 수정하면 전체 색상이 한 번에 바뀝니다:
:root {
--bg-primary: #0d1117; /* 메인 배경 */
--bg-secondary: #161b22; /* 카드 배경 */
--accent-green: #39d353; /* 포인트 초록 */
--accent-blue: #58a6ff; /* 링크 파랑 */
--accent-purple: #bc8cff; /* 보라 */
--accent-cyan: #56d4dd; /* 시안 */
}특정 이펙트 끄기
HTML 하단의 <script> 안에서 원하지 않는 이펙트 줄 앞에 // 추가:
// try { initMatrixRain(); } catch(e) {} ← 매트릭스 레인 끄기
// try { initTuxPenguin(); } catch(e) {} ← 마스코트 끄기마스코트 대사 수정
HTML 하단 <script> 안에서 penguinQuotes, frogQuotes 배열을 수정:
var penguinQuotes = ['원하는 대사1', '원하는 대사2', ...];🔧 원상복구
관리자 → 꾸미기 → 스킨 변경 → Odyssey 다시 선택 → 적용
기본 Odyssey 스킨으로 깔끔하게 돌아갑니다.
❓ FAQ
Q: Odyssey 외 다른 스킨에서도 되나요? A: Odyssey 스킨의 HTML 구조에 맞춰 제작되었습니다. 반드시 Odyssey를 먼저 적용한 후 HTML/CSS를 교체해주세요.
Q: 적용했는데 하얀 화면이 나와요 A: HTML 또는 CSS가 일부만 붙여넣어졌을 수 있습니다. Ctrl+A로 전체 선택 → 삭제 → 파일 내용 전체 복사 → 붙여넣기 해주세요.
Q: 코나미 코드가 뭔가요? A: 키보드로 ↑↑↓↓←→←→BA 순서대로 입력하면 메가 폭죽 30발이 터지는 이스터에그입니다!
Q: 성능에 영향이 있나요? A: 파티클 25fps 제한, requestAnimationFrame 사용 등 최적화되어 있어 체감 차이 없습니다.
📋 기술 정보
| 기반 스킨 | 티스토리 Odyssey |
| CSS | 변수 기반 다크 테마 + 3컬럼 flex 레이아웃 |
| JS | 바닐라 JS (외부 라이브러리 없음) |
| 마스코트 | SVG base64 인코딩 |
| 파일 구성 | skin.html + style.css (2개) |
📥 다운로드
아래 첨부파일을 다운로드 받아주세요:
📎 skin.html — 전체 HTML (Odyssey 수정 + JS 이벤트 코드 포함) 📎 style.css — 전체 CSS (Odyssey 기본 CSS + 다크 테마 오버라이드)
📜 라이센스
자유롭게 사용, 수정, 재배포 가능합니다.
공감 & 댓글 한번씩 부탁 드립니다.
사용 시 출처 표기(블로그 링크)를 해주시면 감사하겠습니다!
Made with ❤️ by 강코 | GitHub