다음 항목은 Pop 의 디자인 변경 항목과 기능의 추가/ 변경을 담고 있습니다. POP 디자인 가이드 문서를 통해 보다 정확한 변경 항목을 확인할 수 있습니다.

다음 과정이 완료 되었는지 확인이 필요합니다.

공통 적용 항목 연동이 완료 되었는지 (링크)

[Ext.point] Pop Type 연동이 완료 되었는지 (링크)

변경된 Config 를 적용하고, Pop 이 정상적으로 동작하는지 (링크)

번호는 이전 문서와 연결하여 진행합니다.

연동하기

4. 추가 설정, 기능을 적용하기

CTA Color 변경

여기에서는 CTA color 변경을 설명합니다. Color 변경 외에 CtaView를 Default로 제공되는 View가 아닌, 다른 모양의 View로 만들고 싶으신 경우 여기를 참조해 주세요.

	기본 Color
	변경 된 Color

project 의 colors.xml 파일에 아래의 color resource 값을 추가하면 CTA color 가 변경됩니다. (Benefit 의 모든 CTA Color 가 변경됩니다.)

benefit_native_bg_cta_button_normal CTA 가 노출됐을 때
benefit_native_bg_cta_button_pressed CTA 가 눌렸을 때
benefit_native_bg_cta_button_disabled CTA 가 비활성화 상태 일 때

<resources>
    ...
    <color name="benefit_native_bg_cta_button_normal">#1290FF</color>
    <color name="benefit_native_bg_cta_button_pressed">#0072E1</color>
    <color name="benefit_native_bg_cta_button_disabled">#DDDEDF</color>
</resources>

CustomPreviewMessage

CustomPreviewMessage 는 6시간 간격으로 서버에 설정된 CustomPreviewConfig 를 받아와서 frequency capping 후 PreviewMessage 를 보여주는 기능입니다. 따라서 서버에 CustomPreviewConfig 설정하는 작업이 선행되어야 합니다. (frequency capping 에 의해 CustomPreviewMessage 가 보여야 할 경우 AdPreview 와 ArticlePreview 보다 우선적으로 보입니다.)

서버에서 클라이언트로 전달되는 CustomPreviewMessageConfig 는 다음과 같은 정보를 가지고 있습니다.

{
  "id": 5,
  "unit_id": 1234567890,
  "message": "오늘도 아케이드 게임하고 최대 90P 팡팡!",
  "landing_url": "deeplink://landing?activity=arcade",
  "start_date": "2020-03-01T00:00:00Z",
  "end_date": "2020-03-31T23:59:59Z",
  "start_hour_minute": "21:00",
  "end_hour_minute": "23:00",
  "dipu": 2,
  "tipu": 60,
  "dcpu": 1,
  "tcpu": 30,
  "icon": "http://imagelocation/arcade_icon.png"
}

이름	내용

이름	내용
`id`	configId (messageId), 서버에서 자동 할당합니다
`unit_id`	pop unitId
`landing_url`	랜딩 url or deeplink
`start_date`	config 시작 일 (UTC, 시간은 무시됩니다)
`end_date`	config 종료 일 (UTC, 시간은 무시됩니다)
`start_hour_minute`	config 시작 시간 (분은 무시됩니다)
`end_hour_minute`	config 종료 시간 (분은 무시됩니다)
`dipu`	Frequency capping: daily impression per user
`tipu`	Frequency capping: total impression per user
`dcpu`	Frequency capping: daily click per user
`tcpu`	Frequency capping: total click per user
`icon`	icon url

CustomPreviewMessage 는 두가지 영역에 표시됩니다.

Pop 의 CustomPreviewMessage 영역 (그림1)
- 설정된 기간, 시간 내에 dipu, tipu, dcpu, tcpu 에 따라 frequency capping 됩니다.
- frequency capping 에 의해 CustomPreviewMessage 가 보여야 할 경우 AdPreview 와 ArticlePreview 보다 우선적으로 보입니다.

(아래를 클릭하여 이미지를 확인할 수 있습니다.)

PopFeedHeader 의 CustomPreviewMessage 영역 (그림2)
- frequency capping 되지 않고 설정된 기간, 시간 내 라면 보여집니다.
- FeedConfig 를 customize 가능합니다
- FeedConfig 를 사용하면서 header 를 설정하지 않으면 CustomPreviewMessage 를 안 보이게 설정 가능합니다

(아래를 클릭하여 이미지를 확인할 수 있습니다.)

[1] (Optional) PopFeedHeader Customize

