몰입 패턴

이 가이드에서는 Charades 게임의 형태로 간단한 몰입형 환경을 구성하는 구성요소를 설명합니다. 대부분의 경우 맞춤 UI와 입력 컨트롤이 필요하기 때문에 게임은 몰입에 완벽한 사용 사례가 됩니다.

또한 자체 Glass 소프트웨어 빌드에 중요한 설계, 개발, 배포 팁도 알아봅니다.

시작하기 전에

Charades 게임의 전체 소스는 GitHub에서 확인할 수 있습니다. 이 가이드에서 자주 참조하므로 시작하기 전에 Android 스튜디오로 가져옵니다.

  1. 빠른 시작 화면에서 버전 제어에서 체크아웃 > Git을 클릭합니다.
  2. Charades에서 클론 URL을 복사합니다.
  3. 클론 URL을 Vcs Repository URL에 붙여넣고 복제를 클릭합니다.
  4. 다음 화면에서 예를 클릭합니다.
  5. 다음 화면에서 확인을 클릭합니다.
  6. 프로젝트를 빌드하고 Play 버튼을 클릭하여 연결된 Glass에서 프로젝트를 실행합니다. 호출 세부정보는 샘플의 README를 확인하세요.

학습할 내용

Android SDK의 구성요소를 사용하여 Charades 몰입감을 빌드한 후 GDK를 사용하여 Glass 환경에 연결하는 방법을 알아봅니다. 학습할 주제 목록은 다음과 같습니다.

  • Google에서 제공하는 디자인 리소스로 UI 흐름 설계
  • Glass 웨어를 시작하는 음성 트리거 설계
  • Android 활동을 사용하여 게임의 UI 구조 정의
  • 사용자가 게임 옵션을 선택할 수 있는 Android 메뉴 항목 빌드
  • 기본 메뉴의 음성 트리거를 사용하여 Glass 환경에 통합
  • 사용자 입력을 감지하고 맞춤 작업을 실행하는 GDK 동작 감지기 사용
  • 더 세련되게 만들고 Glass 스타일을 따르는 간단한 Android UI 구현을 학습합니다.
  • 배포 프로세스 및 유리웨어 출시 시 주의사항 알아보기

디자인

개발을 시작하기 전에 잠시 시간을 내어 Gware를 설계하세요. 이렇게 하면 Glass에서 가장 잘 작동하는 UI 흐름, 사용할 음성 명령, 카드 모양을 효과적으로 파악할 수 있습니다.

물론 Glass 소프트웨어 설계는 반복 프로세스입니다. 지금 디자인하는 작업 중 일부는 변경될 수 있지만, 이 작업의 상당 부분을 초기에 실행하는 것은 훌륭한 환경을 빌드하는 데 중요합니다.

UI 흐름

UI 흐름을 설계하는 것은 간단한 연습이며 코드 줄을 작성하기 전에 Glassware를 시각화할 수 있습니다. Google에서 만드는 Glass 소프트웨어에 대해 항상 하고 있습니다.

Charades 몰입형의 주요 UI 요소를 살펴보겠습니다. 자체 UI를 만들 때 UI의 작동 방식과 이 프로세스가 얼마나 유용한지 알아보겠습니다.

스플래시 화면

이 화면은 사용자가 Charades 몰입형을 시작할 때 가장 먼저 보게 되는 화면입니다. 이를 통해 사용자는 게임 환경에 들어가기 전에 방향을 파악할 수 있으며 사용자에게 익숙한 일반적인 게임 구조입니다.

사용자가 터치패드를 탭하면 새 게임과 안내라는 두 개의 항목이 있는 메뉴 시스템이 나타납니다.

안내 모드

몰입감을 조성할 때 입력 메커니즘은 가끔 사용되므로, 특히 몰입감과 상호작용해야 하는 경우 이를 사용자에게 알리는 것이 좋습니다.

