[WWDC 2020] Modern Cell Configuration

안녕하세요 Pingu입니다.🐧

 

오늘은 WWDC 2020이 Modern Cell Configuration 이라는 영상을 보고 정리한 글을 써보려고 합니다.

 

이번 영상을 보고 느낀 점을 요약하자면, "컬렉션 뷰, 테이블 뷰의 셀을 구성하는 새로운 방법에 대해 설명하는 영상!"입니다.

Modern Cell Configuration

iOS 14부터 기존 기술을 기반으로 UICollectionView에 위 그림과 같이 세 가지로 나눌 수 있는 기능을 제공한다고 합니다.

세 가지에 대한 소개 영상은 Advances in Collection View라는 영상을 참고하라고 하네요.

 

이번 영상은 제목에서도 알 수 있듯이 View Configuration에 대해 주로 다룰 예정이라고 합니다.

위와 같은 세 가지를 알려준다고 합니다. 풀어쓰자면, 새로운 개념인 configuration으로 셀을 설정하는 방법을 알아보고, configuration state, background configuration, content configuration까지 알아볼 예정인 거 같아요.

 

그럼 먼저 Getting started with configurations에 대해 알아볼게요!

Getting started with configurations

먼저 configuration을 사용하기 전에는 셀을 어떻게 만들었는지 보여줍니다.

기존에는 셀을 위와 같은 방식으로 만들곤 했습니다. 그런데 이제 새로운 configuration api를 사용하면!

이렇게 만들 수 있다고 합니다. 근데 뭐 딱히 바뀐 게 없네요. 오히려 코드가 추가되었습니다. 😑

 

일단 간단하게 위 코드를 설명해 보자면, defaultContentConfiguration()이라는 기본 스타일을 반환하고, 이러저러한 것들을 원하는 대로 설정한 뒤 cell의 contentConfiguration에 넣어주면 됩니다.

 

기존 코드와 차이점은 UIImageView, UILabel을 직접 건드리지 않고, configuration 자체에서 설정한다는 차이점이 있네요.

 

이렇게 하면 좋은 점은 위 코드는 테이블뷰 셀이었는데요!

동일한 configuration을 컬렉션뷰 셀에도 적용하면 그대로 사용할 수 있다고 합니다. 더 정확하게는 content Configuration을 지원하는 모든 뷰에서 사용할 수 있다고 합니다.

 

이게 가능한 이유는 configuration을 compasable(구성)할 수 있기 때문이라고 하는데, 좀 더 풀어쓰면 기존 방식과 같이 셀 클래스에서 모양을 구성하는 대신, configuration을 만들고 이걸 지원하는 셀이나 뷰에 필요한 것들을 연결하여 사용하다 보니 가능하다고 하네요.

 

약간 짝 맞추기 게임 느낌으로 이해하면 될 거 같아요. 근데 커스텀 셀과 같이 복잡한 셀의 경우엔 어떻게 하려나? 하는 의문이 들긴 합니다.

 

의문을 뒤로하고 일단 영상에서는 configuration 쓰면 좋은 점을 막 자랑을 해줍니다.

터치하고 있을 때 셀이 투명해지는 인터랙션, 터치해서 선택됐을 때 셀이 강조되는 것을 보여주고, 여러 상태를 넣었을 때 화면도 보여줍니다. 이렇게 상태에 따라 다르게 보이는 것을 configuration을 사용하여 셀을 설정하면 자동으로 처리할 수 있다고 합니다.

이렇게 찍먹을 해봤으니 이제 자세히 알아볼 시간입니다.

configuration은 뷰(셀)의 특정 상태에 대한 모양을 설명하는 것이라고 보면 된다고 합니다. 그래서 뷰(셀)에 적용하기 전까지는 아무런 작업도 하지 않는다고 해요. 그리고 아까 말한 대로 configuration은 이를 지원하는 모든 뷰(셀)에서 재사용이 가능하다고 합니다.

 

그래서 이러한 configuration에는 어떤 것이 있느냐 하면!

이렇게 background, list content라고 하는 두 개의 configuration이 있다고 합니다. 각각 어떤 역할을 하는지 살펴볼게요.

Background Configuration은 배경이 어떻게 보일 지를 결정하는 몇 개의 프로퍼티가 있습니다. 이 프로터티를 설정하는 간단한 코드들로 배경색, 블러처리와 같은 다양한 시각적 효과를 처리할 수 있다고 하네요.

 

물론 복잡한 뷰를 위한 커스텀 기능을 추가할 수도 있다고 합니다.

