1. 프로젝트 개요
HTML과 CSS만으로 나만의 블로그 UI를 구현했다.
단순한 정적 페이지가 아니라 다음 요소들을 포함하는 구조였다.
- fixed header + sticky sidebar 레이아웃
- CSS Grid 기반 포토 갤러리
- 자동 무한 스크롤 이미지 영역
- 반응형 카드 리스트
- hover 인터랙션
2. 레이아웃 문제: header + sidebar + content 정렬
문제
- sidebar와 main-content 시작 위치가 맞지 않았다.
- sticky를 적용하면 요소가 따로 움직이며 어긋났다.
잘못된 시도
- main-content에 padding-top을 추가해서 억지로 맞췄다.
결과:
- 스크롤 시 상단에 빈 공간이 생겼다.
- 레이아웃이 깨졌다.
해결
핵심 원인:
형제 요소를 각각 보정하려고 해서 레이아웃이 깨졌다.
해결 방법:
- body에서 header 높이만큼 보정
- sidebar는 sticky 기준만 설정
- main-content는 건드리지 않음
body {
padding-top: 8rem;
}
.sidebar {
position: sticky;
top: 10rem;
}
역할 분리:
- body → 전체 위치 보정
- sidebar → 스크롤 시 위치 고정
3. Grid 레이아웃: 포토덤프 구성
문제
- 큰 이미지와 작은 이미지가 섞인 복잡한 포토 레이아웃을 구현해야 했다.
해결 전략
단순 grid가 아니라 명시적 위치 지정 방식을 사용했다.
.photo-grid {
grid-template-columns: repeat(12, 1fr);
}
.photo-grid-item:nth-child(4) {
grid-column: 1 / 9;
grid-row: 2 / 4;
}
핵심:
- 12칸 분할 → 자유로운 비율 조절
- nth-child로 위치 제어
4. 자동 스크롤 구현
문제 1
- 스크롤이 끝난 뒤 빈 공간이 생겼다.
원인
콘텐츠가 1세트뿐인데 translateX(-100%)를 사용했기 때문이다.
해결
- 콘텐츠를 2번 복제
- 이동 거리를 -50%로 조정
@keyframes scroll {
100% {
transform: translateX(-50%);
}
}
핵심 개념:
무한 스크롤 = 콘텐츠 복제 + 절반 이동
문제 2
- 자동 스크롤과 수동 스크롤을 동시에 자연스럽게 구현하기 어려웠다.
원인
transform은 실제 스크롤이 아니라 시각적 이동이기 때문이다.
결론:
- CSS만으로는 완벽한 공존이 어렵다.
- hover 시 애니메이션을 멈추는 UX로 타협했다.
5. 버튼 스타일 적용 안 되는 문제
문제
버튼 스타일이 전혀 적용되지 않았다.
원인
.btn.like
vs
class="btn-like"
클래스 구조가 서로 달랐다.
해결
class="btn like"
CSS는 다중 클래스 방식으로 설계해야 재사용성이 높다.
6. 이미지 크기 문제
문제
화면 크기 변화 시 이미지 비율이 이상하게 변했다.
잘못된 코드
.interest img {
width: 100%;
height: var(--img-sm);
}
문제:
- width는 반응형
- height는 고정
즉, 비율이 깨졌다.
해결
.interest img {
width: 100%;
aspect-ratio: 4 / 4;
height: auto;
object-fit: cover;
}
핵심 개념:
퍼센트를 고정한 것이 아니라, 비율(aspect-ratio)을 고정한 것이다.
7. 반응형 Grid 설계
.interest-grid {
grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 830px) {
.interest-grid {
grid-template-columns: repeat(2, 1fr);
}
}
전략:
- 기본 컬럼 수를 먼저 설계
- 미디어쿼리로 점진적으로 컬럼 수를 줄임
- 카드 구조는 그대로 유지
8. 설계에서 얻은 핵심 인사이트
1. 레이아웃은 역할 분리가 핵심이다
- body → 전체 보정
- sticky → 스크롤 동작
- content → 구조 유지
2. transform과 scroll은 완전히 다르다
- transform → 시각 이동
- scroll → 실제 위치 이동
3. 반응형에서 중요한 것은 비율이다
- width/height를 따로 고정하면 깨진다
- aspect-ratio로 해결할 수 있다
4. CSS는 구조 설계가 먼저다
- 클래스 네이밍이 안 맞으면 스타일이 적용되지 않는다
- .btn like와 .btn-like의 차이는 크다
9. 결론
이번 구현은 단순한 UI 제작이 아니라 다음 내용을 모두 포함한 작업이었다.
- 레이아웃 시스템 이해
- CSS Grid 활용
- 애니메이션 구조 이해
- 반응형 설계
- 컴포넌트 구조 설계
특히 가장 중요했던 깨달음은 이 한 줄로 정리된다.
문제를 해결하려면 속성을 바꾸는 것이 아니라, 구조를 바꿔야 한다.
+) 아래 링크를 클릭하면 실제 구현 페이지 영상을 볼 수 있다.
https://github.com/user-attachments/assets/848ffb4d-322a-4b2c-b176-cc31056653d2