피그마 기초 완전 정복 - 프로토타이핑 (화면 연결 및 동작 구현 1편)

1. 오늘 학습 키워드

- 프로토타입

- 프로토타이핑

- 스크롤 컨테이너

- 오버플로우

---

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

 

<프로토타입 (Proto-type)>

- 시제품

- 디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것을 의미함

- 구현하는 정도에 따라 낮은 단계와 높은 단계로 나눌 수 있음

- 프로토타이핑(Prototyp-ing)
→ 프로토타입을 만들거나 프로토타입을 사용해 테스트하는 것

 

구현 정도

1. Lo-fi(Low-fidelity)
- 낮은 단계의 프로토타입

- 전체적인 흐름을 빠르게 맞춰볼 수 있는 수준

- 와이어프레임도 낮은 단계의 프로토타입이라고 볼 수 있음

 

2. Hi-fi(High-fidelity)

- 높은 단계의 프로토타입

- 실제 제품과 거의 같거나 유사한 수준으로 만듦

 

 

프로토타입의 중요성

• 실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있음
  - 기획 단계의 문제를 미리 발견하고 수정할 수 있음
  - 잘못된 방향으로 개발하는 위험을 줄일 수 있음
  - 아이디어와 컨셉을 실제 제품처럼 테스트할 수 있음
  - 실제 사용자 피드백을 수집하는 도구로 활용할 수 있음
  - 제품 개발 전 의사결정을 도와줌
  
  
• 팀 구성원들과 시각적인 결과물로 소통할 수 있음
  - 실제 제품처럼 화면과 기능의 흐름을 확인할 수 있음
  - 구성원 간 아이디어와 동작 방식을 명확하게 공유할 수 있음
  - 글이나 말로 설명하기 어려운 부분을 시각적으로 전달할 수 있음
  - 의견을 수렴하고 의사결정을 내리는 데 도움을 줌
  
  
• 부족하거나 놓친 부분을 확인할 수 있음
  - 화면을 직접 이동하며 사용자 흐름을 확인할 수 있음
  - 기획 단계에서 놓친 문제를 발견할 수 있음
  - 사용자 시나리오를 테스트할 수 있음
  - 테스트 결과를 바탕으로 더 나은 방향으로 개선할 수 있음
  
  

 

프로토타이핑 툴

- 프로토타입은 피그마만의 기능이 아님

- 피그마 역시 프로토타입을 제작할 수 있는 도구 중 하나임

- 피그마에서 디자인한 화면들을 바로 실제 작동하는 형태로 테스트해 볼 수 있는 유용한 기능임

- 프로토파이, 프레이머 등 다양한 프로토타이핑 도구가 존재함

 

 

피그마 프로토타입의 장단점

• 장점
  - 직관적
  → 화면을 드래그해서 이어주기만 하면 프로토타입을 만들 수 있음
  
  - 빠르게 제작 가능
  → 제품이나 기능을 빠르게 테스트할 수 있음
  
  
• 단점
  - 실제 제품과 동일한 동작을 구현하는 데 어려움이 있음
  → 다른 프로토타입 전문 틀에 비해 피그마 기능이 부족함
  
  - 효율성이 낮음
  → 정교한 프로토타입을 만드는 데 많은 시간이 필요함
  → 구조가 복잡해질수록 수정과 관리가 어려워짐
  → 경우에 따라서는 프로토타입 제작보다 실제 개발이 더 효율적일 수 있음
  
  Blue Spaghetti
  - 피그마의 프로토타입 기능이 부족하고 복잡하다는 것을 스파게티 면에 빗대서 표현한 해외 유머
  

  

 

 

피그마 프로토타입으로 전환하는 방법

 

- 프로토타입을 누르면 디자인 모드에서 프로토타입 모드로 변경

- 프로토타입 모드에서도 프레임을 이동할 수 있음
- 내용을 수정하거나 편집하려면 다시 디자인 모드로 전환해야함

 

 

피그마 프로토타입 구성요소

 

1. 핫스팟(Hot Spot)

- 프로토타입 연결을 시작하는 지점

- 핫스팟을 드래그하여 다른 화면이나 요소와 연결할 수 있음

-  프레임의 상하좌우 중앙 지점에서 생성할 수 있음

- 화면 간 이동과 인터랙션을 설정할 때 사용함

2. 커넥션(Connection)

- 화면을 서로 이어주는 연결선

