본문으로 건너뛰기

모바일 웹

1. 모바일 웹 개요 및 개발 방법​

모바일 플랫폼과 웹 앱의 등장​

모바일 플랫폼: 아이폰, 안드로이드폰, 윈도폰 등 다양한 모바일 운영체제를 의미합니다.

네이티브 애플리케이션 (Native App): 특정 모바일 운영체제(예: 안드로이드 - 자바, iOS - Objective-C)에 맞춰 개발되며, 해당 플랫폼의 모든 기능을 활용할 수 있습니다.

  • 안드로이드폰: 자바 언어, 안드로이드 프로그래밍 기술 학습
  • 아이폰: Objective-C 언어, iOS 운영체제 학습

웹 애플리케이션 (Web App): 웹 기술(HTML5, CSS3, JavaScript)을 사용하여 개발되며, 모든 플랫폼에서 변경 없이 실행 가능합니다.

네이티브 앱 vs. 웹 앱 비교​

구분네이티브 앱웹 앱
실행 속도빠름일반적으로 느림
플랫폼플랫폼마다 제작해야 함하나의 버전으로 모든 플랫폼 실행 가능
배포앱 마켓에 배포함배포 불필요
버전 업데이트상당한 시간 걸림즉시 반영 가능함
오프라인 시 사용가능약간의 기능 사용 가능
내부 장치 이용가능불가능

모바일 웹의 특성과 고려사항​

제한된 환경: 데스크탑에 비해 화면 크기가 작고 처리 능력이 떨어짐

성능 최적화: 복잡하고 용량이 큰 사이트는 모바일에서 굉장한 부담이 됨 - 간결하게 성능 위주로 개발해야 함

데이터 사용량: 네트워크 데이터 양에 따라 이용요금이 부과되는 것을 고려해야 함

터치 방식: 주로 터치 방식의 UI를 사용합니다

브라우저 다양성: 아이폰(사파리), 안드로이드(크롬), 윈도폰(엣지) 등 다양한 모바일 웹 브라우저가 존재하며, HTML5와 CSS3 기능 지원 방식이 서로 다름

모바일을 위한 두 가지 웹 개발 방법​

적응형 웹 (Adaptive Web): 모바일 버전 사이트를 별도로 개발하여 서비스함 - 서버에서 클라이언트가 모바일 장치인지 PC인지 파악해서 접속 사이트를 다르게 함. 이 방식은 웹사이트를 2가지의 별도 버전으로 개발하고 유지해야 함이라는 단점이 있습니다.

반응형 웹 (Responsive Web): 하나의 웹페이지를 다양한 화면 크기에 맞추어서 변형해서 보여줌 - HTML과 CSS로 구현함. 이는 Ethan Marcotte에 의해 2010년에 제시된 개념입니다.

2. 반응형 웹 디자인 (Responsive Web Design, RWD)​

반응형 웹의 정의​

웹 페이지가 사용자의 환경을 읽어서 적절하게 반응하는 페이지를 의미합니다.

반응형 웹의 핵심 기술​

브라우저 상태 읽기: CSS 미디어 쿼리 이용 ➡ 브라우저 상태값을 읽어, 브라우저 창의 크기, 화면 방향, 화면 비율 등을 파악함

유동 레이아웃 (Fluid Layout): 절대값 대신 상대적인 값을 이용해 페이지 레이아웃을 설정함 (예: width: 90%와 같이 백분율 사용)

유동 이미지 (Fluid Image): 이미지를 장치의 크기에 맞추는 기술임

반응형이 아닌 웹의 문제점​

잘림 현상 발생: 고정된 크기의 레이아웃은 브라우저 창이 좁아지면 내용이 잘리거나, 넓어지면 빈 공간이 많이 생기는 문제가 발생합니다.

반응형 웹의 구현 예시​

콘텐츠 영역의 너비를 픽셀(px) 대신 백분율(%)로 지정하여 브라우저 너비에 따라 동적으로 조절되게 합니다.

3. 가상 뷰포트 (Virtual Viewport)​

가상 뷰포트의 개념​

애플의 시작: 스마트폰 초기, 해상도가 낮았던 아이폰(320x480)에서 PC용 웹페이지를 보기 위해 애플은 웹페이지를 실제 스마트폰 해상도로 렌더링하지 않고, 980픽셀 크기의 화면이라고 가정하고 웹페이지를 렌더링한 후에, 이를 축소하여 320픽셀의 화면에 보여주었음. 사용자는 확대/축소 기능을 통해 원하는 부분을 볼 수 있었으며, 이것이 가상 뷰포트의 시작입니다.

뷰포트: 모바일 장치가 가지고 있는 화면의 가시 영역(실제 내용이 표시되는 부분)을 의미합니다.

모바일 장치에 적합한 크기로 제작된 사이트라도 뷰포트 지정을 하지 않으면 의도와 달리 작게 보일 수 있습니다.

뷰포트 지정 방법​

HTML <head> 섹션에 <meta> 태그를 사용하여 뷰포트를 지정합니다.

기본 형식: <meta name="viewport" content="width=device-width, initial-scale=1">

  • width=device-width: 뷰포트의 너비를 장치 너비에 맞춥니다
  • initial-scale=1: 초기 화면 배율을 1로 지정합니다 (확대/축소 없음)

