REALITY

5-6) 프로토타입과 프로토타이핑 프로토타입이란?원래의 뜻은 시제품이며, 디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것을 뜻한다. 구현하는 정도에 따라 낮은 단계와 높은 단계로 나눌 수 있다. Lo-fi(Low-fidelity): 낮은 단계의 프로토타입으로, 전체적인 흐름을 빠르게 맞춰 볼 수 있는 수준와이어프레임도 이에 해당한다. Hi-fi(High-fidelity): 높은 단계의 프로토타입으로, 실제 제품과 거의 같거나 유사한 수준으로 만듦프로토타입을 만들거나 프로토타입을 사용해 테스트하는 것을 프로토타이핑(Prototyp-ing)이라고 한다. 프로토타입을 만드는 이유실제 제품을 만들지 않고 아이디어를 검증해볼 수 있다. 팀 구성원들과 시각적인 결과물로 소통할 수 있다...

5-2) 화면 디자인 실습 - 홈 화면 만들기화면 단위 디자인을 수행하며 필요한 UI 설계하기프로토타입의 개념을 이해하고 피그마에서 프로토타이핑 사용하기 홈 화면 만들기1배수 화면이 뭐였지?디자인하기 위한 기준 사이즈로 일반적으로 375*812(아이폰) 또는 360*800(안드로이드)으로 만든다. 프레임 생성하기히어로 섹션 추가하기메인의 가장 상단 영역을 뜻한다. 앱 바 컴포넌트 추가하기네비게이션에 해당하는 컴포넌트로, 앱 화면 상단에 고정되어 현재 화면의 이름을 알려주면서 이전 화면으로 돌아갈 수 있도록 해준다. 앱 바 컴포넌트의 구조 타이틀: 현재 화면의 제목힌트 텍스트: 부가적인 정보리딩 엘리먼트: 뒤로 가기 또는 닫기 아이콘 사용하는 영역트레일링 엘리먼트: 설정이나 더보기 등 현재 화면과 관련된..

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 -> 빨, 초, 파이고 모일수록 밝아짐)으로 구현되는 화면이다.빛의 농도와 명암을 조절해 여러가지 색으로 만든다. 빛의 3원색은 빛을 더해가며 다른 색을 만..

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

2-2) 프레임과 그룹 프레임이란?프레임은 피그마 디자인의 기본 단위이다.프레임은 피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체이다. 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어진다. 프레임은 다른 개체나 프레임을 넣을 수 있기 때문에 컨테이너라고도 부른다. 그룹이란?여러 개체를 조정하거나 디자인을 정리하는 등 여러 개체를 하나로 담는 기능이다. 프레임과 달리 그룹은 코드블록으로 인식되지 않는다. 그룹은 SVG 이미지로 인식한다고 생각하면 된다. 📌그룹은 언제 사용하는지?여러 요소를 한 번에 담아서 움직일 때 주로 사용한다. 복잡한 디자인들을 정리할 필요가 있을 때 그룹을 사용해서 정리하기도 한다. 프레임 vs 그룹프레임은 코드 블록으로 만드는 기능이고, 실제..

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