1단계: 컴포넌트 이해하기
•
컴포넌트 설명을 정독합니다.
•
특히, 컴포넌트의 역할, 규칙, 디자인 원칙들 부분을 내용과 제공 예시들을 참고로 캡처해 나만의 노트를 정리해보시는 것을 권장 드려요.
2단계: 컴포넌트 예시 따라 그리기
1.
피그마 파일을 엽니다.
2.
Actions 페이지나 프레임을 생성합니다.
3.
디자인 수치 확인 후 컴포넌트를 직접 만들어 봅니다.
•
Figma의 눈금과 수치를 사용해 간격, 사이즈, 폰트 크기 등을 정확히 재현해봅시다.
4.
미리 다운받았던 예시 피그마와 비교하며 수치와 배치가 동일하게 만들어졌는지 확인합니다.
5.
강의 내용을 참고하여 추가 요소를 적용해봅시다.
•
Material Icons를 활용해 아이콘을 추가합니다.
◦
예: 버튼 안에 화살표 아이콘 넣기
•
스타일 지정: 자주 사용하는 색상(Color), 글꼴(Text), 효과(Shadow)를 스타일로 저장해 적용합니다.
•
오토 레이아웃 적용
◦
버튼이나 카드와 같은 컴포넌트에 오토 레이아웃을 설정해 간격과 정렬이 자동으로 유지되게 합니다.
3단계: 실습 과정 정리하기
1.
나만의 정리 페이지에 컴포넌트들을 종류별로 구분해 정리합니다.
2.
비교 및 메모 작성
•
Material Design 예시와 직접 만든 컴포넌트를 나란히 배치합니다.
•
만든 과정에서 배운 점이나 개선할 점을 간단히 메모합니다.
3.
최종 점검
•
만든 컴포넌트가 정확한지 간격, 크기, 정렬을 다시 한번 확인합니다.
퀘스트 제출하기
•
하단의 구글 폼 형식에 맞게 제출해주세요.
