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

브랜드별 색상을 적용하는 실습과 반응형 사이즈를 배리어블에 등록하고 한번에 바꾸는 실습을 했다.볼드 튜터님이 준비 많이 하신게 느껴지고 러너님들에게도 많이 배운 토요일 특강도 있었다. 4주차에 느낀 점강의 실습 하다가 빼먹은 배리어블이 있을 때, 추가해서 작업하는 모습을 보며 뿌듯했다.실제 작업 하면서 컴포넌트 만들어서 수정하니 편하다.컬러/폰트 등록하고 정리된 페이지 작업을 하게 되어 흐믓. (이렇게 작업하니 코딩할 때도 훨씬 편하다.)배리어블 시스템만 잘 등록하면 일괄적으로 바꿀 수 있어 편하다. 배운 점등록한 컴포넌트를 활용해서 다크모드와 반응형, 브랜드별 적용하기를 실습했다.테마에 등록한 브랜드 모드 한번에 적용하기프로토타입 가로 스크롤 할 때 '왜 난 잘리지' 했던 부분은 'Fill'로 해주면 된다. (해결돼서 속이 시원)반응형 베리에블 불린은 레이어 - 눈 에서 '마우스 오른쪽 클릭'해서 연결 시켜준다. (너무 헷갈린다)특강에서 배운 챗GTP문서화 할 때 좋음.'상황별 컴포넌트 선택 가이드'라는 것도 가이드로 제공하면 좋다.예시문으로 알려주신 입력 내용을 유용하게 사용할거 같다.누적된 경험으로 배워 이론 기초가 약한 나에게 딱이다. 아쉬웠던 점아직 Fill/Hug/Fixed 가 헷갈린다. 바꿔보면서 적용하고 있다.토큰이랑 혼용해서 사용할 땐 음... 앞으로 바라는 점색상/간격/글자 등 처음부터 정리하려면 많은 경험이 있어야 할거 같다. 작은 것부터 적용해서 하나씩 익혀가자.'강의 수강-미션' 하다보니 5월이 후다닥 지나갔다.처리 속도 빠르고 이것저것 다양하게 해볼 수 있어서 좋아했던 피그마에서 체계적이고 편리하고 시간도 단축할 수 있고 시스템적인 디자인툴로 사용할 수 있을 거 같아 두근두근. 잘 활용할 수 있게 다시 강의를 봐야겠다.인프런, 볼드 튜터님, 미션 할 때 많은 도움 받은 1기 러너님들 모두 감사합니다.

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

2주차에 밀린 진도를 따라가느라 바빴던 3주차였다.3주차에는 그동안 작업한 것을 가지고 조합해서 화면을 구성하는 요소를 만드는 내용이 많아 재미가 있었다.배운 점실제로 많이 쓰이는 메뉴, 토스트 알림, 모달 팝업을 만들면서 반복적인 컴포넌트 작업을 하면서 익숙해졌다.로딩이미지라고 부르는 스켈레톤 애니메이션, 진행률 막대기 표현도 배웠다. 전에는 그냥 계산기로 색깔 막대기를 늘려 사용했는데, 이런 방법이 있었다니!플러그인 'Find / Foucs'를 통해서 빠르게 찾는 방법도 배우고,게시판 작업을 할 때 늘 고민하던 빈 칸 채우기 를 쉽게 해주는 '한글더미'라는 플러그인도 알게 됐다. 아쉬웠던 점모달 팝업 활용에서 배운 다양한 폼들이 어려웠다. 복습은 나중에 ...아이콘을 아웃트라인으로 바꿨더니 등록된 색상값이 적용이 잘 안돼서 일일이 찾아서 바꿨는데 하면서 '이 방법뿐인가' 라는 의문이 들었다. 프로퍼티 등록할 때 Type과 Style을 언제 쓰는지 아직 헷갈린다. 앞으로 바라는 점폰트 배리어블이 가능하다니, 신기했다. 따끈한 업데이트 내용이라는데 어렵기만 하다.

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

