Appearance

화면 구성 가이드 ​

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

Template API 란 ​

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

Template API 필수 사용 ​

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

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

Template API 사용 예시 ​

javascript
// 텍스트 입력 화면
sdk.template.renderTextInputPage({
  title: '고객명을 입력해주세요',
  placeholder: '이름을 입력하세요',
  onNext: (text) => {
    console.log('입력된 이름:', text);
    // 다음 화면으로 이동
  },
  onBack: () => {
    // 이전 화면으로 이동
  }
});

// 대기 화면
sdk.template.renderWaitingPage({
  title: '처리 중입니다',
  description: '잠시만 기다려주세요'
});

// 결과 화면
sdk.template.renderResultPage({
  type: 'SUCCESS', // 'SUCCESS' | 'FAIL' | 'INFO'
  title: '처리 완료',
  description: '성공적으로 처리되었습니다',
  onNext: () => {
    // 다음 단계 실행
  }
});

직접 HTML/CSS 구성 제한 ​

HTML/CSS 직접 사용 불가 ​

프론트 플러그인에서는 HTML/CSS를 직접 작성하여 화면을 구성할 수 없습니다.

제한 사유:

  • 디자인 일관성 유지
  • 접근성 표준 준수
  • 다양한 화면 크기 대응
  • 품질 관리

필요한 Template이 없는 경우 ​

개발하려는 서비스의 UI/UX Flow를 토스플레이스에 공유해주시면, 필요한 경우 새로운 템플릿을 추가해드립니다.

요청 방법:

  1. 개발하려는 화면의 와이어프레임 또는 설계서 준비
  2. developer-support@tossplace.com으로 Template 추가 요청
  3. 검토 후 Template API에 새로운 유형 추가

개발 시 주의사항 ​

검수 기준 ​

라이브 배포 시 다음 사항을 검수합니다:

  1. Template API 사용 여부: 모든 화면이 Template API로 구성되었는지 확인
  2. 사용자 경험: 직관적이고 일관된 사용자 경험 제공
  3. 접근성: 시각적/청각적 접근성 기준 준수
  4. 성능: 화면 전환 속도 및 반응성

개발 팁 ​

  1. 단계적 개발: Template별로 나누어 단계적으로 개발
  2. 사용자 플로우 설계: 전체 화면 플로우를 미리 설계
  3. 에러 처리: 각 단계에서 발생할 수 있는 에러 상황 고려
  4. 테스트: 실제 단말기에서 충분한 테스트 진행

문의사항 ​

Template API 관련 문의나 새로운 Template 요청은 developer-support@tossplace.com으로 연락주세요.