이미지 사이즈 변환 편하게 하자! 설치없음. 모든 플랫폼.

이번 포스팅은 앱을 개발하는 앱 개발자들과 디자이너들에게 유용할 듯 합니다.

보통 앱을 개발하다보면 다양한 사이즈의 이미지가 필요합니다. 디자이너에게 흔히 1024x1024 로 만들어주시면 제가 알아서 리사이징 해서 사용할께요. 정도 되면 이미 준 디자인너가 아닐까. 아니면 디자이너에게 iOS 용으로 해 주세요. Android 용으로 해 주세요. 등등의 부탁을 하면된다.

하지만, 디자이너 없이 혼자서 개발하다 보면 인터넷 이미지 사이트에서 이미지를 가져오거나 구글에서 검색해서 쓸만한거 골라서 복사해 오거나 유료 이미지를 구입하는 방법 등등 다양할 것이다.

디자이너들도 사실 개발자들이 무슨무슨 사이즈 주세요. 하면... 겉으로는 웃지만 속으로는 "이미지 사이즈 변환하는거 그것도 모르냐? 좀 있는거 변환해서 필요한 사이즈 만들어 써라~~" 정도로 말하고는 하죠.

이제 이글을 보시고 편하게 이미지 사이즈 해서 그냥 인터넷 주소주고 알아서 사용하라고 해 보시는 것도 좋을 듯 하네요. 어차피 이미지가 디자인 원본이 중요하지요. 비트맵으로 리사이징 되어서 앱에 탑재되는거야 뭐 이렇게 주면 어떻고 저렇게 주면 어떻고 뭐가 중요하겠습니까.

여기서 설명 드리는 방법 한번 사용해 보시기 바랍니다.

1. appres.org 사이트 방문

https://appres.org 사이트를 방문하세요. 다음 캡춰처럼 아주 조용한 사이트 입니다. 오른쪽 상단에 [한국어] 를 선택하면 한국어가 제공됩니다. 아직 베타 버전 마크가 있는것 보니 한참 개발 중인가 봅니다. 그래도 사이트 동작은 99% 다 하는 듯 합니다.

가입? 요즘 소셜 계정 없으신분 없으시겠죠. 저는 TWITTER 로그인 버튼으로 로그인해서 작업해 보겠습니다. 여기까진 별로 어려울것도 없고 특별히 설명 드릴것도 없네요.

SNS 로그인이 싫으시다면 그 아래에 있는 "계정 생성" 을 클릭하여 이메일 주소 하나 넣고 계정 생성을 한 후 [로그인] 하시면 됩니다.

 

2. 프로젝트 생성

일단 이렇게 로그인 하면 다음과 같은 화면이 나옵니다.

appres.org 프로젝트

여기서 중앙 상단쯤 (목록: 이라는 곳에서 오른쪽 가운데로 보면) [+] 아이콘이 있습니다. 상세: 바로 왼쪽에 있습니다. 이걸 클릭하여 프로젝트 하나를 생성합니다.

프로젝트 이름을 대충 그냥 "나의 이미지 작업" 으로 하겠습니다. 특이하게 한글 이름도 먹는군요. 안될줄 알았는데 됩니다.

등록한 나의 이미지 작업

 

프로젝트를 생성하면 프로젝트가 등록되며 오른쪽 상세란에 몇가지 키 들이 보입니다. 그래도 모르니 값들의 뒷쪽은 흰색으로 브라인드 처리를 했습니다.

프로젝트 목록의 아이콘 중에서 폴더 모양의 아이콘을 클릭하면 프로젝트 작업창으로 전환됩니다.

"나의 이미지 작업" 프로젝트

여기에서 "아이콘" 탭을 선택합니다.

저는 여기서 열쇠 이미지를 하나 만들어 보겠습니다. 요즘 만들려고 하는 앱에 열쇠 이미지가 필요하기 때문입니다. 이미 셔터스톡에서 받은 유료 이미지가 있어서 그걸 등록하고 사이즈별로 만들어 볼 생각입니다.

원본 이미지는 대략 이렇게 생겼습니다. 크기는 256 픽셀 정도의 이미지 입니다.

locked.png

unlocked.png

 

3. 프로젝트에 아이콘 혹은 이미지 등록

프로젝트 작업에서 오른쪽 상단에 보시면 [+] 아이콘 버튼을 클릭합니다.