2주 차가 되니 긴장감도 약해지고 미션도 밀리고 있다. 이러다 완강이 어려울지도 모르겠다는 걱정이 든다. 마음을 다시 잡아보자.좋았던 점반복적으로 다양한 실습을 함으로써 컴포넌트 등록하는 순서를 익힐 수 있었다. 아쉬웠던 점점점 마음이 느슨해져서 밀리고 있다. 배운 점아바타, 아코디언, 배지, 툴팁 구분 선, 칩, 카드 레이아웃, 테이블 등 컴포넌트 만들기.아이콘을 완전히 깨주지 않으면 사이즈 변경 시 stroke가 유지된다. 굵기 유지하게 하려면 Scale(K)로 변경해 준다.완전히 깨면 나중에 수정이 어려움, Line을 유지한 Union으로 있으면 수정이 용이함. 취사선택하면 될 거 같다.앞으로 바라는 점기본이 되는 컴포넌트를 만들어서 조합형으로 만드는 과정이 아직 익숙하지 않아 많은 실습이 필요할 거 같다.

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

시작4주 동안 잘 해보자.피그마의 기능/장점을 이애하지 못하고 '빠르게 제작/수정 여럿이서 공동작업이 용이한 툴' 정도로 사용하고 있었다. 그러다 이 강의를 신청하고 동료와 스터디를 하려고 하던 참에 인프런 워밍업 스터디 클럽이 진행된다고 해서 신청했다.무료버전만 사용하다 보니 variable을 안써봤는데 교육용으로 계정을 준다고 한다.네이밍 짓기 너무 어려운데 알려준다고 한다.4주 열심히 따라가다 보면 완강도 할 수 있을 거 같았다.이런 이유로 나는 워밍업 클럽을 신청하게 됐다.수업 노트 Libraries Color 만들기tailwind color palettes 를 이용해서 색을 만들어줍니다.color style guide를 이용해서 등록된 라이브러리 색을 가이드화 시켜줍니다.만들어진 스타일 가이드에서 필요한 색만 남기고 삭제 해주고 사용하세요. 컨버스에 있는 컬러팔레트와 스타일가이드는 지워주세요.플러그인 -> color style guide 를 실행시켜줍니다. variable collection 만드는 순서primitive Collection를 만들어서 hex 코드를 넣어주세요.semantic Collection 을 만들어서 libraries 에서 색상을 찾아서 연결 시켜주세요.primitiveblue, green, yellow, red, gray ...색의 원시값(Hex)을 저장해 놓은 디자인 언어의 기본 값blue 100/500, red 100 등 이렇게 등록 themebrand, success, danger, info, warning, neutral ...상황에 맞게 등록 함 semantictext, icon, bg, border의미에 맞게. Color Scoping: 색의 범위를 지정해 줌.bg : frame 선택icon: shape 선택text: text 선택border: stroke 선택 배리어블을 다 등록한 후에는 local에 있는 스타일은 지워주세요.Icons단색 아이콘은 vector->union 으로 합쳐주세요. 그러면 Fill로 색상을 바꾸기 좋아요. PluginAutometic Style Guides: Generate Swatches from Variables 배리어블에 만들어진 내용들을 스타일 가이드 형식으로 만들어줘요.Foundation color generator: ddTailwind Color Palettes: 색을 만들어준다. (필요 없는 색은 지워준다.)Color Style Guide : 등록된 라이브러리 색을 가이드화 시켜주자.typography style guide: 글자 스타일을 등록했다면 스타일 가이드를 만들자.Batch styler: 스타일 등록할 때 글자 지정을 잘 못했다면 일일이 바꾸지 말고 플러그인을 쓰자. GridFrame 에서 Auto Layout 적용 후 반응형 Min-width / Max-width 지정할 수 있어요.회고Variable 등록하기는 자면서 들었나봐요.미션1은 자면서 들었나 싶을 정도로 엉뚱하게 제출. 튜터 볼드님의 코멘트를 보고 수업 노트 적어가며 강의를 다시 들었다. 다른 학습자분들이 올려주신것도 보면서 미션을 수행하니 이해가 잘 됐다.토요일 저녁 8시 특강때 궁금했던 점 알려주시고 새로운 내용도 알게 되어 정말 좋았다. 네이밍 할 때 늘 고민되던 것들을 다른 사람들은 어떻게 사용하는지 어디서 찾아볼 수 있는지 팁도 알게되어 알찬 시간이였다.막 사용하던 피그마는 그만이미 피그마를 '막'사용하고 있어서 강의 내용이 쉬울거라 생각했었는데, 정말로 막 사용하고 있었다. ㅠ-ㅠ기초부터 차근차근 배워가고 있다. 프로젝트 진행 시 시스템 가이드를 만들어 '이거 수정 해주세요' 했을 때 파일들 다 열어서 수정하지 않고, 한번에 '수정-적용-배포' 할 수 있는 모습을 그리며, 남은 3주도 잘 따라가보자.