화려한 색상 없이도 은은한 그라데이션으로 세련된 UI를 만들 수 있습니다. 무채색 그라데이션 활용법을 알아봅니다.
미세한 밝기 차이
#FFFFFF에서 #F8F9FA로 가는 그라데이션은 거의 눈에 안 띄지만 평면적인 느낌을 줄입니다. 히어로 섹션 배경에 적용하면 부드러운 깊이감이 생깁니다.
방향 선택
위에서 아래로(to bottom) 어두워지는 게 자연스럽습니다. 빛이 위에서 온다는 인식 때문입니다. 반대로 하면 어색할 수 있습니다.
색상 값 정하기
색상 변환기로 HSL을 확인하고 L(밝기)만 살짝 다른 두 색을 만드세요. 차이는 3~5% 정도면 충분합니다.
노이즈 텍스처 추가
SVG 노이즈 필터를 overlay하면 디지털 느낌을 줄이고 자연스러워집니다. 그라데이션 밴딩 현상도 완화됩니다.
실제 적용 예시
랜딩 페이지 히어로 섹션에 #FAFAFA에서 #F0F0F0으로 가는 그라데이션을 적용하면 단조로운 흰 배경보다 세련된 느낌을 줍니다. 푸터에는 #F8F9FA에서 #E9ECEF로 가는 그라데이션을 적용해 콘텐츠 영역과 자연스럽게 구분할 수 있습니다. 색상 변환기로 HSL 값을 확인하면서 미세한 조절을 해보세요.
CSS 코드
background: linear-gradient(180deg, #FFFFFF 0%, #F8F9FA 100%); 이런 식으로 작성합니다. 그라데이션 방향과 색상 정지점 위치를 조절해서 원하는 효과를 만들어보세요. 카드 컴포넌트에도 비슷한 기법을 적용하면 깊이감이 생깁니다.
마무리 체크
색상 작업이 끝나면 다양한 환경에서 테스트하세요. 다른 모니터, 다른 브라우저, 모바일 기기에서 확인합니다. 색상 변환기에서 기준 색상을 저장해두면 나중에 참고할 수 있습니다.