--- layout: default --- # 해커스 앤 디자이너스 - 걸어다니는 신호들 / 와이파이-진 워크숍. ## 와이파이-진(zine) 이란? ### 한 줄 설명 - 스마트폰이 핫스팟 로그인을 시도할때, 웹진 형식의 자주독립출판물을 서비스하도록 설계된 무선통신 및 웹서비스 장치 [![hotspot-zine-ssid](./assets/hotspot-zine-ssid.jpg){:width="500px"}](./assets/hotspot-zine-ssid.jpg) [![hotspot-zine-login](./assets/hotspot-zine-login.jpg){:width="500px"}](./assets/hotspot-zine-login.jpg) - [더보기](http://pilote.byus.net/wpdiana/?page_id=1064) ### 선행 프로젝트 - [CaptiveIntraweb by AReResearch (Andy Reischle) @ 2015](https://github.com/reischle/CaptiveIntraweb) [![construction-overview](./assets/areresearch/img4.png){:width="500px"}](./assets/areresearch/img4.png) ### 구성요소 - 유형 요소 (tangible components) - Espressif사의 ESP32 모듈 - 전원장치 (배터리 또는 DC 아답타) - (선택적) 통 또는 외형 - (선택적) 자석 [![construction-overview](./assets/areresearch/img1.png){:width="500px"}](./assets/areresearch/img1.png) [![construction-overview](./assets/areresearch/img2.png){:width="500px"}](./assets/areresearch/img2.png) [![construction-overview](./assets/areresearch/img5.png){:width="500px"}](./assets/areresearch/img5.png) [![construction-overview](./assets/areresearch/img6.png){:width="500px"}](./assets/areresearch/img6.png) [![construction-overview](./assets/areresearch/img7.png){:width="500px"}](./assets/areresearch/img7.png) (위 이미지들은 Andy Reischle (AReResearch) 님이 게시한 것들입니다.) - 무형 요소 (intangible components) - [ESP-IDF 개발 환경](https://github.com/espressif/esp-idf/tree/master/components) - [ESP32 아두이노 호환성 패키지](https://github.com/espressif/arduino-esp32) - [SPIFFS 파일 시스템](https://github.com/espressif/arduino-esp32/tree/master/libraries/SPIFFS) - [ESP 웹서버 라이브러리](https://github.com/me-no-dev/ESPAsyncWebServer) - [도메인 네임서버(captive portal)](https://github.com/espressif/arduino-esp32/tree/master/libraries/DNSServer) - 웹페이지 (웹-진) [![Wi-Fi-zine-stacks](./assets/Wi-Fi-zine-stacks.png){:width="500px"}](./assets/Wi-Fi-zine-stacks.png) - [더 많은 정보](http://esp32.net/) - [Wi-Fi 스택이 오픈소스가 아닌 문제](https://github.com/espressif/esp32-wifi-lib/issues/2) ### 알아두어야 할 와이파이-진 시스템의 한계 - 저장용량 2MB 이하 - 일반적인 웹서버에 비해 다소 느린 속도 - 일반적인 웹서버에 비해 다소 불안정한 작동 (때때로, 시스템 재시작이 필요할 수 있음) ## 와이파이-진 만들기 ### 재료 및 준비물 - 컴퓨터 - ESP32 모듈이 탑재된 개발보드 - 통신용 마이크로 USB 케이블 (안드로이드 데이타 케이블) - 배터리, 배터리팩 또는 DC 아답타 - 웹페이지 (html/css/js + 미디어 파일) - (선택적으로) 센서 또는 작동장치 (스피커 등) ### 와이파이-진 보드 준비하기 - [Arduino 다운로드](https://www.arduino.cc/en/Main/Software) - Arduino 설치하기 - [Windows](https://www.arduino.cc/en/Guide/Windows) - [Mac OSX](https://www.arduino.cc/en/Guide/MacOSX) [![arduino-confirm](./assets/arduino-confirm.png){:width="300px"}](./assets/arduino-confirm.png) 'Open' 을 클릭. - [Linux](https://www.arduino.cc/en/Guide/Linux) - Arduino IDE 실행 화면 [![arduino-screen](./assets/arduino-screen.png){:width="300px"}](./assets/arduino-screen.png) - Arduino IDE 설정 - 컴파일 및 업로드 과정 표시 모드를 '상세한 표기'로 변경 [![arduino-verbose](./assets/arduino-verbose.png){:width="300px"}](./assets/arduino-verbose.png) 'Show verbose output during:' 항목에서 compilation과 upload에 체크 - [Arduino IDE에 esp32 보드를 추가하기](https://github.com/espressif/arduino-esp32/blob/master/docs/arduino-ide/boards_manager.md) - 'Additional Boards Manager URLs' 에 다음 내용을 복사하여 붙여넣고 'Ok'. ``` https://dl.espressif.com/dl/package_esp32_index.json ``` [![arduino-board-url](./assets/arduino-board-url.png){:width="300px"}](./assets/arduino-board-url.png) - 보드 매니져 실행 [![arduino-board-manager](./assets/arduino-board-manager.png){:width="300px"}](./assets/arduino-board-manager.png) - 보드 매니져 팝업창의 모습 [![arduino-board-manager-popup](./assets/arduino-board-manager-popup.png){:width="300px"}](./assets/arduino-board-manager-popup.png) - 검색창에 'esp32'라고 입력 후, 'Install' 클릭 [![arduino-board-manager-esp32](./assets/arduino-board-manager-esp32.png){:width="300px"}](./assets/arduino-board-manager-esp32.png) - Arduino IDE에 와이파이-진 코드와 필요한 라이브러리들 추가하기 - [와이파이-진](https://github.com/applecargo/WifiZineThrowie/) 다운로드 및 설치 'Clone or download' -> 'Download ZIP' 클릭 [![arduino-00010](./assets/arduino-00010.png){:width="300px"}](./assets/arduino-00010.png) 압축 해제 후, 폴더 이름 변경 [![arduino-00011](./assets/arduino-00011.png){:width="300px"}](./assets/arduino-00011.png) [![arduino-00012](./assets/arduino-00012.png){:width="300px"}](./assets/arduino-00012.png) ~/Documents/Arduino에 해당 폴더 복사 [![arduino-00013](./assets/arduino-00013.png){:width="300px"}](./assets/arduino-00013.png) - [ESPAsyncWebServer](https://github.com/me-no-dev/ESPAsyncWebServer)와 [AsyncTCP](https://github.com/me-no-dev/AsyncTCP) 라이브러리 다운로드 및 설치 'Clone or download' -> 'Download ZIP' 클릭 [![arduino-00001](./assets/arduino-00001.png){:width="300px"}](./assets/arduino-00001.png) 압축 해제 후, 폴더 이름 변경 [![arduino-00003](./assets/arduino-00003.png){:width="300px"}](./assets/arduino-00003.png) [![arduino-00004](./assets/arduino-00004.png){:width="300px"}](./assets/arduino-00004.png) 'Clone or download' -> 'Download ZIP' 클릭 [![arduino-00006](./assets/arduino-00006.png){:width="300px"}](./assets/arduino-00006.png) 압축 해제 후, 폴더 이름 변경 [![arduino-00007](./assets/arduino-00007.png){:width="300px"}](./assets/arduino-00007.png) [![arduino-00008](./assets/arduino-00008.png){:width="300px"}](./assets/arduino-00008.png) ~/Documents/Arduino/libraries에 해당 폴더 (2개) 복사 [![arduino-00009](./assets/arduino-00009.png){:width="300px"}](./assets/arduino-00009.png) - 컴파일 확인 - Arduino IDE를 재시작 - 'WifiZineThrowie' 스케치를 연다 [![arduino-wifizine](./assets/arduino-wifizine.png){:width="300px"}](./assets/arduino-wifizine.png) - ESP32 Dev Module 보드를 선택한다 [![arduino-wifizine-select-board](./assets/arduino-wifizine-select-board.png){:width="300px"}](./assets/arduino-wifizine-select-board.png) - ESP32 Dev Module 보드 설정을 조정한다 [![arduino-wifizine-config-board](./assets/arduino-wifizine-config-board.png){:width="300px"}](./assets/arduino-wifizine-config-board.png) - Upload Speed : 921600 - CPU Frequency : 240MHz - Flash Frequency : 80MHz - Flash Mode : DIO - Flash Size : 4MB (32Mb) - Partition Scheme : Default - Core Debug Level : None - PSRAM : Disabled - 컴파일 버튼(빨간 화살표)을 클릭한다 [![arduino-wifizine-popup](./assets/arduino-wifizine-popup.png){:width="300px"}](./assets/arduino-wifizine-popup.png) - 컴파일 과정이 정상적으로 끝나면, 성공 [![arduino-wifizine-compile-done](./assets/arduino-wifizine-compile-done.png){:width="300px"}](./assets/arduino-wifizine-compile-done.png) - 컴파일 과정이 비-정상적으로 끝나면, 실패 [![arduino-wifizine-compile-failed](./assets/arduino-wifizine-compile-failed.png){:width="300px"}](./assets/arduino-wifizine-compile-failed.png) - ESP32 모듈과 통신하기 위한 USB 장치 드라이버 설치하기 (칩 이름 : SiliconLabs CP2012) - [USB 통신 칩 드라이버 다운로드](https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers) - [Windows 10](https://www.silabs.com/documents/public/software/CP210x_Universal_Windows_Driver.zip) - [Windows 7/8/8.1](https://www.silabs.com/documents/public/software/CP210x_Windows_Drivers.zip) - [설치 과정](https://www.pololu.com/docs/0J7/all) - [Mac OSX](https://www.silabs.com/documents/public/software/Mac_OSX_VCP_Driver.zip) - [GateKeeper와의 전쟁](https://support.apple.com/ko-kr/HT202491) - Yosemite (10.10.x) - [Legacy 드라이버를 설치해야 함](https://www.silabs.com/community/interface/forum.topic.html/latest_vcp_driverfo-96RK) [![yosemite-cp2102](./assets/yosemite-cp2102.png){:width="300px"}](./assets/yosemite-cp2102.png) [![yosemite-cp2102-legacy](./assets/yosemite-cp2102-legacy.png){:width="300px"}](./assets/yosemite-cp2102-legacy.png) - El capitan (10.11.x) - [GateKeeper 비활성화 방법](https://medium.com/@krukmat/macos-el-capitan-enabling-usb-for-cp2102-usb-to-ttl-3b63449e02e9) - [csrutil enable --without kext](https://forums.developer.apple.com/thread/17452) - Sierra (10.12.x) - [GateKeeper 비활성화 방법](https://www.tekrevue.com/tip/gatekeeper-macos-sierra/) - sudo spctl --master-disable - High Sierra (10.13.x) - [GateKeeper 비활성화 방법](https://stackoverflow.com/questions/47109036/cp2102-device-is-not-listed-in-dev-on-macos-10-13) - [GateKeeper 비활성화 방법](https://pikeralpha.wordpress.com/2017/08/29/user-approved-kernel-extension-loading/) - [GateKeeper 비활성화 방법](https://www.silabs.com/community/interface/knowledge-base.entry.html/2018/03/30/usb_to_uart_bridgev-Dnef) - spctl kext-consent disable - Mojave (10.14.x) - [GateKeeper 비활성화 방법](http://osxdaily.com/2016/09/27/allow-apps-from-anywhere-macos-gatekeeper/) - sudo spctl --master-disable - Linux 3.x.x & 4.x.x - 드라이버 설치 불필요 (커널에 포함되어 있음) - [udev rules 업데이트 필요](https://docs.platformio.org/en/latest/faq.html#platformio-udev-rules) - [99-platformio-udev.rules](https://raw.githubusercontent.com/platformio/platformio-core/develop/scripts/99-platformio-udev.rules) - [Linux 2.6.x](https://www.silabs.com/documents/login/software/Linux_2.6.x_VCP_Driver_Source.zip) - 정보 없음 - USB 드라이버 작동 여부 확인하기 - 드라이버를 지금 막 설치했다면, 컴퓨터를 재시작한다 - 재시작한 후에 GateKeeper가 드라이버 로딩을 방해하지는 않았는지 확인한다. - System Preferences -> Security & Privacy -> General [![gatekeeper-check](./assets/gatekeeper-check.png){:width="300px"}](./assets/gatekeeper-check.png) [![gatekeeper-check-popup](./assets/gatekeeper-check-popup.png){:width="300px"}](./assets/gatekeeper-check-popup.png) 빨간색으로 표시된 상자안에 에러문구가 있다면, GateKeeper가 드라이버 작동을 방해한 경우이다. [![security_and_privacy_kextload_approval](./assets/security_and_privacy_kextload_approval.png){:width="300px"}](./assets/security_and_privacy_kextload_approval.png) 위와 유사한 상태가 되어있을경우, 'Allow'를 클릭하고 관리자 암호를 넣어 승인해준 후, 컴퓨터를 재시작한다. - Arduino IDE를 시작한 후에, ESP32 모듈과 통신 가능한지 확인 [![arduino-esp32-comm](./assets/arduino-esp32-comm.png){:width="300px"}](./assets/arduino-esp32-comm.png) 통신이 가능한 경우, 위와 같이 /dev/cu.SLAB_USBtoUART를 선택할 수가 있다. [![arduino-esp32-comm-failed](./assets/arduino-esp32-comm-failed.png){:width="300px"}](./assets/arduino-esp32-comm-failed.png) 통신이 불가능한 경우, 위와 같이 /dev/cu.SLAB_USBtoUART가 존재하지 않는다. - 와이파이-진 네트워크의 이름, 즉 SSID를 정하고 코드를 수정한다. [![arduino-wifizine-ssid-change](./assets/arduino-wifizine-ssid-change.png){:width="300px"}](./assets/arduino-wifizine-ssid-change.png) - 글자 수나 띄어쓰기 등에 의해서 안될 수도 있으므로, 처음에는 공백문자가 포함되지 않은 간단한 영문으로 테스트해본다. - 한글을 사용해도 된다. - 보드에 업로드 한다 - 업로드 버튼(빨간 화살표)을 클릭하고, 'Connecting...' 이란 문구가 나타났을때, [ESP 보드의 'BOOT'라는 버튼을 1초간 눌렀다가 뗍니다](https://randomnerdtutorials.com/solved-failed-to-connect-to-esp32-timed-out-waiting-for-packet-header/). [![arduino-wifizine-upload](./assets/arduino-wifizine-upload.png){:width="300px"}](./assets/arduino-wifizine-upload.png) 업로드 성공한 화면 [![arduino-wifizine-upload-done](./assets/arduino-wifizine-upload-done.png){:width="300px"}](./assets/arduino-wifizine-upload-done.png) 업로드 실패한 화면 [![arduino-wifizine-upload-failed](./assets/arduino-wifizine-upload-failed.png){:width="300px"}](./assets/arduino-wifizine-upload-failed.png) - [다양한 문제 요인들](https://randomnerdtutorials.com/esp32-troubleshooting-guide/) ### 와이파이-진 보드 업로드 용량 늘리기 (선택적인 과정) - 제공된 ESP32 모듈의 플래쉬 메모리 용량은 4MB이지만, 전부 다 와이파이-진 컨텐츠를 위해서 사용할 수는 없다. 그 이유는 와이파이-진을 구동하는 코드와 칩 자체의 작동을 위한 코드, 그리고 파일 시스템의 구조 (폴더 구조 및 파일의 구분 등)를 표현하기 위해 사용되는 데이터, 즉 SPIFFS의 구현에 의한 오버헤드와 같은 것들이 4MB 중 일부분을 사용하지 않을 수 없기 때문이다. - ESP32 모듈의 플래쉬 메모리는 작동하는 데이터(즉, 코드), 저장해 두어야 하는 데이터(즉, 메모리), 구조를 기록하는 데이터(즉, 파일 시스템) 등이 파티션을 통해 4MB를 나누어 사용하도록 되어있다. - 위의 과정 중에서, ESP32 보드를 설정할때, [![arduino-wifizine-config-board](./assets/arduino-wifizine-config-board.png){:width="300px"}](./assets/arduino-wifizine-config-board.png) ``` Partition Scheme : Default ``` 를 선택했었는데, 기본 파티션 구성의 경우 와이파이-진을 위해서 반드시 필요하지 않은 요소들을 포함하고 있으며, 기본 파티션 구성에서 와이파이-진 컨텐츠에 사용할 수 있는 메모리 용량은 1MB 정도밖에는 되지 않는다. - 따라서, Partition Scheme을 보다 효율적으로 재구성하면, 와이파이-진 컨텐츠를 조금 더 많이 업로드 할 수 있게 할 수도 있다. 이렇게 하면, 약 1.9MB 정도의 용량을 사용할 수 있게 된다. - 본 과정을 마치게 되면, 다음과 같이 [![arduino-wifizine-custom-partition](./assets/arduino-wifizine-custom-partition.png){:width="300px"}](./assets/arduino-wifizine-custom-partition.png) ``` Partition Scheme : WIFI ZINE ``` 을 선택할 수 있게 된다. - 작업 과정 - [파티션 설정 파일](https://raw.githubusercontent.com/applecargo/WifiZineThrowie/master/partition/wifi_zine.csv) 다운로드 및 설치 ~/Library/Arduino15/packages/esp32/hardware/esp32/1.0.1/tools/partitions 에 붙여넣는다 [![arduino-partition-00001](./assets/arduino-partition-00001.png){:width="300px"}](./assets/arduino-partition-00001.png) ~/Library/ 폴더는 Finder에서 숨겨진 폴더이므로 Cmd-Shift-G를 누르고 Library 라고 타이핑하여 들어간다 [![arduino-partition-00002](./assets/arduino-partition-00002.png){:width="300px"}](./assets/arduino-partition-00002.png) 이후, Arduino15 폴더는 일반적인 폴더와 같이 더블 클릭하여 들어간다 [![arduino-partition-00003](./assets/arduino-partition-00003.png){:width="300px"}](./assets/arduino-partition-00003.png) 위와 같은 위치로 이동한다 [![arduino-partition-00004](./assets/arduino-partition-00004.png){:width="300px"}](./assets/arduino-partition-00004.png) 위와 같은 상태로 만든다 - boards.txt 파일 수정 [![arduino-partition-00005](./assets/arduino-partition-00005.png){:width="300px"}](./assets/arduino-partition-00005.png) 위와 같은 위치에 존재하는 파일 boards.txt 파일을 열어 다음에 +로 표시된 4줄을 추가한다 (+표시는 제거한다!) ```diff --- /Users/doohoyi/Downloads/Telegram Desktop/boards.txt +++ /Users/doohoyi/Library/Arduino15/packages/esp32/hardware/esp32/1.0.1/boards.txt @@ -52,6 +52,10 @@ esp32.menu.PartitionScheme.min_spiffs.upload.maximum_size=1966080 esp32.menu.PartitionScheme.fatflash=16M Fat esp32.menu.PartitionScheme.fatflash.build.partitions=ffat +esp32.menu.PartitionScheme.wifi_zine=WIFI ZINE +esp32.menu.PartitionScheme.wifi_zine.build.partitions=wifi_zine +esp32.menu.PartitionScheme.wifi_zine.upload.maximum_size=1048576 +esp32.menu.PartitionScheme.wifi_zine.upload.maximum_data_size=2752512 esp32.menu.CPUFreq.240=240MHz (WiFi/BT) esp32.menu.CPUFreq.240.build.f_cpu=240000000L ``` - Arduino IDE 를 재시작한 후, ESP32 DEV Module 설정 중 PartitionScheme을 WIFI ZINE으로 선택하고, 컴파일해본다. ### 와이파이-진 컨텐츠 업로드/출판 하기 - 와이파이-진 컨텐츠는 작동하는 코드와는 별도로 저장된다. 따라서, 일반적인 Arduino IDE의 코드 업로드 과정과는 별도의 과정을 거친다. 이를 위해, 별도의 확장 플러그인을 설치해야 합니다. - [ESP32FS 플러그인](https://github.com/me-no-dev/arduino-esp32fs-plugin/releases) 다운로드 및 설치 ~/Documents/Arduino/tools 라는 폴더 생성 [![arduino-esp32fs-00002](./assets/arduino-esp32fs-00002.png){:width="300px"}](./assets/arduino-esp32fs-00002.png) 압축이 풀린 ESP32FS 를 이곳에 복사 설치 [![arduino-esp32fs-00003](./assets/arduino-esp32fs-00003.png){:width="300px"}](./assets/arduino-esp32fs-00003.png) 폴더의 구성에 조심해야 합니다. 다음 그림과 같이 설치되어야 합니다. (폴더의 이름이 ESP32FS 인 것도 주의!) [![arduino-esp32fs-00004](./assets/arduino-esp32fs-00004.png){:width="300px"}](./assets/arduino-esp32fs-00004.png) Arduino IDE를 재시작한 후, 플러그인 설치가 성공했는지 확인합니다. 성공했다면, 'ESP32 Sketch Data Upload' 라는 메뉴가 추가된 것을 확인할 수 있습니다. [![arduino-esp32fs-00005](./assets/arduino-esp32fs-00005.png){:width="300px"}](./assets/arduino-esp32fs-00005.png) 이 메뉴를 실행하면, ~/Documents/Arduino/WifiZineThrowie/data 폴더에 들어있는 모든 파일을 ESP32 모듈의 웹 페이지 저장소에 이동시키게 됩니다. [![arduino-wifizine-webpage-upload](./assets/arduino-wifizine-webpage-upload.png){:width="300px"}](./assets/arduino-wifizine-webpage-upload.png) 업로드를 실행하십시오. 업로드 중 출력되는 메세지의 색깔이 빨간색이 아니라 흰색으로 출력됩니다. 코드를 업로드 할 때와 마찬가지로, 'Connecting...' 이란 문구가 나타났을때, [ESP 보드의 'BOOT'라는 버튼을 1초간 눌렀다가 땝니다](https://randomnerdtutorials.com/solved-failed-to-connect-to-esp32-timed-out-waiting-for-packet-header/). 업로드가 성공적으로 완료된 경우의 화면 [![arduino-wifizine-webpage-upload-done](./assets/arduino-wifizine-webpage-upload-done.png){:width="300px"}](./assets/arduino-wifizine-webpage-upload-done.png) 축하합니다. 와아파이-진을 제작/출판하기 위한 모든 준비가 끝났습니다. ## 와이파이-진 컨텐츠 예시 - 예시 1 텍스트 페이지 - [Hello, Text?](https://github.com/applecargo/WifiZineThrowie/blob/master/data-text.zip?raw=true) - [폰트 구하기](https://www.dafont.com/) - 예시 2 - [Imaginary, world](https://github.com/applecargo/WifiZineThrowie/blob/master/data-image.zip?raw=true) - 예시 3 - [Sound-world!](https://github.com/applecargo/WifiZineThrowie/blob/master/data-sound.zip?raw=true) - 예시 4 - Looooong story! (TBD) - 예시 5 - (advanced) WebSocket - socket.io + server-side programming @ arduino (TBD) - 해본적 없지만, 가능해 보임. 예제를 만들어 봅시다. ## 형태와 재질을 가지고 놀아보기 - 센서를 붙여보기 - 스위치? - 작동하는 것을 붙여보기 - 모터? ## 장소와 함께 생각하기 - 자석을 이용해서 거리나 공간의 철골 구조에 부착 ## 프로젝트에 기여하기 - ZINE 컨텐츠를 공유해주면, 다른 사람들이 각자 ZINE을 제작할 때, 아이디어와 영감을 얻을 수 있습니다. 이때, ZINE이 제작된 배경 이야기나 맥락, 형태 등 부가정보를 알려주면 더 좋습니다. - 와이파이-진 프로그램의 여러가지 부분을 개선할 수 있는 아이디어가 있으시다면, github의 PR 기능으로 수정내역을 보내주세요. - 그밖에 여러가지 생각들이나 의견들은 이메일로 주시면 됩니다. ## 고맙습니다!