UIScrollView는 스토리보드에서 사용할 때마다 에러를 내는 UI 컴포넌트 중 대표적인 친구입니다. 하지만 언제나처럼 컴퓨터는 잘못이 없죠. 제대로 알고 사용하지 못해서 일어나는 장애물이라고 생각하고 머리를 정리할 겸 단계별로 알아보겠습니다.

UIScrollView

UIScrollView가 뭔지부터 알아보겠습니다. UIScrollView는 화면의 크기를 벗어나는 콘텐츠를 표현할 때 스크롤을 통해서 더 많은 정보를 탐색할 수 있도록 해주는 컴포넌트입니다.

이 UIScrollView는 굉장히 중요한 녀석입니다. 저희가 매일같이 사용하는 UITableView, UICollectcionView와 같은 스크롤이 가능한 컴포넌트들의 Super Class이기 때문이죠. 그래서 이런 테이블뷰와 컬렉션뷰에서 스크롤뷰의 메서드와 속성들에 접근할 수 있습니다.

스크롤뷰는 두 가지 레이아웃으로 나뉘어져 있습니다. Content Layout은 스크롤되며 화면에 표현될 컨텐츠들의 레이아웃을 결정하는 레이아웃입니다. Frame Layout은 화면 안에서 실제로 표현되는 스크롤뷰의 크기와 위치를 결정하는 레이아웃입니다.

ScrollView 오토 레이아웃 잡아주기

위 사진처럼 UIScrollView를 하나 넣어주고 다른 View들과 마찬가지로 오토레이아웃을 잡아줍니다. 그런데 다른 View들과는 다르게 바로 적용이 안되는 것처럼 보입니다? 실질적인 Contents가 정의되어 있지 않아서 그런 것이라고 추정하고 있지만 정확한 이유는 잘 모르겠습니다. 알게 되면 추가 내용으로 적어두겠습니다..! 아무튼 Constraints를 보면 잘 적용되어 있는 것을 확인할 수 있습니다.

View 추가하고 Layout Guide 설정하기

스크롤뷰만 있으면 아무 쓸모가 없겠죠? 실제로 스크롤 될 View를 넣어봅시다.

저는 보기 편하게 스크롤뷰와 겹치게 위치를 잡아주고 이름도 Content View라고 바꿔주었습니다. 필수 과정은 아닙니다!

스크롤 될 실제 컨텐츠를 담을 View이기 때문에 Content Layout Guide를 이 View의 Layout과 맞춰줄 겁니다. 일종의 배경이자 도화지 역할을 하는 Content View의 크기를 컴파일러에게 알려주는 과정인거에요!

Content View를 Ctrl키를 누른 상태로 Content Layout Guide까지 끌어당기면 두 요소간의 레이아웃을 설정해줄 수 있습니다.

Content View의 크기가 곧 스크롤뷰에 들어갈 컨텐츠의 크기이기 때문에 Leading, Top, Trailing, Bottom의 Spacing을 모두 0으로 설정해줍시다.

현재 스토리보드에 놓여진 값 그대로 Constant 값이 들어가기 때문에 모두 0이 맞는지 확인해보는 작업이 필요합니다!

Scroll View의 방향 정해주기

저는 세로로 스크롤되는 화면을 만들고 싶습니다. 화면이 세로로 스크롤될 때 넓이와 높이 중에 고정되어 있는 값은 넓이죠?

스크롤뷰의 Frame Layout Guide는 넓이가 고정되어 있다면 세로로 스크롤되게 작동합니다. 반대로 높이가 고정되어 있다면 가로로 스크롤할 수 있습니다.

왜 Frame Layout Guide를 설정해줘야 하는지 헷갈릴 수 있는데요, Frame Layout은 실제 스크롤뷰가 표현될 Layout이라고 했었습니다.

Frame Layout의 넓이를 컨텐츠의 넓이와 같게 설정하면 컴파일러 Frame 밖에 가로 형태로 표현할 컨텐츠가 더 이상 없다는 걸 알 수 있겠죠? 그래서 가로는 고정되고 세로로만 스크롤되게 됩니다.

위에서 Content Layout을 잡아줬을 때처럼 Content View를 Ctrl키를 누른채로 Frame Layout Guide에 끌어놔줍니다.

그러면 나오는 Constraint 설정 창에서 Equal Width를 선택해서 가로를 갖게 만들어줍니다.

물론 위에서처럼 수치가 현재 스토리보드에 맞게 들어가기 때문에 한 번 확인해주어야 합니다. 이번에는 비율로서 다뤄지는 값이기 때문에 Multiplier가 1인지 확인해줍니다!

높이 정해주기

여기까지가 스크롤뷰를 스토리보드에서 설정해주는 방법입니다. 그런데 아직 빨간 에러가 사라지지 않았죠? 컨텐츠의 넓이는 스크롤뷰의 Frame Layout과 같게 만들어주었기 때문에 정해졌지만, 높이는 아직 정해주지 않았기 때문입니다.

따라서 Content View의 높이를 고정 값으로 정해주거나, 실제로 내부에 컴포넌트들을 집어넣어주면 해당 에러는 사라집니다.

추천하는 방법으로는 Content View에 높이 값을 주되, Priority를 내려주어서 정해진 높이 이상이 필요하면 동적으로 늘어나게 하는 것이 좋습니다.

Content View를 Ctrl키를 누른채로 끌었다가 Content View 본인에게 놔줍니다. 그 상태에서 Height를 설정해주면, 현재 스토리보드에 설정된 높이가 Constraint에 추가됩니다.

Priority도 마찬가지로 Constraint에서 수정해줄 수 있습니다. 기본값인 1000에서 낮은 값으로 설정해줍시다! 이 값은 내부에 들어올 컴포넌트들의 높이 Priority보다 낮으면 됩니다. 저는 넉넉하게 250으로 설정해주었습니다.

이렇게 에러가 없는 깔끔한 스토리보드가 되었네요.

UIScrollView는 다루기 굉장히 까다로운 녀석이지만, 개념 자체는 쉬운 것 같아요. 개념을 이해하고 다룬다면 익숙해지는데 많은 시간이 걸리지 않을 것이라고 생각합니다!