알림 표시

알림 옵션은 두 섹션으로 나뉘며, 하나는 시각적 측면 (이 섹션)을 처리하는 섹션과 알림의 동작 측면 (다음 섹션)을 설명하는 섹션입니다.

Peter Beverloo의 알림 생성기를 사용하면 다양한 플랫폼의 여러 브라우저에서 다양한 알림 옵션을 다양하게 활용할 수 있습니다.

시각적 옵션

알림을 표시하는 API는 간단합니다.

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

title 및 options 인수는 모두 선택사항입니다.

제목은 문자열이며 옵션은 다음 중 하나일 수 있습니다.

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
  "timestamp": "<Long>"

  "//": "Both visual & behavioral options",
  "actions": "<Array of Strings>",
  "data": "<Anything>",

  "//": "Behavioral Options",
  "tag": "<String>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "silent": "<Boolean>",
}

시각적 옵션을 살펴보겠습니다.

제목 및 본문 옵션

Windows의 Chrome에서 제목 및 옵션이 없는 알림은 다음과 같이 표시됩니다.

브라우저 이름이 제목으로 사용되고 '새 알림' 자리표시자가 알림 본문으로 사용됩니다.

프로그레시브 웹 애플리케이션이 기기에 설치되면 브라우저 이름 대신 웹 앱 이름이 사용됩니다.

다음 코드를 실행했다고 가정해 보겠습니다.

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

Linux의 Chrome에 다음 알림이 표시됩니다.

Linux의 Firefox에서는 다음과 같이 표시됩니다.

Linux용 Chrome에서 제목과 본문에 많은 텍스트가 포함된 알림은 다음과 같이 표시됩니다.

Linux의 Firefox에서는 알림 위로 마우스를 가져가서 알림이 펼쳐질 때까지 본문 텍스트를 접습니다.

Windows의 Firefox에서 동일한 알림은 다음과 같이 표시됩니다.

보시다시피 동일한 알림이 브라우저마다 다르게 보일 수 있습니다. 또한 플랫폼에 따라 동일한 브라우저에서 다르게 보일 수도 있습니다.

Chrome 및 Firefox는 시스템 알림 및 알림 센터를 사용할 수 있는 플랫폼에서 사용합니다.

예를 들어 macOS의 시스템 알림은 이미지와 작업 (버튼 및 인라인 답장)을 지원하지 않습니다.

또한 Chrome에는 모든 데스크톱 플랫폼을 위한 맞춤 알림이 있습니다. chrome://flags/#enable-system-notifications 플래그를 Disabled 상태로 설정하여 사용 설정할 수 있습니다.

icon

icon 옵션은 기본적으로 제목 및 본문 텍스트 옆에 표시할 수 있는 작은 이미지입니다.

로드하려는 이미지의 URL을 코드에 제공해야 합니다.

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

Linux의 Chrome에 다음 알림이 표시됩니다.

Linux의 경우 Firefox의 경우:

안타깝게도 아이콘에 사용할 이미지 크기에 대한 명확한 지침은 없습니다.

Android는 64dp 이미지(기기 픽셀 비율의 64px 배수)를 원하는 것으로 보입니다.

기기의 가장 높은 픽셀 비율이 3이라고 가정하면 아이콘 크기가 192픽셀 이상인 것이 안전합니다.

배지

badge는 작은 흑백 아이콘으로, 사용자에게 알림의 출처에 관한 정보를 추가로 표시하는 데 사용됩니다.

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

현재 배지는 Android의 Chrome에서만 사용됩니다.

다른 브라우저 (또는 배지가 없는 Chrome)에는 브라우저 아이콘이 표시됩니다.

icon 옵션과 마찬가지로 사용할 크기에 관한 실제 가이드라인은 없습니다.

Android 가이드라인을 자세히 살펴보면 권장 크기는 24px에 기기 픽셀 비율을 곱한 값입니다.

72px 이상의 이미지가 적합해야 한다는 의미입니다 (최대 기기 픽셀 비율이 3이라고 가정).

이미지

image 옵션을 사용하여 사용자에게 더 큰 이미지를 표시할 수 있습니다. 이는 사용자에게 미리보기 이미지를 표시하는 데 특히 유용합니다.

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

Linux용 Chrome에서는 알림이 다음과 같이 표시됩니다.

Android용 Chrome에서는 자르기 및 비율이 다음과 같이 다릅니다.

데스크톱과 모바일의 비율 차이를 고려할 때 가이드라인을 제안하기는 매우 어렵습니다.

