키네틱 타이포그래피

Kinetic Typography

문자의 등장·위치·크기·리듬을 움직여 읽는 순서와 강조를 만든다. 정적인 큰 글씨와 움직이는 글씨는 서로 다른 비교 항목으로 보여준다.

기존 기법 · 2026 편집 자료 재언급

키네틱 타이포그래피 학습용 웹 화면. 관찰할 특징: 글자의 위치 변화, 단어별 크기와 강조의 변화, 시간 순서로 읽히는 제목. — 구성·상호작용 기법을 설명하기 위해 직접 제작한 학습용 화면입니다.그림 원본 열기 ↗

어디에 적용할까요?

짧은 표제·캠페인 메시지·영상 제목·제품 소개의 핵심 문구에 활용한다.

함께 살펴볼 점

모션을 기다려야만 문장을 읽을 수 있게 만들지 않는다. 정지 상태에서도 완전한 문장을 제공한다.

TRY THE INTERACTION

변화를 직접 살펴보세요

같은 문장에서 강조되는 단어와 글자 위치의 변화를 관찰하세요.

MAKE YOUR OWN

이 기법으로 만들어 보세요

목적과 콘텐츠를 내 작업에 맞게 바꿔 사용하세요.

세 단어로 된 캠페인 제목을 한 번만 순서대로 강조한다. 재생 전후에는 전체 문장이 보이고, 정지·다시 보기 조작을 제공한다.

한국어로 읽기 편한 반응형 웹페이지를 설계해 주세요. 모바일·키보드·움직임 감소 설정에서도 핵심 정보를 읽을 수 있게 해 주세요. 예시 콘텐츠임을 표시하고 실제로 제공하지 않는 기능이나 성과는 넣지 마세요. 이 사이트에 구현한다면 외부 의존성 없는 정적 구조를 우선해 주세요.

출처와 확인일

확인일 2026-09-20. 정의와 자료 맥락의 근거이며, 위 그림은 이 도감을 위해 별도로 제작했습니다.

Adobe 문자 애니메이션 ↗www.adobe.com · 게시일 미확인
Figma 2026 웹 디자인 목록 ↗www.figma.com · 게시일 미확인

← 구성·상호작용 참고 보기