[Swift] ImageSet & ColorSet 구성 및 불러오기 방법 : + Hex Color

해당 글은 SwiftUI내에서 외부 이미지나 Custom Colorset 혹은 Hex Color로 구성하고자 할때 사용하는 방법에 대해서 공유합니다.

0) 개발 환경

---

구분	구분 종류	버전
언어	Swift	5.7.2
개발 환경	IOS	16.2
UI Interface	SwiftUI
개발 도구	XCode	14.2

 

1) 이미지 불러오기 : ImageSet

---

1. 최초 프로젝트를 생성하면 아래와 같은 폴더가 생깁니다.

---

 

[ 더 알아보기 ]

💡 Assets.xcassets 이란?

- Xcode에서 사용되는 이미지와 아이콘 등의 에셋(asset)을 관리하는 폴더입니다. iOS 및 macOS 앱에서 사용되는 이미지와 아이콘 등의 그래픽 자원을 추가하고 관리할 수 있습니다. 이 폴더를 사용하면 앱에 필요한 이미지 및 아이콘 등을 쉽게 추가하고 관리할 수 있고, 앱의 리소스를 좀 더 효율적으로 관리할 수 있습니다.

 

 

2. 플러스(+) 버튼을 누르면 메뉴가 나오고 “Image Set” 버튼을 누릅니다.

---

 

 

3. 생성된 파일에 이미지를 드래그앤 드랍을 합니다.

---

 

[더 알아보기]

💡 Assets 폴더의 1x, 2x, 3x의 의미

- Assets 폴더에서 1x, 2x, 3x는 이미지의 해상도 밀도를 나타내는 개념입니다. 1x : 기본 해상도 이미지 2x : 1.5배 해상도 이미지 3x : 2배 해상도 이미지이며, 같은 크기의 이미지라도 해상도 밀도에 따라 이미지 파일의 크기가 다를 수 있습니다. 이는 기기별로 디스플레이의 밀도가 다르기 때문입니다. 따라서, 각각의 해상도에 맞는 이미지를 사용하여 높은 해상도의 디바이스에서도 이미지가 깨지지 않도록 합니다.

💡 이미지 파일을 1x, 2x, 3x로 변환하는 방법

- https://www.appicon.co/#app-icon 사이트를 이용하여서 이미지 파일을 넣으면 각각의 파일로 생성해서 줍니다.

 

 

4. 불러올 **View로 이동하여서 + (Library) 버튼을 누릅니다.

---

 

 

5. 해당 이미지 이름을 입력하면 파일이 로드가 됩니다

---

 

 

 

[참고] 이미지 사이즈 조절 방법

---

 

Image("swift_icon").resizable().frame(width: 300, height: 150)

 

 

2) Swift UI 내에서 Custom Color Hex 지정 방법 : ColorSet, Hex Color

---

1. Assets에서 플러스(+) 버튼을 누르고 ‘Color Set’을 누릅니다.

---

 

 

2. 생성된 Color Set을 이름을 지정하고 Any Apperance를 누르고 Color 탭에 Input Method를 8-bit Hexadecimal로 선택합니다.

---

 

3. Hex 값을 변경하면 해당 값이 변경 됩니다

---

 

 

4. 소스코드 내에서 생성한 Hex Color를 로드해 왔습니다.

---

 

 

 

 

오늘도 감사합니다. 😀