기초

견고한 기반

훌륭한 PWA를 빌드하기 위한 기본 요구사항은 탄탄한 기반입니다. 이 기반을 구현하려면 몇 가지 원칙을 사용하여 웹의 제약 조건에 맞게 설계하고 코딩해야 합니다.

  • 모바일을 집중 제약조건으로 사용하세요. 디자인의 각 뷰가 필수 콘텐츠와 상호작용에만 초점을 맞춰야 합니다.
  • 디자인 과정에서 콘텐츠와 핵심 기능을 강조합니다.
  • 필요에 따라 점진적으로 개선합니다. 가장 간단하고 가장 널리 사용되는 도구를 사용하여 구성요소의 핵심 콘텐츠와 기능을 빌드하는 것부터 시작하세요. 제한 없는 액세스. 그런 다음 사용하려는 고급 기능을 테스트하고 해당 기능으로 구성요소를 개선합니다.
  • 사용자 중심의 웹 성능 측정항목에 중점을 둔 빠르고 우수한 사용자 환경을 제공하고, 실제 사용자 측정항목을 가져오며, 네트워크 연결, 입력 유형, CPU 또는 GPU 성능에 관계없이 모든 사용자에게 성능을 푸시합니다.

이러한 원칙을 따르고 현대적인 패턴과 웹 기능으로 개선하면 진정으로 고유한 디자인으로 훌륭하고 빠른 환경을 만들 수 있습니다. 픽셀 대신 제약 조건에 의해 구동되는 디자인을 통해 모든 사용자가 특정 탐색 컨텍스트에 가장 적합한 방식으로 콘텐츠와 핵심 기능에 액세스할 수 있습니다.

반응형 웹 디자인

Ethan Marcotte의 2010년 A List Apart 기사인 반응형 웹 디자인 이후 디자이너와 개발자는 다양한 화면 크기와 기기에서 작동하는 사용자 인터페이스를 만들 수 있는 유연한 환경을 만들 것을 권장했습니다.

그러나 그 과정에서 모바일, 태블릿, 데스크톱 크기로 짧아졌고 너비는 iOS 화면 크기의 영향을 많이 받았습니다. 최신 CSS를 활용하고 반응형 디자인의 원래 의도에 다시 초점을 맞추면 squishy 사이트를 되찾을 수 있습니다.

반응형 웹 디자인에는 세 가지 기술 요소가 도입됩니다.

  • 유동 그리드
  • 유연한 미디어
  • 미디어 쿼리

에단은 이러한 기술적 요구사항으로는 충분하지 않다고 결론지었습니다. 앞으로 나아가려면 다른 사고방식이 필요합니다.

모바일 사용자에 대한 통념

반응형 디자인 초기에는 사이트를 더 쉽게 디자인할 수 있도록 만든다는 생각이 들었습니다. 예를 들어 작은 환경은 스마트폰용이고, 너비는 320px이고, 중간 환경은 태블릿용이고, 너비는 1024px이고, 그보다 큰 환경은 데스크톱 환경이었습니다. 작은 화면에는 터치 기능이 있었고 대형 화면에는 없습니다. 휴대전화 사용자는 바쁘고 산만해졌기 때문에 '가벼운' 환경이 필요했습니다.

그렇지 않습니다. 화면 크기나 기기 유형에 따라 사용자의 니즈가 근본적으로 달라진다는 가정으로 인해 모바일에서 계속된 통념입니다. 이는 정밀 조사가 필요 없습니다.

현재 모바일과 데스크톱에 설치할 수 있는 소셜 네트워크 PWA를 예로 들어보겠습니다. 데스크톱에서 많은 사용자가 작업하는 동안 화면 한쪽에 피드가 있는 좁은 창을 유지할 수 있으며, 가용 너비로 인해 사용자가 휴대기기를 사용 중이라고 가정하는 것은 적절하지 않습니다.

브라우저 탭에 없는 PWA 환경에서는 미니 모드, 폴더블 기기 사용과 같은 반응형 디자인 환경에 새로운 도전과제가 더해지고 있습니다.

