Skip to content

Latest commit

 

History

History
303 lines (145 loc) · 24.7 KB

File metadata and controls

303 lines (145 loc) · 24.7 KB

[technologies-app-clips] app-clip-codes

App Clip Codes are the best way for people to discover your App Clip. Their distinct design is immediately recognizable, and they offer a fast, secure way to launch your App Clip.

앱 클립 코드는 사용자가 앱 클립을 검색하는 가장 좋은 방법입니다. 그들의 독특한 디자인은 즉시 알아볼 수 있으며, 앱 클립을 실행하는 빠르고 안전한 방법을 제공합니다.

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/with-appclip-logo_2x.png

App Clip Code with the App Clip logo

앱 클립 로고가 있는 앱 클립 코드

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/without-appclip-logo_2x.png

App Clip Code without the App Clip logo

앱 클립 로고가 없는 앱 클립 코드

App Clip Codes always use the designs Apple provides and follow size, placement, and printing guidelines. Choose between the badge design that uses the App Clip logo ( App Clip) or, when space is at a premium, a design without it. Create App Clip Codes that use a default color pair, or choose custom foreground and background colors. For developer guidance, see Creating App Clip Codes.

앱 클립 코드는 항상 Apple이 제공하는 디자인을 사용하고 크기, 배치 및 인쇄 지침을 따릅니다. App Clip 로고를 사용하는 배지 디자인(App Clip 제외) 또는 공간이 중요한 경우 배지 디자인을 선택합니다. 기본 색상 쌍을 사용하는 앱 클립 코드를 만들거나 사용자 지정 전경 및 배경 색상을 선택합니다. 개발자 지침은 앱 클립 코드 만들기를 참조하십시오.

Interacting with App Clip Codes

앱 클립 코드와 상호 작용

App Clip Codes come in two variants: scan-only or with an embedded NFC tag (NFC-integrated).

앱 클립 코드는 스캔 전용 또는 내장된 근거리 무선 통신 태그(NFC 통합)의 두 가지 변형으로 제공된다.

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/scan-only_2x.png

The scan-only variant uses a camera icon in its center to let people know to use the Camera app or the Code Scanner in Control Center to scan the App Clip Code. The NFC-integrated variant uses an iPhone icon at its center that guides people to hold their device close to the App Clip Code or to scan it using the NFC Tag Reader in Control Center. People can also scan an NFC-integrated App Clip Code with the Camera app or the Code Scanner in Control Center. For example:

스캔 전용 변형은 중앙에 있는 카메라 아이콘을 사용하여 사람들이 카메라 앱 또는 Control Center의 코드 스캐너를 사용하여 앱 클립 코드를 스캔할 수 있도록 합니다. 근거리 무선 통신 통합 변종은 중앙에 아이폰 아이콘을 사용하여 사람들이 앱 클립 코드 가까이에 기기를 두거나 제어 센터의 근거리 무선 통신 태그 리더를 사용하여 기기를 스캔하도록 안내한다. 사람들은 또한 카메라 앱이나 제어 센터의 코드 스캐너로 근거리 무선 통신 통합 앱 클립 코드를 스캔할 수 있다. 예:

  • A coffee shop could place an App Clip Code on their menu. A guest could hold their device close to the App Clip Code and instantly launch the shop’s App Clip to order a drink.

  • 커피숍은 메뉴에 앱 클립 코드를 배치할 수 있다. 손님은 그들의 기기를 앱 클립 코드 가까이에 두고 즉시 가게의 앱 클립을 실행하여 음료를 주문할 수 있다.

  • A gas station could have an NFC-integrated App Clip Code attached to each pump. A traveler could hold their device close to it to launch the gas station’s App Clip and use it to pay for their refill.

  • 주유소는 각 펌프에 근거리 무선 통신 통합 앱 클립 코드를 부착할 수 있다. 여행자는 주유소의 앱 클립을 실행하기 위해 그들의 기기를 가까이 두고 리필 비용을 지불하기 위해 그것을 사용할 수 있다.

  • A video game creator could hand out marketing material at an industry event that includes an App Clip Code. An event attendee could scan the code to launch an App Clip that’s a playable demo of their latest video game.

  • 비디오 게임 제작자는 앱 클립 코드가 포함된 산업 행사에서 마케팅 자료를 배포할 수 있다. 이벤트 참가자는 코드를 스캔하여 최신 비디오 게임의 재생 가능한 데모인 앱 클립을 실행할 수 있습니다.

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/interacting-coffee-shop-example_2x.png

