Chrome 키오스크 앱 만들기 및 배포하기

다음은 Chrome 앱 개발 경험이 있는 Chrome 관리자 및 개발자를 위한 도움말입니다.

Chrome 관리자는 ChromeOS 기기를 디지털 서명이나 양방향 디스플레이와 같은 단일 용도 기기로 전환할 수 있습니다. Chrome 웹 스토어에서 바로 구매할 수 있는 키오스크 앱을 배포하거나 나만의 키오스크 앱을 빌드할 수 있습니다.

Chrome 버전 57 이상에서는 일부 ChromeOS 기기에서 Android 앱을 지원합니다. 관리 Chrome 기기에서 Android 앱을 설치하는 방법에 대한 자세한 내용은 Chrome 기기에서 Android 앱을 키오스크로 사용하기를 참조하세요.

고려사항

ChromeOS 기기에 키오스크 앱을 배포하려면 먼저 기기를 등록해야 합니다. 자세한 내용은 ChromeOS 기기 등록하기를 참고하세요.
Chrome 패키지 앱을 사용해 키오스크 앱을 빌드할 수 있습니다. 하지만 호스팅된 앱으로는 키오스크 앱을 빌드할 수 없습니다.
전체 화면에서 실행하도록 설정된 Chrome 앱을 사용합니다.
Chrome 앱 개발 권장사항을 준수합니다.

1단계: Chrome 키오스크 앱 빌드하기

개발자가 Chrome 기기에 배포할 수 있는 키오스크 앱을 빌드하는 방법은 두 가지가 있습니다. 기존 웹 앱과 Chrome 앱 빌더를 사용하여 키오스크 앱으로 패키징하거나 새 웹 앱을 만듭니다.

옵션 1: 기존 웹 앱 사용하기

시작하기 전에 키오스크 앱을 빌드할 컴퓨터에서 Chrome 앱 빌더를 Chrome 브라우저에 추가합니다.

앱을 빌드할 컴퓨터에서 앱 파일을 보관할 폴더를 만듭니다.
Chrome 앱 빌더를 엽니다.
앱 이름과 초기 버전을 입력합니다.
새 버전에 숫자를 높여서 이름을 지정할 수 있도록 0.0.0.1과 같이 낮은 숫자를 초기 버전에 지정합니다.
앱의 현재 홈페이지 URL을 입력합니다.
이 URL이 새로운 키오스크 앱의 방문 페이지가 됩니다.
뒤로, 앞으로, 새로고침, 세션 다시 시작 등 탐색 컨트롤을 선택합니다.
시간 제한 값을 지정합니다.
- 세션 유휴 상태 시간 설정: 지정한 앱 유휴 시간이 경과하면 인터넷 사용 기록을 삭제합니다.
- 홈으로 이동 시간 설정: 지정한 앱 유휴 시간이 경과하면 홈페이지로 되돌아갑니다. 인터넷 사용 기록은 삭제되지 않습니다.
  세션 유휴 상태 시간 설정 및 홈으로 이동 시간 설정의 기본값은 0분입니다(앱에 대한 제한 시간 없음).
(선택사항) 앱 사용자를 대상으로 서비스 약관을 지정하려면 텍스트를 입력합니다.
(선택사항) 실행할 기기에 맞춰 홈페이지를 회전하려면 값을 선택합니다.
예를 들어 세로 모드 레이아웃으로 설정된 기기에서 앱을 실행하려면 앱을 90도 회전합니다.
키오스크 모드 사용을 선택합니다.
키오스크 앱 내보내기를 클릭합니다.
앱 파일을 내보낼 위치를 선택하고 선택을 클릭합니다.

Chrome 앱 빌더로 키오스크 앱을 만든 후 파일을 더 추가하여 맞춤설정할 수 있습니다.

옵션 2: 새로운 앱 빌드하기

아래 단계에 제공된 샘플 파일을 사용하여 간단한 키오스크 앱을 빌드할 수 있습니다.

앱을 빌드할 컴퓨터에서 앱 파일을 보관할 폴더를 만듭니다.
앱의 HTML 파일을 만듭니다.
1. 텍스트 편집기를 사용하여 HTML 파일을 만듭니다.
  샘플 HTML 파일을 참고하세요.
2. 앱 폴더에서 파일을 application.html로 저장합니다.
매니페스트를 만듭니다.
1. 텍스트 편집기를 사용하여 JavaScript Object Notation(JSON) 파일을 만듭니다. 샘플 JSON 파일을 참고하세요.
2. kiosk_enabled가 true로 설정("kiosk_enabled": true)되어 있는지 확인합니다.
3. (선택사항) 앱이 일반 앱으로 실행되지 않도록 하려면 kiosk_only를 true로 설정("kiosk_only": true)합니다.
4. (선택사항) 웹페이지가 키오스크 앱의 webview 컨트롤에 처음 로드되는 데 걸리는 시간을 단축하려면 webview 태그에 partition="persist:"를 지정합니다.
  자세한 내용은 파티션 속성 관련 개발자 정보를 참고하세요.
