피그마 활용법(2)_복습2

#복습1
오전부터 진행한, 피그마 활용법 복습시간.
그간에 배웠던 피그마 활용법(2) 3주차 숙제에 대해서 복습을 진행했다.
당시 숙제를 진행했을때는 '이제는 제법 알것 같네' 하고 생각했던 것 같다. 오늘 복습 전까지도.
다시 진행 해보려고하니, 어코디언 부분과 버튼 부분에서 막혔다.
복습하면서 추가로 머리속에 더 들어온 인풋이 있다. 정리하자면, 오토레이아웃 프레임을 잘 감싸야지 화면 안에서 자유롭게 반응한다는 것.
이건 원래 알고 있는 개념이지만 막상 화면에서 구현하다보면 되돌아 봐야지 깨닫는다.
프레임 안에 프레임(오토레이아웃) 안에 내용. 그래야 가로,세로 스크롤을 자유롭게 먹일 수 있다.

#복습2 (디자인시스템 : 버튼컴포넌트)
UI컴포넌트중 중요한 비중을 차지하고 있는 버튼 컴포넌트를 복습해 보았다.
가장 많은 시간이 걸리고, 의외로 만들기가 복잡하다. 입력하는 수치가 가로,세로 마다 다르다.
프로퍼티 적용도 3가지 정도 적용되는듯 하다.(위계, 크기, 상태)
primary / large / default
secondary / medium / pressed
tertiary / small / disabled
label font - 2px 씩 차이
container padding - 4px 씩 차이
각 프로퍼티마다 묶어주면 완성이다. 이 과정이 꽤나 많이 소요되는 듯 하다.
색상을 대충 선택해서 만들어보았더니 대략 1시간 정도 걸리는 것 같다. 아직 익숙하지 않기 때문인듯.
좀 더 여러번 만들어서 손에 익숙해지도록 연습해야겠다. 

(좌)기억하고 있는지 연습 / (우) 강의 보면서 다시 만들기-버튼만드는 순서

(좌) 9개의 버튼을 복사해서 옆으로 X2 반복 / (우)Properties 값을 3개 먹여줌(priority, size, state)

#WRS
당근앱 사용자 시나리오, 홈화면을 클론했다.
시간을 많이 쓰면서 비효율적인 작업을 진행했던 처음 클론과는 많이 발전한 속도였다. 
앞으로도 계속해서 진행하면 좀더 요령있게 깔끔하게 컴포넌트를 제작할 수 있을 것 같다.
오늘은 그리드를 배경에 깔고 진행했다. 보기에는 정신없어 보이지만, 배열할 때 유용했다. 앞으로도 적응하기 위해 계속 써봐야겠다.

아티클 진행을 계획했지만, 오늘은 하지 못했다. 좀 더 시간 분배를 섬세하게 짜야할 것 같다. 
양질의 좋은 아티클을 서치하는데 많이 시간이 걸렸다. 유용한 사이트를 더 찾아 봐야겠다.
이번주는 하얗게 불태웠다. 원래도 하얗게 태우며 달려왔었는데, 유독 빠듯하게 달린것 같다. 좋았다.
다음주도 열심히 계획대로 진행할 수 있기를 . 

"버릴 것은 과감히 버리고, 취할 것은 확실하게 취하자." -송민진(UXUI_1기)