CSS 디자인 도구 추가: Border Radius Generator로 둥근 모서리 값을 쉽게 만들기

rnhub.kr

 

무료 웹도구 사이트 RnHub에 새로운 디자인 도구를 추가했습니다.

이번에 추가한 도구는 Border Radius Generator입니다.

웹사이트를 만들다 보면 카드, 버튼, 이미지 박스, 모달 같은 요소에 둥근 모서리를 자주 적용하게 됩니다. 이때 CSS의 border-radius 값을 직접 입력하면서 여러 번 수정하는 일이 많습니다.

Border Radius Generator는 이런 작업을 조금 더 쉽게 하기 위해 만든 도구입니다.

Border Radius Generator란?

Border Radius Generator는 CSS border-radius 값을 시각적으로 조정하고, 결과 코드를 바로 복사할 수 있는 도구입니다.

슬라이더를 움직이면 미리보기 박스의 모서리가 실시간으로 바뀝니다.

지원하는 기능은 다음과 같습니다.

• 전체 모서리 반경 조정
• 왼쪽 위 모서리 조정
• 오른쪽 위 모서리 조정
• 오른쪽 아래 모서리 조정
• 왼쪽 아래 모서리 조정
• 박스 배경색 변경
• 미리보기 박스 크기 변경
• CSS 코드 복사
• 기본값 초기화

왜 만들었을까?

최근 RnHub에는 디자인 관련 도구를 하나씩 추가하고 있습니다.

이미 추가한 도구로는 다음이 있습니다.

• Color Converter
• Color Contrast Checker
• Box Shadow Generator
• CSS Gradient Generator

이번 Border Radius Generator는 이 디자인 도구 흐름을 이어가는 기능입니다.

웹 UI에서 둥근 모서리는 생각보다 자주 사용됩니다. 카드형 레이아웃, 버튼, 입력 박스, 이미지 썸네일, 배너, 팝업 UI 등 대부분의 요소에 들어갑니다.

하지만 네 모서리를 각각 다르게 적용하려면 CSS 값을 직접 계산하거나 여러 번 수정해야 합니다.

예를 들어 다음과 같은 CSS를 직접 작성해야 합니다.

border-radius: 24px 24px 8px 8px;

간단해 보이지만 실제 디자인을 맞추다 보면 수치를 계속 바꾸게 됩니다.

그래서 눈으로 보면서 조정할 수 있는 도구가 있으면 편합니다.

어떻게 사용할 수 있나?

Border Radius Generator에서는 전체 반경 값을 먼저 정할 수 있습니다.

그다음 필요하면 각 모서리를 따로 조정합니다.

예를 들어 카드 전체를 부드럽게 만들고 싶다면 모든 모서리를 24px 정도로 설정할 수 있습니다.

버튼을 pill 형태로 만들고 싶다면 값을 크게 올리면 됩니다.

특정 방향만 둥글게 만들고 싶다면 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 값을 각각 다르게 설정하면 됩니다.

설정이 끝나면 생성된 CSS를 복사해서 바로 사용할 수 있습니다.

브라우저 안에서 처리

이 도구는 서버로 값을 보내지 않습니다.

입력한 값과 미리보기 계산은 모두 브라우저 안에서 처리됩니다.

그래서 별도 설치나 로그인 없이 바로 사용할 수 있습니다.

앞으로 추가할 디자인 도구

앞으로도 RnHub에는 디자인과 프론트엔드 작업에 도움이 되는 도구를 계속 추가할 예정입니다.

예정 후보는 다음과 같습니다.

• CSS Button Generator
• Color Palette Generator
• CSS Grid Generator
• Flexbox Helper
• Glassmorphism Generator

작은 도구이지만 이런 기능들이 쌓이면 웹사이트 제작 과정에서 반복되는 작업을 많이 줄일 수 있습니다.

마무리

이번 업데이트로 RnHub의 디자인 도구 라인이 조금 더 풍부해졌습니다.

Color Contrast Checker, Box Shadow Generator, Border Radius Generator를 함께 사용하면 기본적인 카드 UI나 버튼 UI를 만들 때 꽤 유용합니다.

앞으로도 새 도구를 추가할 때마다 제작 과정과 활용 방법을 함께 기록해보겠습니다.