이 카드 세트는 게임에 관한 안내를 표시하고 사용자에게 UI를 탐색하는 데 사용하는 방법과 사용해야 하는 동작을 안내합니다. 사용자는 스플래시 화면에서 안내 메뉴 항목을 탭하여 이동합니다.

게임플레이 모드

이러한 화면은 기본 게임플레이 흐름을 구성합니다. 사용자는 스플래시 화면에서 새 게임 메뉴 항목을 탭하여 이 흐름으로 이동할 수 있습니다.

이 카드 세트는 임의의 단어 (최대 10개)를 표시합니다. 단어를 앞으로 스와이프하고 단어를 올바르게 설명하는 경우 터치패드를 탭하여 단어를 건너뜁니다.

게임 결과 화면

이 화면은 경기 결과를 보여줍니다. '게임 오버' 화면이 처음에 표시되고 사용자는 앞으로 스와이프하여 게임 결과를 볼 수 있습니다. 사용자가 결과 카드를 탭하면 다른 게임을 시작할 수 있도록 새 게임 메뉴 항목이 표시됩니다.

음성 명령

음성 명령은 설계 프로세스 초기에 상당히 빠르게 파악해야 합니다. 음성 명령을 사용하면 필요한 경우 사용자가 Glass 홈(시계 카드) 음성 메뉴에서 Glassware를 시작할 수 있습니다. 이는 Glass 소프트웨어 설계의 중요한 부분입니다.

예를 들어 업데이트 게시 명령어는 파이어 앤 포겟 모델에서 파이어 앤 포겟(fire-and-forget) 모델로 작동합니다. 여기서 사용자는 명령어를 말하면 일부 텍스트 및 Glass 소프트웨어는 사용자의 추가 개입 없이 명령어를 처리합니다. 이렇게 하면 사용자가 수행 중인 작업으로 빠르게 돌아갈 수 있습니다.

반면 게임하기와 같은 동작에서는 일반적으로 사용자를 스플래시 화면에 배치하여 먼저 방향을 설정하는 것이 좋습니다. 이 음성 명령은 몰입도를 시작할 가능성이 높으므로 사용자가 게임 시작을 위해 추가 화면과 메뉴를 볼 수 있을 것으로 예상할 수 있습니다. 음성 명령 직후 사용자를 게임 환경에 즉시 투입하는 것은 일반적으로 게임에 나쁜 경험입니다.

Charades는 게임하기 음성 명령을 사용합니다 . 사용자가 음성 명령을 호출한 후 Charades 스플래시 화면이 표시되면 사용자는 탭하여 추가 옵션 (이 경우 새 게임 또는 안내)을 선택하라는 메시지를 표시합니다.

카드 레이아웃

몰입형 카드나 실시간 카드 중 무엇을 빌드하든 가능한 경우 CardBuilder 또는 XML 레이아웃을 사용해야 합니다.

경우에 따라 자체 레이아웃을 빌드해야 할 수도 있으므로 UI 가이드라인을 따라 가장 멋진 Glass 웨어를 만드세요.

스톱워치는 일반 레이아웃 가이드라인을 따르지만 뷰 및 레이아웃과 같은 표준 Android 구성요소를 사용하는 맞춤 UI 레이아웃을 포함합니다.

개발

몰입도를 개발하려면 Android 개발에 사용하는 도구와 동일한 도구를 사용하여 Glass 소프트웨어의 대부분을 빌드한 다음 GDK 부가기능의 API를 사용하여 동작 감지기 및 음성 명령과 같은 Glass 관련 기능에 액세스합니다.

Glass 소프트웨어 생성에 공통 Android 구성요소를 자주 사용하게 될 수 있지만 몇 가지 개념은 다를 수 있다는 점에 유의하세요. 예를 들어 몰입을 Android 활동과 동일시해서는 안 됩니다. 몰입형은 하나 또는 여러 개의 Android 활동과 GDK 및 Android SDK의 기타 여러 구성요소로 빌드된 Glass용으로 설계된 환경입니다.

