TIL_6W2D_컴포넌트의 범위

디자인 카타
오늘의 토픽 - 페이지네이션과 무한스크롤, 각각 어떤 의도를 가지고 있을까요?
선택 B안

페이지네이션은 페이지 위치를 표시함으로 사용자가 자신의 위치를 알 수 있고, 하나의 콘텐츠가 몇 페이지에 있는지 인지한 후에 다시 돌아가서 찾기에 유용하나 페이지를 넘어가는 순간마다 사용자에게 행동을 필요로 하는데
스크롤의 경우에는 스크롤만으로 콘텐츠를 확인할 수 있고 스크롤이 있는 경우 카테고리가 따로 있기 때문에 인기나 추천 콘텐츠를 읽은 후에 카테고리로 따로 찾을 수 있다고 생각하여 B를 골랐음

A의 경우 페이지를 넘어갈 때 마다 사용자가 액션을 취해야 하기 때문에 불편함이 있을 것 같으며, 검색 시에 페이지네이션이라면 상관 없지만 홈화면에서 콘텐츠 표시가 페이지네이션이면 지저분한 감이 존재할 거라고 여겨짐

기본 요소(Item)은 가장 작은 요소의 컴포넌트
칩, 아이콘, 라디오 버튼, 체크박스, 버튼 등

조합요소(Module)은 기본요소 + 기본요소, 기본요소 + 조합 요소
카드(이미지 + 텍스트), 서치바(아이콘 + 입력 필드), Snackbar(텍스트 + 버튼) 등

섹션(Section)은 조합요소 + 조합요소 + 여백(마진, 패딩)

개발자 모드에서 분석하기
안드로이드 개발자 모드
안드로이드의 경우 개발자 모드로 접속해 레이아웃 구조를 확인할 수 있음

web 개발자 모드
web에서 개발자 모드로 접속해 레이아웃 구조를 확인할 수 있음

엘리먼트(Element)는 더이상 쪼개지지 않은 가장 작은 단위
컬러, 타이포그래피, 아이콘, 여백, 곡률, 그리드 등의 요소들이 엘리먼트에 속함

컴포넌트(Component)는 엘리먼트 + 엘리먼트를 조합해 재사용이 가능한 블록의 형태인 컴포넌트를 만듦

합성 컴포넌트(Compound Component)는 컴포넌트 + 컴포넌트를 조합해 합성 컴포넌트를 만들 수 있음

페이지(Page)는 합성 컴포넌트를 활용해 UI화면을 그려낼 수 있음

컴포넌트 네이밍
영문 네이밍
네이밍은 영문으로 정의해야 함
아이콘과 컴포넌트 네이밍은 개발로 활용될 확률이 높기 때문에 영문으로 정의해 주는 것이 좋음

사용 맥락에 따른 네이밍
level : item, module, section 등
type : button, card, list, chips, checkbox 등
direction : row, vertical, column, horizontal 등
size : small, medium, large, xlarge, 2xlarge 등

Assets 패널 적용

단축키
맥 : ⌥ Option + 2
윈도우 : Alt + 2