4주차 [피그마 배리어블을 활용한 디자인 시스템 구축하기] 발자국 😘

일주일 동안의 나의 게으름 타파 작전!!bold님의 강의 [피그마 베리어블을 활용한 디자인 시스템 구축하기]수강 4주차(베리어블을 활용한 컴포넌트 조합해서 페이지 만들기/반응형 만들기/모드 적용하기👍) 이번주 나의 강의 ☑모드를 활용한 반응형 디자인/ 다중언어 화면 만들기 / 다크모드✅ 로컬 베리어블에 멀티 브랜드 모드를 등록하기 ✅ 각 브랜드마다 브랜드 고유 색을 나타내기✅ 각 브랜드마다 브랜드 다크모드 만들기-> 브랜드의 구조에 대한 설명과 앞으로 만들어 나갈 브랜드들에 대한 설명을 듣고 실습을 하게 돼서 이해가 빠르게 된 것 같다. 그리고 멀티 브랜드용 다크모드를 간단한 조작으로 만들 수 있어서 너무 감동이었다. 모드를 활용한 반응형 적용이나 다중어 화면 만들기도 실제로 배울 수 있어서 좋았던 것 같다. 베리어블의 활용이 얼마나 중요한지 깨닫게 되는 한 주였다.😋😋😋힘들게 만든 컴포넌트 적극 활용✅ 컴포넌트를 활용하여 어드민 페이지 만들기✅ 다크모드 버전 만들기-> 그동안 만들어 놨었던 컴포넌트들을 활용해서 어드민 페이지를 만들었는데 확실히 컴포넌트를 미리 만들어 두고 조합하는 단계라 시간이 많이 절약되는 것 같았다. 이래서 컴포넌트를 만들어 두는구나 ㅋㅋ🤩다 만들어진 페이지에 클릭 한번으로 다크모드 전환 멋졌다❤ 베리어블 등록할 때는 헷갈리기도 했는데 이렇게 한꺼번에 자동으로 적용하려고 그랬나 보다. 다크모드와 반응형 반복 실습✅ 컴포넌트를 활용하여 이러닝 페이지 만들기✅ 다크모드 버전 만들기✅ 반응형 모드 버전 만들기-> 다크 모드와 반응형 만들기를 반복해서 실습할 수 있었다. 한 번만으로는 부족한 것이 사실이라 나는 반복해서 나오는 게 도움이 되었다. 그리고 실무에서 사용할 수 있는 꿀팁!!으로 플러그인을 알려주셔서 너무 좋았던 거 같다. 노가다의 시간이 확실히 줄었다. 😁😁😁대망의 마지막 강의 모바일 OTT✅ 모바일 OTT 서비스 페이지 만들기✅ 다크모드 버전 만들기-> 그동안 반응형을 이용한 웹페이지만 만들었는데 마지막을 앱 화면을 구성하는 강의였다. 여기도 만들어둔 컴포넌트를 적극 활용하여 만들었는데 완성도가 꽤 괜찮은 거 같았다. 😀😀😀 여러 번 실습을 거쳐서인지 적응이 되어서 만드는데 힘든 것은 없었던 거 같다. 강의를 들은 나의 회고 🙄이번 주가 마지막이라서 기쁜 마음과 마지막이라고 늘어지려고 하는 나를 강제로 일으켜 강의를 들은 거 같다. 마지막이라고 하니까 뭔가 아쉬움이 많이 남는 거 같기도 하고... 이번 강의를 들어서 나는 한 단계 나아진 거 같은 느낌이 들었고 이 강의를 선택하기 잘했던 것 같다. 추천추천 👍👍👍앞으로 좋은 강의 기대할게요 볼드님!!!!

3주차 [피그마 배리어블을 활용한 디자인 시스템 구축하기] 발자국 🤣

