짧은 답변

웹페이지의 실시간 텍스트라면 CSS steps()로 충분합니다. 채팅, 문서, 슬라이드에서 공유할 파일이라면 브라우저 GIF 제작기를 사용하세요.

순수 CSS 타자기 효과

웹의 한 줄 텍스트라면 요소 너비를 steps()로 단계별로 늘리는 고전적인 CSS 기법으로 입력되는 것처럼 보이게 할 수 있습니다. 오른쪽 테두리가 커서 역할을 합니다:

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.15em solid currentColor;
  width: 0;
  animation:
    typing 3s steps(11, end) forwards,
    blink 0.8s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

steps(11, end)의 숫자는 글자 수와 맞춰야 하고 3s가 입력 속도를 정합니다. 히어로와 제목에는 잘 맞지만 여러 줄, 사용자 글꼴, 공유 가능한 파일 내보내기에는 불편합니다.

파일로 필요하신가요?

타이핑 텍스트 GIF 제작기에서 같은 애니메이션을 어디에나 쓸 수 있는 반복 GIF로 내보낼 수 있습니다.

GIF 만들기

프런트엔드 컴포넌트 라이브러리

React나 Vue를 사용한다면 속도, 커서, 반복을 설정할 수 있는 타이핑 효과 컴포넌트를 바로 쓸 수 있습니다. Framer에는 타이핑 변형이 있고 MagicUI에는 전용 TypingAnimation이 있습니다. react-type-animation과 typed.js도 바로 설치할 수 있습니다.

컴포넌트의 모습을 공유 가능한 파일로 만들려면 무료 타이핑 텍스트 GIF 제작기에서 GIF를 생성하세요.

영상 편집기

더 정교한 결과에는 영상 편집기가 전통적인 선택입니다. CapCut에서는 텍스트 레이어에 “타자기” 애니메이션을 적용해 내보냅니다. After Effects에서는 Source Text 키프레임 식으로 문자열을 글자마다 잘라 내고 작은 사각형 레이어를 깜박이는 커서로 사용합니다. 제어력은 높지만 글자를 수정할 때마다 렌더링해야 합니다.

타임라인 없이 깔끔한 타이핑 루프만 필요하다면 타이핑 텍스트 GIF 제작기가 몇 초 만에 만들어 줍니다.

무료 온라인 GIF 제작기 (추천)

채팅, README, 소셜 게시물, 문서에는 반복 GIF가 가장 편리하며 소프트웨어도 필요 없습니다:

텍스트 입력 — 최대 200자, 줄바꿈 지원.
스타일과 속도 선택 — 9개 글꼴, 사용자 색상 또는 투명 배경, 커서 스타일, 4가지 캔버스 크기, 5단계 속도.
GIF 다운로드 — 브라우저에서 생성하며 무료이고 워터마크가 없습니다.

타이핑 텍스트 GIF 제작기를 사용해 보세요. 모두 브라우저에서 실행되고 iPhone과 Android를 지원하며 가입이 필요 없습니다.