둥글기 (Border Radius)
별칭: border radius · border-radius · 둥글기 · 모서리 둥글기 · 라운드
버튼이나 카드 모서리를 얼마나 둥글게 만들지 정하는 UI 스타일 값.
둥글기는 카드, 버튼, 입력창의 인상을 빠르게 바꾸는 작은 스타일 값이다. 수업에서는 색 1개, 폰트 1개와 함께 둥글기 1개를 정해 화면 전체의 기준을 만드는 디자인 토큰으로 다룬다.
정의
둥글기, 즉 border radius는 UI 요소의 모서리를 얼마나 둥글게 표시할지 정하는 스타일 값이다. CSS에서는 border-radius 속성으로 카드, 버튼, 입력창, 이미지의 모서리 형태를 조절한다.
왜 중요한가
모서리 둥글기는 작은 값처럼 보이지만 화면의 인상에 큰 영향을 준다. 버튼은 둥근데 카드는 각지고, 입력창은 또 다른 값이면 화면이 정돈되지 않아 보인다. 하나의 둥글기 기준을 정하면 AI가 만든 여러 컴포넌트가 같은 제품처럼 보인다.
Semiclass에서의 의미
의식 2에서 말하는 "둥글기 1개"는 카드와 버튼의 기본 형태를 정하는 최소 디자인 결정이다. 예를 들어 카드와 버튼을 8px 기준으로 통일하면 생활정보 보드의 검색, 필터, 카드, 저장 버튼이 같은 규칙 안에 놓인다.
주의할 점
둥글기를 크게 준다고 항상 보기 좋아지는 것은 아니다. 업무 도구형 화면에서는 과한 pill 형태보다 적당한 radius가 정보를 더 단정하게 보이게 한다. 이미지, 카드, 버튼에 같은 값을 무조건 적용하기보다 역할별 예외를 적게 두는 방식이 좋다.