아는 것을 남에게 설명해 주는 것은 좋은 학습법입니다. 내일배움캠프 iOS 트랙에서는 수강생이 돌아가며 학습에 개발 공부에 도움 되는 주제를 선정해 발표합니다. [초보자의 코딩 공부]에서는 내일배움캠프 수강생들이 공유한 코딩 지식과 학습법을 알려드립니다.
Auto layout을 쉽게 만들기 위한 라이브러리, Snapkit에 대해 알아보도록 하자.
왜 Snapkit을 사용할까?
다른 라이브러리에 비해 훨씬 코드 길이가 짧아지고 가독성이 좋아진 것을 확인할 수 있다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F83c75a39-3aba-4ba4-a792-7aefe4b07895%252Fa48e2e5b-5e35-4baf-b7ae-e4fbd949efbb%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2024-07-23_17.09.14.png%3Ftable%3Dblock%26id%3D21a3bc7b-66e7-4f19-973a-1799ac4bcfe9%26cache%3Dv2&w=3840&q=75)
equalTo() & equalToSuperview()
equalTo()
메서드는 특정 뷰의 제약 조건을 다른 뷰와 같게 설정할 때 사용한다. 예제를 통해 알아보면 다음과 같다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F83c75a39-3aba-4ba4-a792-7aefe4b07895%252Fdf86331b-6b8b-4a7b-a6aa-c93c0cd93bc9%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2024-07-23_17.15.05.png%3Ftable%3Dblock%26id%3Da5633508-f99c-4624-95c9-57c9a73ce3f9%26cache%3Dv2&w=3840&q=75)
화면 속에 0으로 보이는 numberLable의 width는 80과 같다. incrementBtn의 left는 numberLabel의 right와 같은 위치에 있고 32만큼의 offset(거리)을 가진다. 그와 같이 incrementBtn의 left도 numberLabel의 right와 같은 위치에 있고 32만큼의 offset(거리)을 가진다.
equalToSuperview()
도 화면 속 코드에서 확인할 수 있다. 코드 중 superview란, 특정 뷰의 상위 뷰를 말한다. numberLabel은 superview로서 기본 view를 가지게 된다. 위 예제에서 numberLabel은 centerX와 centerY를 Superview와 같게 한다는 것을 볼 수 있다.offset & inset
offset과 inset은 Auto Layout 제약 조건을 설정할 때 뷰 간의 거리를 지정하는 데 사용되는 메서드이다.
offset
은 양수로 조건을 줄 시 가로는 왼쪽으로 움직이고 세로는 아래쪽으로
움직이게 된다. 즉, 양수로 네 방향에 constraint를 준다면 아래 사진처럼 뷰가 위치하게 되는 것이다.![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F83c75a39-3aba-4ba4-a792-7aefe4b07895%252Fcfcd8911-d53d-4cbd-aee0-2a129f492116%252FUntitled.png%3Ftable%3Dblock%26id%3D609fac2a-0ad0-497e-8d6a-0bd001885ca5%26cache%3Dv2&w=3840&q=75)
inset
은 constraint 관계를 가지는 다른 뷰와의 거리를 말한다. 양수로 각 방향에 constraint를 준다면 사진처럼 뷰가 위치하게 된다. padding과 비슷하다고 생각하면 좋다.![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F83c75a39-3aba-4ba4-a792-7aefe4b07895%252F2c4af031-eead-4ad6-b2e4-921c4a5c531a%252FUntitled.png%3Ftable%3Dblock%26id%3Da0e4ed70-e866-4821-931f-5b3a908d4606%26cache%3Dv2&w=3840&q=75)
활용하면 좋은 메서드
SnapKit에서는 여러 가지 constraint들을 한 번에 설정해 주는 몇 가지 메서드를 제공한다.
edges
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F83c75a39-3aba-4ba4-a792-7aefe4b07895%252Fa1fd7d26-1a58-44ac-bfea-ae8ae5db3c83%252FUntitled.png%3Ftable%3Dblock%26id%3D91115e8b-448c-41e7-b0aa-24c74f02dd45%26cache%3Dv2&w=3840&q=75)
edges
는 특정 뷰의 네 모서리(top, left, bottom, right)를 다른 뷰나 상위 뷰의 모서리와 동일하게 설정하는 메서드다. 위 예제처럼 inset을 모두 20씩 한 번에 줄 수 있다.![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F83c75a39-3aba-4ba4-a792-7aefe4b07895%252F1216f37f-60dd-41c4-ae22-450334ab72e3%252FUntitled.png%3Ftable%3Dblock%26id%3Dc3539942-d7c4-46ef-bbfe-38478eccc36e%26cache%3Dv2&w=3840&q=75)
위처럼 top, left, bottom, right를 각각 지정하는 것도 물론 가능하다.
size
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F83c75a39-3aba-4ba4-a792-7aefe4b07895%252Fa10f41e5-2c67-475c-8115-295c5c998292%252FUntitled.png%3Ftable%3Dblock%26id%3D49117018-4edf-4edf-8e2d-75d2f96b9999%26cache%3Dv2&w=3840&q=75)
size
는 특정 뷰의 너비와 높이를 한 번에 설정하는 메서드다. size를 80으로 지정해주게 된다면 width와 height 모두 80만큼 길이를 가지게 된다.![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F83c75a39-3aba-4ba4-a792-7aefe4b07895%252Fa3e5d022-8dba-4a42-996b-01e45293925a%252FUntitled.png%3Ftable%3Dblock%26id%3D988c188f-8f30-4694-a39d-fa12d6bc9ac0%26cache%3Dv2&w=3840&q=75)
혹은 CGSize를 사용하여 width와 height를 각각 원하는 크기로 설정할 수도 있다.
center
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F83c75a39-3aba-4ba4-a792-7aefe4b07895%252Fca19c2bb-c421-4cad-a450-8576abea46b4%252FUntitled.png%3Ftable%3Dblock%26id%3Deb521bf9-da39-4ca5-880f-8af44a786159%26cache%3Dv2&w=3840&q=75)
center
는 특정 뷰의 중심을 다른 뷰나 상위 뷰의 중심과 동일하게 설정하는 메서드다. centerX와 centerY를 함께 지정해주고 싶다면 center attribute를 사용할 수 있다.글 | 장수빈 내배캠 수강생
편집 | 김진원 팀스파르타 객원 에디터
취업 준비, 어디서부터 시작해야 할지 모르겠다면?
🧐비전공자인데 IT 업계 취업할 수 있을까?
😟프로젝트 경험이 부족한데, 어떻게 준비해야 할까?
🥺IT 기업으로 이직하고 싶은데 뭐부터 시작해야 할까?
이런 고민을 하고 있다면, 내일배움캠프의 IT 취업 컨설팅을 받아보세요.
취업 코칭 전문가들이 여러분의 고민을 해결해 드립니다.
다음 링크에 이메일을 입력하시면 메일로 1:1 커리어 상담권과 취준 자료집을 보내드릴게요.
Share article
Subscribe to our newsletter