앱 브랜딩

Applies to Windows and Windows Phone

앱 디자이너와 앱 개발자가 Windows 스토어 앱에 브랜딩을 통합하기 위해 사용할 수 있는 다양한 창조적 방법 중 몇 가지를 살펴봅니다.

앱에 브랜드를 포함하는 이유는 무엇인가요?

브랜드는 비즈니스가 유명해지고자 하는 품질을 정의합니다. Windows 스토어 앱을 디자인할 때 앱이 브랜드의 본질을 흡수하도록 의미있는 결정을 내려야 합니다. 브랜드가 비즈니스를 정의하는 방식 그대로 Windows 스토어 앱에서 브랜드를 표현한다면 다른 앱에서의 브랜드와 차별화됩니다. 한 가지 예를 들어보겠습니다.

다음은 브랜딩 이전의 Windows 스토어 앱의 예입니다.

Contoso Bakery의 Windows 스토어 앱 예제(브랜딩 전)
Contoso Bakery 예에서는 Microsoft 디자인 원칙을 따르는 경우 베이커리용 앱이 어떻게 표시되는지 보여 줍니다. 이 예의 경우 콘텐츠를 정면과 중심에 잘 배치했지만 베이커리의 브랜드를 효과적으로 전달하지는 못합니다.

 

다음은 동일한 앱이지만 브랜딩 후의 예입니다.

Contoso Bakery의 Windows 스토어 앱 예제(브랜딩 후)
이 Contoso Bakery 앱 버전에서는 확실히 변경된 몇 가지 사항으로 인해 앱이 훨씬 매력적으로 되었습니다. 베이커리 브랜드의 많은 부분을 포함함으로써 앱 콘텐츠가 좀 더 설득력있는 방식으로 표시되며, 전체적인 앱의 느낌도 베이커리의 본질을 떠올려 줍니다.

 

브랜드를 통합하는 방법

브랜드는 일련의 시각적 요소를 통해 표현됩니다. 예를 들어 특색 있는 색상표, 그래픽, 레이아웃 및 사진 스타일을 모두 함께 활용하여 방송, 인쇄, 웹 및 Windows 스토어 앱과 같은 다양한 미디어 전체에서 반복 가능하고 쉽게 알아볼 수 있는 브랜드를 만들 수 있습니다.

이러한 시각적 요소를 코드에서 조작하는 손잡이와 다이얼이라고 여기고 Windows 스토어 앱에서 고유한 모양과 느낌을 창조해보세요.

시각적 요소설명

색은 브랜드를 나타내는 주요 특성입니다. 사용자가 이 앱이 비즈니스에서 비롯되었음을 연상할 수 있도록 브랜드와 연결된 원색을 적용해보세요.

그래픽

그래픽을 사용하면 앱의 콘텐츠를 표시할 때 문자를 추가하여 브랜드를 강화시킬 수 있습니다. 그러나 너무 많은 그래픽을 사용하면 콘텐츠 흐름에 방해가 되고 단순한 장식이나 산만한 환경처럼 보일 수 있습니다.

이미지

그림과 사진도 브랜드를 반영해야 합니다. 회사의 다른 통신이나 웹 사이트와 동일한 이미지 및 스타일을 다시 사용해 보세요.

그리드

Windows 스토어 앱 그리드 시스템은 앱을 나타내는 시각적 요소를 통합하는 데 도움이 됩니다. 그리드는 브랜딩되어 작동하는 앱의 UI가 Windows의 나머지 부분과 맞도록 정렬합니다.

레이아웃

모든 페이지의 시각적 요소 정렬은 브랜드와 관련이 있어야 합니다. 또한 페이지와 콘텐츠 형식 간의 일관성도 유지해야 합니다.

로고

로고를 사용하면 사용자가 앱을 신속하게 식별하고 브랜드를 인식할 수 있습니다.

서체

서체는 Windows 스토어 앱에서 중요한 부분입니다. 적절하게 선택하면 색, 로고 또는 레이아웃만큼 브랜드에 강한 인상을 줄 수 있으므로 사용할 서체를 신중하게 선택해야 합니다.

 

LOB(기간 업무) 앱 예제

LOB(기간 업무) 앱 브랜딩은 소매점과 엔터프라이즈 관점 모두에서 중요합니다. 이 예제에서는 운송 회사용 소매점 및 엔터프라이즈 앱에 브랜드를 포함할 수 있는 방법을 보여 줍니다.

