인터렉티브 튜토리얼

잠금화면을 처음 사용하는 유저를 위해 L앱이 처음 설치된 시점에 안내를 하는 가이드이며, 유저가 직접 튜토리얼을 따라하며 L앱의 사용 방법을 자연스럽게 익히는 것에 그 목적이 있습니다.

인터랙티브 튜토리얼 기능은 BuzzScreen SDK 1.9.8.0 버전 이상부터 사용할 수 있습니다.

1. User Flow

움직이는 손 이미지를 따라 스와이프 하거나 클릭을 통해 진행되는 방식과, 다음을 누르며 진행하는 방식으로 나뉩니다.

크게 두 단계로 구성되어 있습니다:

네비게이션 튜토리얼
1. 피드 확인 후 첫화면으로 복귀
2. 랜딩 후 첫화면으로 복귀
3. 잠금 해제
위젯 튜토리얼 (선택)

2. 네비게이션 튜토리얼

BuzzScreen.getInstance().activate() 전에 호출해야 하며, 잠금화면이 최초로 활성화 됐을 때 설정한 값에 따라 가이드를 노출합니다.

setInteractiveGuide(): 인터랙티브 튜토리얼을 설정을 할 수 있는 함수입니다. 파라미터로 InteractiveGuideConfig 클래스의 instance를 받습니다.
interactiveGuideCongfig: Interactive guide가 어떻게 보여질지 설정하는 클래스 입니다.
- Enabled: Interactive guide를 활성화/비활성화 할 수 있습니다.
- Type: InteractiveGuideConfig.Type.Navigation 으로 설정해야 합니다.

public class MainActivity extends Activity {
    ...
    InteractiveGuideConfig interactiveGuideConfig = new InteractiveGuideConfig.Builder()
    .setEnabled(true)
    .setType(InteractiveGuideConfig.Type.Navigation)
    .build();
    BuzzScreen.getInstance().setInteractiveGuide(interactiveGuideConfig);
    ...
}

Customization

아래의 메소드를 사용하여 튜토리얼의 progress bar 및 indicator 색상을 변경할 수 있습니다.

<resources>
    ...
    <color name="interactive_guide_primary_color">#007DD6</color>
    ...
</resources>

각 단계별 설명 문구도 strings.xml 파일에 추가하여 변경가능합니다. 별도로 세팅하지 않는 경우, 기본 문구를 사용하게 됩니다:

<string name="bs_guide1_description">위쪽으로 밀어 다음 컨텐츠를 확인해 보세요</string>
<string name="bs_guide2_description">이제 아래쪽으로 밀어 처음 컨텐츠로 돌아가 보세요</string>
<string name="bs_guide3_description">왼쪽으로 밀어 관련된 내용을 읽어 보세요</string>
<string name="bs_guide4_description">마지막으로, 오른쪽으로 밀어 잠금해제 하세요</string>

3. 위젯 튜토리얼 (선택)

위젯 튜토리얼은 각 퍼블리셔마다 앱에서 사용하는 위젯이 다르기 때문에 개별 앱에서 구현해야 합니다. 다음 가이드는 BaseLockerActivity를 상속받는 Activity에서 작성되어야 합니다.

setInteractiveGuideListener(): 네비게이션 튜토리얼이 끝나는 시점을 callback으로 받을 수 있도록 리스너를 등록합니다.
onInteractiveGuideComplete(): 네비게이션 튜토리얼이 완료되는 즉시 호출됩니다. 즉 유저가 네비게이션 튜토리얼의 마지막 과정인 '잠금 해제'를 끝매녀 호출됩니다. 해당 리스너를 사용하는 쪽에서는 해당 함수가 호출될때 BuzzPreferences에 위젯 부분이 활성화 된 것을 저장합니다.

onResume()에서는 KEY_LOCK_INTERACTIVE_TUTORIAL_WIDGET_SHOULD_SHOW 값을 확인하여 위젯 튜토리얼 부분을 보여줄지 말지 결정합니다.

구현 예시

1. 오퍼월 위젯에 대한 가이드를 Fragment로 구현하도록 하겠습니다. 여기서는 오퍼월로 이동하는 버튼과 해당 과정을 넘어가는 스킵 버튼이 존재합니다. 이 Fragment 내부 구성은 작성하는 앱의 기능에 맞춰 자유롭게 변경할 수 있습니다.

LockscreenGuideFragment.java

2. LockscreenGuideFragment.java를 Activity에서 필요한 시점에 생성하여 잠금화면 위에 오버레이 형식으로 노출합니다. 유저가 버튼을 클릭했을 때 해당 액션을 수행합니다. 오퍼월 버튼을 눌렀을 때는 오퍼월 Activity를 실행하고 위젯 튜토리얼 fragment를 종료합니다. 스킵 버튼을 눌렀을 때는 위젯 튜토리얼 fragment를 바로 종료합니다.

layout.xml