개요

2024 년까지 모바일 장치는 모든 인터넷 트래픽의 절반 이상을 차지할 것입니다. 노트북이나 데스크탑 컴퓨터는 더 이상 스마트 폰과 태블릿을 사용하여 웹을 탐색하는 많은 사람들에게 필요한 도구가 아닙니다. 인터넷은 이제 생산성, 소셜 미디어 또는 전자 상거래를위한 모바일 우선입니다. 이러한 변경으로 인해 웹 사이트가 작동하고 다양한 화면 및 장치에서 잘 보이도록하는 데 반응 형 웹 디자인이 필수적입니다.

우리는 특히 기본 모바일 앱을 만들 때 수많은 플랫폼을 위해 개발하는 데 비용이 많이 들고 시간이 많이 걸릴 수 있다는 것을 알고 있습니다. iOS, Android 및 웹 용 고유 한 앱을 개발하려면 여러 코드베이스, 전문 팀 및 지속적인 플랫폼 유지 관리가 필요합니다. 비즈니스는 결과적으로 훨씬 높은 비용이 발생하며 기능 롤아웃이 느려집니다. 개발자가 여전히 플랫폼 별 적응을 유지하는 데 어려움에 의해 복잡성이 증가합니다.

다중 플랫폼 프로그래밍을 덜 복잡하게 만드는 방법에는 여러 가지가 있습니다. 플러터, React Native 및 Progressive Web Apps (PWA)와 같은 하이브리드 프레임 워크에 의해 플랫폼 전체의 코드 재사용이 가능합니다. 그럼에도 불구하고,이 솔루션은 종종 단점이 있습니다.

오늘의 게시물에서는 다중 플랫폼 응용 프로그램을 구축 할 수있는 잠재적 솔루션으로 반응 형 웹 사이트에 대해 이야기하겠습니다.

반응 형 웹 사이트

반응 형 웹 사이트는 플랫폼, 화면 크기 및 사용자의 방향에 따라 기능, 컨텐츠 및 레이아웃을 동적으로 변경하도록 만들어진 웹 사이트입니다. 별도의 웹 사이트가 필요하지 않으면 서 웹 사이트는 사용자가 데스크탑, 랩톱, 태블릿 또는 스마트 폰에서 액세스하는지 여부에 관계없이 모든 장치에서 최적의 시청 경험을 위해이 자료가 설계되었음을 보장합니다.

반응 형 웹 디자인을 사용하면 데스크탑, 태블릿 및 모바일 장치에서 기능하는 단일 코드베이스 만 작성하고 관리하면됩니다. iOS, Android 및 웹을위한 별개의 앱을 만드는 것과는 달리 복잡성과 개발 비용이 낮아집니다.

구현하는 방법?

반응 형 웹 사이트를 구현하려면 유연한 레이아웃 (그리드와 같은), 확장 가능한 이미지 및 CSS의 미디어 쿼리와 같은 다양한 CSS 기술을 사용하여 장치의 화면 크기에 따라 사이트 디자인을 조정해야합니다. 중단 점을 정의하면 화면이 점점 작아지면 요소의 레이아웃과 스타일을 변경할 수 있습니다. 예를 들어, 멀티 컬럼 데스크탑 레이아웃에서 단일 열 모바일 레이아웃으로 전환하여 모든 장치에서 원활한 사용자 경험을 보장 할 수 있습니다. 다음은 모바일 중단 점을 처리하기 위해 미디어 쿼리를 사용하는 예입니다.

/* Desktop styles */
.container {
  display: flex;
  padding: 20px;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .container {
    display: block;
    padding: 10px;
  }
}

레이아웃이 예제의 레이아웃은 작은 장치의 블록 레이아웃에서 큰 장치의 Flexbox 레이아웃으로 변경됩니다. 이것은 완전한 재 설계없이 콘텐츠의 모바일 친근감을 향상시킵니다.

보너스 : CSS는 급격한 변화가 필요하지 않을 수 있습니다

모바일 장치에 대해 잘 설계된 반응 형 웹 사이트의 레이아웃을 극적으로 변경할 필요는 없습니다. 레이아웃을 1 열 형식으로 변경하고 크기와 패딩을 약간 조정하여 웹 사이트를 쉽게 모바일 화면에 쉽게 응답 할 수 있습니다. 필요한 경우 특정 부품을 모바일 친화적으로 만들 수 있지만 기본 코드베이스는 동일하게 유지되어 중복성을 줄입니다.

도전

반응 형 웹 사이트의 진화

Grid, Flexbox 및 고급 미디어 쿼리와 같은 새로운 기능을 통해 현대 브라우저에서 거의 완전히 지원되는 CSS는 상당한 개발을 보았습니다. 또한 JavaScript 지원은 대부분의 브라우저에서 일관되게 작용하여 크게 향상되었습니다. 동적 화면 높이 (노치 또는 화면 키보드와 같은)와 같은 모바일 장치를 관리하는 디자이너를 지원하기 위해 DVH (Dynamic Viewport Height)와 같은 새로운 장치가 개발되고 있습니다.

/* Example using dvh unit */
.header {
  height: 100dvh; /* Adjusts based on available viewport height */
}

이러한 개발에도 불구하고 완전히 반응이 좋고 모바일 친화적 인 웹 사이트를 만드는 것은 여전히 ​​어려운 일입니다. 서비스 작업자를 사용하여 오프라인 우선 웹 앱을 개발하는 것은 도전적이고 실수가 발생할 수 있습니다. 또한 개선 사항에도 불구하고 iOS의 Safari는 여전히 일관성과 지원 측면에서 다른 브라우저보다 뒤떨어지며 몇 가지 문제가 여전히보고되고 있습니다. 또한 개발자는 구식 장치 나 브라우저에서 사용자가 가져온 추가 엣지 환경을 해결해야 할 수도 있습니다.

실제 예 : 우리의 응용 프로그램

예를 들어, 우리는 마케팅 자동화 소프트웨어 인 Touchlead : Application을 보여주고 싶습니다.
모바일 지원을 달성하기 위해 Tailwind CSS를 사용하여 웹 응용 프로그램을 구축했습니다.
MD : Flex-Col과 같은 유틸리티 클래스를 사용하여 모바일 친화적 인 레이아웃을 쉽게 만들었습니다. 예를 들어, 데스크탑에서는 수평 플렉스 레이아웃을 사용하고 모바일에서는 최소한의 코드 변경으로 열 레이아웃으로 전환합니다.

  
Content 1
  
Content 2

이 전략은 환상적인 데스크탑과 모바일 사용자 경험을 보장하면서 코드베이스를 일관성있게 유지할 수있었습니다.

사이트 및 응용 프로그램을 구축하는 데 사용합니까, 아니면 문제가 너무 높다고 생각하십니까?
반응 형 웹 디자인에 대한 귀하의 의견과 경험은 크게 감사 할 것입니다.
많은 플랫폼에서 컨텐츠를 만들 때 어려움을 겪었습니까?
어떤 구제책이 가장 잘 작동한다는 것을 발견 했습니까? 당신의 생각을 알려주세요!