회사 브랜드 요소

Fabrikam Worldwide Logistics는 국제적으로 세 가지 수준의 운송업을 제공합니다. 대상 고객은 쉽게 배송을 만들고 관리하려는 중소기업 소유자입니다. 신뢰할 수 있는 글로벌 배송 및 마찰 없는 트랜잭션이 고객에게 전하는 핵심 메시지입니다.

브랜드 요소설명

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 기본 브랜드

기본 브랜드는 지도, 스트립 등의 그래픽 요소를 사용하여 신뢰할 수 있는 글로벌 서비스를 제공하는 열정을 전달합니다.

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 로고

기본 브랜드 뒤의 각 서비스 로고는 세 가지 서비스 수준을 전달합니다.

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 브랜드 요소

점선과 지도 등 패키지의 브랜드 요소는 일관성 있는 브랜드 스토리를 만들기 위해 앱 디자인에서 다시 사용됩니다.

 

배송 만들기

중소기업 고객이 배송을 갱신하기 위해 계정에 로그온합니다.

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 머리글 브랜딩이 포함된 로그인 페이지
색, 그래픽 및 로고는 머리글과 페이지에서 브랜딩 요소로 이행됩니다.

 

계정 페이지에서 색, 그래픽(스트립 및 점선), 서체는 기본 브랜드를 전달합니다. 고객 ID는 머리글에서 공동 브랜딩됩니다.

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 공동 브랜딩을 보여 주는 Coho Craftsman 페이지
고객 공동 브랜드는 기본 브랜드의 서체에서 아이디어를 얻고 제목에는 serif font Constantia, 앱 전체의 다른 요소에는 sans-serif font Corbel을 사용합니다.

 

트랜잭션 페이지는 플랫 탐색 패턴을 사용합니다. 사용자는 각 섹션을 이동하여 정보를 보고 수정할 수 있습니다.

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 플랫 탐색 패턴, 페이지 내의 가로 이동 표시

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 플랫 탐색 패턴, 가로 이동 표시, 페이지 왼쪽

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 플랫 탐색 패턴, 가로 이동 표시, 페이지 가운데

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 플랫 탐색 패턴, 가로 이동 표시, 페이지 오른쪽

사용자는 트랜잭션 페이지에서 시맨틱 줌 뷰로 빠르게 이동하여 요약 정보가 포함된 모든 트랜잭션 기록을 볼 수 있습니다.

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 플랫 탐색 패턴, 시맨틱 줌 표시, 축소 보기

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 플랫 탐색 패턴, 시맨틱 줌 표시, 축소 보기에서 이동
색, 그래픽, 서비스 로고, 서체 등의 브랜드 요소는 일관성 있게 사용되어 비즈니스의 본질을 전달합니다.

 

사용자는 탐색 모음을 사용하여 다른 범주로 이동합니다.

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 탐색 모음

배송 전달

기사는 앱을 사용하여 배송을 고객에게 전달합니다. 2열 디자인을 사용하여 왼쪽에 재고를 표시하고 오른쪽에 콘텐츠를 표시하면 기사가 배송 세부 정보를 쉽게 탐색할 수 있습니다. 스트립, 공용 컨트롤 등의 브랜딩 요소는 앱에서 일관성 있게 사용됩니다.

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 2열 페이지, 재고 및 지도 표시

기사가 도착하면 오른쪽 열에 세부 정보가 세로 스크롤 목록으로 표시됩니다. 재고 목록과 세부 정보 콘텐츠가 동일한 방향으로 스크롤됩니다.

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 2열 페이지, 재고 목록 및 세부 정보 표시
기사가 트럭에서 배송을 찾는 데 도움이 되는 정보 그래픽은 앱의 다른 부분과 동일한 브랜딩 색을 활용합니다.

 

기사가 고객 서명을 요청하는 경우 앱이 세로 보기에 서명 페이지를 표시하고 브랜딩된 탐색 모음을 노출합니다. 세로 보기에서 기사가 장치를 고객에게 전달하는 것이 더 쉽습니다.

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 서명 페이지, 세로 방향
서명 요청은 중요한 브랜딩 시기입니다. 사용자는 엔터프라이즈 앱 및 브랜드와 인터페이스합니다.

 

기사가 서명을 받으면 앱에 나머지 항목과 진행률 그래픽이 표시됩니다.

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 재고 목록 페이지, 세로 방향

앱 공동 브랜딩

