[swift] 85.MarqueeLabel을 이용한 유튜브 동영상 제목 스크롤 효과 구현하기

안녕하세요! 이번에는 MarqueeLabel을 이용하여 유튜브 동영상 제목에 스크롤 효과를 구현하는 방법에 대해 알아보겠습니다.

많은 유튜브 동영상은 긴 제목을 가지고 있고, 화면에 모든 제목을 표시하기에는 공간이 부족할 수 있습니다. 이때 MarqueeLabel을 사용하면 제목을 좌우로 스크롤하는 효과를 구현할 수 있습니다.

MarqueeLabel 설치하기

먼저, MarqueeLabel을 프로젝트에 설치해야 합니다. 이를 위해서는 CocoaPods을 사용하여 다음과 같이 Podfile에 MarqueeLabel을 추가합니다.

platform :ios, '9.0'
use_frameworks!

target 'YourProjectName' do
  pod 'MarqueeLabel/Swift'
end

그리고 터미널에서 pod install 명령을 실행하여 MarqueeLabel을 설치합니다.

MarqueeLabel 사용하기

MarqueeLabel을 사용하려면 다음과 같이 간단한 단계를 따르면 됩니다.

  1. import 문을 사용하여 MarqueeLabel을 프로젝트에 가져옵니다.
  2. UILabel 대신 MarqueeLabel로 제목 레이블을 만듭니다.
  3. MarqueeLabel의 속성을 설정하여 스크롤 효과를 조정합니다.

다음은 스크롤 효과를 구현한 예시 코드입니다.

import UIKit
import MarqueeLabel

class ViewController: UIViewController {

    @IBOutlet weak var titleLabel: MarqueeLabel!

    override func viewDidLoad() {
        super.viewDidLoad()

        // MarqueeLabel 설정
        titleLabel.type = .continuous
        titleLabel.speed = .duration(8)
        titleLabel.animationCurve = .easeInOut
        titleLabel.fadeLength = 20
        titleLabel.leadingBuffer = 30
        
        // 유튜브 동영상 제목 설정
        titleLabel.text = "마블 블랙 위도우 예고편 - 감동보다 액션, 스릴 넘치는 여전히 최고의 여자 슈퍼히어로"
    }
}

이 예시에서는 MarqueeLabel의 여러 가지 속성을 설정하여 스크롤 효과를 커스터마이징하였습니다. type 속성은 스크롤 애니메이션의 종류를 설정하고, speed 속성은 스크롤 속도를 설정합니다. fadeLengthleadingBuffer 속성은 스크롤 시작과 끝에서 텍스트의 양 옆을 흐리게 보여주는 길이를 설정합니다.

결론

MarqueeLabel을 사용하여 유튜브 동영상 제목에 스크롤 효과를 구현할 수 있습니다. MarqueeLabel의 다양한 속성을 조정하여 원하는 스크롤 효과를 만들어보세요. 이를 통해 사용자들은 화면에 제한된 공간에도 긴 동영상 제목을 편리하게 확인할 수 있습니다.


참고 자료