코너 반경

이 값에 이름이 없던 시절, 모서리 이야기는 늘 형용사로 오갔습니다. 디자이너가 "여기 조금만 더 둥글게" 라고 하면 개발자는 얼마만큼이 조금인지 모른 채 고쳤고, 다시 보면 또 다르다는 말이 돌아왔습니다. 세 번 왕복하고 나서야 서로가 생각한 값이 4픽셀과 12픽셀이었다는 걸 알게 됩니다.

화면이 늘어나면 문제가 커집니다. 설정 화면의 버튼은 6픽셀, 대시보드의 버튼은 10픽셀, 결제 화면의 입력창은 직각인 제품이 만들어집니다. 사용자는 그 숫자를 세지 않지만 화면을 옮겨 다닐 때 뭔가 어긋나 있다고 느낍니다. 한 회사가 만든 제품이 아니라 서로 다른 팀이 따로 만든 화면을 붙여 놓은 것처럼 보이는 상태입니다.

코너 반경은 이 대화를 수치로 옮겨 놓은 말입니다. 둥글기를 형용사가 아니라 값으로 부르면 시안과 코드가 같은 것을 가리키고, 그 값을 몇 개로 정해 두면 화면이 백 개로 늘어나도 모서리는 같은 표정을 유지합니다.

각 모서리에서 잘라 낼 원의 반지름을 픽셀 같은 단위로 지정하면, 그 크기의 원이 모서리에 딱 맞게 들어간 모양으로 깎입니다. 0이면 직각이고, 값이 커질수록 둥글어집니다. 직각과 원 사이를 잇는 눈금이 하나 있다고 보면 됩니다.

알아 둘 규칙은 셋입니다.

1. 값의 상한은 요소 크기가 정합니다. 반경이 짧은 변의 절반에 이르면 그 변은 완전한 반원이 됩니다. 높이 40픽셀짜리 버튼에 20을 주면 양 끝이 둥근 알약 모양이 되고, 여기서 30을 줘도 모양은 더 변하지 않습니다. 정사각형에 같은 조건을 주면 원이 됩니다.
2. 같은 값이라도 요소가 크면 덜 둥글어 보입니다. 8픽셀은 32픽셀짜리 배지에서는 꽤 둥글지만 600픽셀짜리 카드에서는 거의 직각처럼 보입니다. 그래서 작은 요소에는 작은 값, 큰 요소에는 큰 값을 쓰는 단계표를 함께 둡니다.
3. 겹친 모서리는 안쪽부터 계산합니다. 카드 안에 버튼이 들어 있으면 바깥 반경은 안쪽 반경에 그 사이 여백을 더한 값이어야 두 곡선이 나란히 돕니다. 안쪽 버튼이 8이고 여백이 16이면 카드는 24입니다. 둘 다 8로 두면 바깥 모서리가 안쪽보다 급하게 꺾여 틈이 벌어진 것처럼 보입니다.

값은 아무 숫자나 쓰지 않고 0·4·8·16·9999 처럼 몇 단계로 정해 둡니다. 마지막의 아주 큰 값은 무조건 알약이나 원이 되라는 뜻으로 쓰는 관례입니다. 단계를 정해 두는 이유는 간격 스케일이 여백 값을 몇 개로 묶어 두는 이유와 같습니다. 고를 수 있는 값이 무한하면 화면마다 다른 값이 쌓입니다.

정해진 값은 디자인 토큰으로 이름을 붙여 둡니다. 색이나 간격처럼 값에 이름을 달아 시안과 코드가 함께 쓰는 단위입니다. 시안에 radius-md, 코드에 같은 이름이 있으면 나중에 제품 전체의 둥글기를 조정할 때 토큰 값 하나만 바꾸면 됩니다.

디자인 시스템에서는 부품마다 어떤 단계를 쓸지 미리 적어 둡니다. 버튼은 8, 카드는 16, 모달은 20, 아바타는 완전한 원처럼 정해 두면 새 화면을 만드는 사람이 매번 고민하지 않습니다.

