간편단어장, 앱 아이콘 만들기

 

 

티스토리 태그를 자동으로 추가해주는 방법이 없나...

 

---

 

앱 개발을 하다보면 모든 것들을 문서화한다는 것이 매우 어려운 일이라는 것을 느낀다.

당장 이런 간단한 앱을 만드는 것도 모든 기능 요소나 고민했던 것들을 적어놓지 않다보니

의미있는 고민들이 흘러가버린 경우가 많다.

 

각설하고 오늘은 내가 만들고 있는 단어장의 앱 아이콘을 어떻게 만들었는지 공유하려고 한다.

(프로젝트를 5번 넘게 진행했는데 한번도 앱 아이콘을 만들어 본 적이 없다니...

나의 소극적인 호기심에 반성을 한다 :( )

 

 

 

앱 아이콘 만들기

 

여러 블로그를 돌아다닌 결과 앱 아이콘을 만드는 방법은 매우 간단했다.

 

1. 앱 아이콘의 주제를 정한다. 
2. 디자인 툴로 앱 아이콘을 만든다.
3. 앱 아이콘을 기기별로 다양한 크기를 만든다.
4. 프로젝트 Asset에 추가해준다

 

첫번째, 앱 아이콘의 주제를 정한다. 

먼저 앱 아이콘의 주제는 당연히 '단어장'이다.

패스.

 

 

 

두번째, 디자인 툴로 앱 아이콘을 만든다.

피그마를 사용하자. Figma 최고 

(Sketch를 사용하던 적이 있는데 안쓰다보니 피그마가 훨씬 편해졌다. 요즘 피그마 많이 쓴다고 하니 피그마 쓰자)

 

우선, 1024 *1024 프레임을 만든다. 이렇게 하는 이유는 후에 설명하겠다.

(그림이 왜 이렇게 크게 나오는거지... )

 

 

 

배경을 정해야 하는데, 배경이 투명하면 안된다.

이는 HIG라고 Human Interface Guidelines에도 나와있는 사항인데

테두리를 추가하지 말라는 등의 권고사항이 있다.

자세한 내용은 아래의 링크에서 확인해보자.

 

 

https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons

App Icons - Foundations - Human Interface Guidelines - Design - Apple Developer

 

 

 

아무튼 다음과 같이 배경색을 정해줬다.

'64EAF2' 이 언저리의 색상을 무척 좋아하는데

혼자 개발하는 앱이니까 자기가 좋아하는 색상으로 하면 좋을 듯 하다.

 

 

 

피그마의 여러 기능 중 그라데이션을 활용했는데,

다음과 같이 지정하면 배경에 그라데이션을 넣을 수 있다.

 

 

 

 

이후에 아이콘을 넣는 것은 SF symbols를 활용하거나,

피그마의 커뮤니티에서 'app icon'이라고 검색을 하면 여러 개의 심볼들이 나오는데 

나는 그중에서 아래의 심볼을 사용했다.

 

 

 

아이콘 완성!!

이 아니라 이제 2단계가 더 남았다

(앱 아이콘은 테두리가 둥글던데? 라고 생각하시는 분들이 있을텐데

자동으로 테두리가 둥글게 변하니까 걱정안해도 된다 :) )

 

 

 

세번째, 앱 아이콘을 기기별로 다양한 크기를 만든다.

이제 앱 아이콘을 사이즈별로 다양한 크기의 이미지를 만들어줘야 하는데

언제 수많은 이미지를 만들어...

(물론 그렇게 오래 걸리지는 않는다)

 

 

 

그래서 구글링을 해본 결과

아래의 사이트에서 간편하게 앱 아이콘을 사이즈별로 대응할 수 있었다.

https://www.appicon.co

App Icon Generator

 

 

 

위 사이트를 사용하기 위해서는 피그마에서 작업한 아이콘 이미지를 다운 받아야 한다.

다운 받는 방법은 만든 아이콘을 클릭하면 우측 하단에 Export라고 해서

이미지를 내보낼 수 있는 버튼이 생긴다.

(밑에 프리뷰 토글 버튼을 통해 이미지가 어떻게 생성되는지 볼 수 있다)

 

 

이 버튼을 클릭해 이미지를 다운 받자

 

 

 

후에 지원하려는 OS를 체크해주고 파일을 올려주면 알아서 사이즈별로 만들어 준다

여기서!

왜 우리가 1024 * 1024의 이미지로 만들었는지 나온다.

바로 아래의 웹사이트에서 요구하는 이미지의 크기이기 때문이다.

(뭐 별다른 이유는 아니었지만 혹시 검색해본 분들 다른 이유가 있다면 댓글을 남겨주시길...)

 

 

따로 이름을 변경하지 않았다면 AppIcons 라는 압축파일이 생긴다.

압축 해제를 하면 같은 이름의 디렉토리가 생기는데 내부는 다음과 같다.

 

 

 

Assets.xcasssets라는 파일 내부에 있는 파일들을 프로젝트 내부의 Asset으로 옮겨주면

 

 

진짜 앱 아이콘 만들기 끝!!!!

 

다음 글은 스토리보드 없이 UI작업을 하기 위한 준비과정이다.

UIKit으로 CodeBase로 작업할 예정이다.