[IOS][SWIFT]간단한 디자인으로 보는 스토리보드 UI와 SWIFT UI의 차이점

벌써 3번째 글로 찾아뵙게 됐습니다!!👏 👏 👏

오늘은 제가 현재 업무에서 코드로 UI 디자인 작업을 진행하고 있어서

간단한 디자인을 스토리보드로 작업했을 경우와 swift 코드를 이용한

디자인 차이점에 대해 글을 적어보려합니다!

 

먼저 여러분들에게 제일 익숙하다고 생각이 드는 StoryBoard를 이용한 UI 디자인을 

먼저 보여드린 후 코드로 같은 디자인을 작성해보며 글을 적어보겠습니다!

 

먼저 ios 개발을 하면서 가장 중요하다면 중요한 AutoLayout에 대해서 말씀드리겠습니다!

AutoLayout이란 말 그대로 Layout을 자동으로 설정해주는 기능입니다.

쉽게 이해하시게 설명드리자면 Xcode를 이용해 개발을 시작합니다

이때 내가 사용하는 아이폰은 물론 시뮬레이터라는 프로그램으로 내가 지금 작성한 코드를

미리볼수 있는데 이때 만약 아이폰SE로 개발환경을 조정한뒤 개발을 진행했을 때

과연 아이폰 12max pro에서 같은 비율의 화면으로 나올것인가에서 나온 기능이라고 생각하시면됩니다.

지금 말씀드리는 AutoLayout이 바로 그런 문제를 해결하고자 하는 기능이라고 생각하시면 되겠습니다!

 

먼저 스토르보드를 이용한 디자인을 해봤습니다!

 

 

간단하게 Label, View, Button을 추가해봤습니다!

이 세개의 크기 설정은 다음과 같습니다!

Label 설정입니다!

View 설정입니다!

Button 설정입니다!

 

자 이렇게 설정하는게 AutoLayout부분이라고 보시면 됩니다!

처음 개발할때는 뭐가 먼지 모르다, 차례대로 Top:위, Bottom:아래, Leading:왼쪽, Trailing: 오른쪽이라고 보시면 됩니다!

 

저부분이 어딨는지 못찾는 분들을 위해 전체 캡처도 첨부해봤습니다!

 

 

위에 보시면 삼각대같은 부분을 들어가보시면 찾으실 수 있으며,

처음에 생성할땐 Control + 드래그를 해보시면

 

 

이렇게 생긴부분을 체크해주시면 생성하실수 있겠습니다!

 

자 그럼 이렇게 생성된 UI를 코드로 한번 작성해보겠습니다!

먼저 새로운 프로젝트를 생성하신 뒤, 코드를 작성해줍니다!

참고로 저는 코드로 UI디자인을 할 때 SnapKit이라는 라이브러리를 사용하는데

다음 글을 작성할 때 SnapKit에 대해서 설명해드리기로 하겠습니다!

 

 

자 이렇게 코드를 작성해주시면 되겠습니다. 먼저 위에 snapkit을 import 시켜주고 

lazy var를 이용해서 각 UI객체들을 생성해 줍니다

(이때 그 객체들의 속성을 지정해줄수 있습니다~!)

 

지정해주셨다면 함수 initUI를 선언하고 그 내용을 뷰가 열리기전!의 상태인 ViewDidLoad에 선언해주십니다.

(다른 이름으로도 가능합니다!!)

함수안에선 말씀드린 autoLayout을 설정하는대요 각 객체들 이름을 넣고 지정을 해주시는 방법은 위에 코드와 같습니다!

이 때! 제가 생각하는 중요한 점은 이 전에 스토리보드로 만들때 보신분들도 계시겠지만,

버튼은 현재 새로운 뷰안에 들어가있는 설정이였기 때문에! 버튼의 레이아웃을 설정할때는 

self.view1.addSubview(button1) <- 이런식으로 그 객체가 어디에 속해있는지 지정해주실 수 있습니다.

 

자! 마지막으로 버튼 액션을 구현해봤는데요!

위에 객체를 생성할때 addTarget에서 button1Action에 sender를 보내주시고,

initUI 함수 안이 아닌 밖에서 버튼 액션의 함수를 구현해 주시면 되겠습니다.

그럼 마지막으로 제가 코드로 작성한 UI를 함께 보시겠습니다!

 

 

스토리보트로 만들것과 같은 디자인을 볼 수 있겠습니다!!

 

자 이번 글에서는 스토리보드와 코드를 이용한 UI를 같이 보셨는데요!

음... 저는 개인적으로 코드로 디자인하는게 더 편하다고 느꼈습니다. 이유로는 스토리보드로 디자인을 구현할때,

겹친 부분이나 어떤 기능을 구현을 어디서 해야하는지 찾아야하는게 조금 까다롭더라구요.

반면, 스토리보드 디자인 작업의 장점은 한눈에 볼 수 있는 점이 너무나 좋고, 만약 인수인계를 하게 되는 상황이거나

다른 누군가가 내 디자인을 한번에 볼 수 있는 장점이 있다고 생각듭니다!

(여러분도 두가지 방법을 이용해보시고 좋은 방법을 찾으시면 좋겠습니다 😁 😁 )

그리고 많은 기능 부분들이 생략되어 이해가 안가시는 분들도 많이 계실텐데 다른 부분들도 꼭 글을 작성하도록 하겠습니다!

질문이나 수정사항을 발견하신분들은 알려주시면 감사하겠습니다!