- 핫스팟에서 종착점으로 방향이 정해짐

 

3. 종착점(Destination)

- 도착하는 지점

- 핫스팟과 커넥션으로 이어져 있음

 

 

프로토타입 실행하기

1. 사전 설정하기
- 프로토타입 패널에서는 어떤 기기 화면으로 테스트할 건지 정할 수 있음
- 프로토타입을 만들기 시작하면 프로토타입 패널 구성이 변경됨

- 프로토타입 패널

 

1. 디바이스

- 어떤 기기 기준으로 프로토타입을 재생할 지 선택할 수 있음

- 아무것도 선택하지 않으면 (None) 프레임 크기와 피그마 화면 크기에 따라 재생 화면이 달라짐

2. 배경색
- 프로토타입 기기 바깥의 배경색을 무엇으로 할지 정할 수 있음

 

 

2. 피그마 프로토타입 모드

• 프리뷰 모드 (Preview Mode)
  - 작업 중인 화면과 사용자 흐름을 빠르게 확인할 수 있음
  - 디자인 과정에서 결과물을 미리 테스트할 수 있음
  - 팀원들과 화면 흐름을 검토하고 논의할 때 활용 가능함
  - 프로토타입 설정 없이도 바로 실행할 수 있음
  
  
• 프레젠테이션 모드 (Presentation Mode)
  - 프로토타입을 실행하고 공유할 때 사용함
  - 화면 전환과 인터랙션을 실제 서비스처럼 확인할 수 있음
  - 발표나 시연용으로 활용할 수 있음
  - 전체 화면 형태로 프로토타입을 보여줄 수 있음
  
  

3. 프로토타입을 실행하는 방법

 

 

 

<오버플로우(Overflow)>
- 프레임 밖으로 컨텐츠가 넘어가는 것

- 프레임에 오버플로우가 발생할 경우, 프레임 밖으로 넘어간 콘텐츠를 스크롤로 보여줄 수 있음
- 스크롤이 되게 하려면 프레임보다 콘텐츠가 더 길어서 넘쳐야 함

- 오버플로우가 되지 않으면 스크롤이 생기지 않음

 

 

 

<스크롤 컨테이너>

- 오버플로우가 생긴 프레임을 스크롤로 만들어주는 기본적인 프로토타입

- 스크롤을 만들기 위해서는 스크롤되는 콘텐츠와 스크롤 속성을 적용할 컨테이너가 필요함

 

 

스크롤 방식(Scroll Behavior)

- 스크롤 방식은 프로토타입 패널에서 선택 가능

 

1.No scrolling(스크롤 없음)
- 스크롤하지 않음, 기본값

2.Horizontal(가로)
- 내부의 콘텐츠들이 가로로 넘칠 경우, 가로 방향으로 스크롤

 

3. Vertical(새로)
- 내부의 콘텐츠들이 세로로 넘칠 경우, 세로 방향으로 스크롤

 

4.Both directions(양방향)
- 가로 및 세로 방향으로 모두 스크롤

 

 

스크롤 컨테이너 만들기 (디즈니+)

---

3. 학습하며 겪었던 문제점 & 에러

1)

 학습 과정 도중 No Scrolling 옵션을 언제 사용하는지 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 콘텐츠가 한 화면 안에 모두 표시되거나 팝업, 로그인 화면처럼 스크롤이 필요 없는 화면에서는 No Scrolling을 사용한다는 점을 이해했다. 불필요한 스크롤을 방지해 사용성을 높일 수 있다는 점도 알게 되었다.

2)

 학습 과정 도중 오버플로우의 길이에 제한이 있는지 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 피그마에서는 매우 긴 콘텐츠도 구현할 수 있지만 실무에서는 성능과 사용성을 고려해 적절한 길이로 구성하는 경우가 많다는 점을 알게 되었다. 일반적으로는 긴 화면을 여러 섹션으로 나누거나 페이지를 분리하여 관리하는 방식을 사용한다는 점을 이해하게 되었다.

3)

 학습 과정 도중 프리뷰 모드에서 여러 디바이스를 동시에 확인할 수 있는지 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 기본 프리뷰 창에서는 하나의 프로토타입 화면을 기준으로 확인하지만, 여러 프레임을 시작점으로 설정하거나 별도의 프리뷰 창을 열어 다양한 화면 흐름을 테스트할 수 있다는 점을 알게 되었다.