320px, 480px, 640px 해상도 최적화

모바일 웹을 제작하기 위한 방법

보통은 320px을 기본으로 디자인하고 320px에서 최적화되도록 모바일 웹을 제작합니다. 만약 안드로이드 스마트폰에서 최적화하려면 480px을 기본으로 디자인하여 모바일 웹을 제작하고, 아이폰4 이후에 등장한 레티나 디스플레이에 최적화하려면 640px으로 디자인하여 모바일 웹을 제작하면 됩니다.
물론 이 모든 것에 대응하는 것이 가장 좋습니다. 따라서 실무에서 유용하게 사용할 수 있는 모바일 웹을 제작하기 위한 방법은 다음과 같습니다.

  1. * 모바일 웹에 들어가는 이미지는 640px을 기준으로 디자인합니다.

  2. * 모바일 웹 페이지에서 이미지 크기는 320px, 480px로 지정합니다.

  3. * 마지막으로 모바일 웹의 해상도는 320px을 기준으로 제작합니다.

또한 320px로 모바일 웹 해상도를 설정하더라도 480px과 640px에도 깔끔하게 지원되는 방법이 있습니다.



CSS를 이용하는 방법

모바일 웹 페이지의 해상도는 320px 기반일지 몰라도 이미지를 320보다 큰 해상도로 제작한다면 ratio 값의 설정을 바꿔서 다른 해상도도 지원해 줄 수 있습니다. 아래와 같이 CSS 코드를 작성합니다.

							/* 기본해상도 대응 - 320px */
							.search_left{
								width:6px;
								height:32px;
								-webkit-background-size:15px 15px;
								background:url('images/bg_search_left.png') no-repeat;
							}

							/* 해상도가 2배일 경우 - 레티나 디스플레이대응 */
							@media screen and (-webkit-device-pixel-ratio: 2) {
								.search_left {background:url('images/bg_search_leftx2.png');}
							}

							/* 해상도가 1.5배일 경우 - 안드로이드 대응 */
							@media screen and (-webkit-device-pixel-ratio:1.5) {
								.search_left {background:url('images/bg_search_leftx15.png');}
							}
						

위 CSS 코드에는 하나의 요소에 총 3가지 설정을 적용하였습니다. 일반적인 배경 이미지 설정과 ratio:2 그리고 ratio:1.5 입니다. ratio:2는 비율이 2배, 즉 모바일 웹 페이지의 해상도를 320px로 제작했다면 2배는 640px, 즉 레티나 디스플레이에 최적화된 모바일 웹을 의미합니다. ratio:1.5는 비융이 1.5배 즉 320px의 1.5배인 480px로 안드로이드 플랫폼 기판의 스마튼폰 기본 해상도를 의미하게 됩니다. 따라서 각 해상도에 맞는 이미지를 슬라이스해서 넣어 줄 수 있습니다.

여기서 가장 중요한 점은 기본 배경 부분 위에 -webkit-background-size:15px 15px;으로 설정한 부분입니다. 큰 해상도의 이미지 크기가 아닌 320px의 이미지 크기를 기본으로 한 px을 입력해야 합니다.



이미지를 이용하는 방법

CSS 코드가 아닌 HTML 코드 안에서 이미지 해상도의 설정을 변경할 수 있습니다. HTML 마트업으로 이미지를 넣으면 가로 세로 값을 모두 적어줍니다.

							<img src="images/thumb_main_01.png" width="55" height="55" />
						

실제 이미지가 레티나 디스플레이를 고려하여 200×200px로 제작되었다면 일부러 이미지 크기 지정을 작게 하는 것입니다. 즉, 실제 이미지보다 작은 크리를 설정하더라도 원 이미지 크기가 크면 해상도가 상대적으로 크더라도 깨끗하게 보인다는 액정 기술의 원리를 이용한 것입니다. 아이폰은 자동으로 적용되며 안드로이드 폰에서는 2.2 버전인 프로요부터 적용됩니다. 이는 운영도 편리하고 실제로 HTML 마크입이나 CSS 코드를 작성할 때도 편리하므로 각 상황에 맞게 사용하면 됩니다.