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

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

---

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

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

 

 

 

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

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

 

 오늘은 디자인시스템 컴포넌트 중 앱바 만들기 실습을 했다. 디자인시스템에서 컴포넌트를 만들 때 매번 coummunity나 플러그인 활용하기만하고 직접 만들어본건 드물어서 꼭 확실히 개념을 익히려고 마음을 먹었다. 먼저 앱 바는 네비게이션처럼 왔다갔다 할 수 있도록 만들어야 된다고 한다. 컴포넌트를 만들 때 구글 메터리얼 디자인 시스템을 참고하여 만드는데 그 시스템에서 4번까지의 디자인이나와있었는데 3번 4번은 안드로이드 디자인이라고 한다. 최근 ios와 안드로이드 ui 디자인을 차이를 두지않고 만든다고 하는데 그 이유는 리액트를 활용하여 공통으로 만들기 때문이라고 합니다. 그리고 강사님이 꿀팁을 알려주셨는데 Tip으로 preference에 들어가 nudge를 8로 바꾸면 이동시 8씩 움직여서 편하다고 합니다. 이 영역이 주로 4~8씩 커져서 그렇다고 하네요. App bar에 spec을 보았을 때 아이콘이 24지만 그 아이콘을 감싸고있는 영역은 48이 기본이라고 한다. 이 영역은 터치영역인데 정말 기본이고 중요하다고 하네요. 그리고 약간의 팁을 주셨는데 ---을 여러개 치고 엔터를 누르면 페이지 생성 칸에 라인을 그을 수 있어서 표지를 정리할 때 유용하다고 합니다. shift + a인 오토레이아웃도 정말 중요하고 굉장히 많이쓰니 꼭 외워야된다고 합니다. 

 

본격적으로 실습을 했는데 처음 해상도를 만들때 412 android compact나 428 14 iphone plus를 많이 활용한다고합니다. 제가 프로젝트 할때는 매번 375 or 390이었는데 역시 트렌드가 빠르게 바뀌네요. 물론 pm이나 개발자와 협의하거나 어떤 핸드폰 해상도를 가장많이쓰는지에 대한 데이터를 보고 정하는게 가장 좋은 선택일 것 같네요. 그리고 매번 레이어 펼쳐져 있을 때 레이어가 너무 많아 불편했는데 Alt + L 누르면 한번에 닫을 수 있는 팁도 알려주셔서 정말 유용하게 써먹었다. 그리고 컴포넌트를 만들때 property 적용하는게 정말 헷갈렸는데 이 강의 통해서 어떻게 적용하는지 차근차근 알려주셔서 많이 도움이 되었다. 실습을 하며 property적용 할 때 처음하면 에러메시지가 뜨는데 해당 부분을 적용해주어야 한다. swap instance도 마찬가지이며 최상위 컴포넌트에서 이 swap instance를 제어하게 할려면 Nested instance를 통해 전부 체크를 해야한다. 이 작업을 안하면 하위 컴포넌트 안에서만 제어가 가능하기 때문이라고 합니다. 몰랐던 property에 대해 알아가서 너무 알찼고 컴포넌트를 만들 때 속성값들을 넣어줘야 나중에 수정하기 편리하다는 걸 알기때문에 앞으로는 컴포넌트 만들 때 property까지 다 적용하여 만드는 걸 연습하겠습니다.

---

 

https://fastcampus.info/4oKQD6b