나머지 개발 섹션에서는 Charades 게임의 구조와 앞서 가져온 프로젝트의 주요 구성요소를 살펴봅니다. 따라 할 수 있도록 지금 Android 스튜디오를 준비하는 것이 좋습니다. 소스 코드 자체에 주석이 포함되어 있으므로 이 섹션에서는 각 파일의 대략적인 목적과 자체 Glass 소프트웨어에 적용할 수 있는 유용한 팁을 살펴봅니다.

Charades의 주요 구성요소에 대한 간략한 개요는 다음과 같습니다.

  • Glass 기본 음성 메뉴에 연결하는 음성 트리거 선언
  • 사용자가 활동을 시작하거나 안내를 확인할 수 있도록 스플래시 화면 활동 이 활동은 안내 활동 또는 게임플레이 활동을 시작합니다.
  • 튜토리얼 활동은 사용자에게 게임의 주요 작업을 실제로 실행하여 게임을 실행하는 방법을 보여줍니다.
  • 게임플레이 활동을 통해 사용자가 실제 게임을 플레이할 수 있음
  • 결과 활동은 게임의 점수와 추측 단어 및 추측되지 않은 단어 목록을 표시합니다. 또한 사용자는 메뉴 항목으로 새 게임을 시작할 수 있습니다.

음성 명령

사용 중인 명령어를 지정하는 XML 리소스 파일로 음성 명령을 만든 다음 AndroidManifest.xml 파일에서 XML 리소스를 지정하면 됩니다.

Charades 음성 명령과 연결된 파일은 다음과 같습니다.

  • res/xml/voice_trigger_play_a_game .xml - 사용할 음성 명령을 선언합니다.
  • AndroidManifest.xml - 음성 명령을 말할 때 시작할 활동을 선언합니다.

스플래시 화면 활동

스플래시 화면은 사용자가 Charade를 시작할 때 가장 먼저 보게 되는 게임으로, 게임을 시작하기 전에 방향을 지정합니다.

이 활동과 연결된 파일은 다음과 같습니다.

  • res/layout/activity_start_game.xml: 스플래시 화면의 레이아웃을 선언합니다.
  • res/menu/start_game.xml - 안내 및 새 게임 메뉴 항목이 포함된 스플래시 화면의 메뉴 시스템을 선언합니다.
  • res/values/dimens.xml - 이 프로젝트의 활동이 Glass 스타일을 따르는 데 사용하는 표준 카드 크기 및 패딩을 선언합니다.
  • src/com/google/android/glass/sample/charades/StartGameActivity.java: 스플래시 화면의 기본 클래스입니다.
  • res/drawable-hdpi/ic_game_50.png - 새 게임의 메뉴 아이콘입니다.
  • res/drawable-hdpi/ic_help_50.png - 안내 메뉴 아이콘.

게임 모델

항상 게임의 모델 (게임 상태)을 UI에서 분리하는 것이 좋습니다. CharadesModel 클래스는 게임의 점수, 게임플레이 모드에서 추측한 문구의 수, 다양한 안내, 사용자가 안내 모드에서 이러한 문구를 확인했는지 여부를 추적합니다.

게임 모델과 연결된 파일은 다음과 같습니다.

  • src/com/google/android/glass/sample/charades/CharadesModel.java

기본 게임 활동

게임의 튜토리얼 모드와 게임플레이 모드는 매우 유사한 기능과 UI를 공유하므로 이 기본 클래스는 두 기능의 공통 기능을 정의합니다. 안내 및 게임플레이 모드의 활동은 이 클래스를 확장합니다.

이 활동과 연결된 파일은 다음과 같습니다.

  • res/layout/activity_game_play.xml: Charades의 게임플레이와 안내 모드에서 공유하는 레이아웃을 정의합니다.
  • src/com/google/android/glass/sample/charades/BaseGameActivity.java - 공유되는 '게임'의 게임플레이와 명령 모드의 기본 기능을 정의합니다.

