[UIKit] UICollectionView 내부에 들어가는 cell의 규칙(?)을 만들었습니다.

💬 시작하며 TMI 설명

지금은 애플 디벨로퍼 아카데미에서 맨 마지막 프로젝트를 진행하고 있다. 마지막인 만큼 프로젝트 기간이 3달정도로 좀 긴 편이고, 그 기간동안 팀원들과 기획 + 디자인 + 개발 까지 모두 완료해야한다.

타 부트캠프와 차이점이라고 생각되는 점은, 애플 디벨로퍼 아카데미에 있으면 '기획력'이 올라가고, 쓸모있는 앱 대해서 다시 한 번 생각하게 된다. 주변 팀들의 아이디어만 봐도, 그리고 우리팀의 아이디어만 봐도 그냥 학생 수준의 프로젝트는 하고싶지 않다는 의지가 강하고, 실제로 고객 유치에 성공할 것 같은 앱을 만들기 위해서 힘을 쏟는다. 모두가 아주 빨간 열정사과이다 🍎

우리 팀은, 우선 'EDUTECH'를 대주제로 삼고, narrow down 하면서 프로젝트를 진행했다. 

---

🤔 무엇을 만들었나요

1️⃣ UICollectionView

내가 맡은 뷰는 가장 메인화면에 '콜렉션뷰'가 포함된 뷰이다. 일단 디자인이 완전히 나오지 않은 상태이므로, 와이어 프레임 기준으로 구현했다. UICollectionView는 Cell도 따로 만들어야하고, Datasource 와 Delegate를 따로 정의해서 꾸며주어야하기 때문에 초보자가 접근하기는 가장 어려운 뷰라고 생각된다. 그리고 확장성도 어마무시하기 때문에,,,, CollectionView만 굉장히 잘 다뤄도 자신감이 폭풍상승할 것 같다.

내가 맡은 이슈이다.

https://github.com/DeveloperAcademy-POSTECH/MacC-Team-EarthValley80/issues/9

[FEAT] 요모조모 뉴스 화면 레이아웃 잡기 · Issue #9 · DeveloperAcademy-POSTECH/MacC-Team-EarthValley80

나는 위와 같은 화면의 콜렉션뷰를 구현해야한다.

 

2️⃣ 중요한 것은 무엇이었나요

• 디자이너의 의도를 헤치지 않게 개발할 것

내가 가장 중요하게 생각하고 개발한 부분이다. 물론, 개발적으로 불가능한 부분에 대해서는 디자이너와 충분히 상의하고 디자인을 진행했고, 내가 충분히 도전할 수 있을만한 범위의 요소들만 받아왔다.

해당 뷰에서 가장 중요한 점은 세 가지이다.

1. 양쪽 정렬을 꼭! 맞출것
2. 한 줄에 한칸자리 네모는 5개가 들어가고, 들어갈 label이 긴 경우 두칸을 차지할 수 있다는 것
3. 똑같은 배열의 row가 반복되지 않을 것

이 세가지를 지키기 위해서는, server에서 들어오는 데이터를 재정렬해야한다고 생각했다.

 

3️⃣ 그래서 머리가 깨지도록 로직에 대해서 생각햇어요 ; 🤯🤯🔥

서버에서 들어오는 label의 길이는 모두 다를 것이고, label의 갯수도 매번 다를 것이다. 그래서 모든 경우의 수에서 저것과 같은 뷰를 만들기 위해서 노력해야했다.

최종 갯수를 기반으로 5개씩 count를 해볼까?

내가 가장 처음 생각한 방식이다. label의 길이가 길면 두칸을 차지하기 때문에 count에 +2를 해준다. 아닌경우는 +1을..

var count = 0
var temp = [newsData]()
var newData = [newsData]()

for i in 0..<data.count {
    if count < 5 {
        if data[i].newsTitle.count >= 30, count + 2 <= 5 {
            count += 2
            newData.append(data[i])
        } else if data[i].newsTitle.count >= 30, count + 2 > 5 {
            temp.append(data[i])
        } else if data[i].newsTitle.count < 30 {
            count += 1
            newData.append(data[i])
        }
    }

    if count == 5 {
        count = 0
    }
}

이런식으로 짰었다. 이건 온전히,,, "한줄에 다섯개 다 찼나?"만 고려한 코드였다. 그래서 만약 긴 label만 연속적으로 들어왔을 때, 내가 원하는대로 전혀 구현하지 못했고, 5가 채워지지 않느다면, 에러가 나고 말았다. 

