Xcode / iOS 첫번째 앱 만들어보기 - 화면설정.

 

 

 

 

 

 

앱을 하나 만들어 보자. 

 

버튼을 누르면 텍스트가 바뀌는 것을 만들어 볼 것이다. 

 

먼저 버튼을 만들어야 하니 라이브러리를 띄워보자. 라이브러리는 command + shift + L 을 누르면 나온다. 아니면 화면에 표시된 곳을 누르면 된다. 

 

라이브러리 초기화면

 

 

성공적으로 띄웠다면 버튼을 찾으면 된다. 

 

일반적으로 각 요소들은 드래그 앤 드랍이 가능하니 아래처럼 화면에 띄우자. 

 

오른쪽 상단을 보면 알겠지만 해당 설정 부분을 attribute inspector 라고 한다. 이 부분도 상당히 자주 사용하니 알아두자. 

Xcode가 업데이트 되면서 기본 설정이 Plain으로 되어있을 것이다 이러면 나중에 앱 만들기를 진행할때 뭔가 이상해 질 수 있으니 반드시 버튼의 style을 Default로 놓자. 

 

(사진 상으론 filled로 나와있지만 실제론 default로 바꿨다.) 

 

 

 

 

레이블(텍스트) 설정도 위 설정에서 모두 가능하다. 

텍스트의 정렬 설정, 글씨 크기, 폰트 등을 설정 할 수 있다. 

이 상태로 한번 시뮬을 돌려보자. 

 

위를 자세히 보면 기본 기기 설정이 아이팟 7세대로 나와있다. 

나는 11을 쓰니 아이폰 11로 바꿔서 실행하면 된다. 

시뮬레이터를 키는 방법은 먼저 기기설정을 한 후 단축키 command + R 이다. (혹은 좌측 상단에 화살표 클릭)

 

 

와우! 

실제 아이폰 화면 같이 동작한다. (바탕화면 나가기도 가능하다.) 

아직은 로직을 싸놓은 게 없기 때문에 버튼을 눌러도 아무런 동작을 하지 않는다. 로직을 짜기 전에 또 해야할 것이 하나 있는데 화면 가운데 맞춤이다. 

 

눈에 보이는 화면상으론 가운데에 있는 것 처럼 보이지만 그렇지 않기 때문이다. 그리고 그 위치를 잡아주는 기능이 오토레이 아웃이다. 

기본 적인 오토레이아웃 개념은 아래에 정리해 놨다. 

https://zerostar0809.tistory.com/17?category=1080254

iOS / UIkit autolayout 개념정리

 

---

설정을 했는데 빨간색으로 뭔가가 나왔다. 누가봐도 오류라는 것을 알 수 있다. 

좌측 상단에서 빨간색 오류를 클릭하면 자세한 내용을 볼 수 있다. 하나는 제약이 부족하다는 것이고 다른하나는 제약이 충돌(겹침) 되고 있다는 뜻이다. 해당 부분을 삭제하고 가운데 정렬을 해보자. 

 

 

가운데 정렬 방법은 아래 

aline

이것을 클릭하고 정렬을 맞춰주면 된다. 

정렬을 끝내니 손으로 드랍했던 위치와 약간 다르다는 것을 알 수 있다. 

 

 

 

 

 

 

만약 레이블을 잘못 만져서 움작였다면 사진처럼 주황색으로 표시 되는데 새로고침 처럼 다시 원상 복귀하게 할 수 있다. 

 

 

다시 버튼을 위와 같이 설정해주고 가운데 정렬 까지 마쳐준다. 

그러면 이제 이 앱을 어떠한 아이폰에서도 키면 동일하게 화면에 뿌려줄 수 있게 됐다.