오버레이와 팝업창

오늘날의 인터페이스를 위한 디자인은 서로 연결된 정적 화면 그 이상이다. 또한 디자이너는 종종 사용자 테스트와 같은 활동을 위해 이러한 대화식 흐름을 경험해야 하기 때문에 프로토타입을 만들어 디자인을 구현한다. 그러나 프로토타입을 만드는 과정은 종종 반복적이고 시간이 오래 걸리며 매우 고통스럽다. 특히 디자이너가 Sidebar, Modal 및 Popover와 같은 요소를 모방하기 위해 다른 콘텐츠 위에 콘텐츠를 표시하려는 경우에 특히 그렇다.

오늘 우리는 프로토타입이 피그마(Figma)에서 훨씬 더 재미있어졌다. Figma의 새로운 오버레이(Overlay) 기능을 사용하면 다른 콘텐츠 위에 유연하게 콘텐츠를 표시하고 상호작용하며 여러 오버레이를 열 수 있다.

작동 원리

간단한 오버레이

우리는 오버레이의 기본 전달을 다시 상상해보자. 이제 두 프레임을 연결하기 위해 프로토타입 링크를 추가하면 속성 패널에 새로운 옵션이 표시된다. 이 옵션을 사용하면 대상 프레임을 오버레이로 설정할 수 있다. 일단 선택하면 오버레이 위치와 표시 방법을 사용자 정의할 수 있다.

우리의 상대 위치는 장치와 관련하여 오버레이를 표시하려는 모달 및 작업 시트와 같은 사용 사례를 지원한다. Tooltip 및 Dropdown과 같은 다른 사용 사례의 경우 열려있는 객체와 관련하여 수동으로 배치할 수 있습니다.

다중 오버레이

그러나 우리는 거기서 멈추지 않았다. 점점 더 상호작용하는 세상에서, 2단계 이상의 오버레이가 함께 작동해야 하는 상황이 종종 있다. 다단계 구매 흐름과 확인 대화를 생각해보자. 이때 Figma에서 디자이너는 서로의 위에 여러 오버레이를 추가할 수 있다. 무엇보다도 여러 오버레이를 설정하는 것은 단일 오버레이를 설정하는 것만큼 간단하다.

오버레이에 대한 상호 작용

프로토타입은 인터랙티브 한 경험이므로 오버레이에서 인터랙션을 허용하는 방법에 대해 신중하게 생각해야 한다. 두 프레임을 연결한 후 프레임을 교체할 수 있다. 스와핑 하면 전체 프레임이 새 프레임으로 교체되지만 오버레이는 해제되지 않는다. 이를 통해 버튼 가리 키기 등의 상호작용을 오버레이에 추가할 수 있다.

다른 핵심적인 세부 사항

이제 레이어 패널에서 이러한 옵션을 선택하는 대신 오버레이 연결을 드래그하면서 캔버스에서 직접 뒤로 또는 닫기를 선택할 수 있다.

키보드 바로 가기(Keyboard shortcut): 대상 프레임을 끌어서 이동하는 동안 옵션 키를 길게 눌러 스왑 연결을 빠르게 선택할 수 있다.

전문가 팁(Pro Tip): 스왑 링크를 활용하면 스왑 링크를 건너뛰어 이전 프레임으로 기본 설정하는 대신 탐색을 사용한 마지막 프레임을 표시하는 보다 유연한 ‘Back’ 작업을 수행할 수 있다.

이 비디오를 통해 단계별로 살펴보고 여기에서 설명서를 참조 하자.

결론적으로

오버레이가 다른 콘텐츠 위에 유연하게 콘텐츠를 표시하기 위해 모든 사용 사례를 간소화하기를 바란다. 또한 오늘날 상호작용(Interactions), 전환(Transitions), 장치 프레임(Device frames), 고정된 객체(Fixed objects) 및 고급 스크롤(Advanced scrolling)과 같이 Figma에서 이미 액세스 할 수 있는 다른 강력한 프로토 타이핑 기능도 모두 보완한다.

아래는 코드로 효과적인 오버레이 예제를 참고하자~

출처: Introducing Overlays -- taking Prototyping to the next layer