{ freetool24 }
Developer Tools

CSS 개발자 도구: 그래디언트, 그림자 생성, 단위 변환, 접근성 검사

브라우저 기반 CSS 도구 실용 가이드 — 그래디언트와 box shadow를 시각적으로 만들고, px/rem/em 간 변환, WCAG 색상 대비 검사, 색상 팔레트 생성, CSS를 Tailwind 클래스로 변환하는 방법을 소개합니다.

7분 읽기

컬러풀한 디자인 요소가 있는 모니터의 CSS 코드

CSS는 프론트엔드 개발에서 가장 시각적이면서도 가장 번거로운 작업 중 하나입니다. 헥스 값과 각도를 일일이 조정하며 그래디언트를 수작업으로 만드는 건 느립니다. 두 색상 간의 WCAG 대비 비율을 계산하려면 수식이 필요합니다. px 값을 rem으로 변환하려면 루트 폰트 크기를 알아야 합니다. 이 모든 작업은 몇 초면 끝나야 할 일들입니다 — 적절한 도구를 사용하면 실제로 그렇게 됩니다.

다음은 불필요한 추측을 없애주는 CSS 전용 브라우저 도구들을 소개합니다.

1. CSS Gradient Generator

그래디언트 CSS를 직접 작성하는 건 번거롭습니다. linear-gradient(135deg, #667eea 0%, #764ba2 100%)는 문법을 이해하면 말이 되지만, 각도, 색상 정지점, 위치를 시각적으로 조정하며 반복 작업하는 건 생성기를 쓰는 편이 훨씬 빠릅니다.

CSS Gradient Generator는 다음을 지원합니다:

  • 선형 그래디언트 — 각도 설정, 원하는 위치에 색상 정지점 추가
  • 방사형 그래디언트 — 원형 또는 타원형, 중심 위치 조정 가능
  • 다중 색상 정지점 — 필요한 만큼 그래디언트 정지점 추가
  • 실시간 미리보기 — 값을 변경할 때마다 전체 너비 미리보기가 즉시 업데이트

출력 예시:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

활용 팁:

  • 낮은 투명도 정지점(알파 포함)을 사용해 frosted-glass 효과 연출
  • 그래디언트 각도를 레이아웃의 대각선 방향에 맞춰 모던한 슬랜트 효과 구현
  • 은은한 배경을 원할 때는 색상 정지점의 채도를 낮추고 밝기를 높게 유지

2. CSS Box Shadow Generator

Box shadow는 그래디언트보다 직관적으로 파악하기 어렵습니다. 문법은 offset-x offset-y blur spread color inset — 현실감 있는 깊이 효과를 위해 여러 그림자를 겹치려면 이 모든 파라미터를 동시에 조율해야 합니다.

CSS Box Shadow Generator를 사용하면:

  • 여러 그림자 레이어 추가 — 시각적으로 겹쳐서 확인
  • 실제 카드 요소에서 실시간 미리보기 확인
  • 눌림/조각 효과를 위해 레이어별 inset 토글
  • 레이어별로 blur, spread, offset, 색상을 독립적으로 조정

주요 그림자 패턴:

/* 부드럽게 떠오른 카드 */
box-shadow:
  0 1px 3px rgba(0,0,0,.12),
  0 4px 12px rgba(0,0,0,.08);

/* 깊은 입체감 (모달) */
box-shadow:
  0 4px 6px rgba(0,0,0,.05),
  0 10px 15px rgba(0,0,0,.1),
  0 20px 25px rgba(0,0,0,.06);

/* 컬러 글로우 (버튼) */
box-shadow: 0 4px 15px rgba(99,102,241,.4);

/* Inset (눌린 상태) */
box-shadow: inset 0 2px 4px rgba(0,0,0,.15);

다중 레이어 방식이 자연스러운 그림자를 만드는 핵심입니다 — 단일 레이어는 평평하고 딱딱해 보이지만, 서로 다른 스케일의 두세 개 레이어를 조합하면 자연스러운 깊이감이 생깁니다.

3. CSS Unit Converter: px ↔ rem ↔ em ↔ vw

CSS에는 다양한 단위가 혼재합니다. 상황에 맞는 단위를 선택하고 서로 변환하는 것은 프론트엔드 개발자의 일상적인 작업입니다.

CSS Unit Converter는 다음 단위 간 변환을 지원합니다:

단위 기준
px 절대 픽셀
rem 루트 폰트 크기 (기본값 16px)
em 부모 요소 폰트 크기
pt 인쇄 포인트 (1pt = 1.33px)
cm / mm 물리적 측정 단위
vw / vh 뷰포트 너비 / 높이
% 부모 요소 크기

조정 가능한 파라미터:

  • 루트 폰트 크기 — 16px에서 html { font-size } 설정값으로 변경
  • 부모 폰트 크기 — em 계산에 사용
  • 뷰포트 크기 — vw/vh 계산에 사용

단위별 사용 가이드:

  • rem — 폰트 크기에 사용, 브라우저 접근성 설정에 따라 확장됨
  • px — 테두리, 그림자, 스케일이 변하면 안 되는 세부 요소에 사용
  • em — 컴포넌트 자체 텍스트 크기에 맞춰 확장되어야 하는 padding/margin에 사용
  • vw/vh — 전체 화면 레이아웃과 히어로 섹션에 사용
  • % — 컨테이너 내 반응형 너비에 사용

4. Color Contrast Checker: WCAG 접근성

자신의 모니터에서 괜찮아 보이는 색상도 WCAG 접근성 기준을 통과하지 못할 수 있습니다 — 저시력, 색각 이상, 또는 오래된 화면을 사용하는 사용자가 콘텐츠를 읽지 못할 수도 있다는 뜻입니다.

Color Contrast Checker는 전경색과 배경색 간의 대비 비율을 계산하고, 각 WCAG 레벨에 대한 통과/실패 여부를 보여줍니다:

레벨 필요 비율 적용 대상
AA (일반 텍스트) 4.5:1 본문, 단락
AA (큰 텍스트) 3:1 18px 이상 또는 14px 이상 굵은 글씨
AAA (일반 텍스트) 7:1 향상된 접근성
AAA (큰 텍스트) 4.5:1 향상된 접근성, 큰 텍스트

자주 발생하는 문제 조합:

흰 배경에 연한 회색 텍스트: #999 on #fff → 비율 2.85:1 ❌ AA 실패
흰 배경에 중간 회색:        #767 on #fff → 비율 4.48:1 ⚠ 간신히 실패
흰 배경에 짙은 회색:        #595 on #fff → 비율 5.74:1 ✅ AA 통과

검사 도구는 배경 위의 텍스트를 실시간으로 미리보여주므로, 숫자만이 아니라 사용자가 실제로 보게 되는 화면을 직접 확인할 수 있습니다.

대비 실패 시 빠른 수정 방법:

  • 텍스트 색상을 어둡게 하세요 (배경을 밝게 하면 오히려 대비가 줄어듭니다)
  • 폰트 크기를 키워 "큰 텍스트" 기준을 적용받으세요 (더 낮은 임계값 적용)
  • 이미지 위 텍스트에는 반투명 어두운 오버레이를 추가하세요

5. Color Palette Generator

단일 브랜드 색상으로 일관된 색상 시스템을 설계하려면 색채 이론에 대한 이해가 필요합니다. Color Palette Generator는 기본 색상에서 네 가지 유형의 조화로운 팔레트를 생성합니다:

보색(Complementary): 색상환에서 반대편에 위치한 색상. 선명하고 대비가 강한 조합을 만듭니다. CTA에 적합합니다.

유사색(Analogous): 색상환에서 인접한 세 가지 색상. 조화롭고 안정감 있는 팔레트를 만듭니다. 배경과 콘텐츠 영역에 적합합니다.

삼색(Triadic): 균등하게 배치된 세 가지 색상. 역동적이고 균형 잡힌 팔레트를 만듭니다. 데이터 시각화에 적합합니다.

단색(Monochromatic): 단일 색조의 틴트와 쉐이드. 세련되고 전문적인 팔레트를 만듭니다. 다크 모드/라이트 모드 쌍에 적합합니다.

각 팔레트는 hex 코드, RGB 값, 바로 복사할 수 있는 CSS 커스텀 프로퍼티 이름과 함께 표시됩니다.

6. Color Format Converter: HEX ↔ RGB ↔ HSL

디자인 도구는 색상을 HEX로 출력합니다. CSS에서는 rgba()를 위해 RGB가 필요할 때도 있습니다. HSL로 작업하는 디자이너도 있습니다. Color Format Converter는 모든 형식 간 변환을 즉시 처리합니다:

#6366f1
↕
rgb(99, 102, 241)
↕
hsl(239, 84%, 67%)
↕
hsb(239, 59%, 95%)  ← Photoshop/Figma HSB

HSL이 가장 유용한 형식인 이유:

  • hsl(H, S%, L%)는 색조, 채도, 밝기를 분리합니다
  • 색상을 더 밝게 만들려면: L%를 높이세요
  • 더 어둡게 만들려면: L%를 낮추세요
  • 채도를 낮추려면: S%를 줄이세요
  • 프로그래밍 방식으로 틴트와 쉐이드를 쉽게 생성 가능

7. Tailwind CSS Converter: CSS ↔ Tailwind

프로젝트를 Tailwind로 마이그레이션하거나, CSS로 작성하는 디자이너와 협업하며 유틸리티 클래스로 변환해야 할 때, Tailwind CSS Converter가 양방향 변환을 모두 처리합니다.

CSS → Tailwind:

/* Input */
.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

<!-- Output -->
<div class="flex flex-col p-4 rounded-lg bg-white shadow-sm">

Tailwind → CSS: 반대 방향 — Tailwind 클래스가 실제로 어떤 역할을 하는지 이해하거나, 스타일을 컴포넌트 스타일시트로 추출할 때 유용합니다.

8. Color Picker: 모든 색상에서 HEX, RGB, HSL 추출

특정 색상을 선택하고 모든 형식의 값을 동시에 얻으려면 Color Picker를 사용하세요. 전체 색상환과 채도/밝기 선택기를 제공하며 실시간으로 결과를 출력합니다.

개발자 도구 내에서만 작동하는 브라우저 devtools의 색상 선택기와 달리, 이 도구는 항상 사용할 수 있으며 원하는 형식으로 값을 복사할 수 있습니다.

종합 정리: CSS 워크플로우

다음은 이 도구들을 활용한 일반적인 디자인-코드 워크플로우입니다:

  1. Color Picker로 브랜드 색상 선택
  2. Color Palette Generator로 전체 팔레트 생성 — 보색 및 단색 변형 확보
  3. Color Contrast Checker로 모든 텍스트/배경 조합의 WCAG 준수 여부 검사
  4. 필요에 따라 Color Format Converter로 HEX/RGB/HSL 간 변환
  5. CSS Gradient Generator로 컴포넌트 배경 구성
  6. CSS Box Shadow Generator로 카드와 모달에 깊이감 추가
  7. CSS Unit Converter로 디자인 스펙(px)을 접근성 친화적인 CSS(rem)로 단위 변환
  8. 프로젝트에서 유틸리티 클래스를 사용한다면 Tailwind Converter로 Tailwind로 변환

각 단계는 1분도 걸리지 않습니다. 브랜드 색상 선택부터 프로덕션 준비 CSS 완성까지의 전체 워크플로우가, Stack Overflow 검색 한 번보다 짧은 시간 안에 끝납니다.

모든 아티클로 돌아가기도구 둘러보기