[Swift] flexLayout / pinLayout

FlexLayout과 PinLayout

• AutoLayout / SnapKit에 비해 훨씬 빠르고 구조적이다
• 빠른 이유: 제약조건 기반 레이아웃이 아닌, frame 기반 레이아웃
• 코드 기반 UI 구성에서 선언적이고 명확한 구조 파악이 가능하다

frame 기반 레이아웃?

• AutoLayout은 제약 조건을 해석하고 해결하는 계산 비용이 크다
• PinLayout은 기기의 실제 frame 값을 기준으로 좌표와 크기를 즉시 계산한다
• 즉시 계산되고 바로 적용되므로 반복 뷰나 애니메이션에서 성능이 좋다

FlexLayout

• UIStackView처럼 내부 아이템을 쌓아 올리는 구조를 담당한다 (UIStackView 대체)
• .direction, .justifyContent, .alignItems, .wrap 등 CSS의 flexbox 개념과 매우 유사함
• 뷰 계층의 흐름을 선언적으로 표현할 수 있어 시각적이고 구조적인 코드 작성 가능
• 내부 아이템을 반복적으로 추가하거나 키워드 컬렉션처럼 유동적인 뷰에 특히 강하다

PinLayout

• SnapKit처럼 뷰의 위치와 크기를 지정하지만, AutoLayout이 아닌 frame 기반으로 작동한다
• .top(), .left(), .below(of:), .size(100) 등으로 뷰의 위치와 사이즈를 명령형으로 직접 지정한다
• 레이아웃 계산이 즉시 일어나기 때문에 매우 빠르고 디버깅이 단순하다
• Flex로 쌓은 container를 화면의 어디에 위치시킬지 제어할 때 적합하다

👉🏻 선언형 vs 명령형 레이아웃

• 선언형(FlexLayout): 무엇을 만들고 싶은지 설명 → 엔진이 알아서 배치
• 명령형(PinLayout): 어떻게 만들지를 수치로 직접 지시
• 선언형은 구조를 명확히 표현하기 좋고, 명령형은 세밀한 제어와 퍼포먼스에 강하다

FlexLayout + PinLayout 조합의 기본 패턴

• FlexLayout은 내부에서 아이템을 "어떻게 쌓을지" 선언한다
• PinLayout은 그 Flex container를 "어디에 위치시킬지" 지정한다
• ex) 키워드 뷰를 Flex로 감싸고, 그 뷰를 화면 중간에 Pin으로 배치

퍼피팅 화면을 예로 들자면,
하늘색 뷰들을 콘테이너뷰처럼 생각하고 flexlayout으로 쌓고, 빨간 영역 안에서 pinlayout으로 저 flexlayout 콘테이너 뷰들의 위치를 잡아주면 된다.

결론

• FlexLayout은 구조를 선언적으로 짜기 위한 도구
• PinLayout은 그 구조를 위치시키는 도구
• 반복, 유동적인 UI에는 Flex가, 위치 지정과 애니메이션에는 Pin이 유리
• 두 개를 함께 쓰면 코드 기반 UI에서 성능과 생산성을 모두 잡을 수 있다!