본문 바로가기

프로그래밍/web

Ink File Picker - 쉽고 강력한 클라우드 파일 선택기

이제는 로컬뿐만 아니라 클라우드 저장소도 고려해야 한다

브라우저는 고유의 파일 선택기를 제공합니다. <input type="file" /> 태그를 이용하면 아래와 같이 파일을 선택할 수 있는 버튼이 나타납니다.

기본적으로 제공하는 파일 선택기를 이용하면 쉽게 구현이 가능합니다. 하지만 이 태그는 간단한 만큼 제약도 많습니다. 먼저 로컬 파일밖에 고를 수가 없습니다. 최근에는 드롭박스, 구글 드라이브, 스카이 드라이브, 박스등 여러 클라우드 저장소를 사용하는 사람들이 많습니다. 하지만 기본 파일 선택기로는 클라우드 저장소에 있는 파일을 선택할 수 없습니다. 이 문제를 해결하기 위해서는 javascript를 이용하여 각각의 클라우드 서비스의 api를 사용해서 자체적으로 파일 선택기를 구현해야 합니다. 하지만 이런 파일 선택기를 구현하기는 너무 어렵고 버그가 있을 확률이 큽니다. 이럴때 Ink File Picker를 사용하면 쉽고 강력한 클라우드 파일 선택기를 구현할 수 있습니다.

Ink File Picker의 모습


Ink File Picker을 사용하자

Ink File Picker를 사용하기 위해서는 먼저 공식 홈페이지에 들어가야 합나디. 들어가서 오른쪽 상단에 Login 버튼을 눌러서 로그인을 합니다. 아직 계정이 없으신 분은 계정을 하나 만드셔야 합니다.

Ink File Picker의 메인페이지


계정을 만들었으면 앱을 하나 만들어 보도록 합시다. Create a new app을 클릭해서 새로운 앱을 만들기 시작합니다. 먼저 App Name과 사용할 SDK를 정해줍니다. (사실 SDK를 선택하는 것은 큰 의미가 없는 것 같습니다.)

앱 이름과 SDK를 선택한다


다음으로는 로고와 URL을 적어줍니다. 로고는 나중에 Ink File Picker를 실행했을때 보여지는 로고입니다. 웹사이트 URL은 나중에 S3 저장소에 파일 선택기로 선택된 이미지를 저장하고자 할때 이용됩니다. S3 저장소를 이용할 계획이 없으신 분은 그다지 중요하지 않은 부분입니다.

로고와 웹사이트 URL를 입력한다


이제 앱이 만들어 졌습니다. 완료가 되면 아래와 같은 화면이 나오게 됩니다. 맨 위에 API Key(모자이크 처리되었습니다)가 있고 그 아래로 Ink File Picker를 어떻게 사용할지 선택할 수 있는 항목이 나옵니다. 항목을 클릭하면 해당 문서로 넘어갑니다.

앱 등록 완료!


이제 API Key를 얻었으니 Ink File Picker를 사용할 수 있게 되었습니다. 참고로 무료버전은 1달에 5000개의 파일로 제한되어 있습니다. 자세한 가격 정책은 이 링크를 확인하세요.

자세한 Ink File Picker 사용법은 공식문서에 나와 있습니다. 여기서는 간단한 기능들만 살펴 보도록 하겠습니다. (아래의 내용은 모두 공식 문서에 있습니다.)

먼저 HTML 파일에 Ink File Picker 스크립트를 추가해야 합니다.

<script type="text/javascript" src="http://api.filepicker.io/v1/filepicker.js"></script>

이제 스크립트를 작성하면 되는데, 가장 먼저 해야 하는 일이 API Key를 설정하는 일 입니다. 아래의 스크립트를 추가하여 API 키를 설정해 줍니다.

filepicker.setKey('AXHH5oRsCSVufaLJGnuYCz');

가장 간단한 File Picker 창을 열어보도록 하겠습니다. 아래의 스크립트를 실행하면 Ink File Picker가 실행됩니다. API는 콜백 형식으로 이루어져 있고, pick을 호출할때 함수를 하나 넘겨주게 됩니다. 해당 함수는 File Picker가 갖어온 파일 정보를 인자로 받게 됩니다. 이 함수 안에 선택된 파일로 어떤일을 할지 로직을 작성해 주면 됩니다. 여기서는 그냥 console.log 를 이용해서 로그를 남겨보도록 하겠습니다.

filepicker.pick(function(InkBlob){

  console.log(InkBlob.url);

});

위 스크립트를 실행하면 아래와 같은 화면이 등장합니다.

Ink File Picker를 실행한 모습


단 2줄로 내 S3 서버에 파일을 저장하자

위에서 Ink File Picker를 이용하여 어떻게 파일을 갖어올 수 있는지 확인하였습니다. 이렇게 갖어온 파일을 S3 저장소에 쉽게 저장시킬 수 있습니다. S3 저장소를 사용하기 위해서는 먼저 설정을 해야 합니다. Ink File Picker 사이트에서 Storage 부분에 S3 Settings에 들어가줍니다. Settings에서 S3 Access Key등을 설정해 줍니다. 자세한 내용은 S3 설정에 대한 공식문서를 확인하시면 됩니다.

S3 저장소 설정화면


이렇게 S3를 설정하고 나면 아래의 코드를 이용하여 파일을 내 S3 저장소에 저장시킬 수 있습니다. 여기서 url은 filepicker.pick으로 갖어온 파일의 url이 됩니다.

filepicker.storeUrl(url, function(InkBlob){

  console.log(InkBlob) 

});


그림을 간단하게 수정할 수 있다.

Ink File Picker은 간단 그림 수정 기능도 제공합니다. 파일의 사이즈를 수정하려면 다음과 같이 하면 됩니다.

filepicker.convert(inkblob, {width: 200, height: 200},

    function(new_InkBlob){

        console.log(new_InkBlob.url);

    }

);

width, height 이외에도 crop, format, quality, rotate 등등의 기능을 제공합니다. 이 기능을 잘 이용하면 사용자 올린 그림을 원하는 형식에 맞춰서 자동으로 변환되게 할 수 있습니다. 또한 사용자가 웹 상에서 업로드 할 이미지를 편집할 수 있는 기능을 제공할 수 있습니다.

Ink File Picker에서 간단하게 그림을 편집할 수 있다


식상한 파일 선택기는 그만

Ink File Picker는 전통적인 파일 선택기에서 벗어난 최신 트렌드에 맞게 여러 클라우드 서비스를 고려한 파일 선택기 입니다. 로컬 저장소보다 클라우드 저장소를 점점 더 많이 이용하게 되고 있는데, 이런 흐름에 맞춰서 파일 선택기를 Ink File Picker로 교체하면 많은 사람들에게 큰 인상을 주고 결과적으로 사용자 유입량을 늘릴 수 있지 않을까요? 저도 앞으로 콘텐츠가 주가 되는 사이트를 만들때 Ink File Picker를 이용해 볼 생각입니다. 괜찮을 것 같네요.