[swift] 95.MarqueeLabel을 이용한 소셜 미디어 알림 스크롤 효과 구현하기

앱에서 중요한 알림을 사용자에게 시각적으로 강조하고 싶다면 스크롤 효과를 사용할 수 있습니다. 신문이나 광고에서 자주 볼 수 있는 이 효과는 사용자의 관심을 끄는 데 큰 도움이 됩니다. 이번에는 Swift의 MarqueeLabel을 사용하여 소셜 미디어 알림을 위한 스크롤 효과를 구현해보겠습니다.

MarqueeLabel 소개

MarqueeLabel은 앱에서 텍스트가 주어진 공간을 벗어날 경우 스크롤 효과를 주는 데 사용되는 UILabel 서브클래스입니다. 별도의 애니메이션 코드를 작성하지 않아도 쉽게 스크롤 효과를 적용할 수 있습니다. 또한 텍스트의 속도, 방향, 보여주는 여부 등을 조정할 수 있는 다양한 옵션을 제공합니다.

MarqueeLabel 설치

MarqueeLabel을 사용하려면 먼저 프로젝트에 MarqueeLabel 라이브러리를 설치해야 합니다. Cocoapods를 이용하여 간편하게 설치할 수 있습니다. Podfile에 다음과 같이 추가한 후 pod install을 실행하세요.

pod 'MarqueeLabel/Swift'

MarqueeLabel 사용하기

MarqueeLabel을 사용하려면 다음 순서를 따르세요:

  1. MarqueeLabel을 추가할 뷰 컨트롤러의 스토리보드에서 UILabel을 추가합니다.
  2. UILabel을 MarqueeLabel 클래스로 변경합니다. Identity Inspector에서 Custom Class를 MarqueeLabel로 설정합니다.
  3. UILabel에 추가할 MarqueeLabel 속성을 설정합니다. 속성 창에서 다음과 같은 속성을 설정할 수 있습니다:

    • Type: MarqueeLabelType (좌에서 우로 스크롤, 우에서 좌로 스크롤, 위에서 아래로 스크롤 등)
    • Rate: CGFloat (스크롤 속도)
    • Fade Length: CGFloat (텍스트가 사라지기 시작하는 거리)
    • Animation Delay: CGFloat (애니메이션이 시작하기 전에 대기하는 시간)
    • Labelize: Bool (스크롤이 끝난 후 텍스트를 여전히 표시할 것인지 여부)
  4. 뷰 컨트롤러의 코드에서 MarqueeLabel의 텍스트를 설정합니다. 아래는 간단한 예시 코드입니다:
import UIKit
import MarqueeLabel

class NotificationViewController: UIViewController {
    @IBOutlet weak var notificationLabel: MarqueeLabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        notificationLabel.text = "새로운 알림이 있습니다!"  
    }
    
    // ...
}

위 예시 코드에서 notificationLabel은 스토리보드에서 추가한 MarqueeLabel입니다. 텍스트를 설정한 후 앱을 실행하면 텍스트가 스크롤되는 것을 확인할 수 있습니다.

마치며

이제 MarqueeLabel을 사용하여 소셜 미디어 알림 스크롤 효과를 구현하는 방법을 알아보았습니다. MarqueeLabel은 간단한 설정으로 텍스트를 자연스럽게 스크롤할 수 있는 기능을 제공합니다. 앱의 사용자 경험을 향상시키고 중요한 알림을 강조하는데 유용하게 사용할 수 있습니다.