화면 구성 가이드
프론트 플러그인 개발 시 반드시 Template API를 사용하여 화면을 구성해야 해요. 이는 일관된 사용자 경험과 디자인 품질을 보장하기 위함이에요.
Template API 란
일관된 사용자 경험과 디자인 편의를 위하여 플러그인 Template API를 제공해요.
Template API 필수 사용
왜 Template API를 사용해야 하나요?
- 일관된 디자인: 토스플레이스의 디자인 가이드라인을 자동으로 적용
- 검수 기준: 라이브 배포 검수 시 필수 요구사항
Template API 사용 예시
javascript
// (1) 대기 화면 표시하기
sdk.template.renderIdlePage({
title: '화면을 터치해 주세요',
onTouch: () => {
// 다음 화면으로 이동
}
});
// (2) 핸드폰번호 입력받기
sdk.template.renderInputPage({
title: '핸드폰 번호를 입력해 주세요',
placeholder: '010-0000-0000',
inputType: 'phone',
onNext: (phoneNumber) => {
console.log('입력된 번호:', phoneNumber);
// 다음 화면으로 이동
},
onBack: () => {
// 이전 화면으로 이동
}
});
// (3) 주문내역 출력하기
sdk.template.renderOrderPage({
title: '주문 내역',
orders: [
{ name: '아메리카노', quantity: 2, price: 4500 },
{ name: '카페라떼', quantity: 1, price: 5000 },
],
totalAmount: 14000,
onConfirm: () => {
// 결제 진행
},
onBack: () => {
// 이전 화면으로 이동
}
});직접 HTML/CSS 구성 제한
HTML/CSS 직접 사용 불가
프론트 플러그인에서는 HTML/CSS를 직접 작성하여 화면을 구성할 수 없어요.
제한 사유:
- 디자인 일관성 유지
- 접근성 표준 준수
- 다양한 화면 크기 대응
- 품질 관리
필요한 Template이 없는 경우
개발하려는 서비스의 UI/UX Flow를 토스플레이스에 공유해주시면, 검토 후 새로운 템플릿을 추가해드릴 수 있어요. 하단 문의사항을 통해 문의해주세요.
자주 요청되는 커스텀
파트너사에서 반복해서 요청하는 커스텀이에요. 아래 경우는 대부분 대체 방법을 안내드리고 있으니, 개발을 시작하기 전에 먼저 확인해주세요.
| 이렇게 하지 말고 | 이렇게 해주세요 |
|---|---|
| 대기화면에 버튼을 세 개 이상 두기 | 버튼 하나로 진입하고, 다음 화면에서 고르게 해주세요 |
| 주문 내역 화면에 설명용 타이틀 넣기 | 토스트로 안내해주세요 |
| 전화번호 입력 화면에 약관 동의를 함께 두기 | 약관 동의는 별도 화면으로 분리해주세요 |
| 주문 내역의 포인트를 자사 명칭으로 바꾸기 | 포인트 사용 화면에서 허용된 범위만 브랜딩해주세요 |
| 대기화면을 자사 브랜드 화면으로 새로 만들기 | 대기화면 배경이미지 기능을 써주세요 |
다음 단계를 안내하는 가이드 문구는 넣을 수 있어요. 문구를 쓸 때는 UX 라이팅 기준을 따라주세요.
개발 시 주의사항
검수 기준
라이브 배포 시 다음 사항을 검수해요:
- Template API 사용 여부: 모든 화면이 Template API로 구성되었는지 확인
- 사용자 경험: 직관적이고 일관된 사용자 경험 제공
- 접근성: 시각적/청각적 접근성 기준 준수
- 성능: 화면 전환 속도 및 반응성
개발 팁
- 단계적 개발: Template별로 나누어 단계적으로 개발
- 사용자 플로우 설계: 전체 화면 플로우를 미리 설계
- 에러 처리: 각 단계에서 발생할 수 있는 에러 상황 고려
- 테스트: 실제 단말기에서 충분한 테스트 진행
문의사항
Template API 관련 문의나 새로운 Template 요청은 developer-support@tossplace.com으로 연락주세요. 개발하려는 화면의 와이어프레임 또는 설계서를 같이 첨부해주세요.