실습1 - 버튼 만들기
1. Text
- auto layout 적용
padding값 조정 (16, 12)
➡️텍스트가 길어지거나 줄어들어도 padding 값은 유지됨
2. 아이콘 결합
- auto layout이 적용되어 있어서 전에 만들었던 아이콘을 붙여넣으면 알아서 자기 자리를 찾아 들어간다.
- radius를 적용해도 padding 값은 그대로
3. 플로팅 버튼
Effects의 shadow에서 세부 조절로 은은한 그림자를 만들 수 있음
적용했던 모양이 변하지 않도록 Fixed로 고정
4. 복합 UI
타이틀, 설명, 버튼이 있는 복합 UI를 제작해 보자.
- 타이틀과 상세 설명을 입력하고 오토 레이아웃 적용, 왼쪽 정렬, 패딩값 조절
- 버튼을 만들고 오토 레이아웃 적용, 간격 조절
- 1번과 2번 프레임을 오토 레이아웃 적용, 간격 조절
- 상세설명이 길어져도 버튼이 너무 옆으로 가지 않게 Fixed로 길이 고정 -> 타이틀도 똑같은 값으로 고정
- 전체 프레임 복붙
- 전체 프레임 + 복사된 전체 프레임 오토 레이아웃 적용
- 오토레이 아웃 적용하면 간격이 0임 -> 간격 조절
- 버튼이 우측 하단에 위치할 수 있게 align 우측 하단으로 조절
실습2 - 썸네일 카드 UI 만들기
사각형(카드) 안에 사각형(썸네일) 안에 또 사각형(인기 콘텐츠)
텍스트 (고양이)
텍스트 (나만 없어 고양이)
텍스트(#태그1) 텍스트(#태그2) 텍스트(#태그3)
텍스트는 Frame - Fill을 사용해서 카드 크기에 맞게 작성되도록 설정했고
태그도 카드에 맞춰 작업
오 Auto layout에서 엔터표시↩️를 누르니 튀어나오던 태그가 아주 그냥 깔끔하게 밑으로 내려간다.
😼😼 실습 완성본 ~~~😼😼
실습3-1 -네비게이션 메뉴
오토 레이아웃을 활용한 컴포넌트 관리는 앱바, 네비게이션 바, 홈화면 메뉴 등 일정한 레이아웃을 유지하며 개체 변경이 빈번할 때 필요하다.
실습을 통해 어떻게 오토 레이아웃을 활용하는지 확인해 보자.
🏠 홈
우선 이렇게 홈을 만들 것임
- 집모양을 위해
Rectangle 6제작 + 펜툴로 지붕Vector 2제작 - radius와 크기, 위치 조정
- Union으로 집모양 결합
- 문을 나타내기 위한
Rectangle 7사각형을 만들고 radius 조절 - 문(
Rectangle 7)과 집(Union)을 선택하고 Subtract로 빼면 요런 아이콘이 나오고 - 텍스트
홈을 아이콘과 오토 레이아웃 처리 ! 그리고 위아래 패딩값을 적당히 조절 - 그리고
메뉴 1높이를 Fixed로 고정하자. 메뉴 1을 복붙해서 오토 레이아웃 적용하고메뉴 2를 계속해서 만들어 보자.
🔍 검색 👤 마이 ≡ 전체
- 원을
Shift+x로 Fill과 Stroke 반전 - 사각형 radius로 둥글게 + 45도 회전
- 두 개체를
Union으로 묶고 가운데로 조절
- 메뉴 3과 4는
Flatten으로 묶어줬다.
네비게이션 메뉴 완성!!!!!
마무리로 shift를 사용해 모두 선택하고 Fill을 적용해 프레임에 맞춰주면 이렇게 균일하게 늘어난다.
실습3-2 썸네일 메뉴
이미지가 들어갈 원과 텍스트를 오토 레이아웃을 활용해 8개의 썸네일을 만든다.
이미지를 각각의 원에 붙여넣고 사이즈 조절하기
- Constraints에서 가운데를 선택하고
- 좌우 패딩값을 20으로 수정하면
저 썸네일들을 담고있는 프레임의 좌우 패딩값이 20씩 적용됐음을 확인 가능하다 !
⭐ 이해하고 넘어가기
- 위 과정까지 진행한 후에 27로 적용했던 간격을 auto로 수정한다.
- Fixed로 되어있던 두 줄의 썸네일 메뉴 프레임을 Fill로 바꿔준다.
큰 레이어(카테고리 메뉴) 안에 각각의 두 썸네일 메뉴가 좌우 간격 20을 유지하면서 8개의 썸네일들의 간격이 auto로 조정함
이게 무슨 얘기냐면 저 큰 레이어가 길어지거나 작아질 때, 간격을 맞춰서 알아서 조정한다는 것임
➡️ 그럼 디스플레이 크기에 따라 늘어나거나 줄어들어도 저 틀을 유지하면서 조정되겠다 와우와우와우
#피그마 #figma #피그마사용법 #디자인 #UX #UI #메타코드M #메타코드 #그래픽 #정보공유 #디자인추천 #취업준비 #취준생 #오토레이아웃 #프로토타입 #프레임 #메타코드M #메타코드 #피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠
