테마

가이드 및 설문조사는 귀사의 브랜딩과 일치해야 하며 귀사의 제품의 일부처럼 느껴져야 합니다. 테마를 사용하면 가이드 및 설문조사의 모양을 제어할 수 있습니다.

테마를 사용하면 모든 제품 내 메시지가 사용자의 색상, 타이포그래피 및 미학과 일치하도록 보장할 수 있습니다. 정교한 가이드나 전체 페이지의 설문조사는 무작위 팝업이 아닌 제품의 확장처럼 보이고 느껴져야 합니다.

버튼부터 테두리, 애니메이션과 배경색에 이르기까지 사용자가 가이드 및 설문조사를 보는 방법을 제어할 수 있습니다.

새 테마 만들기

새 가이드 및 설문조사 테마를 생성하려면 다음과 같이 하십시오.

1. Amplitude에서 가이드 및 설문조사 > 테마로 이동합니다.
2. 테마 만들기를 클릭합니다. 테마 편집기가 나타납니다.
3. 브랜드 및 구성 요소 제어를 사용하여 테마를 사용자 지정하십시오.
4. 언제든지 저장을 클릭하여 진행 상황을 저장할 수 있습니다.
5. 게시를 클릭하여 가이드 또는 설문조사에서 테마를 선택할 수 있도록 하십시오.

글로벌 에이전트와 함께 테마 생성

Amplitude의 글로벌 에이전트는 자연어 설명이나 참조 이미지 또는 이 두 가지 모두를 기반으로 가이드 및 설문조사 테마를 생성할 수 있습니다. 그 결과, 테마 편집기에서 미세 조정할 수 있는 완전히 편집 가능한 테마가 만들어집니다.

글로벌 에이전트는 색상, 타이포그래피, 간격, 버튼 스타일, 양식 컨트롤, 카드, 위젯 치수 및 구성 요소 수준 재지정을 포함하여 브랜드 수준과 구성 요소 수준의 테마 설정을 모두 생성합니다. 생성된 전체 설정은 생성 후 테마 편집기에서 조정할 수 있습니다.

테마 생성

1. Amplitude 대시보드의 어느 곳에서나 Global Agent를 열거나, 가이드 및 설문조사 > 테마 페이지에서 테마 만들기를 클릭하세요.
2. 원하는 테마를 설명하세요. 예를 들어, "당사의 마케팅 사이트 팔레트를 사용하십시오: 네이비 기본 색상, 코랄 악센트, 버튼과 입력의 둥근 모서리." 또한 스크린샷이나 Figma 내보내기를 시각적 참조로 첨부할 수도 있습니다.
3. 글로벌 에이전트는 테마를 생성하고 해당 테마에 대한 링크를 반환합니다. 링크를 클릭하여 테마 편집기에서 테마를 엽니다.
4. 생성된 설정을 검토합니다. 전체 브랜드 또는 구성 요소 값을 조정한 다음 게시를 클릭하여 테마를 사용할 수 있게 합니다.

글로벌 에이전트가 생성하지 않는 것

글로벌 에이전트는 애니메이션이나 사용자 지정 CSS를 생성하지 않습니다. 테마 편집기에서 애니메이션을 구성하고 사용자 지정 CSS를 통해 사용자 지정 CSS를 추가합니다.

테마 관리

가이드 및 설문조사 > 테마 페이지에는 프로젝트의 모든 테마가 나열됩니다. 페이지 상단에 있는 탭으로 목록을 필터링하여 다양한 테마 세트를 관리할 수 있습니다.

• 활성: 가이드 또는 설문조사에서 사용하는 테마입니다.
• 비활성화: 어떤 가이드나 설문조사에서도 사용하지 않는 테마입니다.
• 보관됨: 보관된 테마입니다.
• 모두: 상태에 관계없이 모든 테마.

특정 테마를 찾으려면 테마 검색 상자를 사용하십시오.

테마 보관하기

더 이상 필요하지 않은 테마를 보관하여 활성 및 비활성 목록에서 제거하십시오. 아카이빙은 이미 해당 테마를 사용하고 있는 가이드나 설문조사를 변경하지 않습니다.

1. Amplitude에서 가이드 및 설문조사 > 테마로 이동합니다.
2. 보관하려는 테마를 찾으십시오.
3. 테마의 컨텍스트 메뉴를 연 다음 보관을 선택합니다.

