구글 AI에 따르면, 반응형 웹 디자인은 “다양한 장치와 화면 크기에서 보기 좋고 잘 작동하는 웹 페이지를 만드는 웹 디자인 접근 방식”이다. 2010년 Ethan Marcotte가 반응형 웹 디자인resposive web design이라는 용어를 처음으로 사용하며 유동적인 그리드fluid grid, 유연한 이미지flexible images, 미디어 쿼리media queries의 개념을 소개했다. ‘반응형’이라는 용어를 사용했지만, 그 반응의 대상은 화면 크기와 해상도에 그쳤다. 14년이 지난 지금까지도, 반응형 웹이 반응하는 변수는 마코트가 처음 제안한 것들에서 다르지 않다. 지금까지의 반응형 웹은 정확히 말하면 너비에 반응하는 레이아웃width-based fluid layout에 가깝다.   이제와서 용어를 바로잡기보단, 반응형 웹을 이루는 요소들을, 그 의미에 맞게 재구성하려 한다. 14년 전 마코트가 미처 포함하지 못한 여섯가지 변수들—시간, 소리, 스크롤, 기기의 기울기, 배터리, 커서 위치—에 반응하는 단위들을 제안하며, 새롭게 반응형 웹사이트를 디자인한다.   — 『새로운 반응형 웹 디자인』, 2024년 12월, 권윤
sec 단위는 페이지가 로드된 후 경과한 시간을 CSS 속성으로 활용할 수 있도록 해주는 단위이다. 이를 통해 시간 기반의 시각적 변화를 구현할 수 있으며, 단순히 애니메이션의 반복적 패턴에서 벗어나, 시간이 흐름에 따라 웹페이지가 실시간으로 진화하는 사용자 경험을 제공할 수 있다. 1sec은 페이지가 로드된 후 1초를 의미하며, 경과한 시간을 기준으로 CSS 속성을 실시간으로 조정할 수 있다.    전통적인 CSS 애니메이션과 달리, sec 단위는 시간의 변화를 즉시 반영하므로 호버나 클릭과 같은 트리거가 필요하지 않다. 이 단위는 시간 경과에 따라 지속적으로 업데이트되므로, 타임 세일과 같은 상황에서 유저를 조급하게 만들고자 할 때 사용하기 적합하다.
동작 방식
  • 시작값: 페이지가 로드되면 sec 단위는 0에서 시작합니다.
  • 증가값: 시간이 1초 경과할 때마다 sec 값이 1씩 증가합니다. 예를 들어, 페이지 로드 후 5초가 경과했다면 1sec = 5로 계산된다.
  • calc()와 같은 CSS 함수와 결합하여 다양한 스타일 계산에 활용할 수 있다. 예를 들어, width: calc(100px + 2sec)로 설정하면, 페이지 로드 후 5초가 지나면 width 값은 100px + (2 × 5) = 110px가 된다.
  dB 단위는 사용자가 접속한 기기 주변의 소리 크기(데시벨, Decibel)에 따라 CSS 속성을 동적으로 변화시키는 단위다. 이 단위는 사용자가 조용한 방에 있을 때는 요소가 차분히 유지되고, 시끄러운 환경에서는 더 커지거나, 색이 바뀌는 등의 반응을 보이게 한다.    dB 단위는 기기에서 감지한 데시벨 값을 기반으로 동작한다. 주변 소리가 50dB인 경우 1dB = 50으로 계산되며, 이 값을 CSS 속성에 반영하여 스타일을 동적으로 조정할 수 있다. 소리가 조용하면(20dB) 요소는 작고 차분하게 유지된다. 소리가 커지면(80dB) 요소는 더 커지거나, 색상이 강렬해지고, 강조되며 주변 환경의 변화를 반영한다. 이 단위를 사용하면 웹페이지는 사용자의 환경에 미묘하게 적응하며, 단순히 정보를 전달하는 것을 넘어 사용자의 공간과 상호작용하는 웹 디자인을 구현할 수 있다.   동작 방식 dB 단위는 환경 소음 크기를 데시벨(dB) 값으로 측정하고 이를 실시간으로 계산한다.
  • 기본 원리: 1dB는 현재 소음 크기(dB)의 상대값으로 계산된다.
  • 예시:
    • 50dB 환경에서 1dB는 50으로 계산됩니다.
    • 30dB 환경에서 1dB는 30으로 계산됩니다.
따라서, CSS 속성에서 1dB 값을 사용할 경우, 소음 크기가 높아질수록 해당 속성 값도 커지게 된다.   예시 
/* 소음 크기에 따라 점점 넓어지는 div */
div {
  width: calc(100px + 2dB); /* 데시벨 당 2px씩 증가 */
  height: 50px;
  background-color: hsl(calc(200 + 5dB), 100%, 50%); /* 소리 크기에 따라 색상 변화 */
}

/* 소음 크기에 따라 투명해지는 텍스트 */
p {
  opacity: calc(1 - 0.01 * dB); /* 데시벨 당 0.01씩 투명도 감소 */
}

