'오토레이아웃'을 활용하여 팝업 만들어보기(2탄)

팝업을 완성해볼게요!

• 1탄: 타이틀과 메시지 영역 추가
• 2탄: 버튼 추가 및 팝업 완성(+컴포넌트 활용까지)

---

오토레이아웃으로 아래 팝업을 피그마로 만들 수 있나요?

• 추가 기능: 팝업 내 텍스트 내용이 길어지거나, 짧아지더라도 [취소], [확인] 버튼은 내용 길이에 따라 자동으로 간격 조정됨

 

 

 

 

오늘은 완성해봐요!

 

---

버튼 만들기

1. 텍스트 ‘취소', ‘확인' 타이핑하여 만들기(단축키: T)

2. 추가한 텍스트에 각각 오토레이아웃 추가(단축키: Shift + A)

3. 오토레이아웃 각각 색상, corner radius, 크기, 테두리 설정(설정하고 싶은 색상으로 선택하세요.)

4. 2개의 오토레이아웃을 모두 선택한 후 오토레이아웃 추가

5. 버튼 위치를 좌, 우로 변경하기 위해, 전체 오토레이아웃 선택 후 우측패널 내 [Auto layout] - ‘Horizontal layout’ 선택(하단 이미지 참고)

6. 원하는 사이즈로 크기 조정

---

최종 합치기

1. 타이틀, 텍스트가 합쳐진 오토레이아웃과 버튼 영역 오토레이아웃을 모두 선택한 후 오토레이아웃 추가

2. 전체 크기 조정

* 텍스트 영역을 오토레이아웃 크기에 자동으로 맞춰지게 설정하고 싶다면, 타이틀 영역만 선택한 후 Horizontal resizing: <> 선택

3. 컴포넌트 등록

4. 컴포넌트를 복사, 붙여넣기 후 내용 수정

---

컴포넌트 등록 이후부터는 만들어진 컴포넌트를 복사, 붙여넣기해서 사용하면 됩니다.

만들어진 템플릿을 컴포넌트 추가하게 되면, 통일된 양식을 사용할 수 있고 내용만 수정하면 됩니다.

 

그리고, 양식이 변경되었을 때 컴포넌트만 수정하면 복사했던 모든 팝업도 동일한 양식으로 변경됩니다.

(단, 복사한 팝업의 양식을 변경(예. 텍스트 크기 변경 등)을 하게 되면 적용되지 않습니다.)

 

 

컴포넌트를 알고 싶다면 제 블로그 '컴포넌트(component), 인스턴스(instance)' 참고해주세요 :) 

 

관련해서 질문 있다면 언제든지 질문 주세요!