모바일 우선 개발을 시작해야 하는 이유

반응형 웹 사이트 코딩을 직접 시도했다면 이 문제에 봉착했을 것입니다. 하나의 작고 간단한 CSS 속성을 변경하면 다른 화면 크기에서 레이아웃이 변경됩니다.

이렇게 하면 최신 마진 값이 태블릿이나 휴대폰용 사이트를 망가뜨리지 않았는지 확인하고 다시 확인해야 합니다. 물론 다양한 화면 크기에 대한 특정 재정의를 사용하여 이 문제를 쉽게 해결할 수 있습니다. 그러나 프로젝트가 진행되는 동안 CSS 파일은 문제에 대한 예외로 가득 차게 됩니다. 그런 다음 예외에 대한 예외가 있으며 나중에 예외의 예외에 대한 예외가 발생합니다.

그것은 빠르게 복잡해지고 결국 자신의 코드와 싸우고 많은 프로젝트 시간을 소비하고 천천히 정신을 잃습니다.

그러나 두려워하지 마십시오! 모바일 우선 개발은 골치 아픈 문제, 예외 예외 및 느린 페이지 로드를 방지하기 위해 여기에 있습니다.

데스크톱 우선 개발자는 어떻게 되나요?

초기에 반응형 웹사이트의 데스크탑 버전 개발은 CSS 문서의 자연스러운 흐름에 어긋납니다. CSS 파일은 위에서 아래로 선형으로 읽히므로 모든 CSS 속성은 문서 아래에 적용된 새 스타일로 덮어씁니다.

큰 화면용으로 개발한 다음 CSS 문서 아래에 모바일 스타일을 추가하면 두 가지 문제가 나타납니다.

1. 데스크탑 스타일(문서의 위쪽)에서 변경한 사항은 새 스타일이 모바일 사이트에 대해 명시적으로 덮어쓰여지지 않은 경우 모바일 사이트가 표시되는 방식을 변경합니다. 불필요한 CSS 라인을 추가로 생성하는 것은 많은 프로젝트 시간을 소비하고 DRY 코드의 원칙에 위배됩니다.
2. 모바일 장치는 모든 데스크탑 스타일을 렌더링하여 페이지 로드를 시작합니다. 무거운 데스크톱 버전이 렌더링을 마치면 모바일 스타일이 적용됩니다. 이는 추가 리소스를 로드하므로 모바일 장치가 완전히 로드된 페이지를 전달하는 데 훨씬 더 오래 걸립니다.

여기에 모바일 우선 개발이 등장하여 하루를 절약할 수 있습니다. 이 방법은 올바른 CSS 순서(모바일에서 데스크톱으로 위에서 아래로)를 권장하여 장치가 필요할 때만 필요한 정보를 적용하도록 합니다.

이러한 문제에 대한 몇 가지 솔루션을 살펴보겠습니다.

모바일 장치 렌더링의 모습

이미지는 웹사이트 크기에 가장 큰 영향을 미치므로 장치가 Wi-Fi에 연결되어 있지 않으면 다운로드하는 데 시간이 오래 걸립니다. 모바일 스타일에서 추가 이미지를 제거하는 것은 사이트 속도를 향상시키기 위해 할 수 있는 최선의 방법입니다.

모바일 우선으로 이동한다는 것은 모바일 장치에 몇 개의 작은 이미지만 제공한다는 의미입니다. 아래 예에서는 데스크톱 및 모바일 우선 방법으로 구현된 동일한 CSS 문서를 만들었습니다.

데스크탑 우선 방법을 사용하는 경우 모바일 장치는 다음 순서로 렌더링됩니다.

1. 첫 번째 스타일을 읽으십시오.
2. 큰(곧 교체될) 이미지를 다운로드하십시오.
3. 요소를 렌더링합니다.
4. 모바일 스타일을 읽으십시오.
5. 작은 이미지를 다운로드합니다(큰 이미지 대체).
6. 요소를 다시 렌더링합니다.

그러나 모바일 우선 방법을 사용하는 경우 장치는 다음 순서로 렌더링합니다.

1. 첫 번째 스타일을 읽으십시오.
2. 작은 이미지를 다운로드하십시오.
3. 데스크톱 전용 스타일 지정을 건너뜁니다(적용되지 않으므로).
4. 요소를 한 번 렌더링합니다.