안내 활동

안내 활동에는 게임 방법을 설명하는 세 개의 카드가 표시됩니다. 사용자가 계속 진행하기 전에 카드에 표시된 작업을 실행하는지 여부를 감지합니다.

이 활동과 연결된 파일은 다음과 같습니다.

  • src/com/google/android/glass/sample/charades/TutorialActivity.java - BaseGameActivity를 확장하고, 사용자가 게임 관련 안내를 진행할 때 표시할 안내 텍스트와 동작 처리 방법을 정의합니다.

게임플레이 활동

게임플레이 활동은 게임의 주요 흐름을 정의합니다. 표시할 단어와 점수를 유지하는 방법을 파악하고 동작을 처리하는 동작 감지기가 있으며 게임이 끝나면 결과 활동이 실행됩니다.

이 활동과 연결된 파일은 다음과 같습니다.

  • GamePlayActivity - BaseGameActivity를 확장하고 기본 게임 흐름 로직을 포함합니다.

결과 활동

결과 활동에는 추측한 단어, 추측하지 않은 단어, 게임의 점수가 표시됩니다. 또한 사용자가 새 게임을 시작할 수 있는 메뉴 항목도 포함되어 있습니다.

이 활동과 연결된 파일은 다음과 같습니다.

  • res/layout/game_results.xml - '게임 오버' 카드의 레이아웃 정의
  • res/layout/card_results_summary.xml - 추측한 단어와 추측되지 않은 단어를 목록에 표시하는 레이아웃을 정의합니다.
  • res/layout/table_row_result.xml - 결과 요약의 개별 행 레이아웃을 정의합니다.
  • src/com/google/android/glass/sample/charades/GameResultsActivity.java - 앞서 언급한 XML 리소스로 정의된 레이아웃과 메뉴를 보여주는 실제 활동을 정의합니다.
  • res/raw/sad_trombone.ogg - 사용자가 모든 단어를 듣지 못할 때 나는 소리입니다.
  • res/raw/triumph.ogg - 사용자가 단어 10개를 모두 읽을 때 재생되는 알림음입니다.
  • res/drawable-hdpi/ic_done_50.png - 체크 표시 아이콘이며 추측한 단어별로 표시됩니다.

애니메이션 리소스

다음 애니메이션 리소스는 Charades에 세련미를 더합니다.

  • res/anim/slide_out_left.xml - 예를 들어 단어가 전달될 때 종료 뷰를 애니메이션하여 왼쪽으로 슬라이드합니다.
  • res/anim/slide_in_right.xml - 진입 뷰가 애니메이션되어 오른쪽에서 슬라이드됩니다(예: 새 단어가 뷰에 들어가는 경우).
  • res/anim/tug_right.xml - 스와이프를 사용하지 않는 뷰에서 스와이프하는 경우 터그 애니메이션을 정의합니다. 이를 통해 사용자는 스와이프가 효과가 없음을 알 수 있습니다.

Android 매니페스트

AndroidManifest.xml 파일은 시스템에서 실행 방법을 알 수 있도록 Glass 소프트웨어의 주요 구성요소를 설명합니다. Charades의 매니페스트는 다음을 선언합니다.

  • Glass 소프트웨어의 아이콘 및 이름입니다. Glass는 두 개 이상의 Glass 소프트웨어가 동일한 음성 명령에 응답하는 경우 기본 터치 메뉴에 이 정보를 표시합니다.
  • 제스처와 관련된 모든 활동입니다. 시스템에서 Glass 소프트웨어의 활동을 시작하는 방법을 알아야 합니다.
  • 음성 명령을 말할 때 특정 활동을 시작하는 음성 명령 및 인텐트 필터
  • Glass 소프트웨어의 버전 코드입니다. 이 APK의 새 버전이 MyGlass에 업로드될 때마다 이 코드(및 일반적으로 버전 이름도)를 업데이트해야 합니다.