브라우저에서 브라우저 실행 – JavaScript


1. 웹에서 로컬 노트북 파이어폭스 호출하기

스마트폰 브라우저에서 버튼을 누르면 노트북에 있는 파이어폭스 브라우저가 시작되길 원했다. 대단한 기술이라는 생각은 들지 않지만 상상한 것을 얼마나 빨리 프로토타입으로 만들 수 있는지 궁금했다. Node.js와 브라우저만 있으면 된다. 우선 스마트폰 브라우저로 접속할 수 있는 웹 서버를 만들 생각이다. 사용될 파일 2개를 만든다.

$ cd /tmp
$ touch app.js index.html

a) 서버

아래 파일은 node에서 수행될 스크립트 파일이다.

이 코드는 웹 브라우저를 사용하여 “/cmd” 주소에 접속을 시도하면 노트북의 파이어폭스 브라우저를 호출한다. 기능 확인을 위해 서버를 수행한다.

$ node app.js

b) 서버 테스트

새로운 터미널을 열어서 아래 명령을 수행하면 파이어폭스 브라우저가 시작될 것이다. 물론, 브라우저에서 아래 주소를 입력해도 같은 결과를 볼 수 있다.

$ curl http://localhost:3000/cmd

c) 클라이언트 페이지

이제 버튼을 보여줄 접속 페이지를 만든다. 이 페이지는 하나의 버튼을 가지고 있다.

이 파일을 브라우저에게 전달하기 위해서 app.js에 index.html 파일 전달 기능을 추가한다.

app.js가 수정되었음으로 서버를 중지하고 다시 시작한다.

$ node app.js
^C
$ node app.js

d) 클라이언트 페이지 테스트

다른 터미널 창을 열어서 아래 명령으로 index.html 파일이 잘 전달되는지 확인한다. 물론, 브라우저에서 아래 주소를 입력해도 같은 결과를 볼 수 있다.

$ curl http://localhost:3000/

스마트폰 브라우저가 서버인 app.js에 접속하기 위해서는 서버 IP 주소를 알아야 한다. 아래 명령으로 서버의 IP 주소를 검색한다.

$ ip route get 8.8.8.8 | awk '{print $NF; exit}'

예를 들어 서버 IP 주소가 192.168.0.1일 경우 스마트폰 브라우저 주소 칸에 http://192.168.0.1:3000/ 을 입력한다. 버튼이 보이는 페이지가 나타나면 명령 버튼이 눌려지는지 확인한다. 그리고 버튼이 눌렸을 경우 파이어폭스 브라우저가 호출되도록 “/cmd” 링크를 추가한다.

스마트폰 브라우저에서 페이지 다시 읽기를 시도한다. 명령 버튼을 눌러서 파이어폭스가 노트북에서 호출되는지 확인한다. Node.js와 브라우저를 사용하면 파일 2개, 전체 코드 27줄이면 문제를 해결할 수 있다. 완성된 코드는 아래 명령으로 다운로드할 수 있다.

$ git clone https://github.com/afrontend/examples.git
$ cd examples/OpenFirefoxInNotebook

2. 버튼 모양 바꾸기

모바일 브라우저의 버튼을 클릭하면 노트북의 파이어폭스 브라우저를 수행할 수 있었는데 이 때 사용된 버튼은 예제 느낌이 난다. 이 버튼을 좀 더 꾸미겠다.

a) 버튼 꾸미기

$ cd /tmp
$ git clone https://github.com/afrontend/examples.git
$ cd examples/OpenFirefoxInNotebook/

b) 버튼을 위한 CSS 적용

버튼을 꾸미기 위한 CSS 파일은 아래 사이트에서 자동생성하여 사용한다.



코드 생성 버튼을 누르고 그 코드를 복사하여



index.html 파일 헤더에 추가한다. CSS 파일을 따로 만들어서 사용해도 되겠지만 간단하게 index.html 파일 안에 넣겠다. 버튼 링크에서 button 태그를 삭제하고 생성된 CSS 파일이 적용되도록 shiny-button 클래스를 추가한다. 생성된 코드 주석에서 MIT 라이선스를 확인할 수 있음으로 안심하고 사용한다.

c) 버튼을 중앙으로 이동

index.html 파일을 브라우져에서 열면 아래 처럼 보이는데 버튼의 위치가 불편하다.

버튼을 가운데로 옮기기 위해 아래 CSS를 삽입하고 wrapper 클래스로 버튼 링크를 둘러싼다.


이제 버튼이 가운데 나타나는 것을 볼 수 있다.

완성된 코드는 아래 명령으로 받을 수 있다.

$ git clone https://github.com/afrontend/examples.git
$ cd examples/OpenFirefoxInNotebookWithCSS

3. 안드로이드 앱으로 만들기

파이어폭스 실행 버튼을 보려면 브라우저로 접속해야 했다. 이제는 앱으로 접속할 계획이다. Cordova를 사용하여 index.html 같은 웹 코드를 같은 기능의 안드로이드 앱으로 만들 수 있다.

$ cd /tmp
$ git clone https://github.com/afrontend/examples.git
$ cd examples/OpenFirefoxInNotebookWithCSS

a) 안드로이드 폰 연결 확인

안드로이드 폰과 노트북을 USB 케이블로 연결한다. 아래 명령을 사용하여 안드로이드 폰이 잘 연결되었는지 확인한다.

$ adb wait-for-device

b) Cordova 안드로이드 앱

아래와 같이 Cordova 안드로이드 앱을 컴파일하여 안드로이드 폰에 설치한다. 자세한 Cordova 사용법은 https://cordova.apache.org/#getstarted 에서 확인할 수 있다.

$ cordova create OpenFirefox
$ cd OpenFirefox
$ cordova platform add android
$ cordova run android

c) 자동 실행된 안드로이드 앱의 중앙에 Cordova 아이콘이 나타나는 것을 확인한다.

d) 웹 코드 index.html 적용

이제 index.html 파일을 Cordova 프로젝트의 index.html 파일에 덮어쓴다. 그리고 다시 컴파일하여 앱을 설치한다.

$ mv www/index.html www/index.old
$ cp ../index.html www/index.html
$ cordova run android

e) 안드로이드 앱에서 파이어폭스 실행 버튼이 나타나는 것을 확인하고

f) app.js 서버를 수행한다.

$ cd ..
$ node app.js

g) index.html의 링크 버튼 수정

현재 이 버튼은 아직 정상 동작을 하지 않는다. 버튼이 눌렀을 때 호출할 URL이 서버의 전체 주소가 아닌 상대 주소 /cmd 라서 생기는 문제다. 링크 버튼의 href를 http://192.168.0.3:3000/cmd로 변경하면 동작은 하겠지만 앱에서 브라우저를 호출하는 부작용이 발생한다. 아래처럼 href 속성에 ajax 요청하는 자바스크립트 코드를 넣어서 해결한다. 자바스크립트 안의 http 주소는 app.js 이 동작하는 서버의 주소를 사용한다.

$ vim www/index.html

마무리

스마트폰 브라우저를 사용하여 노트북의 프로그램을 호출할 수 있었다. Node.js 가 웹 서버 역활도 할 수 있다는 것이 특이했다.

                   +-----------------------+
+------------+     |  +-----------------+  |
| +--------+ |     |  |                 |  |
| | button |--------->| Firefox         |  |
| +--------+ |     |  |                 |  |
|            |     |  |                 |  |
|     @@     |     |  +-----------------+  |
+------------+     +-----------+-----------+
                               |
                           ----+----

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

This site uses Akismet to reduce spam. Learn how your comment data is processed.