테마 복원

테마는 가이드 및 설문조사와 동일하게 작동합니다. 테마 보관은 영구적이지 않으므로 나중에 복원할 수 있습니다. 보관된 테마를 복원하여 가이드 및 설문조사에서 다시 사용할 수 있도록 합니다.

1. Amplitude에서 가이드 및 설문조사 > 테마로 이동합니다.
2. 보관됨 또는 모두 탭을 선택합니다.
3. 보관된 테마의 컨텍스트 메뉴를 연 다음 복원을 선택합니다.

테마 뷰어

테마 뷰어는 테마가 가이드나 설문조사에 적용될 때 어떻게 나타나는지 보여줍니다. 테마를 편집할 때 미리 보려는 특정 가이드나 설문조사를 선택하여 변경사항이 실제 콘텐츠에 어떤 영향을 미치는지 확인하세요.

테마 미리 보기는 미리 보는 위치에 따라 모양이 다릅니다. 가이드나 설문조사를 작성할 때 테마 미리 보기에는 게시된 버전이 표시됩니다. 테마를 편집할 때 미리 보기에는 초안 변경 사항이 표시되며 미리 볼 기준으로 사용할 안내선이나 설문조사를 선택할 수 있습니다. 이 동작은 가이드를 작성할 때 표시되는 내용과 사용자가 제품에서 경험하는 내용이 일관되도록 하는 데 도움이 됩니다.

뷰어 상단에서 브랜드 편집기와 구성 요소 편집기 간을 전환하고, 밝은 모드와 어두운 모드를 전환하고, 변경 사항을 취소, 저장 또는 게시할 수 있습니다.

브랜드 관리

테마 편집기를 사용하여 브랜드와 스타일의 요소를 사용자 정의할 수 있습니다.

악센트

악센트는 브랜드의 주요 색상을 나타냅니다. 이 색상은 기본 버튼과 선택한 옵션에 표시됩니다.

이 예제에서 기본 색상은 #48705C입니다.

타이포그래피

테마의 기본 서체를 설정합니다. Google 글꼴 라이브러리에서 선택하거나 사이트에 이미 정의되어 있는 사용자 지정 서체를 지정하세요.

모바일 가이드 및 설문조사에서 기본적으로 글꼴을 사용하려면 앱 프로젝트에 전체 글꼴 패밀리를 포함하고 글꼴에 일관된 파일 이름을 사용하십시오.

Android

• 글꼴 파일을 프로젝트의 /res/font디렉토리에 배치합니다.
• 명확하고 일관된 명명 규칙을 사용하십시오.
  • [fontNameWithoutSpaces]_[style].[fileExtension]
  • 예를 들어, adventpro_italic.ttf
• 지원되는 형식: TTF, TTC, OTF 및 XML.
• 글꼴을 추가한 후에는 테마 설정에서 직접 해당 글꼴을 참조할 수 있습니다.

자세한 내용은 Android의 글꼴 리소스를 참조하세요.

iOS

• Xcode 프로젝트에 글꼴 파일을 추가합니다.
• 명확하고 일관된 명명 규칙을 사용하십시오.
  • [FontName]-[Style].[fileExtension]
  • 예를 들어, Lora-Italic.ttf
• 앱의 .plist 파일에 글꼴을 등록합니다.
• 또는 CTFontManagerRegisterFontsForURL를 사용하여 프로그래밍 방식으로 코어 텍스트에 글꼴을 등록할 수도 있습니다. 테마 설정에서 글꼴의 PostScript 이름을 사용하십시오(예: Lora-Italic).
• 지원되는 형식: TTF, OTF.

자세한 내용은 Apple의 앱에 사용자 지정 글꼴 추가하기 를 참조하십시오.

콘텐츠

귀하의 브랜드 팔레트를 완성하는 보조 색상을 정의하세요.

• 주요 색상
• 2차 색상
• 비활성화된 색상
• 링크 색상
• 링크 마우스 오버 색상
• 링크 방문 색상
• 강조 색상

경계선

다음 각 상태에서 요소 경계의 색상을 지정합니다.

• 주요 색상
• 기본 마우스 오버 색상
• 비활성화된 색상

