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

# 스타일 편집하기

> 테마, 글꼴, 전환 효과 등 콘텐츠의 전체적인 스타일을 지정할 수 있어요.

<img className="rounded-2xl" src="https://mintcdn.com/dodamind-705e6e3b/L1EZFQnZCajjdwAY/make-content/images/thumb-1.jpg?fit=max&auto=format&n=L1EZFQnZCajjdwAY&q=85&s=7d99001e067d7037cf2ddd9847cf82c1" alt="image_1" width="2083" height="833" data-path="make-content/images/thumb-1.jpg" />

## 로고 삽입하기

콘텐츠 상단에 우리 브랜드의 로고를 추가할 수 있어요. 커버 페이지부터 문제 페이지까지 노출됩니다.

덕분에 로고가 설문에 보다 부드럽게 녹아들어서, **자연스러운 화이트 라벨링**을 할 수 있어요.

설문 참여율과 응답 완료율에도 긍정적인 효과를 가져올 수 있습니다. ✨

* **삽입 경로**: \[스타일]-\[로고 수정하기]-이미지 업로드
* **권장 사이즈**: 1:1비율 (400\*400px) 8MB 이내

<Tip>
  로고 삽입 부분에 이미지를 업로드하면, **원본 이미지의 키 컬러를 자동으로 추출**하여 배경색 및 버튼 색을 변환하는
  '자동'테마로 설정되어요. 자동 테마가 마음에 안든다면 다른 테마색을 설정하면 되어요. 만약 배경이 제거되지 않은 로고를
  첨부할 경우, 이미지의 배경 색에 맞게 설문의 배경 색도 바뀌어요.
</Tip>

<br />

## 버튼 곡률 선택하기

커버 페이지의 플레이 시작 버튼 부터, 텍스트 선택 문제의 버튼, 제출 완료 버튼까지. 응답자가 클릭하는 모든 버튼의 모양을 선택할 수 있어요. 우리 기업이 전달하고자 하는 분위기나 설문의 목적에 따라 어울리는 버튼 곡률을 적용해 보세요.

<img className="rounded-2xl" src="https://mintcdn.com/dodamind-705e6e3b/9Joc_GOcw_8cyIfn/make-content/images/image-1.png?fit=max&auto=format&n=9Joc_GOcw_8cyIfn&q=85&s=ae8b99d8302b22552dab0513941c0c43" alt="image_2" width="1600" height="924" data-path="make-content/images/image-1.png" />

<br />

## 테마 선택하기

총 15가지 컬러 선택지에서 콘텐츠의 전반적인 테마를 선택할 수 있습니다. 콘텐츠 제목과 버튼, 진행 바, 문제번호의 컬러가 바뀌어요. 모든 테마에 다크 모드도 지원하고 있답니다.

<img className="rounded-2xl" src="https://mintcdn.com/dodamind-705e6e3b/9Joc_GOcw_8cyIfn/make-content/images/image-2.png?fit=max&auto=format&n=9Joc_GOcw_8cyIfn&q=85&s=17d39e04f87b8d7533e433c5539e1cee" alt="image_3" width="1600" height="924" data-path="make-content/images/image-2.png" />

<br />

## 테마 색 커스텀

지정 컬러를 입히고 싶거나, 따로 배경 이미지를 업로드 하고 싶다면 테마 색 커스텀을 이용할 수 있어요.

* 컬러 팔레트에서 색상을 선택하거나, 우리 기업의 컬러 코드를 입력해서 그대로 적용할 수 있습니다.
* 배경 이미지를 업로드 할 수 있어요. '흐릿하게' 혹은 '어둡게' 버튼을 활성화하여, 해당 문제의 배경 효과도 디테일하게 디자인할 수 있습니다.
* **권장 사이즈**: 9:16 비율(720\*1280px) 8MB 이내

<img className="rounded-2xl" src="https://mintcdn.com/dodamind-705e6e3b/9Joc_GOcw_8cyIfn/make-content/images/image-3.png?fit=max&auto=format&n=9Joc_GOcw_8cyIfn&q=85&s=51a6ddc9e20401f51e90742f2afe8c4f" alt="image_4" width="1600" height="924" data-path="make-content/images/image-3.png" />

<br />

## 전환 애니메이션 선택하기

다음 페이지로 넘어갈 때의 전환 효과를 설정할 수 있어요.

* **밀어내기**: 내용을 모두 왼쪽으로 밀어내면 전환 되어요.
* **줌**: 페이드 아웃으로 내용이 사라졌다가 줌 인으로 다음 내용이 나타나요.
* **슬라이드&줌**: 페이드 아웃으로 사라졌다가 오른쪽에서부터 다음 내용이 나타나요.

<br />

## 글꼴 선택하기

콘텐츠 내 모든 텍스트의 글꼴을 변경할 수 있습니다.
제공되는 글꼴은 모두 상업적으로 이용이 가능한 무료 글꼴이며, 계속해서 업데이트 될 예정이에요 🙂

<img className="rounded-2xl" src="https://mintcdn.com/dodamind-705e6e3b/L1EZFQnZCajjdwAY/make-content/images/image-4.png?fit=max&auto=format&n=L1EZFQnZCajjdwAY&q=85&s=1db0f0fcb6959746562839efcd2245fc" alt="image_5" width="1600" height="924" data-path="make-content/images/image-4.png" />