라즈베리파이 1 키오스크 모드

기존에 사용하던 라즈베리파이가 어느날부턴가 부팅이 되지 않아 확인해보니 SD카드가 깨졌다. 다시 파티션하고 포멧해보려 해도 할 수 없다며 에러가 출력된다.

할 수 없이 다시 만들어야 해서 이것 저것 다시 찾아보게 되어 여기에 정리를 해 둔다. 설정이 완료되면 SD 카드를 백업해 두고 나중에 다시 사용할 수 있도록 해야 할 것 같다.

FullPageOS 설치

설치해봤으나 커널 패닉이 뜨면서 부팅이 되지 않는다. 문서를 좀 읽어보니 라즈베리파이 1은 지원하지 않는다.

라즈베리파이 2 이상을 사용한다면 이게 가장 간단한 방안이 아닐까 싶다. boot 파티션의 파일들을 통해서 네트워크 설정, 웹 페이지 설정이 가능하다.

Jessie Lite 설치

lightDM 등 가볍게 X 환경을 설치한 후 chromium-browser를 설치하려했는데 apt-get을 통해서는 설치할 수가 없었다. 수동 설치 방안이 있는 것 같았으나 일이 복잡해질 것 같아서 패스.

Jessie Full 버전 설치

PIXEL 데스크탑 환경이 포함되어있는 이미지를 다운로드하여 설치했다. 기본적으로 chromium-browser가 설치되어있어서 자동으로 실행되게 하기만 하면 된다.

이미지를 SD카드에 풀어낸 후 부팅을 한 후 먼저 WiFi 설정을 한다. 유선을 사용한다면 별로 필요없을 것 같고, 무선랜을 사용한다면 /etc/wpa_supplicant/wpa_supplicant.conf 파일에 다음과 같이 추가해준다.

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
 
network={
    ssid="ssid name"
    psk="password"
    key_mgmt=WPA-PSK
}

화면을 보니 full screen으로 출력이 안된다. 강제로 1920×1080으로 출력하도록 /boot/config.txt를 다음과 같이 수정한다.

# uncomment to force a specific HDMI mode (this will force VGA)
hdmi_group=2
hdmi_mode=82

chromium-browser를 실행해보면 한글이 깨져나오는데 아래와 같이 ttf-unfonts-core를 설치해준다.

$ sudo apt-get install ttf-unfonts-core

그다음 마우스 커서를 없애기 위해 unclutter 패키지를 설치한다.

$ sudo apt-get install unclutter

이제 chromium-browser가 자동으로 실행되도록 설정한다. ~/.config/lxsession/LXDE-pi/autostart 파일을 열어서 아래 라인을 추가한다. screen save 관련 옵션을 코멘트 처리하거나 지운다.

@xset s off
@xset s noblank
@xset -dpms

@chromium-browser --noerrdialogs --kiosk --incognito http://page.to/show

이제 재부팅 후 제대로 나오는지 확인한다. 제대로 페이지가 출력이 되면, SD카드를 백업한다. 다시 SD카드에 문제가 생기면 백업해둔 이미지를 SD카드에 풀어넣으면 된다.

$ diskutil unmountDisk /dev/disk# (#은 SD카드 번호)
$ sudo dd bs=1m if=/dev/disk# of=./pi1.img

혹시나 싶어 SD카드를 Lock 걸고 켜봤는데 그래도 잘 동작한다. Lock을 걸어두고 쓰면 더 오래 쓸 수 있지 않을까 싶어서 걸어두기로..

워드프레스 한글 파일 링크 깨지는 이슈

최근 워드프레스에 업로드한 이미지 파일들이 엑스박스 처리되어 브라우저 화면에 나타나지 않는 현상이 발생하였다. 파일을 업로드한 뒤 바로 글을 보면 문제가 없는데 나중에 보면 이상하게 깨져나타나는 것이었다. 결론은 크롬에서 업로드한 파일에 한글이 들어있으면 사파리 브라우저에서 안보인다는 것이다.

라즈베리파이에 서버를 구축하여 운영하면서 나타나는 문제인 것 같아서 서버 설정에 문제가 있나 여러모로 검토를 해 보았으나 최근 배포되는 서버 이미지는 당연히 UTF-8을 지원하고, 설치한 APM도 UTF-8을 기본적으로 사용하도록 되어있었다.

그런데 희안하게 브라우저마다 다른 현상이 나타났다. 사파리 브라우저에서는 깨져나오는데, 크롬 브라우저에서는 제대로 나오는 것이 아닌가. 혹시나 싶어 Windows에서 한번 봤는데, 크롬, 에지, 인터넷 익스플로러 모두 제대로 나왔다. 음 이건 사파리의 버그인가…

wp-content 디렉토리를 살펴봤다. 주로 안보이는 이미지는 스크린샷-어쩌구.png 식의 이미지파일들로 맥에서 화면 캡춰하면 생기는 디폴트 이름들이다. 이 파일들이 크롬에서는 보이는데, 사파리에서는 404 에러가 뜨는 것이었다.

좀 더 확인해보니 사파리에서 업로드한 파일이름과 크롬에서 올리는 파일 이름이 서버에 다르게 저장된다는 것을 알았다. 사파리에서 업로드한 이미지들은 사파리에서도 잘 보이고 크롬에서도 잘 보인다. 그런데 크롬에서 업로드한 이미지는 크롬에서는 잘 보이는데 사파리에서는 404에러가 뜬다. (확인해본 다른 브라우저들은 모두 제대로 나온다.)

집에서는 사파리를 주로 쓰고, 회사에서는 업무용으로 크롬을 주로 쓰고있는데, 회사에서 작성한 포스트를 집에서 확인해볼 때 문제가 나왔던 것이었다.

서버를 좀 들여다보니, 업로드한 파일들이 똑같이 스크린샷 어쩌구란 이름으로 나오지만 정열되는 순서가 다르다. 즉 화면에는 스크린샷이라고 동일하게 보이지만, 사파리에서 업로드한 파일들은 알파벳 뒤에, 크롬에서 업로드한 파일들은 알파벳 앞에 나온다. 동일하게 보이지만 다른 파일인 것이다.

두 그룹으로 나뉜 스크린샷 파일들

추측해보건데 사파리에서는 맥의 파일시스템의 이름을 그대로 업로드하여 저장하는 것 같다. 맥에서는 풀어쓰기 방식의 유니코드를 사용하는데 (이름은 잘 기억이..) 이것이 그대로 Linux 서버에 저장되는 듯 싶다. 크롬에서는 UTF-8 변환을 하여 한글을 저장하는 것 같고..

풀어쓰기 형태로 저장된 스크린샷과 모아쓰기 형태로 저장된 스크린샷이 화면상에는 동일하게 보이지만 unicode가 달라서 정열되는 순서가 다르다.

왜 다르게 저장되는지 분석을 해보려다 이건 내가 할 일이 아닌것 같아서 한글 이름을 변환해서 업로드 해 주는 플러그인을 쓰기로 했다. uploading downloading non-latin filename 이라는 플러그인인데, 깔끔하고 괜찮다. 설치하고 활성화해 두기만 하면 한글이 들어간 이미지를 업로드할 때 자동으로 숫자로 된 파일로 바꿔준다.

아래 첨부 이미지는 크롬브라우저에서 업로드한 이미지 파일이다. 사파리에서는 안보이는데 다른 브라우저에서는 보인다.

시스템 환경설정

여튼 희안하다. 왜 이런건지 누가 좀… 사파리 설정 문젠가?? -_-