피그마 오버레이 - 드롭다운 메뉴 만들기

피그마(Figma)로 웹이나 앱의 화면을 한창 디자인하다가 프로토타입 인터랙션을 심는 단계에 진입하면, 누구나 한 번쯤 마주하는 '현타'의 순간이 있습니다.

"아, 맞다. 대메뉴 마우스 오버했을 때 드롭다운 메뉴 나오는 거 구현해야 하지.""로그인 버튼 누르면 화면 중앙에 팝업창 뜨는 거 어떻게 보여주지?"

이때 많은 입문자나 바쁜 실무자들이 가장 먼저 선택하는 방식은 직관적이지만 다소 무식한(?) 방법입니다. 바로 배경이 되는 화면 프레임을 그대로 복사(Ctrl + D)한 뒤, 그 복사본 위에 팝업창이나 드롭다운 메뉴를 얹고 Maps to(화면 이동)로 선을 길게 연결하는 것이죠.

하지만 이 방식은 프로젝트의 규모가 조금만 커져도 디자인 워크플로우를 지옥으로 만드는 주범이 됩니다. 오늘 소개해 드릴 '오버레이(Open Overlay)' 기능을 알기 전과 후로 여러분의 피그마 작업 능률은 정확히 10배 차이가 날 것입니다.

피그마 오버레이(Overlay)란

직관적인 정의: 캔버스 위에 투명 필름 한 장 얹기

피그마 프로토타입에서 오버레이(Overlay)의 사전적 의미는 '덮어씌우다', '얹다'입니다. 디자인 캔버스 관점에서 가장 쉽게 비유하자면, 현재 기본이 되는 '바탕 화면 프레임'을 그대로 유지한 채, 그 위에 투명한 아세테이트 필름 한 장을 깔고 새로운 '서브 프레임(팝업, 모달 등)'을 둥둥 띄우는 프로토타입 액션(Action)을 말합니다.

사용자가 화면 안의 특정 버튼을 눌러 오버레이를 실행(Open Overlay)하면, 피그마는 기존 화면을 지우고 새 화면으로 완전히 넘어가는 것이 아니라, 기존 화면은 백그라운드에 그대로 고정해 둔 상태로 지정된 위치에 준비된 서브 프레임만 싹 노출해 줍니다. 그리고 사용자가 볼일을 다 보고 팝업을 닫으면(Close overlay), 위에 얹혀있던 투명 필름만 슥 걷어내는 방식이죠.

이 메커니즘 덕분에 우리는 단 하나의 바탕 화면 위에서 수십 가지의 일시적인 상태 변화를 자유자재로 연출할 수 있게 됩니다.

실무에서 200% 활용하는 오버레이 예시 리스트

그렇다면 실제 웹/앱 서비스 기획 및 UI/UX 디자인 과정에서 오버레이 기능은 어떤 요소들에 적용될까요? 현업 디자이너들이 하루에도 수십 번씩 오버레이를 사용하는 대표적인 4가지 실무 케이스를 정리해 드립니다.

① GNB 대메뉴 마우스 오버 시 열리는 '드롭다운 / 메가 메뉴'

웹사이트 상단 네비게이션 바(GNB)의 카테고리에 마우스를 올렸을 때 아래로 슥 펼쳐지는 하위 메뉴 리스트입니다. 트리거를 While hovering(마우스 오버 시)으로 설정하고 오버레이를 적용하면, 마우스가 메뉴 영역에 들어왔을 때 하위 메뉴 팝업이 나타났다가 마우스가 떠나면 자동으로 닫히는 정교한 헤더 인터랙션을 구현할 수 있습니다.

② 경고, 안내, 확인을 위한 '모달 창 (Modal)'

"정말 회원탈퇴를 진행하시겠습니까?", "쿠폰 발급이 완료되었습니다"처럼 사용자의 집중된 확인이나 결정을 요구할 때 화면 중앙에 뜨는 레이어 팝업입니다. 오버레이 옵션 중 '배경 어둡게 하기(Dim 처리)' 기능을 함께 활성화하면, 뒷배경의 콘텐츠는 어둡게 블러 처리되면서 중앙의 모달 창에만 시선이 꽂히는 몰입감 있는 화면을 연출할 수 있습니다.

③ 모바일 UX의 핵심 '바텀 시트 (Bottom Sheet / 텀 시트)'

스마트폰 앱 화면 하단에서 스르륵 위로 올라오는 UI 컴포넌트입니다. 옵션 선택, 정렬 필터, 공유하기 메뉴 등을 보여줄 때 주로 쓰입니다. 피그마 오버레이의 애니메이션 옵션 중 Move in (↑) 효과를 부여하면, 실제 구동되는 상용 앱처럼 자연스럽게 아래에서 위로 밀려 올라오는 입체적인 모바일 프로토타입이 완성됩니다.

④ 미세한 힌트를 주는 '툴팁(Tooltip)' 및 '토스트 팝업'

특정 아이콘에 마우스를 올렸을 때 짧은 설명이 뜨는 '툴팁', 혹은 화면 한쪽에서 나타났다가 몇 초 뒤 사라지는 가벼운 알림인 '토스트 팝업' 역시 오버레이의 단골 손님입니다. 화면 전체를 흔들지 않고, 사용자가 필요한 순간에만 힌트 레이어를 띄워주어 UX의 완성도를 높여줍니다.

드롭다운 메뉴 만들기

해더의 ‘IT 문제 해결’ 메뉴에 마우스를 오버시 하단에 드롭다운 서브 메뉴가 노출되도록 오버레이 기능을 적용해 보겠습니다.

먼저 해더 컴포넌트에서 ‘IT 문제 해결’ 메뉴를 선택하고 ‘상호 작용’을 추가합니다.

 

 

 

‘상호 작용’ 팝업이 뜨면 아래와 같이 값을 세팅합니다.

• 트리거 : 마우스 들어옴 선택
• 작업 : 오버레이 열기
• 오버레이 : 드롭다운으로 노출할 레이어 팝업 페이지를 선택
• 위치 : 메뉴얼
• 외부를 클릭하면 닫기 : 체크하기

 

 

 

위치를 메뉴얼로 선택하면 드롭다운 메뉴 페이지를 노출할 위치를 설정할 수 있게 미리보기 이미지가 뜨는데, 이 이미지를 이동시켜서 드롭다운 메뉴의 노출 위치를 맞춰줍니다.

 

 

 

다음은 레이어 팝업 메뉴에서 마우스가 나가면 레이어 팝업 메뉴가 사라지게 설정을 추가해야 합니다. 해당 레이어 팝업 메뉴를 선택하고 상호 작용을 추가 합니다. 그리고 설정 값을 아래와 같이 선택합니다.

• 트리거 : 마우스 나가기
• 작업 : 오버레이 닫기

 

 

 

이렇게 설정을 완료한 후에 프로토타입을 실행한 후, 해당 메뉴에 마우스를 올려보면 드롭다운 메뉴가 노출되는것을 아래처럼 확인할 수 있습니다.

 

 

 

이상으로 피그마의 오버레이 기능으로 드롭다운 메뉴를 만들어 보았습니다.

그럼 도움이 되시길 바라며~

감사합니다.