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

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

---

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

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

 

 

 

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

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

 

 오늘은 Sementic color 의미컬러 팔레트와 그림자를 만들어보았다. 원시 컬러(primitive color)만들때는 플러그인을 써서 상당히 빠르게 만들었었는데 Sementic color 팔레트를 만들땐 사용하지 않았다. 그리고 내 생각보다 베리어블에다 많은 값들을 지정해서 넣었어야 되었다. component, variant, 역할(role), 상태(state), 테마(theme) 등을 분류해서 넣어야 한다. 먼저 아토믹디자인을 중요시하게 여기셨고 베리어블에다 color값들을 분류해서 넣었다. 역슬래쉬(/)를 하면 파일이 분류되어서 저장이된다. 먼저 버튼, 칩, 체크박스, 리스트를 나누었고 버튼에서도 값을 나누었다. primary로 나누고 버튼에서도 bg, text, icon, border값으로 나누었다. 그 뒤 각각 다시 상태값으로 default, hover, disabled로 나누었다. 이 작업을하고 버튼을 따로 만들고 컴포넌트 적용 후 컬러값을 각각 지정하여 컬러팔레트를 적용을 해보았다. 나는 이전에 피그마 커뮤니티를 들어가서 디자인시스템을 복사 한 후 내 프로젝트에 약간 변형하여 적용했었는데 처음부터 만들어보니 좀 색달랐다.

 

그 후 그림자와 고도도 만들어보는 시간을 가졌다. 이 그림자를 쓰는 이유가 톤차이가 나지 않을때 위계구조를 잡기위해서 사용하는 것이라고 한다. 그리고 주로 FAB(floting action button)에 그림자를 많이쓰고 모달 팝업에도 사용을 많이 한다고 한다. 그리고 마우스 호버를하면 정보가 사용자에게 더 인지하기 쉽게 해준다고 한다. 변화를 알려주기 위해서도 그림자를 사용한다고 한다. 구글 머터리얼 디자인에서 토큰이 5가지 정도 있는데 단계별로 5단계로 나뉜다고 보면된다. 각각 엄청 복잡한 값들이 적용되어 있고 dp라는 단위를 쓴다고한다. 1단계에선 배너, 바텀시트(모달), 버튼, 카드, 칩, 네비게이션 드로어, 사이드 시트에 주로 사용한다고한다. 2단계에선 앱 바, 메뉴, 네비게이션 바, 툴팁. 툴바에 사용한다고한다. 3단계에선 데이트 피커, 다이얼로그, FAB, extended fab, 서치바, 타임피커에 사용한다고 한다. 나는 그림자를 사용할 때 사용처가 정해져있는지 몰랐다. 내가 보았을 때 이쁘거나 괜찮아보이는 것들로 적용을 했었는데 정해진 사용처가 있다는거에 좀 놀랐다. 구글 머터리얼 디자인 시스템에 대해서 자세히 공부를 해봐야겠다. 따로 디자인시스템을 분석을 해본적은 없어서 이번 강의가 더욱 더 인상깊게 다가왔다.

---

https://fastcampus.info/4oKQD6b

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