DefaultPopHeaderViewAdapter 를 상속받아 CustomPopHeaderViewAdapter 를 만들고
getMessagePreviewLayout 를 오버라이드 합니다.
getMessagePreviewLayout 의 파라미터인 MessagePreview 안에 message, landingUrl, iconUrl 정보가 담겨있습니다.
line 9~17 3번에서 받아온 정보를 토대로 직접 layout 을 구성하고, clickEvent 처리할 수 있습니다.
line 24 FeedConfig.feedHeaderViewAdapterClass를 통해 1번에서 생성한 CustomPopHeaderViewAdapter 를 설정합니다.
line 29 PopConfig.feedConfig를 통해 5번에서 설정한 FeedConfig 를 설정합니다.

public class CustomPopHeaderViewAdapter extends DefaultPopHeaderViewAdapter {
    @Nullable
    @Override
    protected View getMessagePreviewLayout(Context context, ViewGroup parent, MessagePreview messagePreview) {
        final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (inflater == null) {
            return null;
        }
        View viewMessagePreview = inflater.inflate(R.layout.view_custom_preview_message, parent, false);
        final TextView messagePreviewText = viewMessagePreview.findViewById(R.id.textCustomPreviewMessageTitle);
        messagePreviewText.setText(messagePreview.getMessage());
        viewMessagePreview.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startDeeplinkActivity(context, messagePreview.getLandingUrl());
            }
        });
        return viewMessagePreview;
    }
}

final FeedConfig popFeedConfig = new FeedConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .feedHeaderViewAdapterClass(CustomPopHeaderViewAdapter.class)
        ...
        .build();
final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .feedConfig(popFeedConfig)
        ...
        .build();

[2] (Optional) FeedConfig 사용 설정

PopFeedHeader 에 CustomPreviewMessage 보이지 않도록 설정

PopConfig.feedConfig 설정 시 FeedConfig.feedHeaderViewAdapterClass 를 설정하지 않으면 PopFeedHeader 의 CustomPreviewMessage 를 보이지 않게 설정할 수 있습니다.

PopFeedHeader 에 DefaultPreviewMessage 보이도록 설정

PopConfig.feedConfig 설정 시 FeedConfig.feedHeaderViewAdapterClass(DefaultPopHeaderViewAdapter.class) 를 설정하면 기본 제공하는 DefaultPreviewMessage 를 사용할 수 있습니다. (그림 2 참조)

[3] (Optional) Preview Interval 설정

PopConfig.previewIntervalInMillis를 통해서 Preview interval 을 설정합니다. AdPreview, ContentPreview/CustomPreviewMessage 동일하게 interval 이 설정됩니다.

PopConfig Advanced

PopAdMessageViewClass

광고가 있는 경우 PopAdMessageViewClass를 이용하여 말풍선(preview)을 보여줍니다. 기본 클래스에서는 현재 적립 가능한 포인트와 몇 초 후에 닫히는지 보여줍니다. 해당 클래스는 PopAdMessageView를 상속받아서 작성해야 합니다. 다음 함수들을 오버라이드 할 수 있습니다.

updateView: 매초 말풍선을 업데이트하는데, 업데이트해야 할 때마다 호출됩니다. 남은 시간(초)과 적립 가능한 reward 값이 인자로 넘어옵니다.
getDurationInSeconds 몇 초 동안 유지될지 return해 줘야 합니다. 5초를 권장합니다.

(아래를 클릭하여 코드 예시를 확인할 수 있습니다.)

다음의 코드를 적용하여 사용할 수 있습니다.

PopArticleMessageViewClass

광고가 없는 경우 PopArticleMessageViewClass 를 이용하여 말풍선(preview)을 보여줍니다. 기본 클래스에서는 로드된 첫 번째 기사의 제목과 몇 초 후에 닫히는지를 보여줍니다. 해당 클래스는 PopArticleMessageView를 상속받아서 작성해야 합니다. 다음 함수들을 오버라이드 할 수 있습니다.

updateView: 매초마다 말풍선을 업데이트하는데 업데이트해야 할 때마다 호출됩니다. 남은 시간(초)과 기사의 제목이 인자로 넘어옵니다.
getDurationInSeconds: 몇 초 동안 유지될 지 return해 줘야 합니다. 5초를 권장합니다.
getNativeArticleView: NativeArticleView 클래스의 인스턴스를 반환합니다. NativeArticleView는 LinearLayout을 상속받아 Impression과 Click을 처리합니다. PopArticleMessageViewClass의 뷰를 다음과 같이 설정합니다.

(아래를 클릭하여 코드 예시를 확인할 수 있습니다.)

다음의 코드를 적용하여 사용할 수 있습니다.

PopUtilityLayoutHandlerClass

