🗣 03. H.I.G에서 읽어본 Branding
본 내용은 H.I.G - Foundations - Branding 을 편역 한 것입니다.
1) 브랜딩
앱과 게임들은 각각의 브랜드 정체성을 표현한다. 집이나 다양한 플랫폼에서 편안함을 느끼며 바로 인지할 수 있도록 하고 사람들에게 일관된 경험을 제공하는 방식으로 표현한다. 또한 앱 아이콘 혹은 경험을 통해 브랜드를 표현하는 것외에도 앱 스토에서 브랜드를 강조할 수 있는 기회가 여러번 있다.
Beautiful app icons are an important part of the user experience on all Apple platforms and every app and game must have one. Each platform defines a slightly different style for app icons, so you want to create a design that adapts well to different shapes and levels of detail while maintaining strong visual consistency and messaging. To download templates that help you create icons for each platform, see Apple Design Resources. For guidance on creating other types of icons, see Icons.
2) 좋은 예시
브랜드 고유의 목소리와 톤을 사용하라. 예를 들어 쉬운 단어나 느낌표, 이모티콘, 간단한 문장 구조로 사람들에게 격려와 낙관적인 감정을 제공할 수 있다.
강조 색상을 사용하라. 대부분의 플랫폼에서 색을 구체화함으로써 화면의 아이콘, 버튼, 그리고 글에 관한 요소를 지정할 수 있다. macOS에서는 기본으로 제공하는 색 이외에도 사용자가 강조 색상을 고를 수 있다.
커스텀 폰트의 사용을 고려하라. 브랜드가 특정 폰트와 연관되어 있다면, 해당 폰트는 모든 크기에서 읽기 쉬워야 하며 굵은 텍스트 및 큰 글꼴과 같은 접근성 기능을 지원하는지 확인해 봐야 한다.
본문 복사 및 캡션에 시스템 폰트를 사용하는 동안 헤드라인이나 부제목에 커스텀 폰트를 사용하는 것이 좋을 수 있다. 시스템 글꼴은 작은 크기에서 최적의 가독성을 갖기 때문이다.
브랜딩이 컨텐츠에 따라 달라지는지 확인하라. 브랜드 관련된 내용을 표시하는 요소에 대해 화면 공간을 사용하면 사람들이 관심을 갖는 컨텐츠에 대한 공간이 줄어들 수 있다. 사용자의 경험에서 주의가 산만하지 않아야 하며, 눈에 띄지 않는 방식으로 브랜딩을 통합하는 것이 목표가 되어야 한다.
일관된 패턴을 사용함으로써 사용자가 편안함을 느끼게 하라. 많이 꾸며진 화면일지라도 익숙한 동작을 유지한다면 받아들일 수 있다. 예를 들어, UI 컴포넌트를 예상된 공간에 배치하거나 일반적인 기호를 사용하여 표현하는 것이 해당된다.
상황에 맞는 로고를 제공하는 경우에 있어서 꼭 필요한 것이 아니라면 앱 혹은 게임의 로고를 보여주는 것을 피하라. 사람들은 본인이 무슨 앱을 사용하는지 사용하는 동안 거의 생각하지 않는다. 그리고 사용자에게 필요한 정보를 제공하기 위해 로고가 들어갈 공간을 빈 공간으로 두는 것이 더 효과적이다.
런치 스크린에서 브랜딩과 관련된 요소를 포함하지 마라. 몇몇 플랫폼은 런치 스크린 경험을 최소화한다. 게임이나 앱에서 적은 시간만을 런치 스크린에 할당하는 경우가 있다. 런치 스크린은 빠르게 사라지기 때문에 정보를 전달할 수 없다.그러나 경험을 시작할 때 브랜딩 컨텐츠를 포함하여 환영하거나 온보딩 하는 것을 고려해 볼 수 는 있다.
애플의 상표 지침을 따라라. 애플의 상표는 앱의 이름이나 이미지에 나타나지 않는다.
Best practices
Use your brand’s unique voice and tone in all the written communication you display. For example, your brand might convey feelings of encouragement and optimism by using plain words, occasional exclamation marks and emoji, and simple sentence structures.
Consider choosing an accent color. On most platforms, you can specify a color that the system applies to app elements like interface icons, buttons, and text. In macOS, people can also choose their own accent color that the system can use in place of the color an app specifies. For guidance, see Color.
Consider using a custom font. If your brand is strongly associated with a specific font, be sure that it’s legible at all sizes and supports accessibility features like bold text and larger type. It can work well to use a custom font for headlines and subheadings while using a system font for body copy and captions, because the system fonts are designed for optimal legibility at small sizes. For guidance, see Typography.
Ensure branding always defers to content. Using screen space for an element that does nothing but display a brand asset can mean there’s less room for the content people care about. Aim to incorporate branding in refined, unobtrusive ways that don’t distract people from your experience.
Help people feel comfortable by using standard patterns consistently. Even a highly stylized interface can be approachable if it maintains familiar behaviors. For example, place UI components in expected locations and use standard symbols to represent common actions.
Resist the temptation to display your logo throughout your app or game unless it’s essential for providing context. People seldom need to be reminded which app they’re using, and it’s usually better to use the space to give people valuable information and controls.
Avoid using a launch screen as a branding opportunity. Some platforms use a launch screen to minimize the startup experience, while simultaneously giving the app or game a little time to load resources (for guidance, see Launch screens). A launch screen disappears too quickly to convey any information, but you might consider displaying a welcome or onboarding screen that incorporates your branding content at the beginning of your experience. For guidance, see Onboarding.
Follow Apple’s trademark guidelines. Apple trademarks must not appear in your app name or images. See Apple Trademark List and Guidelines for Using Apple Trademarks.
+) HIG를 공부하고
런치 스크린에서 브랜딩 하지 말라는 것이 가장 충격적이었다.
지난 프로젝트인 라이온하트만 하더라도 런치 스크린에 들어갈 이미지를 위해 고민을 거듭했던 우리 팀의 모습이 떠올랐다. “초보 아빠를 위한 데일리 육아 아티클”이라는 메시지를 담을 수 있도록 런치 스크린에 아빠 사자와 아기 사자를 보여주었는데.. 지금까지 HIG를 공부하며 가장 충격적인 부분이다.
사실 어떤 정보와 브랜딩을 런치 스크린에 보여줄지는 기획자와 디자이너의 몫이라지만, 너무 많은 브랜딩을 담아내려고 하는 것은 좋지 않다는 사실 정도만 알고 있어도 협업을 할 때 좋은 협업의 자세를 갖춘 개발자가 될 수 있을 것이라 생각한다.
근데… 런치 스크린에서 그럼 뭘 보여줘야 할지는 정말 의문이다. 최근 유튜브 런치 스크린을 보면 프로그레스 바? 가 빠르게 지나가는 로티를 사용하고 있는데. 유튜브의 일부 특징? 을 잘 뽑아낸 런치 스크린 같다는 생각을 했다. 브랜딩을 담기보단.. 앱의 속성? 특징? 을 잘 캐치하여 런치 스크린에 담아내는 것이 중요하구나..라는 고민을 해보았다. 어렵다…
혹시 애플 자체의 앱에서는 어떤 런치 스크린이 있을지 궁금해서 이것저것 열어보았는데,. 잠깐의 검은색 화면이 나타났다가 사라지는 것 외에는 특정 애니메이션이나 로티가 없다는 것을 알게 되었다. 지금까지는 프로젝트를 하며 런치 스크린에 어떤 로티를 넣을지 고민하는 시간이 많았는데,, 그게 좋은 선택지만은 아니라는 걸 깨달았다. 다음번 프로젝트에는 런치 스크린에 로티를 넣지 않는 용기를 가져보자
'iOS > HIG' 카테고리의 다른 글
[HIG] Dark Mode 다크모드 (1) | 2023.11.26 |
---|---|
[HIG] Color 색상 (0) | 2023.11.19 |
[HIG] App icons 앱 아이콘 (1) | 2023.11.06 |
[HIG] Accessbility 접근성 (2) | 2023.11.02 |
[HIG] Human Interface Guidelines을 공부해보자 (1) | 2023.10.30 |