견고한 기반
견고한 기반은 우수한 PWA를 빌드하기 위한 기본 요구사항입니다. 이 기반을 구현하려면 몇 가지 원칙을 사용하여 웹의 제약 조건에 맞게 설계하고 코딩해야 합니다.
- 모바일을 포커스 제약 조건으로 사용합니다. 디자인의 각 뷰가 필수 콘텐츠와 상호작용에만 초점을 맞추도록 합니다.
- 디자인 프로세스에서 콘텐츠와 핵심 기능을 강조합니다.
- 필요에 따라 점진적으로 개선합니다. 가장 간단하고 가장 널리 사용되는 도구로 구성요소의 핵심 콘텐츠와 기능을 빌드하는 것으로 시작합니다. 제한 없는 액세스. 그런 다음 사용하려는 고급 기능을 테스트하고 이를 사용하여 구성요소를 개선합니다.
- 네트워크 연결, 입력 유형, CPU 또는 GPU 출력과 관계없이 사용자 중심의 웹 성능 측정항목에 중점을 둔 빠르고 우수한 사용자 환경을 제공하고 실제 사용자 측정항목을 확인하며 모든 사용자를 대상으로 푸시 성능을 제공합니다.
이러한 원칙을 따르고 최신 패턴과 웹 기능으로 개선하면 진정으로 본질적인 디자인으로 빠르고 멋진 환경을 만들 수 있습니다. 픽셀 대신 제약 조건을 기반으로 하는 디자인으로, 모든 사용자가 자신의 특정 탐색 컨텍스트에 가장 적합한 방식으로 콘텐츠와 핵심 기능에 액세스할 수 있습니다.
반응형 웹 디자인
Ethan Marcotte의 2010년 A List Apart 기사 반응형 웹 디자인 이후 디자이너와 개발자는 다양한 화면 크기와 기기에서 작동하는 사용자 인터페이스를 만드는 유연한 환경을 구축하도록 독려해 왔습니다.
하지만 그 과정에서 모바일, 태블릿, 데스크톱 크기로 줄어들었으며, 너비는 iOS 화면 크기의 영향을 크게 받았습니다. 최신 CSS와 반응형 디자인의 원래 의도에 다시 초점을 맞추면 사이트의 스크러시 효과를 다시 살릴 수 있습니다.
반응형 웹 디자인에는 세 가지 기술적 요소가 있습니다.
- 유동 그리드
- 유연한 미디어
- 미디어 쿼리
이든은 이러한 기술적 요구사항만으로는 충분하지 않으며 앞으로 나아가려면 다른 사고방식도 필요하다고 결론짓습니다.
모바일 사용자에 대한 오해
반응형 디자인 초기에는 사이트를 더 쉽게 디자인하기 위해 가정이 적용되었습니다. 예를 들어 작은 환경은 휴대전화용으로 너비가 320px이고, 중간 환경은 태블릿용으로 너비가 1024px이며, 그보다 큰 환경은 데스크톱용입니다. 작은 화면에는 터치 기능이 있었지만 대형 화면에는 없었습니다. 휴대전화 사용자는 서두르고 산만한 상태이므로 '가벼운' 환경이 필요했습니다.
이러한 주장은 모두 사실이 아닙니다. 화면 크기나 기기 유형에 따라 사용자의 요구사항이 근본적으로 다르다는 가정으로 인해 지속되는 모바일에 관한 잘못된 생각입니다. 이는 검토에 적합하지 않습니다.
예를 들어 오늘날 모바일과 데스크톱에 설치할 수 있는 소셜 네트워크 PWA를 들 수 있습니다. 데스크톱에서 많은 사용자가 작업하는 동안 화면 한쪽에 피드가 있는 좁은 창을 유지할 수 있으며, 사용 가능한 너비 때문에 휴대기기를 사용하고 있다고 가정하는 것은 잘못된 것입니다.
브라우저 탭 외부의 PWA 세계는 미니 모드, 폴더블 기기와의 작업 등 반응형 디자인 세계에 새로운 과제를 추가하고 있습니다.
미니 모드
데스크톱 기기에 PWA가 설치된 경우 창이 브라우저 창보다 작고 모바일 뷰포트보다 작을 정도로 매우 작아질 수 있습니다. 이는 웹에서 새로운 기능입니다. 200x100 CSS픽셀까지 작을 수 있는 창인 미니 모드를 지원할 수 있습니다.
요즘 PWA를 만들 때는 음악 플레이어의 제어 버튼, 대시보드 정보, 빠른 작업과 같은 반응형 웹 디자인 덕분에 미니 모드에서 제공할 항목을 고려하는 것이 좋습니다.
데스크톱에서는 PWA가 브라우저용으로 설계한 최소 창보다 작은 창에서 렌더링될 수 있습니다. 반응형 웹 디자인에 새로운 중단점인 미니 모드를 추가합니다.
폴더블 및 하이브리드
요즘에는 폴더블 및 하이브리드 기기도 일반적입니다.
- 작은 폴더형 휴대전화
- 휴대전화나 태블릿으로 사용할 수 있는 폴더블 기기
- 태블릿으로 변환할 수 있는 노트북
- 키보드와 트랙패드가 있어 노트북으로 사용할 수 있는 태블릿
- 그러면 휴대전화를 허브를 사용하여 데스크톱으로 전환할 수 있습니다.
모든 웹사이트에 이 문제가 있지만 프로그레시브 웹 애플리케이션을 사용하면 앱이 설치되는 시점을 제어하고 책임질 수 있습니다. 따라서 디자인은 모든 상황에서 반응하고 최상의 경험을 제공해야 합니다.
모든 것 우선
그렇다면 어디서부터 시작해야 할까요? 모바일 우선, 콘텐츠 우선, 오프라인 우선? 웹의 유연성을 고려하여 설계할 때 다음 중 어느 것이 유리할까요? 답은 '예'입니다. 모든 것이 우선입니다. 모바일 우선이라는 용어는 2009년 루크 워블레프스키가 처음 사용한 이후로 웹에서 플랫폼별 UI 및 UX 패턴을 에뮬레이션하는 것부터 웹 앱을 빌드하기 전에 모바일 앱을 빌드하는 것, 최소 너비 미디어 쿼리를 사용하고 끝내는 것 등 다양한 방식으로 해석되어 왔습니다. 하지만 원래 의도는 모바일은 집중을 유도한다는 것입니다. 루크가 말한 것처럼
모바일 기기를 사용하려면 소프트웨어 개발팀이 애플리케이션에서 가장 중요한 데이터와 작업에만 집중해야 합니다. 320x480픽셀 화면에는 불필요한 요소가 들어가 있는 공간이 없습니다. 우선순위를 두어야 합니다. 따라서 팀에서 모바일 우선으로 디자인하면 오늘날 데스크톱에서 액세스하는 웹사이트에 산재한 우회 경로와 인터페이스 파편 없이 사용자가 달성하려는 주요 작업에 중점을 둔 환경이 만들어집니다. 이는 사용자 경험과 비즈니스 측면에서도 우수한 측면입니다.
루크 워블레프스키
웹사이트의 각 뷰는 사용자가 웹사이트에서 수행하려는 필수 작업에만 집중하고 화면 공간이 더 많다고 해서 아이디어에 더 많은 항목을 추가하지 마세요.
두 번째 원칙은 반응형 웹 디자인에서 암시됩니다. 즉, '다양한 환경의 그라데이션'입니다. 모든 사용자에게 동일한 픽셀 완벽한 환경을 제공하는 것이 목표가 되어서는 안 됩니다. 불가능에 가깝기 때문입니다.
웹 환경을 고정된 것으로 생각하지 말고 사용자의 기기가 현재 상황에 맞는 최적의 환경을 구축하는 데 사용할 권장사항 집합으로 생각합니다. 이를 위해서는 점진적 향상을 수용해야 합니다.
점진적 개선
점진적 개선은 표준 HTML, CSS, JavaScript에서 시작하여 모든 곳에서 실행되는 코드를 작성하고 API를 사용할 수 없는 경우 적절한 대체 옵션으로 기능 레이어를 추가할 수 있는 패턴입니다.
개선하려면 어떻게 해야 하나요? 기능 감지는 지원 테스트를 수행하고 해당 테스트 결과에 따라 반응하는 패턴입니다. 이를 위한 여러 가지 내장 웹 플랫폼 도구와 관행이 있습니다.
@supports를 사용하여 CSS 기능의 브라우저 지원을 확인하고 결과에 따라 규칙을 적용합니다.
이는 CSS 속성과 값 모두에 적용됩니다. 속성이 지원되고 값이 지원되지 않는 경우 지원되지 않는 속성과 마찬가지로 실패합니다. JavaScript 코드는 CSSSupportsRule를 통해 이에 액세스할 수 있습니다.
대부분의 새로운 웹 플랫폼 기능은 기존 객체에 연결되므로 객체 스타일 감지에서 'feature'는 JavaScript에서 잘 작동하며, 요소의 속성 또는 메서드 확인과 같은 다른 유사한 조회도 마찬가지입니다.
최신 JavaScript를 제공하려면 module/nomodule 패턴을 사용하여 더 최신 브라우저에는 더 적은 페이로드를 사용해 더 강력한 기능을 제공하고 이전 브라우저에는 대체 환경을 제공할 수 있습니다. 이렇게 하면 ES 모듈을 지원하는 브라우저에서 약속, 클래스, 화살표 함수, const, let와 같은 JavaScript 기능의 새로운 기준을 보장할 수 있습니다.
여러 형태의 기능 감지를 결합하여 향상된 기준선을 만들 수도 있습니다. BBC News팀에서 만든 'Cutting the Mustard'라는 이 기능을 사용하면 모든 사용자에게 핵심 환경을 제공하고 특정 기능이 감지된 기준에 도달한 후에만 환경을 개선할 수 있습니다.
기기 감지 방지
User-Agent 문자열을 기반으로 지원을 가정하는 대신 기능 지원을 직접 테스트해야 합니다.
사용자 에이전트 문자열은 항상 신뢰할 수 없었습니다. '올바른 것으로 추측'하기 위해서는 모든 브라우저, 운영체제, 기기의 조합에 관해 완벽에 가까운 지식이 있어야 합니다. 그렇더라도 사용자 스푸핑에 취약합니다. 예를 들어 모바일 브라우저에서 데스크톱 사이트 리디렉션은 데스크톱 사용자 에이전트 문자열을 스푸핑하는 것만큼 간단합니다.
또한 브라우저는 사용자 에이전트 문자열을 동결하기 위해 노력하고 있으며, 기능 감지를 위한 사용자 에이전트 문자열이 지원 중단 이유로 구체적으로 언급되어 사용자와 기기를 식별하는 데 이전보다 훨씬 더 신뢰할 수 없게 되었습니다.
콘텐츠 우선
웹용 디자인의 또 다른 원칙은 콘텐츠를 먼저 고려하는 것입니다. 예를 들어 주식 가격 그래프가 포함된 실시간 주식 티커는 본질적으로 일정 기간 동안의 주가가 표시된 주식 표로, 사이트를 새로고침할 수 있는 링크가 있을 수 있습니다.
그런 다음 JavaScript와 가져오기 요청을 사용하여 타이머에서 테이블 값을 업데이트하거나 소켓으로 향상하여 실시간 푸시 기반 업데이트를 제공할 수 있습니다. CSS, SVG, 캔버스 등을 사용하여 결과를 그래프로 표시하도록 다시 개선할 수 있습니다. 하지만 핵심은 콘텐츠에서 시작됩니다.
내장 디자인
- 모바일은 사용자 경험에 대한 제약 조건입니다.
- 디자인 과정에서 콘텐츠와 핵심 기능을 강조합니다.
- 가능한 경우 고급 기능을 통해 점진적으로 개선하고 있습니다.
이러한 원칙을 결합하면 새로운 내재적 디자인이 탄생합니다. 내장 레이아웃 설계 강연에서 젠 시몬스는 그리드, Flexbox, 흐름 레이아웃, 작성 모드와 같은 최신 CSS 도구를 사용하여 사용자 인터페이스를 디자인하고 빌드하는 방법을 설명합니다. 이러한 도구를 사용하면 다음과 같은 이점이 있다고 합니다.
레이아웃은 우리가 갖고 있는 콘텐츠와 우리가 제공하고자 하는 디자인에 고유하도록 할 수 있습니다.
젠 시몬스
이 새로운 CSS를 사용하면 디자이너가 레이아웃을 어느 정도 제어할 수 있지만 최신 웹 디자인 원칙에 맞게 제어할 수 있습니다. 고정된 화면 크기를 기반으로 고정된 양식을 만드는 대신 콘텐츠의 고유한 속성(예: 콘텐츠의 크기, 텍스트 크기, 사용 가능한 공간)을 모두 한 번에 활용하여 레이아웃이 실행되는 콘텐츠 기반 규칙을 정의합니다. 모든 픽셀의 위치를 제어하지 않고도 콘텐츠와 상호작용하면서 디자인을 구현할 수 있습니다.
내재 레이아웃은 웹에서 제어에 관한 대화를 종합하여 정의합니다. 웹에서 제어한다는 것은 사이트 방문자마다 기기, 화면 크기, 색상, 글꼴, 레이아웃, 기능을 지정하는 것이 아닙니다. 웹에서 제어한다는 것은 브라우저가 환경을 조합하는 데 사용할 규칙을 작성하여 프로그레시브 웹 앱의 각 사용자에게 고유하게 빌드하는 것을 의미합니다.
웹 성능
마지막으로 PWA의 중요한 기반 중 하나는 웹 성능입니다. 사용자에게 훌륭한 환경을 제공하는 것은 필수입니다. 이렇게 하면 가능한 모든 방법으로 전환수를 늘릴 수 있습니다.
웹 성능에는 여러 단계가 포함됩니다.
- 사용 가능한 주요 사용자 중심 측정항목을 이해합니다.
- 측정항목마다 목표를 설정하세요.
- PWA를 측정합니다.
- 코드 또는 서버에 기법과 권장사항을 정적으로 적용하여 측정항목을 개선합니다.
- 다시 측정합니다.
- 사용자의 상황에 따라 실시간으로 각 사용자의 환경을 개선합니다.
오늘날 웹 성능 측정항목은 콘텐츠가 화면에 표시되는 속도뿐만 아니라 웹사이트의 상호작용 정도와 사용자가 환경을 인식하는 방식도 측정합니다.
코어 웹 바이탈
지난 10년 동안 Google은 웹 성능의 성공을 측정하기 위해 다양한 측정항목을 사용해 왔습니다. 현재 Core Web Vitals라고 하는 권장 측정항목은 성능과 사용자 환경에 영향을 미치는 세 가지 주요 영역에 중점을 둡니다.
- 로드: 최대 콘텐츠 페인트 (LCP)로 표시됩니다.
- 상호작용성: 다음 페인트에 대한 상호작용(INP)으로 표시됩니다.
- 시각적 안정성: 누적 레이아웃 변경(CLS)으로 표시됩니다.
핵심 성능 보고서를 사용하면 성능과 사용자 환경 측면에서 PWA가 얼마나 우수한지 한눈에 확인할 수 있습니다.
PWA 기반
PWA는 모든 사용자에게 훌륭한 환경을 제공하기 위한 기반으로서 반응형 디자인, 모바일 및 모든 것 우선, 내재적 디자인, 웹 성능에 대한 탄탄한 기반을 갖추는 것이 중요합니다.