ProtoPie로 타자기 효과를 만드는 방법

개요

• 타자기 효과란?

• 오늘 배울 내용

• 시작하기 전에

• 타자기 효과를 위한 단계별 안내

• 더 많은 프로토타입 기술 익히기

타자기 효과란?

타자기 효과는 텍스트가 화면에 입력되는 듯한 착각을 주어 앱이나 웹사이트가 사용자에게 더 매력적으로 느껴지게 합니다. 랜딩 페이지, 행동 유도 요소, 개인 웹사이트/앱, 코드 데모 등 다양한 용도로 사용됩니다.

ProtoPie를 사용하면 “left”와 “length” 같은 미리 정의된 수식, 변수, 텍스트 함수를 활용해 이 효과를 쉽게 구현할 수 있습니다. 이 튜토리얼을 마치면 타자기 효과를 자유자재로 다룰 수 있게 됩니다.

아래의 서면 튜토리얼을 따라 기본 단계를 익히거나, 커서 깜박임이 포함된 향상된 버전을 보려면 아래의 비디오 튜토리얼을 시청해 보세요. 더 현실적인 타자기 효과를 구현하는 데 도움이 됩니다.

최신 프로토타입 팁을 받아보세요.

비디오

오늘 배울 내용

이 프로토타입 레슨에서는 다음을 배우게 됩니다:

1. “left”와 “length” 수식을 이해하기

2. 텍스트 문자열을 저장하고 문자를 세기 위한 변수를 만들기

3. 텍스트를 점차 표시하여 타자기 효과 만들기

마지막에는 이와 같은 결과를 만들 수 있습니다!

[완료된 Pie 파일]

시작하기 전에

튜토리얼로 넘어가기 전에 “left”와 “length” 수식과 그것이 사용되는 이유를 이해해 봅시다.

1. “left”는 특정 문자 수를 기준으로 텍스트의 왼쪽 부분을 추출하는 데 사용됩니다.

• left(source:TEXT,count:NUMBER) → TEXT

다음 예시에서 “left” 수식은 왼쪽에서 첫 3개의 문자를 추출합니다.

• left("hello", 3) → “hel”

2. “length”는 텍스트의 문자 수를 세는 데 사용됩니다.

• length(source:TEXT) → NUMBER

다음 예시에서 “length” 수식은 텍스트의 5개 문자를 나타냅니다.

• length("hello") → 5

수식에 대해 더 알아보기.

타자기 효과를 위한 단계별 안내

1. 텍스트 문자열을 저장하고 문자를 세기 위한 변수 만들기

💡 왜 변수를 다시 사용하나요?

변수를 값을 저장하는 "바구니"라고 생각해 보세요. 이름, 비밀번호, 계정 잔액처럼 나중에 사용할 수 있는 데이터를 저장합니다.

이 경우 텍스트 문자열용 변수를 만들면 나중에 값을 빠르게 재사용하거나 변경할 수 있습니다. 문자를 세는 변수는 얼마나 많은 문자가 표시되었는지 이해하는 데 도움이 됩니다.

1. 먼저, 이 씬에서 사용할 변수 “textToType”를 만드세요. 유형을 Number에서 Text로 변경합니다.

• 이 변수는 입력할 텍스트를 저장합니다.

2. 이 씬에서 사용할 변수 “characterCount”를 만드세요.

• 이 변수는 표시된 텍스트의 문자를 세는 데 도움이 됩니다.

3. 변수의 기본값을 설정합니다.

• textToType: Let's bake delicious pies! :) (또는 프로토타입에 맞게 원하는 내용을 입력하세요)

• characterCount: 0

💡 characterCount를 0으로 설정한 이유는 0에서 시작하여 textToType의 길이 값에 도달할 때까지 1씩 증가하게 만들기 위해서입니다.

변수에 대해 더 알아보기.

2. 텍스트를 점차 표시하기

1. Start 트리거를 만듭니다. 변수 “characterCount”에 연결된 Assign 응답을 만듭니다.

2. Assign 응답을 다음 속성으로 설정합니다:

수식 사용: characterCount+1

• 이렇게 하면 다음 문자를 표시할 수 있습니다.

시작 지연: 2s

• 텍스트가 표시되기 전에 잠깐 지연시켜 더 현실적으로 보이게 합니다.

반복 횟수: length(textToType)

• 이렇게 하면 모든 문자가 표시될 때까지 다음 문자를 계속 표시할 수 있습니다. 여기서 텍스트 “Let's bake delicious pies! :)”에서 표시될 문자의 수는 29개입니다. 즉, Assign 응답은 29번 반복됩니다.

간격: 0.1s

• 각 문자 사이의 표시 간격을 0.1초로 유지합니다.

3. 변수 textCount에 대한 Detect 트리거를 만듭니다.

• textCount의 값은 계속 변경되므로, 그 변경을 사용해 텍스트를 바꾸는 Detect 트리거를 실행할 수 있습니다.

4. Text 레이어에 Text 응답을 추가합니다. 수식 left(textToType,characterCount)를 사용합니다.

• 여기서 수식은 left("Let's bake delicious pies! :)", 1), left("Let's bake delicious pies! :)", 2), ...., left("Let's bake delicious pies! :)", 29)까지 반영됩니다.

💡 수식과 변수를 결합하면 characterCount 변수의 값에 따라 텍스트 문자열의 왼쪽 부분을 추출할 수 있습니다. characterCount의 값이 바뀔 때마다 텍스트 레이어가 반복해서 업데이트됩니다. 이렇게 해서 타자기 효과가 완성됩니다! 잘하셨습니다!

더 많은 프로토타입 기술 익히기

이제 변수와 수식을 활용한 간단한 트릭으로 타자기 효과를 익혔으니, 이제 프로토타입의 모든 기본기를 익힐 차례입니다. ProtoPie School의 무료 클래스에 등록하고 수료증도 받아 보세요!

[학습 시작] {프로토타입 팁 받기}