SCSS로 관리하는 체계적인 반응형 웹 개발 방법론으로

SCSS로 관리하는 체계적인 반응형 웹 개발 방법론

이온디 1443

들어가며

반응형 웹 개발을 하다 보면 동일한 미디어쿼리를 반복해서 작성하거나, 브레이크포인트 값이 파일마다 다르게 관리되는 문제를 겪게 됩니다. 이번 글에서는 SCSS의 변수, 맵, 믹스인을 활용해 일관성 있고 유지보수하기 쉬운 반응형 시스템을 구축하는 방법을 공유합니다.

1. 브레이크포인트 전략 수립

1.1 브레이크포인트 정의


scss
$breakpoints: (
    sm: 674px,    // 모바일 (673 이하)
    md: 1025px,   // 태블릿 (674~1024)
    lg: 1441px,   // PC 소형 (1025~1440)
    view: 1750px, // PC 글보기 전용
    xl: 1921px,   // PC 중형 (1441~1920)
    xxl: 2560px   // PC 대형 (1921~2560)
);

핵심 포인트:

  • 맵(Map) 구조로 관리하여 중앙 집중식 제어
  • 실제 디바이스 해상도를 고려한 5단계 구간
  • view 같은 특수 용도 브레이크포인트도 정의 가능

1.2 컴포넌트별 사이즈 맵

scss
$gnb-sizes: (
    sm: 44px,   // 모바일
    md: 44px,   // 태블릿
    lg: 72px,   // PC 소형
    xl: 72px,   // PC 중형
    xxl: 100px  // PC 대형
);

GNB(Global Navigation Bar)처럼 반응형으로 크기가 변하는 컴포넌트는 별도 맵으로 관리합니다.

2. 헬퍼 함수 구현

2.1 브레이크포인트 조회 함수

scss
@function bp($name) {
    @return map-get($breakpoints, $name);
}

// 사용 예시
// bp(sm) → 674px
// bp(lg) → 1441px

2.2 GNB 사이즈 조회 함수

scss
@function gnb($size) {
    @return map-get($gnb-sizes, $size);
}

@function gnb-nav($size) {
    @return map-get($gnb-sizes, $size) - 1px;
}

// 사용 예시
// gnb(sm) → 44px
// gnb-nav(sm) → 43px (border 계산용)

3. 미디어쿼리 믹스인 체계

3.1 구간별 믹스인

