Flutter로 WebP 변환기 제작 - 이미지 불러오기, 이미지 보여주기

 블로그에 이미지를 업로드할 때, png나 jpg 이미지들을 webp로 변환하여 업로드한다. 그 이유는 무시하기 힘든 파일 크기 차이 때문이다. 지금은 1 - 2 MB 정도의 크기이지만 나중에 게시글이 많아지면 차지하고 있는 양에서 차이가 날 것이기에, 게시글을 쓰는 초반부터 webp로 올리고 있다.

동일 스크린샷의 png와 webp 변환물의 용량 차이 비교. (185KB > 17KB) 품질 차이는 적지만 용량 차이는 크게 난다.

 불편한 점이 있다면, webp로 이미지를 변환하는 것이 꽤 번거롭다는 것이다. libwebp를 다운로드 받아서 직접 터미널에서 명령어로 이미지를 변환하는데, 명령어와 옵션, 파일명까지 수동으로 일일히 입력하는 것이 불편했다. 그래서 직접 이미지를 webp로 변환해주는 프로그램을 만들기로 했다. Flutter를 이용해서.

 먼저 어떤 프로그램을 만들지부터 생각했다. 나는 현재 맥에서 글을 쓰고 있다. 그러므로 일단은 macOS에서 돌아가는 프로그램만 만들기로 했다. 처음엔 플러그인을 사용해서 이미지를 변환하려고 했는데, 기왕 만드는 거 Flutter에서 직접 cwebp를 이용해서 webp로 변환을 해보면 어떨까 생각했다. 어차피 macOS에서만 돌릴 목적이니까!

 우선은 대략적으로 구상했다. 두개의 버튼이 있으며 하나는 이미지를 불러오는, 다른 하나는 WebP로 변환하는 버튼이다. 변환할 이미지를 불러오면 해당 이미지의 preview를 보여주고, 버튼을 눌러 변환하면 해당 이미지를 WebP로 변환 후 기존 이미지가 있던 파일에 저장하는 것이다.

 우선 버튼 두개만 만들었다. 그러면 우선 이미지 불러오기 기능부터 구현해보자. 플러터에서 파일을 불러올 때 가장 많이 쓰이는 file_picker를 이용해서 구현하기로 했다.

fvm flutter pub add file_picker

 플러그인을 설치해주고 요구하는 셋업을 마쳤다. 사용자가 선택한 파일을 다시 WebP로 저장하는 것이니까, react/write 권한이 모두 필요할 것으로 생각하고, entitlement는 read/write로 설정했다.

불러온 이미지와 이미지명이 표시된다.

 선택한 이미지의 파일명과 이미지를 가져와서 상단에 보여주도록 했다. 이제 남은 건 WebP로 변환하는 일 뿐이다!