웹 개발을 하다 보면 CSS 변수 값을 실시간으로 바꿔가며 디자인을 미세 조정하고 싶을 때가 있죠. 외부 라이브러리를 설치하거나 복잡한 JavaScript를 작성하지 않고, CodePen에 내장된 slideVars 도구를 사용하면 아주 간단하게 이를 구현할 수 있습니다. 이 글에서는 slideVars의 기본 사용법부터 커스터마이징 방법까지 실무에서 바로 쓸 수 있는 팁을 알려드립니다. 자세한 내용은 근거자료에서 확인할 수 있어요.
기본 사용법: 2줄로 시작하기
slideVars를 사용하려면 CodePen의 JavaScript 패널에서 모듈을 import하고 초기화하기만 하면 됩니다. 그러면 CSS에 정의된 변수들을 자동으로 감지해 우측 상단에 조절 패널을 생성해줍니다.
// JavaScript 패널에 추가
import { slideVars } from "@codepen/slidevars";
slideVars.init();
주의사항: 기본(auto) 모드에서는 변수를 :root에 선언하고 기본값을 함께 정의해야 합니다. 아래는 관련 CSS 예시입니다.
/* CSS 패널에 추가 */
:root {
--main-color: #ff6b6b; /* 슬라이더로 조절될 색상 */
--spacing: 20px; /* 슬라이더로 조절될 간격 */
--rotation: 0deg; /* 슬라이더로 조절될 회전 각도 */
}
.box {
background-color: var(--main-color);
padding: var(--spacing);
transform: rotate(var(--rotation));
}
위 코드를 추가하면 CodePen 우측 상단에 --main-color, --spacing, --rotation에 대한 슬라이더가 자동으로 나타납니다.
고급 설정: 수동 구성하기
자동 감지 모드가 마음에 들지 않거나, 특정 요소에만 변수를 적용하고 싶다면 수동으로 설정할 수 있습니다. slideVars.init()에 설정 객체를 전달하면 됩니다.
import { slideVars } from "@codepen/slidevars";
slideVars.init({
variables: [
{
name: "--box-size", // CSS 변수명
value: 100, // 기본값
unit: "px", // 단위 (빈 문자열 ""은 단위 없음을 의미)
min: 50, // 최소값
max: 300, // 최소값
scope: ".my-box" // 이 변수가 적용될 CSS 선택자
},
{
name: "--opacity",
value: 0.5,
unit: "", // 단위 없음 (unit-less)
min: 0,
max: 1,
step: 0.1 // 현재는 지원되지 않음 (정수만 증가)
}
]
});
현재 한계점: 수동 모드에서 step 속성은 아직 완전히 지원되지 않는 것 같습니다. 단위 없는 값(unit: "")은 정수 단위로만 증가합니다. 기본(auto) 모드에서는 소수점 조절이 가능합니다.
실무 적용 팁 및 마무리
- 패널 위치 변경: HTML 원하는 위치에
<slide-vars>커스텀 요소를 추가하면 패널을 그 위치에 렌더링할 수 있습니다. 기본값은 HTML 최하단입니다. - 스타일링: 생성된
<slide-vars>요소에 CSS를 적용해 디자인을 변경할 수 있습니다. - CodePen 외부 사용:
@codepen/slidevars모듈은 CodePen 밖의 프로젝트에서도 import하여 사용할 수 있습니다.
slideVars는 프로토타이핑, 교육, 또는 단순히 CSS 속성의 영향을 실시간으로 확인하고 싶을 때 매우 강력한 도구입니다. 복잡한 설정 없이 빠르게 인터랙티브한 데모를 만들 수 있다는 점이 가장 큰 매력이죠. 한번쯤 사용해 보시면 개발 흐름이 훨씬 편해질 거예요.