💡 25-05-19 (월)
UI 컴포넌트명 익히기
https://ant.design/components/overview/
FloatButton
: 어떤 창이 있을때 오른쪽 하단에 떠있는 버튼
Divider / Layout
: 구분선 / 레이아웃 구조 알아두기 !
Header 영역에는 로고나 GNB(Global Navigation Bar)라고 가장 상단에 항상 고정돼 있는 메뉴 바가 포함되어 있다
Space / Splitter
Space : 요소들 사이의 간격이나 여백
▶︎ 모든 컴포넌트 간에 적절한 공간 배치를 위한 기준을 말한다
Splitter : 2~3개의 영역을 나누고 그 사이를 드래그해서 크기를 조절할 수 있게 해주는 막대 또는 경계선
Menu
GNB (Global Navigation Bar) 라고 부르기도 한다
Depth : 화면 안에서의 계층 구조 또는 시각적으로 떠 보이거나 뒤에 있는 느낌
▶︎ 안에 얼마나 들어가 있는지를 알려준다 (무엇이 앞에 있고 뒤에 있는지)
Navigation Two은 2뎁스로 끝난다
Breadcrumb / Dropdown
Breadcrumb : 사용자가 지금 어떤 경로를 통해 이 페이지에 왔는지 보여주는 메뉴바
-> 현재 위치를 단계별로 표시해줌
Dropdown : 클릭하거나 탭했을 때 아래로 펼쳐지는 선택 메뉴
Pagination
: 많은 콘텐츠를 여러 페이지로 나누고 그걸 넘길 수 있게 만든 버튼
▶︎ 특정 목적을 가지고 탐색하는 경우에 적합하다
➕ Infinite Scrolling (무한 스크롤) : 사용자가 인터넷 페이지를 스크롤 할 때 내용이 끊임없이 나온다
▶︎ 계속 탐색하거나 구경하며 몰입해서 끊김 없이 보고 싶을때 적합하다
Steps / Cascader
Steps : 무언가를 하기 위해 차례차례 밟아가는 절차
Cascader : 여러 단계의 선택지를 단계별로 펼쳐서 선택할 수 있게 하는 드롭다운 메뉴
Checkbox / DatePicker
Checkbox : 여러 항목 중에서 하나 또는 여러 개를 선택
DatePicker : 사용자가 날짜를 직접 선택할 수 있게 만들어주는 달력 형태
Form / Radio
Form : 사용자가 정보를 입력하거나 제출할 수 있도록 구성된 영역
▶︎ Input은 사용자가 직접 입력하는 하나의 필드를 말하고 이러한 입력창들을 모아놓은 전체 구조를 Form이라고 한다
Radio : 여러 개의 선택지 중에서 오직 하나만 선택
Select
: 여러 옵션 중 하나를 선택할 수 있도록 만든 드롭다운 형태
셀렉됐을때의 화면 모습
Slider / Switch
Slider : 막대를 드래그해서 값을 직관적으로 조절
Switch : ON/OFF 상태를 전환한다 (= Toggle)
TimePicker / Transfer
TimePicker : 사용자가 시간을 직접 선택해서 설정 할 수 있다
Transfer : 두 개의 리스트 사이에서 항목을 선택해서 옮길 수 있게 해준다
Badge / Carousel
Badge : 작고 눈에 띄는 표시로, 어떤 요소 옆에 강조하거나 알림을 준다
Carousel : 여러 장의 이미지나 콘텐츠를 슬라이드 형식으로 넘길 수 있다
▶︎ 자동/수동으로 넘기는 롤링 배너
Collapse / Tabs
Collapse : 어떤 영역이나 콘텐츠를 펼쳤다/접었다(숨겼다) 할 수 있다
▶︎ 클릭하면 열리고 다시 클릭하면 닫히는 구조
Tabs : 하나의 화면 안에서 여러 개의 콘텐츠를 구역별로 나눠서 클릭하면 각각의 내용을 보여준다
Tooltip / Alert
Tooltip : 버튼이나 아이콘 위에 마우스를 올리면 잠깐 뜨는 작은 설명 박스
Alert : 사용자에게 중요한 메시지나 상태를 알려준다
▶︎ 주의, 성공, 에러, 경고 등을 빠르게 알릴 때 사용함
Modal / Notification
Modal : 화면 위에 떠오르는 팝업창으로 사용자가 무언가 확인하거나 행동하기 전까지는 뒤쪽 화면을 못 쓰게 막는다
▶︎ 중요한 알림, 확인, 입력, 결정이 필요할 때 보여줌
Notification : 사용자에게 중요한 정보, 이벤트, 상태 등을 알려주는 메시지
Progress / Skeleton
Progress : 어떤 작업이 얼마나 진행됐는지 시각적으로 보여준다
Skeleton : 데이터를 아직 불러오는 중일 때 실제 콘텐츠가 들어올 자리를 미리 보여주는 뼈대 형태의 로딩
(실제로는 그라데이션으로 표현해주고 있음)
Spin
: 콘텐츠나 데이터가 로딩되는 동안 사용자에게 "지금 작업 중이야!" 라고 알려주는 회전 애니메이션
▶︎ 로딩 표시 아이콘
아토믹 디자인 (Atomic Design)
💡 https://atomicdesign.bradfrost.com/
✔️ 디자인도 개발처럼 모듈화되어야 한다_컴포넌트 기반 디자인의 기본 철학
: 화학에서의 원자, 분자 등의 개념을 디자인에 적용시킨 것
▶︎ 특정한 기술을 위한 개념이 아닌 일종의 멘탈 모델 (mental model) 이다
원자-분자-유기체-템플릿-페이지 뒤로갈 수록 복잡해진다
-> 작고 단순한 것에서 크고 복잡한 곳으로 가는것을 기본으로 함
1️⃣ Design Token (디자인 토큰)
: 색상, 글자, 여백 같은 디자인의 기본 재료를 저장해두는 통일된 방법
▶︎ 타이포그래피, 색상, 여백과 같은 변수를 기술에 종속되지 않는 방식으로 저장하는 방법이며 이를 통해 디자인 시스템을 반응형으로 만들 수 있다
원자는 물질을 구성하는 가장 작은 기능 단위이지만 실제로는 양성자, 중성자, 전자와 같은 더 작은 입자로 이루어져 있다
UI에서 디자인 토큰은 원자보다 더 작은 아원자 입자라고 볼 수 있다
2️⃣ Atoms (원자)
: UI 시스템에서 가장 작고 가장 기본적인 구성 요소
= 더 이상 쪼갤 수 없는 가장 작은 단위
▶︎ 라벨, 입력 필드, 버튼처럼 더 이상 나눌 수 없고 나누면 기능을 잃는 가장 작은 UI 구성 요소
UI 디자인을 이루는 기초적인 빌딩 블록 역할을 하며 모든 사용자 인터페이스 디자인은 이런 원자 단위로부터 시작된다
3️⃣ Molecules (분자)
: 여러 원자를 조합해 만든 하나의 작고 독립적인 UI 구성 요소
▶︎ 두 개 이상의 원자 컴포넌트로 이루어진 그룹
추상적인 원자들이 결합하면 목적이 생긴다 (검색)
"그 결과 검색 기능이 필요한 곳 어디에나 배치할 수 있는 간단하고 휴대 가능하며 재사용 가능한 컴포넌트가 탄생했다"
이런식으로 정의를 해두면 디자이너, 개발자가 같이 일하기 쉬워진다
4️⃣ Organisms (유기체)
: 분자의 집합
▶︎ 비교적 복잡한 UI 구성 요소로 여러 분자, 원자 또는 다른 유기체들이 모여 만들어진다
인터페이스 디자인에서 뚜렷한 섹션(구역)을 형성한다
예를 들어, 헤더는 하나의 유기체이며 검색창, 로고, 메뉴 등 여러 분자들로 구성되어 있고 사용하는 플랫폼에 따라 그 구성도 달라질 수 있다
우리가 방문하는 거의 모든 웹사이트에서 이러한 유형의 유기체를 볼 수 있다
(원자,분자는 화학 정의에 기반하여 말했지만 유기체-템플릿-페이지는 화학의 정의에서 벗어난 개념들이다)
5️⃣ Templates (템플릿)
: 원자, 분자, 유기체를 조합하여 하나의 페이지 레이아웃 구조를 설계한 것
▶︎ 페이지 전체의 구조를 설계한 것으로 UI 구성 요소들이 어디에 배치될지 보여주는 페이지 뼈대
상단에 헤더 / 중간에 콘텐츠 영역 / 하단에 푸터
▶️ 구성 요소들의 위치와 구조만을 보여주는 레이아웃 설계도
콘텐츠를 몰라도 좋은 경험을 만들 수 있습니다.
하지만 콘텐츠 구조를 알지 못하면 좋은 경험을 만들 수 없습니다.
콘텐츠가 무엇인지가 아니라, 콘텐츠가 무엇으로 만들어 졌는지가 중요합니다.
-마크 볼턴
6️⃣ Pages (페이지)
: 템플릿에 실제 콘텐츠(데이터)를 넣어 만든 디자인의 최종 결과물
▶︎ 밑바탕이 되는 구조는 같을 수 있어도 각 페이지는 템플릿에 담긴 콘텐츠에 따라 달라진다
디자인이 실제로 어떻게 보이고 작동하는지를 사용자나 관계자가 직접 보고 느낄 수 있게 해준다
인스타로 보는 아토믹 디자인의 예시이다 !
Design tokens
💡 디자인 토큰에 대해서
https://uxdesign.cc/design-tokens-cheatsheet-927fc1404099
"디자인 토큰은 디자인 시스템의 시각적 스타일을 구성하는 작고 재사용 가능한
디자인 결정 요소이며 고정된 값을 자기 설명적인 이름으로 대체한다"
▪️ Values (값)
: 디자인에서 사용하는 실제 값 (HEX 코드 - #5843F5)
▶︎ 모든 토큰의 가장 기초가 되는 원자적인 값 (의미 없는 단순한 색상 값)
▪️ Base Variables (기본 변수)
: 특정한 이름을 붙여둔 색상 변수 (purple-500)
▶︎ 디자인 시스템에서 재사용 가능한 기초 스타일 세트
버튼인지 텍스트인지 불명확하여 어디에 쓰이는지 알기 어려움
▪️ Common (의미 변수)
: 역할 기반 이름 부여 (버튼, 링크, 강조 등 인터랙션 요소용)
▶︎ 사용 맥락이 드러남 → 액션에 쓰이는 컬러 (color-action)
디자이너-개발자 간 커뮤니케이션을 원활하게 함
▪️ Component (컴포넌트 변수)
: 특정 UI 컴포넌트에 직접 연결된 토큰 (color-background-button)
▶︎ 디자인 시스템의 최종 사용 레벨
가장 구체적이고 실제 UI에 바로 적용됨
💡 피그마에서의 디자인 토큰 정의
https://help.figma.com/hc/en-us/articles/15871097384471-The-difference-between-variables-and-styles
Pink-600을 다른 색으로 바꾸면 전체 색상에 적용된다
💡 구글 머티리얼즈에서의 디자인토큰 정의
https://m3.material.io/foundations/design-tokens/overview
기준을 500으로 많이 잡는다 (Primary color)
숫자가 높아질수록 색깔이 진해지며 낮아질수록 옅어진다
색상을 50~900까지 정해두고 베리어블로 각각 지정해준다
✏️ 900~50 버튼 정리하기
✏️ 버튼, 아웃라인, 텍스트와 디폴트/호버상태 만들기
✏️ 선정 서비스 클론 디자인 페이지 3-4개 제작하기
