☀️ 오늘의 멜로빈스

“디폴트를 기분 좋은 태도, 감정으로 뇌를 훈련시켜라.”
Something cool is going to happen for me today.

오늘 하루도 긍정적인 마음으로 시작!
좋은 감정과 태도를 기본값(Default) 으로 둘 수 있도록 뇌를 훈련시켜라!
기본이 긍정적 마음으로 차있는 상태가 될래~~

UI 심화 개념

컴포넌트와 인스턴스

디자인 작업을 하다 보면 같은 버튼, 같은 카드 UI를 여러 번 쓴다.
이때 강력한 기능이 바로 컴포넌트(Component)와 인스턴스(Instance) 이다.

단축키 정리
⌘ + ⌥ + G → 선택 요소 프레임화
⌘ + ⌥ + K → 선택 요소 컴포넌트화

컴포넌트(Component)

원본 요소. 스타일, 구조를 정의해놓은 ‘템플릿’ 같은 개념.

인스턴스(Instance)

컴포넌트를 복제해 사용한 버전. 원본을 수정하면 대부분 자동으로 따라옴.
* 단, 한 번 오버라이드(Override) 한 속성은 원본을 수정해도 그대로 유지됨
→ CSS에서 스타일을 상속받다가 특정 요소만 덮어쓰는 느낌!

느낀 점
코딩할 때 CSS 클래스(labeling) 잡아두고, 전체 스타일을 한 번에 바꾸는 느낌과 비슷했다. “컴포넌트 = 클래스 정의”, “인스턴스 = 태그에 붙은 클래스” 라고 이해하니 확실히 와닿은!

디자인 시스템 (Design System)

디자인 시스템은 단순한 ‘스타일 모음’이 아니라, 디자인과 개발을 연결해주는 구조적 언어이다.

주요 구성 요소

• 1️⃣ Foundations (기초)
  : 디자인의 기본 언어
  컬러 팔레트, 타이포그래피, 레이아웃, 간격 등

• 2️⃣ Components (컴포넌트)
  : 기초 요소들을 조합한 재사용 가능한 단위
  버튼, 입력폼, 모달, 카드, 토스트 등

• 3️⃣ Patterns (패턴)
  : 여러 컴포넌트가 모여 만든 사용자 중심의 흐름
  로그인, 회원가입, 검색/필터링 패턴 등

• 4️⃣ Templates (템플릿)
  : 전체 페이지 구조나 UX 흐름을 나타냄
  대시보드, 온보딩 화면, 목록 페이지 등

• 5️⃣ Style Guide (스타일 가이드)
  : Foundations을 기반으로 전체 스타일 원칙을 설명하는 문서
  → 외부 협업자나 신입 디자이너에게 ‘이 브랜드는 이렇게 디자인합니다’를 안내하는 설명서 역할

💡 실제 예시: Carbon Design System
IBM이 만든 Carbon Design System은 유명한 사례 중 하나.
디자인 토큰(색상, 간격, 폰트 등)이 잘 정의되어 있음
React, Vue, Angular 등 개발 프레임워크와도 바로 연결 가능

디자인 시스템은 대규모 프로젝트에서 일관성을 유지하는 데 도움을 준다.
회사마다 자체 디자인 시스템을 보유하고, 브랜드와 서비스에 맞게 정의해둔다.

과제

1. 수업시간에 학습한 웹 페이지 제작 (Auto layout)

가로 크기를 고정하고, padding 값을 통해 레이아웃 통일하기.
반복되는 요소들 컴포넌트 정의 후 사용하니 더욱 편리했다!

2. 로그인 (sign up page) 리서치 후 제작

네이버 로그인 화면

components 분석

• 입력 필드: 회색 테두리와 둥근 모서리 직사각형 - 아이디, 비밀번호 입력 부분
  - 활성화되면 테두리가 초록색으로 바뀜
• 버튼:
  - 블루 계열의 그레이 색상 둥근 모서리 직사각형 - 로그인 버튼
  - 초록색 테두리 둥근 모서리 직사각형 - 패스키로그인
  - 그레이 색상 텍스트 버튼 - 비밀번호 찾기~회원가입 필드, 이용약관 필드
• 탭/토글: 로그인 방식 선택 탭 - ID/전화번호, 일회용 번호, QR코드
  - 활성화된 탭은 배경색은 화이트로, 글자는 검정색, 아이콘 색상은 초록색으로 바뀜
• 체크박스: 로그인 상태 유지
  - 활성화 시 초록색으로 체크박스가 채워짐.
  

느낀 점
계층을 잘 묶어야지 이후 디자인을 추가할 때도 편했다! 사용된 색상도 적어보이지만, 직접 피커 찍어 클론해보니 회색만 해도 엄청 많았다!!! 디테일도, 직관성도 필요한게 UI 같다.

레퍼런스 클론

좋아하는 글래스모피즘 효과와 F1 전부 넣어서 클론해보았다!
가장 큰 프레임 안에서 gap 조정을 하면 통일되어서, 각 프레임 안에서 padding 이나 높이 조절을 통해서 해주었다. 현업에서는 어떤 방식으로 작업되는지 궁금하다.
(결국 내가 보는 결과 화면은 똑같은데, 실제 개발이나 협업할 때는 어떻게 작업하는 건지?)

회고

오늘은 컴포넌트와 인스턴스를 학습하면서도 디자인도 결국 코드와 같은 원리로 움직인다는 걸 다시 느꼈다.

컴포넌트 = 원본 클래스
인스턴스 = 클래스가 적용된 요소
오버라이드 = CSS 덮어쓰기

이렇게 이해할 수 있었다! 맞겠지...?? 🧐

또, 디자인 시스템은 프로젝트 전체를 관통하는 원칙이다! 작은 버튼 하나부터 전체 UX 플로우까지 일관되게 이어지는 구조. 디자인 시스템 설계도 언젠가 해보고 싶다 ㅎㅎ

#디자인일관성을유지할_것