배경

지정된 상태의 요소의 배경색을 업데이트합니다.

다음 각 배경 변형을 설정합니다.

• 주요 색상
• 기본 마우스 오버 색상
• 2차 색상
• 2차 마우스 오버 색상
• 비활성화된 색상

양식 컨트롤

가이드나 설문조사에서 대화형 요소의 모양을 사용자 지정하세요.

모든 양식 요소에 적용되는 다음 사항을 조정합니다.

• 높이
• 모서리 반지름
• 패딩
• 간격
• 그림자
• 그림자 색상
• 배경
• 활성 배경
• 초점 링 색상
• 초점 링 폭

카드

개별 카드가 화면에 어떻게 표시되는지 지정합니다. 모든 카드에 적용되는 다음 설정을 조정하십시오.

• 모서리 반지름
• 패딩
• 간격
• 그림자
• 그림자 색상

위젯 크기

각 위젯 유형에 대한 최대 치수를 지정합니다.

애니메이션

각 위젯 유형이 화면에 표시될 때 사용할 애니메이션을 선택하고 해당되는 경우 지속 시간(밀리초)을 설정합니다.

컴포넌트 편집기

구성 요소는 가이드 및 설문조사에서 사용하는 재사용 가능한 요소입니다. 구성 요소를 사용하면 내용을 한 번 지정한 다음 테마의 모든 위치에 적용할 수 있습니다.

각 구성 요소에는 기본값, 마우스 오버 또는 초점과 같이 사용자 정의할 수 있는 상태가 포함됩니다.

테마 구성 요소 사용법

테마 구성 요소는 가이드 및 설문조사 전체에 나타납니다. 이 섹션에서는 각 구성 요소 유형이 응용 프로그램에서 나타나는 위치에 대해 설명합니다.

버튼

버튼은 다음 위치에 나타납니다.

• 기본 버튼: 가이드 및 설문조사에 사용되는 주요 클릭 유도 문구(CTA) 버튼입니다. 이러한 버튼은 테마에 정의된 악센트 색상을 사용합니다.
• 보조 버튼: 대체 작업 또는 덜 눈에 띄는 CTA입니다. 이러한 버튼은 보조 색상 설정을 사용합니다.
• 버튼 상태: 모든 버튼은 기본값, 마우스 오버, 활성 및 비활성화 상태를 지원하며, 이러한 상태는 구성요소 편집기에서 사용자 정의할 수 있습니다.

버튼은 다음에 나타납니다:

• 작업 버튼이 있는 가이드 단계
• 설문조사 제출 버튼
• 모달 대화상자
• 배너 작업
• 양식 제출

카드

카드는 가이드 및 설문조사에서 콘텐츠를 그룹화하고 표시합니다. 카드 스타일 지정은 다음에 적용됩니다.

• 가이드 단계 컨테이너
• 설문조사 질문 컨테이너
• 가이드 내의 콘텐츠 블록
• 정보 패널
• 설문조사에 결과 표시

카드 속성(모서리 반지름, 패딩, 간격, 그림자)은 가이드 및 설문조사의 모든 카드 요소에 균일하게 적용됩니다.

양식 컨트롤

양식 컨트롤은 설문조사와 양식의 대화형 요소입니다. 이러한 컨트롤은 다음에 나타납니다.

• 텍스트 입력: 설문조사 응답을 위한 단문 및 장문 텍스트 입력 필드입니다.
• 드롭다운 선택: 여러 옵션 중에서 선택할 수 있는 드롭다운 메뉴입니다.
• 체크박스: 사용자가 둘 이상의 답변을 선택할 수 있는 다중 선택 옵션입니다.
• 라디오 버튼: 사용자가 하나의 답변만 선택할 수 있는 단일 선택 옵션입니다.
• 평가 구성 요소: 별점, 이모티콘 평점 및 피드백에 대한 숫자 평점.
• 목록 요소: 설문조사 질문의 순서가 정해진 목록과 순서가 없는 목록입니다.

모든 양식 컨트롤은 양식 컨트롤 섹션에서 구성한 동일한 스타일 지정 속성(높이, 모서리 반지름, 패딩, 간격, 그림자, 초점 링)을 공유합니다.

위젯