둘 이상 브랜드 간의 관계를 공동 브랜딩이라고 합니다. 여러 브랜드를 수용해야 하는 앱을 디자인할 때는 다음 질문에 유의하세요.

  • 커뮤니케이션을 주도하는 브랜드는 무엇인가요?
  • 지원 브랜드가 커뮤니케이션에서 어떤 역할을 하나요?

이러한 질문을 처리하지 못한 Windows 스토어 앱은 고객에게 혼동을 주고 브랜드를 희석시킬 위험이 있습니다.

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 공동 브랜딩

Fabrikam 예제는 시각적 요소의 일관성 있는 구현을 통해 브랜드를 강화하여 공동 브랜딩을 처리합니다. 예를 들어 Fabrikam 브랜드 색, 그래픽, 레이아웃 및 서체는 앱 전체에 표시되고 제한된 스타일 변형 집합을 따릅니다. 앱의 각 페이지는 앱이 Fabrikam에 의해 제공됨을 명확하게 전달합니다.

Coho Craftsman 브랜드가 기본 브랜드의 2차 브랜드임을 전달하기 위해 Coho Craftsman 로고, 서체 및 이미지가 Fabrikam 레이아웃에 연결됩니다. 예를 들어 Fabrikam의 다른 중소기업 파트너를 현재 Coho Craftsman이 사용하는 영역에 맞출 수 있는 방법을 고려해 볼 수 있습니다.

예제 Fabrikam Worldwide Logistics Windows 스토어 앱의 공동 브랜딩

이 예제에서는 기타 브랜드도 표시됩니다. 페이지 왼쪽의 신용카드 회사는 부분적으로 작은 규모, 콘텐츠별 배치 및 제한된 색 때문에 하위 수준 브랜드로 표시됩니다. 페이지 오른쪽의 의류 제조업체 브랜드는 크기가 축소된 단색 로고로 표시되고 기본 브랜드의 디자인 스타일을 따릅니다. 모든 경우에 시각적 요소는 지원 브랜드가 명확하게 유지되지만 기본 브랜드로 오해되지 않도록 수정되었습니다.

특유의 브랜드를 떠오르게 하는 예제

다음은 각 시각적 요소가 다양한 감정과 느낌을 떠올리는 데 어떤 도움을 주는지 보여 주는 몇 가지 예입니다. 각 시각적 요소에 대한 설명에서는 레이아웃을 만든 방법과 레이아웃이 중요한 이유에 대한 세부 정보를 제공합니다.

Contoso Downtown Café

색, 그리드, 레이아웃 및 서체로 브랜드를 표현하는 방식을 보여 주는 Contoso Downtown Café용 Windows 스토어 앱 예제
Contoso Downtown Café는 유명한 정통 브랜드로 손으로 직접 만든 요리와 집에서 만든 특별 음료를 자랑으로 여깁니다. 이 예에서는 색, 그리드, 레이아웃 및 서체가 브랜드를 떠오르게 하는 데 주로 사용되는 시각적 요소입니다.

 

Windows 스토어 앱 브랜딩의 색상표 예제   따뜻한 진회색, 황백색 및 구리색은 이 디자인의 느낌을 매우 다채롭게 합니다. 따뜻한 색상표는 홈메이드 빵 껍질, 스프 또는 패스트리에서 볼 수 있었던 색 중 일부를 연상시킵니다.
Windows 스토어 앱 브랜딩의 그리드 예제그리드   이 예에서 콘텐츠는 고의적으로 그리드를 "분할"했습니다. 메뉴 콘텐츠는 이 브랜드의 핵심이므로 메뉴에 대한 더 많은 공간을 제공할 수 있도록 위쪽 여백이 축소되었습니다. 회사 이름, 소개 텍스트 및 위치 정보가 좀 더 중앙에 배치된 것처럼 느껴지도록 왼쪽 여백이 조정되어 콘텐츠 공간에 여유가 생겼습니다. 이러한 모든 편차는 일관성있게 적용되므로 이 앱의 다른 모든 페이지에서 이행해보세요.
Windows 스토어 앱 브랜딩의 레이아웃 예제레이아웃   사람들로 하여금 이 카페를 다시 찾게 하는 것은 메뉴이므로 메뉴처럼 느껴지게 디자인되었습니다. 샌드위치 및 그 밖의 다른 메뉴들과 마찬가지로 레이아웃도 손으로 직접 만든 것처럼 느껴지게 만들었습니다. 황백색의 배경색은 종이를 연상시키고, 분위기는 매혹적이며, 콘텐츠는 세로 구분 규칙과 텍스트 왼쪽 정렬을 사용하여 잘 정돈되어 있습니다.
Windows 스토어 앱 브랜딩의 서체 예제서체   Copperplate Gothic Bold는 이 디자인에서 사용된 기본 서체로, 회사 이름을 독특한 모양과 느낌으로 표현합니다. 이 서체는 손으로 새긴 우드 사인과 유사합니다. Script MT Bold와 Segoe UI도 서체로 함께 사용되었습니다. 스크립트 글꼴은 메뉴 헤더에서 드물게 사용되며 손으로 쓴 스타일을 연상시킵니다. Segoe UI는 본문 텍스트로 사용되어 메뉴 선택 항목의 가독성을 높입니다.

 

