쑥이의 UI/UX 온라인 무료강의,피그마(figma)

1. 디자인 스타일(Design Style) - 정의 :  피그마 상에서 색상, 텍스트, 이펙트, 그리드의 네 가지 스타일 요소를 지정하여 등록한 뒤 반복적으로 사용하는 요소를 말합니다. 스타일로 등록하면 다른 작업에도 사용할 수 있고, 수정이 필요할 땐 지정한 스타일만 수정하면 적용된 요소들이 모두 한번에 변경되기 때문에 일관성 있는 디자인 작업을 할 때 유용하게 쓰입니다.  - 색상 스타일 (Color Styles): 브랜드 컬러 팔레트나 UI 컴포넌트의 기본 색상을 정의하고 관리합니다. 색상 값뿐만 아니라 이름과 설명을 추가하여 체계적인 관리가 가능합니다. 최근 업데이트를 통해 라이브러리 간 색상 스타일 동기화 및 변형(variations) 기능이 강화되어 더욱 유연한 색상 관리가 가능해졌습니다.  - 텍스트 스타일 (Text Styles): 폰트 패밀리, 크기, 두께, 행간, 자간 등 텍스트 관련 속성을 저장하고 재사용합니다. 다양한 텍스트 스타일을 정의하여 문서 전체의 타이포그래피 일관성을 유지할 수 있습니다.  - 그리드 스타일 (Grid Styles): 레이아웃 디자인의 기본이 되는 그리드 시스템을 정의하고 저장합니다. 컬럼 그리드, 로우 그리드, 격자 그리드 등 다양한 형태의 그리드를 설정하고 프로젝트 전반에 걸쳐 일관된 레이아웃 구조를 만들 수 있습니다.  - 효과 스타일 (Effect Styles): 그림자 (Drop Shadow, Inner Shadow), 레이어 흐림 효과 (Layer Blur), 배경 흐림 효과 (Background Blur) 등의 시각 효과를 스타일로 저장하고 재사용합니다.  - 채우기 스타일 (Fill Styles): 단색, 그라디언트, 이미지, 비디오 등 다양한 채우기 속성을 스타일로 저장합니다. 최근에는 복잡한 패턴이나 질감을 ...