그래도 첫번째 시도 ,, 나쁘지 않았다.

 

다시생각해보면, label이 길어서 두개의 자리를 차지하는 애들만 처리를해주면 되는거였다. 한개짜리는 row를 깨지게 만들지 않으니 전혀 고려하지 않아도 되는 상황이었고!!!

그래서 2개의 칸을 차지하는 애들 먼저 생각해주었다. 2개를 차지하는 애들은 한 row에 최대 2개까지 들어간다.
그래서 long 과 short로 길이에 따라 label을 나눠주고, longCount를 2로 나눈 row에 일단 2개의 long label, 1개의 short label을 넣어주었다.

var long = data.filter { $0.newsTitle.count >= 30 }.map { $0 }
var short = data.filter { $0.newsTitle.count < 30}.map { $0 }

var newdata = [newsData]()
var longCount = long.count
var shortCount = short.count

for _ in 0..<longCount/2 {
    if longCount % 2 == 1 {
        newdata.append(long.removeLast())
        newdata.append(short.removeLast())
        newdata.append(short.removeLast())
        newdata.append(short.removeLast())
    }

    for _ in 0..<2 {
        newdata.append(long.removeLast())
    }

    newdata.append(short.removeLast())
}

for i in short {
    newdata.append(i)
}

와 잠깐만 이렇게하면,,,, 아래처럼 굉장히 UI적으로 지루한 뷰가 완성된다. (시뮬레이터 캡쳐를 못해서 대충 네모 그림으로 대체한다.)

심지어 2칸을 차지하는 label이 갯수가 많아지게 되면

이렇게 마지막 두줄에서 디자인 의도가 깨져버리게 된다. .. 이 부분으 ㄹ어떻게 처리할건데??? 그리고 심지어 row의 규칙이 반복되는 것 조차 뜯어 고쳐야했다.

 

💬 이걸로 정말 오랜 시간동안 고민했다.... 😭 머리가 깨져버리는줄

분명 규칙이 숨어있을 것 같았다. 그리고,, 수학적으로 접근하면 알고리즘을 적용해서 풀릴 것 같았다. 근데 내 머리가 ,,, 안돌아가,,,

그래서 일단 일정한 패턴을 주어서 다양한 row 규칙을 만들어주도록 만들었고, 2칸짜리 차지하는 label이 많아서 1개짜리 뷰가 더 필요한 경우에 대한 분기처리를 진행해서 디자인의도가 헤쳐지지는 않는, 뷰를 완성했다.

private func sortdata(_ data: [newsData]) -> [newsData] {
        var short = data.filter { $0.newsTitle.count < 30 }.map { $0 }
        var long = data.filter { $0.newsTitle.count >= 40 }.map { $0 }
        let longcount = long.count
        var mid = [newsData]()
        var newdata = [newsData]()
        var lastloop = 0

        if long.count / 2 > short.count {
            lastloop = (long.count / 2) - short.count
            print("lastloop \(lastloop)")
        } else if long.count / 2 + 2 <= short.count {
            for _ in 0..<(long.count / 2) / 2 {
                mid.append(short.removeLast())
                mid.append(short.removeLast())
            }
        }

        if lastloop != 0 {
            for _ in 0..<lastloop {
                short.insert(newsData(newsTitle: "-", newsCategory: "-"), at: 0)
            }
        }

        for i in 0..<longcount/2 {
            if long.count == 1 {
                break
            }

            if i % 3 == 0 {
                newdata.append(long.removeLast())
                newdata.append(long.removeLast())
                newdata.append(short.removeLast())
            } else if i % 3 == 1 {
                newdata.append(short.removeLast())
                newdata.append(long.removeLast())
                newdata.append(long.removeLast())
            } else {
                newdata.append(long.removeLast())
                newdata.append(short.removeLast())
                newdata.append(long.removeLast())
            }
        }

        if mid.count != 0 {
            for i in stride(from: Int.random(in: 0...8), through: newdata.count, by: 5) {
                if newdata.count > i {
                    if newdata[i].newsTitle.count >= 40 {
                        newdata.insert(mid.removeLast(), at: i)
                        newdata.insert(mid.removeLast(), at: i+1)
                        newdata.append(newdata[i+2])
                        newdata.remove(at: i+2)
                    }
                }
            }
        }

        for s in short {
            newdata.append(s)
        }
        return newdata
    }

 

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 참담하다 정말,, 코드가 진짜,,

