모서리 둥글기

정의

모서리 둥글기(border-radius)는 사각형 요소의 네 귀퉁이를 얼마나 둥글게 깎을지 정하는 값입니다. 값이 0이면 각이 그대로 살아 뾰족하고, 값을 키울수록 귀퉁이가 부드럽게 말려 들어갑니다. 값을 아주 크게 주거나 높이의 절반 이상으로 잡으면 양 끝이 완전히 둥근 알약(pill) 모양이 됩니다. 같은 버튼, 같은 카드라도 이 값 하나에 따라 딱딱하고 진지한 인상이 되기도 하고, 말랑하고 친근한 인상이 되기도 합니다. 그래서 둥글기는 색이나 글꼴만큼이나 제품의 성격을 크게 좌우하는 값입니다.

왜 중요한가

모서리 둥글기는 사용자가 화면을 보자마자 무의식적으로 받는 '느낌'을 결정합니다. 각진 모서리는 정확하고 기술적이며 무게감 있는 인상을 주어 금융이나 관리자 도구처럼 신뢰가 중요한 곳에 잘 어울립니다. 반대로 둥근 모서리는 부드럽고 다가가기 편한 인상을 주어 소비자용 앱이나 놀이에 가까운 서비스에 자주 쓰입니다. 더 중요한 것은 일관성입니다. 한 화면 안에서 버튼은 살짝 둥글고 카드는 많이 둥글고 입력창은 각져 있으면, 사용자는 그 차이를 말로 설명하진 못해도 어딘가 정돈되지 않았다고 느낍니다. 둥글기를 몇 개의 정해진 값으로 통일하면 그 미묘한 어수선함이 사라지고, 서로 다른 화면과 요소들이 하나의 제품이라는 소속감을 갖게 됩니다. 이렇게 둥글기는 작은 값 하나로 신뢰감의 방향과 화면의 완성도를 동시에 조율하는, 생각보다 힘이 센 요소입니다.

흔한 실수

• 요소마다 둥글기 값을 제각각 주는 것입니다. 버튼은 6, 카드는 12, 배지는 20처럼 규칙 없이 흩어지면 화면 전체가 미묘하게 들뜨고 통일감이 사라집니다. 값을 몇 개로 정해 두고 그 안에서만 고르는 편이 훨씬 안정적입니다.
• 바깥 상자와 그 안에 들어가는 요소의 둥글기를 따로 노는 값으로 주는 것입니다. 카드 모서리는 둥근데 안쪽 이미지는 각져 있으면 귀퉁이에 어색한 틈이 생겨 보입니다. 안쪽은 바깥보다 살짝 작은 값으로 맞춰 주면 두 곡선이 자연스럽게 겹칩니다.
• 아주 작은 요소에 지나치게 큰 둥글기를 주는 것입니다. 높이가 낮은 버튼에 큰 값을 주면 이미 pill처럼 완전히 둥글어져 더 키워도 변화가 없고, 오히려 형태가 뭉개져 보입니다. 요소의 크기에 맞춰 값을 조절해야 의도한 모양이 나옵니다.

실무 팁

• 제품 안에서 둥글기 값을 미리 정해 통일하세요. 예를 들어 버튼은 8, 카드는 14처럼 역할별로 값을 고정해 두면, 새 화면을 만들 때마다 고민 없이 일관된 인상을 유지할 수 있습니다. 이렇게 정해 둔 값은 토큰으로 관리하면 더욱 편합니다.
• 완전히 둥근 pill 모양은 태그, 필터 칩, 토글처럼 작고 반복되는 요소에 아껴 쓰세요. 본문 카드처럼 큰 면적에 pill을 쓰면 형태가 과장돼 오히려 산만해 보입니다.
• 의도한 성격에 맞춰 값의 크기를 정하세요. 진지하고 기술적인 느낌이면 작게, 친근하고 부드러운 느낌이면 크게 잡는 것이 기본입니다.

관련 개념