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

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

---

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

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

 

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

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

 

  오늘은 디자인시스템에서 아이콘 만들기와 쉐잎만들기를 했습니다. 구글 머터리얼 디자인시스템을 보며 do와 don't를 비교해가며 아이콘에 대해서 배웠는데요. 아이콘은 단순해야하고 라인의 두께와 각도 그리고 라인 영역과 선 영역의 비율이 맞아야된다고 합니다. 또한 Standard icon size가 있는데 24dp로 쓰인다고 합니다. 그리고 소수점 이 부분이 정말 중요한데 프레임, 간격, Width, heingt 등 전부 딱 떨어지는 정수로 나와야된다고 합니다. 개발 시 오류가 생길 수 있기 때문이라고 하네요. 그리고 아이콘에 새롭게 Weight가 생겼다고 하는데 400~500 정도의 값으로 쓰인다고 하네요. 또한 Grade라는 부분도 배웠는데 앞에서 언급한 Weight랑은 또 다르다고 하네요. 다크모드가 대부분 서비스에 있는데 라이트모드에서 다크모드로 변환 시 아이콘 면적이 더 두겁게 보인다고해서 시각정 보정을 통해 얇게 만들어주는 거라고 합니다. 이걸 각각 만들긴 어렵고 플러그인을 활용한다고 하네요. 

 

아이콘이 작았다가 커지는 경우에도 그대로 커지는게 아니라 광학적인걸 고려하여 시각적 보정을해서 커지면 조금 더 얇게 간격을 조정한다고합니다. 기존 material icon일때는 그대로 커졌었는데 웨이트 두께가 커서 material symbol로 넘어올 땐 시각적 보정을 한다고하네요. 그리고 아이콘엔 텍스트를 같이 써줘야되는 부분을 강조하셨습니다. 가독성과 시인성 때문이라고하는데요. 기본적으로 아이콘만 잇으면 이 아이콘이 무엇을 하는지 인지하기 어려운 경우도 있어 중요하다고합니다. 그리고 아이콘 터치영역은 48로 잡는다고합니다. 마우스나 키보드를 고려해서 제작할 땐 40으로 제작한다고 하네요. 

 

프로젝트를 할 때, 주로 라인 아이콘도 많이쓰긴 했지만 꽉 채워진 아이콘도 많이 활용을 했었는데요. 아이콘은 대부분 아웃라인 스타일로한다고 하네요. 이 부분에 이유가있는데 라인 아이콘으로 들어가야 타이포 그래피와 조화가 잘 어울린다고 하네요. fill이된 아이콘과 타이포그래피가 같이 있으면 아이콘에 눈이 더 쏠리는 느낌이 있다고 생각합니다. 그리고 플러그인 material symbol을 활용하여 아이콘도 빠르게 제작 후 컴포넌트로 만들어 디자인시스템 가이드도 만들었습니다. 빠르게 제작하는 팁들도 많이 알려주시고 쉐입(roundness)부분도 베리어블에 4단위로 수치를 작성하면된다는 팁을 주셔서 디자인 시스템 제작 후 각각의 버튼마다 적용해보아 빠르게 개념에 대해 익힐 수 있었습니다. 저는 쉐입(roundness)부분은 프로젝트에 신경쓰지 않고 작업했던 적이 많아 이 부분까지 베리어블을 적용하여 작업해야되는지 이번에 알게되었네요. 또한, foundation부터 실제로 제작 후 적용해보는 시간을 통해 개념학습에 많은 도움을 받았습니다.

---

https://fastcampus.info/4oKQD6b

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