[디자인부트캠프] Chapter 9. UI 디자인 실전(2)

1. 반응형 디자인(Responsive Design)

다양한 화면 크기(데스크탑 PC, 태블릿, 모바일)에 맞춰 UI가 자동 조정되는 디자인 방식

동일한 콘텐츠를 디바이스별로 최적화하여 일관된 사용자 경험을 제공 

브레이크 포인트(Break Point)

화면 너비가 특정 지점에 도달했을 때 레이아웃 혹은 디자인 스타일이 변화하는 기준점
콘텐츠 배치나 크기를 조절하기 위한 기준값

디바이스 환경	너비(px)
모바일(세로)	0 ~ 479px 미만
모바일(가로)	480px 이상 ~ 767px 미만
태블릿(가로)	768px 이상 ~ 1023px 미만
데스크톱	1024px 이상

 

2. 랜딩 페이지(Landing Page)

 

마케팅 목적을 위한 단일 페이지 설계. 사용자의 행동을 유도하는 CTA(Call to Action) 중심의 구조로 설계되며 제품 소개, 서비스 가입, 이벤트 참여 등에 많이 활용.

• 단일 목적 - 오직 하나의 행동으로 유도(예: "지금 신청하기")
• 집중된 콘텐츠 - 핵심 메시지, 이점, 후기 등 목적에 맞는 정보 외의 불필요한 정보는 배제
• 간결한 디자인 - 사용자가 쉽게 정보에 집중하고 클릭할 수 있는 깔끔한 레이아웃
• CTA - 버튼, 폼 등 사용자 행동을 유도하는 요소 강조

💡 반응형 랜딩 페이지의 장점

1. 유지 보수 용이: 하나의 디자인으로 모든 디바이스에 적용
2. SEO 최적화: 검색 엔진 친화적 구조 제공
3. 사용자 경험 개선: 모든 디바이스에서 일관된 경험 제공 

3. 반응형 레이아웃 설계 원칙

1. 그리드 시스템(Grid System)

 

정돈된 레이아웃을 만들고 다양한 화면 크기에서 일관된 구조를 유지하기 위해 필요

다양한 디바이스에서 콘텐츠의 정렬, 크기 조절, 여백처리를 효율적으로 관리

🖥 데스크톱 12열(12-column) - 2, 3, 4, 6 등 다양한 배수로 나누기 쉬워서 유연한 조정 가능  / 📟 태블릿 8열(8-column)
/ 📱 모바일 4열(4-column)

 

2. 우선순위 조정(Priority)

 

화면크기에 따라 보여줄 수 있는 정보의 양이 다르므로 우선순위를 잘 조정해야 한다.

작은 모바일 화면에서 후순위 정보는 생략하거나 노출을 미룬다

데스크톱 환경에 비해 간략한 모바일 환경의 TED

 

3. 반응형 랜딩페이지의 구성요소

헤더(Header)	로고, 네비게이션, CTA 버튼 포함 모바일에서 햄버거 메뉴(三)로 변환
히어로 섹션(Hero Section)	첫 화면에서 사용자의 관심을 끄는 강렬한 메시지와 이미지 CTA 버튼과 함께 주요 서비스/제품 소개
콘텐츠 섹션(Contents Section)	특징(Feature), 사용자 리뷰(Testimonials), 가격 정보(Pricing) 등
푸터(Footer)	연락처 정보, 소셜 링크, 간단한 메뉴 포함 등

헤더

히어로 섹션

콘텐츠 섹션

푸터

4. 사용자 흐름(User Flow)

예) 습관 트래커 앱