From ee778d6eea54935fd05022e0ba8c49456003381a Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:24 +0100 Subject: unslug ko: move --- .../progressive_web_apps/introduction/index.html | 92 ++++++ .../responsive/media_types/index.html | 346 +++++++++++++++++++++ .../\354\206\214\352\260\234/index.html" | 92 ------ 3 files changed, 438 insertions(+), 92 deletions(-) create mode 100644 files/ko/web/progressive_web_apps/introduction/index.html create mode 100644 files/ko/web/progressive_web_apps/responsive/media_types/index.html delete mode 100644 "files/ko/web/progressive_web_apps/\354\206\214\352\260\234/index.html" (limited to 'files/ko/web/progressive_web_apps') diff --git a/files/ko/web/progressive_web_apps/introduction/index.html b/files/ko/web/progressive_web_apps/introduction/index.html new file mode 100644 index 0000000000..e253c96ce9 --- /dev/null +++ b/files/ko/web/progressive_web_apps/introduction/index.html @@ -0,0 +1,92 @@ +--- +title: 프로그레시브 웹 앱 소개 +slug: Web/Progressive_web_apps/소개 +tags: + - PWA + - js13kGames + - 소개 + - 프로그레시브 + - 프로그레시브 웹 앱 +translation_of: Web/Progressive_web_apps/Introduction +--- +
{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}
+ +

이 문서는 프로그레시브 웹 앱(PWA)의 소개입니다. PWA가 무엇이고 일반 웹 앱에 어떤 이점을 가져다주는지 설명합니다.

+ +

프로그레시브 웹 앱이 무엇인가요?

+ +

PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다.

+ +

예를 들어, 웹 앱은 발견이 쉽습니다 — 어플리케이션을 설치하는 것보다 웹사이트에 방문하는 것이 훨씬 쉽고 빠르며, 링크로 웹 앱을 공유할수도 있습니다.

+ +

반면에, 네이티브 앱은 운영체제와 보다 잘 통합되므로 더 부드러운 사용자 경험을 제공할 수 있습니다. 네이티브 앱은 설치할 수 있으므로 오프라인에서 동작하며, 사용자는 홈 화면의 아이콘을 탭하여 브라우저를 사용하여 이동하는 것보다 선호하는 앱에 더 쉽게 접근할 수 있습니다.

+ +

PWA는 이들과 동일한 이점을 즐길 수 있는 웹 앱을 생성하는 능력을 제공합니다.

+ +

완전히 새로운 개념은 아닙니다 — 이런 아이디어는 과거에 다양한 접근 방법으로 웹 플랫폼상에서 여러번 재검토되었습니다. 점진적인 향상과 반응형 디자인은 이미 우리가 모바일 친화적인 웹사이트를 구축할 수 있게 해주고 있습니다. 오프라인에서 동작하는 것과 앱을 설치하는 것은 몇 년 전 Firefox OS 생태계에서 이미 가능했었습니다.

+ +

하지만, PWA는 웹을 훌륭하게 만드는 이미 존재하는 어떤 기능도 제거하지 않은 상태로 이 모든 것 그리고 그 이상을 제공합니다.

+ +

앱을 PWA로 만드는 것은 무엇인가요?

+ +

위에서 암시했듯이, PWA는 하나의 기술로 생성된 것이 아닙니다. 이는 일부 특정 패턴, API 및 다른 기능들을 포함하는 웹 앱을 구축하는 하나의 새로운 철학을 나타냅니다. 첫눈에 웹 앱이 PWA인이 아닌지 구분하기는 쉽지 않습니다. 앱이 특정 요구 사항을 만족하거나 다음 기능들이 구현되었을 때 PWA라고 볼 수 있습니다: 오프라인에서 동작, 설치가 가능, 쉬운 동기화, 푸시 알림, 등.

+ +

