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

디자인 시스템의 구조는 각 기업의 제품이나 서비스에 따라 알맞게 구성하면 되므로 별도의 정해진 형식은 없습니다. 따라서 다양한 디자인 시스템 구축 사례들을 참고하여 핵심이 되는 요소들을 작성하면 됩니다. 1. 파운데이션(Foundation) 디자인 시스템의 가장 기본이 되는 기초 항목에 대한 내용을 정리한 페이지를 말합니다.  - 환경 요소 : 그리드, 간격, 엘리베이션(Elevation)  - 기초 요소 : 컬러 시스템, 타이포그래피, 아이콘, 형태  - 기타 요소 : 상태  2. 그리드 시스템 페이지 구성하기 그리드(Grid)는 작업 화면에서 콘텐츠를 배치할 때 사용하는 기준선을 말합니다. 디바이스 크기에 맞게 그리드 시스템을 미리 구성해 두면 콘텐츠를 제작할 때 이미지와 텍스트의 배치와 정렬을 쉽게 할 수 있습니다. 그리드 시스템은 각 프레임 크기별 그리드와 함께 브레이크 포인트와 레이아웃을 포함하기도 합니다. * 브레이크 포인트는 반응형 또는 적응형 디자인에서 브라우저의 크기가 모바일, 태블릿, 데스크톱 등고 같이 특정 넓이가 되었을 때 디자인이 변경되는 지점을 말합니다. 모바일, 태블릿, 데스크톱 3개의 브레이크 포인트만 있기도 하고 모바일과 태블릿의 가로세로 간격 등을 고려하여 더 많은 브레이크 포인트를 지정하기도 합니다. 3. 디자인 토큰의 활용 디자인 토큰을 활용하여 컴포넌트의 간격(Spacing)과 높이(Elevation)값을 설정합니다. 간격은 '8dp' 디자인을 고려한 '8dp grid'를 기본으로 제작합니다. 또한 머티리얼(Material) 디자인 가이드의 타이포그래피를 대비하여 '4dp grid' 간격도 함께 설정합니다. 리소트툴을 클릭하여 창에서 [Plugins]를 선택한 후 'Tokens Studio For Figma'를 선택하여 실행합니다. 4. 엘리베이션(Eleva...

1. 베리언트(Variants)의 이해 저도 프로젝트를 진행하다 보면 생각보다 많은 컴포넌트를 만들어 사용을 하기도 합니다. 컴포넌트의 형태는 같지만, 색상이 다른 [Light] 모드와 [Dark]모드를 제작하여 변경할 수도 있고, 같은 용도지만 크기를 Small/Medium/Large로 설정하여 사용할 수도 있습니다. 이처럼 스타일과 속성값이 다른 경우 일일이 모든 컴포넌트를 만들어 사용하는 것보다 비슷한 종류의 컴포넌트를 세트로 묶어서 사용할 수 있는 베리언트(Variants)를 활용하는 것이 좋을 것 같습니다. (1) 베리언트(Variants)의 주요 장점 및 활용 방법 베리언트는 디자인 시스템의 효율성을 극대화하는 데 핵심적인 역할을 합니다. ① 디자인 시스템의 간결화 수많은 컴포넌트를 단일 컴포넌트 셋으로 통합하여 에셋 패널(Assets Panel)을 훨씬 깔끔하게 유지할 수 있습니다. 디자이너가 필요한 컴포넌트를 찾기 쉬워집니다. ② 재사용성 및 일관성 강화 한 번 정의된 베리언트는 프로젝트 전반에 걸쳐 일관된 디자인을 유지하게 해줍니다. 속성만 변경하면 되므로, 디자인 에셋의 재사용성이 극대화됩니다. ③ 작업 속도 향상 원하는 컴포넌트 속성만 패널에서 선택하면 되므로, 일일이 수동으로 수정하거나 새로운 컴포넌트를 찾아 드래그할 필요가 없어 작업 속도가 비약적으로 빨라집니다. ④ 쉬운 유지보수 특정 컴포넌트의 디자인 변경이 필요할 때, 베리언트 셋 안의 마스터 컴포넌트만 수정하면 해당 베리언트를 사용하는 모든 인스턴스에 변경 사항이 반영됩니다. 이는 디자인 시스템 업데이트 시 엄청난 시간을 절약해 줍니다. ⑤ 개발자와의 협업 효율성 증대 개발자도 베리언트의 속성(Property)과 값(Value)을 명확하게 파악할 수 있어, 디자인과 개발 간의 싱크를 맞추기가 훨씬 용이해집니다. "이 버튼은 state: disabled, size: large 입니다." 와 같이 명확한 커뮤...

컴포넌트란 UI를 구성하는 재사용 가능한 블록입니다. 버튼, 입력 필드, 아바타, 카드, 모달 등 인터페이스를 이루는 모든 시각적 요소를 컴포넌트화하여 관리할 수 있습니다. 컴포넌트 활용의 중요성 1) 일관성 유지 여러 곳에서 동일한 UI 요소를 재사용함으로써 디자인의 시각적 일관성을 유지하고 브랜드 아이덴티티를 강화할 수 있습니다.  2) 생산성 향상 반복적인 디자인 작업을 줄이고, 컴포넌트의 인스턴스를 복사하여 빠르게 UI를 구성할 수 있어 작업 시간을 단축하고 생산성을 높입니다.  3) 유지보수 용이성 컴포넌트의 마스터 속성을 한 번만 수정하면 해당 컴포넌트의 모든 인스턴스에 변경 사항이 자동으로 적용되어 유지보수가 용이해집니다.   4) 협업 효율 증대 팀원 간에 공유된 컴포넌트 라이브러리를 통해 디자인 작업의 표준화를 이루고 커뮤니케이션 오류를 줄여 협업 효율성을 높입니다.  5) 접근성 향상 접근성을 고려하여 제작된 컴포넌트를 재사용함으로써 웹 및 앱 서비스의 접근성 기준을 쉽게 준수할 수 있도록 돕습니다. 피그마 컴포넌트의 활용 1. 그룹, 프레임, 컴포넌트의 이해 - 그룹은 콘텐츠를 하나의 그룹으로 묶는 개념이다. 그룹으로 묶인 콘텐츠는 크기, 색상, 속성이 모두 같이 변경됩니다. - 프레임은 콘텐츠를 아우르는 컨테이너의 개념이며, 내부 콘텐츠의 속성이나 크기에 영향을 주지 않습니다. - 컴포넌트는 재사용 가능한 디자인 요소를 묶은 것이다. 2. 컴포넌트와 인스턴스의 이해 - 컴포넌트 : 재사용 가능한 UI 요소로 등록한 원본을 의미합니다. - 인스턴스 : 원본 컴포넌트를 복제한 오브젝트를 말합니다. - 속성의 차이점 ① 원본 컴포넌트는 복제한 인스턴스의 색상, 크기, 형태 변화에 영향을 주지만, 인스턴스는 원본 컴포넌트에 영향을 주지 않습니다. ② 복제한 인스턴스의 속...

