2.1 스마트폰

스마트폰 사용자 경험을 고려한 반응형 웹 디자인은 웹사이트를 설계할 때 필수적입니다. 사용자의 피드백을 통해 스마트폰 화면에서 최적화된 레이아웃을 구현하는 방법을 배워보겠습니다. 이번 섹션에서는 모바일 우선 디자인 원칙을 적용하여 예제를 통해 실습할 것입니다.

1. 반응형 웹 디자인의 기초

스마트폰에서의 반응형 디자인은 뷰포트에 맞춘 요소의 크기와 배치 변경을 포함합니다. 기본적으로 CSS 미디어 쿼리를 사용하여 모바일 화면에 적합한 스타일을 적용합니다.

2. 뷰포트 설정

HTML 문서의 헤드 부분에 다음 메타 태그를 추가하여 뷰포트를 설정합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 설정은 장치의 폭에 맞춰 콘텐츠가 조절되도록 합니다.

3. 레이아웃 구현하기

이제 CSS Flexbox와 Grid를 사용하여 스마트폰에 최적화된 레이아웃을 만들겠습니다. 아래는 카드 레이아웃을 구현한 예제입니다:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
}
.card {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 5px;
  padding: 10px;
  width: 90%;
  max-width: 300px;
}

위 예제는 스마트폰 화면에서 카드 레이아웃을 구현하기 위한 기본 스타일을 보여줍니다. 각 카드의 너비는 90%로 설정하여 스마트폰 화면의 할당된 공간을 최대한 활용합니다.

4. 미디어 쿼리 예제

다음은 화면 크기에 따라 카드를 더 작게 혹은 더 크게 조정하는 미디어 쿼리의 예입니다:

@media (max-width: 600px) {
  .card {
    width: 100%;
  }
}
@media (min-width: 601px) {
  .card {
    width: 45%;
  }
}

이렇게 설정하여 스마트폰 사용자가 더 나은 경험을 할 수 있도록 카드의 너비를 조정합니다. 다음 단계는 실습이므로 아래의 예제를 바탕으로 직접 스마트폰 화면을 위한 반응형 디자인을 구현해보세요.

5. 실습 과제

• 주어진 코드 샘플을 바탕으로 카드 레이아웃을 수정하여 다양한 색상과 스타일을 적용해보세요.
• 추가로 모바일 네비게이션 메뉴를 만드는 방법을 찾아서 실습해보세요.

6. 정리

이번 섹션에서는 스마트폰에서의 반응형 웹 디자인의 기초와 CSS를 사용한 레이아웃 구성 방법을 배웠습니다. 다양한 화면 크기에서의 반응형 디자인을 지속적으로 연습하며 포트폴리오 사이트를 개발하는 데 활용해보세요. 다음 시간에는 태블릿에서의 반응형 디자인을 다루겠습니다.