데스크톱의 Chrome은 사용 가능한 공간을 채우지 않고 비율이 4:3이므로 가장 좋은 방법은 이 비율로 이미지를 제공하고 Android에서 이미지를 자를 수 있도록 하는 것입니다. 하지만 image 옵션은 계속 변경될 수 있습니다.

Android에서 유일한 가이드라인은 너비 450dp입니다.

이 가이드라인에 따르면 너비가 1350픽셀 이상인 이미지를 사용하는 것이 좋습니다.

작업 (버튼)

알림과 함께 버튼을 표시하도록 actions를 정의할 수 있습니다.

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      type: 'button',
      title: 'Coffee',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

각 작업에 title, action (기본적으로 ID임), icon, type를 정의할 수 있습니다. 알림에서 확인할 수 있는 내용은 제목과 아이콘입니다. ID는 작업 버튼이 클릭되었음을 감지할 때 사용됩니다 (자세한 내용은 다음 섹션 참고). 'button'가 기본값이므로 유형을 생략할 수 있습니다.

이 문서를 작성하는 시점에서는 Android용 Chrome 및 Opera만 지원합니다.

위 예에는 표시되는 것보다 더 많은 작업을 정의할 수 있음을 보여주기 위해 4개의 작업이 정의되어 있습니다. 브라우저에서 표시할 작업 수를 알아보려면 window.Notification?.maxActions를 확인하세요.

const maxVisibleActions = window.Notification?.maxActions;

if (maxVisibleActions) {
  options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
  options.body = 'Notification actions are not supported.';
}

데스크톱의 작업 버튼 아이콘은 해당 색상으로 표시됩니다 (분홍색 도넛 모양).

Android 6 이하에서는 아이콘 색상이 시스템 색 구성표와 일치하도록 지정됩니다.

Android 7 이상에서는 작업 아이콘이 전혀 표시되지 않습니다.

Chrome에서는 데스크톱에서의 동작이 Android에 맞게 변경되기를 바랍니다 (즉, 적절한 색 구성표를 적용하여 아이콘이 시스템 디자인과 어울리도록 함). 그동안은 아이콘을 #333333 색상으로 설정하여 Chrome의 텍스트 색상에 맞출 수 있습니다.

또한 아이콘은 Android에서는 선명하게 보이지만 데스크톱에서는 표시되지 않습니다.

데스크톱 Chrome에서 작업하기에 가장 좋은 크기는 24px x 24px였습니다. Android에 어울리지 않는 상황일 것 같아요.

이러한 차이점에서 유추할 수 있는 권장사항은 다음과 같습니다.

• 아이콘의 색 구성표를 일관되게 유지하여 적어도 모든 아이콘이 사용자에게 일관되게 표시됩니다.
• 일부 플랫폼에서는 흑백으로 표시될 수 있으므로 흑백으로 작동하는지 확인하세요.
• 크기를 테스트하고 자신에게 가장 적합한 것을 찾아보세요. 128px × 128px는 Android에서는 잘 작동하지만 데스크톱에서는 화질이 좋지 않습니다.
• 액션 아이콘은 전혀 표시되지 않을 것입니다.

알림 사양에서 다양한 크기의 아이콘을 정의하는 방법을 모색 중이지만 무엇인가 합의에 도달하기까지는 시간이 걸릴 것으로 보입니다.

작업 (인라인 답장)

'text' 유형으로 작업을 정의하여 알림에 인라인 답장을 추가할 수 있습니다.

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  image: '/images/demos/avatar-512x512.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
    }
  ],
};

registration.showNotification(title, options);

Android에서는 다음과 같이 표시됩니다.

작업 버튼을 클릭하면 텍스트 입력란이 열립니다.

텍스트 입력란의 자리표시자를 맞춤설정할 수 있습니다.

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  icon: '/images/demos/avatar-512x512.jpg',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
      placeholder: 'Type text here',
    }
  ],
};

registration.showNotification(title, options);

Windows의 Chrome에서는 작업 버튼을 클릭하지 않아도 텍스트 입력란이 항상 표시됩니다.

인라인 답장을 2개 이상 추가하거나 버튼과 인라인 답장을 결합할 수 있습니다.

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

방향

dir 매개변수를 사용하면 텍스트를 표시할 방향(오른쪽에서 왼쪽 또는 왼쪽에서 오른쪽)을 정의할 수 있습니다.

