[Windows] 웹 페이지로 키오스크 앱 만들기

준비물

1. 웹 페이지
2. 윈도가 설치된 터치 스크린 기기

 

구현 방법

웹페이지를 키오스크 앱처럼 실행시키기 위해 크게 2가지 방법을 사용할 것입니다.

1. 크롬 브라우저 full-screen 기능 ( --kiosk )
2. 윈도 shell:startup

 

크롬 브라우저 full-screen 기능 ( --kiosk )

필요이유

우리가 만든 웹 페이지를 키오스크 기기에 띄웠을 때 

가장 이상한 부분은 바로 다음과 같은 상/하단바일 것입니다.

 

웹페이지를 켠 이후 F11 버튼을 눌러 전체화면으로 해당 부분을

나타내지 않을 수 있겠지만 그렇다면 브라우저를 켠 후 F11 버튼을 눌러줘야 하는

번거로움이 생기게 됩니다. 

 

그래서 저는 크롬의 --kiosk 기능을 사용해 브라우저를 켬과 동시에 전체화면이

될 수 있도록 수정해 주도록 하겠습니다.

 

방법

1. 웹페이지 링크 복사
   • 키오스크 앱으로 만들고 싶은 웹페이지로 들어가 메인페이지의 url을 복사해 주세요
     

     

     
     
     
2. --kiosk 속성 부여
   • 크롬의 바로가기 아이콘에서 마우스 우클릭 후 속성 탭 클릭

     

   • 대상(T) : 입력 칸의 마지막 부분으로 가 "<띄어쓰기>--kiosk <띄어쓰기><붙여 넣기>"를 해줍니다.
     예를 들어 네이버를 띄우고 싶다면 다음 텍스트를 기존 대상 값에 추가로 넣어주는 겁니다

      --kiosk https://www.naver.com/​

     

     
     
     
   • 이제 해당 바로가기 클릭 시 전체화면 볼 수 있습니다
     ※ 전체화면이 되는 것을 보고 싶다면 모든 브라우저를 종료하신 후
         해당 브라우저만 띄우셔야 합니다.
         그래도 되지 않는다면 컴퓨터를 다시 시작해 주세요.
     
     

     

배치파일 시작프로그램 만들기

필요이유

아직은 키오스크를 켜고 바로가기를 클릭해야만 웹페이지가 나타나게 됩니다

하지만 키오스크를 납품받은 사용자가 매일 키오스크를 켜고 그것을 기다렸다가

바로가기로 웹페이지를 켜는 것은 번거롭습니다.

그렇기에 키오스크를 켬과 동시에 바로가기가 실행되어

웹페이지를 실행시킬 수 있도록 도와줄 겁니다.

 

방법

1. 배치파일 만들기
   • 배치파일을 만들어 자동으로 명령어를 실행시킬 수 있도록 할 것입니다.
   • 우선 메모장에 다음과 같이 작성해 주세요. ( 여기서 네이버 url 부분은 자신이 띄우고 싶은 웹 주소로 바꿔주세요 )
     

     echo off
     
     "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --kiosk https://www.naver.com/
     
     exit

   • 메모장 다른 이름으로 저장 

     

   • 파일형식을 모든 파일 (*.*)로 바꾼 후 파일의 확장자로. bat를 붙여주기 
     ex ) start.bat
   • 성공적으로 배치 파일을 만들었다면 다음과 같은 아이콘이 나타납니다

     

   • (만약 다음과 같은 아이콘이 나타나지 않는다면 파일형식을 "모든 파일"로
     바꿔줬는지 확인해 주세요. ) 
2. 시작프로그램에 배치파일 넣기
   
   • shift + R을 눌러 실행창을 켜준 후 shell:startup을 입력해 시작프로그램
     폴더를 열어주세요.
   • 해당 폴더에 방금 만든 배치파일을 넣어주세요

     

   • 이제부터 컴퓨터를 껐다 켜었을 때마다 나의 웹사이트가 전체화면으로 켜지게 됩니다.

 

 

인터넷 사용 여부

해당 게시글은 키오스크에 인터넷을 연결할 수 있을 때에만 사용할 수 있는 방법입니다. 

인터넷을 연결할 수 없어 로컬에서만 동작시키고 싶다면 다음 게시물을 참고해 주세요.