[Web] Dropbox / Adobe Photoshop API로 이미지 배경 지우기

개발 번외 글을 작성하는 건 지극히 오랜만인 거 같네요.

 

이번 포스트에서는 현재 Beta로 제공되고 있는 Adobe Photoshop API를 이용해서 이미지의 배경을 지우는 간단한 방법에 대해 알아보도록 하겠습니다.

 

 

 

Adobe Photoshop API

https://github.com/AdobeDocs/photoshop-api-docs

AdobeDocs/photoshop-api-docs

Adobe API는 현재 공개 베타와 비공개 베타 두 가지로 나눠서 진행 중에 있으며 Photostop API의 경우 공개 베타로 진행되어 일반 유저들도 사용할 수 있도록 제공되어 있습니다. smartObject 등 5가지 API를 현재 제공하고 있으며 그 중에서도 cutout은 이미지 배경을 지워주는 아주 유용한 API입니다.

 

현재는 베타 서비스로 제공되어 있어 무료로 이용 가능하며 5,000번 횟수를 제공합니다. (실패 포함)

 

 

 

How to use

바로 본론으로가서 어떻게 사용하는지에 대해 알아보겠습니다. 먼저 API 사용을 위해 Adobe 계정과 Dropbox 계정 두 가지가 필요하며 Dropbox 계정이 없다면 AWS의 S3를 사용하셔도 무방합니다.

 

• Adobe 계정
• Dropbox or AWS S3

Adobe 계정은 API 사용을 위한 KEY 발급과 Client ID 발급을 위해 사용하며 Dropbox 혹은 S3는 이미지가 처리된 결과물을 보관하기 위해 사용합니다. 

 

따라서 순서는 먼저 Adobe 계정을 가입하고, 로그인 한 다음 API를 받고 난 후, Dropbox 계정을 만들고, Dropbox의 API를 이용하여 업로드 주소를 던지는 방식으로 진행합니다.

 

 

 

Adobe Developer API 생성

Adobe 계정을 생성하는 방법에 대해서는 생략하겠습니다.

 

https://console.adobe.io/

Loading... | Adobe Developer Console

Adobe I/O 홈페이지에서 로그인을 진행합니다. 그런 다음 콘솔로 들어가면 새 프로젝트를 만들 수 있는 부분이 나타납니다.

 

새 프로젝트를 만든 뒤에 API를 사용할 수 있으므로 Create new project 버튼을 클릭하여 새 프로젝트를 만들어줍니다.

 

그런 다음 Add an API를 클릭해 Adobe Photoshop API를 선택한 다음 Next를 클릭합니다. 

 

새로운 키를 만듭니다. 이 키는 여러분들이 API 호출할 때 넣는 키로 분실하면 사용할 수 없으므로 반드시 키를 만들고 쉽게 찾을 수 있는 곳에 보관해주세요.

 

키 생성이 완료되었다면 이렇게 keypair generated and downloaded 메시지가 나타납니다. save 버튼을 클릭하여 나가도록 합니다.

 

그러면 새 프로젝트가 만들어지고, API 생성이 완료됩니다.

 

 

 

API 사용을 위한 Access Token 발급

API 사용을 위해 아까 다운로드 받은 공개/개인키(config.zip) 파일의 압축을 풀어줍니다. 그러면 아래의 두 가지 파일이 생깁니다.

 

• certificate_pub.crt
• private.key

 

이 두 파일은 여러분들이 Adobe API를 사용하기 위한 개인정보이며 타인에게 누출되어서는 안됩니다. 현재는 베타 버전이기 때문에 사용 제한량에만 영향이 되므로 큰 문제가 없지만 차후 결제해서 사용하는 경우, 다른 사람이 무단으로 사용할 수 있는 위험성이 내재되어 있기 때문에 반드시 안전하고 찾기 쉬운 곳에 보관해주세요.

 

 

API 사용을 위해 Access Token을 만들어줍니다. Access Token은 API 호출시 누가 사용하는지를 확인하기 위한 암호화 값입니다. 

 

Generate access token에 위에서 다운로드 받은 private.key(개인키)의 파일 내용을 복사하여 붙여넣고, Generate Token 버튼을 클릭해줍니다.

 

위와 같이 Access Token이 만들어졌다면 성공적으로 진행된 것입니다.

 

 

 

Dropbox 

이번에는 Adobe API에서 처리받은 이미지를 저장하기 위해 Dropbox API를 이용하여 업로드 주소를 가져오는 방법에 대해 알아보겠습니다.

 

이 파트 역시 Dropbox 계정 생성에 대한 내용은 생략하겠습니다.

 

먼저 결과 파일을 저장하기 위한 폴더를 새로 만들어줍니다.

 

https://dropbox.github.io/dropbox-api-v2-explorer/#files_get_temporary_upload_link

Dropbox API Explorer

Dropbox에서는 API Explorer를 제공하여 Dropbox에서 제공하는 API를 바로 사용할 수 있는 웹 서비스를 제공합니다. 따라서 우리는 이를 이용하여 파일을 업로드 할 수 있는 링크를 만드는 데 아주 쉽게 사용할 수 있습니다.

 

 