테스트에서는 방향이 주로 이 매개변수가 아닌 텍스트로 결정되는 것으로 보였습니다. 사양에 따르면 이는 브라우저에 동작과 같은 옵션의 레이아웃 방법을 제안하기 위한 것이지만 차이를 발견하지 못했습니다.

가능하면 정의하는 것이 가장 좋습니다. 그렇지 않으면 제공된 텍스트에 따라 브라우저가 올바른 작업을 해야 합니다.

매개변수는 auto, ltr 또는 rtl로 설정해야 합니다.

Linux의 Chrome에서 사용되는 오른쪽에서 왼쪽으로 쓰는 언어는 다음과 같습니다.

Firefox에서는 위로 마우스를 가져가면 다음과 같은 화면이 나타납니다.

진동

진동 옵션을 사용하면 사용자의 현재 설정에서 진동이 허용된다는 가정하에 (기기가 무음 모드가 아님) 알림이 표시될 때 실행되는 진동 패턴을 정의할 수 있습니다.

진동 옵션의 형식은 기기가 진동해야 하는 시간(밀리초), 이어서 기기가 진동하지 않아야 하는 시간(밀리초)을 나타내는 숫자의 배열이어야 합니다.

const title = 'Vibrate Notification';

const options = {
  // Star Wars shamelessly taken from the awesome Peter Beverloo
  // https://tests.peter.sh/notification-generator/
  vibrate: [
    500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
    40, 500,
  ],
};

registration.showNotification(title, options);

진동을 지원하는 기기에만 영향을 미칩니다.

사운드

소리 매개변수를 사용하면 알림이 수신될 때 재생할 소리를 정의할 수 있습니다.

이 문서의 작성 시점을 기준으로 이 옵션을 지원하는 브라우저는 없습니다.

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

타임스탬프

타임스탬프를 사용하면 푸시 알림을 전송한 이벤트가 발생한 시간을 플랫폼에 알릴 수 있습니다.

timestamp는 1970년 1월 1일(UNIX 에포크)인 00:00:00 UTC 이후의 밀리초 수여야 합니다.

const title = 'Timestamp Notification';

const options = {
  body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
  timestamp: Date.parse('01 Jan 2000 00:00:00'),
};

registration.showNotification(title, options);

UX 권장사항

알림에서 목격한 가장 큰 UX 실패는 알림이 표시하는 정보의 구체성 부족입니다.

애초에 푸시 메시지를 보낸 이유를 고려하고 모든 알림 옵션을 사용하여 사용자가 알림을 읽는 이유를 이해할 수 있도록 해야 합니다.

솔직히 말해서 예시를 보고 '나는 그런 실수를 하지 않을 거야'라고 생각하기 쉽습니다. 하지만 생각보다 그 함정에 빠지기 쉽습니다.

피해야 할 일반적인 문제는 다음과 같습니다.

• 제목이나 본문에 웹사이트를 넣지 마세요. 브라우저의 알림에 도메인이 포함되므로 도메인을 복제하지 마세요.
• 사용 가능한 모든 정보를 사용하세요. 사용자에게 메시지를 보냈기 때문에 푸시 메시지를 보내는 경우에는 '새 메시지'라는 제목과 '여기를 클릭하여 읽어 보세요' 본문을 사용하는 대신 '존이 새 메시지를 보냈습니다.'라는 제목을 사용하고 알림 본문을 메시지의 일부로 설정합니다.

브라우저 및 기능 감지

이 글을 작성하는 시점 기준으로, 알림 기능 지원 측면에서 Chrome과 Firefox는 상당한 차이를 보였습니다.

다행히 window.Notification 프로토타입을 확인하여 알림 기능 지원을 감지할 수 있습니다.

알림이 작업 버튼을 지원하는지 알고 싶다고 해봅시다. 다음 단계를 따르세요.

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

이를 통해 사용자에게 표시하는 알림을 변경할 수 있습니다.

다른 옵션의 경우 위와 동일한 작업을 수행하고 'actions'를 원하는 매개변수 이름으로 바꿉니다.

다음에 수행할 작업

• 웹 푸시 알림 개요
• 푸시 작동 방식
• 사용자 구독
• 권한 UX
• 웹 푸시 라이브러리로 메시지 전송
• 웹 푸시 프로토콜
• 푸시 이벤트 처리
• 알림 표시
• 알림 동작
• 일반 알림 패턴
• 푸시 알림 FAQ
• 일반적인 문제 및 버그 신고

Codelab

• 푸시 알림 클라이언트 빌드
• 푸시 알림 서버 빌드