Apple Human Interface Guidelines (HIG)

Apple HIG로 배우는 UXUI 디자인 가이드 🎨

UXUI 디자인을 공부하는 학생입니다.

오늘은 Apple의 Human Interface Guidelines(HIG)에서 가장 기본이 되는 네 가지 영역을 스터디 준비를 위해 정리해보았습니다.

1. 접근성 (Accessibility)

"7명 중 1명은 디지털 기기를 사용하는 데 어려움을 겪고 있어요. 접근성은 모든 사용자를 위한 기본 중의 기본입니다."

1.1. 접근성의 기본 원칙

쉽게 사용할 수 있게 만들기 (단순성)

• 복잡한 기능도 쉽게 사용할 수 있도록 구현하기
• 누구나 직관적으로 이해할 수 있는 인터페이스
• 일관된 사용자 경험 제공

여러 방법으로 인지할 수 있게 하기

• 보고, 듣고, 만지는 등 다양한 방법으로 정보 전달
• 명확한 피드백 제공
• 실수하지 않도록 도와주는 디자인

1.2. 접근성 기능 구현하기

VoiceOver 지원 예시

// 버튼에 음성 설명 추가하기
button.accessibilityLabel = "프로필 사진 업로드"
button.accessibilityHint = "갤러리에서 사진을 선택할 수 있어요"

// 복잡한 화면 요소도 쉽게 이해할 수 있게
customView.isAccessibilityElement = true
customView.accessibilityLabel = "프로필 정보"
customView.accessibilityTraits = .header

터치하기 쉽게 만들기

// 버튼을 충분히 크게 만들기
extension UIButton {
    func setMinimumTouchArea() {
        let minSize = CGSize(width: 44, height: 44) // 최소 44x44 크기
        let buttonSize = bounds.size
        let widthPadding = max(minSize.width - buttonSize.width, 0)
        let heightPadding = max(minSize.height - buttonSize.height, 0)
        
        hitTestInsets = UIEdgeInsets(
            top: -heightPadding/2,
            left: -widthPadding/2,
            bottom: -heightPadding/2,
            right: -widthPadding/2
        )
    }
}

글자 크기 조절 지원

// 사용자가 설정한 글자 크기에 맞추기
class CustomLabel: UILabel {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupDynamicText()
    }
    
    private func setupDynamicText() {
        adjustsFontForContentSizeCategory = true
        font = UIFont.preferredFont(forTextStyle: .body)
    }
}

2. 앱 아이콘 (App Icon)

"첫인상이 중요하듯이, 앱 아이콘은 우리 앱의 얼굴입니다."

2.1. 앱 아이콘 디자인 원칙

단순하고 기억에 남게 만들기

• 핵심적인 요소만 넣기
• 한눈에 알아볼 수 있는 독특한 모양
• 다양한 크기에서도 잘 보이는 디자인

그래픽 요소 활용하기

✅ 이렇게 하면 좋아요:

• 간단하고 굵은 그래픽
• 앱의 기능을 잘 보여주는 심볼
• 브랜드 특징 잘 살리기

❌ 이렇게 하면 안돼요:

• 복잡한 사진 사용
• 글자 너무 많이 넣기
• 시스템 UI 요소 그대로 복사하기

2.2. 앱 아이콘 크기 가이드

struct AppIconSizes {
    // iOS/iPadOS용 크기
    static let appStore = "1024x1024 픽셀"
    static let iPhone = "180x180 픽셀 (@3x)"
    static let iPad = "167x167 픽셀 (@2x)"
    
    // macOS용 크기
    struct MacOS {
        static let appStore = "1024x1024 픽셀"
        static let dock = "128x128 픽셀"
        static let finder = "32x32 픽셀"
    }
    
    // Apple Watch용 크기
    struct WatchOS {
        static let appStore = "1024x1024 픽셀"
        static let home = "80x80 픽셀 (@2x)"
    }
}

2.3. 앱 아이콘 구현하기

다른 아이콘으로 바꾸기

