쑥이의 UI/UX 온라인강의

1. 피그마와 프로토타입 피그마의 프로토타입 기능을 활용하면, 디자인 요소에 전환, 애니메이션과 같은 인터랙션 효과를 만들 수 있습니다. [Prototype] 메뉴를 살펴보면 디바이스의 기종과 색상, 미리보기 화면의 바탕화면 색상을 지정할 수 있는 옵션이 있습니다. 2. 프레임 인터랙션(Interaction)의 이해 가장 빈번하게 사용되는 인터랙션은 프레임과 프레임 간의 페이지 전환으로 이루어지는 경우가 많고, 프레임 전환  인터랙션은 같은 오브젝트가 다른 프레임에서 색상이나 그림자와 같은 변화로 페이지가 전환되는  인터랙션을 말합니다. 3. 베리언트 스위치 인터랙션 디자인을 하다 보면 한 페이지 안에서 일어나는 인터랙션이 매우 많을 때가 있습니다. 따라서 버튼 형태에 인터랙션을 적용해야 한다면, 버튼을 제작하는 베리언트 단계에서 인터랙션을 지정하여 사용하는 것이 더 효율적입니다. 4. 버튼 인터랙션 버튼은 사용자와 서비스가 상호작용 할 때 가장 많이 사용하는 컴포넌트 중 하나이며, 서비스의 상태를 표시할 수 있는 요소이기도 합니다.  호버(Hover)와 프레스드(Pressed)상태의 버튼을 만들어보고 탭 했을 때 다른 프레임으로 이동하는 인터랙션을 제작해 봅니다. 5. 캐러셀(carousel) 인터랙션 캐러셀은 서비스의 메인 페이지에서 디자인 컨셉이나 마케팅 정보를 순서대로 전환하면서 보여주는 이미지 방식으로 자동 또는 수동으로 이미지를 이동 시킬 수 있습니다. 이는 메인 페이지의 히어로(hero) 이미지뿐만 아니라 다양한 형태의 콘텐츠를 노출하는 방식으로 구현할 수 있기 때문에 이미지를 좌우로 드래그하여 보여주거나 여러 개의 콘텐츠를 배치하여 보여줄 때 유용한 방식입니다. 프레임 밖으로 사각형이 보이는 것은 사각형을 프레임 안에 배치하지 않았다는 의미이며, [Layer...

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

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

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) ...

