REALITY

4-4) 버튼 컴포넌트에 아이콘 추가하기 실습: 아이콘 추가하기아이콘 모두 잡고 컴포넌트로 만들면 안되고 --> 아이콘들이 개별적으로 컴포넌트로 만들어야 한다. --> 컴포넌트 옵션을 선택하고 여러 컴포넌트로 만들기를 눌러야 한다. 만든 컴포넌트를 복제하려면 alt 누르면 복제가 된다. 복제된 인스턴스는 이름이 안보이고, 마스터 컴포넌트만 이름이 보인다. 버튼 컴포넌트에 불리언 추가 (True로 해놓는 게 좋음 -> 나중에 수정할 때 다시 켜야 하니까)버튼 아이콘 눌러서 appearance 외형 -> 위에서 추가한 불리언 선택복사해서 불리언 껐다, 켰다가 되는 지 확인해본다. 4-5) 버튼 컴포넌트의 아이콘 교체하기 실습: 아이콘 교체하기컴포넌트 속성 추가-> 인스턴트 교체아이콘 선택하고 상단의 인스..

4-2) 컴포넌트 프로퍼티의 이해 · 의사상태 복습: (예시) 버튼에 마우스를 호버했을 때, 색깔이 바뀌는 것은 실제 버튼이 바뀐 게 아니라 버튼이 가진 가상의 상태를 나타내는 것이다. 컴포넌트 프로퍼티란?· 컴포넌트가 가상의 상태를 가질 때, 형태가 변화하거나 or 컴포넌트 안의 요소가 바뀌는 경우가 있다. 컴포넌트 프로퍼티는 이런 변화와 변경을 만들 수 있는 피그마 컴포넌트 기능이다. · 사용하는 이유: 피그마에서 UI를 디자인하는 것은 컴포넌트를 만들고 인스턴스를 다루는 것과 밀접한 관련이 있다. 오토레이아웃 등 피그마를 최대한 활용해서 컴포넌트를 만들고, 인스턴스를 디자인에 적용하는 과정을 반복하기 때문이다. 위 과정에서 하나의 컴포넌트로 더 많은 디자인을 효율적으로 만들어야 하는데, 이때 필요..

3-8) UI 만들기 실습(1) 버튼 컴포넌트· 버튼 컴포넌트 참고는 노션 참고하기(머터리얼 디자인, 우버 디자인 시스템, 라이트닝 디자인 시스템, 카본 디자인 시스템, ... )· 버튼 컴포넌트는 액션에 해당하는 컴포넌트다. · 버튼 컴포넌트를 누름으로써 중요한 동작을 수행하는 요소다. 버튼 설계 시 유의할 점· 우리가 직관적으로 알아야 한다. · 상호작용이 가능한 물체는, 상호작용이 가능하다는 시각적인 단서를 제공해야 한다. => 행동 유도성· 버튼을 설계할 때, 누를 수 있다는 시각적인 힌트를 드러내야 한다. => 행동을 유도하는 속성, '어포던스'라고 부른다. · 버튼을 디자인할 때, 심미적인 완성도보다 버튼의 목적을 우선 생각해서 설계해야 한다. 버튼의 구조 💡컴포넌트는 항상 구조 파악이 ..

3-5) 마스터 컴포넌트와 인스턴스 컴포넌트란?· 구성품이라는 뜻을 가지고 있으며, 파운데이션을 조합해 만들어지는 구성품을 이야기한다. · 컴포넌트는 디자인과 개발에서 모두 쓰인다. - 디자인에서는 피그마로 만든 UI 블록과 같은 말로 사용한다. - UI 디자인에서는 파운데이션을 조합해 만든 디자인 단위의 개념이다. 마스터 컴포넌트란?· 컴포넌트 기능의 핵심이다. · 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 해준다. · 마스터 컴포넌트는 원본이며 변하지 않는다. · 원본 그대로이기 때문에 수정이 필요하면 수정하면 되고, 지우고 싶으면 지워도 된다. · 마스터 컴포넌트를 복제하면 복제본, 인스턴스가 생긴다. 인스턴스· 인스턴스는 마스터 컴포넌트의 복제본이다. ..