게다가, 앱의 완성도를 퍼센트로 측정하는 도구들도 있습니다. (Lighthouse가 현재 가장 유명합니다.) 다양한 기술적 이점을 구현함으로써, 앱을 더 점진적이게 만들 수 있고, 더 높은 Lighthouse 점수를 받을 수 있습니다. 하지만 이는 대략적인 지표일뿐입니다.

+ +

다음은 웹 앱을 PWA로 식별되기 위해 확인해야 하는 몇 가지 핵심 원칙입니다.

+ + + +

이 모든 것들을 할만한 가치가 있나요?

+ +

물론입니다! 비교적 적은 노력으로 PWA 핵심 기능들을 구현할 수 있으며, 그 이점은 거대합니다. 예를 들면:

+ + + +

PWA 라우트를 시도하고 네이티브 앱 보다 더 향상된 웹 사이트 경험을 선택하여 측정 가능한 의미있는 이득을 본 회사들의 성공 스토리가 많습니다. PWA Stats 웹 사이트는 이러한 이점을 나타내는 많은 사례 연구들을 공유합니다.

+ +

가장 잘 알려진 성공 스토리는 아마 Flipkart Lite 일 것입니다 — 2015년에 프로그레시브 웹 앱으로 사이트를 재구축해 전환율을 70% 상승시킨 인도의 가장 큰 전자 상거래 사이트입니다. AliExpress PWA 역시 새로운 사용자에 대한 전환율을 104% 상승시키는 것으로 웹이나 네이티브 앱보다 훨씬 더 나은 결과를 보였습니다. 이윤 증가 및 PWA로 전환을 위해 상대적으로 적은 양의 작업을 놓고 봤을 때, 이점은 분명합니다.

+ +

더 많은 예제는 pwa.rocks 의 목록에서 확인하시기 바랍니다. hnpwa.com 페이지는 특별히 언급할 가치가 있습니다 — 여기에는 일반적인 TodoMVC 앱 대신 다양한 프론트엔드 프레임워크의 사용을 볼 수 있는 Hacker News 웹사이트의 구현 예제가 나열되어 있습니다.

+ +

심지어 PWABuilder 웹사이트를 사용해 PWA를 온라인에서 생성할수도 있습니다.

+ +

Service worker와 푸시에 관련된 정보는 최신 사이트에서 service worker를 사용하는 예제를 모아둔 Service Worker Cookbook을 확인하시기 바랍니다.

+ +

PWA 접근은 시도해볼만한 가치가 있으며, 여러분의 앱에서 동작하는지 스스로 확인해보시기 바랍니다.

+ +

브라우저 호환성

+ +

앞서 언급했듯이, PWA는 하나의 API에 의존하지 않고, 가능한 최고의 웹 경험을 전달하기 위한 목표를 달성하기 위해 다양한 기술들을 사용합니다.

+ +

PWA를 위해 요구되는 핵심 요소는 service worker 지원입니다. 고맙게도 service worker는 현재 데스크탑 및 모바일의 모든 주요 브라우저에서 지원됩니다.

+ +

웹 앱 Manifest, 푸시, 알림, 홈 화면에 추가 기능과 같은 다른 기능들도 널리 지원되고 있습니다. 현재 Safari에서는 웹 앱 Manifest 및 홈 화면에 추가에 지원이 제한적이며 웹 푸시 알림은 지원하지 않습니다. 반면, 다른 주요 브라우저에서는 이 모든 기능들을 지원합니다.

+ +

이러한 API의 일부는 실험중이며 문서도 여전히 완성되지 않았지만, Flipkart 와 AliExpress와 같은 성공 스토리를 보면 여러분의 웹 앱에 PWA 기능의 일부를 시도하고 구현하는 것에 대해 이미 납득이 되었을것입니다.

+ +

무엇보다도 여러분은 프로그레시브 향상 규칙을 따라야 합니다 — 이러한 향상을 제공하는 기술들은 지원이 되는 경우에만 사용하고, 그렇지 않은 경우에도 여전히 기본 기능을 제공하시기 바랍니다. 이 방법으로 모든 사용자가 앱을 사용할 수 있지만, 최신 브라우저를 사용하는 사용자는 PWA 기능으로부터 더 많은 이점을 얻을 수 있습니다.

