UI 디자인에서 중첩된 요소의 모서리 반경

Todd Hamilton 이미지

 

요소를 중첩할 때 부모 요소와 자식 요소 모두에 동일한 모서리 반경을 사용하는 경우가 많습니다. 하지만 반경이 같으면 부모 요소와 자식 요소 사이의 간격(패딩)의 두께가 일정하지 않아(어떤 부분은 더 두껍고 어떤 부분은 더 얇아짐) 시각적인 관점에서 보기 좋지 않은 UI 디자인이 될 수 있습니다.

 

부모 요소와 자식 요소 모두에 동일한 반경을 사용합니다. 이미지 제공: Lily Konings

 

한 가지 방법은 부모 요소보다 자식 요소에 약간 더 작은 모서리 반경을 사용하는 것입니다. 이렇게 하면 가장자리 주변에 보다 일관된 시각적 간격을 만드는 데 도움이 됩니다. 동일한 곡률을 유지하려면 간단한 공식을 사용합니다:

Outer radius = Inner radius + Padding

 

 

부모 요소와 자식 요소에 서로 다른 반경을 사용합니다. 이미지 제공: Lily Konings

 

 

다음은 참조할 수 있는 CSS 코드 샘플입니다.

.outer {
  border-radius: 24px;
  padding: 8px;
}

.inner {
  border-radius: 16px;
}

 

이 공식은 보편적인 것이 아니므로 경우에 따라 작동하지 않을 수도 있습니다. 계산을 하면 숫자가 나오지만, 일단 사용해 보면 뭔가 잘못되었다는 것을 알 수 있습니다. 따라서 수학에만 의존할 것이 아니라 시각적 불균형을 발견할 수 있도록 눈을 훈련하는 것이 중요합니다.

 

---

 

출처:

https://medium.com/ux-planet/corner-radius-of-nested-elements-in-ui-design-4c27bb24a854