1주차_(1) - Interface Builder & UI 구성

 

---

 

① X-Code 실행

X-Code

X-Code를 실행하면, 아래와 같은 창이 보인다.

Create New Project 클릭!

iOS → App → Next

Prouduct Name에 만들고자 하는 프로젝트 이름을 적는다. (Camel Case로 적기)
Organization Identifier은 그대로 두고,
Interface는 Storyboard, Language는 Swift... 위 화면과 같이 설정한 후 Next!!

 

② main.storyboard

왼쪽에 보이는 부분을 '네비게이터(navigator)'라고 부른다.

네이게이터에 있는 'Main'이 바로 'main.storyboard'이다.
이 main.storyboard를 통해 Interface Builder를 열 수 있다.

 

 

③ UI 구성 및 디자인 기초

Main을 누르면 위와 같은 아이폰 모양이 뜬다. 
이제부터 View controller 안에 있는 View에 여러가지를 직접 담아보며 알아보려고 한다! :-)

오른쪽 상단에 + 를 누르면, 위 화면과 같은 창이 뜬다. (= Show Library)
(단축키: cmd + shift + L)

이를 이용해서
label, button, slider, switch, image view 등 여러가지 객체들을 넣을 수 있다.

사용하려고 하는 객체를 drag해서 아이폰 모형 안에 drop하면 된다.

또한, 이렇게 drop 하여 원하는대로 컬러와 크기 등 디자인을 바꿀 수 있다.

그리고 우측 상단에 ▶︎ 실행 버튼을 클릭하면,
해당 View가 실행되어 실제 아이폰 기기에서 어떻게 보여지는지 확인할 수 있다.
(단축키: cmd + R) 



💡주의💡
컬러를 선택할 때, 주의해야 할 부분이 있다.
예를 들어, Label을 검은색으로 설정했을 때, 아래와 같이 일반 모드에서는 잘 보인다.

하지만, 아이폰이 지원하고 있는 '다크 모드'에서는 어떻게 보일까?

이렇게 글자가 글씨가 안보이게 된다! 😅

그래서 이러한 경우에는 가장 위쪽에 있는
'Default (Label Color)' 혹은 ' ~ Background Color'로 설정해야 한다.

그러면 이렇게 다크모드에서도 black → white 로 전화되어,
글씨가 보이게 된다. 😄


💡주의💡
주의해야 할 점이 한 가지 더 있다.
객체 간의 영역을 확인해야 한다. 

예를 들어 Slide의 경우를 보자.

보기에는 보이는 영역만큼 차지하는 걸로 보인다.
하지만, 이 Slieder의 Background 색상을 넣어보면,

그 밖의 영역까지도 차지하는 것을 알 수 있다.


객체들의 영역을 확인해야 하는 이유는 다른 객체와 영역이 겹치는 경우,
의도한 대로 수행되지 않을 수 있다.
(ex. image view와 button의 영역이 겹치는 경우, 실행했을 때 Button이 눌리지 않을 수 있음)

➕
또한, 컬러를 바꿔도 바뀌지 않는 객체들도 있다.
 

---

위에 직접 실습해 본 내용 이외에도 정말 다양한 기능들이 있다. 
하나하나 직접 눌러서 자주 사용해 보며, 익히는 것이 중요할 것 같다! ☺️

 

---