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

일주일 동안의 나의 게으름 타파 작전!!

bold님의 강의 [피그마 베리어블을 활용한 디자인 시스템 구축하기]

수강 3주차(베리어블을 활용한 UI Component 만들기/다크모드 만들기👍)

• 이번주 나의 강의 ☑

  • 컴포넌트 만들기의 연속(피드백)
    ☑️ 토스트(Toast) 만들기
    ☑ 로딩 스피너, 스켈레톤 로더 컴포넌트 + 애니메이션
    ☑ 슬롯 컴포넌트
    ☑ 슬롯 컴포넌트를 활용하여 모달만들기
    ☑ 접근성 레포트를 생성하고 접근성이 위배된 것을 수정하기
    -> 피드백에 필요한 컴포넌트들을 만들어 볼 수 있었다. 지난주에 컴포넌트를 빡세게...만든 효과가 있는지 속도가 그래도 빨라진 것 같은 느낌, 그리고 볼드님이 내가 만든 컴포넌트에 대해서 고쳐야 할 점을 코멘트로 남겨 주셔서 감동이었다. 정말 하나하나 보고 계신 것 같다.👍👍👍
     

  • 컴포넌트 만들기의 연속(네비게이션)
    ☑ 링크(link) 컴포넌트와 브레드크럼프(Breadcrumbs) 컴포넌트
    ☑ 네비게이션 탭(Tabs) 컴포넌트
    ☑ 모바일 하단 네비게이션(Bottom Navigation) 컴포넌트
    ☑ 페이지네이션(Pagination) 컴포넌트

     

    ☑️ 사이드 네비게이(Side navigation) 컴포넌트를 만들기
    ☑ 헤더(Header) 컴포넌트 만들기
    ☑ 이미지 캐러셀(Image carousel)을 만들기
    -> 컴포넌트를 만들면서 여러 케이스를 만들어 두는 게 나중에 디자인을 할 때 시간을 절약하는 방법이라는 것을 또 한 번 깨달았다. 또한

    사이드 네비게이션이나 헤더 같은 부분은 컴포넌트의 조합으로 하나의 완성 컴포넌트를 만들 수 있었기 때문에 페이지 하나를 완성하는데 가까이 왔다는 생각에 성취감이 생기고 기대가 되기 시작했다.

    
     

  • 두둥 드디어 등장 다크모드

     

     

     
    ☑️ 다크모드의 장점과 앱 특성에 따른 모드 적용

     
    ☑️로컬 베리어블에 다크모드 색상 입력하기
    ☑ 모든 인스턴스를 Dark mode 페이지에 복사하고 난 다음 베리어블 모드를 다코므도로 변경한 후 적용이 잘 되었는지 체크하기
    -> 베리어블을 이용한 모드 변경을 경험하는 시작이었다. 라이트 모드에 맞게 다크모드 컬러를 정해서 베리어블을 등록하고 테스트를 할 수 있었다. 브랜드에 맞게 일관된 컬러를 사용해 주는 것이 중요했다. 그리고 접근성을 위해 수정과 수정을 거쳐서 완성이라고 만들었지만 아직 완벽하지는 않은 것 같다. 🕵‍♂️

     

     

• 강의를 들은 나의 회고 🤔🤔

  • 베리어블 강의를 들은 이유가 다크모드 변경이나 다음 주에 듣게 될 반응형 적용 등 베리어블의 활용성에 대해서 알고 싶어서였는데 이번 주에 배운 다크모드가 다음에 나올 다양한 베리어블을 이용한 활용에 어떻게 쓰이게 될지 기대가 되는 한주였다. 다음 주도 게으름 피우지 말고 직진해야겠다.😁

• 미션 컴플리트

  • 이번 주 미션은 한 가지였는데 모달 만들기였다. 강의에서 배운 여러 케이스를 바탕으로 또 필요할지도 모를 모달을 몇개 추가해서 만들어 보았다. 오토레이아웃 값을 변경하는게 쉽지가 않아서 좀 헤맸고 결국 변경하기는 했는데 음... 오토레이아웃 값 설정에 대한 공부와 경험이 더 필요다는 생각이 들었다. 다음 주 미션도 기대기대🐣🐥