coalacoding.com
coalacoding.com
프로토타입

프로토타입

유형
실습문서
주제

기초기능학습

순번
7
태그
설명

1-네비게이션

이펙트설명

image
  • instant: 효과없음
  • Dissolve: 점진적효과
  1. 트랜지션(Transitions): 피그마에서는 요소 간의 트랜지션을 만들 수 있습니다. 이를 통해 버튼 클릭, 페이지 이동, 화면 전환 등과 같은 상호작용적인 애니메이션을 구현할 수 있습니다. 트랜지션은 요소의 위치, 크기, 회전, 투명도 등의 속성을 부드럽게 전환하는 데 사용됩니다.
  2. 오버레이(Overlays): 오버레이는 피그마 프로토타입에서 상호작용을 위한 팝업 창이나 모달 창을 만드는 데 사용됩니다. 오버레이는 트리거 요소(예: 버튼)를 클릭하거나 호버할 때 활성화되며, 사용자에게 추가 정보나 선택 사항을 제공하는 데 유용합니다.
  3. 스크롤 이벤트(Scroll Events): 스크롤 이벤트를 사용하면 사용자가 스크롤할 때 요소의 상태가 변경되는 애니메이션을 만들 수 있습니다. 이를 통해 페이지 내에서의 스크롤에 따라 요소의 나타남 또는 사라짐을 조절할 수 있습니다.
  4. 스마트 애니메이션(Smart Animate): 스마트 애니메이션은 두 개의 프레임 간에 속성이 변경되는 경우 자동으로 애니메이션을 생성해줍니다. 예를 들어, 요소의 위치, 크기, 텍스트 등이 변경되면 피그마가 애니메이션을 자동으로 생성하여 움직임을 부드럽게 표현해줍니다.
  5. 애니메이션 완화(Easing): 애니메이션 완화는 트랜지션 또는 애니메이션의 움직임을 부드럽게 만들어주는 기능입니다. 피그마에서는 다양한 애니메이션 완화 옵션을 제공하여 움직임의 감속, 가속, 튀기는 효과 등을 조절할 수 있습니다.

1-1-하단탭 화면연결

📢
학습목표
  • 연결선을 활용하여 인터렉션 구현하기
  • 연결,수정,삭제 기능 이해하기
image

#bottomNav

image
image

1-2-백버튼연결

image

2. 컴포넌트에 적용하기

  1. card 컴포넌트를 복사후 편집
  2. detach instance 클릭 (^@B)
  3. 이미지 프레임하위에 두개의 사각형추가
    4. image
    image
  4. 위와 같은 모양으로 편집한다
  5. 하단 탭바의 검색버튼을 복사하여 편집한다
    6. image
  6. 이미지 프레임복사하여 배경과 아이콘이 없는 상태를 만든다
    1. 배경과 아이콘의 높이: 1
    2. 불투명도:0
      3. image
  7. 레이어패널에서 우클릭
    8. image
  8. 우측패널에서 속성명 수정
    9. image
  9. 작업화면으로 이동하여 인스턴스를 아래와 같이 편집한다
    10. image
  10. 우측패널에서 베리언트의 값을 수정한다
    11. image
  11. 프로토타입 패널설정
    12. image
  12. 07-프로토타입페이지로 이동하여 컴포넌트 적용
    1. 우측패널 swap instance 를 사용하여 컴포넌트를 변경한다
      2. image

3.모달만들기

  1. 모달창을 제작한다
  2. 프레임만들기-상세스펙은 완료본 참고
    3. image
    image
  3. 프로토타입 패널에서 아래와 같이 설정한다
image

4.슬라이드만들기

  1. Detail프레임을 3개 복사한다
image
  1. 페이저 버튼을 선택후 아래와 같이 설정한다
    2. image
  2. 되돌아오는 것도 제작한다
    3. image

5.스크롤만들기

5-1-pc

  1. pc페이지 선택 후 프로토타입 환경 설정
    2. image
  2. main-menu 는 fixed 한다
    1. #nav 프레임을 언그룹
      2. image
    2. 아래의 순서로 적용한다
      3. image
  3. work 에 스크롤을 아래와 같이 적용한다
    4. image
  4. 미리보기 진행후 스크롤위치를 조절한다
    5. image
  5. 나머지 메뉴도 제작해본다

태블릿과 모바일의 프레임설정을 참고하여 프로토타입을 구현해보자

5-2-태블릿 프레임설정

image

5-3-모바일 프레임설정

image

6. 위키동물원

6-1. 예제파일

시작

동물원의 비밀
콜럼버스 동물원 사람들의 이야기
SYNOPSIS
VIDEOS
EPISODES
PHOTOS
1부.
치타의 위대한 여정
2부.`
화나고 상처받은 마음
3부.
아기가 타고 있어요
4부.
새끼 늑대 구경하기
5부.
여왕 호랑이
6부.
북극곰의 탄생
7부.
심술궂은 스라소니
8부.
잠자는 도마뱀 깨우기
WHERE TO WATCH
디즈니+
SYNOPSIS
콜럼버스 동물원과 수족관은 미국에서 가장 크고 유명한 동물원 중 하나다. 그중에서도 동물원장이자 야생동물 후원자인 ‘정글 잭 해나’가 있는 것으로 명성이 자자하다. 전체를 다 둘러보는 데만 몇 시간이 걸리는 이곳을 미국 최고의 동물원으로 만들고자 일주일 내내, 하루 24시간씩 일하는 사람들이 있다. 그들의 뒷이야기를 내셔널 지오그래픽 와일드가 최초로 담아냈다.

VIDEOS
EPISODES
images.zip8488.2KB

완성

Wiki Animal.fig1926.2KB