+ +

예시 어플리케이션

+ +

이 문서 시리즈에서는 js13kGames 2017 대회의 A-Frame 카테고리에 제출된 게임에 대한 정보를 나열하는 아주 간단한 웹사이트의 소스코드를 살펴볼 것입니다. 여러분은 웹 사이트의 실제 컨텐츠가 무엇인지에 대해서는 생각할 필요가 없습니다 — 중요한 점은 여러분의 프로젝트에 PWA 기능을 어떻게 사용하는지를 배우는 것입니다.

+ +

온라인 버전은 mdn.github.io/pwa-examples/js13kpwa (소스 코드도 확인하세요)에서 확인하실 수 있으며, 다음 몇 가지 문서에서 자세히 설명할 것입니다.

+ +

이제, 우리의 예제 앱의 구조에 대해 살펴볼 이 시리즈의 두 번째 파트로 이동합시다.

+ +

{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}

diff --git a/files/ko/web/progressive_web_apps/responsive/media_types/index.html b/files/ko/web/progressive_web_apps/responsive/media_types/index.html new file mode 100644 index 0000000000..2c9fceaca0 --- /dev/null +++ b/files/ko/web/progressive_web_apps/responsive/media_types/index.html @@ -0,0 +1,346 @@ +--- +title: 미디어 +slug: Web/CSS/시작하기/미디어 +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +

{{ CSSTutorialTOC() }}

+
+ 중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/21)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+

{{ previousPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}CSS 시작하기 안내서의 14번쨰 장. 지금까지 이번 안내서에서는 많은 부분을 Document를 어떻게 보여 줄것인지 결정하는 CSS의 속성과 변수에 관해 소개 했다. 이번에는 Stylesheet의 구조와 목적에 대해 다시 살펴 보자.

+

정보 : 미디어

+

CSS의 목적은 Document가 사용자에게 어떻게 보여질 것인가를 설정하는 것이다. 전시되는 형태는 하나 이상의 형식이 있다.

+

예를 들면, 아마도 이 페이지도 화면 표시 장치를 통해 보여질 것이다. 그러나 큰 화면용으로 프로젝터나 프린트해서 보는 경우도 있을 것이다. 이런 다양한 미디어의 경우 그 고유의 문자셋같은 특징이 있을 것이다. CSS는 document를 각각의 미디어에 표시하기 위한 다양한 방법을 제공한다.

+

미디어의 특정 타입을 정하는 규칙을 추가 하려면 {{ CSSXref("@media") }} 다음에 미디어 타입 넣고, 그 다음에 대괄호({})로 해당 규칙을 추가 하라.

+
+
+ 예제
+

웹사이트에 있는 document는 그 사이트 전체를 살펴볼수 있도록 조절 할 수 있는 영역을 제공한다.

+

마크업 언어에서는, 조정영역의 부모 element의 id가 nav-area이다. ({{ HTMLVersionInline(5) }}에서는 id 속성이 포함된 {{ HTMLElement("div") }}대신에 {{ HTMLElement("nav") }} element로 사용 할 수 있다.)

+

Document가 프린트 될 경우는 이 조정 영역이 필요 없으므로 stylesheet에서는 완전히 이 영역을 제거한다.

+ 
@media print {
+  #nav-area {display: none;}
+  }
+
+
+

일반적인 미디어 타입은 아래와 같다.

+ + + + + + + + + + + + + + + + + + + +
screen컬러 컴퓨터 표시 장치
print출력 장치
projection프로젝트 출력 장치
all그외 모든 미디어 장치(기본 설정)
+
+
+ 좀더 자세히
+

한 무리의 규칙들의 미디어 타입을 설정하는데는 다른 방법들도 있다.

+

Stylesheet가 document로 연결되어 있을때 document의 마크업 언어는 미디어 타입을 설정하는 것을 허용한다. 예를 들면, HTML내의 LINK 태그에서 media속성으로 옵션항목으로 미디어 타입을 설정 할 수 있다.

+

CSS에서 stylesheet의 앞부분에 {{ CSSXref("@import") }}로 URL로 부터 다른 stylesheet를 불러 올 수 있다. 추가적으로 미디어 타입도 사용 가능하다.

+

이와 같은 규직으로, 미디어 타입별로 다른 파일에 분리하여 관리 가능하다. 이렇게 함으로써 stylesheet를 구조화하는데 유용하게 사용한다.

+

좀더 자세한 미디어 타입에 대해서는 CSS의 사양서중 Media를 참고하라.

+

{{ cssxref("display") }}속성에 대해서 좀더 자세한 사항은 이 안내서 나중에 소개될 XML data를 참고하라.

+
+

출력

+

CSS에는 인쇄 매체나 프린터 출력을 위한 특별 지원을 한다

+

{{ cssxref("@page") }} 규칙을 통해 여백을 설정할 수 있다. 양면출력을 위해서는 @page:left와 @page:right로 각각의 여백을 개별로 설정 할 수 있다.

+

출력 매체를 위해 사용되는 단위는 인치 (in), 포인트(pt = 1/72 inch), 센티미터(cm)와 밀리미터(mm)등을 사용 할 수 있다. 글자 크기 설정과 맞추기 위해 사용하는 ems(em)과 퍼센트(%)도 사용하기에 적절하다.

+

Document의 내용중 페이지 분할을 위해서는 { cssxref("page-break-before") }}나 {{ cssxref("page-break-after") }}, {{ cssxref("page-break-inside") }}속성을 사용할 수 있다.

