Common buttons – Material Design 3

Extended FAB – Material Design 3

1단계: 컴포넌트 이해하기

• 컴포넌트 설명을 정독합니다.
• 특히, 컴포넌트의 역할, 규칙, 디자인 원칙들 부분을 내용과 제공 예시들을 참고로 캡처해 나만의 노트를 정리해보시는 것을 권장 드려요.

2단계: 컴포넌트 예시 따라 그리기

1. 피그마 파일을 엽니다.
2. Actions 페이지나 프레임을 생성합니다.
3. 디자인 수치 확인 후 컴포넌트를 직접 만들어 봅니다.
   • Figma의 눈금과 수치를 사용해 간격, 사이즈, 폰트 크기 등을 정확히 재현해봅시다.
4. 미리 다운받았던 예시 피그마와 비교하며 수치와 배치가 동일하게 만들어졌는지 확인합니다.
5. 강의 내용을 참고하여 추가 요소를 적용해봅시다.
   • Material Icons를 활용해 아이콘을 추가합니다.
     • 예: 버튼 안에 화살표 아이콘 넣기
   • 스타일 지정: 자주 사용하는 색상(Color), 글꼴(Text), 효과(Shadow)를 스타일로 저장해 적용합니다.
   • 오토 레이아웃 적용
     • 버튼이나 카드와 같은 컴포넌트에 오토 레이아웃을 설정해 간격과 정렬이 자동으로 유지되게 합니다.

3단계: 실습 과정 정리하기

1. 나만의 정리 페이지에 컴포넌트들을 종류별로 구분해 정리합니다.
2. 비교 및 메모 작성
   • Material Design 예시와 직접 만든 컴포넌트를 나란히 배치합니다.
   • 만든 과정에서 배운 점이나 개선할 점을 간단히 메모합니다.
3. 최종 점검
   • 만든 컴포넌트가 정확한지 간격, 크기, 정렬을 다시 한번 확인합니다.