[+19] 앱 UI 키트 및 프로토타입 제작하기

🚩오늘의 키워드

- 과제 제출일!

 

😶TODAY I LEARNED

[앱 UI 키트]

라디오 / 상품 상세 컴포넌트

 

어제 작업했던 UI 키트에 이어서 라디오 버튼 컴포넌트와 상품 카테고리 컴포넌트를 추가로 제작했다.

제작하면서 아직 포지션에 대한 개념 부족과 컴포넌트에 대한 이해도가 살짝 떨어져서 Fixed로도 해봤다가 Fill로도 해봤다가 HUG로도 적용해봤다가 난리를 치면서 만든 것 같다.

 

난항을 겪었던 부분이 크게 3가지가 있었는데,

1️⃣ 오토레이아웃이 적용되어있는 부분 위에 다른 프레임을 올리려니 자꾸 안쪽 프레임으로 들어갔던 부분.

→ 드래그해서 위에 놓는 것이 아니고 레이어 패널의 위계를 활용해서 레이어 자체를 프레임 위로 올려 해결했다.

 

2️⃣ 카테고리 컴포넌트를 활용해 2열로 10개의 제품을 배치했는데 상품명이 길어질 경우, 텍스트 내의 포지션을 HUG로 적용하면 정렬 라인이 서로 안 맞고 FIll로 적용하면 하단 제품 영역을 넘어가는 부분.

 

→ 실질적인 해결방안은 찾지 못했고.. 가장 긴 상품명보다 Gap 값을 늘려서 적용했다.

 

 

3️⃣ 라디오 컴포넌트를 누르면 서로 변경되는 프로토타입 적용

→ 원래 알고있던 지식대로 만들었을 때 선택은 되었으나, 선택이 풀리지 않는 문제가 발생했다.. 이것저것 정보를 찾아서 발견한 방식이 https://youtube.com/shorts/MiQX8EbuxOY?si=CxDxIoCbM_98R3MH 의 유튜브를 참고하여 제작했다.

 

개인 과제 영상 해설을 들으며 깨달은 방식은 애초에 2~3개의 변하는 화면을 만들어놓고 프로토타입으로 적용하면 된다는 것이었다.

애초에, 내가 너무 어렵게 생각하고 있었던 거였다...!! 앱의 작동은 디자이너의 목표가 아닌데 개발자와 소통이 될 정도로 알아볼 수 있는 쉬운 방법이 있다면 그 방식을 사용하는 것이 맞지 않나 생각이 들었다.

 

 

[화면 UI 디자인]

최대한 디자인을 신경써서 만든다고 만든 건데 아직은 부족한 티가 많이 난다.

영상 hw에 있었던 클론 디자인을 하나도 진행하지 못하고 만들어서, 만약 클론 디자인을 통해 감각을 키웠다면 지금보다는 낫지 않았을까 하는 생각이 든다. 앞으로 과제나 강의를 하면서 남는 시간이 있다면 클론 디자인을 계속 해보는 걸로..!

 

 

 

 

🫠 오늘의 회고

여러모로 쉽지 않았지만! 2번째 과제도 끝~!