+
+
+ 예제
+

아래 예제는 페이지 여백 4방향 모두를 1인치로 설정한다.

+ 
@page {margin: 1in;}
+
+

 

+

아래 규칙은 모든 H1 element는 새 페이지에서 시작하도록 한다.

+ 
h1 {page-break-before: always;}
+
+
+
+
+ 좀더 자세히
+

CSS의 출판 매체 지원에 대한 사항은 CSS사양서의 Paged media를 확인 하라.

+

CSS의 다른 특징처럼 프린트 출력도 브라우저의 설정에 따라 다르다. 예를 들어 모질라 브라주저는 프린트 출력시 기본 바깥 여백과 머릿말, 꼬릿말이 지원된다. 사용자가 어떤 브라우저를 사용하는지, 그 브라우저의 설정값 또한 알수 없기 때문에 해당 페이지 출력물 결과를 알수 없다.

+
+

사용자 인터페이스

+

CSS는 컴퓨터 모니터같은 표시장치를 위한 특별한 사용자 인터페이스를 지원한다. 이 속성으로 Document를 동적으로 사용자가 사용자 인터페이스로 동작 할 수 있도록 변경한다.

+

사용자 인터페이스 장치에 대한 특별한 미디어 타입은 없다.

+

단지 5가지 설렉터가 있을 뿐이다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
설렉터선택
E{{ cssxref(":hover") }}포인터가 E로 명시된 element위에 놓일 경우
E{{ cssxref(":focus") }}키보드 포커스를 가진 E element
E{{ cssxref(":active") }}사용자 현재 동작에 개임된 E element
E{{ cssxref(":link") }}최근에 방문하지 않은 URL을 가진 Hyperlink인 E element
E{{ cssxref(":visited") }}최근에 방문한 URL을 가진 Hyperlink인 E element
+
+

주의: :visited 설렉터에서 획득한 정보는 {{ gecko("2.0") }}에만 해당된다. 좀더 자세한 사항은 Privacy and the :visited selector을 보라.

+
+