미니 모드

데스크톱 기기에 PWA를 설치하면 창이 매우 작을 수 있습니다. 브라우저 창보다 작고 모바일 표시 영역보다는 작습니다. 이는 웹의 새로운 기능입니다. 200x100 CSS 픽셀만큼 작은 창인 미니 모드를 지원할 수 있습니다.

요즘 PWA를 만들 때는 음악 플레이어의 컨트롤 버튼, 대시보드 정보, 빠른 작업 등 반응형 웹 디자인 덕분에 미니 모드에서 무엇을 제공할지 고려하는 것이 좋습니다.

데스크톱에서 PWA는 브라우저용으로 설계한 가장 작은 창보다 작은 창에서 렌더링될 수 있습니다. 반응형 웹 디자인을 위한 새로운 중단점인 미니 모드가 추가됩니다.

폴더블 및 하이브리드

요즘은 폴더블과 하이브리드 기기도 일반적입니다.

  • 소형 폴더형 휴대전화,
  • 휴대전화나 태블릿으로 사용할 수 있는 폴더블 기기입니다.
  • 태블릿으로 변환할 수 있는 노트북입니다.
  • 키보드와 트랙패드가 있는 노트북처럼 사용할 수 있는 태블릿입니다.
  • 그런 다음 허브를 사용하여 휴대전화를 데스크톱으로 전환할 수 있습니다.

모든 웹사이트에는 도전과제가 있지만, 프로그레시브 웹 앱을 사용하면 앱이 설치되는 창을 제어하고 담당할 수 있습니다. 따라서 디자인은 모든 상황에서 반응하고 최상의 경험을 제공해야 합니다.

모든 것 우선

어디서부터 시작해야 할까요? 모바일 중심, 콘텐츠 우선, 오프라인 우선? 웹의 유연성에 맞춰 디자인할 때 무엇을 선택해야 하나요? 대답은 '예'입니다. 모든 작업을 먼저 진행해 보세요. 모바일 우선이라는 용어는 2009년 루크 브로블레스키가 처음 창안한 이래로 웹에서의 플랫폼별 UI 및 UX 패턴을 에뮬레이션하는 것부터 웹 앱을 빌드하기 전에 모바일 앱을 빌드하는 것에서부터 최소 너비의 미디어 쿼리를 사용하고 하루라고 부르는 것까지 다양한 방식으로 해석되었습니다. 원래 의도는 모바일로 집중해야 한다는 것입니다. 루크가 말했듯이

모바일 기기의 경우 소프트웨어 개발팀이 애플리케이션에서 가장 중요한 데이터와 작업에만 집중하면 됩니다. 320x480픽셀 화면에는 불필요하고 불필요한 요소를 넣을 공간이 없습니다. 우선순위를 정해야 합니다. 따라서 모바일 우선을 설계하게 되면 오늘날의 데스크톱 액세스가 사용되는 웹사이트에 흩어져 있는 우회와 인터페이스 쓰레기 없이 사용자가 수행하고자 하는 주요 작업에 중점을 둔 경험을 얻을 수 있습니다. 이렇게 하면 사용자 경험과 비즈니스 환경이 개선됩니다.

루크 브로블레프스키

사용자가 사이트에서 달성하고자 하는 필수 작업에만 웹사이트의 각 보기를 집중시키고, 화면 공간이 넓다는 이유만으로 아이디어에 다른 내용을 추가하지 마세요.

두 번째 원칙은 반응형 웹 디자인에서 '다양한 경험의 그라데이션'에서 드러납니다. 모든 사용자를 위해 동일하고 픽셀 단위로 완벽한 단일 환경을 제공하는 것이 작업의 목표가 되어서는 안 됩니다. 이는 거의 불가능한 일입니다.

웹 환경을 고정된 것으로 여기지 말고, 사용자의 기기가 현재 상황에 맞는 최상의 환경을 구축하기 위해 사용할 추천의 집합이라고 생각하세요. 이를 위해서는 점진적 개선이 필요합니다.

