애플 휴먼 인터페이스 가이드라인(69) Extensions - 3 Messaging

Messaging
메세지

iMessage apps and Sticker packs are messaging extensions that let people share content with friends, communicate expressively, and share collaborative experiences.

아이메세지 앱과 스티커 팩은 메세지 확장기능으로, 사용자들이 친구들과 콘텐츠를 공유하고, 감정을 나타내며 소통하고, 공동의 경험을 공유할 수 있도록 합니다.

iMessage Apps
아이메세지 앱

An iMessage app provides an interactive experience within the context of a Messages conversation. iMessage apps enable people to share data and media, collaborate on shared tasks, and play games with one another.

아이메세지 앱은 메세지 대화의 맥락 안에서 상호작용의 경험을 제공합니다. 이 앱은 사용자들이 데이터와 미디어를 공유할 수 있게 하고, 공유된 임무를 함께 작업할 수 있게 하며, 다른 이와 게임을 할 수 있게 합니다.

 

Compact(좌) Expanded(우)

Design an intuitive interface. If your iMessage app provides static content, such as text, photos, or videos, make sure it’s easy for people to browse and select items for insertion into the conversation. If your app is interactive, such as a multiplayer game board or collaborative takeout order, make sure its functionality is useful and understandable.

직관적인 인터페이스를 디자인하세요. 만약 아에메지 앱이 텍스트, 사진, 비디오와 같은 고정 콘텐츠를 제공한다면, 대화에 이런 콘텐츠를 쉽게 삽입할 수 있도록, 편히 탐색하고 아이템을 선택하게 하세요. 만약 여러명이 참여하는 게임이나 함께 지시를 따르는 등의 상호작용 앱이라면, 그 기능이 유용하고 이해하기 쉽게 만들어야 합니다.

 

Provide focused content. For clarity and ease of use, each messaging extension should have a single focus. Don’t try to design one app that combines both stickers and ridesharing, for example.

(한 주제에) 초점을 맞춘 콘텐츠를 제공하세요. 사용하기 명확하고 쉽도록, 각 메세지 확장기능은 하나의 기능에 초점을 맞춰야 합니다. 예를 들어 스티커와 카풀(통근차 등을 함께 타는 것) 기능이 섞인 하나의 앱을 만들지 마세요.

 

Provide a fun, collaborative experience. iMessage apps are typically used in the context of fast-paced, informal conversations between two or more people. Creatively leverage this environment to encourage back-and-forth participation through sharing, editing, or augmenting content. If all parties are using the app together, content updates occur in real time.

즐겁고 협동적인 경험을 제공하세요. 아이메세지 앱은 기본적으로 빨리 진행되는 맥락에서 사용되며, 두명 이상의 사람들 사이 일상적인 대화로 구성됩니다. 이런 환경을 지렛대 삼아 공유하고, 편집하고, 콘텐츠를 더 많이 만드는 참여를 창의적인 방법으로 권장하세요. 만약 모든 참여자가 앱을 함께 사용하면, 콘텐츠는 실시간으로 업데이트 됩니다.

 

Highlight interesting iOS app content. Extend the functionality of your iOS app by surfacing its content in the Messages space. Think about what kinds of information people might want to share and how they can interact with your app within the context of an active conversation.

흥미로운 iOS 앱 컨텐츠를 강조하세요. 앱의 콘텐츠를 메세지 영역에서도 보이게 해 당신의 iOS 앱 기능을 확장하세요. 사용자들이 어떤 정보를 공유하고 싶어하고, 지금 진행중인 대화의 맥락에서 어떻게 당신의 앱과 상호작용할 수 있을지 생각해보세요.

 

Inset content to avoid cropping. Your app's content is presented in message bubbles with rounded corners, so don't put essential information in the corners.

잘리는걸 방지하기 위해 콘텐츠는 안쪽에 넣으세요. 앱의 콘텐츠는 둥근 모서리의 메세지 버블 안에 보여지므로, 중요한 정보를 모서리에 넣지 마세요.

 

Differentiate compact and expanded views. Your app appears in a compact view below a conversation. This view should visually distinguish your app from other apps and provide access to frequently used features. People can also open your app in an expanded view to access advanced features or see more options at once.