{{ cssxref("cursor") }}속성은 포인터의 모양을 설정한다. 몇몇 일반적인 모양은 다음과 같다. 브라우저에서 마우스를 아래 리스트에 각각 아이템으로 옮기면 그 모양을 확인 할 수 있다.

+ + + + + + + + + + + + + + + + + + + + + + + +
설렉터선택
pointer링크임을 나타낼때
wait프로그램이 실행중이라 입력을 받지 못하는 상태일때
progress프로그램이 작업을 수행하고 있지만 입력을 받을 수 있는 상태
default기본 상태(보통 화살표 모양)
+

{{ cssxref("outline") }}속성은 키보드 포커스를 가리키는 외곽선을 생성할때 사용한다. 그 값은 사용자가 방향을 설정할 수 없다는 것을 제외하고는 {{ cssxref("border") }}속성과 유사하다.

+

Some other features of user interfaces are implemented using attributes, in the normal way. For example, an element that is disabled or read-only has the disabled attribute or the readonly attribute. Selectors can specify these attributes like any other attributes, by using square brackets: {{ mediawiki.external('disabled') }} or {{ mediawiki.external('readonly') }}.

+
+
+ Example
+

These rules specify styles for a button that changes dynamically as the user interacts with it:

+ 
.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  }
+
+

 

+

This wiki does not support a user interface on the page, so these buttons do not "click". Here are some static images to illustrate the idea:

+ + + + + + +
+ + + + + + + + + + + + + + + + +
Click MeClick MeClick Me
 
disablednormalactive
+
+

 

+

A fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focus. It might also have a hover effect when the pointer is over it.

+
+
+
+ More details
+

For more information about user interfaces in CSS, see User interface in the CSS Specification.

+

There is an example of Mozilla's markup language for user interfaces, XUL, in Part II of this tutorial.

+
+

Action: Printing a document

+
    +
  1. Make a new HTML document, doc4.html. Copy and paste the content from here: + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Print sample</title>
