3.3. 디자인 커스터마이징

Owned by Alan Kim (Unlicensed)
Last updated: Jun 02, 2021 by George Kim (Unlicensed)
16 min read

개요

Feed의 각 컴포넌트는 다음과 같이 구분합니다.

FeedToolbarHolder, AdsAdapter, FeedHeaderViewAdapter class의 custom class를 생성할때 다음 조건중 하나를 사용해야합니다.

  • 각 클래스는 inner class 가 아니어야 합니다.

  • Inner class로 생성을 해야할 경우, public static class로 선언이 되어야 합니다.

위의 조건에 맞지 않는 경우, class를 찾지못하는 현상이 발생하여 customization이 적용되지 않습니다.

툴바 커스터마이징

Feed 상단의 툴바를 커스터마이징할 수 있습니다.

  1. FeedToolbarHolderinterface를 구현하는 Class 를 생성합니다.

    public class CustomFeedToolbarHolder implements FeedToolbarHolder { private FeedActivityToolbar toolbar; @Override public View getView(final Activity activity, @NonNull final String unitId) { // FeedActivityToolbar is a default toolbar view that you can only change the title and view's attributes. // Create a custom view and return it if you would like to add more UI components. this.toolbar = new FeedActivityToolbar(activity, unitId); toolbar.setTitle("BuzzAd Feed"); toolbar.setBackgroundColor(Color.parseColor("#1290FF")); // 변경하려는 "색상코드" 를 입력 return toolbar; } @Override public void onTotalRewardUpdated(int totalReward) { // Use this callback if you want to show the current total points that users can get } }

     

  2. FeedConfig에 CustomFeedToolbarHolder를 설정합니다.

    final FeedConfig feedConfig = new FeedConfig.Builder(context, "YOUR_FEED_UNIT_ID") ...생략... .feedToolbarHolderClass(CustomFeedToolbarHolder.class) .build();

툴바 Height 변경

커스터마이징한 FeedToolbarHolder가 들어가는 layout의 height값이 기본값으로 고정되어 있습니다.
아래 가이드를 통해 툴바의 height 값을 수정할 수 있습니다.

// AndroidManifest.xml ...생략... <activity android:name="com.buzzvil.buzzad.benefit.presentation.feed.FeedBottomSheetActivity" android:theme="@style/MyAppTheme" tools:replace="android:theme"/> ...생략...

헤더 커스터마이징

Feed 상단의 헤더 영역을 커스터마이징하여, 유저에게 피드가 어떤 공간인지 상세히 안내할 수 있습니다.

  1. FeedHeaderViewAdapter interface 를 구현하는 Class 를 생성합니다.

     

  2. FeedConfig에 FeedHeaderViewAdapter를 설정합니다.

광고 아이템 영역 커스터마이징 - 일반 광고

  1. 아래 NativeAdView을 포함하는 레이아웃(your_feed_ad.xml)을 구현합니다.

    NativeAdView의 레이아웃

     

  2. onCreateViewHolder에서 NativeAdViewHolder에 NativeAdView를 설정합니다.

  3.  onBindViewHolder에서는 NativeAdView에 광고 데이터(NativeAd)를 바인딩합니다.

    • clickableViews 리스트에 UI 컴포넌트를 추가하여, 클릭 이벤트를 수신할 컴포넌트를 설정합니다. 추가된 UI 컴포넌트를 클릭 시 광고 페이지로 이동하게 됩니다.

    • CTA 버튼은 CtaPresenter 를 이용하여 상황에 맞는 적절한 문구로 변경됩니다.
      CTA 버튼의 UI 혹은 문구의 커스터마이징은 가이드에 따라 진행할 수 있습니다.

    • OnNativeAdEventListener 를 통해 광고 콜백 이벤트를 수신할 수 있습니다.
      기획에 따라 추가로 UI 등을 추가할 수 있습니다.


FeedConfig에 위에서 작성한 CustomAdsAdapter를 설정합니다.

광고 아이템 영역 커스터마이징 - 쇼핑 적립 광고 (CPS)

커스터마이징 방식은 일반 광고와 같습니다. 하지만 쇼핑 적립 광고는 일반 광고에 비해 많은 정보를 제공합니다. 일반 광고용 레이아웃에서 priceText, originalPriceText, discountPercentageText, categoryText 가 추가되었습니다. 따라서 위 4가지 컴포넌트에 대해 추가로 데이터를 처리해야합니다.

  • NativeAdView(쇼핑 적립 광고) 의 레이아웃

 

위에서 안내한 AdsAdapter 를 참고하여 수정합니다.

 

FeedConfig에 구현한 CustomCPSAdsAdapter를 설정합니다.

Tab 커스터마이징

Feed Tab이 활성화되어 있는 경우, 아래의 방법으로 Tab의 UI를 바꿀 수 있습니다.

Filter 커스터마이징

 

Feed Tab과 Filter가 활성화되어 있는 경우, 아래의 방법으로 Filter의 UI 를 바꿀 수 있습니다.

CtaView (버튼) 커스터마이징

2.21 버전 이상에서는 아래 방법보다는 Theme을 활용하는 방법을 권장합니다.

BuzzAd SDK 에서 제공하는 CtaView UI 및 처리 로직을 사용하지 않고 기획에 맞게 구현할 경우 다음과 같이 진행할 수 있습니다.

위에서 안내한 AdsAdapter 의 onBindViewHolder 에서, CtaView 부분을 아래와 같이 수정합니다.

베이스 리워드 지급 안내 UI 커스터마이징

베이스 리워드 지급시 유저에게 제공되는 피드백을 커스터마이즈 할 수 있습니다.

  1. DefaultFeedFeedbackHandler를 상속받는 클래스를 생성합니다.

  2. FeedConfig을 초기화할 때, 이전 스텝에서 생성한 CustomFeedFeedbackHandler를 넘겨줍니다.

Pop 활성화 버튼 커스터마이징

Feed 진입경로 중 Pop을 연동한 경우 Pop 활성화 버튼이 Feed 지면에 보일 수 있습니다.
Pop은 앱 안에서 지면을 보여주는 Feed 지면을 팝을 통해 유저가 앱 밖에서도 Feed 지면을 경험할 수 있게 합니다.
Pop 을 활성화하지 않은 유저에게 Feed 지면의 우측 하단에 활성화 버튼을 보여주어 유저의 Pop 활성화를 유도합니다.

Pop 활성화 버튼은 아래 가이드에 따라 커스터마이징 가능합니다.

  • 활성화 버튼의 색상과 아이콘은 테마 적용을 통해 변경할 수 있습니다.

  • 활성화 버튼의 텍스트는 DefaultOptInAndShowPopButtonHandler를 상속받는 클래스를 생성하여 변경할 수 있습니다.

FeedConfig에 구현한 CustomOptInAndShowPopButtonHandler를 설정합니다.