모두의연구소 기술블로그

박민수

모두의연구소 가상현실연구실 <VRtooN> 랩짱

모두의연구소 페이지와 커뮤니티 그룹에 오시면 더 많은 정보를 만나보실 수 있습니다.

*　Brackets

Brackets (http://brackets.io/) 는 Adobe에서 개발 중인 HTML/CSS/Javascript를 위한 오픈소스 개발툴이다. 비슷한 다른 오픈소스 툴들(sublime text, atom, visual studio code 등)과 비교했을 때, ‘Inline Editors' 및 ’Live Preview' 기능 등으로 인해 코드 수정, 확인이 용이하다. 이 기능을 이용해 웹브라우저에서 VR을 개발할 때 현재 작성한 코드가 의도한대로 동작하는 지 바로 확인할 수 있다.

*　Brackets 설치 및 작업폴더 생성

Brackets 사이트 (http://brackets.io/) 에 있는 링크에서 다운로드, 설치, 실행.

파일 > 폴더열기 를 클릭해서 New Folder 로 작업할 폴더 이름을 입력하고 Open을 눌러 해당 폴더를 연다.

왼쪽의 작업 폴더에서 오른쪽 마우스 버튼을 눌러 파일 만들기를 클릭하여 index.html을 만든다.

Brackets의 Live Preview 버튼을 눌러 웹브라우저로 확인한다.

•이 상태에서 웹브라우저를 닫지 않고, 다시 Brackets 로 돌아가 TEST를 TEST EDIT으로 바꾸면 웹브라우저에서 실시간으로 내용이 바뀌는 것을 확인할 수 있다.

* 모바일 브라우저에서 확인

카드보드에 스마트폰을 넣어 VR로 보기 위해서는 모바일 브라우저에서 방금 작성한 코드의 결과를 확인할 수 있어야 한다.

이를 위해, 터미널(윈도우는 cmd 창)을 열어 해당 폴더로 이동한다.

파이썬을 사용해서 http server를 실행시킨다. (참고: https://www.python.org/downloads/)

◦python 2.x 인 경우:

python -m SimpleHTTPServer 8000

: https://docs.python.org/2/library/simplehttpserver.html

◦python 3.x 인 경우:

python -m http.server 8000

: https://docs.python.org/3/library/http.server.html

•노트북(데스크탑)의 IP 주소 확인

◦윈도우의 경우: cmd 창 하나 더 띄워서 ipconfig [엔터] : 나오는 목록 중에서 IPv4 주소

◦mac osx 의 경우: terminal 창 하나 더 띄우거나 tab 을 띄워 ifconfig [엔터] : 나오는 목록 중에서 inet

•폰이 노트북과 같은 AP 에 접속되어 있는 지 확인.

•폰 웹브라우저 실행: ◦주소창에 입력(x는 위에서 확인한 노트북(데스크탑)의 IP 주소) : xxx.xxx.xxx.xxx:8000/index.html from_mobile_chrome

•참고로 이렇게 실행시킨 http server 는 터미널 창에서 control키(Ctrl키)+c 를 두 번 누르면 종료된다.

이와 같은 방식을 사용해 앞으로 사용하게 될 Three.js 라이브러리를 활용해서, Brackets로 웹브라우저 상에 VR 개발을 하고, Live Preview 로 확인하며, 동시에 모바일 브라우저에서 확인하는 방식으로 환경을 구축할 수 있다.