다음은 List Content Configuration입니다. 프로퍼티를 보면 기존에 테이블뷰 셀 스타일과 비슷해 보이지만, 더 강력한 기능을 가지고 있다고 해요. 많은 텍스트를 표시할 수 있는 유연한 레이아웃과 접근성을 위해 큰 텍스트 사이즈를 지원하는 레이아웃도 제공한다고 합니다.

 

얘네 둘은 같이 쓰이는데 동일한 설계 원칙을 갖는다고 합니다.

설계 원칙은 두 가지라고 하네요.

• Inexpensive to create
• Always start with a fresh configuration

background, list content configuration 사용할 때 자원이 많이 들지 않는다고 합니다. 그리고 둘 다 값 타입이라 변경 사항을 다시 셀에 설정하기 전까지는 아무런 영향도 주지 않는다고 해요.

 

위 코드와 같이 셀을 구성할 땐 defaultContentConfiguration()로 새로운 configuration을 매번 만들어야 하는데, 비용이 저렴하니 매번 만드는 코드에 대한 걱정을 하지 말라고 합니다.

Configuration을 사용할 땐 이전 상태에 대해 전혀 생각할 필요가 없기 때문에, 이전 configuration을 가지고 뭔갈 하려고 하지 말라고 합니다. 즉 아까도 언급한 대로 매번 새로운 configuration을 만들어서 설정한 뒤 셀에 적용하라고 합니다.

 

이렇게 만든 configuration을 셀에 적용하면 UIKit이 알아서 내부적으로 뭐가 바뀌었는지 파악하고 뷰를 효율적으로 업데이트한다고 하네요. 아주 좋네요 :)

 

이렇게 configuration은 상태별 처리를 잘해주며, 애니메이션 처리도 애니메이션 내부에서 configuration을 설정해주기만 하면 된다고 하네요. 그리고 매번 새로운 configuration을 적용해 주기 때문에, 언제나 현재 적용된 것만 신경 쓰면 됩니다! 그리고 configuration은 성능도 좋다고 합니다. 부드러운 스크롤을 원한다면 적용해 보라고 하네요.

 

Configuration State

그럼 다음으로 configuration state를 알아봅시다.

앱에는 위와 같이 정말 많은 상태들이 있습니다. 이러한 모든 상태들이 configuration state를 결정하게 됩니다.

그런 configuration state는 어디에 있는가 하면, 위와 같이 셀과 header, footer에는 자신만의 configuration state가 있습니다. 그럼 view configuration은 어떻게 생겼을지 볼게요.

위와 같이 Trait Collection을 시작으로 highlighted, selected, disabled, focused라는 네 가지 상태가 있고, 있을 수도 있고 없을 수도 있지만 직접 만든 custom State도 있습니다. 간단하죠?

다음으로 cell configuration state를 보면 위와 같습니다. view configuration state가 가지고 있던 모든 것을 가지고 있고, 추가로 editing, swiped, expanded, drag and drop이라는 상태들도 가지고 있네요.

그래서 이러한 configuration state로 할 수 있는 게 무엇이냐 하면, 위와 같이 상태에 대해서 configuration을 업데이트하는 것입니다. 즉 configuration에 대해 state를 넣어주면, 해당 state의 configuration이 반환되어 그걸 사용하면 되는 거죠. 당연히 값 타입이니 기존 것과 새로 만들어진 것은 독립적이므로 서로 영향을 주지 않습니다.

 

아까 예제로 봤던 화면을 다시 가져와보면, 다양한 상태에 따라 모양이 다른 것을 볼 수 있는데요, 이걸 자동으로 되는 이유가

위와 같이 sutomatic configuration update라는 기능이 있기 때문입니다.

 

위 프로퍼티들은 기본적으로 true라서 background, content configuration은 configuration state가 바뀔 때마다 configuration을 해당 상태에 맞게 업데이트한다고 합니다. 물론 false로 바꾸면 업데이트되지 않겠죠?

 

그럼 이러한 configuration update를 위한 코드는 어디에 둬야 할까요? 정답은 바로 위와 같이 애플에서 만들어 둔 updateConfiguration 메서드를 오버라이드해서 사용해면 된다고 합니다.

updateConfiguration(using state:) 메서드는 셀이 처음 보이기 전에 항상 호출되고, configuration state가 변경될 때마다 다시 호출되어 state에 맞는 새로운 configuration을 설정할 수 있다고 합니다.

 