2. 서비스 디자인 개발 방법론 디자인을 개발하는 방법론은 매우 다양하고 설정한 목표와 방향성에 따라 사용하는 방법도 다릅니다. 수많은 방법론 중에서도 대표적인 서비스 디자인 개발 방법론인 '애자일 프로세스'와 '린 프로세스'는 사용자의 요구 사항을 적극적으로 수용하고 제품을 빠르게 전달해 고객 가치와 만족도를 높인다는 공통점이 있습니다. 2.1 애자일 프로세스(Agile Process) 소프트웨어가 어느 정도 사용 가능할 만큼 개발되었다면 빠르게 출시한 후 사용자의 의견을 수집하며 제품을 수정하고 다시 배포하는 과정을 반복하는 방법이다. 애자일 방법론은 계획 → 설계(디자인) → 개발(발전) → 테스트 → 검토(피드백) 순으로, 반복적으로 진행됩니다. 계획을 세운 후 각 단계를 순차적으로 진행하는 Waterfall 모델과 달리, 애자일은 먼저 진행 후 분석, 시험, 피드백을 통하여 개선하여 나가는 진행 모델입니다. 1. 계획 및 분석: 고객과 사용자의 요구사항을 파악하여 타당성을 조사하고, 소프트웨어 기능과 제약조건을 정의하는 명세서 작성 및 문제 영역과 사용자의 작업 요구사항을 이해하는 단계 2. 설계(디자인): 기획 의도에 맞는 설계 및 디자인 추가 및 수정하는 단계 3. 개발(발전): 설계단계에서 만들어진 설계서를 바탕으로 프로그램 작성, 코딩, 디버깅, 단위/통합테스트 수행 4. 테스트: 발생 가능한 실행 프로그램의 오류를 발견하는 단계 5. 검토(피드백): 기획 의도 파악 및 시험 결과에 따라 수정할 부분을 제시하는 단계 2.2 애자일 방법론의 장점, 단점 장점 단점 1. 프로젝트 계획에 걸리는 시간 최소화 가능 2. 점진적으로 테스트로 쉽고 빠르게 버그 발견 가능 3. 계획 ...

 서비스 디자인(Service Design)이란? 사용자의 요구를 파악하고 이를 해결하는 전반적인 과정을 설계하고 실행 가능한 서비스 또는 제품으로 구현한 것을 말합니다. 1. 서비스 디자인 프로세스 디자인을 하기에 앞서 무엇부터 시작해야 하고, 어떤 준비가 필요한지 전체적인 흐름을 파악해야 합니다. 디자인 프로세스는 시장 분석, 타깃 설정, 목표 수립, 현장 조사와 아이디어 구체화, 테스트까지의 단계별 과정을 정리한 문제 해결 접근 방식을 말합니다. 1.1 디자인 씽킹(Design Thinking) 사용자의 행동과 이해를 바탕으로 문제를 재정의하고, 프로토타입 배포와 테스트를 거쳐 혁신적인 해결책을 도출하는 비선형적이고 반복적인 프로세스를 말합니다. 1.2 디자인 씽킹의 5단계  : 공감 > 정의 > 아이디어 발굴 > 프로토타입 > 테스트  [공감(Empathize)]  - 리서치 Data 분석, 관찰 조사, 인터뷰, 트렌드 조사 등을 실시합니다.  - 공감(Empathize), 문제 정의(Define) 두 단계를 분리하지 않고, 이 둘을 통합하여 '몰입(Immersion)'으로 정의하는 이론도 있음. [문제 정의(Define)]  - 사용자(User)의 입장에서 불편함을 느끼는 지점(Pain Point)이 무엇인지 찾아내는 것 과정입니다.  - 주제 설정을 위한 Who, What, Why에 대한 질문을 통해 주제의 대상, 니즈, 필요 가치 키워드 등을 분석합니다. [아이디어(Ideate)]  - 문제를 해결할 수 있는 많은 아이디어를 만들어낸 후, 가장 적합하다고 판단하는 아이디어를 선택하는 과정입니다.  - 사용자 모델링, 가치제안 맵, 고객 여정 맵, 등을 통해 현재의 문제점과 가치 분석을 통해 아이디어를 도출하는 과정이기도 합니다. ...

1. 지마켓 디자인 시스템 개요 지마켓은 이베이코리아의 대표적인 이커머스 플랫폼으로, 수많은 사용자와 판매자를 연결하는 복잡한 서비스 구조를 가지고 있습니다. 이러한 대규모 서비스를 일관되게 유지하면서도 효율적으로 발전시키기 위해 지마켓은 체계적인 디자인 시스템(GDS: Gmarket Design System)을 구축하여 운영하고 있습니다. 지마켓의 디자인 시스템은 2021년에 공식 출시되었으며, 브랜드 정체성, 사용성, 일관성을 고려한 가이드라인을 제공하고 있습니다. 최근 2025년에는 AI 기술과의 통합을 통해 디자인 시스템 2.0으로 발전하며 더욱 혁신적인 변화를 이루고 있습니다. 2. 디자인 원칙 및 철학 지마켓 디자인 시스템(GDS)은 다음과 같은 세 가지 핵심 원칙을 바탕으로 합니다 2.1 일관성 GDS는 G마켓의 브랜드 정체성에 기초하여 프로덕트의 사용성을 높입니다. 파운데이션 및 컴포넌트가 모여 일관된 형상 및 패턴과 사용자 경험을 제공합니다. 이를 통해 사용자는 플랫폼 내에서 일관된 경험을 할 수 있으며, 새로운 기능이나 페이지를 접했을 때도 쉽게 적응할 수 있습니다. 2.2 확장성 GDS는 사용자와 작업자의 니즈에 따라 지속적으로 유지 및 관리됩니다. 디자인 가이드라인, 컴포넌트 라이브러리, 리소스 등의 공동 자산을 일관되게 유지함으로써 시스템의 확장성을 보장합니다. 2025년 도입된 AI 기술과의 통합은 이러한 확장성을 더욱 강화하고 있습니다. 2.3 효율성 GDS 자산을 재사용함으로써 작업자는 구조적 관점에서 사용자 경험을 고민할 수 있는 시간을 확보할 수 있습니다. 이는 작업자의 생산성과 효율성을 높이고, 궁극적으로 프로덕트 및 사용자 경험을 강화하는 데 기여합니다. 3. 시각적 언어(Visual Language)...

