2024.01.22.학습일지

Overview

 

진정한 의미의 페이지 늘려서 제출

 지금까지 내가 알고 있던 페이지를 늘려 제출하라는 것의 의미는 프로토타입 Width와 Height은 프로토타입 기기와 동일하게 유지하지만, 프로토타입의 Clip contents를 해제하여 숨어있는 콘텐츠까지 보여달라는 것으로 알았었다. 그러나 진짜 페이지를 '늘려달라'라는 의미는 그것이 아니었다. 

 프로토타입 페이지를 Fixed navigation은 Bottom으로 유지한채 정말 페이지 Height만큼 늘려놓으라는 것이었다. 그렇게 되면 Scroll behavier를 버티컬로 맞춰놓지 않더라도 프로토타입 기기설정을 On으로 돌리게 되면 자동으로 Scroll 설정이 완료된다. 해당 사항을 이해하고 모두 같은 구조로 변환해 놓으니 정말 편리했다.

 

토스 컨테이너의 구조

 원래 내가 클로닝에 사용하던 토스 List 컨테이너의 구조는 element를 엮을 때 카드의 상하좌우 패딩값도 같이 주어 오토 레이아웃을 걸고 간격을 opx로 한 후 레디오스값만 주는 형태였다. 그런데 이번 클로닝 피드백을 받으러 가면서 List 간격에 대한 부분에서 튜터님께 다음과 같은 이야기를 들었다.

위의 방식의 경우도 올바른 컴포넌트 제작 방식이긴 하나 상하좌우 간격을 손쉽게 맞추기 위함과 토스의 구축 방식과 흡사하게 만들기 위해서는 다른 방식을 사용해야 한다. 
- 내부 List items를 외부 카드 여백말고 내부 Pressed 시 잡히는 스페이스의 크기만큼 제작할 것
: 토스의 인터렉션 구조는 List 아이템 터치 > 컴포넌트 박스 Pressed 상태 변환 및 크기 배율 감소 이므로 내가 하는 방식으로 작업하게 되면 컴포넌트 박스 변환 시 효율적이게 변경할 수 없게 됨

 

 이를 통해 인터렉션의 구조에 따라 오토레이아웃의 구조도 변화된다는 점을 인지할 수 있었다.

 

 또한 이렇게 컨포넌트를 제작하기 위해서는 4배수가 아닌 숫자들도 사용이 되는데, 이런 부분은 어떻게 할 수 없는 부분이라고 하셨다. 말씀을 요약하자면 4배수를 사용하는 것은 모든 숫자에 사용하는 것이 아니라 유저들이 비주얼적으로 보는 부분들이 4배수로 맞춰질 수 있도록 하라는 것이다. 

 예를 들어 실제 컨포넌트는 안에 많은 숫자를 담고 있지만 실제 비주얼 간격으로 볼 때는 24간격인 부분이 있을 수 있다는 것이다. 예시를 들어 설명을 받으니 원래 알고 있었던 4배수에 대한 정의가 다시 세워지는 기분이었다. 다음 프로젝트 시에 더욱 유의하여 작업할 것이다. 

 

오늘 작업 현황

• 개인과제 2차 제출 (완료)
• 클론디자인 (완료) (피드백 완료)