tToastKit / 문서

SWIFTUI · 오픈 소스

자연스럽게 어울리는
알림.

SwiftUI 앱에 세련된 스택형 토스트 알림을 추가하세요. 제스처, 타이밍, 스타일을 한 번에 제공합니다.

시작하기 ↓iOS 17+ · Swift 5.10
01

바로 시작하기

시작하기

Swift Package Manager로 ToastKit을 추가한 다음, 알림을 표시할 뷰에 ToastCenter를 연결하세요.

ContentView.swiftSWIFT
import SwiftUI
import ToastKit

struct ContentView: View {
    @State private var toasts = ToastCenter()

    var body: some View {
        Button("저장") {
            toasts.present(.normal, title: "변경 사항 저장됨")
        }
        .toasts(toasts)
    }
}
✳

이제 끝입니다. 토스트가 안전 영역 하단에 4초 동안 표시됩니다. 기본 스와이프 동작으로 삭제하거나 다음 방문까지 보류할 수 있어요.

Xcode에서 File → Add Package Dependencies를 선택하고 https://github.com/DavidRicardoWilde/swiftui-toastkit를 입력하세요.

02

메시지 구성

토스트 메시지

ToastMessage에는 표시할 내용, 의미를 나타내는 상태, 표시 시간, 선택적인 탭 및 스와이프 동작이 들어갑니다. 간단한 알림에는 편의 메서드를 사용하고, 더 세밀한 제어가 필요하면 메시지를 직접 만드세요.

toasts.present(.warning,
    title: "저장 공간 부족",
    message: "동기화를 계속하려면 공간을 확보하세요."
)

let message = ToastMessage(
    status: .notification,
    title: "새 사진",
    message: "오늘 사진 12장이 추가됐어요",
    icon: .system("photo.on.rectangle"),
    duration: 6
)
toasts.present(message)
NORMAL

일반

일상적인 확인에 어울리는 차분한 표현입니다.

WARNING

주의 필요

문제가 실패로 이어지기 전에 살펴보도록 알립니다.

ERROR

오류

실패를 분명하게 전달하는 시각적 신호입니다.

NOTIFICATION

알림

앱의 강조 색상으로 소식을 전합니다.

이미 표시 중인 토스트와 같은 id로 다시 표시하면 중복을 만들지 않고 내용을 갱신해 맨 앞으로 가져옵니다. “동기화 중…”에서 “동기화 완료”로 바뀌는 상태를 보여줄 때 유용합니다.

03

잠시 보여주기

표시 시간

.automatic은 기본값인 4초 동안 표시됩니다. 초 단위로 직접 지정하거나 사용자의 확인이 필요한 알림에는 .indefinite를 사용할 수 있어요.

// 2초 동안 표시
ToastMessage(title: "복사됨", duration: 2)

// 직접 닫을 때까지 표시
ToastMessage(title: "동기화 실패", duration: .indefinite)

let toasts = ToastCenter(defaultDuration: 6)
  • 맨 앞에 있는 토스트만 카운트다운합니다.
  • 뒤에 가려진 토스트는 앞으로 나올 때까지 표시 시간을 사용하지 않습니다.
  • 스택을 누르고 있거나 앱이 백그라운드에 있으면 타이머가 멈춥니다.
04

명확한 다음 단계

제스처와 동작

탭, 양방향 스와이프, 길게 누르기를 사용할 수 있습니다. 길게 누르면 선택하기 전에 양쪽 스와이프 동작을 확인할 수 있어요. VoiceOver에서도 이름으로 같은 동작을 선택할 수 있습니다.

제스처기본 동작맞춤 설정
탭동작 없음, 뒤의 콘텐츠로 전달tapAction 또는 onTap
leading 방향 스와이프토스트 삭제swipeActions.leading
trailing 방향 스와이프다음 방문 때 다시 표시swipeActions.trailing
길게 누르기양쪽 동작 미리 보기같은 스와이프 동작 사용
let archive = ToastAction(
    id: "archive",
    title: "보관",
    icon: .system("archivebox"),
    confirmation: "보관됨"
) { toast in
    store.archive(toast.id)
}