+    <link rel="stylesheet" href="style4.css">
+  </head>
+  <body>
+    <h1>Section A</h11>
+    <p>This is the first section...</p>
+    <h1>Section B</h1>
+    <p>This is the second section...</p>
+    <div id="print-head">
+      Heading for paged media
+    </div>
+    <div id="print-foot">
+      Page:
+    </div>
+</body>
+</html>
+
    +
    2. +
  2. Make a new stylesheet, style4.css. Copy and paste the content from here: + 
    /*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+
    +
    3. +
  3. View this document in your browser; it uses your browser's default style.
    4. +
  4. Print (or print preview) the document; the stylesheet places each section on a separate page, and it adds a header and footer to each page. If your browser supports counters, it adds a page number in the footer. + + + + + + + +
    + + + + + + +
    + + + + + + +
    +
    + Heading for paged media
    +
    + Section A
    +
    + This is the first section...
    +
    + Page: 1
    +
    +
    +     		+ + + + + + +
    + + + + + + +
    +
    + Heading for paged media
    +
    + Section B
    +
    + This is the second section...
    +
    + Page: 2
    +
    +
    +
    +
    5. +
+ + + + + + + +
+ Challenges
Move the print-specific style rules to a separate CSS file. +

Read the {{ CSSXref("@import") }} reference page to find details of how to import the new print-specific CSS file into your style4.css stylesheet.

+

Make the headings turn blue when the mouse pointer is over them.

+
+

 See solutions to these challenges.

+

What next?

+

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

+

So far, all the style rules in this tutorial have been specified in files. The rules and their values are fixed. The next page describes how you can change rules dynamically by using a programming language: JavaScript

diff --git "a/files/ko/web/progressive_web_apps/\354\206\214\352\260\234/index.html" "b/files/ko/web/progressive_web_apps/\354\206\214\352\260\234/index.html" deleted file mode 100644 index e253c96ce9..0000000000 --- "a/files/ko/web/progressive_web_apps/\354\206\214\352\260\234/index.html" +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: 프로그레시브 웹 앱 소개 -slug: Web/Progressive_web_apps/소개 -tags: - - PWA - - js13kGames - - 소개 - - 프로그레시브 - - 프로그레시브 웹 앱 -translation_of: Web/Progressive_web_apps/Introduction ---- -
{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}
- -

이 문서는 프로그레시브 웹 앱(PWA)의 소개입니다. PWA가 무엇이고 일반 웹 앱에 어떤 이점을 가져다주는지 설명합니다.

- -

프로그레시브 웹 앱이 무엇인가요?

- -

PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다.

- -

예를 들어, 웹 앱은 발견이 쉽습니다 — 어플리케이션을 설치하는 것보다 웹사이트에 방문하는 것이 훨씬 쉽고 빠르며, 링크로 웹 앱을 공유할수도 있습니다.

- -

반면에, 네이티브 앱은 운영체제와 보다 잘 통합되므로 더 부드러운 사용자 경험을 제공할 수 있습니다. 네이티브 앱은 설치할 수 있으므로 오프라인에서 동작하며, 사용자는 홈 화면의 아이콘을 탭하여 브라우저를 사용하여 이동하는 것보다 선호하는 앱에 더 쉽게 접근할 수 있습니다.

- -

PWA는 이들과 동일한 이점을 즐길 수 있는 웹 앱을 생성하는 능력을 제공합니다.

- -

완전히 새로운 개념은 아닙니다 — 이런 아이디어는 과거에 다양한 접근 방법으로 웹 플랫폼상에서 여러번 재검토되었습니다. 점진적인 향상과 반응형 디자인은 이미 우리가 모바일 친화적인 웹사이트를 구축할 수 있게 해주고 있습니다. 오프라인에서 동작하는 것과 앱을 설치하는 것은 몇 년 전 Firefox OS 생태계에서 이미 가능했었습니다.

- -

하지만, PWA는 웹을 훌륭하게 만드는 이미 존재하는 어떤 기능도 제거하지 않은 상태로 이 모든 것 그리고 그 이상을 제공합니다.

- -

앱을 PWA로 만드는 것은 무엇인가요?

- -

위에서 암시했듯이, PWA는 하나의 기술로 생성된 것이 아닙니다. 이는 일부 특정 패턴, API 및 다른 기능들을 포함하는 웹 앱을 구축하는 하나의 새로운 철학을 나타냅니다. 첫눈에 웹 앱이 PWA인이 아닌지 구분하기는 쉽지 않습니다. 앱이 특정 요구 사항을 만족하거나 다음 기능들이 구현되었을 때 PWA라고 볼 수 있습니다: 오프라인에서 동작, 설치가 가능, 쉬운 동기화, 푸시 알림, 등.

- -

게다가, 앱의 완성도를 퍼센트로 측정하는 도구들도 있습니다. (Lighthouse가 현재 가장 유명합니다.) 다양한 기술적 이점을 구현함으로써, 앱을 더 점진적이게 만들 수 있고, 더 높은 Lighthouse 점수를 받을 수 있습니다. 하지만 이는 대략적인 지표일뿐입니다.

- -

다음은 웹 앱을 PWA로 식별되기 위해 확인해야 하는 몇 가지 핵심 원칙입니다.

- - - -

이 모든 것들을 할만한 가치가 있나요?

- -

물론입니다! 비교적 적은 노력으로 PWA 핵심 기능들을 구현할 수 있으며, 그 이점은 거대합니다. 예를 들면:

- - - -

PWA 라우트를 시도하고 네이티브 앱 보다 더 향상된 웹 사이트 경험을 선택하여 측정 가능한 의미있는 이득을 본 회사들의 성공 스토리가 많습니다. PWA Stats 웹 사이트는 이러한 이점을 나타내는 많은 사례 연구들을 공유합니다.

- -

가장 잘 알려진 성공 스토리는 아마 Flipkart Lite 일 것입니다 — 2015년에 프로그레시브 웹 앱으로 사이트를 재구축해 전환율을 70% 상승시킨 인도의 가장 큰 전자 상거래 사이트입니다. AliExpress PWA 역시 새로운 사용자에 대한 전환율을 104% 상승시키는 것으로 웹이나 네이티브 앱보다 훨씬 더 나은 결과를 보였습니다. 이윤 증가 및 PWA로 전환을 위해 상대적으로 적은 양의 작업을 놓고 봤을 때, 이점은 분명합니다.

- -

더 많은 예제는 pwa.rocks 의 목록에서 확인하시기 바랍니다. hnpwa.com 페이지는 특별히 언급할 가치가 있습니다 — 여기에는 일반적인 TodoMVC 앱 대신 다양한 프론트엔드 프레임워크의 사용을 볼 수 있는 Hacker News 웹사이트의 구현 예제가 나열되어 있습니다.

- -

심지어 PWABuilder 웹사이트를 사용해 PWA를 온라인에서 생성할수도 있습니다.

- -

Service worker와 푸시에 관련된 정보는 최신 사이트에서 service worker를 사용하는 예제를 모아둔 Service Worker Cookbook을 확인하시기 바랍니다.

- -

PWA 접근은 시도해볼만한 가치가 있으며, 여러분의 앱에서 동작하는지 스스로 확인해보시기 바랍니다.

- -

브라우저 호환성

- -

앞서 언급했듯이, PWA는 하나의 API에 의존하지 않고, 가능한 최고의 웹 경험을 전달하기 위한 목표를 달성하기 위해 다양한 기술들을 사용합니다.

- -

PWA를 위해 요구되는 핵심 요소는 service worker 지원입니다. 고맙게도 service worker는 현재 데스크탑 및 모바일의 모든 주요 브라우저에서 지원됩니다.

- -

웹 앱 Manifest, 푸시, 알림, 홈 화면에 추가 기능과 같은 다른 기능들도 널리 지원되고 있습니다. 현재 Safari에서는 웹 앱 Manifest 및 홈 화면에 추가에 지원이 제한적이며 웹 푸시 알림은 지원하지 않습니다. 반면, 다른 주요 브라우저에서는 이 모든 기능들을 지원합니다.

- -

이러한 API의 일부는 실험중이며 문서도 여전히 완성되지 않았지만, Flipkart 와 AliExpress와 같은 성공 스토리를 보면 여러분의 웹 앱에 PWA 기능의 일부를 시도하고 구현하는 것에 대해 이미 납득이 되었을것입니다.

- -

무엇보다도 여러분은 프로그레시브 향상 규칙을 따라야 합니다 — 이러한 향상을 제공하는 기술들은 지원이 되는 경우에만 사용하고, 그렇지 않은 경우에도 여전히 기본 기능을 제공하시기 바랍니다. 이 방법으로 모든 사용자가 앱을 사용할 수 있지만, 최신 브라우저를 사용하는 사용자는 PWA 기능으로부터 더 많은 이점을 얻을 수 있습니다.

- -

예시 어플리케이션

- -

이 문서 시리즈에서는 js13kGames 2017 대회의 A-Frame 카테고리에 제출된 게임에 대한 정보를 나열하는 아주 간단한 웹사이트의 소스코드를 살펴볼 것입니다. 여러분은 웹 사이트의 실제 컨텐츠가 무엇인지에 대해서는 생각할 필요가 없습니다 — 중요한 점은 여러분의 프로젝트에 PWA 기능을 어떻게 사용하는지를 배우는 것입니다.

- -

온라인 버전은 mdn.github.io/pwa-examples/js13kpwa (소스 코드도 확인하세요)에서 확인하실 수 있으며, 다음 몇 가지 문서에서 자세히 설명할 것입니다.

- -

이제, 우리의 예제 앱의 구조에 대해 살펴볼 이 시리즈의 두 번째 파트로 이동합시다.

- -

{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}

-- cgit v1.2.3-54-g00ecf