Figma로 CGV App 클론하기 - 2 (텍스트박스의 오토레이아웃과 리사이징)

[9/25_To Do]

• CGV 메인화면 클론
  • 메인화면 컴포넌트 제작
  • 메인화면 구조 배치
  • 메인화면 프로토타이핑 적용

 

 

컴포넌트 제작과정에서 어려웠던 부분들

 

* Boolean Propertie를 하나만 만들고 두 개체에 적용해 보았는데, 각각 적용해도 한번에 둘 다 꺼지고 켜지는 문제가 발생했다.

→ Boolean Propertie를 적용할 때 각각의 개체를 따로 끄고 키려면 각 개체 개수와 같은 개수의 Boolean Propertie를 만들어줘야 원하는대로 작동한다.

 

 

 

* 텍스트가 박스의 글자가 많아질 때 글자가 넘치는 문제를 겪었다.

이때는 컨테이너의 가로가 Fill로 설정되어 있는지 확인하고, 타이포 설정에서 Truncation enabled를 설정해주니 넘어가는 글자가 말 줄임표로 나타나면서 해결되었다.

 

 

* 위와 비슷하지만 아이콘이 텍스트 뒤쪽에 위치하는 경우, 텍스트 뒤에 아이콘이 붙어있어야 하며 텍스트가 넘칠 시 말줄임표로 전환되어야 했다. 처음 설정 값으론 텍스트 박스를 Fixed 해두어 아이콘이 따라오지 않았으며 Fill로 해두니 글자가 넘쳤다.

해결 방법으로는 컴포넌트는 최대 길이로 Fixed 해두고, 텍스트 박스는 Auto width → Hug → Max 값을 설정, 말줄임표 설정을 해주면 해결할 수 있었다.

 

 

* 상하 높이에 대응해야 할 때는 리사이징을 Auto height로 설정하고 마찬가지로 Hug → Max 값을 설정, 말줄임표를 설정해주면 대응이 가능했다.

 

* 완성된 컴포넌트로 글의 길이, 사진 프레임 유무에 따라 세로 길이가 자동으로 대응되는 것을 확인 할 수 있었다.

 

 

 

CGV App 메인화면 구조 클론 완료

(프로토타이핑도 적용해보았다.)

 

 

>> 탭 하나를 구성하는데에도 많은 컴포넌트가 필요하다는 것을 알게 되었다.

메인화면에 사용된 컴포넌트들

 

 

[회고]

일부러 구성요소가 많은 CGV App을 클론하기로 선택한 것이 잘한 일이라고 생각되었다. 요소가 많아서 오토레이아웃이나 리사이징에서 어려웠던 부분이 많았는데, 어떤게 맞는지 직접 하나씩 실행해보며 오토레이아웃에 대한 이해도가 많이 높아졌다.

또 한번 만들어둔 컴포넌트를 반복해서 사용한다는 점도 체감하게 되었고, 프로토타이핑을 적용시키며 직접 구현되는 듯한 느낌을 받아서 뿌듯했다. 위에 헷갈렸던 부분을 정리해 둔 것을 반복해서 참고하며 다른 탭들도 클론해보려 한다.