아까도 언급됐지만 configuration을 사용할 때는 이전 상태를 걱정할 필요 없이 항상 새로운 configuration을 만들어서 설정한 뒤 셀에 적용하면 됩니다. 그리고 configuration을 설정하고 적용하는 코드를 한 곳에 두는 것이 좋다고 합니다. 보통은 그 위치가 updateConfiguration(using state:) 메서드라고 하네요!

 

어떤 이유에서건 셀을 다시 구성해야 한다면 setNeedsUpdateConfiguration()을 호출하여 업데이트하면 된다고 합니다. (그러니까 실제 업데이트는 setNeedsUpdateConfiguration()을 호출해서 처리하면 된다는 뜻 같네요)

이제는 updateConfiguration 메서드에 대한 예제를 한 번 볼게요!

가장 먼저 default configuration을 가지고 와서 현재 state로 업데이트합니다.

그런 뒤 셀이 표시하는 항목에 대한 값들을 설정하면 됩니다. 위 코드에서는 highlighted, selected 상태라면 색상을 다르게 보여주도록 설정하고 있네요.

그런 뒤 그렇게 설정된 새로운 configuration을 셀에 다시 적용하면 끝입니다.

아주 간단하네요 :)

 

위 예제에서는 색상을 특정 상태에 대해서 다르게 설정해 줬는데요, Color Transformer라는 새로운 타입을 사용하여 상태에 따라 색상을 변경할 수도 있다고 합니다.

Color Transformer는 한 가지 색을 가져와서 어떤 식으로든 원래 색을 수정하여 다른 색을 반환한다고 합니다.

 

예를 들어 색의 회색조 버전을 반환하는 color transformer가 있을 수 있는 거죠. Color Transformer는 단순한 기능인데, 애플이 늘 새로운 기능에 대해 하는 말대로 강력하다고 합니다. 얘가 강력한 이유는 다른 color transformer를 사용해서 동일한 input color에 대해 다양한 색을 생성할 수 있기 때문이라고 합니다. (위 그림처럼요!)

 

그런데 얘를 이용해서 상태에 따라 어떤 것을 할 수 있느냐 하면, 특정 상태의 default Configuration에는 color transformer가 미리 설정되어 있기도 하다고 합니다. 그래서 뭐 이걸 직접 설정하면 아까와 같이 상태에 따른 색을 매번 지정하지 않고, 미리 상태에 따른 색을 지정해 둔 뒤 사용할 수 있을 거 같아요.

Background and Content Configuration

벌써 마지막 섹션인 Background and Content Configuration입니다.

 

지금까지 configuration이 다양한 상태에 대한 업데이트 하는 방법에 대해 알아봤는데요, 이번 섹션에서는 background, content Configuration을 사용할 때 알아야 할 세부 정보를 알려준다고 합니다!

컬렉션 뷰, 테이블 뷰의 셀, header, footer의 background configuration의 경우 기본값으로 알아서 설정된다고 합니다.

 

주의 깊게 봐야 할 것은 content configuration인데요, 위에 그림에도 나와있고 아까부터 예제에서 계속 등장하던 defaultContentConfiguration() 메서드를 사용하여 configuration을 가져올 수 있습니다.

 

만약 원하는 스타일이 따로 있다면, 위 그림에서와 같이 UIBackgroundConfiguration, UIListContentConfiguration의 타입 메서드에서 스타일에 맞는 configuration을 가져올 수도 있다고 합니다. 위 그림에서는 sidebarcell 스타일에 대한 configuration을 가져오는 것을 볼 수 있는데, 다른 스타일들도 모두 가져올 수 있다고 해요.

그래서 sidebar 스타일로 셀을 만든 화면을 보면 위와 같습니다. 그리고 상태에 따라 background와 content 모양도 바뀌는 것을 볼 수 있어요.

 

그럼 다른 스타일로 만든 화면들도 잠깐 보겠습니다.

왼쪽부터 차례대로 grouped, inset grouped, plain 스타일입니다. 이 스타일들이 익숙하다 했더니 테이블 뷰에서 봤던 스타일들이네요.

 

뭐 어쨌든 이렇게 쉽게 스타일을 변경할 수 있다고 합니다.

 

아까 초반에 텍스트 크기도 알아서 계산해 줘서 셀의 높이도 자동으로 계산해 준다고 했는데 이제 실제 예를 보여줍니다.

위와 같이 늘어난 텍스트 크기에 따라 레이아웃이 바뀌는 것을 볼 수 있습니다.

Content Configuration은 처음부터 이러한 동적 레이아웃을 지원하도록 만들어졌다고 하네요!

 