Contoso French Bakery 브랜드

색, 레이아웃 및 서체로 브랜드를 표현하는 방식을 보여 주는 Contoso Downtown Café용 Windows 스토어 앱 예제
Contoso French Bakery는 너그럽고 관대한 것으로 유명한 브랜드입니다. 많은 고객들에게 이 베이커리는 단 것을 좋아하는 달콤한 기쁨을 채우기 위해 사람들이 찾아낸 장소입니다. 이 예제에서 색, 이미지 및 레이아웃은 브랜드를 떠오르게 하는 데 사용되는 시각적 요소입니다.

 

Windows 스토어 앱 브랜딩의 색상표 예제   단지 2가지 색상인 갈색과 분홍색 색상표만으로도 충분히 고객이 베이커리를 생각하게 할 수 있습니다. 갈색은 원색으로 초콜릿 이미지를 떠올리게 하며, 분홍색은 반짝거리는 쿠키와 케이크를 연상시키는 강조색입니다. 두 색과 관련된 향미에 상관없이 둘 다 브랜드에 중대한 영향을 미칩니다. 갈색은 완전 컬러 사진이 두드러지도록 풍요로운 배경을 충분히 자연스럽게 제공하며, 분홍색은 충분히 밝아 특정 콘텐츠를 강조할 수 있습니다.
Windows 스토어 앱 브랜딩의 이미지 예제이미지   사진은 이 디자인의 핵심입니다. 각 이미지가 충분히 먹음직스럽게 보일 수 있도록 시간과 전문적인 지식에 전념하는 것은 당연합니다. 그 결과로, 베이커리의 음식 이미지가 이 브랜드를 실제로 명료하게 설명합니다. 또한 이미지는 콘텐츠의 범주를 정의하는 데도 사용됩니다.
Windows 스토어 앱 브랜딩의 레이아웃 예제레이아웃   표준 Windows 스토어 앱 디자인과 비교했을 때 이 예제의 느낌은 다릅니다. 가장 구별되는 차이는 정사각형 타일이 없다는 것입니다. 타일과 그리드는 여전히 존재하지만 이미지에 멋을 내어, 예를 들면 컵케이크 통의 부채꼴 원형 모양과 같이 베이커리에서 찾아볼 수 있는 품목을 흉내내었습니다.

 

Contoso Sandwich Truck 브랜드

그래픽, 그리드 및 로고로 브랜드를 표현하는 방식을 보여 주는 Contoso Sandwich Truck용 Windows 스토어 앱 예제
Contoso Sandwich Truck는 도시 이미지로 사교적이고 위치를 인식하는 것으로 유명한 브랜드입니다. 이 브랜드는 트럭과 훌륭한 요리사들이 뒷받침을 하고 있으며, 정신없이 바쁜 사람들을 목표로 합니다. 이 예에서는 그래픽, 그리드 및 로고가 브랜드를 떠오르게 하는 데 사용되는 시각적 요소입니다.

 

