일러두기

본 글은 원글을 참조 번역하며, 실제로 막힌 부분에 대한 수정이 이뤄져 있습니다.

Debian에서 QSV로 빠르게 인코딩하고 싶다!

이 글에서는 ffmpeg -hwaccel vaapi (VAAPI + i965) 보다 높은 스루풋/고품질을 얻을 수 있는 ffmpeg -hwaccel qsv (libmfx + iHD)를 쓸 수 있는 ffmpeg 빌드를 Ubuntu에서 하게 됩니다.

구성

소프트웨어

Ubuntu는 2020년 4월 1일 버전으로 설치되어 있습니다. 아쉽게도 LTS인 Groovy가 아닌데, 18년도랑 20년도의 버전 차이가 상당히 큰 점, 설치 당시에 아직 LTS가 나오지 않은 점 탓에 조금 애매한 버전이 깔려 있습니다. 하지만 웬만한 라이브러리 수급에 큰 문제는 없기 때문에 이대로 진행하려고 합니다.

$ lsb_release -a

No LSB modules are available.
Distributor ID: Ubuntu
Description: Ubuntu 20.04.1 LTS
Release: 20.04
Codename: focal

하드웨어

Intel Quick Sync Video (libmfx + iHD)를 사용한 하드웨어 인코딩/디코딩을 위해서는, Core i 시리즈로는 제 6세대 이상이 필요합니다. 다행히도 제 노트북은 아슬아슬하게 이 조건을 충족하기 때문에 그대로 진행하고자 합니다.

CPU별 자세한 기능 지원 사항은 https://trac.ffmpeg.org/wiki/Hardware/QuickSync에서 자세하게 확인할 수 있습니다.

설치 방법

빌드 도구 설치

#빌드에 공통으로 사용할 패키지를 설치
$ sudo apt install build-essential git cmake pkg-config

libva (VA-API) 빌드, 설치, 동작 확인

#의존하는 패키지의 설치
$ sudo apt install meson libdrm-dev automake libtool

#LibVA 최신판 다운로드
$ git clone https://github.com/intel/libva.git
$ cd libva

# 빌드 및 설치
$ ./autogen.sh
$ make
$ sudo make install
...（중략)
Libraries have been installed in:
   /usr/local/lib

If you ever happen to want to link against installed libraries
in a given directory, LIBDIR, you must either use libtool, and
specify the full pathname of the library, or use the '-LLIBDIR'
flag during linking and do at least one of the following:
   - add LIBDIR to the 'LD_LIBRARY_PATH' environment variable
     during execution
   - add LIBDIR to the 'LD_RUN_PATH' environment variable
     during linking
   - use the '-Wl,-rpath -Wl,LIBDIR' linker flag
   - have your system administrator add LIBDIR to '/etc/ld.so.conf'

See any operating system documentation about shared libraries for
more information, such as the ld(1) and ld.so(8) manual pages.

libva가 설치된 /usr/local/lib는 LD-PATH에 포함되어 있지 않으므로, 아래의 명령을 통해 추가해야 합니다.

이걸 함으로써 libva2 패키지(버전 2.10.0)이 /usr/lib에 설치되어 있어도, 이번 설치한 최신판이 우선되어 선택되게 됩니다.

sudo sh -c "echo /usr/local/lib >> /etc/ld.so.conf.d/local.conf"
sudo ldconfig

ldconfig가 작동하는지 확인합니다. vainfo에서 참조하고 있는 libva가 /usr/local/lib를 가리키고 있는 것을 알 수 있습니다.

# vainfo 패키지 설치
$ sudo apt install vainfo
# vainfo가 참조하고 있는 libva가 조금 전 빌드한 것임을 확인
$ ldd /usr/bin/vainfo | grep /usr/local/
        libva-drm.so.2 => /usr/local/lib/libva-drm.so.2 (0x00007fe6f8bc4000)
        libva.so.2 => /usr/local/lib/libva.so.2 (0x00007fe6f8b95000)

