2015년까지 한국의 인터넷·은행 사이트 다수는 공인인증서 기반 보안 프로그램과 ActiveX에 의존하도록 법으로 규정돼 있었고, 그 결과 Internet Explorer 전용으로 최적화된 사이트가 오랫동안 표준으로 자리 잡아 그레이디언트 같은 표준 CSS 기능의 실제 도입이 다른 나라보다 늦어진 측면이 있다.
색을 퍼뜨리는 세 가지 방식
linear-gradient(45deg, red, blue)는 지정된 각도의 직선을 따라 색을 늘어놓는다 — 버튼, 배너, 카드 배경에 가장 흔히 쓰인다. radial-gradient(circle, yellow, orange)는 한 점을 중심으로 동심원이나 타원 형태로 색을 바깥쪽으로 퍼뜨려, 조명 효과를 표현하기에 좋다. conic-gradient(red, yellow, green, blue, red)는 시계 바늘처럼 중심점을 기준으로 색을 회전시키며, 별도의 그래픽 없이 원형 차트나 링 형태의 진행률 표시기를 만들 수 있는 유일한 형식이다.
color stop과 반복 패턴
각 색은 linear-gradient(red 0%, yellow 50%, blue 100%)처럼 백분율 위치에 지정할 수 있어 전환이 얼마나 급격한지 조절할 수 있다. repeating-linear-gradient()와 repeating-radial-gradient() 함수는 같은 color stop 순서를 자동으로 반복해 CSS 한 줄로 줄무늬나 체스판 패턴을 만들어 낸다.
왜 필요한가
- 각도와 색을 직접 계산하지 않고 완성된 CSS 그레이디언트 코드를 바로 찾아 복사한다.
- 원하는 시각 효과에 어떤 그레이디언트 형식이 맞는지 파악한다.
- color stop 위치를 정밀하게 조정해 원하는 색 전환을 만든다.
규제가 풀리며 시작된 표준 CSS 시대
2015년 공인인증서 의무 사용 규정이 폐지되고 액티브X 의존적 웹 환경이 서서히 표준 브라우저 환경으로 전환되면서, 한국 웹 서비스들도 크로스 브라우저 CSS 기능을 자유롭게 쓸 수 있는 여건이 갖춰졌다. 이후 카카오뱅크나 토스 같은 핀테크 서비스들이 그레이디언트를 브랜드 아이덴티티의 핵심 요소로 적극 활용하며, 짧은 시간 안에 한국 웹 디자인에서도 그레이디언트 배경이 흔한 스타일로 자리 잡았다.