오늘 계획의 진척도
오전에는 강의를 들었다. 예상했던 계획보다 더 많이 들을 수 있었다. 오후에는 어제 불참하셨던 분이 오늘도 참석하기 힘들 것 같다고 하셨는데 참석하셔서 진행하지 못 했던 부분들을 진행할 수 있었다. 어제보다 컨셉을 잡고 진행해서 러프디자인에서 본격적인 디자인으로 넘어갈 수 있었다. 내가보기에는 완성까지 70%정도 남아서 시간이 조금 빠듯할거 같다. 같은 작업물을 동시에 진행하다보니 스타일이 팀원마다 스타일이 달라서 통일감을 주기 어려운거 같다.
팀 프로젝트에 들어갈 캐릭터
오늘 새롭게 알게된 내용
프레임과 그룹의 차이
프레임으로 묶으면 각 요소에 영향을 주지 않고 그룹으로 묶으면 각 요소를 통일 시킬 수 있다.
컨스트레인트의 정확한 개념
부모 컨테이너와 자식 컨테이너 제한
새로 알게된 컨스트레인 기준
left and right - 좌우 기준
top and bottom - 위아래 기준
center - 부모컨테이너 중간 기준
scale - 부모컨테이너 높이 비례
리사이징
프레임을 오토레이아웃으로 만드는 경우
부모 컨테이너나 자식컨테이너의 사이즈에 따라 영향을 서로 영향을 줌
리사이징 종류
fixd - 고정
hug - 부모 컨테이너만 사용가능, 자식 컨테이너 크기에 맞춤
fill - 자식 컨테이너만 사용가능, 부모 컨테이너 크기에 맞춤
분기점
모바일, 태블릿, 웹 3가지
태블릿 사용자가 많지 않음 하지만 온라인 강의 쪽은 태블릿이 많이 사용됨
그리드
8포인트 - 8의 배수 단위로 여백이나 크기 조정
8의 배수를 사용하는 이유 - 2나 3으로 나누거나 곱할 때 짝수가 된다.
그리드 기둥 = 칼럼 = 유닛(콘텐츠를 정렬하는 기준선)+거터(유닛과 유닛 사이의 여백)
960 12칼럼 그리드 유닛 60 / 거터 20
1200 12 칼럼 그리드 유닛 76 / 거터 24
1440 12 칼럼 그리드 유닛 96 / 거터 24
적응형, 반응형
적응형 - 해상도가 변해도 디자인은 변하지 않음
반응형 - 해상도가 변하면 디자인이 실시간으로 변함
반응형 그리드를 볼 수있게 해주는 플러그인 Responsive
디자인키트와 UI키트 차이점
디자인키트가 레시피라면 UI키트는 재료다.
파운데이션
구성 - 색상, 서체, 아이콘, 레이아웃(간격, 여백, 곡률, 그리드, 고도)
컬러스타일
색을 추천해주는 플러그인 Coolors
스타일을 자동으로 추가해주는 플러그인 Styler
색상 스타일을 정리해주는 플러그인 Auto Documentation
오늘 어려웠던 내용
리사이징 움직임
리사이징 종류에 따라 움직였을 때 어떤 반응을 보이는지가 달라지는데 숙제를 하면서 헤맸었다. 아직도 리사이징 종류에 따라 어떻게 변화하는지 헷갈린다.
