시각적 크기 통일하기

한 패밀리에 속한 아이콘 각각의 사이즈를 통일하긴 하지만, 같은 영역 안에서의 사격형은 원보다 면적이 넓기 때문에 더 커 보이게 됩니다. 이런 경우에는 임의로 원의 크기를 조금 더 키운다거나 사격형의 크기를 조금 더 줄여 비율을 맞춰주는 것을 제안합니다

18px 그리드 안에서 사각형과 원을 그리는 예시를 들어보겠습니다. 정사각형의 면적은 324제곱 픽셀이고 정원의 면적은 약 254제곱 픽셀로 면적에서 차이가 있기 때문에 같은 그리드 안에서 그려졌지만 정사각형보다 정원이 시각적으로 더 작아 보입니다.

같은 영역 안에서 정사각형이 정원과 같은 면적이 되려면 원의 지름이 사각형 한 변의 약 1.13배가 되어야 합니다. 반대로 원의 크기에 약 0.88배를 하면 같은 너비의 사각형이 나오게 됩니다. 때문에 18px에 1.13을 곱한 값인 약 20px로 원의 지름을 계산해야 314제곱 픽셀로 원과 사각형이 서로 비슷한 면적을 갖게 됩니다.

모서리 곡률(Radius)

아이콘의 모서리 곡률(Radius, R 값)은 날카로울수록 세련된 인상을, 부드러울수록 귀여운 인상을 줍니다. 아이콘의 통일성을 위해 같은 아이콘 패밀리에는 동일한 곡률을 적용합니다. 권장 코너 반경 값은 0dp와 4dp 사이입니다.