UIUX Design

프레임이 아닌 개체에 오토레이아웃을 적용하면 기본 패딩 값을 가진 오토레이아웃 컨테이너가 생성된다 이미 만들어진 프레일에 오토레이아웃을 적용하면 프레임 자체가 오토레이아웃으로 변경되면서 기본 패딩 값이 없이 컨테이너가 생성된다 디자인 패널 - 오토레이아웃 오토레

Constraint (컨스트레인트)는 제약, 제한이라는 뜻을 가지고 있는데 Auto Layout 안에 있는 개체들이 움직이는 모양을 제한한다는 뜻이다. 즉, 부모 컨테이너의 크기가 변할 때 자식 컨테이너에게 너는 어디를 기준으로 변할지를 정해주는 것이다. Const

해상도에 따라 동작하는 웹사이트를 만들기 위해서는 분기점과 그리드를 잘 알아야 한다. 1. 분기점(Breakpoint) 디스플레이의 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점이다. 한 웹사이트를 접속할 때 우리는 스마트폰, 태블릿, 데스크탑, 노트북 등의

웹사이트나 앱을 디자인하는데 이 웹과 앱을 프로덕트(제품)라고 부른다. 우리 디자이너는 사용자들이 겪는 문제를 찾아서 디자인적으로 개선하는 것이 임무인데, 이를 계속 빠르게 반복하다가 보면 매번 새롭게 UI를 만드는 것이 여러워지기에 미리 만들어 놓고 필요할 때마다 가

디자인 시스템을 이루는 기본 재료들로 컴포넌트를 만들기 위해 사용하는 공통 재료이다. 모든 컴포넌트는 파운데이션 요소의 조합으로 만들어낼 수 있다.(팀 or 회사에 따라 조금씩 다를 수 있음)색상 (color)서체 (Font, Typography)아이콘 (Icon)레이

디스플레이는 빛의 3원색으로 구현되는 화면이며, 빛의 농도와 명암 조절을 통해 여러가지 색을 만들어낸다. (빛의 3원색: 빨강, 초록, 파랑 / 가산혼합)빛의 3원색 첫 글자를 따서 RGB 색상이라는 네이밍이 탄생했고, 컴퓨터는 각각의 색상을 256가지의 값으로 보여

디자인 시스템에서 사용할 폰트를 모아둔 목록으로 폰트 스케일이라 부르기도 한다. 여기서 스케일이란 일정한 규칙에 따라 정렬된 하나의 세트를 뜻한다.폰트 종류를 뜻하며 편하게 폰트 이름이라 생각하면 된다.일반적으로 굵기라는 뜻이지만 디자인 시스템에선 무게감을 의미한다.

컴포넌트는 무언가를 만들기 위한 재료 또는 구성품이란 뜻이며, 원자 요소(Atom)를 결합하여 만든 분자(Molecule) 단위 구성 요소다.'즉, 디자인에서의 컴포넌트는 파운데이션의 조합을 쌓아서 만드는 구성품을 이야기한다.해당 버튼들의 색상이나 형태에 차이가 있음에

컴포넌트를 설계할 때 만들 수 있는 다양한 상태값.컴포넌트의 경우 기본 속성은 유지한 채, 상황에 따라 다른 형태와 모양을 가지게 된다. 이런 것들을 의사 상태라고 한다.여기서 의사란 가짜, 가상의(pseudo)라는 뜻이먀, 컴포넌트의 가상의 상태를 표시할 떄 사용한다

▶️ 마스터 컴포넌트와 인스턴스를 다루는 기본 원리 알아보기피그마에서 쓸 수 있는 컴포넌트 기능의 핵심이며, 반복적인 디자인을 빠르게 하기 위해 디자인을 복사하여 사용할 수 있게 하고 복사된 디자인들을 한번에 수정 및 편집할 수 있도록 해 주는 중요한 기능이다.피그마에

▶️ 컴포넌트를 다양한 환경에서 유연하게 쓸 수 있도록 하는 배리언츠와 프로퍼티 기능 알아보기 배리언츠와 프로퍼티는... 컴포넌트는 가상의 상태를 가질 수 있고 이때 형태에 조금씩 변화를 주어야 하거나 컴포넌트 안의 요소가 바뀌는 경우도 있는데 베리언츠와 프로퍼티는

버튼 컴포넌트란 컴포넌트의 종류 중 액션에 해당되는 것으로 유저가 이것을 누름으로써 중요한 동작을 수행하는 요소이다. 버튼 설계 시 유의점 행동 유도성(Affordance) 상호작용이 가능한 물체는, 상호작용이 가능하다는 시각적 단서를 제공해야 한다는 뜻으로, 버튼

▶️ 기본적인 버튼은 위계, 크기, 상태 배리언츠를 가지며 여기서 가장 기본이 되는 것은 프라이머리, 라지, 디폴트 버튼이다.버튼의 라벨이 될 글자를 작성한 후 오토레이아웃으로 글자를 감싸준다.그런 다음 스타일을 적용해준다배경색 : 포인트 색상의 400~600 중에서