ProtoPie에서 타이핑 효과 제작하는 법
ProtoPie에서 타이핑 효과를 제작하는 법을 알아보세요.
*Brunch 내 오류로 인해 몇몇 gif는 사진으로 대체되었음을 알려드립니다.
개요
타이핑 효과는 글자가 화면에 타이핑되는 듯한 느낌을 주어 웹사이트나 앱을 더욱 매력적으로 보이게 합니다. 이 효과는 랜딩페이지, CTA, 개인 웹사이트 혹은 앱, 그리고 코드 데모 등 다양한 곳에서 사용되죠. ProtoPie에서는 이미 지정된 formula, variable 그리고 “left”나 “length”등의 text function을 사용하여 해당 효과를 쉽게 구현할 수 있습니다.
이 튜토리얼을 통해 타이핑 효과 구현하는 방법을 마스터해 보세요.
튜토리얼 아웃라인
이번 튜토리얼에서는 아래 세가지 부분에 대해 살펴볼 예정입니다.
1. “left” 와 “length” formula 이해하기
2. 텍스트 스트링과 글자 수 저장을 위한 variable 만들기
3. 텍스트를 점차적으로 입력시켜 타이핑 효과 구현하기
이번 튜토리얼을 마치면 아래와 같은 결과물을 완성시킬 수 있게 됩니다.
시작하기 전
튜토리얼을 시작하기 전, “left” 와 “length” formula가 무엇인지 그리고 왜 사용되는지 간단히 알아보겠습니다.
1. “left”는 formula에서 요구하는 특정 글자 수에 해당하는 텍스트를 왼쪽부터 추출하기 위해 사용됩니다.
left(source:TEXT,count:NUMBER) → TEXT
아래 예시에서 “left” formula를 입력하면 왼쪽부터 첫 세 문자가 추출됨을 확인할 수 있습니다.
left("hello", 3) → “hel”
2. “length”는 글자 수를 계산하기 위해 사용됩니다.
length(source:TEXT) → NUMBER
아래 예시에서 “length” formula를 사용하면 글자 수를 확인할 수 있습니다.
length("hello") → 5
단계별 구현 방법
1. 텍스트 스트링과 글자 수 정보를 저장하기 위한 variable 생성
★잠깐! 왜 variable을 사용한다고요?
variable을 값을 저장하는 바구니라고 생각하고, 이름, 패스워드, 계정 밸런스 등 추후 사용 희망하는 데이터를 저장해두세요.
이번 케이스의 경우, 텍스트 스트링을 위한 variable을 제작하면 추후 값을 빠르게 재사용하거나 변경할 수 있고, 글자 수를 계산하기 위해 사용된 variable은 몇 개의 글자가 입력되었는지 확인할 수 있습니다.
1. variable을 생성하고 이름을 “textToType”으로 설정하세요. variable의 타입을 Number에서 Text로 변경하세요.
▶ 이 variable은 입력될 텍스트를 저장합니다.
2. variable을 생성하고 “characterCount”로 이름을 변경하세요.
▶ 이 variable은 입력된 텍스트의 글자 수를 계산합니다.
3. 각 variable의 기본값을 설정하세요.
textToType: Let's bake delicious pies! :) (혹은 프로토타이핑에 들어갈 텍스트)
characterCount: 0
여기서 characterCount의 값을 0으로 설정하여, textToType의 길이값까지 1 단위로 올라가도록 설정합니다.
2. 점차적으로 텍스트 나타내기
1. Start trigger를 생성하고 “characterCount” variable에 연결될 Assign response를 생성하세요.
2. Assign response에 아래 property를 설정하세요.
Use formula: characterCount+1
▶ 다음 글자를 입력시키는 역할을 합니다.
Start Delay: 2s
▶ 다음 글자가 입력되기 전, 약간의 딜레이를 주어 더욱 현실적인 효과를 연출합니다.
Repeat Count: length(textToType)
▶ 모든 글자가 완벽히 입력되기 전까지 다음 글자를 입력시킵니다. 예를 들어, 이 예시에서 사용된 “Let's bake delicious pies! :)” 의 글자 수는 29입니다. 즉, Assign response가 29번 반복된다는 뜻입니다.
Interval: 0.1s
▶ 글자간의 입력 간격을 0.1초로 유지시킵니다.
3. textCount variable에 해당하는 Detect trigger를 생성하세요.
▶ textCount의 값이 계속 변하기 때문에, 변화하는 값을 Detect trigger에 연결시켜 텍스트가 바뀌도록 합니다.
4. Text 레이어에 Text response를 추가하세요. 추가 시, left(textToType,characterCount) formula를 사용하세요.
▶이 경우 formula는 left("Let's bake delicious pies! :)", 1)에서 시작되어, left("Let's bake delicious pies! :)", 2), left("Let's bake delicious pies! :)", 29)까지 이어집니다.
★ formula와 variable을 결합하면, characterCount variable 값에 해당하는 텍스트 스트링의 문자들을 왼쪽부터 추출합니다. characterCount의 값이 계속 변함에 따라, 텍스트 레이어도 계속 변하면서 타이핑 효과가 생성됩니다.
더 알아보기
이번 포스트에서는 variable과 formula를 사용하여 타이핑 효과 제작을 마스터하는 방법을 배워 보았습니다. 더 고도화된 타이핑 효과를 구현하고 싶으신가요? 아래 튜토리얼 영상을 통해, cursor blink를 사용하여 업그레이드된 타이핑 효과를 구현하는 방법에 대해 알아보세요!
