Color Contrast Checker와 Box Shadow Generator를 추가

rnhub.kr

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

이번에 추가한 도구는 두 가지입니다.

• Color Contrast Checker
• Box Shadow Generator

둘 다 웹디자인이나 프론트엔드 작업을 할 때 자주 필요한 기능입니다.

색상 대비를 확인하거나, CSS 그림자 값을 조정하는 작업은 작은 일이지만 꽤 자주 반복됩니다.
그래서 브라우저에서 바로 사용할 수 있는 형태로 추가했습니다.

Color Contrast Checker

Color Contrast Checker는 전경색과 배경색의 대비 비율을 계산하는 도구입니다.

웹사이트를 만들 때 색상이 예쁘게 보이는 것도 중요하지만, 실제로 읽기 쉬운지도 중요합니다.

예를 들어 버튼 배경색과 텍스트 색상의 대비가 낮으면 사용자가 버튼 문구를 읽기 어렵습니다.
특히 밝은 환경에서 화면을 보거나, 시력이 약한 사용자에게는 더 큰 문제가 될 수 있습니다.

이 도구에서는 전경색과 배경색을 입력하면 다음 정보를 확인할 수 있습니다.

• 대비 비율
• 일반 텍스트 AA 통과 여부
• 큰 텍스트 AA 통과 여부
• 일반 텍스트 AAA 통과 여부
• 큰 텍스트 AAA 통과 여부
• 색상 미리보기
• 결과 복사

HEX 색상과 RGB 형식을 지원하고, 색상 선택기도 함께 사용할 수 있게 만들었습니다.

웹사이트 본문, 버튼, 카드, 배너, 링크 색상을 정할 때 활용하기 좋습니다.

Box Shadow Generator

Box Shadow Generator는 CSS의 box-shadow 값을 시각적으로 조정하는 도구입니다.

CSS에서 그림자 값을 직접 작성하다 보면 수치를 여러 번 바꾸게 됩니다.

예를 들면 다음 값을 계속 조정하게 됩니다.

• X offset
• Y offset
• Blur
• Spread
• Opacity
• Shadow color
• Inset 여부

Box Shadow Generator에서는 슬라이더를 움직이면서 실시간으로 미리보기를 확인할 수 있습니다.

생성된 CSS는 바로 복사할 수 있습니다.

카드 UI, 버튼, 모달, 드롭다운, 이미지 박스 같은 요소에 그림자를 줄 때 사용할 수 있습니다.

왜 디자인 도구를 추가했을까?

RnHub는 처음에는 개발자 도구 중심으로 시작했습니다.

JSON Formatter, Base64 Encoder, URL Encoder, Regex Tester 같은 도구가 대표적입니다.

하지만 웹사이트를 만들다 보면 개발 도구뿐 아니라 디자인 도구도 자주 필요합니다.

색상 변환, 대비 검사, 그라디언트 생성, 그림자 생성 같은 기능은 프론트엔드 작업에서 반복적으로 사용됩니다.

그래서 디자인 관련 도구도 하나씩 추가하고 있습니다.

현재 디자인 관련 도구는 다음 방향으로 확장하고 있습니다.

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

앞으로는 Button Generator, Color Palette Generator 같은 도구도 추가할 수 있습니다.

브라우저 내부에서 처리하는 방식

이번에 추가한 두 도구는 모두 브라우저 내부에서 동작합니다.

입력한 색상 값이나 CSS 설정값을 서버로 전송하지 않습니다.

이런 구조는 간단한 웹도구에 잘 맞습니다.

사용자는 빠르게 결과를 확인할 수 있고, 사이트 운영자는 서버 부담 없이 기능을 제공할 수 있습니다.

도구가 많아질수록 중요한 것

RnHub의 도구가 늘어나면서 단순히 도구를 추가하는 것만으로는 부족하다는 생각이 들었습니다.

그래서 최근에는 도구를 찾고 다시 사용하는 기능도 함께 개선하고 있습니다.

현재 RnHub에는 다음 기능이 들어가 있습니다.

• 도구 목록 자동 렌더링
• 검색 기능
• 빠른 검색
• 최근 사용 도구
• 즐겨찾기
• 관련 도구 추천
• 직접 방문한 도구 자동 기록

도구가 많아질수록 사용자는 “어디에 있는지”보다 “얼마나 빨리 다시 찾을 수 있는지”를 중요하게 느낄 수 있습니다.

그래서 앞으로도 기능 추가와 함께 탐색 경험도 계속 개선할 예정입니다.

앞으로 추가할 디자인 도구

앞으로 추가해보고 싶은 디자인 도구는 다음과 같습니다.

• CSS Button Generator
• Color Palette Generator
• Border Radius Generator
• CSS Grid Generator
• CSS Flexbox Helper
• Glassmorphism Generator
• Neumorphism Generator

이런 도구들은 정적 웹사이트에서도 충분히 구현할 수 있습니다.

하나씩 추가하면서 실제 사용하기 편한 형태로 다듬어보려고 합니다.