점진적 개선

점진적 개선은 표준 HTML, CSS, JavaScript에서 시작하여 API를 사용할 수 없을 때 적절한 대체 기능을 사용하여 그 위에 기능 레이어를 추가하는 등 어디서나 실행되는 코드를 작성할 수 있게 하는 패턴입니다.

어떻게 개선할 수 있을까요? 특성 감지는 지원을 받기 위해 테스트를 실행하고 해당 테스트 결과에 따라 대응하는 패턴입니다. 이를 위한 여러 가지 기본 제공 웹 플랫폼 도구 및 방법이 있습니다.

@supports를 사용하여 CSS 기능의 브라우저 지원 여부를 확인하고 결과에 따라 규칙을 적용합니다. 이는 CSS 속성과 값 모두에 적용됩니다. 속성이 지원되고 값이 지원되지 않는 경우 지원되지 않는 속성과 마찬가지로 실패합니다. JavaScript 코드는 CSSSupportsRule를 통해 액세스할 수 있습니다.

대부분의 새로운 웹 플랫폼 기능은 기존 객체에 연결되므로 객체 스타일 감지의 '기능'은 자바스크립트에서 잘 작동하며 요소의 속성이나 메서드 확인과 같은 다른 유사한 조회에서도 잘 작동합니다.

최신 JavaScript를 출시하려면 module/nomodule 패턴을 사용하여 최신 브라우저에는 더 작은 페이로드를, 이전 브라우저로 대체 환경을 제공하는 강력한 기능을 제공하면 됩니다. 이렇게 하면 ES 모듈을 지원하는 브라우저에서 promise, 클래스, 화살표 함수, const, let와 같은 JavaScript 기능의 새로운 기준을 사용할 수 있다는 장점이 있습니다.

여러 형태의 특성 감지를 결합하여 향상된 기준을 만들 수도 있습니다. BBC News팀에서 만든 이 기능을 Cutting the Mustard라고 하며, 이를 통해 모든 사용자에게 핵심 환경을 제공하고 특정 기능 감지 기준에 도달한 후에만 환경 개선을 시작할 수 있습니다.

기기 감지 방지

사용자 에이전트 문자열을 기반으로 지원을 가정하는 대신 직접 기능 지원을 테스트해야 합니다.

사용자 에이전트 문자열은 결코 안정적으로 신뢰할 수 있는 것이 아닙니다. '정답을 추측'하기 위해 존재하는 모든 브라우저, 운영체제, 기기 조합에 대한 거의 완벽한 지식을 갖추고 있어야 합니다. 이러한 리디렉션이 사용자 스푸핑에 취약한 경우도 있습니다. 예를 들어, 모바일 브라우저의 데스크톱 사이트 리디렉션은 데스크톱 사용자 에이전트 문자열을 스푸핑하는 것만큼이나 간단한 경우가 많습니다.

게다가 브라우저에서는 기능 감지를 위한 사용자 에이전트 문자열을 지원 중단 이유로 구체적으로 불러온 사용자 에이전트 문자열을 고정하는 작업을 진행 중이며, 이로 인해 이전보다 사용자 및 기기를 식별할 때보다 안정성이 더욱 떨어졌습니다.

콘텐츠 우선

웹 디자인의 또 다른 원칙은 콘텐츠를 먼저 시작한다는 것입니다. 예를 들어 주식 가격 그래프가 포함된 실시간 주식 시세 표시기는 기본적으로 일정 기간 동안의 주식 가격을 표시하는 표로, 사이트를 새로고침하는 링크를 포함할 수 있습니다.

그런 다음 타이머에서 테이블의 값을 업데이트하기 위한 자바스크립트와 가져오기 요청을 사용하거나 소켓을 사용하여 실시간 푸시 기반 업데이트를 제공할 수 있습니다. CSS, SVG, 캔버스 등으로 결과를 그래프로 표시하기 위해 다시 개선할 수 있습니다. 하지만 핵심은 콘텐츠입니다.

