내일배움캠프 UX/UI 23일차 TIL 컴포넌트 범위, 컴포넌트 분석, 컴포넌트 구성

2025.02.24

컴포넌트 범위, 컴포넌트 분석, 컴포넌트 구성

---

하루 계획

---

디자인 카타

• 저는 B를 선택했습니다.
• B의 메뉴 배치가 더 컨텐츠에 집중할 수 있다고 생각했습니다. 메뉴가 쓸 데 없는 공간을 차지하지도 않고 뒤에 있는 컨텐츠도 잘 보이기 때문에 좋다고 생각했습니다. 또한 컨텐츠 제목이 채널 이름보다 위에 나타나면서 컨텐츠 > 제목 > 채널 순으로 시선이 옮겨가면서 컨텐츠에 대한 사용자의 흥미를 더 이끌어 낼 수 있겠다는 생각이 들었습니다.
• A는 시선에 흐름에 따라 배치하여 순서대로 읽어 내려가게끔 설계했습니다. 또한 메뉴가 더 잘 눈에 띄게끔 한 배치라고 생각합니다. 하지만 메뉴가 밑에 있는 공간을 많이 차지하여 답답한 느낌을 주고, 메뉴가 컨텐츠를 가려져서 사용자에게 불편함을 줄 수도 있다고 생각했습니다.

---

학습 목표

UI 디자인의 모든 것 1-4 강의 수강

UI 디자인의 모든 것 1-4 강의 과제 완료

수업 목표

-UI 디자인을 분석하여 반복되는 요소를 찾을 수 있다.

-컴포넌트 범위를 이해하고 설계할 수 있다.

-스타일을 적용하여 컴포넌트를 정의할 수 있다.

---

반복되는 UI 찾기

기본 요소(item)

가장 작은 요소의 컴포넌트

칩, 아이콘, 라디오 버튼, 체크박스, 버튼 등이 있다.

 

조합 요소 (module)

기본 요소와 기본 요소가 합쳐지거나 기본 요소와 조합 요소가 합쳐진 형태

카드, 서치바, 스낵바 등이 있다.

 

섹션 (section)

조합요소와 조합요소, 여백이 합쳐진 형태

네비게이션 바, 앱바, 캐러셀, 탭, 리스트 등이 있다.

 

웹 개발자 모드

맥: Option + command + i

윈도우: F12

실 서비스 UI 뜯어보기

유사한 화면들로 묶어서 정리한 후 

반복되는 컴포넌트를 위주로 분석하였다.

 

컴포넌트 구성

엘리먼트 (Element)

더 이상 쪼개지지 않는 가장 작은 단위

컬러, 타이포그래피, 아이콘, 곡률, 여백, 그리드 등이 있다.

 

컴포넌트 (Component)

엘리먼트와 엘리먼트를 합쳐서 블록형태의 컴포넌트를 만든다.

 

합성 컴포넌트 (Compound Component)

컴포넌트와 컴포넌트를 조합하여 만든다.

 

페이지 (Page)

합성 컴포넌트를 활용해 화면을 구성한다.

 

컴포넌트 네이밍

개발로 활용될 수 있기 때문에 영문으로 하는 것이 좋다.

 

level : item, module, section 

type : button, card, list, chips, checkbox 

direction : row, vertical, column, horizontal

size : small, medium, large, xlarge, 2xlarge 

 

네비게이션 바 컴포넌트 실습

 

카드 컴포넌트 실습

컴포넌트 프로퍼티를 설정하여 1과 2의 다른 여백공간을 구분하였다.

인스턴스 스왑 기능을 이용하여 숫자를 설정한다.

숫자에 콘스트레인츠 Scale을 적용한다. 

다양한 디바이스에서 이용할 수 있기 때문에 크기를 수정하기 편한 Scale로 설정하였다.

---

강의 과제 : 카드 컴포넌트 만들기

오토레이아웃과 컴포넌트, 프로퍼티 기능을 이용하여 카드 컴포넌트들을 만들었다.

---

학습 경험

알게 된 점

컴포넌트와 UI가 어떻게 구성되어 있는 지 확인할 수 있었고 화면 디자인을 분석하면서 공통적으로 반복되는 요소들을 파악할 수 있었다. 또한 웹의 개발자 모드를 통해 어떤 식으로 웹이 구성되었는 지 이해할 수 있었다. 그리고 실습을 통해서 UI 요소와 컴포넌트에 대한 이해력을 높일 수 있었다.

 

아쉬운 점, 어려웠던 점

피그마 강의와 어느정도 연결이 되기 때문에 크게 어려웠던 점은 없었다. 하지만 집중력이 조금 아쉬운 것 같았다. 강의를 한 번에 집중해서 듣는 것이 힘들게 느껴졌고 캠을 끄고 있다보니 자꾸 딴 길로 새는 것 같았다.

 

개선 방향

캠 키고 공부를 하거나, 한 강의를 20분씩 나눠 듣는 것으로 개선하고자 한다.

---

내일 할 일

UI 디자인의 모든 것 1-5 강의 듣기

UI 디자인의 모든 것 1-5 과제 완료

튜터님께 질문