컴팩트/ 확장 뷰를 다르게 보여주세요. 컴팩트 뷰에서는 대화 아래에 앱이 나옵니다. 이 뷰에선 앱이 다른 앱과 시각적으로 구분되어야 하고, 자주 사용하는 기능에 접근할 수 있게 합니다. 확장 뷰를 열어 추가 기능에 접근하거나, 더 많은 옵션을 한번에 볼 수도 있습니다.

 

Allow text editing in the expanded view only. The compact view is roughly the same height as the keyboard. To ensure that users can see what they’re editing, allow text entry only in the expanded view.

텍스트 편집은 확장 뷰에서만 가능하게 하세요. 컴팩트 뷰는 키보드와 같은 높이입니다. 사용자가 뭘 편집하고 있는지 알 수 있게 하려면, 텍스트 입력은 확장 뷰에서만 가능하게 하세요.

Stickers
스티커

Stickers offer a fun, engaging way for people to express themselves in a Messages conversation without typing or using emojis. A sticker is an image or an animation that can be sent or placed on messages, photos, and other stickers to add emphasis and communicate emotion.

스티커는 메세지 앱에서 글자를 타이핑 하거나 이모지를 사용하지 않고도, 그들을 표현할 수 있는 즐겁고 매력적인 방법입니다. 스티커는 이미지나 애니메이션인데, 이를 사용해 메세지, 사진, 혹은 다른 스티커에 보내거나 위치해 감정을 강조하고 전달할 수 있습니다.

Compact(좌) Expanded(우)

 

Design for expressiveness. People use stickers to visually convey moods and reactions. Strive to deliver stickers that connect with people at an emotional level. Consider incorporating imagery, words, and phrases to add new dimensions to conversations.

감정 표현을 위한 스티커를 디자인하세요. 사용자들은 감정과 반응을 시각적으로 전달하기 위해 스티커를 사용합니다. 감정 단계에서 사용자들과 연결되는 스티커를 전하기 위해 노력하세요. 이미지, 단어, 구를 결합시켜 대화의 새로운 차원을 더하세요.

 

Think globally. Messaging is a universal form of communication. Aim for stickers that have broad, international appeal.

전세계적으로 생각하세요. 메세지는 대화의 보편적인 방식입니다. 더 넓고 국제적으로 매력을 낼 수 있는 스티커를 만드세요.

 

Use descriptive image names or provide alternative text labels. Although they aren’t visible onscreen, image names and alternative text labels let VoiceOver audibly describe stickers, making navigation easier for people with visual impairments.

서술적인 이미지 이름을 사용하거나, 대체 텍스트 라벨(레이블)을 제공하세요. 이 라벨이나 이름이 화면 위에서 보이진 않지만, 보이스오버 기능을 사용해 청각적으로 화면에 무엇이 있는지 설명할 수 있습니다. 시각 장애를 가진 사용자들이 탐색하기 훨씬 쉽겠죠.

 

Add vitality through animation. Although stickers can be static images, animated stickers are a great way to impart energy in a conversation. Be sure to use a frame rate high enough to keep motion fluid.

애니메이션에 생동감을 더하세요. 움직이지 않는 이미지로 스티커를 만들 수도 있지만, 움직이는 스티커는 대화에 에너지를 줄 수 있는 좋은 방법입니다. 움직임이 자연스럽도록 프레임 수는 높게 사용해야 합니다. (초당 프레임 수가 낮을수록 움직임이 끊겨 보인다.)

 

Test placement possibilities. Users can scale, rotate, and place stickers over parts of a conversation. Make sure your stickers are legible against different colors and imagery, regardless of their position or size.

배치 가능성을 테스트해보세요. 사용자들은 스티커의 크기를 조절하고, 돌리고, 대화 한 부분에 붙일 수 있습니다. 스티커가 어디에 있든, 어떤 사이즈든 다른 색상이나 이미지와도 잘 구분되는지 확인하세요.

 

Consider using vibrant colors and transparency. Vivid colors add richness and excitement to a conversation. Transparency allows meaningful placement of stickers onto messages, photos and other stickers.