브랜드 인상을 조정하는 자리로도 쓰입니다. 모서리가 직각에 가까우면 단정하고 도구 같은 느낌이 강해지고, 크게 둥글리면 부드럽고 친근해집니다. 금융이나 관리자 화면이 작은 값을 쓰고 소비자용 앱이 큰 값을 쓰는 경향은 여기서 나옵니다. 값 하나를 4에서 16으로 바꾸면 화면을 한 장도 새로 그리지 않고 제품 전체 인상이 달라집니다.

개발 쪽에서는 CSS의 border-radius 속성 하나로 지정합니다. 네 모서리에 서로 다른 값을 줄 수도 있습니다. 화면 아래에서 올라오는 시트는 위쪽 두 모서리만 둥글리고 아래쪽은 직각으로 둬서 화면 끝에 붙어 있다는 느낌을 만듭니다. 시안에 적힌 값이 코드에 그대로 옮겨지므로 핸드오프 때 따로 설명할 것이 거의 없는 항목이기도 합니다.

"이 카드만 반경이 12인데 토큰 값은 16이에요."

한 화면이 시스템에 정해 둔 단계를 벗어나 있으니 맞추자는 지적입니다.

"버튼을 완전 라운드로 갈까요, 아니면 8 유지할까요?"

알약 모양으로 바꿀지 지금 단계를 유지할지 고르자는 제안입니다.

"모달 안쪽 버튼 반경 때문에 모서리가 어긋나 보여요."

겹친 두 모서리의 곡선이 나란히 돌지 않아 생긴 문제를 짚는 말입니다.

페이지덱은 반경 단계를 0·4·8·16 넷으로 두고 있습니다. 민서가 새 요금제 화면을 그리면서 강조 카드에만 24를 썼을 때, 태오가 코드에 없는 값이라 토큰을 새로 만들어야 한다고 말하면서 논의가 열렸습니다.

민서의 이유는 그 카드가 다른 카드보다 커서 16으로는 덜 둥글어 보인다는 것이었습니다. 둘은 단계를 하나 더 만드는 대신 그 카드를 16으로 맞추고 대신 그림자를 얹어 구분하기로 했습니다. 단계를 늘리면 다음 사람이 어떤 카드에 24를 쓸지 다시 판단해야 하고, 그 판단이 사람마다 갈리면 넉 달 뒤에는 다시 화면마다 다른 값이 쌓이기 때문입니다.

취향 문제라 정답이 없다고 여기는 경우가 많습니다. 둥근 게 좋냐 각진 게 좋냐만 놓고 보면 실제로 정답이 없으니 자연스러운 생각입니다. 하지만 이 값에서 걸리는 문제는 어떤 값이 예쁘냐가 아니라 제품 안에서 값이 몇 개냐입니다. 8과 12 중 무엇을 골라도 괜찮고, 둘 다 쓰는 상태가 문제입니다. 정답이 없으니 각자 고르자고 두면 한 해 뒤에 여섯 개의 값이 섞인 화면이 남고, 그때는 어느 값이 맞는지 아무도 판정할 수 없어 전부 다시 훑어야 합니다.

둥글수록 친근해 보이니 값을 키우면 된다는 것도 흔한 오해입니다. 큰 값이 부드러운 인상을 주는 건 맞지만 요소마다 효과가 다릅니다. 높이 40픽셀 버튼에 20을 주면 알약이 되어 눌러야 할 것처럼 보이지만, 같은 20을 표의 각 줄이나 입력창에 주면 경계가 흐려져 어디까지가 한 칸인지 알아보기 어려워집니다. 여기에 중첩까지 겹치면 카드 안 버튼의 곡선이 바깥 곡선과 따로 놀면서 화면이 오히려 지저분해집니다. 값을 키울 때는 그 값을 쓸 요소의 크기와 안쪽에 무엇이 들어가는지를 함께 봅니다.