티스토리 스킨 편집만으로 블로그를 감성적으로 바꿀 수 있습니다. 이 글에서는 보랏빛 파스텔 테마를 예시로, 배경·버튼·카드·파티클·텍스트 선택 효과까지 하나씩 적용하는 방법을 정리합니다.
적용 위치 안내
구분 경로
| HTML | 블로그 관리 → 꾸미기 → 스킨 편집 → HTML 편집 → <body> 태그 위에 삽입 |
| CSS | 같은 편집 화면의 CSS 탭 → 기존 코드 맨 아래에 추가 |
⚠️ 수정 전 반드시 기존 코드를 백업해 두세요. 메모장에 복사해두면 충분합니다.
전체 적용 구조
코드를 어디에 넣어야 하는지 한눈에 보면 이렇습니다.
블로그 관리 페이지
└─ 꾸미기 → 스킨 편집 → HTML 편집
├─ [HTML 탭] ─── <body> 태그 위에 삽입
│ └─ 파티클 스크립트 (JavaScript)
│
└─ [CSS 탭] ─── 기존 코드 맨 아래에 추가
├─ 도트 패턴 배경
├─ 파스텔 보라 버튼
├─ 카드형 게시글
├─ 파티클 모양 정의
└─ 텍스트 선택 하이라이트
1. 배경 디자인 — 도트 패턴 배경
어떤 효과인가요?
순백색 배경 대신 연한 보랏빛 도트가 일정 간격으로 반복되는 패턴 배경을 적용합니다. 은은하면서도 밋밋하지 않은 분위기를 만들어 줍니다.
효과 미리보기
핵심 개념
- radial-gradient : CSS 그라데이션 함수 중 하나로, 원형 그라데이션을 만듭니다. 여기서는 작은 원(1.5px)을 찍고 나머지를 투명하게 처리해 "점" 하나를 만듭니다.
- background-size : 이 점이 반복되는 간격을 결정합니다. 30px 30px이면 가로·세로 30px마다 점이 하나씩 찍힙니다.
- !important : 티스토리 기본 스킨 스타일보다 우선 적용되도록 강제하는 선언입니다.
적용 코드 (CSS)
body {
background-color: #fcfaff !important;
background-image: radial-gradient(#ddd6fe 1.5px, transparent 1.5px) !important;
background-size: 30px 30px !important;
font-family: 'Pretendard', sans-serif !important;
}
커스터마이징 팁
항목 변경 방법 예시
| 점 색상 | #ddd6fe → 원하는 색상 코드로 변경 | 핑크: #fecdd3, 민트: #a7f3d0 |
| 점 크기 | 1.5px 값을 키우면 점이 커짐 | 큰 점: 3px, 작은 점: 1px |
| 점 간격 | 30px 30px 값을 키우면 간격이 넓어짐 | 촘촘: 20px, 넓게: 50px |
| 배경색 | #fcfaff → 원하는 베이스 색상으로 변경 | 핑크: #fff1f2, 민트: #f0fdf4 |
2. 버튼 스타일링 — 파스텔 보라 버튼
어떤 효과인가요?
티스토리 상단의 글쓰기, 관리 버튼 등 주요 버튼을 반투명 보라색 스타일로 통일합니다. 호버 시 살짝 위로 떠오르는 마이크로 인터랙션도 포함됩니다.
효과 미리보기 — Before / After
핵심 개념
- rgba() : 색상에 투명도(Alpha)를 부여하는 함수입니다. rgba(167, 139, 250, 0.15)는 보라색을 15% 불투명도로 적용한다는 뜻입니다.
- transition : 상태 변화(호버 등)가 일어날 때 부드럽게 전환되도록 하는 속성입니다. all 0.2s ease는 모든 속성을 0.2초에 걸쳐 변환합니다.
- transform: translateY(-1px) : 호버 시 요소를 위로 1px 이동시켜 "살짝 뜨는" 느낌을 줍니다.
rgba 투명도 시각화
rgba(167, 139, 250, ?) ← 마지막 값이 투명도
0.05 ░░░░░░░░░░ 거의 투명
0.15 ▒▒░░░░░░░░ 기본 상태 ◀
0.25 ▓▒▒░░░░░░░ 호버 상태 ◀
0.50 ████▓░░░░░ 반투명
1.00 ██████████ 완전 불투명
적용 코드 (CSS)
/* 주요 버튼 기본 스타일 */
#header .write, #header .admin, .read-more, .btn-primary, .btn_post_manage {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 34px !important;
padding: 0 18px !important;
background: rgba(167, 139, 250, 0.15) !important;
color: #7c3aed !important;
font-size: 13px !important;
font-weight: 600 !important;
border-radius: 10px !important;
border: 1px solid rgba(167, 139, 250, 0.3) !important;
transition: all 0.2s ease !important;
line-height: 1 !important;
vertical-align: middle !important;
}
/* 호버 효과 */
#header .write:hover, #header .admin:hover {
background: rgba(167, 139, 250, 0.25) !important;
transform: translateY(-1px);
}
커스터마이징 팁
- 버튼 색상을 바꾸려면 rgba() 안의 RGB 값(167, 139, 250)을 변경하세요.
- border-radius 값을 키우면 더 둥글어지고, 줄이면 각진 버튼이 됩니다.
- 호버 시 더 많이 떠오르게 하려면 translateY(-1px)을 translateY(-3px) 등으로 변경하세요.
3. 카드형 게시글 레이아웃
어떤 효과인가요?
메인 페이지의 각 게시글을 둥근 모서리의 카드 형태로 표시합니다. 마우스를 올리면 카드가 위로 살짝 떠오르면서 보라색 그림자가 나타나는 효과입니다.
효과 미리보기 — Default vs Hover
핵심 개념
- border-radius: 20px : 모서리를 둥글게 만듭니다. 값이 클수록 더 둥글어집니다.
- box-shadow : 요소 주위에 그림자를 추가합니다. 호버 시에만 보라색 그림자를 보여줘서 깊이감을 표현합니다.
- transform: translateY(-6px) : 호버 시 카드를 위로 6px 이동시켜 "카드가 떠오르는" 느낌을 줍니다.
- transition: all 0.4s ease : 떠오르는 동작이 0.4초에 걸쳐 부드럽게 일어나도록 합니다.
box-shadow 값 분석
box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.08);
│ │ │ │ │ │
│ │ │ │ │ └─ 투명도 8% (은은하게)
│ │ │ │ └─ 보라색 계열
│ │ │ └─ spread: -5px (그림자 약간 축소)
│ │ └─ blur: 25px (부드러운 번짐)
│ └─ Y축: 20px (아래로 그림자)
└─ X축: 0 (좌우 없음)
적용 코드 (CSS)
/* 카드 기본 스타일 */
.post-item, .list-row, article {
background: rgba(255, 255, 255, 0.9) !important;
border: 1px solid rgba(226, 232, 240, 0.8) !important;
border-radius: 20px !important;
padding: 28px !important;
margin-bottom: 28px !important;
transition: all 0.4s ease !important;
}
/* 호버 시 떠오르는 효과 */
.post-item:hover {
transform: translateY(-6px) !important;
box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.08) !important;
border-color: rgba(167, 139, 250, 0.3) !important;
}
커스터마이징 팁
- 카드가 너무 많이 떠오른다면 translateY(-6px) 값을 줄이세요 (-3px 등).
- 그림자 색상을 바꾸려면 box-shadow의 rgba() 값을 변경하세요.
- background의 마지막 값 0.9가 투명도입니다. 1이면 완전 불투명, 0에 가까울수록 투명해집니다.
4. 인터랙티브 요소 — 마우스 파티클 효과
어떤 효과인가요?
마우스를 움직일 때마다 커서 위치에서 작은 보라색 점이 생성되고 흩어지면서 사라지는 효과입니다. 블로그에 생동감을 더해줍니다.
효과 미리보기
마우스를 움직여 보세요
모바일은 터치 후 드래그
particles: 0
핵심 개념
- mousemove 이벤트 : 마우스가 움직일 때마다 발생하는 브라우저 이벤트입니다. 이 이벤트를 감지해서 파티클을 생성합니다.
- document.createElement('div') : JavaScript로 새로운 HTML 요소를 동적으로 생성합니다. 마우스가 움직일 때마다 작은 div(점)를 하나씩 만듭니다.
- Web Animations API (element.animate) : CSS 애니메이션을 JavaScript에서 직접 제어하는 API입니다. @keyframes를 CSS에 따로 작성할 필요 없이 코드 안에서 애니메이션을 정의할 수 있어 관리가 편합니다.
- setTimeout + remove() : 애니메이션이 끝난 뒤(800ms) 생성된 요소를 DOM에서 제거합니다. 이렇게 하지 않으면 요소가 계속 쌓여 성능이 저하됩니다.
코드 동작 흐름
마우스 이동
│
▼
mousemove 이벤트 발생
│
▼
div 요소 생성 ──────────── class: "grape-particle"
│ (CSS에서 모양 정의: 5px 보라 원)
▼
마우스 좌표(clientX, Y)에 배치
│
▼
랜덤 방향 계산 ────────── (Math.random() - 0.5) × 60
│ → -30px ~ +30px 사이 랜덤값
▼
Web Animations API 실행
│ 시작: scale(1), opacity 0.8
│ 종료: scale(0), opacity 0 ← 작아지면서 투명해짐
│ 시간: 800ms
▼
setTimeout(800ms) 후 요소 삭제 ← 메모리 누수 방지!
파티클 흩어지는 범위 시각화
(Math.random() - 0.5) * 60
-30px
↑
│
-30px ←──── ● ────→ +30px ● = 마우스 위치
│
↓
+30px
값을 키우면 (예: * 120) → 더 넓게 흩어짐
값을 줄이면 (예: * 30) → 커서 주변에 모여서 흩어짐
적용 코드
HTML (<body> 태그 위에 삽입)
<script>
(function() {
document.addEventListener('mousemove', function(e) {
// 1. 파티클(작은 점) 요소 생성
const particle = document.createElement('div');
particle.className = 'grape-particle';
document.body.appendChild(particle);
// 2. 마우스 위치에 배치
particle.style.left = e.clientX + 'px';
particle.style.top = e.clientY + 'px';
// 3. 랜덤 방향으로 흩어지는 값 계산
const moveX = (Math.random() - 0.5) * 60;
const moveY = (Math.random() - 0.5) * 60;
// 4. Web Animations API로 애니메이션 실행
particle.animate([
{ transform: 'translate(0, 0) scale(1)', opacity: 0.8 },
{ transform: `translate(${moveX}px, ${moveY}px) scale(0)`, opacity: 0 }
], {
duration: 800,
easing: 'ease-out',
fill: 'forwards'
});
// 5. 애니메이션 종료 후 요소 제거 (메모리 관리)
setTimeout(() => { particle.remove(); }, 800);
});
})();
</script>
CSS (파티클의 모양 정의)
.grape-particle {
position: fixed;
top: 0;
left: 0;
width: 5px;
height: 5px;
background: #a78bfa;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
opacity: 0.8;
}
CSS 속성별 역할
.grape-particle {
position: fixed; ← 스크롤과 무관하게 화면 고정 위치
top: 0; left: 0; ← JS에서 실제 좌표를 덮어씀
width: 5px; ← 파티클 크기 (가로)
height: 5px; ← 파티클 크기 (세로)
background: #a78bfa; ← 보라색
border-radius: 50%; ← 원형으로 만들기
pointer-events: none; ← 마우스 이벤트 무시 (클릭 방해 X)
z-index: 9999; ← 모든 요소 위에 표시
opacity: 0.8; ← 살짝 투명하게
}
커스터마이징 팁
항목 변경 방법 예시
| 파티클 색상 | CSS의 background: #a78bfa 변경 | 핑크: #f472b6, 민트: #34d399 |
| 파티클 크기 | width, height 값 변경 (기본 5px) | 작게: 3px, 크게: 8px |
| 흩어지는 범위 | * 60 값을 키우면 더 넓게, 줄이면 좁게 | 넓게: * 120, 좁게: * 30 |
| 지속 시간 | duration: 800과 setTimeout의 800을 함께 변경 | 빠르게: 400, 느리게: 1200 |
| 투명도 | opacity: 0.8 값 조정 (0~1) | 진하게: 1.0, 연하게: 0.5 |
성능 관련 참고사항
mousemove는 마우스를 움직이는 동안 초당 수십~수백 회 발생합니다. 파티클이 많이 생성될 수 있으므로, 성능이 걱정된다면 쓰로틀링(throttle) 을 적용하는 것이 좋습니다.
// 쓰로틀링 적용 예시 (30ms 간격으로 제한)
let lastTime = 0;
document.addEventListener('mousemove', function(e) {
const now = Date.now();
if (now - lastTime < 30) return; // 30ms 이내면 무시
lastTime = now;
// 파티클 생성 로직...
});
[쓰로틀링 없이] ●●●●●●●●●●●●●●●● → 1초에 60개+ 생성 (부담)
[30ms 쓰로틀] ● ● ● ● ● ● → 1초에 ~33개 생성 (적당)
[50ms 쓰로틀] ● ● ● ● → 1초에 ~20개 생성 (가벼움)
5. 텍스트 선택 하이라이트
어떤 효과인가요?
블로그 내 텍스트를 드래그해서 선택할 때, 기본 파란색 대신 연보라 배경 + 진보라 글자색으로 표시됩니다. 작은 디테일이지만 테마 통일감에 큰 영향을 줍니다.
핵심 개념
- ::selection : 사용자가 텍스트를 드래그로 선택했을 때의 스타일을 지정하는 CSS 의사 요소(pseudo-element)입니다.
- 별도의 JavaScript 없이 CSS 한 줄로 적용할 수 있어 가장 간단한 커스터마이징 중 하나입니다.
적용 코드 (CSS)
::selection {
background-color: #ede9fe !important;
color: #5b21b6 !important;
}
커스터마이징 팁
- background-color가 선택 영역의 배경색, color가 선택된 글자의 색상입니다.
- 테마 색상과 맞추면 통일감이 살아납니다.
테마별 ::selection 색상 조합 예시
보라 테마: background #ede9fe + color #5b21b6 ◀ 현재 적용
핑크 테마: background #fce7f3 + color #9d174d
민트 테마: background #d1fae5 + color #065f46
블루 테마: background #dbeafe + color #1e40af
전체 코드 요약
<details> <summary>📋 CSS 전체 코드 (클릭해서 펼치기)</summary>
/* 1. 도트 패턴 배경 */
body {
background-color: #fcfaff !important;
background-image: radial-gradient(#ddd6fe 1.5px, transparent 1.5px) !important;
background-size: 30px 30px !important;
font-family: 'Pretendard', sans-serif !important;
}
/* 2. 파스텔 보라 버튼 */
#header .write, #header .admin, .read-more, .btn-primary, .btn_post_manage {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 34px !important;
padding: 0 18px !important;
background: rgba(167, 139, 250, 0.15) !important;
color: #7c3aed !important;
font-size: 13px !important;
font-weight: 600 !important;
border-radius: 10px !important;
border: 1px solid rgba(167, 139, 250, 0.3) !important;
transition: all 0.2s ease !important;
line-height: 1 !important;
vertical-align: middle !important;
}
#header .write:hover, #header .admin:hover {
background: rgba(167, 139, 250, 0.25) !important;
transform: translateY(-1px);
}
/* 3. 카드형 게시글 */
.post-item, .list-row, article {
background: rgba(255, 255, 255, 0.9) !important;
border: 1px solid rgba(226, 232, 240, 0.8) !important;
border-radius: 20px !important;
padding: 28px !important;
margin-bottom: 28px !important;
transition: all 0.4s ease !important;
}
.post-item:hover {
transform: translateY(-6px) !important;
box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.08) !important;
border-color: rgba(167, 139, 250, 0.3) !important;
}
/* 4. 마우스 파티클 */
.grape-particle {
position: fixed;
top: 0; left: 0;
width: 5px; height: 5px;
background: #a78bfa;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
opacity: 0.8;
}
/* 5. 텍스트 선택 하이라이트 */
::selection {
background-color: #ede9fe !important;
color: #5b21b6 !important;
}
</details> <details> <summary>📋 HTML (파티클 스크립트) 전체 코드 (클릭해서 펼치기)</summary>
<script>
(function() {
document.addEventListener('mousemove', function(e) {
const particle = document.createElement('div');
particle.className = 'grape-particle';
document.body.appendChild(particle);
particle.style.left = e.clientX + 'px';
particle.style.top = e.clientY + 'px';
const moveX = (Math.random() - 0.5) * 60;
const moveY = (Math.random() - 0.5) * 60;
particle.animate([
{ transform: 'translate(0, 0) scale(1)', opacity: 0.8 },
{ transform: `translate(${moveX}px, ${moveY}px) scale(0)`, opacity: 0 }
], {
duration: 800,
easing: 'ease-out',
fill: 'forwards'
});
setTimeout(() => { particle.remove(); }, 800);
});
})();
</script>
</details>
마무리
이 가이드에서 사용한 기법을 정리하면 다음과 같습니다.
기법 사용 목적 난이도
| radial-gradient | 반복 패턴 배경 생성 | ⭐ |
| rgba() + !important | 티스토리 기본 스타일 위에 반투명 색상 덮어쓰기 | ⭐ |
| ::selection | 텍스트 선택 시 테마 색상 적용 | ⭐ |
| transition + transform | 호버 시 부드러운 마이크로 인터랙션 | ⭐⭐ |
| Web Animations API | JavaScript로 파티클 애니메이션 제어 | ⭐⭐⭐ |
색상 코드만 바꿔도 보라 테마 → 핑크, 민트, 블루 등 자신만의 테마로 변환할 수 있습니다.
위 코드를 기반으로 자유롭게 커스터마이징해 보세요!