웹사이트는 완성된 페이지를 브라우저에 제공하기 전에 실행해야 하는 단계가 적을 뿐만 아니라 사용되지 않는 사소한 이미지에 대한 추가 호출도 제거합니다!

모바일 우선 개발에서는 미디어 쿼리가 최대 너비에서 최소 너비로 변경됩니다. 최대 너비 쿼리는 1000px보다 작은 모든 장치에 적용되고 최소 너비 쿼리는 1000px보다 큰 장치에 적용됩니다.

min-width로 바꾸면 더 큰 장치에 대해 작성하는 새로운 스타일이 더 작은 장치에서 사이트 모양에 영향을 미치지 않도록 하는 장벽이 생성됩니다. 이렇게 하면 반응형 웹사이트의 로드 속도를 높이는 동시에 데스크톱 전용 미디어 쿼리 내에서 변경한 사항이 모바일 레이아웃에 영향을 미치지 않도록 합니다. 윈윈입니다!

그만 싸워라

CSS 파일이 데스크톱, 태블릿 및 모바일의 세 가지 주요 부분으로 주석 처리된 프로젝트에서 작업하고 있다고 가정해 보겠습니다.

불행히도 우리는 데스크탑 우선 방법을 따랐고 사이트는 휴대폰에서 느리게 로드됩니다. 우리는 이미지 크기를 줄이고, 브라우저 캐싱을 추가하고, 심지어 HTML(총)을 축소하려고 시도했습니다. 그러나 사이트는 여전히 처음 방문자를 위해 부진하고 수정이 필요합니다.

데스크탑 우선 방법으로 사이트를 구축했기 때문에 CSS는 .header 요소에 대해 다음과 같이 보일 것입니다.

우리의 목표는 모바일로 전송되는 스타일링의 양을 줄이는 것입니다. 시작하려면 요소에 적용되는 목록을 작성해야 하며, 우리 자신의 스타일을 덮어쓸 때 주의해야 합니다.

먼저 모바일 우선 접근 방식으로 바꿔보겠습니다. 모바일을 미디어 쿼리가 아닌 기본 스타일로 지정합니다(참고: 프로덕션 환경에서 이 작업을 수행하지 마십시오. 사이트가 손상되고 클라이언트가 심술궂게 될 것입니다).

사이트 속도에 가장 큰 영향을 미치는 이미지를 다시 살펴보겠습니다.

모바일 장치에서 배경을 로드하지 않으므로 해당 속성을 삭제할 수 있습니다. 나중에 실제로 필요할 때 더 큰 기기에 대한 이미지를 추가할 것입니다. margin-bottom 속성도 마찬가지이므로 모바일에 실제로 적용해야 하는 속성은 두 개뿐입니다!

태블릿 섹션으로 이동하여 바탕 화면 스타일에서 태블릿 스타일로 배경 속성과 패딩을 이동해야 합니다. 태블릿은 다음으로 렌더링될 섹션이기 때문입니다.

우리의 목표는 속성이 변경되는 경우에만 덮어쓰고 아래 이미지와 같이 변경이 필요한 경우에만 새 속성을 추가하는 것입니다.

훨씬 낫다! 모바일 장치가 새로 최적화된 CSS를 렌더링하는 방법을 조사함으로써 모바일 우선 개발이 데스크탑 우선 방법과 비교하여 더 작은 장치에 얼마나 많은 영향을 미치는지 빠르게 알 수 있습니다.

더 열심히 일하지 말고 더 똑똑하게 일하세요

데스크탑 우선을 개발하면 해결되는 것보다 더 많은 문제가 발생합니다. “모바일 우선 개발 방식으로 전환하면 힘들지 않고 스마트하게 작업할 수 있습니다. "

반응형 사이트를 개발하는 동안 기본적으로 미디어 쿼리에 포함되지 않은 모든 항목이 표시된다는 점을 염두에 두십시오. 기본(미디어 쿼리 아님) 스타일을 모바일 장치에 맞게 설정함으로써 웹사이트 크기에 가장 쉽게 영향을 받는 장치에 가능한 한 적은 양의 정보를 보낼 수 있습니다.

데스크탑과 태블릿은 99.999%의 시간 동안 빠른 인터넷 연결에 연결되어 대량의 정보를 고속으로 전달할 수 있습니다. 전화는 느린 인터넷 연결을 통해 정보를 로드할 가능성이 가장 높습니다. 가장 민감한 장치를 수용하도록 스타일시트를 조정하면 고객에게 최상의 웹사이트를 제공할 수 있습니다.