개발 slecs

스토어 랜딩 페이지 반응형 레이아웃

목차

style: 스토어 관련 CSS/SCSS 스타일 및 JSP 구조 개선

스토어 랜딩 페이지 UI 구현 작업임. 앱 다운로드 유도 + FAQ + 연락처 섹션으로 구성했음.

페이지 구조

[Hero Section] - 메인 카피 + CTA
[Feature Cards] - 주요 기능 소개
[App Download] - App Store / Google Play 배지
[FAQ Section] - 아코디언
[Contact Section] - 문의 폼
[Footer]

반응형 처리

해상도 레이아웃
모바일 (<768px) 세로 단일 컬럼
태블릿 (768-1024px) 2컬럼
PC (>1024px) 3컬럼 
.feature-section {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow-y: scroll;
}

앱 배지 이미지(App Store, Google Play)는 공식 브랜드 가이드라인에 맞는 버전으로 교체함. 사이즈/여백 규정이 엄격함.

CSS 변수 시스템의 장점

CSS 변수(커스텀 프로퍼티)를 도입하면 테마 변경이 한 곳에서 전파됨. 특히 다크모드, 화이트라벨링 요구사항이 있을 때 진가를 발휘함.

/* 변수 정의 */
:root {
  --color-primary: #3b82f6;
  --spacing-md: 16px;
}

/* 사용 */
.btn-primary {
  background: var(--color-primary);
  padding: var(--spacing-md);
}

SCSS 빌드를 도입하면 변수 관리 + 중첩 선택자 + 믹스인까지 활용 가능함. 기존 CSS에서 마이그레이션할 때는 점진적으로 파일 단위로 전환하는 게 안전함.

끝

이어보기

댓글 0

첫 댓글 달아줘.