이미지 사이즈 변환 편하게 하자! 2탄~ npm 모듈을 이용

이전 포스팅에 이어서 이번에는 npm 패키지를 이용하여 appres.org 에 있는 자신의 프로젝트로부터 이미지를 다운로드 받는 방법 및 여러가지 다양한 이미지 변환 방법에 대하여 다뤄보고자 합니다.

따라서, 이번 포스팅은 이전 포스팅에서 다뤘던 부분은 생략하기 때문에 가급적 이전 포스팅을 먼저 살펴 보시면 좋겠습니다.

이전 포스팅 : indienote.tistory.com/579

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

또한, 이번 포스팅은 npm 패키지를 이용합니다. npm 은 따로 설명하지 않아도 될 정도의 기술이므로 여기서 별도로 설명을 드리지는 않고 기회가 되면 npm 관련 포스팅을 따로 마련해 보도록 하겠습니다.

참고로 npm 에 관련된 내용은 다음의 포스팅이 매우 간략하고 핵심만 있는듯 싶어서 참고 하시면 좋을 듯 합니다.

NPM 설치관련 포스팅 : hello-bryan.tistory.com/95

Node js, NPM 설치하기 (윈도우10)

 

앞선 포스팅된 글들을 확인하셨고 Node JS, NPM 까지 설치가 완료 되셨다면 이번 포스팅의 설명을 시작하도록 하겠습니다.

기초적인 참고사항으로써,

이전 포스팅은 CDN 을 통해서 변환된 아이콘 이미지를 배포하는 방식인 반면,

이번 포스팅은 npm 패키지를 이용하여 CLI (Command Line Interface) 명령으로 자신의 appres.org 계정 프로젝트를 연결하는 방법 및 변환된 아이콘 이미지를 다운로드 받는 방법 입니다.

 

1. appres.org 에 프로젝트 생성 및 아이콘 이미지 업로드

이전 포스팅에서 appres.org 에서 프로젝트를 하나 만들었습니다. 프로젝트 이름은 "나의 이미지 작업" 이었습니다. 또한, 해당 프로젝트에 "locked.png" 와 "unlocked.png" 라는 2개의 이미지 파일을 아이콘 탭에 업로드하여 등록하였습니다.

다음의 캡춰를 참고 바랄께요.

"나의 이미지 작업" 프로젝트의 아이콘 탭에 업로드한 2개의 png 파일

 

2. appres npm 패키지 설치

appres 관련 npm 패키지를 설치하기 위해서 컴퓨터에 Node JS 및 npm 이 설치되어 있어야만 합니다. Node JS 및 npm 설치는 별도의 포스팅을 참고 바라겠습니다.

appres npm 패키지를 설치하기 위해서 도스 창 혹은 터미널 창에서 다음과 같은 NPM CLI 명령으로 설치할 수 있습니다. 주의할 사항은 해당 설치자의 계정이 관리자 계정이 아닌경우 시스템의 관리자 권한이 있어야만 설치가 가능할 수 있습니다.

만약 관리자 계정이 없는 계정에서 설치한다면 윈도우즈에서는 도스창을 관리자 권한으로 실행한 후 설치하시고 OSX 혹은 리눅스에서는 sudo 기능으로 설치 하시면 됩니다.

관리자 권한으로 열린 도스 창 (Windows)
C:\>npm install appres -g

터미널 창 (OS X, Linux)
$ sudo npm install appres -g

다음의 화면 캡춰는 OSX 의 터미널에서 appres 패키지를 설치 및 버전 정보를 확인하는 절차의 캡춰 입니다.

OSX 터미널에서 appres 패키지 설치 및 설치 후 버전정보 확인

위와같이 appres -v 가 실행되고 결과가 화면에 표시된다면 지금까지의 npm 패키지의 설치 과정은 완료된 것입니다.

이제 설치된 npm 패키지의 appres 명령은 관리자 권한이 아닌 본인 계정의 권한으로 실행하면 됩니다.

 

3. 임의의 폴더를 만들어서 appres 계정 및 프로젝트 연결

원하는 이름과 패스에 임의의 폴더 하나를 만들어서 해당 폴더를 appres 계정의 프로젝트에 연결하는 방법을 설명 드립니다. 이렇게 폴더를 연결하는 이유는 해당 폴더안에서 appres 명령으로 다양한 작업을 할 때 입력할 때마다 계정 및 프로젝트 정보를 다시 입력하지 않도록 하기 위해서 입니다.

만약, 해당 폴더가 자신이 관리하지 않는 폴더이면 이 내용을 건너 뛰시고 appres 명령을 수행할 때마다 --pkey 와 --akey 를 함께 입력하여 수행 할 수도 있다는점 기억해 두시기 바랍니다.

