티스토리 ‘프라치노 공간’ 스킨 수정하기 - 테마에 맞춘 커버 이미지 자연스럽게 처리하기

‘프라치노 공간’ 스킨을 사용하다 보면 가장 먼저 고민하게 되는 부분 중 하나가 바로 대표 커버 이미지를 어떻게 보여줄 것인가다. 다행히 이 스킨은 전문적인 지식 없이도 스킨 편집 기능을 통해 커버 영역을 간편하게 설정할 수 있도록 잘 구성되어 있다.

그중에서도 가장 자주 사용하는 방식은 전체 화면 배경으로 이미지를 표시하는 모드다. 이 모드는 단번에 “와, 시원하다”는 인상을 줄 만큼 시각적인 임팩트가 강하지만, 실제로 적용해보면 약간의 아쉬움이 남는다. 이미지가 너무 커서 콘텐츠와의 연결이 어색하거나, 상하단이 뚝 끊긴 듯한 느낌을 주기 때문이다.

그러던 중 문득 유튜브 뮤직의 인터페이스가 떠올랐다. 거기선 상단 썸네일이 크지 않으면서도 시각적인 포인트는 확실히 살리고, 아래쪽 콘텐츠와도 자연스럽게 이어지는 ‘마스크 처리’가 적용되어 있었다.

이걸 보고 힌트를 얻어, 나도 ‘프라치노 공간’ 스킨에서 커버 이미지의 높이를 줄이고, 하단에 부드러운 그라데이션 마스크 효과를 추가해보기로 했다. 이렇게 하면 상단 썸네일은 시선을 끌되, 하단 콘텐츠로 부드럽게 이어지며 전체적인 조화감을 높일 수 있지 않을까 싶었다.

실제로 아래의 CSS 코드를 적용해보니, 커버 이미지는 화면 절반만 보이도록 조정되었고, 하단으로 갈수록 점점 사라지는 듯한 부드러운 효과가 더해졌다. 덕분에 썸네일과 본문 사이가 자연스럽게 이어지면서, 콘텐츠 자체에 시선을 더 집중시킬 수 있게 되었다.

또한 낮/노을/밤 테마에 따라 배경색을 다르게 지정해주면, 전체 분위기와도 훨씬 잘 어울리는 결과를 얻을 수 있었다. 생각보다 간단한 수정이었지만, 효과는 꽤 만족스러웠다. 커버 이미지의 과한 존재감을 줄이면서도 시각적인 포인트는 살리고 싶다면, 이 방식도 한번쯤 시도해볼 만하지 않을까 싶다.

CSS

/* ✅ 썸네일을 화면 절반만 보이도록 + 기본 위치 조정 */
.page-cover .parent-page-cover {
  height: 50vh !important;
  overflow: hidden !important;
  position: relative !important;
  background-size: cover !important;
  background-position: center center !important;
  background-color: var(--header-blend-color);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ✅ 테마별 컬러 정의 */
:root {
  --header-blend-color: #ffffff; /* 낮 테마 */
}

html.dawn {
  --header-blend-color: #e3d9cc; /* 노을 테마 */
}

html.night {
  --header-blend-color: #111111; /* 밤 테마 */
}