/* 소음 크기에 따라 글자가 커지는 헤딩 */
h1 {
  font-size: calc(20px + 0.5dB); /* 데시벨 당 폰트 크기 0.5px 증가 */
}
bat 단위는 사용자의 기기 배터리 상태(잔량 및 충전 여부)에 따라 CSS 속성을 동적으로 조정하기 위해 도입된 단위이다. 이 단위를 활용하면 배터리 잔량을 기반으로 웹 인터페이스의 요소 크기, 색상, 투명도, 위치 등을 실시간으로 변경할 수 있다. 이를 통해 기기의 전력 상황을 반영한 시각적 피드백을 제공하며, 배터리 수준이 낮아질수록 애니메이션이나 밝기 등을 절약적으로 조정하는 전략적 디자인을 가능하게 한다. 이러한 처리 방식은 단순히 스타일을 변경하는 것에 그치지 않고, 사용자가 느끼는 인터페이스에 미묘한 “인격”을 부여할 수 있다. 배터리가 충분할 때는 활기차고 생동감 있는 스타일을, 배터리가 부족할 때는 점차 힘을 잃은 듯한, 절약적인 스타일을 보여주는 식이다. 예를 들어 bat 단위와 CSS의 -webkit-line-clamp 속성을 결합하면 배터리 잔량에 따라 텍스트 줄 수를 조절해, 사용자 기기의 피로도를 간접적으로 드러낼 수 있다.
scroll 단위는 사용자가 웹페이지를 얼마나 스크롤했는지에 따라 CSS 속성을 동적으로 조정할 수 있는 단위다. 페이지를 조금 스크롤했을 때는 요소가 작고 차분하게 유지되고, 많이 스크롤했을 때는 점점 커지거나 색상이 강렬해지는 등 사용자 동작에 따라 스타일이 변화하도록 할 수 있다. 사용자가 페이지를 스크롤하면서 텍스트가 점점 커지거나, 박스가 아래로 이동하는 등 시각적 변화를 구현할 수 있다. scroll 단위는 아래와 같은 수치 기반의 다양한 CSS 속성에 사용할 수 있다.
  • 크기와 배치: width, height, top, left, margin, padding
  • 시각적 효과: opacity, color, background-color, transform
  • 텍스트 스타일: font-size, letter-spacing  
동작 방식 scroll 단위는 페이지 스크롤 위치 값을 바탕으로 동작한다. 사용자가 스크롤을 내릴수록 scroll 값은 증가하며, 이를 CSS 속성에 활용하여 동적인 스타일 변화를 줄 수 있다.
  • 스크롤 초기값(0): 사용자가 스크롤을 전혀 하지 않은 상태에서는 scroll 값이 0이다. 이 상태에서 CSS 속성은 초기값을 유지한다.
  • 스크롤 이동값: 사용자가 스크롤을 아래로 내리거나 오른쪽으로 이동할수록 scroll 값이 증가한다.
    • 수직 스크롤(Y축): 브라우저는 scrollTop 값을 기준으로 scroll 값을 계산합니다.
    • 수평 스크롤(X축): 브라우저는 scrollLeft 값을 기준으로 scroll 값을 계산합니다. 이를 통해 사용자의 스크롤 동작에 따라 요소가 실시간으로 반응하도록 설계할 수 있다.
예시 
/* 스크롤 정도에 따라 높이가 변화하는 박스 */
div {
  height: calc(100px + 0.5scroll); /* 스크롤 양에 따라 높이 증가 */
  background-color: hsl(calc(200 + 0.1scroll), 100%, 50%); /* 스크롤에 따라 색상 변화 */
}

/* 스크롤 양에 따라 투명도가 달라지는 텍스트 */
p {
  opacity: calc(1 - 0.001 * scroll); /* 스크롤이 많을수록 점점 투명해짐 */
}

/* 스크롤 위치에 따라 글자 크기가 달라지는 헤딩 */
h1 {
  font-size: calc(20px + 0.3scroll); /* 스크롤이 많을수록 글자 크기 증가 */
}
  scroll 단위는 사용자가 페이지를 얼마나 탐색했는지에 따라 스타일을 조정할 수 있는 강력한 도구다. 이를 활용하면 아래와 같은 효과를 손쉽게 구현할 수 있다.
  • 헤더 또는 네비게이션 메뉴가 스크롤에 따라 투명해지거나 작아지는 인터랙션
  • 스크롤 위치에 따라 배경색이나 텍스트 색상이 변하는 시각적 효과
  • 특정 스크롤 위치에서만 강조 효과를 주는 디자인
   scroll 단위는 여러 웹 서비스에서도 활용 가능성이 높다. 예를 들어 사용자의 탐색을 유도해야 하는 커머스 서비스에서는, 스크롤을 많이 한 사용자에게 깜짝 혜택을 주는 등의 전략적인 디자인을 구현할 수 있다.
cursorX, cursorY 단위는 사용자 포인터(마우스, 트랙패드 등)의 위치에 실시간으로 반응하는 단위다. 브라우저 상의 뷰포트 좌표계를 기준으로, 1cursorX와 1cursorY는 현재 포인터 위치에 따라 값이 동적으로 변한다. 이를 활용하면 포인터 이동에 따라 요소의 크기, 위치, 색상 등을 끊임없이 변형할 수 있어, 마치 인터페이스가 사용자의 손길을 재빠르게 눈치채고 그에 맞춰 반응하는 듯한 효과를 낼 수 있다.    cursorX, cursorY는 수치 기반 속성에 광범위하게 적용할 수 있다. 예를 들어, width: calc(100px + 0.1cursorX); 라고 하면 사용자가 포인터를 오른쪽으로 움직일수록 요소가 점점 넓어진다. 마찬가지로, top: calc(50% + 0.1cursorY);로 설정하면 포인터가 아래로 이동할수록 요소가 아래로 이동한다.    뷰포트의 가로 길이를 1000px라고 가정하고, 포인터가 수평으로 정확히 중앙(500px)에 있다면 cursorX는 500 근처의 값을 가지게 된다. 같은 방식으로 세로 방향도 cursorY 값이 결정된다. 예를 들어 세로 길이가 800px이고 포인터가 상단에서 200px 아래 위치한다면 cursorY는 약 200 정도의 값을 갖는다. 이렇게 실시간으로 변화하는 cursorX, cursorY 값은 CSS calc() 함수와 결합되어 각 속성값에 반영되며, 포인터 움직임에 따라 요소 스타일이 즉각적으로 변경된다.