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

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

---

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

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

 

 

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

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

 

 오늘은 카드와 캐러셀을 만드는 실습을 했다. 카드는 자주 만들어보긴했는데 이 카드도 대부분 컨테이너를 만들어서 오토레이아웃을 걸기보단 각각 따로따로 만들어서 효율적이지 못하게 만들었던 과거에 나에게 쓴소리를 하고싶다. 확실히 개념을 중요시 여겨야되었던게 property부분도 그렇고 컴포넌트를 이렇게 제작하니 관리하기가 정말 편리했다. 먼저 카드 만들 때 이미지영역, 제목, 본문, 버튼을 나누었고 타이틀과 본문을 묶고 다시 이미지와 묶었다. 그리고 버튼 컨테이너와의 간격을 두었다. 이렇게하니 카드 컴포넌트를 관리할 때 용이했다. 또한, 저번 시간에 했던 property로 title text, body text를 지정하여 효과적으로 관리할 수 있었고 본문이 늘어날수록 카드도 아래로 늘어나게 끔 했다. 확실히 이 오토레이아웃에서 Hug와 fill 그리고 property 부분은 매번 피그마에서 UI디자인할때마다 적용하는게 어려운 부분인거같다. 카드 디자인을 하면서 또 느꼈던 부분은 안에있는 이미지 영역에 radius값이 바깥영역보다 작게 지정해야 더 자연스러운 걸 알게되었다. 기존에는 바깥영역을 감싸는 부분과 이미지영역 부분의 radius를 똑같이 했어서 어색한 부분이 있었는데 그 이유를 잘 몰랐었다. 이번 강의에서 직접 디자인하며 여러 radius 값을 적용해보니 체감이 되었다. 다음에 카드 디자인을 할때 신경쓰며 radius값을 적용할 것 같다. 

 

캐러셀을 제작할 때는 기존에 만든 카드를 활용하여 만들었는데 딱히 어려운 부분은 없었고 카드를 넘기는 영역인 원 컴포넌트를 만들고 카드를 여러개 만들어 가로로 스크롤을한다는 걸 알게끔 디자인 실습을 했다. 그리고 clip content를 통해 튀어나온 디자인을 가리고 여기서 중요하다고 생각하는 부분은 프로토타입을 걸 때 프레임 바깥으로 튀어나온 영역을 프레임에 맞춰야 스크롤이 된다는 걸 기억해야 한다. 초창기에 디자인을 배울 때 이걸 몰라서 가로스크롤이 계속 안되었던 경험이 있어 아직까지도 생생하게 기억이 난다. position은 scroll with parent를 걸고 overflow는 horizontal을 걸면 캐러셀형태로 가로로 스크롤이 가능해진다. 현재 구글은 캐러셀을 인터랙티브하게 한다고 하네요. 확실히 트렌드가 정적인 디자인보단 사용자가 시각적으로 인지하는게 더 용이한 인터랙션을 많이 활용하는 것 같네요. 다음 강의가 마지막인데 여러 디자인 원칙들에 대해 학습하며 유종의 미를 거두고 싶다. 기초가 정말 중요하다는 걸 다시한번 깨닫게 되었네요. 

 

---

https://fastcampus.info/4oKQD6b

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