둥근 모서리 그 너머
UI디자인에서 G2 연속성 이해하기
*원문 출처를 번역한 글입니다.
어떤 앱 아이콘이나 UI 요소들이 다른 디자인보다 훨씬 보기 좋고, 매끄럽고, 매력적으로 느껴지는 경험을 해보신 적 있으신가요? 마치 프리미엄 디자인처럼 말이죠. 단순히 색상이나 그림자 효과 때문만은 아닙니다. 그 비결은 종종 모서리 디자인 방식의 미묘한 수학적 차이에 있습니다.
저를 포함한 대부분의 디자이너들은 Figma에서 버튼 모서리에 곡률을 주는 데 수년을 보냈습니다. 그리고 많은 디자이너들, 거의 99%에 가까운 디자이너들이 자신이 완벽하게 하고 있다고 생각합니다. 하지만 iOS 앱 아이콘이나 세련된 하드웨어 제품을 보면, 뭔가 다른 종류의 곡선이 작용하고 있다는 것을 깨닫게 됩니다. 이것은 단순히 "둥근 모서리"에 관한 것이 아니라, 곡률 연속성에 관한 것입니다.
우아한 UI의 숨은 영웅, G2 연속성을 소개합니다. 그리고 왜 이 툴이 일반적인 둥근 사각형을 약간 투박하게 보이게 하는지 설명해 드리겠습니다.
"완벽한" 원의 문제점
표준 border-radius를 사용하거나 모서리 반경을 줄 때, 기본적으로하는 것은 직선에 완벽한 4분의 1원 호를 각 모서리에 갑자기 붙이는 것입니다.
기찻길을 생각해 보세요. 완벽하게 직선으로 달리다가 갑자기, 쾅! 하고 곡선 구간에 들어서는 것처럼요. 시각적으로는 처음에는 매끄럽게 보일지 몰라도, 직선 구간과 곡선 구간이 만나는 지점에는 눈에 보이지 않는 "충격"이 존재합니다.
기하학에서, 이를 G1 연속성 또는 경사 연속성이라고 합니다. 선들이 눈에 띄는 이음매 없이 만나지만, 곡선이 휘어지는 속도가 갑자기 변합니다.
위 그림에서 G1(왼쪽)은 완벽한 4분의 1원을 사용하는 반면, G2(오른쪽)는 훨씬 더 미묘하게 곡선을 시작하며 전환을 부드럽게 만드는 것을 분명히 확인할 수 있습니다.
스쿼클의 등장: G2 연속성의 힘
진정으로 부드럽고 세련된 느낌을 구현하기 위해, 특히 산업 디자인으로 유명한 회사(애플을 생각해 보세요)의 고급 UI 디자이너들은 흔히 스쿼클 (Squircle, 또는 초타원)이라고 불리는 형태를 사용합니다.
스쿼클의 매력은 G2 연속성, 즉 곡률 연속성에 있습니다. 직선에서 호로 갑자기 바뀌는 대신, 선이 점진적으로 휘어집니다. 마치 기차 선로가 주요 곡선 구간에 도달하기 전에 완만한 나선형을 그리며 부드럽게 가속하는 것과 같습니다. 곡률에 갑작스러운 "충격"이 없고, 끊임없이 변화합니다.
Figma에서 G2 연속성을 구현하는 방법 (단 3번의 클릭으로)
기하학 학위나 복잡한 SVG 코드가 없어도 지금 바로 G2 연속성 기능을 사용할 수 있습니다. Figma에는 이 기능이 내장되어 있습니다! 다만 약간 숨겨져 있을 뿐입니다. 디자인에서 "매우 매끄러운" 모서리를 만드는 간단한 방법을 알려드립니다.
1단계
도형 선택: 직사각형이나 테두리를 그리고 표준 모서리 반지름(예: 16)을 지정하세요.
Enter 키를 누르거나 클릭하여 이미지를 전체 크기로 보세요.
2단계
독립 모서리(Independent Corners) 열기: 오른쪽 디자인 패널을 보세요. 모서리 반경 입력란 옆에 네 모서리 또는 괄호 모양의 작은 아이콘이 있습니다. Enter 키를 누르거나 클릭하여 이미지를 전체 크기로 보세요.
3단계
"Corner Smoothing" 조정: 메뉴가 확장되면 백분율로 표시된 슬라이더(기본값은 0%)가 보입니다. 이것이 바로 G2의 마법 지팡이입니다.
0%: 표준 모서리가 둥근 직사각형(G1)
60%: "애플 표준" 이 비율은 iOS 앱 아이콘과 하드웨어의 곡선과 매우 유사합니다. 대부분의 프리미엄 UI에 가장 적합한 비율입니다
100%: 완전한 스쿼클(Squircle). 매우 유기적이고 거의 "덩어리" 같은 모양을 만들어냅니다. 장난기 넘치는 브랜드나 배경 요소에 적합합니다
꿀팁: 확대된 상태에서 smoothing을 켰다 껐다 해보면, 직선이 곡선 안으로 더 깊숙이 들어가면서 모서리 부분이 살짝 찌그러지는 것을 볼 수 있습니다. 바로 이 미묘한 변화가 시각적인 거칠함을 없애주는 역할을 합니다.
https://medium.com/design-bootcamp/beyond-border-radius-understanding-g2-continuity-in-ui-design-e21608d9fcd3
DEET를 구독하고 커리어 성장을 위한 작은 습관을 시작해 보세요.
