> ## Documentation Index
> Fetch the complete documentation index at: https://guide.canape.im/llms.txt
> Use this file to discover all available pages before exploring further.

# 래플 수정하기

> 래플 이벤트 디자인 기능에 대해 자세히 알려드릴게요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/vVKI1r3jek5bAVQT/images/%E1%84%85%E1%85%A2%E1%84%91%E1%85%B3%E1%86%AF.avif?fit=max&auto=format&n=vVKI1r3jek5bAVQT&q=85&s=4899bd6ae6ad812457595e7f397a1458" alt="래플.avif" width="2048" height="819" data-path="images/래플.avif" />

## 래플 디자인

<img src="https://mintcdn.com/dodamind-b0c9d0b4/4tY0Q7xCIklRmhlR/images/7gmpuvFQvLsDHyiQsKBN2ukTs.avif?fit=max&auto=format&n=4tY0Q7xCIklRmhlR&q=85&s=83db8a96c330fd23f8cd4b379987a836" alt="7gmpuv F Qv Ls D Hyi Qs Kbn2uk Ts Avi" width="3840" height="2160" data-path="images/7gmpuvFQvLsDHyiQsKBN2ukTs.avif" />

래플 이벤트는 배경 이미지와 타이틀, 그리고 이벤트 머신으로 구성되어 있어요.

* 래플의 이벤트 머신은 리워드 이미지와 이미지 영역 테두리로 구성되어 있어요.
* 이벤트 경품을 더 강조하기 위한 뱃지도 추가할 수 있어요. 기본 뱃지를 사용하거나 원하시는 뱃지 이미지를 직접 업로드하실 수 있어요.
* 응모하기 버튼을 커스텀하실 수 있어요.

래플의 색상은 다음과 같이 적용되어요. 

* <Badge color="purple">포인트 컬러 🎨</Badge>
  : 응모하기 버튼, 뱃지 색
* <Badge color="orange">서브 컬러 🖌️</Badge>
  : 리워드 이미지 영역 테두리

## 래플 특수효과

래플에는 다양한 인터랙티브 특수효과가 제공돼요. 클릭만으로 원하는 스타일을 선택해 고객의 시선을 사로잡는 이벤트를 완성하세요. `스타일` 탭의 특수효과 섹션에서 스위치를 활성화 하면 기능을 사용하실 수 있어요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/4tY0Q7xCIklRmhlR/images/3nFFFzFBkWt6d2B0JsTeLQLvsRo.avif?fit=max&auto=format&n=4tY0Q7xCIklRmhlR&q=85&s=ad39bea6de97554aa06fa18fb6d47fee" alt="3n FF Fz F Bk Wt6d2b0js Te LQ Lvs Ro Avi" width="1600" height="563" data-path="images/3nFFFzFBkWt6d2B0JsTeLQLvsRo.avif" />

### **타이머**

타이머는 응모 가능 기간이 얼마나 남았는지 보여주는 기능이에요. `운영설정`에서 설정한 이벤트 종료일까지의 남은 시간이 표시돼요. 타이머에는 세 가지 형태가 있어요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/xeuV7IkPK6TADGeF/images/wFHGOOobh4QDMO9sOPUYZDKnQk.avif?fit=max&auto=format&n=xeuV7IkPK6TADGeF&q=85&s=78d2914e025a9fb31beb07bcb109ff1a" alt="W FHGO Oobh4qdmo9s OPUYZD Kn Qk Avi" width="1600" height="563" data-path="images/wFHGOOobh4QDMO9sOPUYZDKnQk.avif" />

<img src="https://mintcdn.com/dodamind-b0c9d0b4/4tY0Q7xCIklRmhlR/images/H3XwYRJGQmmiOudLpFn7ID3gLg.avif?fit=max&auto=format&n=4tY0Q7xCIklRmhlR&q=85&s=4b74448415317b0cffa43a0f7a48c80b" alt="H3xw YRJG Qmmi Oud Lp Fn7id3g Lg Avi" width="1600" height="739" data-path="images/H3XwYRJGQmmiOudLpFn7ID3gLg.avif" />

### **스포트라이트**

스포트라이트 효과는 제품 이미지를 더 돋보이게 만들어줘요. 배경 레이어 위에 노출돼요. 세가지 형태 중 고르실 수 있어요. 형태를 선택하면 멋진 에니메이션 효과는 자동으로 적용돼요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/4tY0Q7xCIklRmhlR/images/bZSc1VWCmyThJvOPA67uPCCPrI.avif?fit=max&auto=format&n=4tY0Q7xCIklRmhlR&q=85&s=834e101e443e200407771fba195ccf4a" alt="B Z Sc1vw Cmy Th Jv Opa67u PCC Pr I Avi" width="1600" height="442" data-path="images/bZSc1VWCmyThJvOPA67uPCCPrI.avif" />

### **전광판**

전광판은 이벤트 영역 위 아래에 노출되는 띠 배너에요. 기본 이미지를 사용하거나 원하시는 이미지를 직접 업로드하실 수 있어요. 이미지가 무한 반복되며 움직여요. 페이지 스크롤을 내리는 유저가 이벤트 영역에서 멈추도록 시선을 효과적으로 잡아끌 수 있어요.

<img src="https://mintcdn.com/dodamind-b0c9d0b4/4tY0Q7xCIklRmhlR/images/4Zmw88SvRzQNfImgO9hGSozhY.avif?fit=max&auto=format&n=4tY0Q7xCIklRmhlR&q=85&s=7958c6b8305e776ecced207deb1db862" alt="4zmw88sv Rz Q Nf Img O9h G Sozh Y Avi" width="1600" height="442" data-path="images/4Zmw88SvRzQNfImgO9hGSozhY.avif" />