컴포넌트 정리 및 모작 실습(TIL 7일차)

화면을 구성하는 UI 컴포넌트에 대해 정리해보았다! 컴포넌트에 대한 이론적 지식(분류와 네이밍 등)은 잘 몰랐기 때문에 조금 세세하게 정리해두었다.

여기서 컴포넌트란?

 

컴포넌트: 소프트웨어 시스템을 구성하는 독립적이고 재사용 가능한 모듈

컴포넌트들의 구조은 아래와 같다. (총 4개 - 엘리먼트->컴포넌트->합성 컴포넌트->페이지)

1.엘리먼트(Element)

• 더 이상 쪼개지지 않은 가장 작은 단위
• 컬러, 타이포그래피, 아이콘, 여백, 곡률, 그리드 등....

2.컴포넌트(component)

• 엘리먼트+엘리먼트 -> 컴포넌트(재사용이 가능한 블록인 컴포넌트)

(좌)엘리먼트 (우)컴포넌트

3.합성 컴포넌트(Compound Component)

• 컴포넌트+컴포넌트 ->합성 컴포넌트

4.페이지(Page)

• 합성 컴포넌트를 활용하여 페이지를 구성한다!

---

컴포넌트의 구조를 알았으니 이제 컴포넌트를 화면 내 역할과 조합 범위를 기준으로 분류했다! (기본 요소->조합 요소->섹션)

1.기본 요소(Item)

• 가장 작은 요소의 컴포넌트
• 흔히 말하는 버튼, 칩, 라디오 버튼 등이 해당된다.

 

2.조합 요소(Module)

• 아이템+아이템 or 아이템+모듈
• 카드(이미지+텍스트), 서치바(아이콘+입력 필드) 등이 있다.

 

3.섹션(Section)

• 모듈+모듈+여백(패딩, 마진)
• 캐러셀, 네비게이션 바, 탭 등이 있다.

 

이러한 컴포넌트들은 영어로 네이밍을 해야하는데...

위 사진처럼 다양한 사용 맥락에 따라 네이밍을 하고 세분화에 따라 더 다양하게 가능하다.

 

---

이후 강의는 실습 강의였기 때문에 이전 숙제와 실습을 진행했다.

 

챕터 2 숙제

1.아이콘 만들기

구글 아이콘( Material Symbols & Icons - Google Fonts) 을 참고해서 만들었다.

최대한 유사하게 만드려고 노력했다(외곽선의 바깥쪽에만 곡률 2가 들어간다던지)

하트는 살짝 찌그러졌다... 어떤 툴이든 하트 그리기가 제일 어려운 것 같다

 

2.다이얼로그 만들기

조건은 오토레이아웃/버튼 2개/아이콘 1개 타이틀 옆에 두기

온보딩 때 베리언트 실습을 많이 해서 그런가 막힘없이 쭉쭉 만들 수 있을 줄.... 알았는데

1차 작업

(좌) 예제 정답 (우)내가 한 것

????

어떻게 저렇게 변하는거지...베리언트는 동일하고 불리언만 바뀐 건데 내가 한 거의 오토레이아웃은 계속 중앙 정렬이다...

그래서 일단 베리언트로 하면 되긴 해서 불리언 대신 베리언트로 만들어줬다

(아마 꼭 불리언 속성으로 적용하지 않고 베리언트로 만들어도 불리언으로 피그마에서 자동 인식되는 것 같은데... 자세한 원리까지는 모르겠다)

결국 아이콘 off 상태에서 타이틀은 false로 되고 베리언트로 해결....(눈에 보기엔 똑같아서) 그런데 타이틀이 hug가 아니다

 

지금 선택한 타이틀의 설정값이 fill이어야하는데 hug여서 왜 안 바뀌지? 했는데 (위 사진)

그리드 버티컬이 아니라 그리드 베타(4번째 것)으로 설정해둬서 타이틀 오토레이아웃 값이 바뀌지 않는 거였다.

아무튼 그래서 인스턴스로 뺐을 때 불리언으로 보이지 않는 것만 빼면 예제랑 똑같이 만듦!

 

챕터 3 숙제

1.그리드 박스 만들기

원래 서비스 1개를 추가로 선정해서 해야 하는데(내가 고른 건 오늘의집) 이걸 하면 챕터 4는 손도 못 댈 것 같았다...

쿠팡 그리드 박스 만들기는 노션에 있어서 막히는 부분이 있으면 정답지를 봐가며 하는 식으로 하면 된다!

나는 정답을 보면서 했지만 요소 간의 간격을 신경쓰면서 만들어보려고 했다.

카드 형식이라 금방 할 줄 알았는데 구성 요소가 조금씩 달라서 시간이 조금 걸린 듯...

옆에는 오늘의 집 홈페이지를 그리드 분석해보려고 가져왔다. 개인적으로 카테고리 분류도 잘 보이고 여러 카드 형식이 한 화면에 보여서 좋아하는 웹페이지다!

챕터 4 실습 (진행 중)

강의에서 진행하는 실습(숙제는 아님)

강의를 그냥 눈으로 쭉 봤는데 직접 해보는 게 공부가 될 것 같아서 진행하는 중. 근데 개인 과제의 내용하고 겹치는 부분이여서 최대한 빨리 쳐내거나 숙제만 하는 식으로 할 것 같기도 하다....

 

내일은 풀집중해서 개인 숙제까지 손대보는 게 목표!! 빡세게 해야겠다...!!