방송대 HTML5웹프로그래밍 9강: CSS 모션과 다단 레이아웃

버튼 색이 바뀌는 0.2초와 로딩 표시가 계속 도는 1초는 같은 ‘움직임’처럼 보이지만 설계 원리는 다릅니다. 전환은 상태가 바뀔 때 두 값을 연결하고, 애니메이션은 키프레임으로 여러 장면을 재생합니다. 한편 다단은 움직임이 아니라 긴 글의 읽기 경로를 여러 열로 재배치합니다. 이 글은 세 기능을 시간축과 읽기 흐름으로 나누어 선택하고, 시작·진행·종료 상태를 직접 추적하는 방법을 설명합니다.

움직임을 만들기 전에 사건의 종류부터 판별한다

학습용 뉴스 카드에 세 요구가 있다고 가정해 봅시다. 첫째, 카드에 포인터를 올리면 살짝 떠오릅니다. 둘째, 새 기사가 도착하면 배지가 두 번 강조됩니다. 셋째, 긴 기사 본문은 화면 폭에 맞춰 한 단 또는 여러 단으로 읽힙니다. 각각에 필요한 기능은 transition, animation, multi-column입니다.

판단 질문	선택	핵심 구조
사용자 행동이나 클래스 변경으로 A에서 B가 되는가?	`transition`	시작값과 끝값 사이를 자동 보간
중간 장면, 반복, 자동 시작이 필요한가?	`animation`	`@keyframes`의 여러 시점 재생
긴 텍스트의 세로 읽기 흐름을 여러 열로 나눌 것인가?	다단 레이아웃	단 너비·개수와 단 사이 흐름 제어

전환과 애니메이션의 차이는 효과가 화려한지가 아닙니다. 상태 변화라는 방아쇠가 있어야 하는지, 중간 시점을 저자가 직접 정해야 하는지가 기준입니다. 다단은 UI 카드들을 격자로 배치하는 도구가 아니라 긴 텍스트가 한 단 아래까지 흐른 뒤 다음 단 위로 이어지게 하는 읽기 레이아웃입니다.

첫 선택: A→B의 피드백은 전환, A→B→C 같은 각본은 애니메이션, 문장 흐름의 열 분할은 다단으로 구분합니다.

transition은 무엇·얼마나·어떻게·언제의 네 칸이다

전환 단축 속성은 transition: property duration timing-function delay로 읽습니다. 속성은 무엇이 변하는지, duration은 변화에 걸리는 시간, timing function은 진행률의 속도 곡선, delay는 변화가 감지된 뒤 기다리는 시간입니다. 시간 값이 두 개라면 첫 번째가 재생 시간이고 두 번째가 지연 시간입니다.

.news-card {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition:
    transform 200ms ease-out,
    box-shadow 200ms ease-out;
}

.news-card:hover,
.news-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

전환 선언을 기본 상태에 둔 이유는 진입과 복귀를 모두 부드럽게 만들기 위해서입니다. :hover 안에만 두면 포인터가 들어올 때는 전환되더라도 나갈 때 기본 상태에는 전환 규칙이 없어 즉시 돌아갈 수 있습니다. 상태 선택자는 끝값만 바꾸고, 원본 요소가 전환 방법을 소유하게 분리합니다.

transition: all 0.3s는 나중에 추가된 예상 밖의 속성까지 대상이 됩니다. 실제로 변화시킬 transform, opacity, background-color 등을 나열하면 의도와 성능 비용을 검토하기 쉽습니다. duration의 기본값은 0초이므로 속성과 곡선을 적었더라도 재생 시간을 생략하면 눈에 보이는 중간 과정이 없습니다.

속도 곡선은 총시간이 아니라 체감 속도를 바꾼다

같은 300ms라도 진행률을 시간에 배분하는 방식에 따라 느낌이 달라집니다. linear는 일정한 속도, ease-in은 천천히 출발해 가속, ease-out은 빠르게 시작해 감속, ease-in-out은 양끝이 느립니다. 일반 UI에는 ease, 화면 안으로 들어와 자리 잡는 요소에는 ease-out을 출발점으로 검토할 수 있습니다.

