[+24] 컴포넌트 만들기 실습

🚩오늘의 키워드

- 카드 컴포넌트 만들기

- 넷플릭스 UI 구조 만들어보기

😶TODAY I LEARNED

[ 카드 컴포넌트 만들기 1 - 4 HW ]

강의 내용을 바탕으로 카드 컴포넌트를 제작했다.

1차적으로 튜터님의 피그마 정답본을 미리 보지 않고 제작한 후, 튜터님과 동일하게 제작하지 않거나 보충이 필요한 부분은 정답 해설본을 보고 수정하는 방식으로 진행했다.

외형은 따라 만들 수 있는데, 세부적인 프로퍼티 설정 같은 경우는 튜터님과 다른 경우도 꽤 있어서 나중에 시간을 투자하여 따로 뜯어봐야겠다.

[ UI 디자인의 모든 것 1-5 실습 ]

강의에 나왔던 라벨 디자인을 다시 만들어보았다.

위 쪽은 강의를 보지 않고 스스로 만들어 본 것이고, 아래는 튜터님의 강의 영상을 따라 만든 것인데 한 가지를 깨달았다!

시각 보정이 도형에만 적용되는 것이 아닌 패딩값 설정에서도 적용된다는 것이다.

아이콘 자체의 여백이 이미 적용(패딩값이 이미 적용) 되어있는 상태에서는 한 쪽을 없애기도 하고 낮게 설정해서 시각적으로 보정을 맞춰주는 과정이 필요하다!

여태까지는 무조건 양쪽을 동일하게 적용 해왔는데 꼭 양쪽 패딩값을 동일하게 줄 필요가 없다는 것을 알았다..

[ 넷플릭스 홈 화면 구조 ]

실습에서 만들었던 컴포넌트들과 추가적으로 필요한 컴포넌트들을 만들어서 홈 화면 구조를 쌓아보았다.

강의를 듣기 전에는 UI화면에 꽉차게 쌓는다는 것이 어떤 느낌인지 몰랐는데 직접 만들어보니 이해가 조금은 가는 느낌이었다.

한 가지 의문인 점은 쌓다보면 높이 패딩 값이 조금씩 다른데, 과연 적절한 높이 패딩값이 정해져있는건지? 아니면 빈 공간없이 쌓이기만 하면 되는 건지 궁금했다.

홈 화면 구조를 만들다가 한 가지 이슈가 발생했는데, 마무리로 전체 컴포넌트들을 잡고 오토레이아웃을 씌웠을 때 튜터님의 예제는 반응형 디자인으로 가변적으로 레이아웃이 움직였는데 내가 만든 화면은 움직이지 않고 고정적이었다.

→ 개인적으로 해결한 방법은, 새로 전체를 잡고 만든 오토레이아웃이 아닌 아이폰 프레임을 잡고 움직일 때 이슈가 발생하는 것 같아 내부의 오토레이아웃을 잡고 움직였을 때는 가변적으로 잘 움직이는 것을 확인했다!

추가적으로, 저번 개인 과제를 진행하면서 튜터님께 텍스트가 들어있는 컴포넌트의 경우 텍스트의 길이에 따라 버튼 크기가 균일하게 유지되지 않거나 내부 영역을 침범하는 경우가 발생하여 질문을 남겼었는데 그에 대한 답변을 받았었다.

이번 넷플릭스 구조를 만들어보면서 상단 히어로 섹션에도 동일한 문제가 발생하여 튜터님의 답변을 기반으로 설정해보았는데 정상적으로 작동되어 뿌듯했다!