[24일차] [LED 전광판 앱] 에셋 카탈로그를 이용하여 꾸며보기

어제 부로 UI 구현이 다 끝난 줄 알았는데...! 오늘 강의 내용을 보니 아직 하나 더 남은 것 같다... 아이고..

추가할 UI는 뭐 그렇게 대단한건 아니고 설정 화면을 이미지 파일을 활용해서 꾸며주려고 한다.

실제 서비스를 위한 앱 또는 웹 사이트를 개발하게되면, 아주 많은 양의 에셋 파일(이미지, 소리, 영상, 폰트 등)들을 활용하게 되는데, 아주 간단한 형태의 JSP 웹 사이트를 개발할 때에도 프로젝트 홈 디렉토리에 "assets"라고 하는 디렉토리를 따로 만들어서 관리하게 된다.

 

Xcode에서 앱 개발을 할 때에도 똑같이 에셋 파일을 관리하는 공간을 두게 된다. 사실 이미 만들어져 있을 것이다.

프로젝트 폴더 내에 Assets 또는 Assets.xcassets라고 하는 것을 찾을 수 있는데, 앞으로 앱에서 활용할 에셋 파일들은 여기에 두면 된다.

 

자, 그럼 설정 화면에서 전광판의 배경을 설정하는 버튼의 외형부터 해당 색상의 이미지 파일로 대체해보자.

나는 강의에서 제공하는 이미지 파일셋을 활용했다. (첨부파일로 해당 이미지 파일셋을 올려두겠다.)

에셋 카탈로그에 이미지를 추가하는 방법은 다음과 같다.

Assets 선택 -> 하단 + 버튼 -> Image Set 선택

images.zip

0.04MB

 

그러면 이런식으로 1, 2, 3배율의 이미지를 등록하는 화면을 볼 수 있다.

이건 화면의 상태에 따라 표시되는 에셋의 해상도 때문에 이미지가 깨질 수 있는 문제를 방지하기 위해 각 배율의 이미지를 등록하는 것이다.

일단 해당 이미지셋의 이름을 blue_circle로 변경하고 이미지를 등록해주자.

같은 방식으로 나머지 색상의 원들도 다 추가해주자.

그럼 이렇게 에셋 파일들이 준비된다. 다시 메인 스토리보드로 돌아가보자.

여기서 색상에 관련된 버튼들은 모두 변경해줄건데, 이번에도 방법은 어렵지 않다.

• 버튼 선택
• 인스펙터의 5번째 탭 메뉴 -> 타이틀 "노란색"을 지워준다
• Image에 에셋 카탈로그에 등록돼있는 이미지를 등록해준다.

이미지를 등록할 때 우리가 등록해둔 에셋을 이렇게 예쁘게 보여주므로, 마우스로 선택해줘도 된다.

그럼 이렇게 하나의 버튼이 등록된 에셋 파일의 외형으로 잘 바뀌는 것을 볼 수 있다!

나머지도 전부 변경해주자.

확실히 일반 버튼일 때보다 사용자 입장에서 더욱 직관적으로 바뀐 것을 확인할 수 있다!

 

 

 

패스트캠퍼스 바로가기 : http://bit.ly/3Y34pE0

> 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.