1. 개요 및 철학 Carbon Design System은 IBM이 개발하고 사용하는 오픈소스 디자인 시스템으로, 사용자 중심의 인터페이스를 일관되게 설계하고 구현하기 위한 체계적 가이드입니다. Carbon은 IBM의 다양한 제품군 전반에서 시각적 일관성과 접근성을 보장하기 위해 만들어졌으며, 사용성과 확장성, 접근성(accessibility)을 최우선으로 고려한 시스템입니다. Carbon은 단순히 UI 컴포넌트의 집합이 아니라, 디자인 원칙, 가이드라인, 토큰 시스템, 코드 구현, 접근성 정책 등을 모두 포함하는 디자인 생태계입니다. Carbon의 핵심 철학은 다음 세 가지에 기반합니다:  - 모듈성과 확장성(Modular & Scalable): 다양한 제품에 적용 가능하도록 유연하게 설계됨.  - 접근성 우선(Accessibility first): WCAG 2.1 AA 기준 이상을 기본으로 설계.  - 오픈 협업(Open Collaboration): 오픈소스로 공개되어 외부 기여도 가능. 2. 아키텍처 구성 Carbon Design System은 크게 다음과 같은 핵심 구성 요소로 이루어져 있습니다. 2.1. Design Tokens 디자인 토큰은 색상, 타이포그래피, 간격, 그림자 등의 디자인 결정값을 추상화한 변수들입니다. 이를 통해 일관된 테마와 스케일 조정이 가능해집니다. 2.2. Component Library Carbon은 React 기반의 UI 컴포넌트들을 중심으로 하며, Vue, Angular, Web Components 버전도 지원합니다. 주요 컴포넌트로는 다음이 있습니다:  - Form Elements: Text Input, Dropdown, Checkbox 등  - Navigation: Side Nav, Tabs, Breadcrumb  - Data Visual...

 마이크로소프트의 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): 최신 버전으로 크로스 플랫폼 ...

 Apple은 혁신적인 기술과 세련된 디자인으로 전 세계 사용자들에게 사랑받는 기업입니다. 이러한 성공의 뒤에는 사용자 중심의 철학이 깊이 자리 잡고 있으며, 이는 Apple의 제품과 서비스 전반에 걸쳐 일관된 사용자 경험(UX)을 제공하는 휴먼 인터페이스 가이드라인 (Human Interface Guidelines, HIG)에 잘 나타나 있습니다. HIG는 Apple 플랫폼 (iOS, iPadOS, macOS, watchOS, tvOS) 상에서 작동하는 앱과 웹사이트를 디자인하고 개발하는 데 필요한 포괄적인 지침과 권장 사항을 제공합니다. 단순히 시각적인 스타일을 넘어, 사용자가 Apple의 제품을 직관적이고 즐겁게 사용할 수 있도록 하는 근본적인 원칙과 실질적인 디자인 패턴을 제시합니다. 1. 핵심 원칙 (Core Principles) Apple HIG는 다음과 같은 세 가지 핵심 원칙을 기반으로 합니다. 이 원칙들은 모든 디자인 결정의 기초가 되며, 사용자에게 최상의 경험을 제공하는 것을 목표로 합니다. 심미성 (Aesthetic Integrity): 시각적인 디자인은 앱의 기능과 목적을 명확하게 전달해야 하며, 사용자의 시각적인 즐거움을 제공해야 합니다. 인터페이스는 깔끔하고 정돈되어야 하며, 과도한 장식이나 불필요한 요소는 피해야 합니다. Apple 플랫폼의 고유한 시각적 스타일을 존중하고, 일관성을 유지하는 것이 중요합니다. 일관성 (Consistency): 앱 내부는 물론, Apple 플랫폼 전반에 걸쳐 일관된 사용자 인터페이스 요소를 사용해야 합니다. 이는 사용자가 새로운 기능을 쉽게 이해하고 예측할 수 있도록 돕습니다. 표준 컨트롤, 아이콘, 용어 등을 일관되게 적용하고, 플랫폼의 관례를 따르는 것이 중요합니다. 직접 조작 (Direct Manipulation): 사용자는 화면의 객체를 직접 조작함으로써 앱과 상호작용을 할 수 있어야 합니다. 터치, 드래그 앤 드롭,...

