UIKit 레이아웃 최적화: FlexLayout과 PinLayout 알아보자

UIKit 레이아웃 최적화: FlexLayout과 PinLayout 정리

최근 iOS 개발에서 AutoLayout의 복잡함을 대체할 수 있는 레이아웃 도구로 FlexLayout과 PinLayout이 주목받고 있습니다.
오늘 프로젝트에서 활용한 내용을 바탕으로 두 라이브러리의 특징과 사용법을 간단히 정리해봅니다.

---

📌 FlexLayout 이란?

Flexbox 레이아웃 시스템을 iOS에서 사용할 수 있도록 만든 Swift 라이브러리

• React Native / Web의 CSS Flexbox 개념을 차용
• UIView.flex 확장을 통해 선언형 레이아웃 구성
• direction, justifyContent, alignItems, grow, shrink 등 다양한 속성 지원
• 다중 뷰 정렬 / 반복적인 UI 구성에 탁월

주요 속성 예시

rootView.flex.direction(.row).justifyContent(.center).alignItems(.center)

속성	설명
direction(.row)	가로 방향으로 정렬 (세로는 .column)
justifyContent(.center)	메인 축(가로)의 중앙 정렬
alignItems(.center)	교차 축(세로)의 중앙 정렬
grow(1)	남은 공간을 비율로 채움
wrap(.wrap)	줄 바꿈 허용

---

📌 PinLayout 이란?

뷰의 위치와 크기를 빠르고 정확하게 설정하는 iOS 전용 레이아웃 라이브러리

• AutoLayout 없이도 정확하고 명시적으로 뷰 위치를 정의
• 성능이 뛰어나고 디버깅이 용이함
• Frame 기반으로 동작하며 코드 가독성이 뛰어남

✅ 사용 예시

rootView.pin.all(pin.safeArea) // safeArea 전체에 맞춤

메서드	설명
pin.all()	superview 전체를 채움
pin.top(16).horizontally(16)	위 16, 좌우 16 마진
pin.width(100).height(50)	고정 크기 지정

---

함께 사용할 때의 장점

특징	설명
선언적 구성	FlexLayout으로 계층 구조를 명확히 선언
명확한 위치 설정	PinLayout으로 부모 뷰 안 위치 지정
퍼포먼스 향상	AutoLayout 대비 성능 우수
디버깅 쉬움	디버깅 메시지로 잘못된 배치 파악 가능

---

실전 적용 예시 (CounterView)

override func defineLayout() {
  rootView.flex
    .justifyContent(.center)
    .alignItems(.center)
    .define { flex in
      flex.addItem(counterContainerView)
        .width(100%)
        .direction(.row)
        .justifyContent(.center)
        .alignItems(.center)
        .define { flex in
          flex.addItem(minusButton)
          flex.addItem(counterLabel).marginHorizontal(20)
          flex.addItem(plusButton)
        }
    }
}

override func layoutSubviews() {
  super.layoutSubviews()
  rootView.pin.all(pin.safeArea)
  rootView.flex.layout()
}

---

참고

• FlexLayout 공식 문서
• PinLayout 공식 문서

---