뷰포트 속성:

  • width: 뷰포트의 너비 (device-width 또는 구체적인 크기)
  • height: 뷰포트의 높이 (device-height 또는 구체적인 크기)
  • user-scalable: 확대 축소 가능 여부 (yes 또는 no)
  • initial-scale: 초기 화면 비율 (1~10)

4. 미디어 쿼리 (Media Queries)​

미디어 쿼리의 역할​

장치의 해상도를 파악하는 방법이며, 반응형 디자인의 핵심입니다.

장치의 해상도에 따라 서로 다른 스타일 시트를 적용할 수 있게 합니다.

미디어 쿼리 형식​

@media [미디어 타입] and ([미디어 특징]) {
  ...;
}

미디어 유형: screen, print, tv, projection 등이 있습니다.

예시: @media screen and (min-width: 800px) and (max-width: 1200px) { ... }

주요 미디어 특징 속성​

속성설명
width뷰포트의 너비
height뷰포트의 높이
min-width뷰포트의 최소 너비
max-width뷰포트의 최대 너비
device-width장치의 너비
device-height장치의 높이
orientation화면의 방향 (portrait - 세로, landscape - 가로)

중단점 (Breakpoints)​

화면의 크기에 따라 스타일이 달라지는 분기점입니다.

일반적인 중단점 예시:

/* 데스크탑 */
@media screen and (min-width: 1024px) {
  ...;
}

/* 태블릿 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  ...;
}

/* 스마트폰 */
@media screen and (max-width: 767px) {
  ...;
}

중단점을 이용한 스타일/레이아웃 변경​

미디어 쿼리를 사용하여 특정 화면 너비에 따라 웹페이지의 배경색을 변경하거나, 요소의 너비(width)를 조절하여 레이아웃을 동적으로 변경할 수 있습니다. 예를 들어, 작은 화면에서는 요소들을 100% 너비로 배치하여 수직으로 쌓이게 할 수 있습니다.

5. 유동 레이아웃 (Fluid Layout)​

유동 레이아웃의 정의​

고정된 크기가 아닌 백분율과 같은 상대적인 단위를 사용하는 레이아웃 방법입니다.

반응형 웹 디자인은 유동 레이아웃을 기반으로 하며, 장치 화면의 크기에 따라 중단점을 추가하며, 콘텐츠가 나빠지기 시작하는 지점에서 레이아웃을 변경함

Grid 레이아웃​

개념: 가로 방향의 행(row)과 세로 방향의 열(column)으로 구성됨. 콘텐츠를 행과 열로 나누어 배치하는 강력한 CSS 레이아웃 시스템입니다.

fr 단위: 그리드 레이아웃에서 사용되는 상대적인 크기 단위로, 각 열의 너비를 상대적으로 정의할 때 편리함. (예: grid-template-columns: 1fr 1fr 1fr;는 세 개의 열이 1:1:1 비율로 너비를 가집니다)

그리드 항목에 이름 붙여서 배치하기: grid-area 속성을 사용하여 각 항목에 이름을 부여하고, 컨테이너의 grid-template-areas 속성에 이름을 나열하여 시각적으로 레이아웃을 구성하는 가장 직관적인 방법 중 하나입니다.

Grid 레이아웃을 이용한 반응형 웹디자인: 미디어 쿼리와 함께 사용하여 특정 화면 너비(예: 800px)보다 작을 경우 그리드 항목들을 1열로 배치하는 등 레이아웃을 유연하게 변경할 수 있습니다.

6. 반응형 이미지 (Responsive Images)​

고정된 크기의 이미지 문제점​

이미지나 컨테이너의 크기를 고정으로 설정하면 "브라우저의 너비가 작아지면 ➡ 그림이나 텍스트가 잘림", "브라우저의 너비가 커지면 ➡ 빈 공간이 많아짐"이라는 문제가 발생합니다.

상대적 크기의 이미지​

이미지나 컨테이너의 크기를 백분율(%)과 같은 상대적 크기로 설정하여 "브라우저의 너비에 맞추어서 표시됨". (예: img { width: 80%; height: auto; })

장치에 맞는 이미지​

미디어 쿼리를 사용하여 "장치의 특성을 파악하여 적절한 이미지 지정"할 수 있습니다. 예를 들어, 화면 너비에 따라 다른 배경 이미지를 로드할 수 있습니다.

@media screen and (min-width: 600px) {
  body {
    background-image: url("normal.jpg");
  }
}

<picture> 요소​

역할: 뷰포트의 너비에 따라 크기가 다른 이미지를 선택함

사용법: <source> 태그를 통해 미디어 쿼리 조건을 명시하고, 조건에 맞는 이미지를 지정합니다. 마지막 <img src>는 대체 이미지로 사용됩니다.

예시:

<picture>
  <source srcset="small.png" media="(max-width: 600px)" />
  <source srcset="normal.jpg" />
  <img src="normal.jpg" style="width:auto;" />
</picture>

이는 뷰포트 너비가 600px 이하일 때는 small.png를, 그 이상일 때는 normal.jpg를 로드하도록 합니다.