기업이 추구 하는 바에 따라 디자인 시스템은 다양한 형태와 발주로 구성되어 있습니다. 일반적으로 개요에서 자사의 디자인 원칙과 지향하는 목적을 밝힌 후 디자인 구성요소, 코드 등과 같은 주요 범주를 보여주는 최상위 탐색 방식으로 구성되어 있습니다. 구글의 머티리얼 디자인은 구글의 디자이너와 개발자가 구축하고 지원하는 디자인 시스템으로 안드로이드, 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 요소는 종이, 잉크, 빛 등의 물리적 속성을 가상 공간에서 구현하는 개념입니다.  - 그림자, 깊이감, 계층 등을 사용하여 사용자의 ...

 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 (템플릿)  - 정의: 유기체...

 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 라이브러리 업데이트와 동기화 라이브러리에서 컴포넌트나 스타일을 수정하면, 이를 ...

 쏘카의 디자인 시스템인 SOCAR FRAME은 일관된 사용자 경험을 제공하고, 디자인과 개발 간의 효율적인 협업을 위해 구축된 체계적인 시스템입니다. 이 시스템은 컬러 시스템과 컴포넌트 구조를 중심으로 구성되어 있으며, 특히 다크 모드 대응에 중점을 두고 있습니다. 🎨 컬러 시스템: 베이직 & 시멘틱 컬러 쏘카는 기존의 단순한 명도 기반 컬러 시스템에서 벗어나, 베이직 컬러와 시멘틱 컬러로 구성된 새로운 컬러 시스템을 도입했습니다. - 베이직 컬러: 명도나 기능에 따라 정의된 컬러 팔레트로, 'tint'와 'grey'로 구분되며, 각 컬러는 최대 8단계의 명도로 세분화되어 있습니다. - 시멘틱 컬러: UI 요소의 목적과 사용 맥락에 따라 네이밍된 컬러로, 예를 들어 'background_base', 'text_primary' 등이 있습니다. 이러한 시멘틱 컬러는 라이트 모드와 다크 모드에서 각각 다른 베이직 컬러를 참조하여, 모드 전환 시에도 일관된 사용자 경험을 제공합니다.  🧩 컴포넌트 구조: Origin & Option 컴포넌트는 Origin(고정 속성)과 Option(가변 속성)으로 나뉘어 설계되었습니다. - Origin: 컴포넌트의 고유한 형태와 상태를 정의하는 속성으로, 예를 들어 버튼의 높이, 텍스트 스타일 등이 해당됩니다. - Option: 테마나 상황에 따라 변경 가능한 속성으로, 주로 컬러와 관련되어 있습니다. 디자이너는 스케치에서 Symbol Overrides를 활용하여 Option 값을 수정하고, 개발자는 개발 환경에서 미리 설정된 Option 값을 쉽게 수정할 수 있도록 구성되어 있습니다.  🌙 다크 모드 대응 쏘카는 다크 모드 대응을 위해 컬러 시스템을 재구축 하였습니다. 다크 모드에서는 레이어의 깊이를 표현하기 위해 상단 레이어일수록 밝은 색을 적용...