[react native] AppIcon, splashScreen - 1부 이미지 만들기

개요

AppIcon과 SplashScreen 이미지 부터 ReactNative에 적용하기까지의 과정을 작성했다. 

1 부에서는 이미지를 만드는 방법, 2부에서는 아이콘 적용 방법, 3부에서는 SplashScreen 적용 방법을 작성 할 예정이다.

 

설치

App Icon을 만들기 위해 아래사이트와 Figma라는 툴을 사용 할 예정이다. 

 

안드로이드 아이콘 생성 사이트

Android Asset Studio - Launcher icon generator

IOS 아이콘 생성 사이트

 

App Icon Generator

Figma

Figma: the collaborative interface design tool.

 

 

Figma라는 디자인 툴을 사용 할 건데 엄청 간단한 앱 아이콘을 만들어 볼 것이기 때문에 Figma 툴에 대한 지식은 필요 없습니다.

Figma 사이트에 접속해서 프로그램을 다운받거나 웹 내에서 클라우드로 서비스를 이용 할 수 있습니다.

 

회원 가입을 진행한 후에 아래 사진과 같이 Drafts -> Desing file을 클릭해줍니다.

0

 

아이콘 제작하는 방법을 찾다보니 아이콘을 제작을 잘 설명해주는 사이트가 있어 아래를 따라해 진행하겠습니다.

아래 주소는 포토샵을 사용하지만 저는 Figma로 따라해보겠습니다.

 

[포토샵강좌] 3강 앱아이콘 제작하기 - 오쌤의 니가스터디

 

Untitled 라는 이름을 가진 환경이 설정이 되는데, 키보드 R을 눌러 아래와 같이 사각형 그리거나 좌측 상단에 사각형 아이콘을 눌러 아래와 같이 생성해줍니다. 이때 사각형의 크기는 1024 * 1024로 그려줍니다. 

 

구글에 토끼 아이콘을 검색하여 적당한 이미지를 드래그해 넣어주었습니다. 

원도 넣어주기 위해 원도형을 그려준 후에 오른쪽 Fill 탭에서 색상을 제거하고 Storke 탭에 아래사진 처럼 값을 추가해줬습니다.

전부 드래그 하여 선택한 후 command + g 를 눌러줍니다. 혹은 아래 사진처럼 오른쪽 클릭하여 Group selection을 선택해줍니다.

전체 그룹이 되었다면 우측 아래에 Export 탭에서 + 를 눌러 jpg로 사진을 내보내줍니다.

 

 

아이콘이 생성이 되었다면, 위에서 작성된 IOS 아이콘 생성 사이트, 안드로이드 아이콘 생성 사이트 에 접속해 아래 사진과 같이 첨부하여 앱 아이콘을 생성해줍니다. Android의 경우 Shape 옵션을 변경하여 Squre, Circle 모두 다운받아줍니다.

 

 

알집 파일을 받은 후에 압축을 해제해줍니다.

압축을 해제하면 iOS는 크기별로, Android는 해상도별로 제작했던 아이콘이 있음을 볼 수 있습니다. 

 

 

앱 아이콘이 잘 생성이 되었다면 다시 Figma로 돌아와 SplashImage를 만들어봅시다.

키보드 R을 눌러 1280 * 1920의 크기의 사각형을 만들어줍니다.

그런 다음 만들었던 앱 아이콘을 복사해 내부에 넣어주고 크기를 512*512로 변경하였습니다.

 

이제 좌측 Layers 탭에서 AppScreen을 선택 또는 Frame1을 선택하여 앱 아이콘과 마찬가지로 Export를 눌러 이미지로 내보내줍니다.

 

이제 이 앱 아이콘과 SplashImage을 넣어주면 됩니다. react native에서 아이콘을 넣는 방법은 다음 글에서 진행하겠습니다.

감사합니다.

Figma