디자인 페이지는 결제, 스토어프론트, 고객 포털 등 모든 고객 대면 환경의 브랜딩을 관리하는 중앙 허브입니다. 변경사항은 세 영역 전체에 즉시 적용되며 저장 전에 실시간으로 미리볼 수 있습니다.
주요 하이라이트
- 통합 디자인 허브 - 하나의 페이지에서 결제, 스토어프론트, 고객 포털 외관을 구성하세요.
- 미리 제작된 테마 - 선별된 테마를 시작점으로 사용하고 커스터마이징하세요.
- 라이트 및 다크 모드 - 각 모드에 대해 별도의 색상 팔레트를 정의하세요.
- 실시간 미리보기 - 저장하기 전에 변경사항이 결제, 고객 포털, 스토어프론트에서 어떻게 보이는지 확인하세요.
- 섹션별 오버라이드 - 서로 영향을 주지 않고 개별 섹션(결제, 스토어프론트, 고객 포털)을 세밀하게 조정하세요.
- 프로그램 방식 제어 - API 또는 Checkout SDK를 통해 결제 시 테마를 오버라이드하세요.
시작하기
상인 대시보드의 왼쪽 사이드바에서 디자인으로 이동하세요. 디자인 페이지에는 네 개의 탭이 있습니다:
| 탭 | 용도 |
|---|
| 일반 | 상호명, 로고, 테마 선택, 글로벌 고급 설정 |
| 결제 | 결제 페이지용 테마 설정을 별도로 오버라이드 |
| 스토어프론트 | 스토어프론트 레이아웃을 구성하고 테마 오버라이드 |
| 고객 포털 | 고객 포털용 테마 오버라이드 |
일반 설정
일반 탭은 기본 브랜드 아이덴티티와 전역 테마를 제어합니다.
기본 구성
| 설정 | 설명 |
|---|
| 상호명 | 결제, 스토어프론트, 고객 포털에 표시되는 이름 |
| 브랜드 로고 | 모든 고객 대상 페이지에 표시되는 로고 |
| 테마 | 시작점으로 사용할 미리 제작된 테마 선택 |
고급 설정
고급 설정을 확장하여 세부 제어에 접근하세요:
타이포그래피
| 설정 | 옵션 | 설명 |
|---|
| 기본 글꼴 | 모든 Google 글꼴 | 제목 및 본문 텍스트에 사용할 주요 글꼴 |
| 보조 글꼴 | 모든 Google 글꼴 | 라벨 및 보조 텍스트에 사용할 강조 글꼴 |
| 글꼴 크기 | xs, sm, md, lg, xl, 2xl | 전체 기본 글꼴 크기 |
| 글꼴 굵기 | normal, medium, bold, extraBold | 기본 글꼴 굵기 |
색상 구성
라이트 모드와 다크 모드에 대해 별도의 색상 팔레트를 정의하세요. 각 모드는 다음 속성을 지원합니다:
| 속성 | 설명 |
|---|
| 배경 기본 | 기본 배경 색상 |
| 배경 보조 | 보조 배경(탭, 카드) |
| 텍스트 기본 | 주요 텍스트 색상 |
| 텍스트 보조 | 흐릿한 텍스트 색상 |
| 기본 버튼 | 기본 버튼 배경 |
| 기본 버튼 텍스트 | 기본 버튼 위 텍스트 색상 |
| 보조 버튼 | 보조 버튼 배경 |
| 보조 버튼 텍스트 | 보조 버튼 위 텍스트 색상 |
| 테두리 기본 | 주요 테두리 색상 |
| 테두리 보조 | 강조 테두리 색상 |
테두리
| 설정 | 설명 |
|---|
| 테두리 반경 | 입력 필드, 버튼, 탭, 카드의 모서리 둥근 정도 제어 (예: 0는 날카로운 모서리, 8px는 둥근 모서리, 16px는 캡슐형) |
미리 제작된 테마
Dodo Payments는 네 가지 선별 테마를 제공합니다. 일반 탭의 테마 드롭다운에서 하나를 선택하면 결제, 스토어프론트, 고객 포털 전반에 통합된 디자인이 즉시 적용됩니다.
Dodo Pulses
기본 Dodo Payments 테마입니다. 라임색 강조는 에너지 넘치고 신선한 느낌을 주며, 깨끗한 산세리프 타이포그래피와 넉넉한 여백을 특징으로 합니다.
Terminal
모노스페이스 타이포그래피와 로열 블루 강조가 있는 개발자 지향 테마입니다. 날카로운 모서리와 기술적인 미학이 개발 도구 및 API 중심 제품과 잘 어울립니다.
Bumblebee
따뜻한 호박색 및 금색 강조와 둥근 현대적 스타일입니다. 대담하고 대비가 강해 프리미엄으로 보이길 원하는 소비자 대상 제품에 적합합니다.
Bubblegum
장난기 있는 핑크 및 마젠타 강조와 완전히 둥근 모서리입니다. 크리에이티브 도구, 디자인 제품, 라이프스타일 브랜드에 잘 어울리는 현대적이고 접근성 있는 룩입니다.
미리 제작된 테마를 선택하면 고급 설정에서 개별 속성을 추가로 커스터마이징할 수 있습니다. 지정하지 않은 속성은 테마 기본값을 따릅니다.
섹션별 오버라이드
각 섹션 탭(결제, 스토어프론트, 고객 포털)에는 테마 오버라이드 토글이 포함되어 있습니다. 활성화하면 그 섹션의 외관을 전역 테마와 별개로 커스터마이징할 수 있습니다.
결제 탭
결제 환경에 대해 타이포그래피, 색상, 테두리 설정을 개별적으로 오버라이드하세요. 실시간 미리보기에는 다음 항목이 표시됩니다:
- 제품 정보 및 가격
- 익스프레스 결제 옵션(Apple Pay, Google Pay)
- 결제 수단 선택 및 카드 폼
- 할인 코드 입력 및 가격 내역
스토어프론트 탭
스토어프론트 관련 설정을 구성하세요:
| 설정 | 설명 |
|---|
| 스토어 URL | 스토어프론트 주소 (예: store.dodopayments.com/your-store) |
| 스토어 이름 | 스토어프론트에 표시될 이름을 토글하고 설정 |
| 스토어 로고 | 스토어프론트 헤더에 표시할 로고를 토글 및 업로드 |
| 스토어 배너 | 배너 이미지를 토글 및 업로드 |
| 제품 설명 | 카드에 제품 설명을 표시할지 숨길지 토글 |
| 테마 오버라이드 | 스토어프론트에 대해 타이포그래피, 색상, 테두리를 별도로 커스터마이징하려면 활성화 |
고객 포털 탭
고객 포털의 테마를 오버라이드하여 다음을 포함합니다:
- 구독 관리
- 청구 내역
- 결제 수단
- 월렛 및 크레딧
관련 자료