1. 와이어프레임(Wireframe)이란? 와이어프레임은 디지털 인터페이스(웹사이트, 앱 등)의 구조적 설계(Structural Blueprint)를 시각적으로 표현한 도식입니다. 사용자 인터페이스의 레이아웃, 정보 계층, 주요 기능의 배치를 결정하기 위한 중간 산출물로, 일반적으로 색상, 이미지, 세부 텍스트, 브랜딩 요소는 생략됩니다. 와이어프레임은 콘텐츠와 기능이 어디에 어떻게 위치해야 하는지를 명확하게 보여주며, 개발자, 디자이너, 기획자 간의 커뮤니케이션 도구로도 활용됩니다.  2 와이어프레임의 주요 역할 2.1 정보 구조 시각화  - 사용자에게 어떤 정보가 제공되고, 어떤 흐름으로 연결되는지를 시각적으로 표현합니다.  - 정보 아키텍처(IA)와 밀접하게 연관되어 있습니다. 2.2 사용자 흐름 정의  - 사용자가 어떤 경로로 콘텐츠에 접근하는지를 설계합니다.  - 예: 로그인 → 대시 보드 → 상세 보기 → 수정 등 일련의 사용자 여정을 구조화. 2.3 기능 정의 및 우선순위 결정 각 화면의 주요 기능(예: 버튼, 검색창, 필터 등)을 나열하고, 기능의 중요도와 배치 우선순위를 정하는 데 사용됩니다. 2.4 개발 커뮤니케이션 툴 개발자와 디자이너가 공통된 구조를 이해하도록 돕고 있습니다. 기능 명세서나 요구 사항 정의서와 연결되어 개발 초기 단계 커뮤니케이션을 원활하게 합니다. 2.5 디자인 프로세스의 초석 실제 UI 디자인(비주얼 디자인) 단계로 넘어가기 전, 전체적인 틀을 점검하고 피드백 받을 기회를 제공합니다. 3. 와이어프레임의 구조적 구성 요소 와이어프레임은 UI 구성의 가장 기초적인 형태로 다음과 같은 구조로 이뤄지고 있습니다. 구성 요소 설명 헤더(Header) ...

 마이크로소프트의 Fluent Design System은 현대적이고 몰입감 있는 사용자 인터페이스 (UI) 및 사용자 경험 (UX)을 구축하기 위한 디자인 언어입니다. 2017년에 처음 공개된 Fluent Design은 Windows 10을 비롯한 다양한 마이크로소프트 제품 전반에 걸쳐 일관되고 직관적인 디자인을 제공하는 것을 목표로 합니다. 이 디자인 시스템은 빛, 깊이, 움직임, 재질, 규모라는 5가지 핵심 요소에 기반을 두고 있으며, 이를 통해 사용자가 디지털 환경에서 실제와 같은 상호작용을 경험하도록 설계되었습니다. 1. 플루언트 디자인 시스템의 개요 플루언트 디자인 시스템(Fluent Design System)은 마이크로소프트가 2017년에 처음 소개한 디자인 언어로, 현재는 Fluent 2로 발전해 왔으며, 이 디자인 시스템은 Windows, Office, Xbox 등 마이크로소프트의 모든 제품과 서비스에 일관된 사용자 경험을 제공하기 위해 만들어졌습니다. 플루언트(Fluent)라는 이름에서 알 수 있듯이, 이 디자인 시스템은 '유동적이고 자연스러운' 사용자 경험을 목표로 하며, 디지털 환경과 물리적 환경 사이의 경계를 허물고, 직관적이고 자연스러운 상호작용을 가능하게 하는 것이 핵심 철학입니다. (1) 플루언트 디자인의 역사적 맥락  - 메트로 디자인(Metro Design): Windows Phone 7에서 처음 도입  - 모던 UI(Modern UI): Windows 8 시대에 사용  - 마이크로소프트 디자인 언어(Microsoft Design Language): Windows 8.1 시대  - 네온 디자인(Neon Design): 내부 개발 코드명  - 플루언트 디자인(Fluent Design): Windows 10부터 현재까지  - 플루언트 2(Fluent 2): 최신 버전으로 크로스 플랫폼 ...

 1. 아토믹 디자인이란? 아토믹 디자인(Atomic Design) 은 2013년 미국의 디자이너 Brad Frost가 제안한 디자인 시스템 구축 방법론입니다. 이 방법론은 화학의 원자(Atom), 분자(Molecule), 유기체(Organism) 등 생물학 및 화학에서 차용한 계층적 구조를 UI 구성에 적용한 것입니다. 목표는 UI 구성요소를 작은 단위로 나누어 재사용성과 일관성을 높이고, 궁극적으로 효율적인 디자인 시스템을 만드는 데 있습니다. 2. 핵심 철학: 구성의 계층화 Brad Frost는 사용자 인터페이스(User Interface)는 더 작은 단위의 구성 요소들이 조합되어 형성된다고 보았습니다. 이를 아래와 같이 다섯 단계로 나누어 설명합니다 2.1 Atom (원자)  - 정의: 가장 기본 단위의 UI 요소. 더 이상 나눌 수 없는 최소 단위입니다.  - 예시: HTML 태그(<button>, <input>, <label>), 색상, 폰트, 간격 등  - 특징: 기능은 없고 스타일 중심이며, 디자인 시스템의 가장 작은 구성 블록 2.2 Molecule (분자)  - 정의: 두 개 이상의 원자들이 결합해 기능을 수행하는 UI 요소입니다.  - 예시: <label> + <input>을 결합한 검색창, 버튼 + 아이콘 등  - 특징: 단일 목적의 UI 기능 수행, 재사용 가능성이 높은 구성 2.3 Organism (유기체)  - 정의: 여러 개의 분자나 원자가 결합되어 복잡한 UI 구조를 형성합니다.  - 예시: 헤더(header) 영역 - 로고, 내비게이션, 검색창 포함.  - 특징: 비교적 독립적인 UI 단위, 페이지 내 주요 구조를 이룸. 2.4 Template (템플릿)  - 정의: 유기...