프로토타입 설정
참고:
프로토타입 설정에 앞서 테스트 설계가 선행되어야 해요.
Optilify는 Figma 프로토타입을 연동해 A/B 테스트를 진행해요.
그래서 테스트가 정상적으로 작동하려면, Figma에서 몇 가지 기본 설정이 필요해요.
목표 화면 설정
모든 프로토타입에는 사용자가 최종적으로 도달해야 하는 목표 화면이 꼭 포함되어야 해요.
예를 들어 피자 주문 경로를 테스트하는 경우, 사용자가 결제 완료 화면 같은 목표 화면 까지 도달할 수 있도록 연결해야 해요.
예시:
피자 주문 화면 -> 결제 화면 -> 결제 완료 화면 (목표 화면)
주의:
목표 화면이 없으면, 사용자의 행동이 끝났다고 판단할 수 없어 실험 제대로 진행되지 않아요.
레이어 깊이 확인
Figma에서 아래 두 가지 기능을 사용할 때는, 반드시 레이어 깊이가 10을 넘지 않도록 설정해야 해요.
- 요소를 화면에 고정하기 위해 Position을 Fixed로 설정할 때
- 요소 내부에 Scroll 기능을 적용할 때
주의:
레이어 깊이가 10을 넘으면 일부 기능이 제대로 작동하지 않을 수 있어요.
스크롤 동작 설정
스크롤 동작 설정은 Figma 오른쪽 패널에서 Prototype/Scroll behavior에서 설정할 수 있어요.
더 자세한 내용은 피그마 가이드 - 스크롤 및 오버플로 동작 프로토타입 에서 확인할 수 있어요.
예시:
- 스크롤 요소
- Position: Scroll with parent
- Overflow: Vertical 또는 Horizontal
- 고정 요소
- Position: Fixed
- Overflow: No scrolling
Position
사용자가 프레임에 있는 레이어를 스크롤하여 지나갈 때 해당 레이어의 동작을 정의하는 옵션이에요. 단 가장 최상위 부모 요소는 Position 속성이 존재하지 않아요.
- Scroll with parent (부모와 함께 스크롤): 부모 요소와 함께 스크롤 돼요.
- Fixed (고정): 고정된 개체는 스크롤해도 움직이지 않아요.
- Sticky: 아직 지원하지 않아요.
Overflow
프레임에 스크롤 방향을 정의하는 옵션이에요. 스크롤은 콘텐츠가 프레임 크기 범위를 넘어 확장되도록 해야 하고 프레임에만 설정할 수 있어요.
- Vertical (수직): 위아래로 스크롤 할 수 있어요.
- Horizontal (수평): 좌우로 스크롤 할 수 있어요.
- Both directions (양방향): 수평 및 수직 방향 모두 스크롤 할 수 있어요.
- No scrolling: 스크롤 기능을 사용하지 않아요.
주의:
느낌표로 표시된 오류 메시지(”이 프레임에서 스크롤 기능을 사용하려면 콘텐츠가 프레임보다 커야 합니다” 또는 “For scrolling to work on this frame, the content needs to be bigger than the frame”)가 표시되면 프레임의 콘텐츠를 프레임 크기보다 크게 확장하여 스크롤 기능을 활성화 해야 합니다.
프로토타입 설정 확인
프로토타입 연동 전에 아래 설정들이 올바르게 적용되었는지 확인해주세요.
Flow 순서 확인
프로토타입의 Flows 순서가 대조군(A) -> 실험군(B) 순으로 되어 있는지 꼭 확인해주세요.
순서가 다를 경우, Optilify에서도 잘못된 순서로 표시될 수 있어요.
참고:
순서가 맞지 않는다면, Figma Prototype에서 Flow를 드래그해서 올바른 순서로 정렬해 주세요.
페이지 연결 확인
하나의 화면에서 여러 방향으로 연결되는 구조가 없는지 꼭 확인해주세요.
이런 구조는 단일 변인 원칙과 단일 테스트 흐름 원칙을 위반해 데이터의 신뢰성을 떨어뜨릴 수 있어요.
참고:
각각의 프로토타입은 하나의 시작점에서 하나의 목표 페이지로 이어지는 일관된 흐름이어야 해요.
다만, 뒤로 가기는 예외적으로 허용돼요.
디바이스 설정 확인
Figma의 우측 Prototype 패널에서, Frame 사이즈와 일치하는 Device Type을 선택해주세요.
주의:
Frame과 Device 해상도가 다르면 테스트에 표시되는 화면이 어긋날 수 있어요.
공유 설정
프로토타입 파일의 공개 범위는 Anyone with the link로 설정해야 Optilify에서 불러올 수 있어요.
링크 복사 시, 상단에 Share this file로 되어 있는지 꼭 확인해주세요.
참고:
만약 민감한 정보로 인해 전체 파일을 공개하기 어렵다면, 프로토타입만 별도로 포함한 파일을 만들어서 공유해 주세요.