Displaying App Clip Codes

When you start designing your App Clip Codes, choose the variant that works best for the way people use your App Clip. If people can physically access the App Clip Code, use the NFC-integrated variant. For example:

앱 클립 코드를 디자인하기 시작하면 사람들이 앱 클립을 사용하는 방식에 가장 적합한 변형을 선택하십시오. 만약 사람들이 앱 클립 코드에 물리적으로 접근할 수 있다면, 근거리 무선 통신 통합 변종을 사용하세요. 예:

  • On a tabletop at a restaurant

  • 레스토랑의 테이블 상판에서

  • Near a register at a retail store

  • 소매점의 계산대 근처

  • In a storefront window

  • On signage

  • On a gift card or coupon

  • 기프트 카드 또는 쿠폰에

If you need to place your App Clip Code in an area that’s physically inaccessible or you need to display it digitally, use a scan-only App Clip Code. For example:

물리적으로 액세스할 수 없는 영역에 앱 클립 코드를 배치하거나 디지털로 표시해야 하는 경우 검색 전용 앱 클립 코드를 사용하십시오. 예:

  • On posters or printed advertising

  • 포스터나 인쇄된 광고에

  • On signage behind a counter or unreachable in a storefront

  • 카운터 뒤에 있는 간판이나 상점 앞에 있는 연락이 닿지 않는 곳

  • On digital materials such as digital displays, in emails, or on images you post to social media

  • 디지털 디스플레이와 같은 디지털 자료, 이메일 또는 소셜 미디어에 게시한 이미지

No matter which of the two variants you use, it’s important you carefully consider where you place your App Clip Code to ensure a reliable scanning experience.

두 가지 변형 중 어느 것을 사용하든 안정적인 검색 환경을 보장하려면 앱 클립 코드를 어디에 배치하는지 신중하게 고려하는 것이 중요합니다.

Include the App Clip logo when space allows. The logo helps make it clear that the code launches an App Clip; however, if you can’t meet the clear space requirements, use the App Clip Code design without the App Clip logo. Also, use the design without the App Clip logo if you place the App Clip Code on disposable paper or plastic items, or on items associated with gambling or drinking. For example, use the App Clip Code without the App Clip logo on playing cards, poker chips, or bar coasters. The App Clip logo is always part of the badge design where it appears below the App Clip Code; never use the App Clip logo on its own.

공간이 허용될 때 앱 클립 로고를 포함하십시오. 로고를 사용하면 코드가 앱 클립을 실행하는 것을 확실히 알 수 있습니다. 그러나 공간 요구 사항을 충족할 수 없는 경우 앱 클립 로고 없이 앱 클립 코드 디자인을 사용하십시오. 또한 앱 클립 코드를 일회용 종이나 플라스틱 제품 또는 도박이나 음주와 관련된 제품에 배치하는 경우 앱 클립 로고가 없는 디자인을 사용하십시오. 예를 들어, 게임 카드, 포커 칩 또는 바 코스터에 앱 클립 로고가 없는 앱 클립 코드를 사용합니다. App Clip 로고는 항상 App Clip 코드 아래에 표시되는 배지 디자인의 일부이므로 App Clip 로고를 사용하지 마십시오.

Place your App Clip Code on a flat or cylindrical surface only. If you place your App Clip Code on a cylindrical surface — for example, on a scooter’s handlebar — make sure the width of the App Clip Code doesn’t exceed one-sixth of the cylinder’s circumference.