일주일 동안의 나의 게으름 타파 작전!!bold님의 강의 [피그마 베리어블을 활용한 디자인 시스템 구축하기]수강 3주차(베리어블을 활용한 UI Component 만들기/다크모드 만들기👍) 이번주 나의 강의 ☑컴포넌트 만들기의 연속(피드백)☑️ 토스트(Toast) 만들기☑ 로딩 스피너, 스켈레톤 로더 컴포넌트 + 애니메이션☑ 슬롯 컴포넌트☑ 슬롯 컴포넌트를 활용하여 모달만들기☑ 접근성 레포트를 생성하고 접근성이 위배된 것을 수정하기-> 피드백에 필요한 컴포넌트들을 만들어 볼 수 있었다. 지난주에 컴포넌트를 빡세게...만든 효과가 있는지 속도가 그래도 빨라진 것 같은 느낌, 그리고 볼드님이 내가 만든 컴포넌트에 대해서 고쳐야 할 점을 코멘트로 남겨 주셔서 감동이었다. 정말 하나하나 보고 계신 것 같다.👍👍👍 컴포넌트 만들기의 연속(네비게이션)☑ 링크(link) 컴포넌트와 브레드크럼프(Breadcrumbs) 컴포넌트☑ 네비게이션 탭(Tabs) 컴포넌트☑ 모바일 하단 네비게이션(Bottom Navigation) 컴포넌트☑ 페이지네이션(Pagination) 컴포넌트 ☑️ 사이드 네비게이(Side navigation) 컴포넌트를 만들기☑ 헤더(Header) 컴포넌트 만들기☑ 이미지 캐러셀(Image carousel)을 만들기-> 컴포넌트를 만들면서 여러 케이스를 만들어 두는 게 나중에 디자인을 할 때 시간을 절약하는 방법이라는 것을 또 한 번 깨달았다. 또한사이드 네비게이션이나 헤더 같은 부분은 컴포넌트의 조합으로 하나의 완성 컴포넌트를 만들 수 있었기 때문에 페이지 하나를 완성하는데 가까이 왔다는 생각에 성취감이 생기고 기대가 되기 시작했다. 두둥 드디어 등장 다크모드 ☑️ 다크모드의 장점과 앱 특성에 따른 모드 적용 ☑️로컬 베리어블에 다크모드 색상 입력하기☑ 모든 인스턴스를 Dark mode 페이지에 복사하고 난 다음 베리어블 모드를 다코므도로 변경한 후 적용이 잘 되었는지 체크하기-> 베리어블을 이용한 모드 변경을 경험하는 시작이었다. 라이트 모드에 맞게 다크모드 컬러를 정해서 베리어블을 등록하고 테스트를 할 수 있었다. 브랜드에 맞게 일관된 컬러를 사용해 주는 것이 중요했다. 그리고 접근성을 위해 수정과 수정을 거쳐서 완성이라고 만들었지만 아직 완벽하지는 않은 것 같다. 🕵‍♂️ 강의를 들은 나의 회고 🤔🤔베리어블 강의를 들은 이유가 다크모드 변경이나 다음 주에 듣게 될 반응형 적용 등 베리어블의 활용성에 대해서 알고 싶어서였는데 이번 주에 배운 다크모드가 다음에 나올 다양한 베리어블을 이용한 활용에 어떻게 쓰이게 될지 기대가 되는 한주였다. 다음 주도 게으름 피우지 말고 직진해야겠다.😁 미션 컴플리트이번 주 미션은 한 가지였는데 모달 만들기였다. 강의에서 배운 여러 케이스를 바탕으로 또 필요할지도 모를 모달을 몇개 추가해서 만들어 보았다. 오토레이아웃 값을 변경하는게 쉽지가 않아서 좀 헤맸고 결국 변경하기는 했는데 음... 오토레이아웃 값 설정에 대한 공부와 경험이 더 필요다는 생각이 들었다. 다음 주 미션도 기대기대🐣🐥

2주차 [피그마 배리어블을 활용한 디자인 시스템 구축하기] 발자국 😎

