피그마 핵심1) 오토 레이아웃으로 카드 만들기

안녕하세요. 이번시간에는 카드를 만들어 보려고 합니다. 카드는 단일 주제의 내용을 컨테이너 영역에 담아 빠르게 탐색하기에 좋은 UI입니다. 카드 크기를 늘리거나 줄일 때 반응하는 리사이징에 대한 부분은 다음 포스팅에서 다룰 예정입니다. 카드의 구조에 대해서 먼저 살펴보겠습니다.

 

<카드 구조>

카드 = 미디어 + 카드정보 이렇게 크게 2개의 영역으로 나누고 내부 적으로는 

1. 미디어 = 카드 이미지

2. 카드정보 = 타이틀영역 + 설명글 + 아이콘영역

2-1. 타이틀영역 = 아바타 이미지+타이틀+시간텍스트

2-2. 아이콘영역 = 왼쪽 아이콘영역+북마크 아이콘

이렇게 나누었습니다.

 

미디어 만드는 방법

1. 미디어 영역 사각형으로 그리기

2. 사각형(R) 선택 400x400 만들고 원하는 이미지 넣기 단축키 : Window : ctrl+shift+K, Mac : command+shift+K

3. 이미지 선택 후 프레임으로 감싸기 단축키 : Window : ctrl+alt+G, Mac : command+option+G

4. 프레임 이름을 media로 변경

5. 이미지 선택 후 디자인패널 Constraints > Left and Right / Top and Bottom 선택

 

카드정보 만드는 방법

1. 제목 텍스트 만들기

2. 원형(O) 선택 후 36x36 만들고 원하는 이미지 넣기

3. 이미지 이름을 avatar로 변경

4. 시간 텍스트 만들기

5. 제목 텍스트+아바타+시간 텍스트 모두 선택 후 오토 레이아웃 만들기 > 이름 title로 변경 > 항목 사이간격 8로 변경

6. 설명글 만들기

7. title+설명글 모두 선택 후 오토 레이아웃 만들기 > 배열 좌측 아닐 경우는 좌측으로 옮기기 > 항목 사이간격 10으로 변경

8. 색상 흰색 넣기 > 이름 card info로 변경 > 좌우 24, 상하 16 패딩 설정 (tip. Window : alt , Mac : option 누르면서 패딩 클릭하면 상하, 좌우 한 번에 패딩설정 가능)

9. card info 폭 400으로 변경

9. 설명글 폭 fill로 변경 / 높이 Fixed로 변경 43으로 만들고 다시 fill로 변경 > 옵션 : Resizing- turncate text로 말 줄임 만들기

10. title 선택 후 폭 fill로 변경 > 제목 텍스트만 선택 후 폭 fill로 변경

11. 아이콘 heart+send 오토 레이아웃 만들고 이름 left-icon변경 항목 사이간격 24로 설정

12. 아이콘 Bookmark와 left-con를 선택 후 프레임으로 감싸고 이름 icons로 변경

13. icons 선택 card info에 넣기 > 폭 fill로 변경

14. Bookmark 아이콘만 선택 후 Constraints > Right로 변경해서 리사이징시 오른쪽 고정

 

미디어와 카드정보 둘 다 선택 오토 레이아웃 만들기

1. 미디어와 카드정보 오토 레이아웃 만들기 > 항목 사이간격 0으로 설정

2. 디자인 패널 가장 상단 FRAME 속성에서 코너 값 20 주고

3. 클립 콘텐츠(Clip content) 체크 

4. 리사이징 반응시키기 위해서 media와 card info 각각 선택 후 폭 fill로 변경

5. 이미지만 높이 반응시키기 위해서 media 프레임 선택 후 높이 fill로 변경

 

---

지금까지 카드 UI를 오토 레이아웃을 활용해서 만들었습니다. 보시다시피 오토 레이아웃은 계속 중첩관계로 만들 수 있습니다. 프레임으로도 만들 수 있지만 다음 포스팅에서 알아볼 리사이징(fill, fixed, hug), 옵션... 등 다양한 속성들이 있어서 오토 레이아웃을 잘 활용하면 유지보수에 더 좋은 디자인을 할 수 있습니다. 

 

 

 

만드는 과정을 텍스트로 이해하기 어려운 부분이 있어서 영상 첨부하였습니다. 구조를 만드는 방법은 다양하니 참고만 하시고 나만의 카드를 만들어보세요. 봐주셔서 감사합니다. : )