[피그마] Union과 Autolayout을 같이 쓰기 (EX. 버블툴팁)

버블 만들기, 생각보다 어렵다!

얼마 전 회사에서 stroke가 있는 말풍선 형태의 툴팁을 만드는데, 생각보다 만들기가 쉽지 않았다. union을 쓰면 오토레이아웃이 안됐고, 오토레이아웃을 쓰면 union이 안되어서 사각형과 삼각형의 겹치는 스트로크가 그대로 노출됐다. 그렇다고 야매로 파란 fill 툴팁을 만들기에는 덩어리감 때문에 인터페이스상 시선이 지나치게 집중됐다.

하는 방법은 찾았는데 생각보다 과정도 번거롭고 관련 자료도 한국어로는 많이 없어서 정리한다.

만드는 방법

도형 만들기

1. 직사각형과 삼각형을 그린다. (앞으로 직사각형은 Rectangle, 삼각형은 Polygon으로 칭하겠다.)
2. Polygon은 cmd+e를 눌러서 flatten 시켜준다. 컴포넌트 범위가 삼각형 크기에 맞게 설정된다.
3. Polygon을 Rectangle에 원하는 위치에 겹치지 않도록 붙여준 후 union을 적용한다.
4. (선택) union레이어에 stroke를 준다.
5. union을 마스터 컴포넌트로 설정한다. {create component (단축키: cmd alt k)}. 이때 union 컴포넌트와 헷갈리지 않도록 가장 상위 컴포넌트인 마스터컴포넌트는 bubble로 이름을 바꿔주자
6. Polygon 컴포넌트를 클릭한 후 constraints를 center, bottom으로 설정한다.
7. Rectangle 컴포넌트를 클릭한 후 constraints를 left and right, top and bottom으로 설정한다.
8. bubble레이어를 클릭한 후 사각형영역까지 범위를 딱 맞게 줄인다. 이때 shift o를 눌러 딱 맞게 적용이 되었는지 확인하자.

오토레이아웃 작업

1. 원하는 글자를 타이핑하고 오토레이아웃(shift a)을 설정한 후, 적절한 값으로 padding을 준다. 이 글자 프레임의 이름은 tooltip으로 하자
2. tooltip을 클릭한 뒤 아까 만들어놓은 bubble을 복사, 붙여넣기한다.
3. bubble이 선택된 상태에서 absolute positon을 설정한 후 right, top 정렬한다.
4. bubble을 뒤로 가게 한다 (cmd [ )
5. bubble 가로값을을 tooltip가로값과 동일하게 만든다. 이 때도 shift o를 눌러 딱 맞게 붙였는지 확인한다.
6. bubble의 constraints를 left and right, top and bottom으로 설정한다.
7. tooltip 컴포넌트를 활성화하여 실제로 버블 툴팁이 동작하는 모습을 확인한다.
8. 모든 설정이 완료되면, 버블 툴팁 컴포넌트를 재사용하여 다양한 화면에 적용할 수 있다.

+ 라운딩처리, 스트로크 처리 등은 선택적으로 적용하도록 하자.

작업 소감

생각보다 번거로운 작업이었지만, 오토레이아웃의 absolute position 기능을 활용해 원하는 위치에 컴포넌트를 정확하게 배치할 수 있었다.
버블 형태의 툴팁은 사용자 인터페이스(UI) 디자인에서 많이 활용되는 요소로, 앞으로도 매우 유용하게 사용할 수 있을 것이다.

---

해당 포스팅은 피그마 공식 유튜브 채널의 동영상을 참고하여 작성되었습니다. 동영상을 통해 보다 자세한 작업 과정을 확인하실 수 있습니다.
링크 : https://www.youtube.com/watch?v=R0hjH7W3w9A&feature=youtu.be