// 앱 아이콘 변경 기능 구현
class IconChanger {
    static func changeIcon(to iconName: String?) {
        guard UIApplication.shared.supportsAlternateIcons else { 
            print("이 기기는 아이콘 변경을 지원하지 않아요 😢")
            return 
        }
        
        UIApplication.shared.setAlternateIcon(iconName) { error in
            if let error = error {
                print("아이콘 변경 실패: \(error.localizedDescription)")
            } else {
                print("아이콘이 성공적으로 변경되었어요! 🎉")
            }
        }
    }
}

3. 브랜딩 (Branding)

"우리 앱의 특별한 개성을 보여주되, Apple의 플랫폼 특성도 잘 지켜야 해요!"

3.1. 브랜드 전략 짜기

기본 규칙

• Apple 플랫폼의 기본 규칙 지키기
• 브랜드만의 특징을 일관되게 보여주기
• 사용자 경험이 최우선!

브랜드 요소 적용하기

// 브랜드 색상 정의하기
extension UIColor {
   static let brandMain = UIColor(named: "BrandMain")
   static let brandSub = UIColor(named: "BrandSub")
   
   // 다크모드에서도 잘 보이게
   static let brandBackground = UIColor { mode in
       switch mode.userInterfaceStyle {
       case .dark:
           return UIColor(named: "BrandBackgroundDark")!
       default:
           return UIColor(named: "BrandBackgroundLight")!
       }
   }
}

3.2. 브랜드 폰트 사용하기

// 브랜드 폰트 설정
extension UIFont {
    static func brandFont(size: CGFloat) -> UIFont {
        // 브랜드 폰트가 없다면 시스템 폰트 사용
        return UIFont(name: "BrandFont-Regular", size: size) ?? 
               .systemFont(ofSize: size)
    }
}

4. 색상 (Color)

""색상은 단순한 꾸미기가 아닌, 의미를 전달하는 중요한 수단이에요!"

4.1. 시스템 컬러 활용하기

기본 컬러 사용법

class CustomView: UIView {
    func setupColors() {
        // 기본 배경색
        backgroundColor = .systemBackground
        
        // 강조색
        tintColor = .systemBlue
        
        // 구분선 색상
        layer.borderColor = UIColor.separator.cgColor
    }
}

4.2. 접근성 고려한 색상 사용

색상 대비 확인하기

// 색상 대비 체크 함수
func isColorContrastGood(text: UIColor, background: UIColor) -> Bool {
    let ratio = calculateContrastRatio(text, background)
    // WCAG 2.0 기준
    let minimumRatio: CGFloat = 4.5
    
    return ratio >= minimumRatio
}

다크모드 대응하기

// 다크모드용 색상 정의
extension UIColor {
    static let customBackground = UIColor { mode in
        switch mode.userInterfaceStyle {
        case .dark:
            return .systemGray6
        default:
            return .white
        }
    }
    
    static let customText = UIColor { mode in
        switch mode.userInterfaceStyle {
        case .dark:
            return .white
        default:
            return .black
        }
    }
}

🎯 디자인 체크리스트

접근성 체크

• VoiceOver 텍스트 확인
• 글자 크기 조절 테스트
• 색상 대비 검사
• 터치 영역 크기 확인

앱 아이콘 체크

• 모든 크기 제공
• 심플하고 기억나는 디자인
• 다크모드에서 확인

브랜딩 체크

• 일관된 브랜드 요소 사용
• 플랫폼 특성 준수
• 사용자 경험 우선

색상 체크

• 시스템 컬러 활용
• 다크모드 대응
• 접근성 고려

📚 공부하면서 알게된 점

1. 접근성은 선택이 아닌 필수. 모든 사용자를 고려해야 함.
2. 앱 아이콘은 우리 앱의 첫인상이니 신중하게 디자인 해야 함.
3. 브랜딩은 Apple 플랫폼의 특성을 해치지 않는 선에서 해야 함.
4. 색상은 단순히 예쁘게만 하는 게 아니라, 의미 전달도 중요.

🔍 참고자료

• Apple HIG 공식 문서
• 애플 개발자 문서
• WWDC 영상