피드를 오픈했을 때 하단의 Utility 화면을 커스텀 할 때 PopUtilityLayoutHandler 클래스를 사용합니다.

기본 클래스에서는 카메라, 사진첩, 브라우저로 이동하는 뷰가 제공됩니다. 유틸리티를 커스텀 하기 위해서는 PopUtilityLayoutHandler 클래스를 상속받아 사용합니다. 오버라이드 해야 하는 함수는 다음과 같습니다.

onLayoutCreated(ViewGroup parent): Utility에 넣고 싶은 View를 작성한 후에 인자로 넘어온 Parent 뷰 그룹에 붙여줍니다. 커스텀으로 작성된 뷰에 있는 아이콘에 클릭 리스너를 달아서 원하는 행동을 수행하도록 작업합니다.

팝 피드 하단 아이콘 참고사항
- 이미지 사이즈
  - 24*24 dp (mdpi 기준)
  - 96*96 px (xxxhdpi까지 지원, 픽셀 기준 최대 4배)
- 아이콘은 png 와 벡터 이미지가 모두 가능합니다.

다음의 코드를 적용하여 사용할 수 있습니다.

PopConfig, FeedConfig 를 사용하여 Toolbar 영역을 Customize 할 수 있습니다. PopConfig 에 FeedConfig 를 설정할 때 FeedConfig.feedToolbarHolderClass 를 설정하는데 여기에 DefaultPopToolbarHolder 를 상속받은 class 를 사용해서 Pop Toolbar customize 가능합니다.

DefaultPopToolbarHolder

DefaultPopToolbarHolder 를 바로 설정하면 간단하게 Pop Toolbar 가 설정됩니다.

TemplatePopToolbarHolder

DefaultPopToolbarHolder 를 상속하여 TemplatePopToolbarHolder 를 만들어 사용합니다. 그리고 기본 제공하는 PopToolbar 를 사용하여 미리 구성되어 있는 PopToolbarTemplate 을 수정하여 customize 가능합니다. Toolbar 내의 Pop feed icon, title, toolbar background color 등을 변경할 수 있고 Toolbar 우측에 클릭 가능한 이미지 버튼을 추가할 수 있습니다.

Toolbar icon 변경: toolbar.setIconResource
Toolbar title 변경: toolbar.setTitle
Toolbar background color 변경: toolbar.setBackgroundColor
Toolbar 우측 문의하기 버튼 추가: addInquiryMenuItemView
Toolbar 우측 custom 버튼 추가: toolbar.buildPopMenuItemView 를 통해 PopMenuImageView 를 생성하고 생성된 View 를 toolbar.addRightMenuButton 를 통해 toolbar에 추가합니다. (우측 버튼은 add 된 순서대로 좌측부터 우측으로 배열됩니다.)
- showInquiry 함수: 문의하기 페이지를 엽니다. 문의하기 버튼 icon 을 customize 할 때 이 함수를 통해서 문의하기 페이지를 열 수 있습니다.

CustomizePopToolbarHolder

DefaultPopToolbarHolder 를 상속받아서 사용하는 점은 TemplatePopToolbarHolder 와 동일합니다. 차이점은 PopToolbar 를 사용하지 않고 layout 을 직접 구성하여 Toolbar 영역을 전부 customize 할 수 있습니다.

CustomPopToolbarHolder class
CustomPopToolbarHolder에서 사용하는 layout.view_pop_custom_toolbar

Buzzvil Developer Guides

[Ext.point] Pop Type - Customize

다음 과정이 완료 되었는지 확인이 필요합니다.

연동하기

4. 추가 설정, 기능을 적용하기

CTA Color 변경

CustomPreviewMessage

[1] (Optional) PopFeedHeader Customize

[2] (Optional) FeedConfig 사용 설정

[3] (Optional) Preview Interval 설정

PopConfig Advanced

PopAdMessageViewClass

PopArticleMessageViewClass

PopUtilityLayoutHandlerClass

DefaultPopToolbarHolder

TemplatePopToolbarHolder

CustomizePopToolbarHolder

다음 과정이 완료 되었는지 확인이 필요합니다.

연동하기

4. 추가 설정, 기능을 적용하기

CTA Color 변경

CustomPreviewMessage

[1] (Optional) PopFeedHeader Customize

[2] (Optional) FeedConfig 사용 설정

[3] (Optional) Preview Interval 설정

PopConfig Advanced

PopAdMessageViewClass

PopArticleMessageViewClass

PopUtilityLayoutHandlerClass

Pop Toolbar (AppBar) Customize

DefaultPopToolbarHolder

TemplatePopToolbarHolder

CustomizePopToolbarHolder