Windows 스토어 앱 브랜딩의 그래픽 예제그래픽   메뉴 선택 항목은 포커스가 유지되며 과도한 그래픽 사용으로 혼잡해지지 않습니다. 하지만 이러한 그래픽이 이 브랜드의 명성을 확고히 하는 역할을 합니다. 예를 들어 '별'은 고객의 평가 시스템을 넌지시 나타내고, 색과 모양은 도시 거리의 신호 체계를 연상시키며, 위치 기반 정보는 모래와 아스팔트 도로 그래픽을 포함하는 어두운 상자에서 설정됩니다.
Windows 스토어 앱 브랜딩의 그리드 예제그리드   이 디자인의 모든 측면은 표준 그리드를 기반으로 하며, 표준 그리드는 도시의 거리 지도의 부감도와 유사한 구조를 모방하고 있습니다. 이렇게 정돈되어 표현되는 것과는 별도로 중복된 풀 블리드(full-bleed) 콘텐츠 및 그래픽 부문에서는 이 디자인을 돋보이게 만들었습니다. 전반적인 콘텐츠는 굵게 표시되며, 정신없이 바쁘고 신속한 결정을 내려야 하는 사람들을 단도직입적으로 끌어 당기는 수단이 됩니다.
Windows 스토어 앱 브랜딩의 로고 예제로고   이 예에서는 회사 로고가 사용되지 않았습니다. 회사 이름은 로고가 있던 자리에 텍스트로 나타납니다. 이 예에서는 전체 구성에서 회사 이름이 처음으로 사용되었음을 알 수 있습니다. 로고나 이름이 단순히 왼쪽 상단에 정렬되지 않았습니다.
Windows 스토어 앱 브랜딩의 색상표 예제   검은색과 노란색이 테마 컬러로 사용됩니다. 성격적인 관점에서 검은색과 노란색은 거리 간판, 도로 표시 등과 같은 도시 환경에서 볼 수 있는 색입니다.

 

앱 페이지에서 브랜드를 강화하는 예제

콘텐츠가 풍부한 보조 페이지에 브랜드를 포함하는 것은 방문 페이지의 브랜딩만큼 중요합니다. 이 예제에서는 가상 스포츠 팀 앱을 사용하여 여러 앱 페이지에 브랜드를 통합하는 방법을 보여 줍니다.

Fabrikam FC 프로 축구팀

Fabrikam FC 프로 축구팀의 팬은 좋아하는 팀의 비공개 장면, 좋아하는 선수의 모든 세부 정보 및 모든 최신 정보를 어디서나 확인할 수 있기를 원합니다. 방문 페이지 디자인은 브랜드의 대담한 동적 특성을 반영합니다.

예제 Fabrikam FC 팀 Windows 스토어 앱의 방문 페이지

색, 서체 및 그래픽이 브랜드의 대담한 동적 특성을 강조합니다.

 

이 앱은 플랫 탐색 패턴을 사용합니다. 사용자가 탐색 모음에서 살짝 밀어 앱의 다른 뷰로 이동합니다.

예제 Fabrikam FC 팀 Windows 스토어 앱의 탐색 모음

색과 로고가 브랜딩 요소로 탐색 앱 바에 전달됩니다. 어두운 배경의 강렬한 팀 색은 대담한 개성을 나타내기 위해 강한 대비를 만들고, 노란색은 앱 전체에서 대화형 작업을 나타내는 데 사용됩니다.

 

사용자는 탐색 모음을 사용하여 팀의 선수를 봅니다.

예제 Fabrikam FC 팀 Windows 스토어 앱의 선수 페이지

글꼴은 앱의 다양한 보기에 일관적으로 적용됩니다. sans serif 서체가 팀의 강한 에너지와 대담한 개성을 두드러지게 합니다. 모두 대문자로 표시된 글꼴 스타일은 특정 텍스트 레이블을 그래픽 요소처럼 보이게 합니다.

 

지정된 선수로 빠르게 이동하려면 이 페이지의 시맨틱 줌 보기로 축소합니다.

예제 Fabrikam FC 팀 Windows 스토어 앱의 시맨틱 줌

선수들의 액션 장면이 그리드를 분할하여 에너지가 넘치는 동적 레이아웃을 만듭니다. 이러한 장면은 팀 페이지와 방문 페이지에 사용됩니다.

 

브랜드를 강화하는 아이콘과 그래픽을 표시하는 예제 Fabrikam FC 팀 Windows 스토어 앱

간단한 아이콘과 그래픽이 콘텐츠를 더 재미있고 액세스 가능하게 만들며 앱 전체에서 대화형 작업과 탐색을 조장합니다.

 

관련 항목

Windows 스토어 앱 만나보기
UX 지침
명령 패턴
탐색 패턴
앱 페이지 레이아웃
창 크기 및 화면에 맞게 크기 조정에 대한 지침
글꼴에 대한 지침
ListView를 브랜딩하는 방법
갤러리

 

 

표시:
© 2015 Microsoft