5. 원하는 서드 파티 JSON 유효성 검사 도구를 사용하여 JSON 코드 형식이 올바른지 확인합니다.
6. 앱 폴더에서 파일을 manifest.json으로 저장합니다.
앱의 높이와 너비를 지정합니다.
1. 텍스트 편집기를 사용하여 CSS 파일을 만듭니다. 샘플 CSS 파일을 참고하세요.
2. 앱 폴더에서 파일을 application.css로 저장합니다.
  참고: 키오스크 앱은 자동으로 전체 화면 크기로 확대됩니다.
(선택사항) 사용자가 키오스크 세션을 종료하도록 하려면 다음 안내를 따릅니다.
1. 텍스트 편집기를 사용하여 자바스크립트 파일을 만듭니다. 샘플 JS 파일을 참고하세요.
2. 앱 폴더에서 파일을 application.js로 저장합니다.
백그라운드 스크립트를 만듭니다.
1. 텍스트 편집기를 사용하여 자바스크립트 파일을 만듭니다. 샘플 JS 파일을 참고하세요.
2. 앱 폴더에서 파일을 background.js로 저장합니다.
앱에 사용할 앱 아이콘을 만들고 앱 폴더에 저장합니다.
1. 128x128p 아이콘을 만들어 128.png로 저장합니다.
2. 96x96p 아이콘을 만들어 96.png로 저장합니다.

또는 탐색 컨트롤과 재설정 버튼이 있는 테스트 앱용 앱 파일이 포함된 이 샘플 ZIP 파일을 사용하세요. 서비스 중인 앱 버전인 Chrome Browser Kiosk App 1.0이 Chrome 웹 스토어에 게시되었습니다. 텍스트 편집기를 사용하여 파일을 수정할 수 있습니다.

2단계: 키오스크 앱 테스트하기

개발자는 키오스크 앱이 ChromeOS 기기에서 작동하는지 확인해야 합니다.

Chrome 기기에서 Google 계정에 로그인합니다.
테스트 기기에 앱 폴더를 저장합니다.
chrome://extensions/로 이동합니다.
오른쪽 상단에서 개발자 모드를 사용 설정합니다.
압축해제된 확장 프로그램을 로드합니다를 클릭합니다.
앱 폴더를 찾아 선택합니다.
Chrome 브라우저에서 새 탭을 열고 앱 앱을 차례로 클릭한 다음 앱이 올바르게 로드되고 작동하는지 확인합니다.
필요한 경우 manifest.json 파일을 변경하고 앱 폴더를 호스팅한 다음 다시 테스트합니다. 앱이 올바로 작동할 때까지 반복합니다.

3단계: Chrome 웹 스토어에 게시하기

개발자는 모든 사용자가 앱 및 확장 프로그램을 사용할 수 있도록 선택하거나, 설치할 수 있는 사용자를 지정할 수 있습니다. Chrome 웹 스토어에 키오스크 앱을 게시하는 방법은 다음 두 가지가 있습니다.

공개: 모든 사용자가 앱을 보고 설치할 수 있습니다.
미등록: 앱 링크가 있는 사용자만 앱을 보고 설치할 수 있습니다. 앱이 Chrome 웹 스토어 검색결과에 표시되지 않습니다. 도메인 외부 사용자와 앱 링크를 공유할 수 있습니다.

Chrome 웹 스토어에 키오스크 앱을 추가하려면 다음 안내를 따릅니다.

파일이 포함된 폴더를 압축합니다.
Chrome 웹 스토어에 게시의 단계를 따릅니다.

4단계: 키오스크 앱 배포하기

관리자는 Google 관리 콘솔에서 키오스크 앱을 추가할 수 있습니다.

Google 관리 콘솔에 로그인하세요.
@gmail.com으로 끝나지 않는 관리자 계정으로 로그인하세요.
관리 콘솔에서 메뉴 기기Chrome앱 및 확장 프로그램키오스크로 이동합니다.
To apply the setting to all users, leave the top organizational unit selected. Otherwise, select a child organizational unit.
추가 를 가리킨 다음 Chrome 웹 스토어에서 추가를 클릭합니다.
배포하려는 앱을 검색한 다음 선택을 클릭합니다.
메시지가 표시되면 조직을 대신하여 앱 권한에 동의합니다.
오른쪽 패널에서 앱 및 확장 프로그램 정책을 설정합니다. 각 설정에 대해 자세히 알아보기
저장을 클릭합니다.