• 카테고리

    질문 & 답변
  • 세부 분야

    기획 · 전략 · PM

  • 해결 여부

    미해결

플로팅 탭 구성을 간단하게 할 수 있는 방법이 있을까요?

22.03.14 18:02 작성 조회수 313

0

안녕하세요~ 

정말 좋은 강의 제공해 주셔서 감사합니다~

보너스 영상 제외하고 기본강의 수강 완료 후, 호기롭게 바로 화면설계 및 응용에 들어갔는데 벌써 난관에 부딪혔네요.

 

명칭이 적절한 지 모르겠으나, 흔히 플로팅 탭이라고 부르는 방식을 구현하고자 하는데요.

웹 브라우저 처럼 탭이 우측으로 계속 붙어나가는 형태의 플로팅 탭 메뉴를 구성하고자 합니다.

고려해야할 사항이 해당 플로팅 탭 메뉴는 어떤 메뉴를 선택하던 항상 우측으로 이어 붙어져 나가야 하고,

각 메뉴마다의 사이즈는 글씨 크기에 따라 제각각 입니다.

 

다시 정리하자면, 플로팅 탭 메뉴가 존재하는데 해당 영역에는 레프트 메뉴를 클릭할때 마다

동적으로 계속 메뉴가 추가되는 형태이고, 사용자가 어떤 메뉴를 선택할지 모르기 때문에 순서를 특정하기 어렵습니다.

그래서 해당 플로팅 탭에 추가된 메뉴를 기준점으로 계속 이어나가야 하는데 아이디어가 잘 떠오르지 않습니다.

 

다이나믹패널을 활용해서 해보려 하였으나, 앞선 위젯에 이어 붙이는 방법을 아직 찾지 못했네요 ㅠ

예시 이미지는 아래와 같습니다.

 

답변 1

답변을 작성해보세요.

0

홍서진님 안녕하세요!

문의주신 글을 잘 확인해봤는데요. 문의주신 기능을 Axure에서 구현은 가능하지만 구현 방법은 꽤나 복잡합니다. 개인적인 의견으로는 해당 인터랙션을 완벽히 구현하기보다는 디스크립션 설명으로 대체하시는걸 권장합니다 ^^ 

그래도 일단 접근 방법을 설명드리면 아래 영상과 같이 리피터를 이용해서 구현할 수 있습니다.

문의주신 최종 인터랙션을 구현하기 위해서는 출력되는 플로팅탭 메뉴명 우측에 닫기 버튼 (x)이 함께 표현되어야 하는데요. 메뉴 텍스트 길이에 따라 가변적으로 변하는 width값을 계산해서 우측에 닫기 버튼을 추가하는과정이 꽤나 복잡해서 본 영상에서는 추가하지 않았습니다. 이렇게 저렇게 하면 될 것 같기는 한데 바로 떠오르지는 않네요 ^^;;