Appearance
프론트 플러그인 개발 시작하기 (튜토리얼)
프론트 플러그인 개발을 위한 환경을 구성하는 단계별 가이드입니다.
튜토리얼 단계 설명
1 단계: 플러그인 생성
2 단계: 테스트 매장 생성
3 단계: 테스트 매장에 플러그인 연결(설치)
4 단계: 프론트에서 테스트 매장에 온보딩하여 플러그인 동작 확인
1. 플러그인 생성
- [내 플러그인] > [플러그인 등록] 버튼을 클릭하여 새로운 플러그인을 생성합니다.
- 플러그인 타입: 토스프론트 선택
- 플러그인 이름
- 플러그인 ID
- 회사명
- ACL(Access Control List): 플러그인에서는 ACL에 등록된 URL만 호출이 가능합니다.
2. 플러그인 생성 후 기본 플러그인 확인
- 플러그인 생성 후 예제 코드 기반의 기본 플러그인이 자동 등록됩니다.
- 예제 코드 : https://github.com/tossplace/toss-front-plugin-template
3. 테스트 매장 생성
- [테스트 가맹점 관리]에서 테스트 매장을 만들어주세요.
- 테스트 매장이 생성되면, 프론트에서 로그인을 하기 위한 정보가 생성됩니다.
- 매장고유번호, 사업자번호, 휴대폰 번호
4. 테스트 매장에 플러그인 연동
- 테스트 매장 상세 화면에서, 위에서 생성한 플러그인의 사용 여부를 변경해주세요.
5. 프론트 단말기에서 테스트 매장으로 로그인
프론트 단말기를 테스트 매장에 연결하고 플러그인을 테스트하는 과정입니다.
프론트 단말기 준비
프론트 단말기가 없는 경우 프론트 단말기 신청하기를 먼저 진행해주세요. 단말기 없이도 브라우저에서 기본 개발은 가능합니다.
5-1. 프론트 단말기 온보딩 (로그인)
- 프론트 단말기를 켜고 다음 정보를 입력하여 온보딩을 진행합니다.
- 아래의 과정을 거쳐서 테스트 매장에 로그인 할 수 있습니다.
- 입력 정보: 사업자번호, 매장고유번호, 핸드폰번호
5-2. 프론트 단말기 온보딩 완료 (플러그인 실행 완료)
- 위 온보딩 과정을 거친 후, 온보딩이 성공하면 프론트에 아래와 같은 화면이 표시됩니다.
6. 개발 모드 설정
플러그인 개발 및 테스트를 위해 프론트를 개발 모드로 설정합니다:
- 개발자센터의 프론트 목록에서 해당 프론트를 찾습니다
- 용도 설정을 "개발용"으로 변경합니다
개발 모드 설정
프론트를 개발용으로 설정해야 개발자센터에서 '개발 배포' 트랙으로 업로드한 플러그인 코드가 반영됩니다.
7. 플러그인 개발 및 배포
7-1. 플러그인 코드 개발
- 기본 템플릿을 바탕으로 플러그인 코드를 작성합니다:
- 프론트 플러그인 SDK Reference
Template API 필수 사용
프론트 플러그인은 반드시 Template API를 사용해야 하며, 이는 검수 시에도 확인됩니다. 화면 디자인 가이드를 참고해주세요.
7-2. 플러그인 업로드
- 플러그인 파일들을 ZIP으로 압축합니다
- 개발자센터 → 내 플러그인 → 개발 배포 → 개발용 파일 추가에서 업로드합니다
- 파일을 첨부해주세요.
- 메세지를 입력해주세요.
- 배포 버전이 등록되었습니다.
- [배포] 버튼을 눌러 개발용 기기에 배포해주세요.
7-3. 플러그인 업데이트
새로운 플러그인 코드를 반영하려면 프론트를 재시작하거나, 설정 화면에서 업데이트해주세요.
- 프론트 설정 → 7055 입력
- 플러그인 > 업데이트 또는 토스 프론트 재시작
- 업데이트 완료
참고
- 개발 배포: 검수 없이 즉시 배포 가능 (최대 5개 단말기)
- 라이브 배포: 검수 후 모든 단말기에 배포
8. 단말기 없이 개발하기
실제 단말기 없이도 기본적인 개발이 가능합니다:
웹 브라우저에서 개발:
- Chrome, Edge 등 모던 브라우저 사용
- 개발자 도구로 디버깅
SDK Mockup 사용:
- 브라우저 환경에서 SDK 동작을 시뮬레이션
- Template API 미리보기 가능
제한사항:
- 실제 결제 기능 테스트 불가
- 하드웨어 기능(카메라, NFC 등) 테스트 불가
문의사항
개발 환경 구성 관련 문의는 developer-support@tossplace.com으로 연락주세요.