07-Practice-2.md

7. 실습 2: 프로토타입에 화면 전환과 애니메이션 넣기

Note

이 실습에서는 Figma의 프로토타입 기능을 사용하여 간단한 화면 전환과 애니메이션을 만들어봅니다.

7.1. 준비물

• 두 개 이상의 프레임(Frame): 화면 전환을 테스트하기 위해 최소 두 개의 화면이 필요합니다.
  • 예: 로그인 화면 프레임, 메인 화면 프레임

7.2. 실습 목표

1. 로그인 버튼 클릭 시 메인 화면으로 이동
2. 화면 전환 시 슬라이드 애니메이션 적용
3. 메인 화면에서 뒤로 가기 버튼 구현

7.3. 프로토타입 제작 단계

1단계: 화면 연결

1. 오른쪽 상단에서 Prototype 탭을 클릭합니다.
2. 로그인 화면 프레임의 로그인 버튼을 선택합니다.
3. 버튼 오른쪽에 나타나는 **파란색 원(핸들)**을 드래그하여 메인 화면 프레임에 연결합니다.

2단계: 인터랙션 설정

• 연결이 완료되면 오른쪽에 Interaction details 패널이 나타납니다.
• 다음과 같이 설정합니다:
  • Trigger: On Click (클릭했을 때)
  • Action: Navigate To (메인 화면으로 이동)
  • Animation: Slide In (왼쪽으로 슬라이드되며 들어옴)
    • Direction: 오른쪽에서 왼쪽으로 (→)
    • Duration: 300ms (0.3초)

3단계: 뒤로 가기 버튼 구현

1. 메인 화면 프레임에 '뒤로 가기' 아이콘 또는 버튼을 추가합니다.
2. 해당 버튼을 선택하고, Prototype 탭에서 인터랙션을 설정합니다.
3. Interaction details 패널에서 다음과 같이 설정합니다:
   • Trigger: On Click
   • Action: Back (이전 화면으로 돌아감)

7.4. 프로토타입 실행 및 확인

1. 오른쪽 상단의 ▶️ (Present) 버튼을 클릭하여 프로토타입을 실행합니다.
2. 로그인 버튼을 클릭하여 메인 화면으로 이동하는지, 슬라이드 애니메이션이 적용되었는지 확인합니다.
3. 뒤로 가기 버튼을 눌러 다시 로그인 화면으로 돌아오는지 확인합니다.

✅ 요약

단계	설명
연결	프로토타입 탭에서 요소와 프레임을 핸들로 연결
인터랙션	On Click, Navigate To, Slide In 등 동작과 애니메이션 설정
실행	Present 모드에서 실제 앱처럼 테스트

Tip

Smart Animate를 사용하면 두 프레임 간에 동일한 이름을 가진 레이어의 변화를 자동으로 감지하여 부드러운 애니메이션을 만들어줍니다. 다음 실습에서 더 자세히 다루겠습니다.