패스트캠퍼스 환급챌린지 48일차 : AI 시대, UX/UI부터 프로덕트 디자인까지 한 번에 끝내는 초격차 패키지 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

---

1. 학습 인증샷 4장 이상 포함

1. 오늘자 날짜 + 공부 시작 시각이 보이는 사진 1장
2. 오늘자 날짜 + 공부 종료 시각이 보이는 사진 1장
3. 1개 클립 수강 인증 사진 1장 (강의 화면 내용은 보이지 않도록 / 목록 캡처 추천)
4. 학습 인증샷 1장 이상 (예: 필기, 작업물, Before/After 등)

 

 

2.학습 후기 700자 이상 (공백 제외)

오늘 배운 핵심 내용을 정리하고, 흥미로웠던 부분과 이를 내 업무에 어떻게 적용할 수 있을지 함께 기록해 주세요.

 

 오늘은 뱃지와 버튼을 만드는 실습을 했다. 디자인시스템에서 컴포넌트를 기초부터 시작하여 만들다보니 내가 몰랏던 부분이나 property 적용하는 부분을 놓치고 있다는걸 알게되었다. 먼저 뱃지 만들기를 먼저했는데 뱃지는 상태를 숫자나 점으로 정보를 보여주는거라고 합니다.

Google material design에서 spec을 확인해보면 좌우 4씩 패딩값을 주고 겹치는 거는 버튼 만들때한다고 하네요. 해당 뱃지를 만들면서 shift a 오토레이아웃을 활용하였고 fixed로 되어있는 값을 hug로 바꿔주어 안에 있는 텍스트를 감싸주는 형태로 만들었네요. 뱃지는 비교적 간단하였습니다. 하지만 버튼을 만들 때 생각보다 고려해야될게 많아 당황했습니다. 먼저 버튼의 spec을 확인할 때 8의 간격과 좌우 24패딩을 주고 높이는 48로 주었습니다. 그리고 처음 만들때 텍스트와 icon을 붙여서 버튼을 만들었습니다.  기존에 만든 icon을 활용하였고 컴포넌트에서 때어낸 instance가 swap이 되도록 property를 걸어주었습니다. 텍스트의 경우 전체 감싸고있는 컴포넌트를 누른 뒤 + 버튼을 누르고 설정 후 text를 클릭하여 연결하여 변경을 쉽게 하였습니다. property는 이전에 했던 방식을 복습을 해서 빠르게 적용했습니다. 그 후, boolean에 대해서도 property 값을 넣어줘야되는게 있었습니다. 아이콘을 보였다가 안보였다가 할 수 있게 하는걸 불린이라 하고 값은 true or false 입니다. 이 불린을 연결할 때 기존 property 적용하는 거랑 동일한데 차이점은 Appearance 창에서 물방울 옆에 있는 아이콘을 클릭하여서 만들어야 했습니다. 또한, 최종적으로 property이름을 정할 때 가로 세로축을 구분하여 작성하면 좀 더 수월하게 작성할 수 있다고합니다.

이번에 버튼을 만들어보면서  이렇게나 많은 property값을 넣어야되는지 몰랐고 개발자분들에게 전달할 때도 이런걸 정리를 하지않고 상태값만 componet로 만들어서 전달했었는데 확실히 꼼꼼하게 적용하여 드리면 더 편할거 같다는 걸 체감했습니다. 정리가 중요하다는 걸 깨달았고 매번 컴포넌트 적용 후 정리를 섹션별로 묶질않아서 가독성이 좀 낮았었는데 정리하는 방식도 배워갈 수 있어서 좋았습니다. 기초가 중요하다는 걸 알게되었고 사이드 프로젝트나 실무에서는 빠른 기간내에 요구하는게 많다고 생각하여 property 적용하는 것과 정리하는 것을 많이 시도해봐야 될 것 같습니다.   

---

https://fastcampus.info/4oKQD6b

⚠️1월 1일 패스트캠퍼스 강의 가격 인상 | 패스트캠퍼스