티스토리 skin The Night Aesthetics

 

스킨명 : The Night Aesthetics
웹표준 : HTML5 / CSS3 / jQuery 1.11.2
지원 브라우저 : Chrome / Firefox / Safari / Edge (최신 버전 권장)

제작 기간  2025년 10월 ~ 

 

제작 목적
이 스킨은 단순히 블로그를 꾸미기 위해 만든 것이 아닙니다.

'덕질'을 위한 공간을 만들고 싶었고, 동시에 티스토리의 제한된 환경 안에서도 어디까지 구현할 수 있는지 보여주고 싶었습니다.

예전에 여러 개발자분들께 "티스토리에서 이런 구현이 가능할까요?"라고 물어본 적이 있습니다.
돌아온 답변은 대부분 "불가능하다", "안 된다"는 이야기였습니다.

그 말을 듣고 오히려 오기가 생겼습니다.

그래서 이 스킨은 단순한 결과물이 아니라,

"정말 안 되는 걸까?"
"제약 속에서도 새로운 시도를 할 수 있지 않을까?"

라는 질문에서 시작된 프로젝트입니다.

 

 

1.소개

 

밤하늘을 테마로 한 다크 블루 계열 티스토리 스킨입니다. 전체 배경이 짙은 남색으로 구성되어 있고, 별, 달, 구름, 유성이 배경에 흐릅니다. 여기에 마우스 클릭 시 파티클 이펙트까지 더해져서 단순한 블로그라기보다는 하나의 공간처럼 느껴지도록 만드는 게 목표였어요.
레이아웃은 좌측 사이드바 + 우측 본문의 2단 구성이고, 커버(메인) 페이지와 일반 블로그 페이지가 분리되어 있습니다.

 

 

2.기능 

 

(1) SPA — 새로고침 없는 페이지 전환
링크를 클릭해도 페이지 전체가 새로고침되지 않고 콘텐츠만 교체됩니다. 덕분에 배경 이펙트(별, 달, 구름)가 페이지를 이동해도 끊기지 않고 유지됩니다. 직접 구현한 부분이라 가장 공들인 기능 중 하나예요.

 

(2) 배경 이펙트
배경은 세 가지 레이어로 구성됩니다. Vegas.js 슬라이드쇼로 배경 이미지가 Ken Burns 효과와 함께 5초 간격으로 전환되고, 그 위에 CSS로 생성된 별 150개가 반짝입니다. 거기에 구름 15개가 화면을 천천히 가로질러 사라지는데, 크기와 속도가 모두 달라서 원근감이 생깁니다.

 

(3) Three.js 유성 스타필드
Three.js의 CanvasRenderer를 사용해 별 파티클 200개를 z축 방향으로 이동시킵니다. 마치 우주를 날아가는 것 같은 유성 효과인데, 모바일에서는 성능을 위해 자동으로 비활성화됩니다.

 

(4) 마우스 클릭 이펙트
화면 어디서든 클릭하면 그 지점에서 삼각형 파티클 20개와 원형 충격파가 터집니다. anime.js와 Canvas를 조합해서 만들었고, 색상은 스킨의 블루 팔레트와 통일했습니다.

 

(5) 블루아카이브 Spine 캐릭터 — 아로나 / 프라나
사이드바에 블루 아카이브의 아로나와 프라나가 Spine 2D 골격 애니메이션으로 표시됩니다. 단순히 이미지를 띄우는 게 아니라 마우스 커서 위치에 따라 눈과 머리카락이 실시간으로 따라 움직이고, 3~6초 간격으로 자동으로 눈을 깜빡입니다. 캐릭터를 클릭하면 보이스가 재생되고 말풍선 텍스트가 표시됩니다. 버튼으로 아로나와 프라나를 전환할 수도 있어요.

 

 

(6) SVG 캐릭터 — 주문은 토끼입니까?
커버 페이지 우측에는 주문은 토끼입니까?(ご注文はうさぎですか?) 5명 중 한 명이 랜덤으로 표시됩니다. 각 SVG에는 외곽선이 서서히 그려지는 드로잉 애니메이션과 위아래로 부유하는 애니메이션이 적용되어 있어요. 페이지를 열 때마다 다른 캐릭터가 나와서 소소하게 재미있습니다.

 

(7) 방명록 답글 모달
방명록에서 답글 버튼을 누르면 페이지 이동 없이 블러 처리된 모달 창이 열립니다. 작성 후 자동으로 목록이 갱신되고, 모달 바깥을 클릭하면 닫힙니다.

 

(8) 이웃 위젯
사이드바에 이웃 아바타를 16개씩 페이지네이션으로 표시하는 위젯입니다. iframe으로 분리된 별도 HTML 파일로 구현했습니다.

 

 

(9) 배경음악 플레이어
화면 우측 상단에 미니 플레이어가 고정되어 있습니다. 앨범 썸네일, 곡명, 아티스트명이 표시되고 재생/일시정지/반복 버튼으로 조작할 수 있어요. 미니 플레이어의 앨범 아트를 클릭하면 우측에서 풀스크린 플레이어가 슬라이드로 열립니다. 모바일에서는 하단 내비게이션 형태로 표시됩니다.
일반 티스토리 스킨은 링크를 클릭할 때마다 페이지 전체가 새로고침되기 때문에 음악이 그 순간 끊깁니다. 이를 해결하는 방법으로 브라우저 캐시를 이용해 중지된 음악을 이어서 재생하는 방식이 주로 쓰이는데, 이 경우 아주 약간의 공백이 발생합니다.
그래서 스킨 자체를 SPA로 개조하는 방법을 택했습니다. 페이지 이동 시 전체를 새로고침하지 않고 콘텐츠 영역만 AJAX로 교체하는 방식이라, 음악 플레이어가 DOM에서 제거되지 않아 YouTube Music이나 Spotify처럼 완전히 끊김 없이 재생됩니다. 단점은 티스토리 스킨 구조마다 HTML/CSS/JS가 완전히 다르기 때문에 범용적인 가이드가 불가능하고, 각자 스킨에 맞춰 직접 개발해야 한다는 점입니다.