5.3 Storyboard 파일의 편집

이번 장에서는 스토리보드 파일을 드디어 건드려 본다.

Main.Storyboard 파일을 열어 본다.

아이북스는 오른쪽에 예제 영상을 볼 수 있다. 영어를 못해도 옆에 동영상을 보면 알 수 있어서 편리하다.

Xcode 오른쪽 유틸리티 영역 화면에서 컬러 변경을 할 수 있다. 유틸리티 영역 세번째 나오는 아이콘을 누르고 아래 컬러 지정을 변경해 주면 된다.

색상 선택을 잘 마쳤다면 상단에 있는 실행 버튼을 눌러서 앱을 빌드하고 실행한다. 앱의 배경 색이 바뀐 것을 확인할 수 있다.

이번에는 이미지를 추가할 수 있다. 역시 아이북스 옆에 있는 동영상을 먼저 보면 도움이 된다.

이미지를 넣기 위해 포토부쓰나 셀프 사진을 하나 준비해 놓는 것이 필요하다. 이 이미지 파일은 컴퓨터 안에 들어 있어야 한다.

1. 내비게이션 영역을 연다. 

2. Assets.xcassets 를 연다. 앱에 있는 이미지들이 들어있는 자리이다.

3. 이미지 파일을 끌어 넣는다. 드래그해서 넣을 때는 트리 영역과 에디터 영역 중간에 넣으면 된다. 이제 이미지는 앱의 일부가 된다.

4. 스토리보드로 돌아온다. 이미지 파일을 얻었으니 뷰 콘트롤에 이것을 추가할 수 있다. Main.storyboard 을 다시 연다. 오른쪽 유틸리티 영역을 연다.

그 다음에 이미지뷰에 추가한다.

1. View 를 선택한다. - 중간에 트리 구조에서 View 항목을 클릭한다.

2. View 를 삭제한다. - 기존에 설정되어 있는 View를 키보드의 Delete 키를 눌러서 삭제한다. 

3. 오브젝트 라이브러리를 연다. 오브젝트 라이브러리 위치는 Xcode 화면의 우측 아래 영역이다. 스크롤 하면 많은 오브젝트 라이브러리들이 보인다.

여기에는 많은 오브젝트 라이브러리가 있는데 이 중에서 이미지 뷰를 찾아야 한다. 아래로 스크롤 하면 나오고그 아래 검색 영역에 입력해도 된다.

이미지 뷰를 찾았다면 이것을 드래그 하여 뷰 콘트롤러쪽으로 끌어 당겨 놓는다. 화면의 미리보기 영역쪽으로 잡아 끄는 것이다. 전체 뷰 콘트롤러가 하이라이트 되는 것을 볼 수 있다.

자, 이제 마지막 단계이다. 이미지 뷰를 조정한다.  p.44

우측에 있는 유틸리티 영역에서 Attribute inspector 를 선택한다. 왼쪽에서 네번재 있는 아이콘을 누른다. 

이미지를 선택한다. 

콘텐트 모드를 선택한다. 이미지가 창에 맞는 사이즈로 나오지는 않을 것이다. 이거슨 뷰모드이기 때문이다. 화면에 채워서 맞추려면 scale to Fill 을 선택함녀 된다.  늘어나거나 줄어드는 것을 확인할 수 있다.

자, 이제 마지막으로 run 을 툴바에서 누르고 앱을 실행한다. 입력한 사진을 볼 수 있게 된다.

실제로 이렇게 결과를 얻었다.왼쪽이 시뮬레이터에 나타난 나의 앱에서 실행한 화면이다.

짜잔 이미지가 보여지는 앱을 하나 만들었다. 전문 개발자들처럼 앱을 만들 수 있다. 글쎄 ㅎㅎ

이렇게 해서 5장은 마무리 된다.