화면 구성 가이드

프론트 플러그인 개발 시 반드시 Template API를 사용하여 화면을 구성해야 해요. 이는 일관된 사용자 경험과 디자인 품질을 보장하기 위함이에요.

Template API 란

일관된 사용자 경험과 디자인 편의를 위하여 플러그인 Template API를 제공해요.

Template API 필수 사용

왜 Template API를 사용해야 하나요?

1. 일관된 디자인: 토스플레이스의 디자인 가이드라인을 자동으로 적용
2. 검수 기준: 라이브 배포 검수 시 필수 요구사항

Template API 사용 예시

// (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를 토스플레이스에 공유해주시면, 검토 후 새로운 템플릿을 추가해드릴 수 있어요. 하단 문의사항을 통해 문의해주세요.