곡선	시간 배분	어울리는 인상	주의점
`linear`	처음부터 끝까지 일정	회전, 일정 진행	일반 버튼에는 기계적으로 느껴질 수 있음
`ease-in`	초반 느림, 후반 빠름	화면 밖으로 퇴장	등장 피드백이 늦게 느껴질 수 있음
`ease-out`	초반 빠름, 후반 느림	빠른 반응 뒤 정착	큰 이동에서는 끝부분이 길게 느껴질 수 있음
`steps(5)`	연속값을 다섯 구간으로 점프	프레임·틱 단위 표현	부드러운 UI 전환 목적과 다름

cubic-bezier(a, b, c, d)는 사용자 정의 곡선을 만들고, steps(n)은 진행률을 n개의 단계로 끊습니다. 곡선을 바꿔도 duration 자체가 늘거나 줄지는 않습니다. delay가 양수면 시작 전 대기하고, 음수면 이미 그만큼 진행된 시점에서 시작합니다. 예를 들어 duration 2초에 delay -0.5초이면 처음 표시되는 순간 진행률 25% 지점부터 남은 1.5초를 재생합니다.

중간값과 렌더링 비용을 함께 확인한다

브라우저가 두 값 사이의 중간값을 계산할 수 있어야 연속적인 전환이 보입니다. 길이, 색상, 투명도와 변환은 대표적인 대상입니다. 글꼴 패밀리처럼 두 값 사이를 수치로 섞기 어려운 속성은 부드럽게 보간되지 않습니다. 강의 기준에서 display: none과 block은 즉시 바뀌는 값으로 다룹니다.

현재 규격과 강의 범위: 2026년 CSS Transitions Level 2 초안에는 transition-behavior: allow-discrete와 @starting-style로 일부 이산 속성의 전환 시점을 제어하는 방식이 정의되어 있습니다. 이는 중간 모양이 연속적으로 생긴다는 뜻이 아니라 특정 시점에 값이 전환되는 방식이며, 이 글의 기본 예제와 시험 범위는 강의에서 설명한 보간 가능한 속성 중심으로 유지합니다.

width, height, top, left처럼 기하를 바꾸는 속성은 주변 배치를 다시 계산하게 할 수 있습니다. 같은 시각 효과를 만들 수 있다면 위치는 transform: translate(), 크기는 scale(), 나타남은 opacity로 표현하는 방식을 먼저 검토합니다. 다만 “GPU 속성이므로 언제나 빠르다”는 보장은 없습니다. 요소 크기와 개수, 페인팅 비용, 기기 환경을 실제로 측정해야 하며 큰 그림자나 많은 레이어도 비용이 됩니다.

/* 주변 레이아웃의 width를 바꾸지 않는 확대 */
.action-button {
  transition: transform 180ms ease-out;
}

.action-button:hover {
  transform: scale(1.08);
}

@keyframes는 장면표이고 animation은 재생표다

애니메이션은 두 부분으로 구성됩니다. @keyframes가 시간 흐름에 따른 장면을 정의하고, 요소의 animation-* 속성이 어떤 각본을 얼마나 오래, 몇 번, 어느 방향으로 재생할지 연결합니다. 다음은 새 기사 배지가 위에서 나타나 잠시 강조되는 학습용 예제입니다.