업로드 창

이렇게 업로드 창이 나옵니다. 여기서 [Choose Files] 버튼을 클릭하여 준비된 이미지를 선택하면 됩니다. 혹은 파일을 끌어다놓기로 하여 업로드가 가능합니다. 클립보드에 이미지 데이터가 있는 경우 간편하게 Ctrl+V 를 이용하여 업로드도 가능합니다. 설명이 필요 없을 정도로 간단하니까 자세한 설명은 여기서 패~~스~~ 합니다.

저는 파일 2개를 끌어다 놓기하여 업로드 하였습니다.

파일 2개를 끌어다놓기 하여 업로드 완료

 

4. 이미지를 리사이즈하여 CDN 에 등록

헐 ~~~ 편합니다. 그냥 디자이너들에게 엄청 편할 듯 합니다.

원하는 이미지의 오른쪽 끝에 보시면 디스크가 3개 쌓아져 있는 아이콘이 있습니다. CDN 스토리지를 뜻하는 것 같습니다. 이걸 클릭 하십시오.

다음과 같은 창이 나옵니다. 저는 32 픽셀짜리 iOS 용 아이콘을 만들어야 해서 다음과 같이 입력하였습니다.

32 픽셀짜리 iOS 용 이미지 CDN 보내기

이미지 크기에 32 를 입력, 리소스 대상을 iOS 선택, 파일 버전은 그냥 0, 파일 버전을 변경하면 CDN 에 등록되는 파일 이름에 버전 정보가 자동으로 포함되어 등록됩니다.

오른쪽의 Cache-Control 및 max-age 는 CDN 의 캐시 정책 설정인듯 합니다. 이 내용은 기술적인 내용이라 여기서는 패~~스~~ 하고 디폴트로 있는 값 유지 하겠습니다.

오른쪽 아래에 [보내기] 버튼을 클릭하면 크기 변환후 CDN 에 등록되고나서 결과 란에 내용이 표시됩니다.

[클립 보드에 복사] 기능은 이 결과의 텍스트들을 클립보드에 복사해 주는 기능입니다. 전달하고 싶은 담당자에게 메신저나 이메일을 이용해서 보내시면 되실 듯 합니다.

공개 URL : https://cdn.appres.org/premium/cfdd159f0addf6f8920db94a2541976984fe5953/icons/ios/locked@2x.png
파일 크기 : 1.79 KB
파일 MD5 : GqvM/zrie2xdFmJOtGTvRQ==
파일 CRC32 : NGqdZw==

공개 URL : https://cdn.appres.org/premium/cfdd159f0addf6f8920db94a2541976984fe5953/icons/ios/locked.png
파일 크기 : 821 B
파일 MD5 : JaLkzxFAq5hTyuKJ1neLOg==
파일 CRC32 : 9AmnjA==

공개 URL : https://cdn.appres.org/premium/cfdd159f0addf6f8920db94a2541976984fe5953/icons/ios/locked@3x.png
파일 크기 : 2.85 KB
파일 MD5 : B5X7jbujofhAcdevbvj7mA==
파일 CRC32 : xlHGpQ==

 

다음의 개발자 지원 사이트를 확인해 보시면 CDN 은 구글에서 제공하며 전세계 리젼을 커버하며 구글의 로드 밸런싱이 포함되어 있기 때문에 빠른 속도와 안정성을 보장한다고 합니다.

https://appres.dev 

이제 결과에 기록된 공개 URL 주소를 이용하여 이미지를 다운로드 받으시면 원하는 이미지의 사이즈를 즉시 받으실 수 있습니다.

터미널창에서 wget 으로 변환된 이미지 다운로드

 

5. 결론

이쯤되니... 저는 이미지를 다운로드 받지않고 앱에서 해당 CDN 주소를 이용하여 앱 구동시 리소스를 받도록 해 보는것을 시도해 보면 좋겠다는 생각도 듭니다.

APPRES 의 목표가 앱 혹은 웹을 배포한 후 리소스를 바꿀 필요가 있을때 앱과 웹을 새로 배포하지 않고 그냥 appres.org 에 등록된 프로젝트의 변경으로만 배포된 앱과 웹의 유지보수가 가능하다는데 있다고 합니다.

한번쯤 사용해 보시면 좋겠습니다.