소개

개발을 하다 보면 기획이나 디자인 변경에 따른 고통을 많이 겪게 됩니다. 전 직장에서의 이런 고통을 해소한 제 경험을 바탕으로 이 강연을 진행하겠습니다.

카드뷰

왼쪽은 제가 처음 만든 버전의 상품 카드뷰이고, 오른쪽은 인스타그램의 카드뷰입니다. 카드뷰는 사각형 형태의 리스트로 안드로이드에서는 흔하게 쓰는 뷰입니다.

iOS에서는 UITableViewCell이나 UICollectionViewCell로 만드는데, 같은 모델을 쓰는 다양한 모습의 카드를 요청하는 경우가 많습니다.

이런 경우 어떻게 하는 것이 좋을까요? 저는 보통 3번 정도 중복된 코드가 반복되면 구조를 바꾸곤 합니다. 이들을 하나의 뷰로 만들고 컨테이너에 싣는 형태로 만들었습니다.

구조와 예제 코드

프로덕트 JSON이 들어오면 모델로 만들면서 카드들이 어떤 타입인지 정의했고, 타입에 따라 뷰를 생성했습니다. 이제 뷰모델의 코드를 보여드리겠습니다.

뷰모델은 카드타입과 데이터로 구성되며, 필요 없는 데이터들은 옵셔널로, 처리해야 할 액션은 Rx로 넣었습니다. 원래 종류가 더 많지만 카드 타입을 간략하게 보여드리기 위해 small과 big으로 나누고 사이즈를 정의했습니다.

구현부를 보여드리겠습니다. 초기화할 때 카드 타입과 모델을 받아서 구성합니다.

뷰 타입도 뷰모델 타입과 같이 필요한 것을 다 넣습니다. 제 경우 커버 사진이나 태그, 제목, 별점 등을 정의해서 넣었고 카드 뷰 타입을 카드 타입에 구현하도록 설정해서 타입별로 불러와서 사용할 수 있게 했습니다.

카드 뷰를 만들때는 각각 다르게 미리 만들 필요 없이 각 카드 타입에서 정의된 카드 사이즈 등의 정해진 데이터를 가져옵니다. init 때 받는 superview가 컨테이너가 되며, 여기에 컨테이너 맞게 넣고 인셋도 맞추는 코드를 볼 수 있습니다.

설정을 참고할 수 있도록 configure 내용도 공유합니다. 카드뷰는 보통 재사용되므로 init된 것을 나중에 재사용할 수 있도록 configure에 분리해두었습니다.

카드뷰의 레이아웃은 각각 다르므로 각 레이아웃에 대응되는 구현을 따로 따로 뒀습니다.

이렇게 구현된 모습입니다. 카드뷰가 각 셀의 contentView 하위에 들어가는 형태로, 뷰가 하나 더 들어간다는 것이 단점이 될 수도 있습니다.

프로토콜을 정의해서 여러 군데에서 재사용할 수 있도록 했습니다. 컬렉션뷰에 프로토콜을 정의해서 만들면 되고, 추가로 컬렉션뷰에 초기화할 내용도 위 코드처럼 만들 수 있습니다.

테이블뷰에는 카드뷰를 어디에 보일 것인지 정하고 컨테이너만 정하면 됩니다.

실제 사용 예

새로운 기획이 들어와서 또 다른 뷰를 만들어야 한다고 가정해 보겠습니다.

먼저 진짜 마지막 카드 타입을 추가합니다. 뷰모델 타입에서는 따로 변경 사항이 없습니다.

카드뷰 타입에 새로 만든 타입을 넣어줍니다. 여기서는 커버 이미지가 없는 셀인 경우로 필요없는 서브뷰는 nil을 반환했습니다. 카드뷰에서도 따로 변경 사항이 없습니다.

이제 레이아웃을 추가하면 됩니다.

마지막으로 버튼이 추가된 상황이므로 버튼을 컨테이너로 사용합니다. 내부적인 구현은 이걸로 끝나며, 밖에서 추가적인 액션이 필요합니다.

뷰모델과 버튼을 선언하고 스택뷰에 넣어서 모든 과정이 끝났습니다.