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

[2주차 스터디 내용]

• 컴포넌트 만드는 순서

  
  1. 싱글 컴포넌트를 만든 후 프로퍼티(Boolean/Text/Instance swap) 추가
  2. 복제 후 테스트 하기
  3. 상태, 사이즈 등 베리언츠 프로퍼티 등록해주기
  4. 플러그인을 사용해 웹 접근성 체크해주기
  
  

[미션]

• 피그마 입력 컴포넌트 만들어 보기

  • 버튼 / 체크박스 / 라디오버튼 / 스위치버튼 / 라벨 / 텍스트 필드 / 텍스트 상자 / 셀렉트

     

• 디스플레이 컴포넌트 만들어보기

  • 아바타 / 아코디언 / 뱃지 / 툴팁 / 구분선 / 칩 / 카드 / 테이블

• 컴포넌트 웹 접근성 체크하고 수정해보기 (Contrast)

  
  

  ---

   

[회고]

이번 미션에 있는 컴포넌트들은 대부분 만들어 보았던 컴포넌트였는데,

내가 그동안 얼마나 주먹구구 식으로 컴포넌트를 만들어 왔는지 깨달았다.

이전에는 컴포넌트를 만들 때 베리어블을 사용하지 않았었다. (쓸줄 몰랐기때문...🥲)

스타일, 파운데이션을 베리어블로 체계적으로 등록한 상태에서 컴포넌트를 만드는게

훨씬 효율적이고, 관리나 수정도 쉽다는 걸 느꼈다.