같은 질문에 계속 올라가서 대응 차원에서 안내를 합니다.

작성일자 기준의 레퍼런스 스킨 중 북클럽 스킨에 대한 안내이며, 이후 스킨이 패치된 경우 내용이 다소 다를 수 있습니다.

작성일자 _2022.01.19

스킨은 배포한 해당 제작자에게 문의를 해야 하며, 공식 레퍼런스 스킨은 티스토리에 문의를 해야 합니다.
레퍼런스 스킨이나 다른 제작자가 배포하는 스킨과 관련한 질문은 받지 않습니다.
같은 질문이 자꾸 올라가서 중복 댓글 방지를 위해 썸네일 이미지 설정을 바꾸는 방법을 안내합니다.

북클럽 스킨의 썸네일 이미지의 기본 구조

티스토리에서 공식 스킨으로 배포하는 스킨들 중 2020년 겨울부터 배포하는 최근 스킨들은 일부를 제외하고는 모두 같은 구조로 제작된(같은 디자이너로 추정) 스킨입니다.

북클럽 스킨 외에 다른 레퍼런스 스킨들도 비슷한 방법으로 조정을 할 수 있습니다.

북클럽 스킨은 썸네일 이미지 표시 방식이 스킨 컨셉에 맞춰 다소 인위적인 방식으로 썸네일 배치를 한 스킨입니다.

썸네일 표시에 필요 없는 불필요한 리소스를 가져와서 인위적으로 정렬을 맞추는 방식이어서 검색 최적화(SEO)에 좋지 않고, 사용자가 스킨을 커스터마이징을 하기가 좀 불편합니다.

북클럽 스킨의 글목록 썸네일 이미지는 다음과 같이 표현됩니다.

실제 생성된 썸네일 이미지는 주황색 테두리 크기이고(위 아래 25%씩은 보이지 않음), 보라색 영역 크기만큼만 보이도록 뷰포트 설정을 한 후, 세로로 긴 썸네일 이미지를 수직 방향으로 센터링을 해서 표시합니다.

실제 썸네일 이미지는 세로로 긴 이미지이고, 최종 생성된 썸네일 이미지의 반만 표시됩니다.

뒤에서 자세히 설명 하지만, 가로로 긴 일반적인 이미지 표현에는 적합하지 않은 방식입니다.

북클럽 스킨의 기본 썸네일 코드는 다음과 같습니다.

가로 230px, 세로 300px로 세로로 긴 썸네일 이미지 크기로 고정( C230x300 )되어 있습니다.

<img src="//i1.daumcdn.net/thumb/C230x300/?fname=[##_article_rep_thumbnail_raw_url_##]" alt="">

그리고 생성된 이미지는 CSS를 사용해서 수직방향으로 센터링을 해서 가운데 부분만 보이도록 합니다.

썸네일 이미지를 담는 상위 HTML 태그에는 넘치는 비트맵 이미지를 보이지 않도록 감추는 속성이 부여되어 있습니다.(아래 CSS의 "overflow: hidden" 속성이 해당)

이런 방식을 사용해서 수직 방향 센터링으로 이미지를 보정하는 방식은 잘 사용하지 않습니다. 조금 신기한 방식입니다.

클래스의 속성들중 다른 것은 필요 없고 핵심은 "padding-bottom" 속성입니다.

이 속성으로 내부의 세로로 긴 썸네일 이미지를 위로 밀어내서 수직 방향으로 센터링을 합니다.

.post-item .thum {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 0;
    margin-bottom: 5px;
    padding-bottom: 60.869565217391304%;
    background-color: #f8f8f8;
}

* 위의 CSS 코드는 몰라도 됩니다. 밑에서 썸네일을 조정하면서 삭제하는 속성들이 있기 때문에 이런 CSS 클래스가 사용되었다는 것을 알려주기 위해서 스킨 CSS에서 가져온 것이고 행수와 속성 이름만 찾을 수 있으면 됩니다. 이해 안 되면 밑의 설명을 죽죽 읽어가면서 넘어가면 됩니다.

"padding-bottom" 속성에 표시한 "60.869565217391304%" 퍼센트 값의 복잡함 때문에 이게 무슨 대단히 복잡한 계산의 결과인 것처럼 보이는데 실상 그런 것은 아니고, 생성된 비트맵 이미지의 너비가 230px이기 때문에 썸네일 이미지를 감싸는 상위 요소의 너비도 230px(100%)가 되고, 의도한 썸네일 표시 높이가 "140px" 이기 때문에 140px/230px를 한 비율이 대략 60%인 소수점 결과가 됩니다.

썸네일 이미지를 감싼 요소의 안쪽 밑에 패딩 여백을 부여해서 강제로 썸네일 영역의 높이를 부여하는 것이고, 너비 230px 대비로 60%쯤이 높이 140px가 되니까 계산 결괏값을 그대로 표시한 것입니다.

요지는 230px x 140px 영역 안에 썸네일 이미지를 표시하고 나머지 남는 아래의 썸네일 이미지 영역은 안보이게 됩니다.

세로로 긴 썸네일 이미지를 뷰포트 영역 안에 표시하면 썸네일 이미지의 윗부분이 뷰포트 상단에 걸치기 때문에 썸네일 이미지의 밑 부분이 잘려서 보이지 않게 됩니다.

위의 CSS만 적용하면 다음과 같이 이미지가 위치하게 됩니다.

그래서 썸네일 이미지를 위쪽으로 약간 강제로 이동 시켜서 위아래가 같게 잘려 나가도록 합니다.