참고로 vainfo는 Video Accelerate Info로 VA-API의 현재 설치 상황을 확인할 수 있습니다.

또 VA-API 드라이버가 설치 되어 있지 않아서 드라이버가 열리지 않으면 에러가 표시됩니다.

# vainfo를 사용해도 드라이버가 없으면 에러가 난다
$ vainfo
error: can't connect to X server!
libva info: VA-API version 1.8.0
libva info: Trying to open /usr/local/lib/dri/iHD_drv_video.so
libva info: va_openDriver() returns -1
libva info: Trying to open /usr/local/lib/dri/i965_drv_video.so
libva info: va_openDriver() returns -1
vaInitialize failed with error code -1 (unknown libva error),exit

Ubuntu Server 같이 원래 디스플레이가 없는 경우 X server에 연결할 수 없다는 오류가 나타나는 건 자연스럽습니다. 실제로 그런 장치에서 해보질 않아서 그 문제 자체를 무시할 수 있는지는 확인하지 못했습니다.

VA-API 드라이버 (iHD_drv_video.so)의 빌드와 설치

이제 iHD_drv_video.so를 빌드합니다.

#의존 패키지의 설치
sudo apt install libpciaccess-dev

#의존 라이브러리(Intel(R) Graphics Memory Management Library) 빌드
$ cd
$ git clone https://github.com/intel/gmmlib
$ cd gmmlib/
$ mkdir build && cd build
$ cmake ..
$ make

#VA-API 드라이버(iHD_drv_video.so) 빌드
$ cd
$ git clone https://github.com/intel/media-driver
$ mkdir build_media
$ cd build_media/
$ cmake ../media-driver
$ make
$ sudo make install

여기까지 오면 vainfo 명령에서 새로운 드라이버가 인식됩니다.