appres.org 에 만든 프로젝트를 선택하면 오른쪽에 상세 정보가 표시됩니다. 여기에서 우리는 PKEY 와 AKEY 를 복사하여 사용하게 됩니다. UKEY 는 직접적으로 사용할 일이 없습니다.

appres.org 프로젝트의 상세정보

자신이 등록한 프로젝트의 상세 정보를 입력하여 다음과 같은 형식의 명령으로 폴더를 appres 계정 및 프로젝트에 연결할 수 있습니다.

$ appres init --pkey l2RYwCuVmLobRcvpAR2i --akey a036d901-2037-46d2-adb9-6c25cd255c9a

작업 폴더안에서 appres 명령으로 appres.org 에 등록된 프로젝트와 연결하는 과정

이렇게 appres init 를 수행하면 해당 pkey 와 akey 를 이용하여 appres.json 파일이 생성됩니다. 참고로 appres.json 파일의 보다 상세적인 내용은 차후 별도로 포스팅 하도록 하겠습니다.

 

4. 이미지 사이즈 변환하여 다운로드

지금까지 일련의 과정은 귀하의 컴퓨터에 appres npm 패키지를 설치하고 appres 를 작업할 폴더를 만들어 폴더를 귀하의 appres.org 계정에 등록된 프로젝트와 연결하는 작업이 진행 되었습니다.

이제 해당 폴더 안에서 appres 의 다양한 명령으로 appres.org 의 귀하의 해당 프로젝트에서 데이터를 내려 받을 수 있습니다.

우선 locked.png 파일을 32 픽셀짜리 iOS 용 아이콘 이미지로 다운로드 받는것을 해 보겠습니다.

$ appres icon --file locked.png --target ios --size 32

이렇게 하면 appres.org 에 업로드 해 둔 locked.png 파일을 32 픽셀짜리 iOS 용 이미지 파일들이 다운로드 됩니다.

appres.org 에 등록한 locked.png 를 32 픽셀 사이즈의 iOS 용 이미지 다운로드

다음은 안드로이드용 이미지들을 다운로드 받아 보겠습니다.

appres.org 에 등록한 locked.png 를 32 픽셀 사이즈의 Android 용 이미지 다운로드

안드로이드용은 기본적으로 mipmap 로 시작되는 폴더들을 만들어 그 안에 맞는 사이즈의 이미지 파일들을 다운로드 합니다. 아마도 안드로이드를 개발해 보시는 개발자들께서는 내용을 잘 아실 겁니다.

위의 작업들이 수행된 폴더를 탐색기로 확인해 보면 다음과 같은 파일들이 존재하게 될 겁니다.

위의 명령으로 iOS 및 Android 용 이미지들을 다운로드 받은 경우의 모습

이렇듯 appres.org 에 하나의 원본 아이콘 이미지를 업로드 해 놓고 각 상황에 맞춰서 이미지를 변환하여 다운로드 받을 수 있습니다.

이미지의 리사이즈 뿐만 아니라 이미지에 다양한 가공을 하여 다운로드 할 수 도 있기 때문에 매우 편리합니다.

 

5. npmjs.com

이미지의 리사이즈 이외의 기능들은 다음의 npmjs.com 사이트에서 확인해 보실 수 있으며 지속적으로 npm appres 패키지가 업데이트 되기 때문에 해당 npmjs.com 사이트를 확인 하시면 좋겠습니다.

npmjs.com 에서 appres 검색

 

다음은 npmjs.com 에 등록되어 있는 appres icon 관련 명령들의 설명입니다. icon 뿐 아니라 더 다양한 항목들의 기능들이 수록되어 있으니 참조하시기 바랍니다.

www.npmjs.com/package/appres

appres

=================================
### icon : save to local file ###
=================================

- Usage
  $ appres icon --file {icon filename}

- Example
  $ appres icon --file sample.png

- Result
  Save : sample.png

- Hint
  If successful, You can find sample.png in your working directory.


==============================================
### icon : save to local another file name ###
==============================================

- Usage
  $ appres icon --file {icon filename} --save {save filename}

- Example
  $ appres icon --file sample.png --save another.png

- Result
  Save : another.png

- Hint
  If successful, You can find another.png in your working directory.


=====================
### icon : resize ###
=====================

- Usage
  $ appres icon --file sample.png --save [--size {size}] [--width {width}] [--height {height}] [--scale {scale}]

- Example
  $ appres icon --file sample.png --save --size 120
  $ appres icon --file sample.png --save --width 120
  $ appres icon --file sample.png --save --height 120
  $ appres icon --file sample.png --save --width 120 --height 120
  $ appres icon --file sample.png --save --scale 2
  $ appres icon --file sample.png --save --width 120 --height 120 --scale 1.2