위젯은 가이드 및 설문조사를 표시하는 컨테이너 요소입니다. 각 위젯 유형에는 특정 치수 설정이 있습니다.

• 모달: 응용 프로그램 위에 나타나는 전체 화면 또는 가운데 있는 대화상자입니다. 다단계 가이드, 설문조사 및 중요한 공지사항에 사용됩니다.
• 팝오버/핀: 특정 UI 요소 근처에 나타나는 작고 상황에 맞는 요소입니다. 툴팁, 힌트 및 인라인 안내에 사용됩니다.
• 툴팁: 사용자가 요소에 커서를 올려 놓거나 상호 작용할 때 나타나는 작은 정보 상자입니다. 상황에 맞는 도움말 및 설명에 사용됩니다.
• 체크리스트: 사용자가 작업을 완료할 때 체크할 수 있는 대화식 목록입니다. 온보딩 흐름 및 작업 완료 가이드에 사용됩니다.

경계선

테두리 색상은 다음에 적용됩니다.

• 양식 컨트롤 윤곽선
• 카드 가장자리
• 버튼 테두리
• 입력 필드 테두리
• 콘텐츠 섹션 대상 구간 구분선

테두리 색상은 사용자가 사용자 정의할 수 있는 기본, 기본 마우스 오버 및 비활성화 상태를 지원합니다.

배경

배경색은 다음에 적용됩니다.

• 카드 배경
• 양식 제어 배경
• 버튼 배경(기본, 보조 및 해당 마우스 오버 상태)
• 비활성화된 요소 배경
• 위젯 컨테이너 배경

백그라운드 설정은 기본, 기본 호버, 보조, 보조 호버 및 비활성화 상태를 지원합니다.

타이포그래피

타이포그래피 설정은 다음을 포함하여 가이드 및 설문조사의 모든 텍스트 요소에 적용됩니다.

• 가이드 단계 제목 및 설명
• 설문조사 질문 및 지침
• 버튼 레이블
• 양식 제어 레이블
• 카드 콘텐츠 텍스트
• 위젯 헤더 및 본문 텍스트

사용자가 설정한 타이포그래피는 해당 테마를 사용하는 가이드 및 설문조사에 있는 모든 텍스트의 기본 글꼴이 됩니다.

애니메이션

애니메이션은 위젯이 화면에 어떻게 표시되는지 제어합니다. 각 위젯 유형은 고유한 애니메이션을 가질 수 있습니다.

• 모달 애니메이션: 모달이 화면에 들어오고 나가는 방법을 제어합니다.
• 팝오버/핀 애니메이션: 상황별 요소가 어떻게 나타나는지 제어합니다.
• 툴팁 애니메이션: 툴팁이 페이드 인과 페이드 아웃되는 방식을 제어합니다.
• 체크리스트 애니메이션: 체크리스트 항목이 표시되는 방식을 제어합니다.

애니메이션 지속 시간 설정(밀리초)은 이러한 전환의 속도를 제어합니다.

콘텐츠 색상

콘텐츠 색상은 텍스트 및 링크 요소에 적용됩니다.

• 기본 색상: 기본 텍스트 콘텐츠에 사용됩니다.
• 2차 색상: 2차 텍스트와 레이블에 사용됩니다.
• 비활성화된 색상: 비활성화된 텍스트 및 비활성 요소에 사용됩니다.
• 링크 색상: 가이드 및 설문조사 콘텐츠에서 클릭 가능한 링크에 사용됩니다.
• 링크 호버 색상: 사용자가 링크 위로 마우스를 올릴 때 사용됩니다.
• 링크 방문 색상: 사용자가 이미 클릭한 링크에 사용됩니다.
• 강조 색상: 중요한 텍스트나 선택 영역을 강조하는 데 사용됩니다.

사용자 지정 CSS를 통한 고급옵션 사용자 지정

사용자 지정 CSS를 사용하면 테마가 제공하는 것 이상의 스타일을 지정하기 위해 CSS 클래스 선택기를 사용하여 특정 요소를 제어할 수 있습니다. 사용자 지정 CSS는 웹 SDK에만 사용할 수 있습니다.

Amplitude는 대부분의 스타일링에 테마를 사용할 것을 권장합니다. 테마가 필요한 컨트롤을 제공하지 않을 때 사용자 지정 CSS를 사용하십시오.