레이아웃 문제 해결 보고서

문제점 분석

1. 블로그 포스트 세로 박스 문제

• 원인: article.page 요소의 너비가 제대로 제한되지 않음
• 증상: 콘텐츠가 세로로 길게 늘어남
• 해결: max-width와 flex 속성 정확히 설정

2. 레이아웃 불일치

• 원인: 블로그와 강의 페이지가 다른 스타일 사용
• 증상: 페이지마다 다른 모양과 느낌
• 해결: 통일된 레이아웃 시스템 구축

3. 반응형 문제

• 원인: 미디어 쿼리 충돌
• 증상: 모바일에서 레이아웃 깨짐
• 해결: 명확한 브레이크포인트 설정

해결 방법

1. 새로운 레이아웃 시스템 (_reset-layout.scss)

주요 특징

• Flexbox 기반: 명확한 flex 속성으로 레이아웃 제어
• 고정 너비 사이드바: 280px (large), 300px (x-large)
• 유동 너비 콘텐츠: calc()를 사용한 정확한 너비 계산
• overflow 제어: 콘텐츠 넘침 방지

코드 구조

.layout--single {
  #main {
    display: flex !important;
    flex-direction: row !important;
  }
  
  .sidebar {
    flex: 0 0 280px !important;  // 고정 너비
  }
  
  article.page {
    flex: 1 1 auto !important;    // 유동 너비
    min-width: 0 !important;      // flex 버그 수정
    max-width: calc(100% - 280px - 2rem) !important;
  }
}

2. 스타일 통일

색상 체계

• Primary: #5e72e4
• Background: #f5f7fa
• Border: #e5e5e5
• Text: #333

카드 디자인

• Border Radius: 12px
• Shadow: 0 2px 8px rgba(0,0,0,0.08)
• Padding: 2rem (mobile: 1.5rem)

3. 반응형 디자인

브레이크포인트

• Small: 600px
• Medium: 768px
• Large: 1024px
• X-Large: 1280px

모바일 우선

// 기본 (모바일)
flex-direction: column;
padding: 1rem;

// 데스크톱
@include breakpoint($large) {
  flex-direction: row;
  padding: 3rem;
}

수정된 파일

1. SCSS 파일

• _sass/layout/_reset-layout.scss (신규)
• _sass/layout/_unified-single.scss (신규)
• assets/css/main.scss (수정)

2. 레이아웃 파일

• _layouts/default.html (수정)
• _layouts/single.html (유지)

3. 포스트 파일

• _posts/*.md - excerpt 추가

테스트 체크리스트

데스크톱 (1024px+)

• 사이드바 고정 위치
• 콘텐츠 영역 너비
• 스크롤 동작
• 호버 효과

태블릿 (768-1023px)

• 레이아웃 전환
• 터치 인터랙션
• 읽기 편의성

모바일 (<768px)

• 단일 컬럼 레이아웃
• 사이드바 숨김
• 터치 영역 크기
• 폰트 크기

주요 개선사항

1. 성능

• 불필요한 !important 제거
• CSS 중복 제거
• 선택자 최적화

2. 접근성

• 명확한 색상 대비
• 키보드 네비게이션
• 스크린 리더 지원

3. 유지보수

• 변수 기반 디자인
• 모듈화된 SCSS
• 명확한 주석

남은 작업

우선순위 높음

1. 다크모드 완벽 지원
2. 프린트 스타일 개선
3. 이미지 최적화

우선순위 중간

1. 애니메이션 효과
2. 로딩 성능 개선
3. PWA 기능

우선순위 낮음

1. 배경 자바스크립트 효과
2. 고급 인터랙션
3. 실험적 기능

결론

레이아웃 시스템을 완전히 재구성하여:

• 일관성: 모든 페이지가 동일한 레이아웃 사용
• 안정성: 명확한 너비 제한과 overflow 제어
• 확장성: 새로운 페이지 타입 쉽게 추가 가능

이제 블로그 포스트가 정상적으로 표시되며, 모든 페이지가 통일된 디자인을 갖습니다.