인프런 커뮤니티 질문&답변
작성한 질문수
[47강] 툴팁 그림자 질문드립니다.
작성
·
23
0
안녕하세요 강의 반복해서 잘 듣고 있습니다.
47강 툴팁의 마지막 그림자 부분에 질문이 있습니다.
말씀해주신대로 따라서 진행 했는데,
clip content 체크를 해제하면 Above나 Start, end 다 그림자는 잘 보이는데 below 의 글씨 위로 Arrow가 올라옵니다
이럴땐 그냥 clip content 체크, 해제를
Arrow마다 각각 줘도 되는것인지요?
below 3개에만 체크해도 되는지 궁금합니다.
감사합니다.
답변 1
0
안녕하세요, hana님.
우선 현재 겪고 계신 두 가지 문제 인 것 같습니다.
Arrow(브래킷) 부분이 글자 위로 올라오는 문제,
Clip content 적용 시 그림자가 사라지는 문제,
이 두 가지가 동시에 작용하면서 지금과 같은 현상이 발생한 것으로 보입니다.
하나씩 차근차근 설명해드리겠습니다.
✔ 브래킷(Bracket) 제작 시 프레임 vs 도형 선택의 문제
강의에서는 Arrow(브래킷) 부분을 프레임(frame) 으로 만드는 방식을 소개하고 있습니다.
그 이유는 프레임만이 베리어블(bg 등) 을 사용할 수 있기 때문입니다. 반면 도형(shape) 은 베리어블을 적용할 수 없습니다. 즉, 브래킷은 겉보기에는 도형처럼 보이지만, 베리어블을 쓰기 위해 프레임을 도형처럼 사용하는 ‘트릭’ 을 쓰는 것입니다.
다만 프레임은 원래 다양한 모양을 지원하지 않고 기본 사각형 형태이기 때문에, 사각형 프레임을 회전시켜 브래킷처럼 보이게 만들고, 그 위에 clip content 를 적용해 원하는 모양만 보이도록 하는 방식입니다.
✔ Figma 그림자(Shadow) 렌더링 이슈
문제는 Figma에서 내부 프레임에 clip content를 적용하면 그림자 렌더링에 오류가 발생하는 경우가 있습니다. 왜 이런 현상이 있는지는 공식적으로 설명이 없지만, 실제로 많은 사용자들이 겪고 있는 버그에 가깝습니다.
이를 해결하기 위해서는 Arrow의 클립 컨텐츠를 해제해야합니다.
✔ 그렇다면, 왜 hana님에게는 글자가 가려지는 문제가 발생할까?
제 강의에서는 사실 문제가 없습니다. 그 이유는, 강의에서 사용한 툴팁 박스의 패딩이 16px로 충분히 넉넉한 구조였기 때문에 Arrow가 글자 위로 올라오지 않습니다.
반면 hana님 디자인에서는 육안으로 봐도 툴팁 박스의 패딩이 매우 얇아 보이기 때문에, Arrow와 텍스트가 겹쳐지는 현상이 발생한 것으로 판단됩니다.
✔ 최종 해결책 (가장 간단하고 확실한 방법)
다행히 해결 방법은 매우 간단합니다. 현재 툴팁은 오토레이아웃으로 구성되어 있고, 당연히 브래킷(Arrow)이 위, 툴팁 박스가 아래에 놓인 구조일 가능성이 큽니다.
이 순서만 바꿔주면 문제는 바로 해결됩니다.
👉 해결 방법
최상단 레이어(Tooltip)를 선택
우측 패널에서 오토레이아웃 Advanced → Canvas Stacking 항목으로 이동
“First on top” 옵션 선택 또는 그 반대
이렇게 설정하면, 툴팁 박스가 시각적으로 위에 배치되어 Arrow가 글자를 가리는 문제가 해소됩니다.
도움이 되셨으면 좋겠습니다. 궁금하신 부분 있으면, 질문 주세요. 감사합니다.