앱 클립 코드를 평평하거나 원통형 표면에만 배치하십시오. 앱 클립 코드를 원통형 표면(예: 스쿠터 핸들)에 배치할 경우 앱 클립 코드의 너비가 실린더 둘레의 6분의 1을 초과하지 않도록 하십시오.

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/app-clip-codes-curvature_2x.png

Help your App Clip Code remain as flat as possible so it’s easy for people to scan. To enable the best scanning experience, avoid displaying App Clip Codes on deformable materials that readily fold or crumple, such as paper, plastic, or fabric. If you need to make your App Clip Code available on a bag, flexible box, or other deformable object, display it on something rigid — like a card — that you attach to the object. If you create an App Clip Code sticker, make sure it adheres well to flat surfaces.

사람들이 쉽게 스캔할 수 있도록 앱 클립 코드를 최대한 평평하게 유지하십시오. 최상의 스캔 환경을 사용하려면 종이, 플라스틱 또는 천과 같이 쉽게 접히거나 구겨지는 변형 가능한 재료에 앱 클립 코드를 표시하지 마십시오. 앱 클립 코드를 가방, 유연한 상자 또는 기타 변형 가능한 개체에서 사용할 수 있도록 만들어야 하는 경우, 해당 개체에 부착하는 카드와 같은 단단한 물체에 표시합니다. 앱 클립 코드 스티커를 만들 경우 평평한 표면에 잘 부착되는지 확인하십시오.

Place your App Clip Code in a location that helps ensure reliable scanning. For example, place a scan-only App Clip Code in a location that offers enough light to ensure reliable scanning, and don’t require people to scan from a wide angle.

예를 들어, 검색 전용 앱 클립 코드를 검색할 수 있는 충분한 빛을 제공하고 사람들이 넓은 각도에서 검색할 필요가 없는 위치에 배치합니다.

Make sure the App Clip Code is unobstructed. Don’t overlay the App Clip Code with text, logos, or images. Never animate the App Clip Code or dim it.

앱 클립 코드에 장애물이 없는지 확인하십시오. 앱 클립 코드를 텍스트, 로고 또는 이미지로 겹치지 마십시오. 앱 클립 코드를 애니메이션화하거나 어둡게 하지 마십시오.

Display the App Clip Code in an upright position. Don’t rotate the generated App Clip Code or display the center glyph at an angle.

App Clip Code를 수직으로 표시하며, 생성된 App Clip Code를 회전시키거나 중심 글리프를 비스듬히 표시하지 마십시오.

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/upright-display-right_2x.png

https://developer.apple.com/design/human-interface-guidelines/images/checkmark_2x.png

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/upright-display-wrong-1_2x.png

https://developer.apple.com/design/human-interface-guidelines/images/crossout_2x.png

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/upright-display-wrong-2_2x.png

https://developer.apple.com/design/human-interface-guidelines/images/crossout_2x.png

Don’t create App Clip Codes that are too small. App Clip Codes must adhere to the following specifications.

너무 작은 앱 클립 코드를 만들지 마십시오. 앱 클립 코드는 다음 사양을 준수해야 합니다.

Type Minimum Size
Printed communications Minimum diameter of 3/4 inch (1.9 cm).
Digital communications Minimum size of 256×256px. Use a PNG or SVG file.
NFC-integrated App Clip Code The embedded NFC tag should be at least 35 mm in diameter or of equivalent size. For example, if your embedded NFC tag is 35 mm in diameter, your printed App Clip Code should be at least 1.37 inches (3.48 cm) in diameter.

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/sizing-minimum-rectangle_2x.png

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/sizing-minimum-circular_2x.png

When determining the dimensions of your App Clip Codes, consider a distance to code size ratio of no more than 20:1. If possible, use a ratio of 10:1 to ensure reliable scanning. For example, an App Clip that people scan from 40 inches (101 cm) away should be at least 4 inches (10.16 cm) in diameter.