3-2) 파운데이션 · UI를 디자인하기 전 기초 재료는 컬러와 폰트다. · UI는 기초 재료인 파운데이션과 이 파운데이션을 조합해 만드는 컴포넌트로 나눌 수 있다. · 버튼이라는 컴포넌트를 만들기 위해서는 파운데이션부터 만들어야 한다.· 모든 컴포넌트들은 이 파운데이션 요소를 조합해서 만들 수 있다. 파운데이션의 구성· 색상 Color· 서체 Font, Typography· 간격, 여백 Spacing, Gap· 곡률 Radius· 그리드 Grid· 고도 Elevation (높이 개념)· 아이콘 Icon 3-3) 컬러 스타일 RGB와 Hex Code· 디스플레이는 빛의 3원색(RGB -> 빨, 초, 파이고 모일수록 밝아짐)으로 구현되는 화면이다. · 빛의 농도와 명암을 조절해 여러가지 색으로 만든다..

2-5) 프레임과 컨스트레인트 컨스트레인트란?· 오토레이아웃은 레이아웃을 자동으로 쌓을 수 있지만, 반응형 웹사이트처럼 실시간으로 움직이는 레이아웃을 만들기 위해서는 오토레이아웃이 움직일 때의 규칙을 만들어줘야 한다. · 컨스트레인트는 제약(조건), 제한이라는 뜻이다. · 오토레이아웃 안에 있는개체들이 움직이는 방식을 제한한다라는 뜻이다. · 부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?를 정할 수 있다. 2-6) 프레임 리사이징 리사이징이란?· 프레임은 가로와 세로가 고정이며, 이 상태를 Fixed 라고 부른다. · 프레임을 오토레이아웃으로 감싸는 순간, 다른 사이즈 값이 생기는 데 이를 리사이징이라고 부른다. (= 사이즈가 변경된다는 뜻)· 부모의 길이나 크기에 따라 ..

2-2) 프레임과 그룹 프레임과 그룹프레임이란?· 프레임은 피그마 디자인의 기본 단위이다. · 프레임은 피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체이다. · 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어진다. · 프레임은 다른 개체나 프레임을 넣을 수 있기 때문에 컨테이너라고도 부른다. 그룹이란?· 여러 개체를 조정하거나 디자인을 정리하는 등 여러 개체를 하나로 담는 기능이다. · 프레임과 달리 그룹은 코드블록으로 인식되지 않는다. · 그룹은 SVG 이미지로 인식한다고 생각하면 된다. 프레임 vs 그룹· 프레임은 코드 블록으로 만드는 기능이고, 실제 코드로 바꿀 수 있다. .·그룹은 편집이나 조정이 필요할 때 쓰는 기능이다. 2-4) 오토레이아웃 기능 살펴보..

1-3) 디스플레이와 배수 해상도란?· 해상도는 디스플레이의 선명한 정도를 나타낸다. · 해상도는 디스플레이 안에 들어가 있는 픽셀의 개수를 의미한다. 해상도와 픽셀의 관계· 화면의 크기가 클수록 픽셀 한 칸의 크기도 커진다 .(해상도가 같은 상황)· 해상도가 높을 수록 픽셀 한 칸의 크기는 작아진다. (모니터 크기가 같은 상황)· 일반적으로 화면 크기가 클수록 해상도가 높다. - 8*8 해상도는 4*4 해상도보다 면적 당 픽셀 갯수가 4배 많기 때문에 4배 더 선명하고 세밀하게 표현 가능 1배수 디자인· 1배수 디자인이란? 디자인할 때 기준이 되는 사이즈를 하나 정해야 하는데 그 사이즈를 1배수 디자인이라고 한다. · 1배수 디자인을 정하는 방법 사람들이 가장 많이 사용하는 사이즈로..