풍부한 색상과 투명도 사용을 고려해보세요. 선명한 색상은 대화를 풍부하고 즐겁게 만듭니다. 투명도를 사용하면 메세지나 사진, 혹은 다른 스티커에 배치할 때 의미있는 자리에 둘 수 있게 합니다.

Sticker Sizes
스티커 사이즈

Messages supports three sticker sizes, which are displayed in a grid-based browser. Pick a size that works best for your content and prepare all of your stickers at that size.

메세지는 세 종류의 스티커 사이즈를 지원하는데, 이는 브라우저의 그리드 안에 보여집니다. 당신의 콘텐츠(스티커)에 가장 적절한 사이즈를 고르고, 모든 스티커를 해당 사이즈에 대응하세요.

 

 

Scale stickers appropriately. Although Messages scales larger stickers down if necessary, it’s best to provide prescaled stickers for optimal quality and performance.

스티커는 적절하게 크기를 조절하세요. 메세지 앱에서 필요시 큰 스티커를 줄이긴 하나, 최적의 퀄리티와 퍼포먼스를 위해, 처음부터 적절한 크기의 스티커를 제공하는 것이 가장 좋은 방법입니다.

 

Be mindful of file size restrictions. For efficiency, each individual sticker may not exceed 500KB. Note that Xcode saves PNG animations using a 24-bit palette, which may lead to larger than expected file sizes.

파일 사이즈 제한을 고려하세요. 효율성을 위해, 각 스티커는 500KB를 넘어선 안됩니다. Xcode는 PNG 애니메이션을 24-bit를 사용해 저장하고, 이는 예상 파일 사이즈보다 크게 저장될 수 있음을 기억하세요.

Sticker Formats
스티커 포맷(확장자)

Messages supports stickers in the following file formats:
메세지는 아래와 같은 확장자의 스티커를 지원합니다:

 

Format	Recommended	Supports transparency	Supports animation
PNG	●	● 8-bit transparency
APNG	●	● 8-bit transparency	●
GIF		● single color transparency	●
JPEG

iMessage App and Sticker Pack Icons
아이메세지 앱과 스티커 팩 아이콘

Like iOS apps, iMessage apps and sticker packs need recognizable app icons.

iOS 앱처럼, 아이메세지 앱과 스티커팩 또한 인식할 수 있는 앱 아이콘이 필요합니다.

 

Keep the background simple and provide a single focus point. Design an icon with a single, centered point that captures attention at a glance. Include a simple background that doesn’t overpower other icons.

배경은 심플하게 유지하고, 하나의 목적에 초점을 맞추세요. 쓱 봐도 주의를 끄는 하나의 지점을 가지고 아이콘을 디자인하세요.

 

Keep icon corners square. The system applies a mask that rounds icon corners automatically.

아이콘 모서리는 90도로 유지하세요. 시스템이 자동으로 모서리를 둥글게 하는 마스크를 적용합니다.

 

Provide different sized icons. Your icon appears in the App Store, Messages, notifications, and Settings. To ensure that your icon looks great in any context and on any device, you can provide variations of your icon in the following sizes:

여러 크기의 아이콘을 제공하세요. 앱 아이콘은 앱스토어, 메세지, 알림, 설정에서 보일 것입니다. 어떤 기기나 어떤 맥락에서도 아이콘이 좋아보일 수 있도록, 아래의 사이즈를 따라 앱아이콘의 여러 버전을 제공하세요.

 

	@2x	@3x
iMessage app icons	148px × 110px	—
	134px × 100px	—
	120px × 90px	180px × 135px
	64px × 48px	96px × 72px
	54px × 40px	81px × 60px
Settings icons	58px × 58px	87px × 87px

App Store (prior to iOS 10)

1024px × 1024px

For additional guidance on designing great app icons, much of which can be applied to iMessage app and sticker pack icons, see App Icon.

아이메세지 앱과 스티커 팩 아이콘에 적용되는 멋진 앱아이콘을 위한 디자인 가이드는 앱아이콘에서 확인하세요.

 

To download an iMessage app and sticker pack icon Photoshop template, see Resources.

 

For developer guidance, see The Messages Framework.