앱 클립 코드의 치수를 결정할 때 코드 크기에 대한 거리 비율을 20:1 이하로 고려하십시오. 가능한 경우 10:1의 비율을 사용하여 검색을 안정적으로 수행합니다. 예를 들어 사람들이 40인치(101cm) 떨어진 곳에서 스캔하는 앱 클립의 직경은 최소 4인치(10.16cm)여야 합니다.

If you display an App Clip Code near a QR Code or other scannable item, choose a size for the App Clip Code that’s at least the other code’s or item’s size.

QR 코드 또는 다른 스캔 가능한 항목 근처에 앱 클립 코드를 표시하는 경우 다른 코드 또는 항목 크기 이상의 앱 클립 코드 크기를 선택합니다.

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/appclip-with-qr-code_2x.png

Provide enough space between an App Clip Code and adjacent App Clip Codes, graphics, or materials. The minimum clear space around an App Clip Code is equal to the space between the center glyph and the circular code. If you place your App Clip Code next to another App Clip Code or other machine-readable code, leave enough clear space to allow for reliable scanning of each code.

앱 클립 코드와 인접한 앱 클립 코드, 그래픽 또는 재료 사이에 충분한 공간을 제공하십시오. 앱 클립 코드 주위의 최소 빈 공간은 가운데 글리프와 원형 코드 사이의 공간과 같습니다. 앱 클립 코드를 다른 앱 클립 코드 또는 다른 컴퓨터에서 읽을 수 있는 코드 옆에 배치하는 경우 각 코드를 안정적으로 검색할 수 있도록 충분한 공간을 확보하십시오.

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/spacing_2x.png

Using clear messaging

Add clear messaging that informs people how they can use the App Clip Code to launch your App Clip, especially if you use the design without the App Clip logo. For example, add a call to action next to an App Clip Code you display in an email or on a poster. Use the suggested call-to-action messaging or your own copy. Always use a simple, clear call to action.

특히 앱 클립 로고 없이 디자인을 사용하는 경우 앱 클립 코드를 사용하여 앱 클립을 시작하는 방법을 알려주는 명확한 메시지를 추가합니다. 예를 들어 전자 메일이나 포스터에 표시하는 앱 클립 코드 옆에 작업 호출을 추가합니다. 제안된 Call-to-Action 메시징 또는 사용자 자신의 사본을 사용합니다. 항상 간단하고 명확한 행동 요청을 사용하십시오.

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/clear-messaging_2x.png

For a scan-only App Clip Code, you can use the following call to action:

검색 전용 앱 클립 코드의 경우 다음 작업 호출을 사용할 수 있습니다:

  • Scan to [describe what users can do with your App Clip].

  • [사용자가 앱 클립으로 수행할 수 있는 작업 설명]을 검색합니다.

  • Scan using the camera on your iPhone or iPad to [describe what users can do with your App Clip].

  • iPhone 또는 iPad의 카메라를 사용하여 [사용자가 앱 클립으로 수행할 수 있는 작업 설명]을 스캔합니다.

For an NFC-integrated App Clip Code, you can use the following call to action:

NFC 통합 앱 클립 코드의 경우 다음과 같은 작업 호출을 사용할 수 있습니다:

  • Scan to [describe what users can do with your App Clip].

  • [사용자가 앱 클립으로 수행할 수 있는 작업 설명]을 검색합니다.

  • Hold your iPhone near the [object name] to launch an App Clip that [describe what a user can do with your App Clip].

  • [오브젝트 이름] 근처에서 아이폰을 잡고 [사용자가 앱 클립으로 수행할 수 있는 작업을 설명하는] 앱 클립을 실행합니다.

For more information, see Near-field communication.

Adhere to Guidelines for Using Apple Trademarks when referring to your App Clip and App Clip Codes. For example, Apple trademarks shouldn’t appear in your app name or imagery, always use title case when using the terms App Clips or App Clip Code, and so on. For additional information, see Legal requirements.

