오버레이를 소개합니다 | (새 탭에서 열림)
Figma는 정적인 화면을 연결하는 기존 프로토타이핑의 한계를 보완하기 위해 Overlays 기능을 출시했다. 이를 통해 모달, 사이드바, 팝오버, 드롭다운처럼 기존 콘텐츠 위에 표시되는 요소를 유연하게 표현하고, 여러 오버레이를 겹쳐 상호작용할 수 있다. 결과적으로 반복적이고 번거로운 프로토타입 제작 과정을 단순화하고 실제 인터페이스에 가까운 사용자 흐름을 구현할 수 있게 됐다. ## 오버레이의 기본 동작 - 두 프레임을 연결한 뒤 속성 패널에서 목적지 프레임을 오버레이로 설정할 수 있다. - 오버레이의 표시 위치와 등장 방식을 설정할 수 있다. - 디바이스 기준 상대 위치를 지원해 모달이나 액션 시트를 자연스럽게 배치할 수 있다. - 툴팁이나 드롭다운처럼 특정 객체를 기준으로 표시해야 하는 요소는 오버레이 위치를 수동으로 조정할 수 있다. ## 여러 오버레이의 중첩 - 하나의 화면 위에 여러 오버레이를 연속해서 표시할 수 있다. - 다단계 구매 과정, 확인 대화상자 등 복잡한 상호작용 흐름을 표현하는 데 적합하다. - 여러 오버레이를 설정하는 방식도 단일 오버레이와 동일해 추가 학습 부담이 적다. ## 오버레이 내부 상호작용 - 오버레이 위의 요소에도 상호작용을 연결할 수 있다. - 프레임을 교체하는 ‘Swap’ 동작을 사용하면 전체 화면을 전환하지 않고 오버레이 내부 상태만 바꿀 수 있다. - 이를 활용해 버튼 호버, 선택 상태, 단계별 콘텐츠 변화 같은 인터랙션을 구현할 수 있다. - Swap은 오버레이를 자동으로 닫지 않으므로, 오버레이를 유지한 채 내용을 갱신하는 흐름에 유용하다. ## 연결 방식과 단축키 - 오버레이 연결을 드래그하는 동안 캔버스에서 바로 Back 또는 Close를 선택할 수 있다. - 레이어 패널에서 별도로 옵션을 찾지 않아도 되므로 연결 작업이 간결해졌다. - 목적지 프레임 위에서 Option 키를 누르면 Swap 연결을 빠르게 선택할 수 있다. - Swap 링크를 활용한 Back 동작은 Swap 연결을 건너뛰고, 마지막으로 Navigate를 사용했던 프레임으로 돌아가도록 구성할 수 있다. ## 기존 프로토타이핑 기능과의 결합 - Overlays는 기존의 인터랙션, 화면 전환, 전환 효과, 디바이스 프레임, 고정 객체, 고급 스크롤 기능과 함께 사용할 수 있다. - 단순히 화면 간 이동만 보여주는 것이 아니라 실제 제품의 메뉴, 팝업, 확인창, 상태 변화까지 하나의 프로토타입에서 재현할 수 있다. - 사용자 테스트나 이해관계자 검토에서 실제 사용 흐름에 가까운 경험을 제공한다. 실무에서는 모달·드롭다운·툴팁처럼 화면 위에 나타나는 요소를 별도 페이지로 복제하기보다 Overlays로 구성하는 것이 효율적이다. 오버레이 내부 상태 변화에는 Swap을 사용하고, 사용자가 흐름을 되돌아가야 할 때는 의도에 맞게 Back 또는 Close를 구분해 설정하는 것이 좋다.