- Hint
  --size      : Set same size to icon width and height
  --width     : Set to icon width
  --height    : Set to icon height
  --scale     : Set to icon scale

  If do not use size options, The icon size will be original dimension.
  If use only width, The icon height will be same ratio as width.
  If use only height, The icon width will be same ratio as height.
  If use width and height, The icon size will your fix.
  If use width and height, The icon size will be your fixed values.
  If use scale, The icon size is a multiple of the scale.



============================
### icon : image effects ###
============================

- Usage
  $ appres icon --file sample.png --save --{effect} [--effect value] ... [--effect]

- Effect Examples

  --crop
  $ appres icon --file sample.png --save --crop

  --rotate
  $ appres icon --file sample.png --save --rotate 90
    range : -360 ~ 360

  --mirror
  $ appres icon --file sample.png --save --mirror

  --flip
  $ appres icon --file sample.png --save --flip

  --grayscale
  $ appres icon --file sample.png --save --grayscale

  --sepia
  $ appres icon --file sample.png --save --sepia

  --contrast
  $ appres icon --file sample.png --save --contrast 0.2
    default value : 0.2 , range : -1.0 ~ 1.0

  --brightness
  $ appres icon --file sample.png --save --brightness 0.2
    default value : 0.2 , range : -1.0 ~ 1.0

  --blur
  $ appres icon --file sample.png --save --blur 5
    default value : 5 , range : 1 ~

  --gaussian
  $ appres icon --file sample.png --save --gaussian 1
    default value : 1 , range : 1 ~

  --opacity
  $ appres icon --file sample.png --save --opacity 0.5
    default value : 0.5 , range : 0.0 ~ 1.0

  --invert
  $ appres icon --file sample.png --save --invert


- Hint
  You can use multiple effects in combination.



====================================================
### icon : overlay (use for alpha channel image) ###
====================================================

- Usage
  $ appres icon --file sample.png --save --overlay {color}

- Example
  $ appres icon --file sample.png --save --overlay white
  $ appres icon --file sample.png --save --overlay 0xFF0000
  $ appres icon --file sample.png --save --overlay 0xFF0000FF
  $ appres icon --file sample.png --save --overlay "#F00"
  $ appres icon --file sample.png --save --overlay "#FF0000"
  $ appres icon --file sample.png --save --overlay "#F00F"
  $ appres icon --file sample.png --save --overlay "#FF0000FF"


- Hint
  This option is available for images that contain transparent channels.
  Converts non-transparent pixels in an image to the color value.
  No effect for non-transparent image.
  See the description of the color representation for color values.



=======================================================
### icon : background (use for alpha channel image) ###
=======================================================

- Usage
  $ appres icon --file sample.png --save --background {color}

- Example
  $ appres icon --file sample.png --save --background white
  $ appres icon --file sample.png --save --background 0xFF0000
  $ appres icon --file sample.png --save --background 0xFF0000FF
  $ appres icon --file sample.png --save --background "#F00"
  $ appres icon --file sample.png --save --background "#FF0000"
  $ appres icon --file sample.png --save --background "#F00F"
  $ appres icon --file sample.png --save --background "#FF0000FF"


- Hint
  This option is available for images that contain transparent channels.
  Converts transparent pixels in an image to the color value.
  No effect for non-transparent image.
  See the description of the color representation for color values.



=============================
### icon : save directory ###
=============================

- Usage
  $ appres icon --file sample.png --save --dir {save directory path}

- Example
  $ appres icon --file sample.png --save --dir icons
  $ appres icon --file sample.png --save --dir app/src/main/res
  $ appres icon --file sample.png --save --dir /Users/me/dev/app/resource

- Hint
  The directory with the dir option can be either absolute or relative.
  By default, the location of the saved file is the current working directory. The dir option allows you to specify where it is stored.



=================================
### icon : predefined target  ###
=================================

- Usage
  $ appres icon --file sample.png --save --target {target name} [--type {resource type}]

- Example
  $ appres icon --file sample.png --save --target android --dir app/src/main/res --type mipmap
  $ appres icon --file sample.png --save --target ios --dir app/assets/icons

- Hint
  If target is android, you can use it with type. type is something like mipmap or drawable.

  Some development platforms require several standard sized image resources.

  android
  ['', 'ldpi', 'mdpi', 'tvdpi', 'hdpi', 'xhdpi', 'xxhdpi', 'xxxhdpi'];

  ios
  ['', '@2x', '@3x'];



====================================
### icon : open after local save ###
====================================

- Usage
  $ appres icon --file sample.png --open [{app name}]

- Example
  $ appres icon --file sample.png --open
  $ appres icon --file sample.png --open 'google chrome'

 

향후 appres 의 가능한 모든 기능들을 별도로 설명하는 포스팅을 하도록 할 예정입니다.

 

6. github.com

github.com/smartdisk/appres

smartdisk/appres

appres 관련 패키지들은 github 레파지토리에 등록되어있으며 오픈되어 있습니다. 관심 있으신분들은 위의 github 를 방문해 보시면 좋겠습니다.