[SLP] 커스텀 뷰 UI 이슈

새싹 커뮤니티 앱을 개발하면서 발생한 이슈를 정리한 페이지입니다.

이슈페이지는 평어체로 쓰도록 하겠습니다.

SLP란 현재 싹에서 진행하고 있는 Service Level Project의 약자입니다.

 

 

 

복잡한 방식으로 재사용이 되는 UI 구조

각각 다른 화면에서 비슷한 모양으로 쓰이고 있는 화면 1, 2, 3 

 

상황 설명

<화면 1>과 <화면 2>에서 파란색으로 테두리 된 카드뷰는 각각 다른 화면이지만 비슷한 모양으로 재사용 된다. 파란색 카드뷰를 통째로 커스텀 뷰로 빼려고 하였으나, 보라색 테두리친 부분의 모습은<화면 2>에서만 있고, <화면 1>에서는 보이지 않음. 또한 <화면 1,2>의 카드뷰 상단의 보이는 새싹이미지와 뒤의 배경이미지는 <화면 3>에서 비슷한 모양으로 사용되고 있음을 확인 할 수 있다. 

그리고 파란색 테두리의 카드뷰에는 토글버튼이 있어 카드뷰가 늘어났다 줄어났다 할 수 있어야 함! 

 

 

 

팀원들과 상의하다 내린 커스텀 뷰 구성

 

 

팀원들과 상의를 한 결과 이러한 방식으로 작은 방식으로 커스텀 뷰를 쪼개고 그걸 또 모아 하나의 커스텀 뷰를 만들게 되었음. 나는 이전에는 뷰를 작은 단위로 쪼개는 것에 대해서 막연히 좋은 습관이라는 생각을 했었음. 이러한 구성을 해보면서 막연히 생각했던 커스텀 뷰에 대해 느낀점이 몇가지 있다.

 

 

 

재사용 될 커스텀뷰를 쪼개는 것은 좋지만,  계층은 불필요하게 쌓는 것은 피하자

화면 2의 모습

작은 뷰로 나누고 그 걸 합쳐서 카드뷰 하나를 구성하게 되었다. 여기서 이미 커스텀으로 쌓은 카드 뷰의 계층 구조는 2개가 된다. 위의 첨부된 <화면 2>에서는 보면 카드뷰는 테이블 뷰로 셸안에 반복되는 구조를 갖는다.  그렇다면 셸 단위 안에 커스텀으로 만든 계층구조가 2개인 카드뷰를 넣게 됨! 

 

근데 계층이 2개인게 뭐가 문제야? 라고 생각한다면 밑에 상황을 예시로 생각을 해보자

 

그럼 뷰컨트롤러에서 카드뷰 안에 새싹타이틀 버튼들을 접근한다고 치자. 그러면 셸안의 커스텀카드뷰안의 새싹타이틀커스텀 뷰안의 스택뷰넣어진 버튼을 접근하게 되는 상황임...말 만들어도 계층을 거쳐서 들어가야 하기 때문에 , 복잡한 상황임을 알 수 있다. 

 

그러나 유저 정보를 API통신 관점에서 볼 때에는 <화면2>의 모든 정보들은 같은 위계를 가짐 ( 같은 위계를 같는 다는 말의 의미는 하나의 API통신으로 구성된다는 말) 같은 위계이기 때문에 VC는 하나로만 구성해야 하고, 하나의 VC만을 이용하는데 뷰의 계층을 쌓다보면 업데이트를 할때 타고타고 들어가야하는 중복코드가 많이 생기게 되고 , 코드가 한눈에 알아보기 어려워진다.

 

 

 

 

결론

재사용 될 커스텀뷰를 쪼개는 것은 좋지만,  계층은 불필요하게 쌓는 것은 피하자

원래는 위의 구성된 커스텀 뷰 뿐만 아니라, 카드뷰와 상단의 이미지 뷰를 묶어 또 하나의 커스텀 뷰로 구성하려고 했으나 그렇게하지 않았다. 그러면 또하나의 계층 구조를 들어가야하는 상황이 발생하기 때문에 계층 구조는 최소화 하는 방향으로 정하게 되었다. 

 

멘토님들께서 최대한 현업에서 구성된 복잡한 UI구조를 염두해두시고 기획을 만드셨다 하셨다고 하심. 단순히 통으로 재사용할 수 없는 구조를 일부러 만들어 놓으신거 같고, 거기에 토글 애니메이션 안의 텍스트 리뷰에 의 길이에 따라 Self-Sizing 되는 카드뷰 구성으로 아주 복잡하게 구성이 된 것같다. 그리고 상단의 새싹 이미지와 배경이미지도 그냥 이미지가 아니라 인앱결제로 구매해서 사용될 수 있는 이미지들임...;;  UI를 구성하는것 뿐만 아니라 이걸 어떻게 API 통신으로 받아오고 보내주어야하는 과정에서 어떻게 UI와 엮을것인지도 심도있게 고민을 해야 할 것 같다