오늘 한일
-디자인 카타 작성
-피그마 기초 강의 2강 완강 및 과제 제출
-커리어세션
내일 할일
-피그마 기초 강의 3강 완강 및 3주차 과제 제출
-피그마 기초 강의 3강 복습
-머티리얼 디자인 1회독오늘의 강의 내용
(2강)
피그마를 다루기 위해 반드시 알아야 하는 핵심 개념인
프레임과 프레임을 다루는 오토레이아웃,
컨스트레인트 등 핵심 기능 알아보기오토레이아웃
:레이어를 쌓고, 프레임을 배치, 정렬하는 피그마의 핵심 기능
->레이아웃을 더 편하고 빠르게 쌓아 올리도록 도와주는 기능(유연함 제공)
리사이징
:오토레이아웃 간의 규칙
->프레임은 Fixed 상태, 프레임을 오토레이아웃으로 감싸는 순간 다른 사이즈 값 생성
프레임(=컨테이너)
:코드 블록을 만드는 기능(피그마), 실제 화면으로 인식하는 개체
컨스트레인트(제약, 제한)
:오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한
2강은 피그마에서 오토레이아웃과 컨스트레인트, 리사이징을 활용해 조건에 맞춰
프레임을 움직이는 과제가 주어졌는데 너무 헷갈려서 꼭 내일 복습을 해야겠다 다짐했다,,
프레임으로 묶는 것과 오토레이아웃으로 묶고 비율을 변경하는 차이점에 대해 복습하며
생각해 봐야겠다☆☆☆
자식이 고정값이면 부모는 HUG
자식이 부모에 맞게 늘어나야 한다면(FILL) 부모는 고정값
부모가 자식을 감싸기로 한다면(HUG) 자식은 고 정값
(3강)
UI 디자인 환경과 컴포넌트 개념을 익히고 기능 및 형태에 따라 분류, 디자인
시스템 이해하기
파운데이션:UI를 구성하는 기초 재료
컴포넌트(구성품):파운데이션의 조합
파운데이션 구성
-색상, 서체, 간격(여백), 곡률, 그리드, 고도(높이), 아이콘
컬러 스타일
:디자인에서 사용할 색상을 모아두는 팔레트
-컬러 스타일은 기본적으로 2~3가지 색상으로 제작
-포인트 컬러 한 개, 글자와 배경은 흑백 조합을 사용하는 것을 추천
->화면을 단순하게 유지하며 중요한 부분에 색상을 넣어 주목 용이
오늘의 집 컬러 스타일
UI디자인에서 컴포넌트
:파운데이션을 조합해 만든 디자인 단위의 개념
마스터 컴포넌트
:반복적 디자인을 빠르게 하기 이해서 디자인을 복사해서 사용, 복사된 디자인을 한번에 수정, 편집할 수 있도록 해주는 기능
마스터 컴포넌트는 원본이기에 변하지 않음
->수정을 해도 변하지 않는다는 것 X 내가 변경하지 않는 이상 변하지 않음을 의미
마스터 컴포넌트를 복제->인스턴스 생성
*인스턴트는 마스터 컴포넌트의 속성을 그대로 이어 받음, 수정 불가능
인스턴스(실제 디자인에선 컴포넌트라고 함)_
마스터 컴포넌트보다 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않음
->인스턴스를 수정하는 것이 더 우선 적용됨
->원칙은 컴포넌트에서 수정 후 업데이트해줘야 함
->덮어쓰기 된 인스턴스를 없애야 업데이트가 반영됨
->컴포넌트를 삭제해도 인스턴스는 남아있음, 그러나 편집,수정은 컴포넌트를 복구해야 가능
용어도 많이 나오고 내용도 헷갈리는게 많아졌다
컴포넌트 복사본인 인스턴스는 수정 불가능하다 하셨는데,,
인스턴스와 컴포넌트의 관계에 대해 더 생각해 봐야겠다