먼저 Dropbox API를 사용하기 위해 Access Token을 받습니다. Get Token 버튼을 클릭하면 받을 수 있습니다. 

그런 다음, 아까 만든 폴더 이름의 경로를 path에 넣고 뒤에 파일 이름으로 cutout.png를 넣어줍니다. 예를 들면, 

/tistory/cutout.png

위와 같은 형태로 넣어준 다음, Submit Call 하면 업로드 할 수 있는 링크를 만들어줍니다.

 

 

 

Image Cutout

이제 모든 준비가 끝났습니다. Adobe API 사용 준비도 되었고, 결과물을 업로드할 링크도 마련해두었으니, 이제 배경을 지울 이미지를 넣고, API를 호출하면 됩니다.

 

우리가 사용할 이미지는 바로 이 강아지 이미지입니다. 이 이미지는 실제 Photoshop API 공식 문서에 제공되어 있는 이미지이며 이 외의 이미지를 사용하고자 하는 경우, 반드시 웹으로 접근이 가능한 이미지를 사용하거나 원하는 이미지를 사용하고자 하는 경우 반드시 Dropbox 등에 업로드 하신 후 공개 링크를 설정해주시기 바랍니다.

 

다음으로는 API 호출인데요. API를 호출하는 방법에는 curl, wget 등의 명령어를 이용하는 방법이 있습니다. 하지만 명령어 사용이 익숙하지 않으신 분들일면 아래의 두 가지 소프트웨어를 이용해 볼 수 도 있습니다.

 

• Postman
• Insomnia

이 포스트에서는 Insomnia 프로그램을 이용하여 Adobe API를 호출해보도록 하겠습니다.

 

https://insomnia.rest/download

Download

Insomnia는 위 홈페이지에서 다운로드 받을 수 있습니다.

 

설치가 끝났다면 좌측 상단에서 New Request를 클릭합니다. 

 

이름을 지정하고 메소드를 GET -> POST로 변경하고 No body -> JSON으로 변경한 다음 Create 버튼을 클릭합니다.

 

{
    "input": {
        "storage": "external",
        "href": "${실제 이미지가 보이는 주소}"
	},
    "output": {
        "storage": "dropbox",
        "href": "${Dropbox에서 받은 링크 주소}"
    }
}

JSON 밑쪽에 위와 같은 내용을 적어줍니다. (output은 반드시 dropbox로 적도록 합니다.)

 

이제 위에서 발급 받은 Access Token을 넣어줘야 합니다. Auth 버튼을 클릭한 후, Bearer Token을 클릭합니다.

 

TOKEN 란에 Access Token을 넣어주고 반드시 ENABLED에 체크 박스를 표시해줍니다.

 

마지막으로 Header에 가서 x-api-key를 입력하고 value에는 아까 Access Token을 발급 받은 화면에서 조금만 내리시면 Client ID 값이 있습니다. 그 값을 value에 넣어주시면 됩니다.

 

마지막으로 Send 버튼을 클릭해서 API를 호출하면 오른쪽과 같이 202 Accepted가 나타나면 성공입니다.

 

그럼 이렇게 cutout.png 파일이 나타납니다. 

 

눌러보면 이렇게 배경이 깔끔하게 없어졌음을 알 수 있습니다.

 

 

 

 

202 Accepted는 잘 나타났으나 파일이 만들어지지 않은 경우..

기본적으로 Key나 파일 경로가 잘못되었을 경우 400 Bad Request가 나타나지만 202 Accepted가 나타났음에도 불구하고 파일이 만들어지지 않은 경우는 202 Accepted 상태와 같이 받은 link-self-href 주소를 실행하여 진행 상황을 볼 수 있습니다.

 

이 주소를 호출할 때는 위에서 진행했던 Access Token과 x-api-key를 똑같이 넣어줘야 하며 넣지 않을 경우 400 Bad Request가 발생하기 때문에 반드시 입력 후 진행해주시기 바랍니다.

 

성공적으로 잘 되었다면 status가 succeeded로 표시되며 그렇지 않은 경우 failed로 표시됩니다.

 

 

 

마치며...

막상 적어보니 개발 글보다 훨씬 긴 글인거 같네요. API 호출하는 게 큰 일은 아니지만 하나하나 일일이 적어나아가는 과정은 평소 작성하던 개발 글보다 더 긴 시간이 소모되는 거 같습니다.

 

Adobe Photoshop API는 평상 자주 사용하는 이미지 작업을 API 호출만을 이용해 한 번에 작업할 수 있도록 해줌으로써 굉장히 편리함을 느꼈고, 특히 이미지 딥러닝을 하시는 분들께서 자주 사용하는 전처리 중에서도 복잡한 작업이 요구되는 전처리에 있어서 굉장히 유용하다고 느꼈습니다.

 

다만 저 Cutout API는 100% 완벽하지만은 않습니다. 일부 사람 이미지를 이용하였을 때 미세한 색깔들은 배경에서 벗어나지 못하는 문제가 있었고, 안경을 쓴 사람의 경우 안경테까지 삭제되는 어마무시한 현상이 있어, 미세한 배경을 제거하는 데 있어서는 조금 주의가 필요합니다.