[TIL]20241107

일정표 ✨

09:00 ~ 10:00 : 튜터님과 디자인 카타(프로덕트 발표)

10:00 ~ 11:00 : 팀원들과 과제 진행 과정 공유 & 피드백

11:00 ~ 11:20 : 튜터님 방문(질문&피드백)

11:20 ~ 11:40 : 데일리 스크럼 진행 & 개인과제 진행상황 체크 및 todo list 작성

11:40 ~ 13:00 : 심화과제(품절화면/재입고알림/알림 확인 다이얼로그)

 

개인과제 마무리!

14:00 ~ 16:30 : 심화과제(비회원 구매하기/상세화면 캐러샐적용/장바구니 화면)

16:30 ~ 17:20 : 인터랙션 및 프로토타입 적용

17:20 ~ 17:50 : 마무리(UI키트 및 컴포넌트 정리) 및 제출

 

19:00 ~ 20:00 : 과제 해설 영상 시청&메모

20:00 ~ 21:00 : TIL 작성 및 제출, 데일리 스크럼

 

 

오늘 공부 내용

1. 개인 과제를 진행하며 배운 것과 어려웠던 것, 해결한 방법

2. 해설영상을 보며 알게된 것

 

TIL 작성

오늘은 개인과제를 제출하는 날이었는데 팀원들과 오전에 진행 과정을 공유하면서 서로 체크를 해주는 시간을 가졌다. 혼자서 진행할 때는 보이지 않았던 부분들과 놓쳤었던 부분들도 다시 체크할 수 있는 좋은 시간이었다.

첫번째 문제는 라디오 버튼을 베리언츠로 on/off로 동작하게는 만들었지만 실제 상세화면에서 사용자가 눌렀다고 가정한다면 다른 라디오버튼은 off 상태로 변환되어야하는데 어떻게 해야할지 감이 안 왔다. 거기서 청림님이 자신이 만든 방법을 공유해주어서 감을 잡을 수 있었다. 라디오 버튼이 있는 리스트(갯수와 가격)들 자체를 하나로 컴포넌트로 만들었고, 4가지의 상황을 프로토타이핑으로 연결하였다. 그러니 preview에서 매끄럽게 사용할 수 있게 되어서 문제 해결!  

두번째 문제는 상세화면 캐러샐이었는데 처음엔 세가지 이미지를 묶은 컨테이너를 넣어 가로 스크롤로 접근했었다. 튜터님께선 그 컨테이너 자체를 세가지로 만들어 프로토타이핑을 연결해야한다고 설명해주셨다. 각각의 이미지가 보여지는 세가지의 버전으로 컴포넌트 세트로 만들어 그 컴포넌트에서 프로토타이핑을 해주었다. 그렇게 하니 클릭했을 때 다음 이미지로 착 붙어서 스와이퍼되는 것 처럼 보였다 굿.!

 

과제 제출을 한 뒤 해설영상을 보면서 바텀 시트 만들기도 해보아야겠다고 생각했다. 그리고 UI키트를 잘 정리해놓은 것을 보니 부끄러웠다. 해설영상에 비하면 나는 정리한 것도 아니었다. 생각해보니 지금은 혼자 작업해서 어디에 어떤 컴포넌트가 있는지 다 알고있지만, 다른 사람들이 보면 찾지 못할 것 같았다. 그 부분이 제일 아차 싶은 부분이었다. 앞으로 귀찮더라도 UI키트를 보기쉽게 잘 정리하는 습관을 들여야겠다.