마감기한은 다가오는데 작업속도가 생각보다 따라주지 않아서 너무 답답했다. 하다 보니 사진도 괜찮은 거 넣고 싶고 레퍼런스로 할 만한 것들을 찾는데 시간을 보낸 이유도 있지만, 오토레이아웃이 아직 능숙지 않아서 버벅거리는데 딜레이가 많이 되었다. 아우.. 정말.. 이 오토레이아웃 녀석은 언제쯤 자유롭게 가지고 놀 수 있을까. 정말 강력한 기능이고, 또 강력하게 나를 좌절시키는 오토레이아웃.. 내일은 꼭 어떻게든 완수해서 제출하는 것이 목표다. 너무 피곤하다. 일단 자자.
오토레이아웃은 진짜... 잘 모르는 상태에서 오토레이아웃 된 작업물을 접할 때 정말 혼란스럽다..
아무리 유튜브 또는 블로그를 찾아 공부한다고 해도 모르는 부분이 항상 있기 마련. 다시 정리해보는 시간을 가져본다. 원리를 이해하면 피그마 작업효율이 두 배 올라간다!
오토레이아웃 : 컨텐츠에 따라 자유롭게 변형되는 프레임 (피그마는 크기에 따라 사이즈가 유연하게 늘어나는 리사이징 기능을 제공한다.)
오토레이아웃의 목적 : 반응형 대응 디자인
버튼을 오토레이아웃으로 만들 때,백그라운드 없이 '텍스트' 만을 가지고 오토레이아웃을 한다. 그러면 텍스트에 '프레임이 씌어져서' 백그라운드가 되어주기 때문에 필요 없음.
오토레이아웃 꿀팁 : 블록을 조합하듯 만들기, 요소를 덩어리 단위로 쪼개서 보고 가장 작은 단위부터 만들기
오토레이아웃 리사이징 (컨텐츠과 컨테이너는 상대적인 관계)
오토레이아웃 프레임에서 기준보다 바깥에 있으면 컨테이너, 안에 있으면 콘텐츠라고 본다면.. 오토레이아웃 프레임 생성 시, 상위 프레임 사이즈가 조정될 때, 콘텐츠와 컨테이너가 어떻게 반응해야할지 설정하는 속성
|ㅡ| Fixed width (모든 경우에 뜸)
> < Hug (안에 컨텐츠가 있어야 만 뜸- 아래 예시 : 파란색, 베이지 박스에만 뜸)
< > Fill container (밖에 컨테이너가 있어야 만 뜸)
오토레이아웃 리사이징 속성 1. Hug content : hug(감싸안다) + content(콘텐츠) :컨테이너가 콘텐츠를 감싸안는 속성임으로 안에 콘텐츠가 있어야 뜬다. 컨테이너에 hug contents를 적용하고 콘텐츠 상자를 늘리면 늘어나는 콘텐츠 상자 크기에 맞게 컨테이너가 감싸줌. 2. Fill container : Fill(채우다) + container(컨테이너) : 콘텐츠가 컨테이너를 채우는 속성, 즉 바깥에 컨테이너가 있어야만 뜬다. 콘텐츠에 fill container를 적용하고 컨테이너 상자를 늘리면... 그에 맞게 안의 콘텐츠가 컨테이너 상자를 채워줌. 3. Fixed Size : Fixed(고정하다) + Size(크기) : 컨테이너와 콘텐츠 모두 고정된 상태, 즉 고정임으로 상대적 개념이 아닌 모든 경우에 뜬다. (고정되어 늘려도 안변함)