@keyframes announce-news {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.new-badge {
  animation: announce-news 600ms ease-out 200ms 2 normal both running;
}

0%는 시작, 60%는 살짝 크게 도착한 중간 장면, 100%는 원래 크기로 정착한 끝입니다. from과 to는 각각 0%와 100%를 대신할 수 있지만, 중간 장면과 함께 볼 때는 백분율 표기가 시간 관계를 더 분명하게 보여 줍니다. 키프레임 이름은 대소문자를 구분하며 animation-name과 일치해야 합니다. duration의 기본값 역시 0초이므로 이름만 연결해서는 재생 과정이 보이지 않습니다.

여덟 속성을 타임라인에 놓으면 단축형이 풀린다

앞 예제의 단축 선언을 시간 순서로 풀면 다음과 같습니다. name은 각본, duration은 한 사이클 시간, timing-function은 사이클 안의 속도, delay는 시작 전 대기입니다. iteration-count는 반복 횟수, direction은 각 반복의 진행 방향, fill-mode는 재생 전후에 키프레임 값을 적용할지, play-state는 실행·일시 정지를 정합니다.

타임라인 구간	관여 속성	예제의 결과
대기 200ms	`delay`, `fill-mode: both`	backwards 효과로 0% 모습 적용
첫 600ms	`duration`, `timing-function`	0%에서 100%까지 ease-out으로 재생
다음 600ms	`iteration-count: 2`, `direction: normal`	두 번째도 0%에서 100%로 재생
종료 뒤	`fill-mode: both`	forwards 효과로 마지막 재생의 끝값 유지

시간 값이 두 번 나오면 첫 번째가 duration, 두 번째가 delay입니다. 다른 키워드는 문법상 순서가 비교적 자유롭지만 사람이 읽기 쉽도록 프로젝트에서 한 순서를 정해 유지하는 편이 좋습니다. 위 예제는 0.2초 대기 뒤 0.6초를 두 번 재생하므로 종료 시점은 시작 신호로부터 1.4초 뒤입니다.

direction과 fill-mode는 종료 화면을 함께 결정한다

normal은 각 반복을 0%→100%로, reverse는 100%→0%로 재생합니다. alternate는 첫 반복을 정방향, 다음 반복을 역방향으로 왕복하고, alternate-reverse는 역방향부터 시작해 왕복합니다. 따라서 forwards가 유지하는 ‘마지막 모습’은 무조건 100%가 아니라 마지막 반복의 재생 방향에 따라 달라질 수 있습니다.

`fill-mode`	지연 중	종료 뒤
`none`	원래 스타일	원래 스타일
`forwards`	원래 스타일	마지막 재생 방향의 끝값 유지
`backwards`	첫 재생 방향의 시작값 미리 적용	원래 스타일
`both`	backwards 적용	forwards 적용

animation-iteration-count: infinite는 계속 반복하고, 0.5처럼 소수를 쓰면 한 사이클의 절반까지만 재생합니다. animation-play-state: paused는 현재 진행 위치에서 멈추며 다시 running이 되면 그 지점부터 이어집니다. 포인터를 올렸을 때 정지시키는 예제는 가능하지만, 터치나 키보드 사용자에게도 같은 제어가 필요한지 함께 생각해야 합니다.

재사용은 키프레임을 복제하지 않고 입력값을 바꾼다

방향만 다른 등장 효과마다 키프레임을 새로 만들면 수정 지점이 늘어납니다. CSS 사용자 지정 속성을 입력값처럼 사용하면 하나의 장면표를 여러 요소가 공유할 수 있습니다.

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translate(var(--start-x, 0), var(--start-y, 0));
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.from-left {
  --start-x: -40px;
  animation: slide-in 400ms ease-out both;
}

.from-bottom {
  --start-y: 24px;
  animation: slide-in 400ms ease-out both;
}

키프레임은 시작 좌표를 변수에서 읽고, 각 요소는 필요한 축만 설정합니다. 지정하지 않은 값은 var()의 대체값 0이 됩니다. 장면의 의미는 하나로 유지하면서 효과별 숫자만 바꿀 수 있습니다.

will-change는 상시 설정이 아니라 제한적인 예고다

will-change는 특정 속성이 곧 변할 것이라고 브라우저에 알려 최적화 준비 기회를 줍니다. 그러나 많은 요소에 계속 지정하면 별도 자원과 메모리를 소비해 오히려 성능이 나빠질 수 있습니다. 먼저 transform과 opacity 중심으로 단순하게 작성하고 실제 성능 문제를 측정한 뒤, 필요한 요소에 애니메이션 직전 적용하고 종료 후 제거하는 제한적 최적화로 사용합니다.

움직임을 줄여도 정보와 상태는 남아야 한다

모션은 상호작용 피드백을 줄 수 있지만 모든 사용자가 같은 움직임을 편안하게 느끼는 것은 아닙니다. 운영체제에서 동작 감소를 요청한 사용자를 위해 prefers-reduced-motion 미디어 쿼리로 이동과 반복을 줄일 수 있습니다.

@media (prefers-reduced-motion: reduce) {
  .news-card,
  .new-badge {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

여기서 중요한 것은 배지를 없애는 것이 아니라 큰 이동과 반복만 줄이고 ‘새 기사’라는 텍스트나 색상 같은 정보 단서는 유지하는 것입니다. 자동으로 계속 움직이는 장식은 최소화하고, 필요한 움직임에는 정지 방법과 비모션 대안을 검토합니다.

모션 검수: 움직임을 끈 상태에서도 상태 변화의 의미를 알 수 있는지, 키보드·터치에서도 같은 기능을 사용할 수 있는지, 반복이 정말 필요한지를 확인합니다.

다단은 열 개수보다 읽을 수 있는 너비를 먼저 정한다

다단 레이아웃에서 column-count는 목표 단 수를, column-width는 목표 단 너비를 정합니다. 고정된 세 단을 강제하면 좁은 화면에서도 각 단이 지나치게 가늘어질 수 있습니다. 목표 너비를 지정하면 사용 가능한 공간에 따라 단 수가 줄어들어 반응형 읽기에 유리합니다.

.article-body {
  columns: 16rem 3;
  column-gap: 2rem;
  column-rule: 1px solid #d8dee8;
}

columns: 16rem 3은 목표 단 너비와 단 수 상한을 함께 제시합니다. 브라우저는 사용 가능한 폭에 맞춰 실제 단 수와 너비를 조정하므로 16rem을 절대 고정 너비로 이해하면 안 됩니다. 넓은 화면에서도 최대 세 단까지만 만들고, 좁아지면 두 단이나 한 단으로 줄일 수 있습니다.

column-gap은 단 사이 공간이고 기본값 normal은 보통 1em으로 계산됩니다. 백분율 gap은 다단 컨테이너의 내용 폭을 기준으로 계산됩니다. column-rule은 border와 같은 두께·스타일·색상 문법을 쓰지만 gap 가운데에 그려질 뿐 별도 공간을 더 차지하지 않습니다. 선이 글자와 겹치지 않도록 gap을 rule보다 충분히 넓게 잡습니다.

span·fill·break는 단 사이의 흐름을 조절한다

column-span: all은 제목이나 요약이 모든 단을 가로지르게 하면서 앞뒤의 다단 흐름을 나눕니다. column-fill: balance는 가능한 범위에서 단 높이를 비슷하게 분배하고, auto는 높이가 제한된 다단 상자에서 앞 단을 먼저 채운 뒤 다음 단으로 흐르게 합니다.

.article-title {
  column-span: all;
}

.article-body {
  columns: 16rem 3;
  column-fill: balance;
}

.figure-card,
.quotation {
  break-inside: avoid;
}

break-inside: avoid는 이미지 카드나 인용구가 단 경계에서 둘로 나뉘지 않도록 가능한 한 통째로 다음 단으로 보냅니다. 이는 강한 선호이지 물리적으로 불가능한 상황까지 보장하는 명령은 아닙니다. 항목 자체가 단보다 높으면 잘림이나 넘침을 완전히 피할 수 없으므로 콘텐츠 크기도 확인해야 합니다.

고정 높이 함정: column-fill: auto의 차이를 보려고 컨테이너 높이를 고정하면 콘텐츠가 높이를 넘을 때 새 단이 오른쪽으로 계속 생겨 가로 넘침이 발생할 수 있습니다. 연속해서 읽는 웹 기사라면 높이를 내용에 맡기고 balance를 사용하는 편이 대체로 안정적입니다.

뉴스 카드 요구사항을 시간표와 흐름표로 완성한다

처음의 세 요구를 한 번에 구현할 때는 다음 순서가 재현하기 쉽습니다.

방아쇠 확인: hover·focus·클래스 변경처럼 두 상태를 연결하면 transition을 선택합니다.
장면 수 확인: 중간 장면이나 자동 반복이 필요하면 keyframes를 만들고 animation 재생표를 연결합니다.
시간 장부 작성: delay + duration × iteration count로 종료 시점을 계산하고 direction과 fill mode로 시작·끝 화면을 검산합니다.
비용과 접근성 확인: transform·opacity로 표현 가능한지 검토하고 모션 감소 환경에서도 의미가 남게 합니다.
읽기 폭 결정: 긴 본문은 column-count를 강제하기보다 목표 column-width와 최대 단 수를 조합합니다.
단 경계 보호: 제목은 span, 단 높이는 fill, 묶여야 할 요소는 break-inside로 흐름을 조정합니다.

이렇게 하면 카드 hover는 짧고 되돌릴 수 있는 전환, 새 기사 배지는 종료 시점을 계산한 유한 애니메이션, 기사 본문은 화면에 반응하는 다단이 됩니다. 세 기능을 한꺼번에 ‘효과’라고 부르지 않고 시간과 읽기라는 서로 다른 축으로 검수할 수 있습니다.

핵심 개념 정리

transition은 상태 변화가 방아쇠이며 속성·재생 시간·속도 곡선·지연 시간으로 두 값을 연결합니다.
animation은 keyframes 장면표와 여덟 가지 재생 속성을 분리해 중간 단계·반복·방향·전후 상태를 제어합니다.
direction은 진행 방향뿐 아니라 fill-mode가 유지하는 시작·종료 키프레임에도 영향을 줍니다.
transform과 opacity는 레이아웃을 바꾸는 속성보다 우선 검토하되 실제 성능은 요소와 환경에서 측정합니다.
다단은 목표 열 너비와 단 수를 조정하고 span·fill·break로 긴 텍스트의 읽기 흐름을 보호합니다.

최종 사고 순서: 먼저 변화의 방아쇠와 장면 수를 정하고, 타임라인에서 대기·재생·반복·종료 모습을 계산합니다. 그다음 움직임을 줄여도 의미가 남는지 확인합니다. 긴 글의 문제라면 시간축을 떠나 독자가 어느 단에서 어디로 이동하는지 읽기 흐름을 추적합니다. 이 두 축을 분리하면 화려함보다 목적에 맞는 CSS를 선택할 수 있습니다.

참고 자료와 작성 기준

이 글은 해당 차시 강의자료 41쪽 전체를 확인한 뒤 1~40쪽의 전환·애니메이션·다단 내용을 본문 범위로 삼고, 41쪽의 다음 강의 예고는 구분했습니다. 강의의 속성 목록을 그대로 옮기지 않고 뉴스 카드의 모션 타임라인, 시작·진행·종료 상태표, 다단 읽기 흐름과 오류 진단 절차로 재구성한 비공식 학습자료입니다.

작성·편집: 올에이클래스 학습연구팀
주요 근거: 한국방송통신대학교 HTML5웹프로그래밍 9강 「CSS: 전환, 애니메이션, 다단」 강의자료 :codex-file-citation{path="K1. 컴퓨터과학과/1. 재검토필요/2-1 HTML5웹프로그래밍/1. 강의록/HTML5웹프로그래밍_09_강의록.pdf" purpose="source"}
보충 자료: W3C, CSS Transitions Module Level 2, CSS Animations Level 1, CSS Multi-column Layout Module Level 1, CSS Will Change Module Level 1, Understanding SC 2.3.3: Animation from Interactions (2026-09-05 확인)
편집 원칙: 올에이클래스 편집 정책
최종 내용 검토: 2026-09-05

방송대 HTML5웹프로그래밍 9강: CSS 모션과 다단 레이아웃