만화경 구름톡 - 5. text가 겹치는 이슈

* 저는 우아한형제들과 전혀 상관이 없습니다. 학습차원으로 구름톡 기능을 따라 만드는 중입니다.

 

안녕하세요. Skillist입니다

 

지난 글까지, MarqueeLabel을 활용하여, 구름톡을 구현했습니다.

https://cocoapods.org/pods/MarqueeLabel

MarqueeLabel

 

이젠, 단일 구름톡이 아닌 다중 구름톡이 겹치지 않게끔, 알고리즘을 생각하고 구현하면됩니다.

참 쉽죠??????

여담으로, 그림 그리기를 좋아하여 밥로스 아저씨를 좋아했는지,

밥로스 아저씨의 그림이 너무 멋있어서, 그림 그리기를 좋아했는지에 대한 기억은 없지만,

아주 어릴때, 밥로스 아저씨의 강의는 꼭 챙겨봤습니다.

밥로스 아저씨, 보고싶어요.

 

그런데, 문제가 생겼습니다.

알고리즘을 계산하고 구현해도, 원하는대로 동작을 하지 않습니다???

그래서 구름톡이 계속해서 겹쳐서 나와요;;;;;;;;;

원인을 천천히 찾아보죠.

 

우선 제가 생각한 로직을 설명해볼게요

MarqueeLabel을 다음과 같이 구성합니다.

"leadingBuffer", "Text", "trailingBuffer"

text가 흐르는 속도와 전체 길이(leadingBuffer + Text + trailingBuffer)의 값이 동일한 경우 

leadingBuffer와 trailingBuffer의 길이를 적절히 조절하면, Text가 겹치지 않게 구현할 수 있겠죠???

이렇게 말이에요.



속도와 전체길이는 동일하고, Text의 위치만 변경하는것이니깐요.

그래서, 다음과 같이 설정하여 테스트 해봤어요.

이동속도와 textSize는 동일하고, leadingBuffer + Text + trailingBuffer 또한 동일합니다.

값은 순서대로 text, leadingBuffer, textSize, trailingBuffer 입니다.

 

 

그리고 그 결과는?????

시작할때는 3개의 "속도비교" text가 일정한 간격을 유지하며 흐릅니다.

하지만, 반복될수록 text 사이의 간격은 달라집니다.

왜 간격이 달라질까요?;;;;;

매우 당황했어요.

 

그래서 MarqueeLabel 라이브러리  코드를 한번 살펴봤어요.

(출처 : https://github.com/cbpowell/MarqueeLabel)

구글 번역기
     레이블 텍스트의 후행 가장자리와 레이블 프레임 사이의 버퍼(오프셋)입니다.
     
     이 속성은 레이블 텍스트의 후행 가장자리와 레이블 프레임 사이에 추가 공간(버퍼)을 추가합니다. 그만큼
     후행 가장자리는 스크롤 방향에서 반대 방향을 향하는 레이블 텍스트의 가장자리입니다(즉, 애니메이션을 적용하는 가장자리
     스크롤하는 동안 마지막으로 오프스크린).
     
     기본값은 '0'입니다.
     
     - 참고: 이 속성에 설정된 값은 'labelize' 속성이 'true'로 설정된 경우에는 효과가 없습니다.
     
     - 참고: 연속형 레이블의 경우 'leadBuffer', 'trailingBuffer', 'fadeLength' 중 가장 작은 값
     두 레이블 인스턴스 사이의 간격으로 사용됩니다. 0은 세 가지 속성 모두에 허용되는 값입니다.
     
     - 참조: 선행 버퍼

"- Note: For Continuous-type labels, the smallest value of `leadingBuffer`, `trailingBuffer`, and `fadeLength`

     is used as spacing between the two label instances. Zero is an allowable value for all three properties.

네????????

음.......... 그랬군요.

제가 생각한 trailingBuffer가 아니었습니다.

 

이때부터, 모든게 귀찮고 하기 싫어졌습니다. 개발 의욕이 뚝 떨어졌어요.

 

 

 

그런데,,,,,,,,,,, 그런데....

구름톡 개발자님께서 댓글로 가이드를 주셨습니다.

 

사실, 클론코딩을 진행하며 관계자로부터 "글을 내려달라는 연락이 오지 않을까"라는 생각을 조금 가지고 있었습니다.

그래서, 디즈니 플러스의 클론코딩 프로젝트를 오픈하지 않았거든요.

하지만, 개발 피드백을 주실준 몰랐습니다.

이 자리를 빌려, 개발자님, 다시 한번 더 감사의 말씀드립니다!

 

덕분에, MarqueeLabel을 사용하며, 생겼던 모든 수수께끼가 풀렸습니다.

 

text에 대한 터치 이벤트를 꾸역꾸역 구현하며, 깔끔하지 않다는 생각을 했습니다.

차라리 marqueeLabel을 직접 구현하는게 좋지 않을까? 라는 생각을 했어요.

그 생각을 가지고, 며칠전에 탭 이벤트를 구현하다가 한번 포기(delay)했었거든요.

또한, text가 겹치는 문제에 대해서도 해결할 수 있었어요.

marqueeLabel을 사용하지 않고 직접 구현하면 되니깐요.

제 실력이 부족해서 marqueeLabel을 제대로 활용하지 못한것일수도 있어요. 

그렇다고 marqueeLabel가 나쁘다는건 아닙니다.

제가 원하는 스펙에 맞지 않을 뿐이죠.

 

그래서 CAKeyframeAnimation을 직접 구현해본 결과입니다.

text의 간격도 일정하게, 제가 생각한대로 동작하고 있습니다!

다중 text가 겹치지 않게 간격을 조절하면 됩니다!!!!!

 

여담으로, 이번 개발 의욕이 확 떨어졌을때 그렸던 그림이에요.

 

오늘은 미세먼지도 안좋고, 대통령 선거에, 어제 코로나 확진자가 34만명이라

공부만 해야겠네요.

 

여러분도 화이팅하세요~~

 

———————————————————————————————————————————————————

 

잘못되거나 부족한 내용 등, 피드백 감사합니다!