구글의 머티리얼 디자인은 구글의 디자이너와 개발자가 구축하고 지원하는 디자인 시스템으로 안드로이드, iOS, 플러터 및 웹에 대한 자세한 UX 지침과 UI 구성 요소를 구현하는 방법이 포함되어 있습니다. 최근에는 머티리얼 3으로 업데이트되면서 동적 색상과 향상된 접근성, 대형 화면의 레이아웃과 디자인에 이르기까지 개인적이고 확정된 경험을 만드는 가이드를 제공하고 있습니다. 구글 : 머티리얼 디자인 시스템 링크 : https://m3.material.io/ 1. 개요: 머티리얼 디자인이란? 머티리얼 디자인(Material Design)은 Google이 2014년에 발표한 크로스 플랫폼 디자인 시스템입니다. "물리적 세계의 규칙을 디지털 환경에 적용한다"는 철학을 기반으로 UI를 설계하여, 일관성 있는 사용자 경험을 보장하고 디자이너와 개발자의 협업을 효율화하는 데 목적이 있습니다. 공식 정의: “Material Design is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, web, and beyond.” 2. 철학과 원칙 머티리얼 디자인의 기반은 실제 물리 세계의 특성에서 영감을 받은 아래 3가지 철학적 원칙에서 출발합니다: 2.1 Material is the metaphor (재료는 은유다)  - UI 요소는 종이, 잉크, 빛 등의 물리적 속성을 가상 공간에서 구현하는 개념입니다.  - 그림자, 깊이감, 계층 등을 사용하여 사용자의 인지적 부담을 줄입니다. 2.2 Bold, graphic, intentional (대담하고 그래픽 중심적인 구성)  - 강한 타이포그래피, 컬러, 여백 사용을 권장합니다.  - 정보의 위계가 명확히 보이도록 설계합니다. 2.3 Motion pro...

 Figma의 패턴 라이브러리는 디자인 시스템 구축과 협업 효율성을 극대화하는 핵심 도구로, 일관된 사용자 경험을 제공하고 생산성을 향상시키는 데 중요한 역할을 합니다. 아래에서는 Figma의 패턴 라이브러리에 대한 자세한 설명과 구체적인 사례를 통해 그 구조와 활용 방법을 소개하겠습니다. 1. Figma 패턴 라이브러리란? Figma의 패턴 라이브러리는 버튼, 입력 필드, 모달, 네비게이션 등 재사용 가능한 UI 컴포넌트와 스타일을 체계적으로 정리한 디자인 자산 모음입니다. 이러한 라이브러리는 디자인의 일관성을 유지하고, 팀 간 협업을 원활하게 하며, 디자인과 개발 간의 간극을 줄이는 데 도움을 줍니다. 2. Figma 패턴 라이브러리의 핵심 구성 요소 2.1 컴포넌트(Components) 컴포넌트는 재사용 가능한 UI 요소로, 예를 들어 버튼, 카드, 모달 등이 있습니다. Figma에서는 이러한 컴포넌트를 생성하여 다양한 프로젝트에서 일관되게 사용할 수 있습니다. 2.2 스타일(Styles) 스타일은 색상, 타이포그래피, 효과 등을 정의하여 디자인 요소에 일관성을 부여합니다. 예를 들어, 브랜드 색상이나 기본 텍스트 스타일을 스타일로 정의하여 전체 디자인에 적용할 수 있습니다. 2.3 변수(Variables) 변수는 색상, 간격, 크기 등의 값을 저장하여 디자인에 동적으로 적용할 수 있도록 합니다. 이를 통해 다크 모드와 라이트 모드 간의 전환이나 다양한 테마 적용이 용이해집니다. 3. Figma 패턴 라이브러리의 구조와 관리 3.1 라이브러리 파일 구성 Figma에서는 라이브러리 파일을 생성하여 컴포넌트와 스타일을 중앙에서 관리할 수 있습니다. 이러한 라이브러리는 팀원들과 공유되어 프로젝트 전반에 걸쳐 일관된 디자인을 유지하는 데 도움을 줍니다. 3.2 라이브러리 업데이트와 동기화 라이브러리에서 컴포넌트나 스타일을 수정하면, 이를 ...