예를 들어 Apple 상표는 앱 이름이나 이미지에 표시되지 않아야 하며 App Clip 또는 App Clip 코드 등의 용어를 사용할 때는 항상 제목 대소문자를 사용해야 합니다. 자세한 내용은 법적 요구 사항을 참조하십시오.

Customizing your App Clip Code

앱 클립 코드 사용자 지정

Use App Store Connect or the App Clip Code Generator command-line tool to create App Clip Codes, and follow best practices to ensure a reliable scanning experience.

App Store Connect 또는 App Clip Code Generator 명령줄 도구를 사용하여 App Clip Code를 만들고 모범 사례를 따라 신뢰할 수 있는 검색 환경을 제공합니다.

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/customizing_2x.png

Always use the generated App Clip Code. Don’t create your own App Clip Code design or modify a generated App Clip Code in any way. Don’t apply filters, augment its colors, or add glows, shadows, gradients, or reflections. They negatively impact people’s scanning experience. When scaling a generated App Clip Code, don’t change the generated code’s aspect ratio, and be sure to scale all attributes of the App Clip Code — for example the stroke widths.

항상 생성된 앱 클립 코드를 사용하십시오. 자신만의 앱 클립 코드 디자인을 만들거나 생성된 앱 클립 코드를 수정하지 마십시오. 필터를 적용하거나 색상을 늘리거나 글로우, 그림자, 그라데이션 또는 반사를 추가하지 마십시오. 그것들은 사람들의 스캔 경험에 부정적인 영향을 미친다. 생성된 앱 클립 코드의 크기를 조정할 때는 생성된 코드의 가로 세로 비율을 변경하지 말고 앱 클립 코드의 모든 속성(예: 스트로크 너비)을 조정해야 합니다.

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/customizing-wrong-1_2x.png

https://developer.apple.com/design/human-interface-guidelines/images/crossout_2x.png

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/customizing-wrong-2_2x.png

https://developer.apple.com/design/human-interface-guidelines/images/crossout_2x.png

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/customizing-wrong-3_2x.png

https://developer.apple.com/design/human-interface-guidelines/images/crossout_2x.png

Choose colors with enough contrast that ensure accurate scanning. Each App Clip Code uses three colors: a foreground color, a background color, and a third color that’s generated for you based on the foreground and background colors. Both App Store Connect and the App Clip Code Generator command-line tool offer a selection of default color pairs. Alternatively, you can choose custom foreground and background colors. Note that you can’t choose custom colors that will lead to a suboptimal scanning experience. If your color selection doesn’t work well, neither App Store Connect nor the command-line tool will generate an App Clip Code. To help you choose a color combination that works well, both tools contain functionality to suggest a different foreground color based on your custom background color. For more information, see Creating App Clip Codes with the App Clip Code Generator and Creating App Clip Codes with App Store Connect.

각 앱 클립 코드는 전경색, 배경색 및 배경색을 기준으로 생성된 세 가지 색을 사용합니다. App Store Connect와 App Clip Code Generator 명령줄 도구 모두 기본 색상 쌍을 선택할 수 있습니다. 또는 사용자 정의 전경색과 배경색을 선택할 수 있습니다. 최적의 검색 환경이 아닌 사용자 지정 색상은 선택할 수 없습니다. 색상 선택이 제대로 작동하지 않으면 앱 스토어 연결이나 명령줄 도구에서 앱 클립 코드를 생성하지 않습니다. 잘 작동하는 색상 조합을 선택할 수 있도록 두 도구 모두 사용자 지정 배경색에 따라 다른 전경색을 제안하는 기능이 포함되어 있습니다. 자세한 내용은 App Clip Code Generator를 사용하여 App Clip Code 만들기 및 App Store Connect.

https://developer.apple.com/design/human-interface-guidelines/technologies/app-clips/images/colors_2x.png