구글 캐스트 "User Experience Guidelines" 정리

* 급하게 읽으면서 바로 정리한 글이므로 번역이 이상할 수 있습니다. (물론 틀릴 수도 있어요 :-))

* 원문 : https://developers.google.com/cast/docs/ux_guidelines



구글 캐스트 사용자 경험( User Experience with Google Cast )

구글캐스트는 허가된 안드로이드와 iOS 모바일 앱, 크롬 웹 앱들에서  크롬캐스트와 같이 캐스트 가능한 장치에 컨텐츠를 캐스트하는 기술임. (비디오, 오디오, 스크린 쉐어링(미러링))

캐스트 사용자모델에서, 모바일 장치 혹은 랩탑이 재생을 컨트롤하는 센더(Sender)이고, TV는 컨텐츠를 보여주는 리시버(Receiver)이다.  모든 사용자 인터랙션과 대부분의 사용자 인터페이스는 TV 보다는 센더장치에 위치한다.

캐스팅은 둘 혹은 그 이상의 스크린사이에서 필요하게 되는데; 센더 UI와 리시버 UI는 함께 동작해야 한다. 예를 들어 컨텐츠가 일시정지면, 모바일 디바이스가 재생을 다시 시작하는 액션을 제공하는 동안 TV는 일시정지를 알려줘야 한다.


고려사항( Considerations )

하드웨어와 리소스 제한 때문에,  어플리케이션이 구글캐스트를 지원하는데 제한이 있다.

    • 크롬캐스트는 저전력 디바이스, 메모리, CPU, GPU제한으로 리시버 어플은 가능한한 가벼워야 한다.
    • 기본적으로 주어진 인터랙션 모델, 탭, 윈도우나 팝업은 리시버 앱에서 생성할 수 없다.  리시버 디바이스 스크린에서는 입력을 요청하지 않아야 한다.
    • 캐스트 리시버는 video 재생을 위해 크롬브라우저에 최적화 되었다. 따라서 WebGL, NaCL(크롬 네이티브 클라이언트)는 지금 지원하지 않고, 크롬 익스텐션도 마찬가지다.
    • 구글캐스트는 <audio>, <video> 태그에서 single concurrent media stream playback을 지원하거나  WebAudio API를 사용한 multi auido tracks를 사용을 지원한다. 오직 하나의 video 엘러먼트는 아무때나 DOM에서 활성화 될것이다. 추가적으로 비디오 합성, 조작, 트랜스폼, 로테이션, 줌밍은 지원하지 않는다.(compositing, manipulation, transformations, rotations, zomming not supported.)



전체 설계 원칙( Overall design principles )

리시버 인터페이스(Receiver interface):
   
    • 리시버는 어떤 인터랙션 요소도 가져서는 안됨. 오직 앱 상태, 에러 등의 정보등을 해설해야 함. 사용자 인터랙션은 오직 캐스트 센더(폰, 타블렛, 크롬브라우저)에 위치해야 하고, 캐스트 리시버는 인터랙션이 없음.
    • 액션은 TV 화면 중간에 나타난다는 것을 기억하고, 여러분의 UI 요소는 보여지는 인터페이스를 해서는 안됨.  UI 요소는 리시버 화면의 최하단에 배치.
    • UI는 투명하게 사용할것. UI는 컨텐츠를 심하게 막아 보이게 함.  컴퓨터 UI 처럼 느껴져선 안됨.(The experience should not feel like a “computer” UI.)
    • 가능하면, 한 스크린상태에서 다른 상태로 변경될때 부드럽고 극장느낌이 나도록 할 것.  갑작스런 상태변화 보다는 페이드 인/아웃 변화를 사용할 것.  예를 들면, 화면에서 컨텐츠 로딩상태를 기다리게 하고 영상 재생으로 페이드 되도록 할것.