그래서 이게 어떻게 작동하는 건지 궁금했는데 영상에서 바로 알려줍니다.

위 그림에 나온 레이아웃을 보면 파란색으로 표시된 상하좌우 margin이 있고, 주황색으로 표시된 padding 속성을 볼 수 있는데, 이런 것들을 Content Configuration을 활용하면 제어할 수 있다고 합니다. 이렇게 제어한 값들도 셀의 높이를 계산하는데 당연히 영향을 준다고 합니다.

 

좀 더 설명을 해준다면서 위 예제를 보여줍니다. 각각의 셀을 보면 이미지와 텍스트가 있는 간단한 셀이네요.

근데 이미지 크기가 달라지면 위와 같이 못생겨 보이게 됩니다.

이유는 위 그림처럼 이미지가 정렬되고, 텍스트는 이미지의 trailing에 대하여 padding 값을 가지기 때문이라고 하네요.

그래서 위와 같은 셀을 원하는 대로 보이게 하려면, 각각의 이미지에 대한 reserved layout size를 설정해줘야 한다고 합니다.

위 그림은 reserved layout size가 설정된 화면이라고 합니다.

빨간색 점선이 이미지에 대한 reserved layout size라고 합니다. reserved layout size는 이미지의 실제 크기에 영향을 주지도 않는데, 실제로 위와 같이 reserved layout size보다 이미지 사이즈가 클 경우 확장되어 보이는 것을 알 수 있습니다.

 

텍스트의 경우 reserved layout size을 기준으로 배치되기 때문에 잘 보이는 것을 볼 수 있습니다.

 

이제 마지막으로 Configuration을 사용할 계획이라면 참고해야 할 것들을 알려준다고 합니다.

기존에 사용하던 셀이 있는 경우에 configuration이 기존에 사용하던 값들과 상호배타적이라는 점을 기억하라고 합니다.

 

Background configuration를 사용하게 되면 backgroundColor, backgroundView가 nil로 리셋된다고 합니다. (반대의 경우도 마찬가지라고 하네요.) 따라서 기존에 사용하던 background 관련 코드들과 background configuration을 함께 사용하지 않도록 하라고 합니다.

 

그리고 테이블뷰 셀에 한해서, content configuration을 사용하면 imageView, textLabel, detailTextLabel과 같은 기본으로 제공하는 뷰들을 대체한다고 합니다. 또한 이후 버전에서는 더 이상 사용되지 않을 거니 주의하라고 하네요.

 

더 많은 커스텀 작업을 하고 싶을 때 configuration을 사용하면 더 많은 옵션을 사용할 수 있다고 합니다.

List content configuration의 경우 모든 렌더링을 구현하는 list content view도 사용할 수 있다고 합니다.

configuration을 사용해서 list content view를 생성하고 업데이트 한 뒤 직접 만든 뷰의 subview로 추가할 수 있다고 하네요. 이렇게 하면 content configuration의 모든 기능을 활용가능하고, 직접 만든 뷰와 결합하여 사용 가능하다고 합니다.

 

List content view는 그냥 UIView이므로 테이블 뷰, 컬렉션 뷰가 아닌 어디서나 사용가능하다고 해요.

 

모든 것을 직접 만들고 싶다면 어떻게 해야 할까요? 그런 경우에도 configuration의 도움을 받을 수 있다고 합니다.

configuration은 성능이 좋기 때문에 위에 나온 문구대로 커스텀뷰를 만들더라도 default configuration을 만들어서 어느 정도 도움을 받는 것도 추천한다고 합니다.

더 나아가서는 content configuration, content view를 직접 만든 뒤 상태에 대한 업데이트를 처리할 수 있도록 해주면 지금까지 설명한 모든 기능을 사용할 수도 있다고 합니다.

 

즉 어떤 복잡한 뷰에서도 configuration의 도움을 받을 수 있다고 합니다.

그래서 이렇게 쓰기 쉽고, 강력한 기능을 가지고 있지만 매우 가벼운, 그리고 다양한 상태를 알아서 업데이트해주는 configuration을 잘 써달라고 하며 영상이 끝이 납니다.

 

확실한 건 실제로 써봐야 알겠지만, 일단 이번 영상에서 알려준 내용만 보면 쓰기 쉬워 보이네요.

영상 처음부터 들었던 의문인 커스텀 뷰에 사용하는 것은 예제 코드를 참고해 가며 사용해 봐야겠어요.

 

이번 영상을 정리한 이 포스팅이 누군가에게 도움이 되길 바라며 글을 마칩니다 :)

 

감사합니다.