[UX & UI] 애플의 Corner Radius

애플의 Corner Radius?

과연 애플은 어떤 Corner Radius를 채택하고 있을까? 우선 HIG에는 없다! 신기하게도 구체적인 수치를 명시하지 않았다. GPT에 물어보니 애플의 디자인 철학인 사용자 경험과 명료성에 중점을 두고 있고, 디자이너와 개발자들이 이러한 철학에 따라 창의적인 솔루션을 제공할 수 있도록 명확한 값을 주지 않는다고 한다. 결론은 알아서 창의적으로 잘 만들어봐~ 인 듯싶다. (그래도 난 궁금해...)
 
실제로 나는 애플 디벨로퍼 아카데미에서 Joel Davies에게 질문도 드렸다. 답변은 명확하게 정해놓은 값이 없다는 것이었다. Corner Radius는 정해놓는 값이 아니며 그때그때 변할 수 있고 결국 디자이너들과 개발자들이 결정하는 것이라고 말씀을 해주셨다. 사실 디자인의 방향이나 스타일도 그때그때 시대에 따라 많이 변하니까.. (그래도 난 궁금해...)
 

내가 찾아보는 Corner Radius

기본으로 제공되는 Button Style

애플이 어떠한 기준으로 Corner Radius를 채택하고 있는지 궁금했다. 그래서 직접 찾아보기로 했다... 우선 생각나는 건 기본 버튼 스타일이었다. 위의 그림은 코드로 버튼 스타일을 Bordered, BorderedProminent로 했을 때, 나오는 기본 버튼 스타일이다. 실제로 Playground로 겹쳐봤을 때 본다면 약 7 정도의 Corner Radius값을 가지고 있는 것 같다.

애플 디자인 리소스에서 찾아보는 Corner Radius

아래의 링크로 들어가면 애플에서 제공해주는 디자인 리소스들이 있다. 이곳에서 다양한 템플릿들을 가져와서 Corner Radius의 값을 어떻게 해놓았는지 보았다.

Apple Design Resources

앱 아이콘

실제로 비교해보니 약 22.375% 정도의 Corner Radius값을 채택했다. 흰색이 애플 디자인 리소스에서 제공하는 앱 아이콘이고, 회색이 내가 직접 그린 사각형이다. 이 두 개를 겹쳐보니 세 번째와 같이 아주 미묘하게 차이가 났다. 이유는 앱 아이콘은 Square도 아니고 Circle도 아닌 Squircle이라는 것! 정사각형과 원을 합친 합성어라고 한다. 좀 더 Smooth 한 Round를 위해서 만들어진 듯싶다. 

실제로 Sketch라는 프로그램에서 Corners를 설정해 줄 때 값을 입력한 뒤, Rounded가 아닌 Smooth를 선택한다. 피그마에서도 Corner smoothing이라는 옵션을 선택할 수 있다. 피그마에서는 60%에서 61% 사이가 iOS가 채택한 Smoothing이라고 생각한 듯싶다. (정확하게 안떨어진다 약 60.8% 정도 느낌이다) 뒤에 살펴볼 애플의 모든 Corner Radius에서는 Smooth방식을 채택하고 있다.
 

숫자 키패드

숫자 키패드의 Corner Radius는 몇일까? 글자가 나오는 곳은 32w 42h에 4.6, 숫자키패드는 117w 46h에 5이다.

알림 창, 검색창, 라벨 그 외

알림 창은 373w 66h에 24이다. 검색창은 10이다. 라벨은 6.93이다.

Touch ID가 나오는 곳은 14, Face ID가 나오는 곳은 8.. 창이 올라오는 곳은 12.. 슬슬 뭐지? 싶은 상황
 
아무래도 6 ~ 14 정도에서 자유롭게 변하는 것 같다.
 

그렇다면 코딩으로 Corner Radius를 걸어줄 때 Smooth Corner가 될까?

궁금하지 않은가? 그래서 직접 실험해 봤다. 음... 잘 모르겠다. 알고 계시는 분 알려줘요... 하지만 아마도 Rounded Corner인 것 같다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack (alignment:.topTrailing) {
            VStack {
                Rectangle()
                    .frame(width: 300, height: 300)
                    .foregroundColor(.cyan)
                    .cornerRadius(100)
                HStack {
                    VStack {
                        Button(action: {}, label: {
                            Text("Smooth Corner ?")
                        })
                        .buttonStyle(.bordered)
                    }
                    .padding()  
                }        
            }
            Circle()
                .frame(width: 200, height: 200)
                .foregroundColor(.yellow)
        }
    }
}

결론

Corner Radius의 값은 정해진 것이 없고 구체적인 가이드라인도 없다. 하지만 모든 버튼은 같은 값으로 모든 창은 같은 값으로 일관성을 유지하는 것이 중요한 것 같다. 앞으로 자신 있게 내 눈을 믿고 Corner Radius값을 결정할 수 있었으면 좋겠다.