센더 인터페이스(Sender interface):

    • 센더는 액션과 리시버 상태 정보 표시를 지원한다. 예로, 컨텐츠 일시정지면 모바일 디바이스가 플레이준비라고 가르키는 동안 티비는 일시정지라고 알려줘야 한다. (e,g. 사용자 버튼을 보여줌)
    • 모바일 센더앱으로 부터 캐스팅될때는, 포트레이트 방향이 우선이다.  이것은 모바일 디바이스에서 자연스런 방향이고 사용자는 한손이나 엄지로 컨트롤 할수 있어야 한다. 비디오를 보는 동안은 랜드스케이프가 가장 좋다.  포트레이트는  캐스팅될때 유저에게 간단하게 보이는 경향이 있음. 여러분의 앱은 두 오리엔테이션 모두에서 잘 동작해야 함.
    • 속도 문제.  사용자들은 빠른 캐스팅 콘트롤과, 큰 스크린에서 즉시 재생이 되어 보는것이 필요할 수 있다. 컨텐츠가 로딩되는 동안 애니메이션 로딩 인디케이터를 제공하고 화면 전환은 보다 빠르게 느끼도록 도와야 한다.

여러분의 App이 따르는 이 원칙들이  Google Cast Design Checklist를 이용하여 사용자 인터페이스 검토를 보증하는 가장 쉬운 방법이다.



브랜드 가이드라인(Brand guidelines)

구글 캐스트 브랜드 가이드라인들은   "Google Cast Ready" 텍스느나 "Google Cast Ready" 뱃지를 사용할 때 추가적인 요구사항들을 준비해야 한다.

구글 캐스트 레디 뱃지나 텍스트를 이용하면 크롬캐스트에서 동작하는 여러분의 앱을 다른이들이 알수 있다. 여러분에게 이 뱃지가 승인 준비시에는 필요하지 않다. 그러나 Google Cast Developer Terms of Service 나 Design Checklist , 구글 캐스트 준비 텍스트나 뱃지를 브랜드 가이드라인을 적용하려면 확실히 하길 바란다.  아마도 구글은 여러분의 뱃지사용을 수정하거나 중지하도록 요구할 것이다.


"Google Cast Ready" 텍스트 ( Google Cast Ready in text )

텍스트를 쓸때, "Google Cast Ready"는 대문자로 시작해야 한다.

최초에는 항상 TM(Trade Mark) 심볼을 포함하거나  이  "Google Cast™ Ready"  텍스트가 가장 두드러진  사례이다.

크롬캐스트 호환되는 상품/앱으로 설명할때는, "Google Cast Ready"  구절을 사용하라.  예를 들어  “This product/app was designed to be Google Cast™ Ready” 또는 “This product/app is Google Cast™ Ready.”

"Google Cast Ready" 마크나 뱃지를 사용하는 어떤 문서에서든 문서의 아래쪽에 아래 권한을 포함해야 한다.

    Google Cast Ready and the Google Cast Ready Badge are trademarks of Google Inc.
   


Google Cast Ready 뱃지 ( Google Cast Ready Badge )

"Google Cast Ready" 로고는 당신의 웹사이트, 앱 스토어 리스트, 마켓팅 요소, 프로모션 요소로 구글 캐스트 프로토콜을 사용하는 디바이스의 호환성이 표시되도록 사용할 수 있다.

    • 뱃지 이미지의 컬러,  부분, 간격, 또는 어떤 측면의 요소든 수정하지 말것.
    • 다른 앱 마켓에 위치하기 위해  로고를 나란히 사용할 때는 구글 캐스트 로고는 동일한 사이즈거나 커야 한다.
    • 당신의 페이지에 메인 요소로 뱃지를 만들지 말것.
    • 당신의 페이지에서 로고와 아이콘사이에 일정한 간격을 유지.
    • 백그라운드가 흰색, 밝은 색 이나 중간 톤을 사용할때는 블랙 뱃지를 사용하라.
    • 백그라운드가 검은색이나 어두운 톤이면 흰색 뱃지를 사용.
    • 성인 컨텐츠나 도박, 폭력, 욕설이 포함되거나 12세 이하에게 담배나 알콜을 판매를 수반하거나  다른 적용가능한 법이나 법령에 위배되거나 그외에 부적절한 페이지에는 뱃지를 사용하지 말것.


Linking

온라인에서 사용할때, 뱃지는 아래중에 하나에 링크해야 한다.

    • Google Cast Ready 앱 또는 상품들의 구글 리스트, 현재는 chromecast.com/apps.
    • 여러분에 의해 게시된 상품들의 리스트
    • 여러분이 게시한 상품의 상세 페이지
    • 여러분이 게시한 앱들의 리스트
    • 구글플레이나 애플 앱스토어에 여러분이 게시한 앱의 상세 페이지