toasts.present(ToastMessage(
    title: "Ana님의 메시지",
    tapAction: ToastAction(title: "열기") { toast in
        router.open(toast.id)
    },
    swipeActions: ToastSwipeActions(leading: archive, trailing: .later)
))

동작은 handler 실행, 스택의 onToastAction 옵저버 호출, 동작 효과 적용 순서로 처리됩니다. 기본 제공 .later는 페이지가 다시 나타날 때까지 토스트를 보류합니다.

05

원하는 모습으로

스타일과 테마

기본 .glass 스타일은 상태에 따라 색이 달라지는 반투명 카드입니다. ToastTheme으로 디자인 토큰을 조정하거나, 장식 없는 .plain을 선택하거나, ToastStyle을 구현해 직접 카드를 만들 수 있어요.

MyScreen()
    .toasts(toasts)
    .toastTheme(ToastTheme(
        titleFont: .headline,
        tint: { status in
            status == .notification ? .pink : ToastTheme.standardTint(status)
        },
        cornerRadius: 16
    ))

// 배경이나 고정 색상 없이 시작
MyScreen().toasts(toasts).toastStyle(.plain)
모션 색상 표면 글꼴

맞춤 스타일에서는 아이콘, 제목, 본문, 상태와 길게 누른 트랙에 올라왔는지 여부를 확인할 수 있습니다. 레이아웃과 제스처는 스택이 관리합니다.

06

자연스러운 위치

위치와 너비

기본적으로 카드는 하단에서 쌓이며 사용 가능한 안전 영역 너비의 60%를 사용합니다.

// 상단에 배치
MyScreen().toasts(toasts, placement: .top)

// 안전 영역의 90% 또는 고정 너비
MyScreen().toasts(toasts, width: .fraction(0.9))
MyScreen().toasts(toasts, width: .points(320))

TabView 안에서는 탭 콘텐츠에 .toasts(toasts)를 붙이세요. 시스템 탭 바와 하단 액세서리는 이미 안전 영역에 반영됩니다. 맞춤형 플로팅 바에는 .toastObstruction()을 지정하면 스택이 겹치지 않게 이동합니다.

✓저장됨하단 · 60%
안전 영역
07

모두를 위한 설계

접근성

특정 제스처 없이도 동작을 사용할 수 있으며 SwiftUI 환경의 접근성 설정을 따릅니다.

  • VoiceOver가 각 카드를 읽고 동작 로터에서 양쪽 스와이프 동작을 제공합니다.
  • 동작 줄이기 설정에서는 슬라이드가 페이드 효과로 바뀝니다.
  • 투명도 줄이기 설정에서는 유리 표면이 불투명해집니다.
  • 대비 높이기 설정에서는 유리 테두리가 선명해집니다.
  • Dynamic Type에 맞춰 텍스트와 상태 아이콘 크기가 조정됩니다.
08

사용자의 언어로

앱 현지화

ToastKit의 기본 동작 레이블은 영어, 일본어, 간체 중국어, 번체 중국어로 제공됩니다. 제목, 본문, 맞춤 동작 레이블은 앱에서 현지화하세요.

// 앱 문구를 String Catalog 또는 Localizable.strings에 추가하세요.
toasts.present(.warning,
    title: String(localized: "storage.low.title"),
    message: String(localized: "storage.low.message")
)

ToastKit은 호스트 앱의 로캘에 맞춰 기본 레이블을 표시합니다. 맞춤 ToastAction 제목과 확인 문구는 일반 문자열이므로 앱에서 사용하는 현지화 도구로 처리할 수 있어요.

더 알아보기

조금 더 다듬어 볼까요?

소스 코드에서 전체 API 사용법을 확인하세요.

GitHub에서 보기 ↗