[디자인부트캠프] DAY 20 | UI 디자인 실전_2

 

 

UI 디자인 실전_2

 

목차

• 반응형 랜딩페이지란?
• 반응형 레이아웃 설계 원칙
• 반응형 랜딩페이지의 주요 구성 요소
• 디자인 스타일 가이드 적용
• 실전 반응형 랜딩페이지 디자인
  
  
  

반응형 디자인(Responsive Design):

• 스마트폰, 태블릿, 데스크탑 등 다양한 화면 크기에 맞춰 디자인하는 것이 중요합니다.
• 각 디바이스에 맞는 해상도 및 브레이크포인트 조정 (스마트폰: 320px, 태블릿: 768px–1024px, 데스크탑: 1024px 이상).
• 모바일 우선 접근 방식(Mobile-first approach)을 적용하여 모든 기기에서 원활하고 명확한 사용자 경험을 보장합니다. 

• 해상도 320px 이상 또는 768px 미만 -> 스마트폰
• 해상도 768px 이상 또는 1024px 미만 -> 태블릿
• 해상도 1024px 초과 -> PC

레이아웃 디자인(Layout Design):

• 콘텐츠 배치를 구조적으로 만들기 위해 그리드 시스템(예: 12열 그리드)을 사용합니다.
• 일정한 간격과 정렬을 위해 패딩과 그릇터(Gutter)를 적용합니다.
• 그리드 레이아웃을 최적화하여 잘 조직된 시각적 구조를 만듭니다.

랜딩 페이지(Landing Pages):

• 랜딩 페이지는 특정 마케팅 목표를 달성하기 위해 사용자를 끌어들이는 역할을 합니다.
• 사용자 행동을 유도하는 명확한 CTA(Call to Action)를 포함합니다.
• 제품 소개, 서비스 구독, 이벤트 참여 등을 중심으로 구성됩니다.

그리드 시스템 활용(Grid System Utilization):

• 12열 그리드 레이아웃을 사용하여 콘텐츠 블록을 정의합니다.
• 시각적 흐름과 조직을 개선하기 위해 그리드 요소(그릇터, 패딩)를 조정합니다.
• 그리드 치수를 계산하는 도구: Grid Calculator.

출처 : http://gridcalculator.dk/

 

사용자 경험 고려(User Experience Considerations):

• 모바일 화면에서 불필요한 요소를 제한하여 사용자 경험을 우선시합니다.
• 콘텐츠를 계층적으로 조직하고 가장 중요한 정보를 중심으로 배치합니다.

모바일 전용 조정(Mobile-Specific Adjustments):

• 작은 화면에서 비필수 요소를 줄여 레이아웃과 콘텐츠를 조정합니다.
• 미니멀한 디자인 접근 방식을 통해 명확성과 사용성을 유지합니다. 

 

 

 

1. 헤더(Header):
   • 사이트 상단에 위치하며 로고, 내비게이션, CTA 버튼 포함
   • 모바일에서는 햄버거 메뉴 형태로 변경

     

2. 히어로 섹션(Hero Section):
   • 첫 화면에서 사용자의 관심을 끄는 강렬한 메시지와 이미지 배치
   • CTA 버튼과 주요 서비스, 제품 소개 포함

     

3. 콘텐츠 섹션(Content Section):
   • 특징(Features), 사용자 리뷰(Testimonials), 가격 정보(Pricing) 등을 담은 섹션
4. 푸터(Footer):
   • 하단에 위치하며 연락처 정보, 소셜 링크, 간단한 메뉴 포함
5. 컬러 스타일(Color Style):
   • 브랜드 컬러와 보조 색상 설정
   • 각 컴포넌트에 적합한 색상 적용

     

     

6. 타이포그래피 스타일(Typography):
   • 제목(H1, H2)과 본문, 캡션에 맞는 폰트 크기와 자간 설정
   • 모바일에서는 폰트 크기 다르게 설정