💄 [Design] 명함 미확정 시안 확정 — 빈 상태·삭제 동선·이름 표기·파트 컬러 (#1236)

UMCApp/Core/UIComponents/Sources/Extensions/UMCPartType+Color.swift

@@ -6,10 +6,30 @@
 //
 
 import SwiftUI
+import CoreDesignSystem
 import UMCFoundation
 
 extension UMCPartType {
 
+    /// 우리가 못 읽은 파트(`MyCard.partRaw` 가 있는 경우)의 시드 폴백.
+    ///
+    /// `partRaw != nil` 이면 `part` 가 관례상 `.admin` 으로 떨어져 Admin 인디고(#6155F5)로
+    /// 칠해지던 버그를 막는다. 채널폭 13 의 저채도 회색이라 유채색 시드 8종(채널폭 최소 78)
+    /// 과 섞이지 않는다 (#1236 확정).
+    ///
+    /// - Note: 시드 8종과 달리 이 값만 다이내믹 토큰이라 모드에 따라 변한다
+    ///   (light `#B2B8BF` / dark `#7C8792`). 칩 면이 모드 불변이라는 전제의 유일한 예외지만,
+    ///   검정 라벨 대비가 라이트 12.22 · 다크 7.82 로 양쪽 다 AA 를 넘어 잉크는 그대로 둔다.
+    public static let unresolvedSeedColor: Color = .grey400
+
+    /// ``unresolvedSeedColor`` 의 칩 면 — 시드 8종과 같은 혼합 규칙(``chipSeedColor``)을 탄다.
+    public static var unresolvedChipSeedColor: Color {
+        unresolvedSeedColor.mix(with: .white, by: chipWhiteMix, in: .device)
+    }
+
+    /// 칩 면을 만들 때 시드에 섞는 흰색 비율. 폴백까지 같은 규칙을 타야 하므로 여기 한 곳에 둔다.
+    private static let chipWhiteMix: Double = 0.2
+
     /// 명함 시드 컬러 — 시안이 raw hex 로 지정한 파트 브랜드 색.
     ///
     /// ``color`` 와 **일부러 분리해 둔다.** ``color`` 는 SwiftUI 시스템 컬러라
@@ -21,7 +41,8 @@ extension UMCPartType {
     ///
     /// - Note: iOS 파트만 시안에 변형이 없어(7종) `systemOrange` 로 채웠다.
     ///   나머지 7종이 iOS 시스템 팔레트 계열이고 주황이 비어 있어 충돌하지 않는다.
-    ///   디자이너 확인이 오면 이 값만 교체하면 된다.
+    ///   #1236 에서 현행 유지로 확정했다. 공식 iOS 변형 색이 오면 이 한 값과
+    ///   `UMCPartTypeSeedColorTests` 만 교체한다.
     public var seedColor: Color {
         switch self {
         case .admin:
@@ -49,6 +70,19 @@ extension UMCPartType {
         }
     }
 
+    /// 명함_s 파트·기수 칩의 **면** 색 — 시드에 흰색을 섞어 굳힌 불투명색.
+    ///
+    /// 알파 합성(시드@0.8)을 쓰지 않는 이유는 라이트·다크에서 같은 색으로 남기기 위해서다.
+    /// 칩 라벨이 모드 불변인 `Color.black` 고정이라 면도 모드 불변이어야 한다 — 라벨 색만
+    /// 바꾸는 안은 다크에서 다시 깨진다(검정 라벨: Admin 2.95·PM 3.47·Design 3.90·Web 4.08
+    /// 미달 / 흰 라벨: Spring 3.42·Android 3.32·iOS 3.38·Node 2.39 미달, #1235 실측).
+    ///
+    /// 이 값 위의 검정 라벨은 8종 전부 **5.92~14.92** 로 WCAG AA(4.5:1)를 통과한다 —
+    /// `UMCPartTypeSeedColorTests` 가 고정한다 (#1236 확정).
+    public var chipSeedColor: Color {
+        seedColor.mix(with: .white, by: Self.chipWhiteMix, in: .device)
+    }
+
     /// 파트별 고유 색상
     public var color: Color {
         switch self {

UMCApp/Core/UIComponents/Tests/Extensions/UMCPartTypeSeedColorTests.swift

@@ -27,6 +27,13 @@ struct UMCPartTypeSeedColorTests {
         (.server(type: .node), "FFCC00"),
     ]
 
+    /// 회색과 유채색을 가르는 채널폭 경계. 실측은 폴백 13(라이트)·22(다크) 대 시드 최소
+    /// 78(Web) 이라 그 사이 어디를 잡아도 되고, 양쪽에 넉넉한 40 으로 둔다.
+    private static let greyChannelSpreadLimit = 40
+
+    /// WCAG AA 본문 기준.
+    private static let minimumContrastRatio = 4.5
+
     @Test("파트마다 시안이 지정한 시드 컬러를 돌려준다", arguments: designSeeds)
     func seedColorMatchesDesign(seed: (part: UMCPartType, hex: String)) {
         #expect(seed.part.seedColor.srgbHex == seed.hex)
@@ -39,6 +46,48 @@ struct UMCPartTypeSeedColorTests {
         #expect(Set(hexes).count == Self.designSeeds.count)
     }
 
+    /// 못 읽은 파트는 `.admin` 으로 떨어져 Admin 인디고를 입던 자리다 (#1236). hex 완전
+    /// 일치만 보면 폴백을 `6155F6`(Admin 에서 1비트) 로 옮겨도 통과하면서 「운영진처럼
+    /// 보임」이 되살아나므로, **회색이라는 성질 자체**를 채널폭으로 못 박는다.
+    @Test("미정의 파트 폴백은 저채도 회색이라 유채색 시드와 섞이지 않는다")
+    func unresolvedSeedIsLowChromaGrey() {
+        let fallback = UMCPartType.unresolvedSeedColor
+        let hexes = Set(Self.designSeeds.map(\.part.seedColor.srgbHex))
+
+        #expect(!hexes.contains(fallback.srgbHex))
+        #expect(
+            fallback.channelSpread < Self.greyChannelSpreadLimit,
+            "폴백 채널폭 \(fallback.channelSpread)"
+        )
+
+        for seed in Self.designSeeds {
+            #expect(
+                seed.part.seedColor.channelSpread > Self.greyChannelSpreadLimit,
+                "\(seed.part.name) 채널폭 \(seed.part.seedColor.channelSpread)"
+            )
+        }
+    }
+
+    /// 이 값이 흰 라벨(#1235, 8종 전부 미달)을 버리고 검정 라벨로 간 근거다. 시드나
+    /// 혼합비를 건드리면 화면이 아니라 여기서 먼저 깨져야 한다.
+    @Test(
+        "파트 칩 면 위 검정 라벨이 여덟 파트 전부 WCAG AA(4.5:1)를 넘는다",
+        arguments: designSeeds
+    )
+    func chipSeedColorPassesBlackLabelContrast(seed: (part: UMCPartType, hex: String)) {
+        let ratio = seed.part.chipSeedColor.blackContrastRatio
+
+        #expect(ratio >= Self.minimumContrastRatio, "\(seed.part.name) 대비 \(ratio)")
+    }
+
+    /// 폴백만 다이내믹 토큰이라 모드에 따라 변한다 — 어느 모드로 해석되든 기준을 넘는다.
+    @Test("못 읽은 파트 폴백 칩 면 위 검정 라벨도 같은 기준을 넘는다")
+    func unresolvedChipSeedColorPassesBlackLabelContrast() {
+        let ratio = UMCPartType.unresolvedChipSeedColor.blackContrastRatio
+
+        #expect(ratio >= Self.minimumContrastRatio, "폴백 대비 \(ratio)")
+    }
+
     /// `allCases` 는 `.admin` 을 빼고 7종만 담는다(운영진은 파트 선택 목록에 안 오른다).
     /// 명함은 운영진 카드도 그려야 하므로 그 7종을 덮되 admin 까지 별도로 확인한다.
     @Test("파트 선택 목록(allCases) 전체가 시드 컬러를 갖는다")
@@ -54,18 +103,48 @@ struct UMCPartTypeSeedColorTests {
 
 private extension Color {
 
-    /// sRGB 8bit 표기. 시안 hex 문자열과 직접 맞대려고 테스트에서만 쓴다.
-    var srgbHex: String {
+    /// sRGB 8bit 채널. hex 비교·채널폭·대비 계산이 모두 이 한 값에서 나온다.
+    var srgbChannels: (red: Int, green: Int, blue: Int) {
         var red: CGFloat = 0
         var green: CGFloat = 0
         var blue: CGFloat = 0
         var alpha: CGFloat = 0
         UIColor(self).getRed(&red, green: &green, blue: &blue, alpha: &alpha)
-        return String(
-            format: "%02X%02X%02X",
+        return (
             Int((red * 255).rounded()),
             Int((green * 255).rounded()),
             Int((blue * 255).rounded())
         )
     }
+
+    /// sRGB 8bit 표기. 시안 hex 문자열과 직접 맞대려고 테스트에서만 쓴다.
+    var srgbHex: String {
+        let channels = srgbChannels
+        return String(format: "%02X%02X%02X", channels.red, channels.green, channels.blue)
+    }
+
+    /// 최대 채널과 최소 채널의 차. 무채색에 가까울수록 0 에 붙는다.
+    var channelSpread: Int {
+        let channels = [srgbChannels.red, srgbChannels.green, srgbChannels.blue]
+        return (channels.max() ?? 0) - (channels.min() ?? 0)
+    }
+
+    /// WCAG 2.1 상대 휘도.
+    var relativeLuminance: Double {
+        let channels = srgbChannels
+        func linear(_ value: Int) -> Double {
+            let normalized = Double(value) / 255
+            return normalized <= 0.03928
+                ? normalized / 12.92
+                : pow((normalized + 0.055) / 1.055, 2.4)
+        }
+        return 0.2126 * linear(channels.red)
+            + 0.7152 * linear(channels.green)
+            + 0.0722 * linear(channels.blue)
+    }
+
+    /// 검정 잉크와의 대비비 — 검정 휘도가 0 이라 `(L + 0.05) / 0.05` 로 줄어든다.
+    var blackContrastRatio: Double {
+        (relativeLuminance + 0.05) / 0.05
+    }
 }

UMCApp/Features/BusinessCard/Domain/Sources/Models/MyCard.swift

@@ -69,6 +69,16 @@ public struct MyCard: Equatable, Hashable, Sendable {
 
     // MARK: - Computed Property
 
+    /// 카드에 싣는 표시 이름 — 시안 더미 `이름/닉네임` 을 그대로 따른다.
+    ///
+    /// 명함_l(`12639:33234`)·명함_m(`12639:33316`)·명함_s(`12657:35806`) 공통 규칙이고
+    /// 더미가 처음 나온 원출처는 명함_s 다. 닉네임이 공백뿐이면 이름만 싣는다. 표기가
+    /// 바뀌면 이 한 곳만 고친다 (#1236 확정).
+    public var nameWithNickname: String {
+        let trimmed = nickname.trimmingCharacters(in: .whitespacesAndNewlines)
+        return trimmed.isEmpty ? name : "\(name)/\(trimmed)"
+    }
+
     /// 화면에 쓰는 파트 이름. 못 읽은 값이면 원본을 그대로 보여준다 — 틀린 이름(운영진)보다
     /// 낯선 이름이 낫다.
     public var partDisplayName: String {

UMCApp/Features/BusinessCard/Domain/Tests/MyCardTests.swift

@@ -13,6 +13,21 @@ import UMCFoundation
 @Suite("MyCard — 파생 프로퍼티")
 struct MyCardTests {
 
+    /// 명함_l·_m·_s 세 카드가 이 한 규칙을 공유한다 (#1236). 잘림은 뷰가 처리하므로
+    /// 여기서는 길이를 자르지 않고 원문을 그대로 잇는지만 본다.
+    ///
+    /// 마지막 줄은 이름이 빈 퇴화 상태의 **현재 동작**을 적어 둔 것이다 — 서버가 이름을
+    /// 안 주는 카드는 ``MyCard/validate()`` 가 아니라 여기서 `/닉네임` 으로 새 나간다.
+    private static let nameCases: [(name: String, nickname: String, expected: String)] = [
+        (name: "김민", nickname: "민", expected: "김민/민"),
+        (name: "남궁수하늘보라매", nickname: "구름", expected: "남궁수하늘보라매/구름"),
+        (name: "Christopher Nolan", nickname: "Chris", expected: "Christopher Nolan/Chris"),
+        (name: "박서준", nickname: "", expected: "박서준"),
+        (name: "박서준", nickname: "  ", expected: "박서준"),
+        (name: "김민", nickname: " 민 ", expected: "김민/민"),
+        (name: "", nickname: "민", expected: "/민"),
+    ]
+
     @Test("qrPayload는 cardLink urlString과 항상 같다 (MP-F02·F04 동일 페이로드)")
     func qrPayloadEqualsCardLink() {
         let card = MyCard(
@@ -24,4 +39,17 @@ struct MyCardTests {
         #expect(card.qrPayload == CardLink(memberId: "42").urlString)
         #expect(card.qrPayload == card.cardLink.urlString)
     }
+
+    @Test("닉네임이 있으면 `이름/닉네임`, 공백뿐이면 이름만 싣는다", arguments: nameCases)
+    func nameWithNicknameFollowsDesignDummy(
+        nameCase: (name: String, nickname: String, expected: String)
+    ) {
+        let card = MyCard(
+            memberId: "42", name: nameCase.name, nickname: nameCase.nickname,
+            part: .front(type: .ios), generation: "12", university: "한양대학교",
+            email: nil, github: nil, linkedIn: nil, blog: nil, avatarURL: nil
+        )
+
+        #expect(card.nameWithNickname == nameCase.expected)
+    }
 }

UMCApp/Features/BusinessCard/Presentation/Sources/Components/BusinessCardFaceView.swift

@@ -182,22 +182,20 @@ public struct BusinessCardFaceView: View {
         .accessibilityLabel(isFlipped ? Constants.flipToFront : Constants.flipToBack)
     }
 
-    /// 시안 더미 `이름/닉네임` 규칙 — 닉네임이 비어 있으면 이름만 싣는다
-    /// (명함_m·명함_s 와 같은 규칙).
-    private var displayName: String {
-        let nickname = card.nickname.trimmingCharacters(in: .whitespacesAndNewlines)
-        return nickname.isEmpty ? card.name : "\(card.name)/\(nickname)"
-    }
-
     private var frontFace: some View {
         HStack(alignment: .top, spacing: Metrics.contentSpacing) {
             avatar
 
             VStack(alignment: .leading, spacing: Metrics.contentSpacing) {
                 HStack(alignment: .lastTextBaseline, spacing: Metrics.nameSpacing) {
-                    Text(displayName)
+                    // 표기 규칙은 ``MyCard/nameWithNickname`` 한 곳에 있다 — 명함_l·_m·_s
+                    // 공통이고 원출처는 명함_s 시안(`12657:35806`)이다.
+                    // 둘 다 `lineLimit(1)` 이라 폭이 모자라면 어느 쪽이 잘릴지 규칙이
+                    // 없었다. 이름이 1차 식별자라 학교가 먼저 말줄임되게 못 박는다 (#1236).
+                    Text(card.nameWithNickname)
                         .appFont(.title3, weight: .semibold, color: Color.white)
                         .lineLimit(1)
+                        .layoutPriority(1)
 
                     Text(card.university)
                         .appFont(.footnote, color: Color.white)
@@ -219,8 +217,12 @@ public struct BusinessCardFaceView: View {
 
     /// 「홍길동/길동, ○○대학교, iOS 파트, 12기」.
     private var frontAccessibilityLabel: String {
-        [displayName, card.university, "\(card.partDisplayName) 파트", "\(card.generation)기"]
-            .joined(separator: ", ")
+        [
+            card.nameWithNickname,
+            card.university,
+            "\(card.partDisplayName) 파트",
+            "\(card.generation)기",
+        ].joined(separator: ", ")
     }
 
     /// 뒷면은 아바타 자리에 QR 이 오고, 이름·칩 자리에 링크 3줄이 온다.

UMCApp/Features/BusinessCard/Presentation/Sources/Components/BusinessCardSummaryView.swift

@@ -93,27 +93,30 @@ struct BusinessCardSummaryView: View {
 
     /// 「홍길동/길동, ○○대학교, iOS 파트, 12기」.
     private var accessibilityLabel: String {
-        [displayName, card.university, "\(card.partDisplayName) 파트", "\(card.generation)기"]
-            .joined(separator: ", ")
+        [
+            card.nameWithNickname,
+            card.university,
+            "\(card.partDisplayName) 파트",
+            "\(card.generation)기",
+        ].joined(separator: ", ")
     }
 
     // MARK: - View Component
 
-    /// 시안 더미가 `이름/닉네임` 이라 명함_l(``BusinessCardFaceView``)과 같은 규칙으로
-    /// 둘을 함께 싣는다. 닉네임이 비어 있으면 이름만.
-    private var displayName: String {
-        let nickname = card.nickname.trimmingCharacters(in: .whitespacesAndNewlines)
-        return nickname.isEmpty ? card.name : "\(card.name)/\(nickname)"
-    }
-
     private var nameRow: some View {
         HStack(alignment: .firstTextBaseline, spacing: Metrics.nameSpacing) {
             // 시안은 Pretendard Bold 지만 `AppFontWeight` 에 bold 가 없다(regular/medium/
             // semibold 3종). 가장 가까운 semibold 를 쓴다 — 명함_l 도 같은 처리를 했다.
             // 확장은 `Pretendard-Bold.otf` 반입이 선행되어야 한다 (#1237).
-            Text(displayName)
+            //
+            // 표기 규칙은 ``MyCard/nameWithNickname`` 한 곳에 있다 — 명함_l·_m·_s
+            // 공통이고 원출처는 명함_s 시안(`12657:35806`)이다.
+            // 둘 다 `lineLimit(1)` 이라 폭이 모자라면 어느 쪽이 잘릴지 규칙이 없었다.
+            // 이름이 1차 식별자라 학교가 먼저 말줄임되게 못 박는다 (#1236).
+            Text(card.nameWithNickname)
                 .appFont(.title2, weight: .semibold, color: Color.white)
                 .lineLimit(1)
+                .layoutPriority(1)
 
             Text(card.university)
                 .appFont(.subheadline, color: Color.white)