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

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

---

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

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

 

 

 

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

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

 

 오늘은 디자인 시스템에서 spacing, 간격, 디자인 시스템 연결에 대해 배웠습니다. 기존 산업에 대해서 계속 공부를 해왔는데 인턴경험과 프로젝트를 진행했을 때 디자인시스템을 직접 만들기보단 매번 피그마 커뮤니티에서 design system을 복사하여 활용했었습니다. 이번 기회에 디자인 시스템에서 foundation과 컴포넌트를 직접 만들어보며 체화시키기 위해 다시 디자인시스템에 대해 공부하기로 마음먹었습니다. 단순히 기존 plugin이나 커뮤니티에 무료배포되어있는 것들을 복사하여 약간만 바꿔서 활용하긴했었는데 저의 실력이 근본적으로 늘어나지 않는거같고 직접 만들어봐야 더 확장시켜나갈 수 있다고 생각하기 떄문에 다시 디자인 시스템 강의로 돌아와 수강하게되엇습니다.

 

먼저 이번에 수강한 spacing에선 lightening design system에 나온 spacing 문서를 통해 공부를 했습니다. spacing은 디자인시스템 만들때 딱히 중요하게 생각하지 않았었는데 확실히 어떤 값이던 토큰을 설정해줘야되는걸 이번에 알게되었네요. 저는 타이포그래피와 컬러만 디자인토큰을 넣어왔어서 딱히 중요하게 생각하지않았었는데 개발자와의 원할한 협업을 위해선 필수적인 작업이라는걸 알았습니다. Spacing은 1~12까지 있고 주로 4px 단위로 늘어납니다. spacing 4에서 5로 넘어가기 시작할 때부터 8씩 늘어난다고합니다. 또한 rem이라는 값이 있는데 데스크탑과 태블릿까지 고려한 상대적인 크기고 spacing이 16px일때 이 rem 값이 1이여서 이 1을 기준으로 정의한다고 합니다.

 

타이포그래피는 google material design system을 통해 공부했는데 이 디자인시스템에서 타이포는 inter를 쓰지만 주로 실무자들은 pretendard를 많이 활용한다고 합니다. 저도 pretendard를 많이 활용했었는데 이 pretendard 폰트가 영어와 한글의 밸런스가 맞춰져있어서 많이 활용한다고 합니다. 그 뒤 각각의 폰트 weight와 크기 등을 저장 후 텍스트 스타일로 저장하는 실습까지 하여 기존에 알고있던 개념이었지만 복습하여 확실히 익혔습니다. 그리고 마무리로 디자인시스템을 연결하는 실습까지 했는데 이 작업에선 책모양의 아이콘을 눌러 해당 페이지에서 만든 컴포넌트나 베리어블은 publish하면 다른 페이지에서도 해당 디자인시스템을 활용하여 작업할 수 있다는 점을 배웠습니다. AI 시대일수록 기본기와 판단할 수 있는 능력이 중요하다고 생각했고 직접 분석하고 만들어보면 확장해나갈 수 있다고 생각하여 기본에 충실히하도록 노력하겠습니다.

---

https://fastcampus.info/4oKQD6b

커리어 성장을 위한 최고의 실무교육 아카데미 | 패스트캠퍼스