clamp()와 Absolute Positioning으로 해결한 반응형 Hero 섹션 구현 전략

Context

SVG 배경과 다중 기기 Mockup 이미지가 중첩된 복잡한 Hero 섹션 설계. 브레이크포인트별 이미지 정렬 불일치 및 의도치 않은 가로 스크롤 발생. 모바일과 데스크톱 간 레이아웃 붕괴 문제 직면.

Technical Solution

• 가상 요소(::before) 대신 명시적 Markup 구조를 설계하여 브레이크포인트별 정밀한 제어권 확보
• Relative와 Absolute Positioning 조합을 통해 이미지 레이어링 및 섹션 경계 외부 배치 구현
• 고정 픽셀 대신 clamp() 함수를 적용하여 뷰포트 크기에 따라 유동적으로 변하는 Fluid Scaling 체계 구축
• CSS Grid를 전역적으로 사용하지 않고 데스크톱 뷰의 2컬럼 레이아웃 등 필요한 지점에만 선택적으로 도입
• html, body 요소에 overflow-x: hidden 설정을 적용하여 Mockup 이미지 돌출로 인한 가로 스크롤 제거
• React의 map() 함수와 데이터 배열을 활용해 반복되는 Feature 섹션을 컴포넌트화하여 UI 로직 분리

Key Takeaway

반응형 웹 구현 시 고정 수치보다 유동적 스케일링 전략이 유지보수 효율을 높임. React의 강점은 데이터와 UI의 분리를 통한 반복 패턴의 효율적 관리와 재사용성 확보에 있음.