쑥이의 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): 단색, 그라디언트, 이미지, 비디오 등 다양한 채우기 속성을 스타일로 저장합니다. 최근에는 복잡한 패턴이나 질감을 ...