[인프런 워밍업 스터디 1기 디자인] 4주차 발자국

마지막 주의 수업은 시간가는지 모르고 작업했던 것 같다.지금까지 만들었던 컴포넌트들을 활용하여 서비스 화면을 제작하는 수업이었는데그동안 컴포넌트들을 만들면서 이부분은 왜 이런식으로 제작하는걸까? 라는 의문점이 있던 것들이 실제 화면에 적용하면서보니 아, 이래서 여기에 아이콘 영역이 들어갔던 거구나, 그래서 이 기능을 사용했던 거구나하면서 이해가 되었다.실 적용까지 해본 상태에서 다시 강의를 처음부터보면 설명하는 내용이 더 이해가되고 받아들여지는 부분이 훨씬 많을 것 같다. 강의를 처음부터 끝까지 한번 더 복습해야할 것 같다. 강의를 마무리하며강사님인 볼드님 덕분에 완강할 수 있었던것 같다. 공개된 강의도 너무 알차지만 피그마 업데이트 내용도 강의로 제작하여 꾸준히 업데이트 해주시고 특히 토요일에 진행해주신 스페셜 강의때도 열정이 어마어마하셨다.참여자들에게 좋은 정보를 알려주시기위해 많이 준비도 많이 해와주신 열정이 너무 감사했다.그 열정에 보답하기위해 나도 열심히 미션하고 강의를 보았다.워밍업 스터디를 참여하지않았더라면 2-3일에 한번씩 강의를 보았을터인데 참여하게되어서 꾸준히 볼 수 있었다.인프런 워밍업 스터디를 신청하기전까진 걱정이 많았는데 그런게 무색할정도로 참여하길 정말정말 잘한 선택이였다.

[인프런 워밍업 스터디 1기 디자인] 3주차 발자국

정신없지만 재미있었던 이번 3주차modal 컴포넌트에 slot을 이용하여 다양한 디자인을 제작할 수 있는 점이 신기했다.예전에 프로젝트 진행할때에는 2개의 버튼(A+B)이 붙어있는 버튼을 컴포넌트로 제작하여 인스턴스로 사용하였는데 slot을 이용하니 그럴 필요가없었다. slot에 타입별로 만들어둔 버튼을 불러와 사용하니 간편하니 좋았다. 다른 파트들은 기존에 작업하던 방식을 바꿔야하는 것이였고, navigation 파트는 어찌보면 평소의 내가 궁금했던 부분들이 제일 해소되었던 파트였던 것 같다.늘 이렇게하는게 맞나? 싶었던 것들이 정리되는 기분이였고 지금까지 들었던 강의중에 제일 재미있게 들었던것 같다.특히 캐러셀을 반응형으로 제작하여 크기를 줄이고 늘렸을때 모든것이 내가 그동안 원했던 대로 되는 순간 너무 감격스러웠다,, 지금까지는 전체 그림을 그리기위한 재료들이였으나 다음주에는 적용해보면서 실제 페이지를 제작하니 더 재미있을것 같다. 저번 주부터 반복되지만 헷갈리는 것들state / statustype/style색상 선택시 bg에서 선택하는줄 알았는데 bg/interactive에서 선택하는 것

[인프런 워밍업 스터디 1기 디자인] 2주차 발자국

어질어질한 2주차이번 2주차는 UI component를 제작하였는데 정신없이 따라서 작업하기에 바빳던거같다 ..분명 하루 1시간 강의인데 실 작업은 3시간 이상씩 걸렸다.이번 주 수업을 들으면서 생각한 점은, 그동안 property기능에 대해서 나는 정말 10%정도밖에 활용을 못하고있던 것 같다. 근데 그마저도 엉망진창으로 사용하고있던 ..A 컴포넌트와 B컴포넌트를 결합해서 nested instance를 사용하는 순간 멘붕이 온다.해당 컴포넌트들의 property를 다 불러와서 오른쪽 디자인 패널에 뜨는데, 아직 보는 법이 낯설어서 여러개가 노출되면 눈이 빙글빙글 돌아버린다 ㅜㅜ기초공사(컴포넌트)를 잘 다지면 활용도가 무궁무진하고 나중에 수정할때 쉽고빠르게 수정이 가능하기때문에 빨리 익숙해져야할거같다. 작업한 전체 컴포넌트들을 보면 뿌듯하지만, 온전히 내가 모든걸 이해하고 작업된게 아니라서 씁쓸하다.

[인프런 워밍업 스터디 1기 디자인] 1주차 발자국

워밍업 스터디에 참여하게된 이유작년 여름, 배리어블 업데이트 이후 많은 사람들이 해당 기능을 필수로 알아야한다고 했지만토큰에 대한 개념이 부족하기도하였고, 기존에 사용하던 스타일을 통해서도 충분히 작업이 가능했기 때문에 쉽사리 사용하지 못했다.시간이 생긴 지금, 개념을 정확히 알고 배리어블을 사용해보고싶었다.인스타 팔로우하던 볼드님이 강의를 진행한다고 하셔서 바로 신청하게되었고 신청하길 정말 잘한 것 같다.강의를 보며 공부하면.. uiux 직군으로 이직하길 마음먹고 독학으로 피그마를 공부하던 시절과 함께 회사에 사수가 없어 혼자서 고군분투하며 작업하던 나날들이 떠오른다 .. ㅠㅠ 더 열심히 공부해야하는 이유가 늘 떠오른다.이직할때는 개념을 완벽히 이해하고 다양한 기능을 사용하여 더 빠르게 작업 할 수 있는, 스킬업이 되어있는 상태였으면 좋겠다. 기억하고 싶은 부분들색상 배리어블의 구조Primitive : 색의 원시값을 저장해 놓은 디자인 언어의 기본 값Theme : 시멘틱 칼라로 브랜드 모드를 적용하기 위한 목적Semantic : 시맨틱 칼라로 라이트/다크 모드를 적용하기 위한 목적색상 배리어블 등록시border의 색상은 text와 색상이 겹치기 때문에 색상이 살짝 빠진 색상으로 선택해준다. 스타일은 지우기 색상 배리어블 등록 후 적용하려보면, 스타일 목록과 함께 노출되기 때문에 원하는 색상을 찾을때 너무 복잡하기때문에 등록된 스타일은 지우는 것이 좋다.플러그인apply variables혹여나 배리어블을 적용하지 못했다면, 하나하나 눌러서 확인하지 말고 해당 플러그인을 사용하여 자동으로 적용시킬 수 있음styler한번에 text styles 등록 가능frameall선택한 layer들에 fram이 씌워짐색상이 있는 아이콘을 다른 아이콘으로 변경하는 경우, 전체 색상이 변하지 않는 이유A는 1개의 vector가 색상 1개만 먹히기 때문에 B의 2개의 vector중 1개만 색상이 변함[해결 방법]B의 vector를 union을 사용하여 하나로 만들어주면됨 ** 대신 이름은 동일한 이름으로 변경해줘야함합치기 전에는 stroke에 색상이 채워졌었는데, 합친 후에는 fill로 색상이 채워짐