로그인 버튼 — iOS (SwiftUI)

Source: integrations/buttons-ios.md · Live: https://docs.1pass.dev/integrations/buttons-ios LLM-sanitized: internal links absolutized, VitePress containers → admonitions, line numbers in the Jump-to Index reference this rendered file (1-indexed).

📍 Jump-to Index

• L21-L39: ## 1. 아이콘 자산 넣기
• L40-L100: ## 2. 버튼 (Hero / 4x1 상당)
• L101-L110: ## 3. 검증 — 빌드 통과가 아니라 화면으로
• L111-L115: ## 브랜드 규칙 (요약)

---

로그인 버튼 — iOS (SwiftUI)

iOS 는 <img src> 가 없습니다 — SVG 를 Asset Catalog 에 넣는 것이 자산 배치입니다. 버튼 마크업·문구·브랜드 규칙은 로그인 버튼 컴포넌트 와 동일하고, 이 페이지는 iOS 자산 파이프라인만 다룹니다.

1. 아이콘 자산 넣기

curl -o LogiIcon.svg https://www.1pass.dev/icon.svg

Xcode 에서:

1. Assets.xcassets → New Image Set → 이름 LogiIcon
2. LogiIcon.svg 를 1x 슬롯에 드래그
3. 인스펙터에서 — Scales: Single Scale · Preserve Vector Data ✔ · Render As: Original Image

🚨 Danger: Render As 를 Template 로 두면 그라디언트가 죽습니다 logi 아이콘은 그라디언트 dot 이 정체성입니다. Template Image 로 렌더되면 foregroundColor 한 색으로 통째로 tint 되어 브랜드 가이드의 "색 분해 ❌" 위반이 됩니다. Image("LogiIcon") 에 .renderingMode(.template) 를 붙이는 것도 같은 사고입니다 — 붙이지 마세요.

2. 버튼 (Hero / 4x1 상당)

스타일은 취향입니다 — 세 변형 모두 지원하고, 앱 가이드의 기본 예시는 뉴트럴 아웃라인입니다(웹 기본 예시는 브랜드 블루 — 로그인 버튼 컴포넌트). radius 12 는 iOS 관례입니다.

// 공통 라벨 — 세 변형이 공유
private var logiLabel: some View {
    HStack(spacing: 8) {
        Image("LogiIcon")
            .resizable()
            .scaledToFit()
            .frame(width: 24, height: 24)
        Text("logi 로 로그인")
            .fontWeight(.semibold)
    }
    .frame(maxWidth: .infinity, minHeight: 56)
}

뉴트럴 아웃라인 (앱 기본 예시) — 캔버스 표면 + 보더. 다른 SSO 버튼과 나란히 둘 때 존재감이 균형 잡힙니다:

Button { /* OAuth 시작 */ } label: { logiLabel }
    .foregroundStyle(.primary)
    .background(
        RoundedRectangle(cornerRadius: 12)
            .stroke(Color.primary.opacity(0.15), lineWidth: 1)
    )

브랜드 블루 — 아이콘 dot 그라디언트에서 취색, 라이트/다크 동일:

Button { /* OAuth 시작 */ } label: { logiLabel }
    .foregroundStyle(.white)
    .background(
        LinearGradient(colors: [Color(red: 0, green: 0.53, blue: 1),      // #0088FF
                                Color(red: 0, green: 0.25, blue: 0.90)],  // #0041E6
                       startPoint: .topLeading, endPoint: .bottomTrailing),
        in: RoundedRectangle(cornerRadius: 12)
    )

반전형 (웹 종전 기본) — 라이트=네이비, 다크=화이트:

@Environment(\.colorScheme) private var colorScheme

Button { /* OAuth 시작 */ } label: { logiLabel }
    .foregroundStyle(colorScheme == .dark ? Color(red: 0.06, green: 0.09, blue: 0.16) : .white)
    .background(colorScheme == .dark ? Color.white : Color(red: 0.06, green: 0.09, blue: 0.16),  // #0F172A
                in: RoundedRectangle(cornerRadius: 12))

아이콘 전용(1x1, 44×44) 은 Text 를 빼고 .accessibilityLabel("logi 로 로그인") 을 반드시 답니다 — 텍스트가 없으면 VoiceOver 가 의미를 전달하지 못합니다.

3. 검증 — 빌드 통과가 아니라 화면으로

에셋 누락·이름 오타는 컴파일 에러가 아닙니다. Image("LogiIcon") 의 이름이 틀리면 런타임에 빈 자리만 남습니다 (웹의 302 빈 아이콘과 같은 결).

xcrun simctl launch <UDID> <bundle-id>
xcrun simctl io <UDID> screenshot login.png   # 아이콘이 실제로 보이는지 눈으로

브랜드 규칙 (요약)

문구 "logi 로 로그인" · 최소 32×32pt · 변형/회전/색 분해 금지 — 전체 표는 로그인 버튼 컴포넌트 › 브랜드 가이드.