내장 디자인

  • 모바일은 사용자 환경에 초점을 맞춘 제약조건입니다.
  • 디자인 과정에서 콘텐츠와 핵심 기능을 강조합니다.
  • 가능한 경우 고급 기능을 사용하여 점진적으로 기능을 개선합니다.

이러한 원칙을 결합하여 내장된 디자인이라는 새로운 것을 제공합니다. 젠 시몬스는 내장 레이아웃 설계에서 그리드, Flexbox, 흐름 레이아웃, 쓰기 모드와 같은 최신 CSS 도구를 사용하여 사용자 인터페이스를 디자인하고 빌드하는 방법을 설명합니다. 이러한 도구를 사용해 다음과 같이 말합니다.

레이아웃은 우리가 갖고 있는 콘텐츠와 우리가 추구하는 디자인에 본질적으로 될 수 있습니다.

젠 시먼스

이 새로운 CSS를 통해 디자이너는 최신 웹 디자인 원칙에 부합하는 방식으로 레이아웃을 다시 제어할 수 있습니다. 고정된 화면 크기를 기반으로 고정 양식을 만드는 대신, 콘텐츠의 고유한 속성(예: 크기, 텍스트 크기, 사용 가능한 공간)을 한 번에 모두 활용하여 레이아웃이 발생하는 콘텐츠 기반 규칙을 정의합니다. 이를 통해 모든 픽셀의 배치를 제어하지 않고도 콘텐츠와 상호작용하는 동안 디자인을 실현할 수 있습니다.

내장형 레이아웃은 웹 전체의 컨트롤에 관한 대화를 이끌어내며 이에 대한 정의를 제공합니다. 웹에서의 제어는 각 사이트 방문자의 기기, 화면 크기, 색상, 글꼴, 레이아웃 또는 기능을 지시하는 것이 아닙니다. 웹 제어는 브라우저가 환경을 조합하는 데 사용할 규칙을 작성하여 프로그레시브 웹 앱의 사용자별로 고유한 규칙을 만드는 것입니다.

웹 실적

PWA에서 가장 중요하지만 중요한 마지막 기반은 웹 성능입니다. 사용자에게 만족스러운 경험을 제공하는 것은 필수이며, 이를 통해 가능한 모든 방법으로 더 많은 전환을 유도할 수 있습니다.

웹 성능은 여러 단계로 구성됩니다.

  • 사용 가능한 주요 사용자 중심 측정항목을 이해합니다.
  • 모든 측정항목에 대해 목표를 설정하세요.
  • PWA를 측정합니다.
  • Google 코드 또는 서버에 기술 및 권장사항을 정적으로 적용하여 측정항목을 개선합니다.
  • 다시 측정하세요.
  • 사용자의 상황을 기반으로 각 사용자의 실시간 경험을 개선합니다.

오늘날의 웹 성능 측정항목은 콘텐츠가 화면에 표시되는 속도뿐만 아니라 웹사이트의 양방향성 및 사용자가 경험을 인식하는 방식을 측정합니다.

코어 웹 바이탈

지난 10년 동안 Google은 웹 성능의 성공을 측정하기 위해 다양한 측정항목을 사용해 왔습니다. 현재 코어 웹 바이탈이라고 하는 권장 측정항목 집합은 성능과 사용자 환경에 영향을 미치는 세 가지 주요 영역에 중점을 둡니다.

웹사이트의 성능 결과를 보여주는 코어 웹 바이탈의 측정항목 집합입니다.

코어 웹 바이탈을 사용하면 PWA가 성능 및 사용자 환경과 관련해 얼마나 좋고 나쁜지를 한눈에 확인할 수 있습니다.

PWA 기반

PWA는 모든 사용자를 위한 훌륭한 환경을 위한 기반이 되어야 하는 반응형 디자인, 모바일 및 모든 것을 최우선으로 하는 견고한 토대, 내장형 디자인, 웹 성능 측면에서 견고한 기반을 갖추어야 합니다.

자료