2025년을 기준으로 Figma는 AI 기능 강화, 협업 도구 확장, 사용자 경험 개선, 요금제 개편 등 다양한 변화를 도입하며 디자인 업계의 주목을 받고 있습니다. 주요 이슈와 변화를 아래와 같이 정리해 드립니다. 🧠 AI 기반 기능 강화 1. First Draft (AI 디자인 초안 생성기) 사용자가 입력한 텍스트 프롬프트를 기반으로 레이아웃, 타이포그래피, 컬러 스킴 등을 자동 생성합니다. 이 기능은 이전 디자인 패턴을 학습하여 점점 더 정교한 결과물을 제공하며, 초기 디자인 단계의 시간을 약 70% 절감할 수 있습니다. 2. 이미지 편집 기능 내장 Figma 에디터 내에서 이미지 해상도 향상 및 배경 제거 기능이 추가되어, 외부 툴 없이도 고품질의 시각 자료를 제작할 수 있습니다. 3. 레이어 자동 정리 다중 레이어를 일관된 네이밍 규칙으로 자동 정리하는 기능이 도입되어, 대규모 프로젝트에서의 파일 관리 효율성이 향상되었습니다. 🤝 협업 도구 및 개발자 지원 강화 1. Figma Slides 프레젠테이션 제작을 Figma 에디터 내에서 직접 수행할 수 있는 기능으로, 실시간 협업과 브랜드 일관성 유지를 지원합니다. 라이브 폴링, 스탬프, 프로토타입 임베딩 등의 인터랙티브 요소를 포함하지만, 비디오 삽입 및 PDF 내보내기 기능은 아직 제한적입니다. 2. 개발자 핸드오프 기능 강화 - 디자인 속성 변경 시 연결된 개발자 주석이 실시간으로 업데이트됩니다. - GitHub 문서나 코드 스니펫을 레이어에 직접 첨부할 수 있어, 개발자와의 소통 간극을 줄였습니다. 🎨 사용자 경험(UI) 개선 1. UI3 인터페이스 도입 -프레임 프리셋 개선: 마지막으로 사용한 프레임 크기를 기본값으로 적용하거나 기존 프레임 내용을 복제하여 빠르게 추가할 수 있습니다. ...

요즘 디자이너들 사용해야 하는 툴들이 다양화 되고 있습니다. 모든 툴들을 다 배워야 하는지 고민이 많을 것 같아 정리를 해서 도움을 주고자 글을 작성 하였습니다. 주요 UI 툴 비교 분석 항목 Figma Sketch Adobe XD Framer InVision Studio 협업 기능 🟢 실시간 협업 탁월 🔴 없음 (클라우드 전용 툴 필요) 🟡 제한적 실시간 공유 🟢 공유 기반 우수 🔴 단독 사용 중심 플랫폼 지원 🟢 All OS (웹 기반) 🔴 Mac 전용 🟢 Mac/Win 🟡 Mac 위주 🔴 Mac 전용 프로토타이핑 🟢 기본 제공 + 인터랙션 🟡 제한적 🟢 훌륭함 🟢 코드 기반 🟡 제한적 디자인 시스템 🟢 매우 강력 🟢 강력 🟡 중간 🟢 강력 🔴 부족 커뮤니티 / 리소스 🟢 세계 최대 커뮤니티 🟢 큼 🟡 보통 🟡 보통 🔴 작음 가격 🟢 무료/유료 플랜 🟡 유료 🟢 무료/유료 🟢 무료/유료 🟢 무료 ...