scss
// 모바일: 673px 이하
@mixin sm {
    @media (max-width: #{bp(sm) - 1px}) { @content; }
}

// 태블릿: 674~1024px
@mixin md {
    @media (min-width: #{bp(sm)}) and (max-width: #{bp(md) - 1px}) { @content; }
}

// PC 소형: 1025~1440px
@mixin lg {
    @media (min-width: #{bp(md)}) and (max-width: #{bp(lg) - 1px}) { @content; }
}

// PC 중형: 1441~1920px
@mixin xl {
    @media (min-width: #{bp(lg)}) and (max-width: #{bp(xl) - 1px}) { @content; }
}

// PC 대형: 1921px 이상
@mixin xxl {
    @media (min-width: #{bp(xl)}) { @content; }
}

3.2 유틸리티 믹스인

scss
// PC 이상 (1025px~)
@mixin lg-up {
    @media (min-width: #{bp(md)}) { @content; }
}

// 글보기 모드 이하 (1749px 이하)
@mixin view {
    @media (max-width: #{bp(view) - 1px}) { @content; }
}

사용 예시:

scss
.header {
    padding: 20px;
    
    @include sm {
        padding: 10px; // 모바일
    }
    
    @include lg-up {
        padding: 40px; // PC 이상
    }
}

4. 재사용 가능한 레이아웃 믹스인

4.1 자동 패딩 시스템

scss
$content-padding: 24px;
$content-padding-fluid: clamp(2.4rem, calc(1.5vw + 1.8rem), 6rem);
$content-padding-large: 60px;

@mixin auto-padding {
    padding-left: $content-padding-fluid;
    padding-right: $content-padding-fluid;
}

clamp() 함수 활용:

  • 최소값: 2.4rem (24px)
  • 가변값: 1.5vw + 1.8rem (뷰포트 기반)
  • 최대값: 6rem (60px)
  • 화면 크기에 따라 자동으로 패딩 조정

4.2 GNB 기반 레이아웃 믹스인

scss
@mixin auto-gnb-width {
    width: gnb(sm);

    @include lg {
        width: gnb(lg);
    }

    @include xl {
        width: gnb(xl);
    }

    @include xxl {
        width: gnb(xxl);
    }
}

@mixin auto-margin {
    margin-left: auto;
    margin-right: gnb(sm);

    @include lg {
        margin-right: gnb(lg);
    }

    @include xl {
        margin-right: gnb(xl);
    }

    @include xxl {
        margin-right: gnb(xxl);
    }
}

4.3 컴포넌트별 믹스인

scss
@mixin gnb-auto-padding {
    padding: 4rem 2.4rem;
    
    @include lg-up {
        padding: 5.6rem 6rem;
    }
}

@mixin gnb-auto-width {
    max-width: 28rem;  // 모바일: 280px

    @include md {
        max-width: 48rem;  // 태블릿: 480px
    }
    
    @include lg-up {
        max-width: 68rem;  // PC: 680px
    }
}

5. 실전 적용 예시

5.1 모바일 전용 스타일

scss
@include sm {
    .hide-sm {
        display: none !important;
    }
    
    .wrap {
        .section-wrap {
            .contents-wrap, .footer-wrap {
                flex-direction: column;
            }
            
            .contents-wrap .header-wrap,
            .footer-wrap .copyright-wrap {
                width: calc(100% - #{gnb-nav(sm)});
                border-right: 0;
            }
            
            .contents-wrap .content-wrap,
            .footer-wrap .copyright-wrap,
            .footer-wrap .fnb-wrap {
                width: calc(100% - #{gnb-nav(sm)});
                @include auto-padding;
            }
        }
        
        .nav-wrap {
            @include auto-gnb-width;
            
            .btn-menu {
                width: gnb(sm);
                height: gnb(sm);
                
                .menu {
                    width: calc(#{gnb(sm)} * 0.5);
                    height: calc(#{gnb(sm)} * 0.5);
                }
            }
        }
    }
}

5.2 계산식과 함수 조합

scss
.content {
    // GNB 너비를 제외한 영역 계산
    width: calc(100% - #{gnb-nav(sm)});
    
    // GNB 크기의 절반
    padding: calc(#{gnb(sm)} * 0.5);
    
    // 자동 패딩 적용
    @include auto-padding;
}

6. 이 방법론의 장점

✅ 1. 일관성 보장

  • 모든 브레이크포인트가 중앙에서 관리됨
  • 값 변경 시 한 곳만 수정하면 전체 반영

✅ 2. 가독성 향상

scss
// Before
@media (min-width: 1025px) and (max-width: 1440px) { }

// After
@include lg { }

✅ 3. 개발 속도 향상

  • 재사용 가능한 믹스인으로 반복 코드 감소
  • 표준화된 패턴으로 팀 협업 효율 증가

✅ 4. 유지보수 용이

  • 브레이크포인트 추가/변경이 쉬움
  • 컴포넌트별 사이즈 관리가 체계적

✅ 5. 확장성

  • 새로운 믹스인 추가 용이
  • 프로젝트 특성에 맞게 커스터마이징 가능

7. 버전 관리 팁

📌 v1.0 - 기본 시스템

  • 브레이크포인트 및 GNB 사이즈 정의
  • 기본 미디어쿼리 믹스인

📌 v1.1 - 레이아웃 믹스인 추가

  • auto-padding, auto-margin 추가
  • gnb-auto-* 시리즈 추가

📌 v1.2 - 유틸리티 확장

  • lg-up, view 등 특수 용도 믹스인
  • clamp() 기반 fluid 값 도입

마치며

이 시스템은 실제 프로젝트에서 검증된 방법론으로, 특히 대규모 반응형 사이트나 여러 개발자가 협업하는 프로젝트에서 그 진가를 발휘합니다.

처음에는 설정이 복잡해 보일 수 있지만, 한 번 구축해두면 생산성과 코드 품질이 비약적으로 향상됩니다. 프로젝트 초기에 이러한 시스템을 갖춰두는 것을 강력히 추천합니다.

참고 자료:

목록으로