다음 CSS를 이용해서 "transform" 속성으로 이미지를 25% 위로 밀어 올립니다.

CSS 속성 값에 대해서는 몰라도 됩니다. 어쨋든 이미지를 25% 밀어 올려서 썸네일의 위쪽 25%와 밑쪽 25% 영역이 보이지 않게 되도록 배치를 하는 속성이라는 것만 알 면 됩니다.

.post-item .thum img {
    width: 100%;
    height: auto;
    transform: translateY(-25%);
    /* -webkit-transform: translateY(-25%); */
    /* -ms-transform: translateY(-25%); */
}

이렇게 해서 맨 위의 캡처 이미지처럼 위아래가 25%씩 보이지 않는 230px x 140px 썸네일이 보이게 됩니다.

왜 이렇게 절반만 표시할 세로로 긴 썸네일을 생성하는지는 제작자의 의도이기 때문에 알 수는 없습니다.

다만 이런 썸네일 표시 방식은 일반적인 가로로 긴 블로그 이미지 썸네일을 표시하는 데는 적합하지 않습니다.

보통 블로그에 사용하는 이미지는 3x2 비율인 이미지가 가장 많고, 최대한 이미지의 많은 부분이 썸네일로 표시되는 것을 원하는데 북클럽 스킨은 이런 대부분 블로거들의 의도와는 맞지 않는 썸네일을 보여줍니다.

3x2 비율인 이미지를 썸네일 이미지로 표시하면 대충 다음과 같이 썸네일 이미지가 표시됩니다.

먼저 주황색 사각형 영역만큼 잘라서 썸네일을 230x300 크기로 생성하고, CSS로 보라색 영역만 보이게 수직 센터링을 합니다.

그래서 전체 이미지에서 썸네일로 보이는 부분은 가운데 보라색 영역만이 됩니다.

대부분 블로거가 원하는 것은 왼쪽 같은 썸네일일 텐데, 실제로는 오른쪽과 같은 썸네일이 표시되게 됩니다.

가로형 이미지인 경우 북클럽 스킨에서는 대략 이미지 면적의 1/4만 썸네일로 표시되게 됩니다.

아마도 북클럽이라는 컨셉에 맞춰서 세로로 긴 책 커버 이미지를 표시하는 것을 전제로 썸네일을 이렇게 세로로 긴 것을 생성해서 강제로 센터링을 하려고 했던 것 같습니다.

구조를 알았으므로 원하는 의도대로 썸네일을 조정해보겠습니다.

먼저 썸네일 이미지를 감싼 HTML 요소에 적용한 CSS 속성 2개를 지워야 합니다.위에서 소개한 맨 처음 CSS에서 "height", "padding-bottom" 속성 2개를 지웁니다.불안하면 속성 앞 뒤에 "/*"과 "*/" 를 붙여서 주석 처리를 해도 됩니다.

스킨 원본 기준 style.css 파일의 1147행이 해당 클래스입니다. 변경한 CSS는 다음과 같이 됩니다.

.post-item .thum {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    margin-bottom: 5px;
    background-color: #f8f8f8;
}

CSS를 적용하면 썸네일 이미지가 다음과 같이 보이게 됩니다.

썸네일 이미지를 25% 위로 밀어 올렸기 때문에 밑 부분에 공백이 보이지만, 세로로 긴 썸네일 이미지 영역이 온전히 표시됩니다.

이제 두 번째 썸네일 이미지 CSS에서 25% 밀어 올리는 속성을 제거합니다.

원본 소스 기준 style.css 1157행이 해당됩니다.

.post-item .thum img {
    width: 100%;
    height: auto;
}

"transform" 이 붙은 속성 3개를 모두 지우면 됩니다. 브라우저 호환성 때문에 여러 개가 표시했지만, 모두 같은 속성 중복입니다.

CSS를 적용하면 다음처럼 온전하게 위치한 세로로 긴 썸네일이 표시됩니다.

복잡한 속성 설정 없이 썸네일 이미지가 1:1로 그대로 보이므로 썸네일 이미지 크기만 조절하면 됩니다.

썸네일 크기를 정하는 값은 맨 위에 있는 HTML 태그에서 "C230x300" 값이 해당됩니다.

<img src="//i1.daumcdn.net/thumb/C230x300/?fname=[##_article_rep_thumbnail_raw_url_##]" alt="">

썸네일 크기를 정하는 기준 및 썸네일 크기 설정 방법은 다음 글을 참조하면 됩니다.

> 티스토리 이미지 썸네일 치환자 완벽정리

글 목록 썸네일의 HTML 태그 위치는 스킨 원본 기준 skin.html 파일의 392행입니다.

"C230x300을" "C230x140"으로 변경한 후 적용합니다.

다음과 같이 전체 이미지가 모두 보이는 썸네일이 표시됩니다.

"C230x230" 으로 변경하면 정사각형 썸네일이 표시됩니다.

수정한 예제에 해당하는 것은 글 목록에 표시하는 썸네일만입니다.

커버 페이지를 생성해서 사용하는 경우 커버 페이지 구성에 사용한 커버 아이템들의 썸네일들도 같은 방식으로 수정해야 합니다.

북클럽 스킨에는 공통적으로 모두 세로로 긴 썸네일 이미지를 사용하고 있기 때문에 세로로 긴 이미지를 썸네일로 생성하는 컨텐츠(북 컨텐츠)를 게시하는 블로그에 적합한 스킨입니다.

디자인적으로는 예쁘지만, 여러모로 사용하기에는 제약이 있는 스킨이라는 점을 알고 용도에 맞춰 사용하는 것을 추천합니다.