블로그 카테고리 페이지의 심미성과 사용자 경험(UX)을 높이는 4가지 반응형 디자인 스타일을 하나의 완성된 HTML 코드로 제공합니다. 썸네일, 텍스트 배치, 반응형 레이아웃이 통합된 이 코드 템플릿은 블로그 운영자가 콘텐츠 클릭률과 체류 시간을 높이는 데 최적화되어 있습니다.
카테고리 페이지는 블로그의 첫인상을 결정짓는 핵심 요소입니다. 특히 콘텐츠 중심 플랫폼에서는 카테고리의 구조와 디자인만으로도 방문자의 클릭률과 체류 시간을 좌우할 수 있습니다. 이번 포스트에서는 심미성, UX(사용자 경험), 모바일 대응성을 모두 갖춘 이쁜 4가지 스타일의 카테고리 디자인을 소개하고, 바로 활용 가능한 HTML 코드 템플릿을 함께 제공합니다.
반응형 블로그 카테고리 디자인의 핵심 요소와 구조
카테고리 디자인의 핵심 요소
카테고리 페이지는 독자에게 콘텐츠 흐름을 안내하는 네비게이션 허브이자, 전체 블로그 브랜딩을 완성하는 시각적 요소입니다. 핵심적인 디자인 요소는 다음과 같습니다:
- 썸네일 이미지와 텍스트의 균형감 있는 배치
- PC/모바일 모두 대응 가능한 반응형 구조
- 카테고리명, 발행일, 요약 설명 등의 정보 전달
통합 CSS 코드 (CSS 충돌 방지용 my-cat- 접두사 적용)
아래 코드는 4가지 스타일을 모두 구현하기 위한 공통 스타일과 반응형 미디어 쿼리가 포함된 전체 CSS 코드입니다. 이 코드를 블로그 스킨의 CSS 편집 영역에 삽입하여 사용합니다.
/* CSS 변수 설정 */
:root {
--my-cat-primary: #FF5E5B;
--my-cat-secondary: #00CECB;
--my-cat-dark: #2D3047;
--my-cat-light: #F5F5F5;
--my-cat-gray: #939393;
--my-cat-white: #FFFFFF;
}
.my-cat-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
font-family: 'Noto Sans KR', sans-serif;
}
.my-cat-item {
margin-bottom: 3rem;
position: relative;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.4s, box-shadow 0.4s;
background-color: var(--my-cat-white);
}
.my-cat-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.my-cat-item a {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
}
.my-cat-thum {
overflow: hidden;
}
.my-cat-thum img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
transition: transform 0.5s;
display: block;
}
.my-cat-item:hover .my-cat-thum img {
transform: scale(1.03);
}
.my-cat-title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 0.8rem;
line-height: 1.3;
color: var(--my-cat-dark);
}
.my-cat-excerpt {
font-size: 1rem;
color: var(--my-cat-gray);
line-height: 1.6;
margin-bottom: 1.2rem;
}
.my-cat-category {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 1px;
color: var(--my-cat-primary);
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.my-cat-meta {
font-size: 0.9rem;
color: var(--my-cat-gray);
}
.my-cat-date {
display: inline-block;
margin-top: 5px;
}
.my-cat-style-overlay {
position: relative;
height: 500px;
overflow: hidden;
}
.my-cat-full-image {
height: 100%;
position: relative;
}
.my-cat-overlay-text {
position: absolute;
bottom: 0;
padding: 2.5rem;
width: 100%;
color: white;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
z-index: 2;
}
.my-cat-style-overlay .my-cat-title {
color: white;
font-size: 2.2rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.my-cat-style-overlay .my-cat-excerpt {
color: rgba(255,255,255,0.9);
font-size: 1.1rem;
}
.my-cat-top-right {
position: absolute;
top: 1.5rem;
right: 1.5rem;
color: white;
z-index: 10;
text-align: right;
}
.my-cat-top-right .my-cat-category {
color: white;
background-color: rgba(255, 94, 91, 0.8);
padding: 5px 10px;
border-radius: 4px;
}
.my-cat-top-right .my-cat-date {
color: rgba(255,255,255,0.9);
}
.my-cat-style-split .my-cat-split-layout {
display: flex;
height: 400px;
}
.my-cat-style-split .my-cat-text-box {
flex: 1;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.my-cat-style-split .my-cat-thum {
flex: 1;
height: 100%;
}
.my-cat-style-split .my-cat-thum img {
border-radius: 0 12px 12px 0;
height: 100%;
}
.my-cat-style-rightbox {
position: relative;
height: 450px;
}
.my-cat-bg-image {
height: 100%;
position: relative;
}
.my-cat-bg-image img {
border-radius: 12px;
height: 100%;
}
.my-cat-box-text {
position: absolute;
right: 3rem;
top: 50%;
transform: translateY(-50%);
background: rgba(16, 23, 67, 0.9);
padding: 2rem;
width: 40%;
color: white;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
z-index: 10;
}
.my-cat-white-text {
color: white;
}
.my-cat-style-grid {
padding: 3rem;
text-align: center;
}
.my-cat-text-center {
text-align: center;
}
.my-cat-image-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin: 2rem 0;
}
.my-cat-style-grid .my-cat-meta {
margin-top: 1rem;
text-align: center;
}
.my-cat-style-grid .my-cat-image-grid img {
height: 225px;
border-radius: 8px;
}
@media (max-width: 768px) {
.my-cat-container {
padding: 1rem;
}
.my-cat-item {
margin-bottom: 2rem;
}
.my-cat-title {
font-size: 1.5rem;
}
.my-cat-style-split .my-cat-split-layout {
flex-direction: column;
height: auto;
}
.my-cat-style-split .my-cat-thum {
order: -1;
}
.my-cat-style-split .my-cat-thum img {
border-radius: 12px 12px 0 0;
height: 250px;
}
.my-cat-style-rightbox {
height: auto;
}
.my-cat-bg-image img {
height: 300px;
}
.my-cat-box-text {
width: 90%;
right: 5%;
position: relative;
top: 0;
transform: none;
margin: -50px auto 20px;
background: rgba(16, 23, 67, 0.95);
}
.my-cat-image-grid {
grid-template-columns: 1fr;
}
.my-cat-style-overlay, .my-cat-style-rightbox {
height: 350px;
}
.my-cat-overlay-text {
padding: 1.5rem;
}
.my-cat-style-overlay .my-cat-title {
font-size: 1.8rem;
}
.my-cat-style-grid {
padding: 2rem 1.5rem;
}
}
@media (max-width: 480px) {
.my-cat-container {
padding: 0.5rem;
}
.my-cat-style-overlay, .my-cat-style-rightbox {
height: 300px;
}
.my-cat-style-overlay .my-cat-title {
font-size: 1.5rem;
}
.my-cat-box-text {
width: 95%;
right: 2.5%;
padding: 1.5rem;
}
}
Q1: 위 HTML/CSS 코드를 티스토리 블로그에 어떻게 적용해야 하나요?
A1: CSS 코드는 스킨 편집의 ‘CSS’ 영역 가장 하단에 추가하고, HTML 코드는 ‘HTML 편집’ 영역 중 카테고리 목록(List Page)을 담당하는 치환자(예: 주변)를 찾아, 샘플 데이터 대신 적절한 티스토리 치환자를 다시 삽입하여 my-cat-item이 반복 출력되도록 수정해야 합니다. 티스토리 치환자를 적절히 활용하는 것이 중요합니다.
Q2: 카테고리 디자인을 수정할 때 모바일 대응(반응형)이 중요한 이유는 무엇인가요?
A2: 현재 대부분의 블로그 트래픽은 모바일 기기에서 발생합니다. 모바일 환경에서 레이아웃이 깨지면 사용자 경험(UX)이 저하되고, 이탈률 증가 및 SEO 점수 하락으로 이어집니다. 제공된 코드에는 @media (max-width: 768px) 쿼리가 포함되어 모바일 환경에 최적화되도록 구성되어 있습니다.
Q3: 썸네일 이미지의 크기와 비율을 고정하는 것이 중요한가요?
A3: 매우 중요합니다. 썸네일 크기를 고정하거나 object-fit 속성을 사용해야 이미지가 로딩될 때 주변 레이아웃이 밀리는 CLS(Cumulative Layout Shift) 현상을 방지할 수 있습니다. 이는 웹 성능 지표 개선에 필수적이며 시각적 안정성을 확보하는 데 도움을 줍니다.