[09/29] 프레임 그리고 오토레이아웃과 친구먹기

2025. 9. 29. 22:02UX & UI Design/하루메모

오늘은 오로지 실습만 진행을 했다.

내일부터는 새로운 챕터로 들어서기에, 기존에 배웠던걸 복습하기 용이한 마지막 날이라고 할 수 있지

그래서 단순 Component 만드는 작업들도 Property/Varient를 굳이 설정해가며 만들어 나갔다.

 

오늘 첫 실습한 내용인 카드 중 한 Component이다.

 

이미 나와있는 견본의 Layout도 물론 모범답안이긴 하겠지만, 결국 나에게 알맞는 나만의 프로토콜을 만들어야 빨라진다 생각했다.

 

좌측을 보면 알겠지만, Layout을 보다 직관적으로(내입장에서지만) 짜기 위해서 각 Foundation을 왠만하면 각 Frame에 담는 방법을 택해서 오늘 하루를 진행해봤다.

 

아무래도 html 입장에서 생각해봤을때, 내가 택한 방법이 가장 실제 웹 구현에 가까울 것 같다고 생각하기에...

추후 현업에서 개발자와 빠르게 의사교환 할 수 있는 방법이라고 일단 생각해본다. (뭐 아는건 쥐뿔도 없지만)

 

 

 

 

그리고 무엇보다 Component들을 만들 때 이 두가지를 계속 신경썼다.

 

 

1. 어떤 화면/프레임에서 등장해도 통일성이 깨지지 않는 Layout 설정

 

2. 지금 내 팀원이 내 자료를 공유받아도 쉽게 응용 할 수 있도록 하는 Varient/Property 설정

 

최대한 완벽하게 하려다보니 시간이 더 오래 걸린 것도 있고, 뭐 Layout 관련해서 내 나름대로 감 잡은 것도 많다.

 

맨 위 실습은 Layout/Frame 구조만 생각하는데 20분 걸린것 같은데, 그래도 오른쪽 실습 할때는 굳이 생각하고 시작할 필요가 없었다.

 

오늘 실습중에 제일 열중에서 만든 Calendar Component이다. 기존의 견본에서 더 나아가 색감까지 디자인해봤다.

아직 내 감각이 촌스럽긴 하지만, 그래도 어제 색깔 갖고 놀았을때보단 봐줄만 한 것 같다.

 

+ 아직 부족한점

Child Component의 Property/Variant를 Parent에서 설정 하는 방법을 아직 잘 모르겠다. 만약 그런 방법이 제대로 있다면, 그것이 실용적이냐도 아직 감이 안잡힌다. 내일 실습전에 강의 내용 찾아보고 Nested Component가 내가 말하는 내용과 같은것인지, 아니라면 이건 언제쓰는것인지 꼭 알아봐야겠다