하하하하하하하ㅏㅎ하하 

내가 그래서 어찌저찌 처리한 방법은, 

결국 2개를 차지하는 label (long 라벨이라고 부르겠다.) 만 예외를 잘 처리해주면 되기 때문에 여기에 집중했다.
만약 long 라벨.count / 2 한 수보다 short라벨(1개짜리)이 더 적다면, 임의의 1개짜리 라벨을 만들어서 넣어주었다.

그리고,,, long long short, short long long, long short long 규칙을 기반으로 우선 정렬을 시도했다. 

마지막으로 매번 같은 규칙의 뷰가 반복되지는 않지만, 2개짜리가 너무 많이 들어가있으면 뷰가 또 지루해질 수도 있어서 한개짜리 뷰를 조금 더 적절하게 섞어줘야겠다고 생각했다. 그래서  long라벨.count/2한 수보다 short라벨이 많으면, 지루한 UI가 되지 않도록, 랜덤 row index에 long라벨 대신 short라벨 두개를 뿌려줄 수 있도록 했다.

🤯 내가 말하고도,,, 뭔말인지 잘 이해가 안되는데, 변수명 정리와 PR을 날릴때 다시 한번의 정리가 필요하다. (추후 링크를 걸어두겠다.)

어쨋든 그래서 완성한 뷰는 다음과 같다..

 

빨간색뷰는, 다른 그림이 들어갈 예정이다. 디자이너에게 위 움짤처럼 2칸을 차지하는 long 라벨이 굉장히 많은 경우, 칸이 전부 비게되어 라인이 깨질 수도 있다는 점을 설명했다. 그래서 빨간색 부분에는 귀여운 일러스트가 들어갈 것 같다! 귀엽겟당,, 😉

---

💬 마무리 회고

어쨋든,,, 내일부터는 개발일지를 차근차근 개발하면서 써놓는것도 좋을 것 같다. .. 더 많이 느낀점도 적을 수 있을 것 같고! 
아직 나는 부족한점이 많다. 특히, collectionview는 만져도 만져도 신기한게 많은데, 어제 면접에서 대답하지 못한 요소들이 막 떠오르기 시작했다. 맞다...내가 분명 건드려보고, 분명 만져본 코드인데, 막상 물어보니까 "읭 저게뭐지?" 하는 생각과 함께 "아니오, 다뤄보지 않았습니다."라는 바보같은 말을 ... 내뱉었다는 점을 깨달았다.

아,,, 이게 자동완성으로 collectionview만들라면 이런 function은 그냥 있어야해~ 하는 안일한 생각때문에 놓친 부분이라고 생각된다. 앞으로 공부할 때는, 그냥 구현보다는, 내가 만지는 이게 도대체 어떻게!! 구현되는것인지에 대한 생각을 해봐야할 것 같다.

 

추가로 오늘 스크럼에서 진행한 나의 회고도,, 붙여둔다.

오늘 어찌저찌 요모조모 뉴스 메인화면의 collectionview 로직에 대해서 생각을 완료하고 구현을 해놨다.
근데,,, 코드가 진짜 더럽다 ㅋㅋㅋㅋㅋㅋㅋ 초반에 '코드를 어떻게 이뿌게 짜지?'라는 고민을 하면서 로직을 생각했는데, 
그러다보니 로직이 점점 산으로 가기 시작했다.... 그래서 일단 어찌저찌 구현은 해놧는데 리팩토링이 필수일것 같다. 
이또한 배울점이 있겠지!! 아자자
(근데 100% 수학적으로 접근할 수 있는 알고리즘을 적용시킬 수 있을 것 같다. 꼭 풀어봐야지!!!)

듀나의 코드는 보고 배울점이 참 많은 것 같다. 깔끔하게 짜는 것부터, 적절하게 사용되는 extension, Why에 대해서 항상 생각하는 점 등,,
아직 듀나에게 그리고 잭에게도 나는 1인분도 다 못한것 같은 느낌이 들어서 너무 슬픈 하루였다. 
팀에게 민폐가 되지 않도록 성장 곡선을 가파르게 그려야지! 점점 나도 더 좋아지겠지 긍살긍살 (๑˃̵ᴗ˂̵)و```