# vainfoを実行
$ sudo vainfo
error: can't connect to X server!
libva info: VA-API version 1.8.0
libva info: Trying to open /usr/local/lib/dri/iHD_drv_video.so
libva info: Found init function __vaDriverInit_1_8
libva info: va_openDriver() returns 0
vainfo: VA-API version: 1.8 (libva 2.4.0)
vainfo: Driver version: Intel iHD driver for Intel(R) Gen Graphics - 20.2.pre (3640b64c)
vainfo: Supported profile and entrypoints
      VAProfileNone                   : VAEntrypointVideoProc
      VAProfileNone                   : VAEntrypointStats
      VAProfileMPEG2Simple            : VAEntrypointVLD
      VAProfileMPEG2Simple            : VAEntrypointEncSlice
      VAProfileMPEG2Main              : VAEntrypointVLD
      VAProfileMPEG2Main              : VAEntrypointEncSlice
      VAProfileH264Main               : VAEntrypointVLD
      VAProfileH264Main               : VAEntrypointEncSlice
      VAProfileH264Main               : VAEntrypointFEI
      VAProfileH264Main               : VAEntrypointEncSliceLP
      VAProfileH264High               : VAEntrypointVLD
      VAProfileH264High               : VAEntrypointEncSlice
      VAProfileH264High               : VAEntrypointFEI
      VAProfileH264High               : VAEntrypointEncSliceLP
      VAProfileVC1Simple              : VAEntrypointVLD
      VAProfileVC1Main                : VAEntrypointVLD
      VAProfileVC1Advanced            : VAEntrypointVLD
      VAProfileJPEGBaseline           : VAEntrypointVLD
      VAProfileJPEGBaseline           : VAEntrypointEncPicture
      VAProfileH264ConstrainedBaseline: VAEntrypointVLD
      VAProfileH264ConstrainedBaseline: VAEntrypointEncSlice
      VAProfileH264ConstrainedBaseline: VAEntrypointFEI
      VAProfileH264ConstrainedBaseline: VAEntrypointEncSliceLP
      VAProfileVP8Version0_3          : VAEntrypointVLD
      VAProfileVP8Version0_3          : VAEntrypointEncSlice
      VAProfileHEVCMain               : VAEntrypointVLD
      VAProfileHEVCMain               : VAEntrypointEncSlice
      VAProfileHEVCMain               : VAEntrypointFEI
      VAProfileHEVCMain10             : VAEntrypointVLD
      VAProfileHEVCMain10             : VAEntrypointEncSlice
      VAProfileVP9Profile0            : VAEntrypointVLD
      VAProfileVP9Profile2            : VAEntrypointVLD```

이상으로 하드웨어 가속이 준비 완료되었습니다. Media SDK에서 필요한 VA-API(libva)의 최신판 드라이버 도입을 끝냈습니다.

Media SDK의 빌드, 설치

git에서 Media SDK를 다운로드, 빌드, 설치합니다.

빌드 플래그 및 설치 위치는 스크립트를 확인하면 알 수 있습니다.

 git에서 MediaSDK 다운로드
$ git clone https://github.com/Intel-Media-SDK/MediaSDK msdk
$ cd msdk

# 빌드 디렉토리 작성
$ mkdir build && cd build

# cmake 실행, 빌드 플래그가 마지막에 표시
$ cmake ..
...(略)...
Release flags:
  CMAKE_C_FLAGS_RELEASE                   : -O3 -DNDEBUG
  CMAKE_CXX_FLAGS_RELEASE                 : -O3 -DNDEBUG
Debug flags:
  CMAKE_C_FLAGS_DEBUG                     : -g -D_DEBUG
  CMAKE_CXX_FLAGS_DEBUG                   : -g -D_DEBUG
Install:
  CMAKE_INSTALL_PREFIX                    : /opt/intel/mediasdk
  CMAKE_INSTALL_FULL_INCLUDEDIR           : /opt/intel/mediasdk/include
  CMAKE_INSTALL_FULL_LIBDIR               : /opt/intel/mediasdk/lib
  CMAKE_INSTALL_FULL_DATADIR              : /opt/intel/mediasdk/share
Enable:
  ENABLE_OPENCL                           : ON
  ENABLE_X11                              : OFF
  ENABLE_X11_DRI3                         : OFF
  ENABLE_WAYLAND                          : OFF
  ENABLE_ITT                              : OFF
  ENABLE_TEXTLOG                          : OFF
  ENABLE_STAT                             : OFF
Build:
  BUILD_RUNTIME                           : ON
  BUILD_DISPATCHER                        : ON
  BUILD_SAMPLES                           : ON
  BUILD_TUTORIALS                         : ON
  BUILD_TESTS                             : OFF
  BUILD_TOOLS                             : OFF
  BUILD_KERNELS                           : OFF
...(略)...


# make & make install. 설치 장소를 확인.
$ make
$ sudo make install
...(중략)...
-- Install configuration: "release"
-- Installing: /opt/intel/mediasdk/share/mfx/plugins.cfg
-- Installing: /opt/intel/mediasdk/lib/libmfx.so.1.32
-- Installing: /opt/intel/mediasdk/lib/libmfx.so.1
-- Installing: /opt/intel/mediasdk/lib/libmfx.so
-- Installing: /opt/intel/mediasdk/lib/pkgconfig/libmfx.pc
-- Installing: /opt/intel/mediasdk/include/mfx
-- Installing: /opt/intel/mediasdk/include/mfx/mfxvideo++.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxpcp.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxvstructures.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxcommon.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxla.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxastructures.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxplugin.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxscd.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxaudio++.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxpak.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxaudio.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxadapter.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxdefs.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxplugin++.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxvp8.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxvideo.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxjpeg.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxfeihevc.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxsession.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxfei.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxdispatcherprefixedfunctions.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxvp9.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxstructures.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxbrc.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxenc.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxcamera.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxsc.h
-- Installing: /opt/intel/mediasdk/include/mfx/mfxmvc.h
-- Installing: /opt/intel/mediasdk/lib/pkgconfig/mfx.pc
-- Installing: /opt/intel/mediasdk/share/mfx/samples/sample_decode
-- Installing: /opt/intel/mediasdk/share/mfx/samples/sample_encode
-- Installing: /opt/intel/mediasdk/share/mfx/samples/sample_fei
-- Installing: /opt/intel/mediasdk/share/mfx/samples/sample_hevc_fei
-- Installing: /opt/intel/mediasdk/share/mfx/samples/sample_hevc_fei_abr
-- Installing: /opt/intel/mediasdk/share/mfx/samples/sample_vpp
-- Installing: /opt/intel/mediasdk/share/mfx/samples/sample_multi_transcode
-- Installing: /opt/intel/mediasdk/share/mfx/samples/libsample_rotate_plugin.so
-- Installing: /opt/intel/mediasdk/share/mfx/samples/libvpp_plugin.a
-- Installing: /opt/intel/mediasdk/share/mfx/samples/libcttmetrics.so
-- Installing: /opt/intel/mediasdk/share/mfx/samples/metrics_monitor
-- Installing: /opt/intel/mediasdk/lib/libmfxhw64.so.1.32
-- Installing: /opt/intel/mediasdk/lib/libmfxhw64.so.1
-- Installing: /opt/intel/mediasdk/lib/libmfxhw64.so
-- Installing: /opt/intel/mediasdk/lib/pkgconfig/libmfxhw64.pc
-- Installing: /opt/intel/mediasdk/lib/mfx/libmfx_hevce_hw64.so
-- Installing: /opt/intel/mediasdk/lib/mfx/libmfx_hevc_fei_hw64.so
-- Installing: /opt/intel/mediasdk/lib/mfx/libmfx_vp9e_hw64.so
-- Installing: /opt/intel/mediasdk/lib/mfx/libmfx_h264la_hw64.so
-- Installing: /opt/intel/mediasdk/lib/mfx/libmfx_hevcd_hw64.so
-- Up-to-date: /opt/intel/mediasdk/lib/mfx/libmfx_hevcd_hw64.so
-- Installing: /opt/intel/mediasdk/lib/mfx/libmfx_vp8d_hw64.so
-- Installing: /opt/intel/mediasdk/lib/mfx/libmfx_vp9d_hw64.so

$ cd 

MediaSDK가 설치된 /opt/intel/mediasdk/lib는 LD-PATH에 포함되어 있지 않으므로, 아래 명령으로 추가합니다.

$ sudo sh -c "echo /opt/intel/mediasdk/lib/ >> /etc/ld.so.conf.d/mediasdk.conf"
$ sudo ldconfig

참고로 ldconfig는 상당히 유용한데, lib를 새로 저장한 경우, 시스템이 인식하도록 새로고쳐주는 명령입니다. 이걸 하지 않고 빌드를 진행하면 올바르게 lib를 읽어들이지 못할 수 있습니다.

ffmpeg 빌드

이제 ffmpeg를 빌드합니다.

#libfdk-aac를 위해선 non-free 저장소를 추가해야 합니다...만 Ubuntu에서는 제대로 작동하지 않았는데 별 문제가 없었습니다.
$ sudo apt install software-properties-common
$ sudo apt-add-repository non-free

# 의존 패키지 설치
$ sudo apt update -qq && sudo apt -y install \
   autoconf \
   automake \
   build-essential \
   cmake \
   git-core \
   libass-dev \
   libfreetype6-dev \
   libgnutls28-dev \
   libsdl2-dev \
   libtool \
   libva-dev \
   libvdpau-dev \
   libvorbis-dev \
   libxcb1-dev \
   libxcb-shm0-dev \
   libxcb-xfixes0-dev \
   pkg-config \
   texinfo \
   wget \
   yasm \
   zlib1g-dev \
   nasm \
   libx264-dev \
   libx265-dev libnuma-dev \
   libvpx-dev \
   libfdk-aac-dev \
   libmp3lame-dev \
   libopus-dev \
   libaom-dev

# Ubuntu에서 $PKG_CONFIG_PATH가 기존에 공란이었기에, 기본값을 찾아서 추가해야 했습니다. /usr/local/lib/를 추가하여 문제를 해결했습니다. $ echo $PKG_CONFIG_PATH를 해서 값이 공란이라면 아래 내용을 추가해보세요.
$ export PKG_CONFIG_PATH=/usr/local/lib

# mediasdk의 lib와 include 위치를 표시하는 pkgconfig가 비표준 장소에 있으므로
# 이대로면 Configure 단계에서 위치 지정이 불가합니다. 환경 변수로 참조를 추가합니다.
$ export PKG_CONFIG_PATH=/opt/intel/mediasdk/lib/pkgconfig:$PKG_CONFIG_PATH

# ffmpeg 소스를 다운로드하여 빌드, 설치
$ cd 
$ wget -O ffmpeg-snapshot.tar.bz2 https://ffmpeg.org/releases/ffmpeg-snapshot.tar.bz2
$ tar xjvf ffmpeg-snapshot.tar.bz2
$ cd ffmpeg
$ ./configure \
  --extra-libs="-lpthread -lm" \
  --enable-libmfx \
  --enable-gpl \
  --enable-gnutls \
  --enable-libaom \
  --enable-libass \
  --enable-libfdk-aac \
  --enable-libfreetype \
  --enable-libmp3lame \
  --enable-libopus \
  --enable-libvorbis \
  --enable-libvpx \
  --enable-libx264 \
  --enable-libx265 \
  --enable-nonfree
$ make
$ sudo make install

이로써 ffmpeg의 설치가 완료되었습니다.

문제 해결

설치가 다 끝났는데, libx264.so.146과 같은 파일을 요구하며 아무것도 진행되지 않을 수 있습니다.

동작 테스트

설치한 ffmpeg의 확인

빌드한 libmfx를 참조하고 있는 것을 확인합니다.

또, 인코더, 디코더 일람을 표시하고 QSV 대응 코덱이 목록에 있는 것을 확인합니다.

# mediasdk를 참조하고 있는 것을 확인
[email protected]:~$ ldd /usr/local/bin/ffmpeg | grep /opt
        libmfx.so.1 => /opt/intel/mediasdk/lib/libmfx.so.1 (0x00007f44af339000)

# QSV를 사용한 디코더가 목록에 있는 것을 확인
$  ffmpeg -decoders|grep qsv
 V....D h264_qsv             H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10 (Intel Quick Sync Video acceleration) (codec h264)
 V....D hevc_qsv             HEVC (Intel Quick Sync Video acceleration) (codec hevc)
 V....D mjpeg_qsv            MJPEG video (Intel Quick Sync Video acceleration) (codec mjpeg)
 V....D mpeg2_qsv            MPEG-2 video (Intel Quick Sync Video acceleration) (codec mpeg2video)
 V....D vc1_qsv              VC-1 video (Intel Quick Sync Video acceleration) (codec vc1)
 V....D vp8_qsv              VP8 video (Intel Quick Sync Video acceleration) (codec vp8)
 V....D vp9_qsv              VP9 video (Intel Quick Sync Video acceleration) (codec vp9)

# QSV를 사용한 인코더가 목록에 있는 것을 확인
$  ffmpeg -encoders|grep qsv
 V..... h264_qsv             H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10 (Intel Quick Sync Video acceleration) (codec h264)
 V..... hevc_qsv             HEVC (Intel Quick Sync Video acceleration) (codec hevc)
 V..... mjpeg_qsv            MJPEG (Intel Quick Sync Video acceleration) (codec mjpeg)
 V..... mpeg2_qsv            MPEG-2 video (Intel Quick Sync Video acceleration) (codec mpeg2video)
 V..... vp9_qsv              VP9 video (Intel Quick Sync Video acceleration) (codec vp9)

살짝 인코딩을 해본 결과

자세한 내용은 아직

이 부분은 저도 직접 테스트를 해보고 첨부하도록 하겠습니다. 간략하게 EPGStation에서 테스트해본 결과 라이브가 아닌 파일은 실시간 전송이 가능할 정도였으며 배속도 CPU에 비해 상당히 빠르게 진행된 것을 체감할 수 있었습니다.

병렬 다수 파일 인코딩도 가능

시스템 부하를 확인

바깥 링크

원문 제공 링크

Build Media SDK on Ubuntu (Intel-Media-SDK)

https://github.com/Intel-Media-SDK/MediaSDK/wiki/Build-Media-SDK-on-Ubuntu

링크 본문에서 변경점 (=현 블로그의 글과 이 링크의 글이 더 유사합니다)

1. LD_LIBRARY_PATH에 /usr/local/lib를 추가하는 순서가 포함되어 있습니다.
2. LD_LIBRARY_PATH에 /opt/intel/mediasdk/lib/를 추가하는 순서가 포함되어 있습니다.

Compile FFmpeg for Ubuntu, Debian, or Mint

https://trac.ffmpeg.org/wiki/CompilationGuide/Ubuntu

링크 본문에서 변경점

1. 빌드 할 때 폴더를 더 단순하게 사용하고 있습니다.
2. QSV 대응을 위해 --enable-libxmf 를 추가하였습니다.
3. liboam은 소스에서 빌드하지 않고 패키지를 사용하였습니다.
4. gnutls 패키지가 --pkg-config-flags="--static"를 지원하지 않으므로 --pkg-config-flags="--static"를 삭제합니다.

Hardware/QuickSync – FFmpeg

https://trac.ffmpeg.org/wiki/Hardware/QuickSync

설명과 동작 확인용 명령을 참조하였습니다.

이 글에서 참조한 링크

2018년 10월 7일

계기

사실 러브라이브 덕후도 아니고 리듬 게임 몇 번 하고 애니메이션은 정주행조차 하지 않았습니다.

더군다나 러브라이브 μ’s(뮤즈)도 아니고 러브라이브 썬샤인 Aqours를 제가 알 리가 전혀 없었습니다.

그저 같은 센터 출신으로 일본에 취업하게 된 동기 형을 만나러 가자니 생각보다 교통비가 만만치 않아서 억울했던 것이 계기였습니다.

도카이도 본선을 타고 수도권에서 100km는 족히 가야하는 머나먼 지자체, 시즈오카현은 아무리 가나가와현 깊숙히 자리잡아서 도쿄에서 한참 서쪽으로 앞서 있다고 해도 극복이 되지 않습니다.

아니, 사실 극복은 전철이 하는데 제가 교통비를 극복하기가 부담스러웠을 뿐입니다. 그리고 시간도 만만치 않고요.

하지만 도중에 있는 역 하나가 눈에 들어오게 됩니다.

딱 정중앙 즈음에 좋은 관광지가 있는 것을 발견한 것입니다.

그저 우연히 중간 지점이었을 뿐입니다

누마즈(沼津)역은 러브라이브 선샤인! 무대로 유명한데, 제가 아는 건 딱 이 정도에 불과해서 캐릭터 이름 조차 제대로 알지 못하는 상태였습니다.

하지만 이 제안으로 의기투합한 이 멤버는 처음에 단순히 남들이 성지순례한 루트를 따라가자는 다소 안일한 마음으로 여행길에 나섰습니다.

애니메이션을 보지도 않았는데 이걸 어쩌나 실제로 불안이 밀려왔는데, 거꾸로 생각하면 실제로 본 다음에 애니메이션을 정주행하는 즐거움도 무시할 수 없기에 그냥 감안하기로 했습니다.

오다큐 전철은 사철인데도 쌉니다. 앱으로 검색된 최저 요금은 분명 저에게 사가미오노(相模大野)역까지 되돌아가서 오다와라(小田原)역까지 이동하라고 제시했습니다.

그게 가장 경제적인 건 잘 알지만, 아무래도 루트가 더 마음에 드는 곳이 있었습니다. 바다를 끼고 달리는 절경을 보고 싶었던 것이죠.

그래서 JR 도카이도 본선을 먼저 타기 위해 후지사와(藤沢)역으로 이동하였습니다.

일요일 화창한 날의 오전에 지방을 향해 신칸센을 타지 않고 보통 열차에 올라타는 사람들은 나름 적지 않았습니다.

열차 가운데 유료 좌석칸인 그린샤를 이용하는 사치는 저에게 너무 일렀기 때문에, 그냥 적당한 자리에 앉았습니다.

전동차의 넘버까지 외우고 다니는 철덕이 아닌 단순한 철린이인지라, 칸마다 좌석이 롱시트와 크로스시트가 섞여있는 점, 화장실을 달고 다니는 점이 신기하게 느껴졌습니다.

대한민국에 광역전철로 화장실을 달고 다니는 열차는 없지요. 공항철도 직통열차 정도고, 장거리 간선열차가 철저히 분리된 탓에 운임 카테고리가 다릅니다.

일본은 JR 도심 전철이나 근교 전철이나 거리 비용은 통합 운임을 받고 있지요. 개찰구 통과 없이 도시간 이동이 가능한 것입니다.

처음으로 수도권을 벗어나는 경험은 진짜 여행이라는 실감이 나게 하더군요.

이 포스트에서 이동 거리

계속

열차는 JR 동일본 구간의 끝을 향해 달려갑니다. 이어지는 내용은 다음 포스트에서 만나보세요.

SSL, TLS, STARTTLS의 역사

CodeRecipe – Cloudflare HTTP 헤더를 Nginx에서 활용하기 (3) – 프록시 서버를 거치지 않은 요청 거절하기

CodeRecipe – Cloudflare HTTP 헤더를 Nginx에서 활용하기 (2) – 실제 방문자 IP 얻기

CodeRecipe – Cloudflare HTTP 헤더를 Nginx에서 활용하기 (1)

CodeRecipe – PureFTP로 FTP와 FTPS 설정하기

CodeRecipe – Nuxt.js 성능 향상 기술 몇 가지

electron이란

JavaScript, HTML, CSS를 이용하여 크로스 플랫폼 데스크탑 앱을 만들어보세요

Electron이란, 맥, 윈도우, 리눅스와 호환되는 소프트웨어 프레임워크입니다. 수많은 크로스 플랫폼 프레임워크가 세상에 존재하지만, 스마트폰 같은 모바일이 아닌 PC 데스크톱 환경을 지원하는 경우는 선택지가 생각보다 많지가 않습니다. 리눅스, 맥, 윈도우를 가리지 않고 폭넓게 쓰이는 Visual Studio Code(이하 VSCode)가 바로 이 Electron을 활용하여 크로스 플랫폼을 구현한 것으로 알려지고 있습니다.

이제 웹 지식을 활용하여, 데스크톱에서도 하나의 코드로 복수 플랫폼에서 작동하는 프로그램을 직접 개발할 수 있도록 첫 발걸음을 내딛어볼까 합니다.

기초 설정

brew 설정

brew는 맥에서 사용하기 가장 편한 홈브류 패키지 관리자입니다. 리눅스에서 쓰이는 다양한 프로그램을 맥에서도 원격 저장소에서 받아서 바로 설치할 수 있게 해줍니다.

https://brew.sh/index_ko 에 접속하면 즉시 설치할 수 있는 링크가 제공됩니다.

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

설치가 되면 바로 노드를 설치합니다. node 설치는 버전 관리에 상당히 번거로운 부분이 있는데, 오래된 소스 코드를 볼 일이 없는 저는 그냥 빠르게 패키지 관리자부터 설치하여 노드를 동시에 설정하고자 합니다.

yarn 설치

yarn은 brew에 공식적으로 패키지가 업로드되어 있으므로 MacOS 사용자에게 가장 편리한 설치 옵션입니다. 아래 명령으로 간단하게 설치가 가능합니다.

$ brew install yarn

아무 것도 준비되지 않아도 node가 자동으로 설치됩니다. nvm 같은 다른 버전 관리자를 통해 node를 이미 설치한 바 있는 분들은, 환경 변수 경로 $PATH에 node가 있는 폴더가 들어있어서, 아무 터미널에서나 node 명령이 먹는지 미리 확인해보시기 바랍니다.

node가 이미 설치되어 있고 npm으로 관리하는 분들은 npm 패키지의 yarn을 쓰는 것도 방법입니다. 어떻게 설치하는지는 상관 없습니다. 다만, 추후 업데이트를 고려해서 본인이 어떻게 설치했는지 기억을 미리해두시기 바랍니다.

엉뚱한 패키지 관리자에서 업데이트를 하면 당연히 yarn이 업데이트 되지 않을 것이기 때문입니다.

$ npm install -g yarn

템플릿에서 시작하기

우리는 Electron + React + TypeScript 조합으로 기본 뼈대를 만들어보도록 하겠습니다. 왜 공식적인 방법을 제치고 이런 방식으로 만드냐면…

• React 지식을 활용하면 다른 프레임워크에 대한 지식이 있을 경우 접근이 편리하고, 없더라도 다른 프레임워크의 접근 장벽을 낮출 수 있습니다.
• 기본값으로 JavaScript를 사용하는데, TypeScript의 타입에 엄격한 방식, eslint를 통한 코드 정리 일관성, 오류 판정 등의 유용한 기능을 쓰기 어렵습니다. 초보자는 끊임없이 실수를 바로잡아줄 선생님이 필요하죠.
• 물론 숙련자라고 해도, 모든 파일의 오류를 검출하기 어렵기 때문에 TypeScript가 월등히 편리하게 느끼실 분이 많을 거라 생각합니다.

본격적으로 준비가 되었으니 npx를 써서 React 앱 초기화를 하겠습니다.

프로젝트 초기화

electron과 electron-is-dev, concurrently, wait-on 패키지에 대한 의존성을 등록하겠습니다. 의존성을 등록하면 프로젝트에서 이 라이브러리를 사용하게 되고, 기능을 활용할 수 있게 됩니다.

-D는 dev라는 뜻인데, 이 의존성은 개발시에만 활용하게 되고, 배포시에 포함되지 않는다는 소리입니다.

$ yarn add -D electron electron-is-dev concurrently wait-on

파일 electron.js를 public 폴더에 생성하여 다음과 같이 저장합니다. 참고로 편집기는 VSCode가 공짜 중에 가장 편리한 것 같습니다.

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const isDev = require('electron-is-dev')
let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    resizable: false,
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.loadURL(
    isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`
  )
  if (isDev) {
    // Open the DevTools.
    // BrowserWindow.addDevToolsExtension('<location to your react chrome extension>');
    mainWindow.webContents.openDevTools()
  }
  mainWindow.on('closed', () => (mainWindow = null))
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

package.json을 편집합니다. 다른 건 그대로 두고, 값이 있는 부분만 수정해 둡시다.

{
 .
 .
 "homepage":"./",
 "main":"public/electron.js",
 .
 .
 "scripts":{
  .
  .
  "dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""
 }
}

앱 기동

앱을 기동하려면 이렇게 하면 됩니다.

$ yarn dev

다음 단계

Electron의 라이프사이클에 대해 배우고, 실제로 폼을 만들어보도록 하겠습니다.

WPGlobus가 아직까지 WordPress 최신 글 편집기인 구텐베르크의 지원이 여전히 이뤄지지 않고 있습니다.

포럼은 아직 지원을 위해 개발중이라고 하는데, 구텐베르크 자체도 버전업이 지속되는 만큼, 대응이 빨리 되기 어렵지 않을까 생각되는 부분도 있습니다.

그간 일본어 번역이 없어서 다국어 환경 구성에 어려움이 있었는데, 일단 이 편집기를 해제함으로서 해결하고자 합니다.

조만간 해결책이 나오길 기대합니다.