일주일 동안의 나의 게으름 타파 작전!!bold님의 강의 [피그마 배리어블을 활용한 디자인 시스템 구축하기]수강 2주차(베리어블을 활용한 UI Component 만들기) 이번주 나의 강의 ☑컴포넌트를 만들기 위해 구조 이해하기 프로퍼티 종류 이해하기 컴포넌트 만들기 인풋 컴넌트☑버튼(button) 컴포넌트☑컨트롤 컴포넌트(체크박스(check), 라디오(radio), 스위치(switch)) ☑라벨(label)을 만들고 컨트롤 그룹 컴포넌트 만들기☑ 텍스트 필드(text_field) 컴포넌트 ☑ 텍스트 박스(textarea) 컴포넌트☑ 셀렉트(select) 컴포넌트☑ 접근성 포트를 생성하고 접근성이 위배된 것을 수정-> 프로퍼티와 값을 정하는 게 나에게는 매우 어렵게 느껴졌다. 영어를 못해서 그런 건지😭 모르겠지만 처음엔 많이 어려웠는데 컴포넌트를 하나씩 만들어 가면서 어느정도의 룰이 있다는걸 알게 되면서는 조금씩 나아지는것 같았다. 디스플레이 컴포넌트✅ 아바타(avatar) 컴포넌트✅ 아코디언(accordion) 컴포넌트✅ 뱃지(badge) 컴포넌트✅ 툴팁(Tooltips) 컴포넌트✅ 구분선(divider) 컴포넌트✅ 인터랙티브 칩(chips) & 상태칩(chips) 컴포넌트✅ 기본 카드(Basic Cards)✅ 테이블(table) 컴포넌트✅ 접근성 레포트를 생성하고 접근성이 위배된 것을 찾아 수정하기-> 인풋 컴넌트를 만들고 나서인지 프로퍼티를 사용하는데 익숙해진 느낌이었다. 여러 가지 케이스를 만들면서 디자인 시스템의 위대함🤣을 조금 알게 된것 같기도 하다. 강의를 들은 나의 회고 😭😭한 컴넌트를 만들 때도 여러 케이스를 많이 만들어 볼 수 있어서 약간 힘들긴 했지만 확실히 도움이 된다는 생각이 들었다. 그리고 힘들게 등록했던 베리어블을 적용하면서 만들었기 때문에 쓰임새를 잘 알 수 있었던 한주였다. 프로퍼티와 값을 이해하는데 시간이 걸리기는 했지만 그걸 자세하게 배울 수 있어서 더 좋았던 거 같다🔥🔥🔥다음 주도 기대가 많이 된다. 미션 컴플리트내가 고생해서 만든 컴포넌트들을 조합해 보는 미션이 주를 이루었다. 컴넌트가 어떻게 쓰이는지를 생각하고 만들어 볼 수 있어서 도움이 되었다. 어떤 디자인에서 어떤 컴퍼넌트를 적절하게 사용하느냐도 근무 시간을 줄이는 것 중 하나이기 때문에 중요하게 생각하고 미션을 클리어했다.

1주차 [피그마 배리어블을 활용한 디자인 시스템 구축하기] 발자국😱

일주일 동안의 나의 게으름 타파 작전!!bold님의 강의 [피그마 배리어블을 활용한 디자인 시스템 구축하기]수강 1주차(베리어블 등록하기) 이번주 나의 강의 ☑디자인 토큰과 베리어블 장점 비교디자인 시스템에 대해 알아보기 (디자인의 일관성, 브랜드 강화, 효율적인 개발, 시간 단축, 팀 간 협업 강화, 빠른 온보딩, 유지보수 용이, 높은 품질의 경험) 디자인 시스템은 혼자 만드는 것이 아니라 디자이너, 개발자는 물론 다양한 이해관계자들과 함께 만들어야 한다.) 베리어블의 구조(토큰계층) / 베리어블의 네이밍 구성요소 (개발자와 디자이너 사이의 공통된 이름 짓기, 미리 계획하에 만들기(엑셀시트))Primitive / Theme / Semantic으로 나누어서 사용에 맞게 베리어블 등록하기 (단계별로 어떤 베리어블을 참조 해야하는지 확실한 구분이 필요)등록한 베리어블을 공유할 수 있도록 문서화하기 (알아보기 쉽게 일관된 스타일로 문서화 하는 것이 중요(컬러의 경우 참조 베리어블 등록하는 것이 생각보다 시간이 오래 걸림 ㅠㅠ)) 강의를 들은 나의 회고 😭😭솔직히 처음에는 강의를 듣는 시간이 얼마 안걸릴거라고 생각했는데 실습을 직접하면서 배우는거라 생각보다 시간이 많이 걸렸다. 하지만 실습을 하면서 배우는게 몸으로 익히면서 배우는 거라 더 기억에 남는거 같아 좋았다. 그리고 강의의 퀄리티가 너무 좋아서❤ (실무에서 유용하게 사용할 수 있을 정도) 하루 하루 배울 수록 힘들었지만 기분이 좋아졌다. 게으른 나 다음주도 조금만 더 힘냈으면 좋겠다. 미션 컴플리트 중미션은 생각보다 어렵지 않았다. 강의를 들으면서 누구나 해결할 수 있을 정도의 수준이어서 처음엔 좋았는데 베리어블을 문서화 하는데 시간이 생각보다 많이 들었지만(아직도 하는 중😱) 나중에 회사에서 배운걸 적용하고 문서화를 할거를 미리 연습한다는 생각으로 하고 있다. (플러그인이 모든걸 해결해 주지는 않는다.😌) 볼드님이 1주차 온라인 강의를 해주셨는데 실무적으로 사용할 수 있는 것들을 자세하게 설명해 주셔서 너무 좋았습니다. 강의가 정말 필요하고 그동안 궁금했던 것들이 담겨있어 너무 좋았습니다. 다들 이 강의 꼭 들으세요.👍👍