{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"목차","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"1"},"maxLevel":{"value":"1"},"exclude":{"value":"목차"}},"macroMetadata":{"macroId":{"value":"14d84ea04f5b645f8142d961331de7a0"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"55223d82-19cd-4cf4-8cfd-9d3ef94fbf2f"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"개요","type":"text"}]},{"type":"paragraph","content":[{"text":"본 가이드에서는 BuzzAd Android SDK에서 제공하는 UI의 구성을 지키며 디자인을 변경하기 위한 방법을 안내합니다. 추가적인 디자인 변경을 원하시는 경우에는 ","type":"text"},{"text":"고급 설정","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/~79598069/pages/2352874133"}}]},{"text":"에서 UI를 자체 구현하는 방법으로 진행할 수 있습니다.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Pop 디자인 가이드 문서 ","type":"text"}]},{"type":"paragraph","content":[{"text":"Pop 디자인 규격은 ","type":"text"},{"text":"Pop 디자인 가이드 문서","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.figma.com/file/0i0lNvrDx9oVJCkhnfJoVs/%F0%9F%93%8B-POP-UI-integration-guide-official"}}]},{"text":"에서 확인 가능합니다. Pop의 디자인을 변경하기 위해서는 PopConfig를 설정해야 합니다.","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"Pop 배경색 변경","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"1449a5c1-99eb-427c-8559-a036856d6c62","collection":"contentId-2352874932","type":"file","height":466}}]},{"type":"paragraph","content":[{"text":"Pop의 배경색은 ","type":"text"},{"text":"테마 적용","type":"text","marks":[{"type":"link","attrs":{"href":"https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/2352875706/ver+2.27.x+9.#%ED%85%8C%EB%A7%88-%EC%A0%81%EC%9A%A9"}}]},{"text":"에 따라 변경할 수 있습니다.","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"Pop 아이콘 변경","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"e3283df1-c663-4f6b-a44e-2a296e453562"}}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"5bb908db-136b-4c97-9b04-9a955bada40d","collection":"contentId-2352874932","type":"file","height":292}}]},{"type":"paragraph","content":[{"text":"PopConfig를 설정하여 Pop 아이콘 이미지를 변경할 수 있습니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"다음은 Pop 아이콘을 변경하는 예시입니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"PopConfig popConfig = new PopConfig.Builder(context, \"YOUR_POP_UNIT_ID\")\n .iconResId(R.drawable.your_pop_icon)\n .rewardReadyIconResId(R.drawable.you_pop_icon_reward_ready)\n .build();","type":"text"}]},{"type":"paragraph","content":[{"text":"iconResId","type":"text","marks":[{"type":"code"}]},{"text":": 상태에 따라 ","type":"text"},{"text":"평상시 아이콘","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"885c0a01-c951-4968-a16c-fb7d0370aca5"}}]},{"text":"과 ","type":"text"},{"text":"팝 닫기 아이콘","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"ab7c8890-5538-43a9-8667-d16eb7c5def7"}}]},{"text":"을 지정해 주어야 합니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"\n\n\n \n \n \n \n","type":"text"}]},{"type":"paragraph","content":[{"text":"rewardReadyIconResId","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"ed05bf92-6470-4600-bb4e-7b69e9d738c3"}},{"type":"code"}]},{"text":": 적립 가능한 포인트가 있을 때 기본 아이콘이 아닌 다른 아이콘을 (예: 동전 아이콘) 유저에게 보여줄 수 있습니다. ","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"\n\n\n \n \n \n \n","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"팝 아이콘 권장 사이즈","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"56x56 dp (mdpi 기준)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"224x224 px (xxxhdpi까지 지원, 픽셀기준 최대 4배)","type":"text"}]}]}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"Pop 활성화 버튼","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"791bdd6b-2255-4d0c-a379-b19dc5817ee6","collection":"contentId-2352874932","type":"file","height":933}}]},{"type":"paragraph","content":[{"text":"Pop 활성화 버튼의 디자인은 아래 가이드에 따라 수정할 수 있습니다.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"활성화 버튼의 색상과 아이콘은 ","type":"text"},{"text":"테마 적용","type":"text","marks":[{"type":"link","attrs":{"href":"https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/2352875706/ver+2.27.x+9.#%ED%85%8C%EB%A7%88-%EC%A0%81%EC%9A%A9"}}]},{"text":"을 통해 변경할 수 있습니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"활성화 버튼의 문구는 ","type":"text"},{"text":"DefaultOptInAndShowPopButtonHandler","type":"text","marks":[{"type":"code"}]},{"text":"의 상속 클래스에서 설정합니다. 상속 클래스를 작성하고 FeedConfig에 설정합니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"class CustomOptInAndShowPopButtonHandler extends DefaultOptInAndShowPopButtonHandler {\n // 활성화 버튼에 보여지는 문구입니다.\n @Override\n public String getOptInAndShowPopButtonText(Context context) {\n return \"YOUR_BUTTON_TEXT\"\n }\n}\nfinal FeedConfig feedConfig = new FeedConfig.Builder(context, \"YOUR_FEED_UNIT_ID\")\n .optInAndShowPopButtonHandlerClass(CustomOptInAndShowPopButtonHandler.class)\n .build();","type":"text"}]}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"Notification ","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"e70bd52f-7396-4a1b-a8ee-1d55c8a9a07e"}}]},{"text":"UI 수정","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":770,"id":"12679bf9-3913-4b77-bfcc-a20d178b73be","collection":"contentId-2352874932","type":"file","height":541}}]},{"type":"paragraph","content":[{"text":"Pop이 활성화되어 있는 동안에 Service Notification이 보입니다. ","type":"text"}]},{"type":"paragraph","content":[{"text":"다음은 PopNotificationConfig를 설정하여 BuzzAd Android SDK에서 제공하는 Notification 의 UI를 변경하는 방법입니다. ","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final PopNotificationConfig popNotificationConfig = new PopNotificationConfig.Builder(getApplicationContext())\n .smallIconResId(R.drawable.your_small_icon) // 흰색 아이콘, Adaptive Icon 이 설정하지 않도록 주의 요망\n .titleResId(R.string.your_pop_notification_title)\n .textResId(R.string.your_pop_notification_text)\n .colorResId(R.color.your_pop_notification_color)\n .notificationId(5000) // 기본값\n .build();\n \nPopConfig popConfig = new PopConfig.Builder(context, \"YOUR_POP_UNIT_ID\")\n .popNotificationConfig(popNotificationConfig)\n .build();","type":"text"}]},{"type":"paragraph","content":[{"text":"UI 레이아웃 혹은 Notification 전체를 수정하기 위해서는 ","type":"text"},{"text":"Pop Service Notification 자체 구현","type":"text","marks":[{"type":"link","attrs":{"href":"https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/2352874808/ver+2.27.x+6.2.2.#Pop-Service-Notification-%EC%9E%90%EC%B2%B4-%EA%B5%AC%ED%98%84"}}]},{"text":"을 참고하시기 바랍니다. ","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"툴바 영역 커스터마이징","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":436,"id":"934bb4db-d88e-4ad0-98a0-86142b1abd5b","collection":"contentId-2352874932","type":"file","height":176}}]},{"type":"paragraph","content":[{"text":"BuzzAd Android SDK에서 제공하는 Pop 툴바 영역의 좌측 아이콘 색상은 ","type":"text"},{"text":"테마 적용","type":"text","marks":[{"type":"link","attrs":{"href":"https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/2352875706/ver+2.27.x+9.#%ED%85%8C%EB%A7%88-%EC%A0%81%EC%9A%A9"}}]},{"text":"에 따라 변경할 수 있습니다.","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"스낵바 및 토스트 메시지 커","type":"text"},{"text":"스터마이","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"cd192032-fd71-4611-8226-5c781b82cf22"}}]},{"text":"징","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"40d2753a-6e22-4dd6-8591-8edeb699eb1c","collection":"contentId-2352874932","type":"file","height":933}}]},{"type":"paragraph","content":[{"text":"사용자에게 리워드를 지급할때 안내 문구를 스낵바 혹은 토스트에 표시합니다. 기본 문구는 ","type":"text"},{"text":"광고 적립 포인트 n포인트 적립되었습니다.","type":"text","marks":[{"type":"code"}]},{"text":" 입니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"다음은 ","type":"text"},{"text":"DefaultPopFeedbackHandler","type":"text","marks":[{"type":"code"}]},{"text":"의 구현 클래스를 구현하고, 직접 작성한 문구(","type":"text"},{"text":"message","type":"text","marks":[{"type":"code"}]},{"text":")로 스낵바 혹은 토스트를 표시하는 예제입니다.","type":"text"}]},{"type":"codeBlock","content":[{"text":"public class CustomPopFeedback extends DefaultPopFeedbackHandler {\n \n // 광고 적립에 성공 시, 호출됩니다.\n @Override\n public void notifyNativeAdReward(\n @NotNull Context context,\n @NotNull View view,\n boolean canUseSnackbar, //snackbar 사용 가능 여부\n int reward // 적립된 리워드 양\n ) {\n String message = \"Customized feed launch reward message\";\n\n if (canUseSnackbar) {\n showSnackbar(message, view); // 구현 필요\n } else {\n showToast(message); // 구현 필요\n }\n }\n}","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"PopConfig popConfig = new PopConfig.Builder(this, \"YOUR_FEED_UNIT_ID\")\n .popFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class)\n .build(); ","type":"text"}]},{"type":"paragraph"}],"version":1}