민정

> 강의 구성

> 강의 내용 정리

[ 인터렉티브 컴포넌트 스위치 ]

- 양쪽에 있는 원을 반대 프레임으로 연결시킨 후 프레임을 선택해보면 우측에 'Show prototype settings' 라는 버튼이 생긴다.

- 클릭해서 프레임과 비슷한 화면로 선택한 후 기타 아이폰 프레임 색상, 배경 색상 등을 설정할 수 있다.

  ( 프레임과 비슷한 화면이 아니면 잘려나갈 위험이 있다)

- 설정을 끝낸 후 우측 상단에 실행 버튼을 눌러보면 세팅했던 아이폰 화면이 나온다.

- 가운데 원 모양 오브젝트를 클릭해보면 인터렉션 세팅 값에 따라 색상이 변하는 것을 확인할 수 있다.

- 활성화 된 / 비활성화 된 라디오 버튼 형식의 오브젝트를 만들어주고 베리언트로 묶어준다.  ( 'Create component set' 설정)

- 우측에 프로토타입 탭으로 이동 후 베리언트로 묶은 오브젝트들을 연결시켜준다.

1. 다시 design 페이지로 이동한 후 새 프레임을 생성한다.

    컴포넌트로 생성된 라디오 버튼을 가지고 와서 화면 중앙에 배치한 후 우측 상단에 실행 버튼을 누른다.

2. 실행된 화면에 라디오 버튼이 생성된 것을 확인한다.

    라디오 버튼을 클릭해본다.

3. 프로토타입으로 연결해놓은 오브젝트로 변경된 것을 확인한다.

[ 버튼 ]

- 3종류의 버튼을 만들어준 후 'Create component set'으로 베리언트를 준다.

- 그리고 각각 프로퍼티즈 명칭을 부여한다.

- 실행했을 때 보여줄 액션 설정

[ 캐러셀 ]

= 캐러셀(Carousel)은 웹사이트나 앱에서 여러 개의 이미지, 비디오, 텍스트 등의 콘텐츠를 일정한 간격으로 순서대로 보여주는 UI 요소

[ 모달창 ]

- 모달창을 만들 때 모달로 들어갈 형식은 도형 형식이 아닌 '프레임'형식이어야 인터렉션을 설정할 수 있다.

  프레임을 오브젝트로 인식하기 때문

- 모달창에 대한 인터렉션 세팅.

- 세팅할 때 기본 값인 'Open overlay' 에 'Centered'로 설정한 후 실행하게 되면 모달창 안이 아닌 화면 정중앙에 배치되는 것을 확인할 수 있다.

- 이럴 땐 Position 의 값을 'Manual' 로 설정 후 사용자가 위치를 세팅한다.

- 그리고 인터렉션 세팅 값 하단에 보면 체크박스 2개가 있다.

  Close when clicking outside : 모달창 밖을 클릭하면 다시 원래 화면으로 돌아옴

  Background : 모달창이 실행됐을 때 뒷 배경이 어둡게 표현되도록 함

[ 내비게이션 드로워 ]

- 팝업 모달창 2개를 이용하여 내비게이션 드로워 실습하기

[ UI디자인 제작과 인터랙션 종합 실습 ]

- 좌우 스크롤과 오버플로우 스크롤의 차이는 진행 방향에 따라 화면 전환이 되는지 안 되는지에 대한 차이이다.

  좌우 스크롤의 경우 화면에서 일정 범위가 넘어가게 되면 진행 방향에 따라 화면이 전환되지만 오버플로우 스크롤은

  일점 범위 상관 없이 스크롤 하는 위치에 머무르게 된다. 

- Reporter 부분은 우클릭하여 'Frame selection' 설정을 해주고 스크롤할 때의 효과를 넣어줘야 한다.

- Constraints에 있던 'Fix posotion when scrolling' 체크 박스는 Prototype 영역으로 이동했다.

  스크롤 중 오브젝트가 상단에 다다르면 위치가 고정되는 'Sticky' 기능이 있다.

- 하단에 탭 부분은 각 아이콘에 맞게 간격을 주어 섹션을 나누어 작업한다.

- 제일 하단에 있는 On Tap 기능은 상단에 위치가 잘 맞는지 확인해보고 간격 조절을 해준다. ( Y값 조절 )

마지막 실습 때 오버플로우 스크롤링 관련 설정을 찾느라 시간이 너무 오래 걸렸다,,,,,,,,,,,,

구글링을 통해 찾아야 한다는 어려움은 계속 있,,,ㅠ

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

> 강의 구성

> 강의 내용 정리

[ 컴포넌트와 인스턴스 ]

- 컴포넌트 생성하기 (단축키 Ctrl + Alt + K)

- 컴포넌트를 생성하면 좌측에 Assets 탭에 생성된 컴포넌트를 볼 수 있다.

- 컴포넌트에 오토 레이아웃 설정(Hug로 설정하여 텍스트 값에 따라 변화할 수 있도록 설정

- 컴포넌트로 지정한 오브젝트를 복사 붙혀넣기 하면 좌측에 컴포넌트 아이콘과 비슷한 아이콘으로 오브젝트가 생성된다.

  = 인스턴스

- 컴포넌트의 속성 값을 변경하면 인스턴스들도 동일한 속성 값으로 적용된다.

- 인스턴스의 속성 값을 변경하면 해당 인스턴스만 적용되고 컴포넌트는 해당 값이 적용되지 않는다.

- 인스턴스의 크기를 변경하게 되면 그 이후로는 독립성을 가진다. (크기에 대한 독립성)

  그래서 컴포넌트의 크기를 변경하면 'component copy' 는 동일하게 크기가 변경되지만 'component copy_2' 는 크기가 바뀌지 않는다.

- 컴포넌트를 설정하려는 오브젝트가 많아지게 되면 하나하나 설정하기엔 불편함이 있으니

  설정하려는 오브젝트를 모두 선택한 후 'multiple' 속성으로 생성하면 각각으로 컴포넌트들을 생성할 수 있다.

- 페이지를 하나 더 생성한 후(design) Assets에 보여지는 컴포넌트를 하나 가지고 와서 인스턴스로 생성할 수 있다.

  원본 컴포넌트가 생성된 곳으로 이동하려면 우측 상단에 'Local instance' 를 클릭하면 원본으로 돌아갈 수 있다.

- 인스턴스를 수정했다가 다시 원래의 속성으로 되돌리려면 'Reset all changes' 를 눌러 원복시킨다.

1. 인스턴스의 속성을 컴포넌트로 적용시키기

2. 인스턴스와 컴포넌트의 연결을 해제하기 (독립성 부여) 

- 보통 실무에서 컴포넌트의 이름을 부여할 때는 영문으로 사용하기 때문에 나중에 수많은 컴포넌트들이 생기게 되면 

  내가 찾으려는 컴포넌트를 찾기 어려워질 수 있다. 이럴 때는 Description 부분에 한글로 설명을 적어놓으면 Assest 탭의 

  검색창에서도 영문으로 검색하는 것과 동일하게 검색할 수 있다.

[ 베리언트의 활용 ]

- Material Design3 에서 아이콘을 복사해오면 인스턴스로 지정되기 때문에 ' Detach instance' 로 독립적으로 만들어주고,

해당 아이콘을 'Outline stroke' 로 설정해주면 좌측에 아이콘화가 된 것을 확인할 수 있다.

- 위 세개의 버튼은 이미 각각 컴포넌트로 정의되어 있다.

- 세개의 버튼을 묶어 선택했을 때 우측에 보면 'Combine as variants' 설정이 표시된다.

- 아래의 세개 버튼은 각각 컴포넌트로 정의되지 않아 위의 설정이 표시되지 않는다.

- 각각을 컴포넌트로 지정한 후 묶어 선택하면 동일한 효과를 낼 수 있지만 다른 방법도 알아보자.

- 3종류의 크기와 아이콘이 있는 / 없는 오브젝트들을 모두 선택한 뒤 'Create component set' 으로 설정해주면 우측 설정창에 Properties 란이 나온다.

1. Properties 안에 오브젝트 속성에 맞게 이름을 지정해주고 각각 오브젝트들 속성값의 이름도 정해준다.

2. 그러면 Component 1 란에 Size라는 프로퍼티스 이름과 각 오브젝트의 속성값의 이름이 보여진다.

3. + 버튼을 눌러 또 다른 속성을 등록할 수 있다.

4. 이번에는 아이콘이 있는 / 없는 속성을 지정하기 위해 star_icon / yes no 값으로 추가해준다.

- 버튼을 클릭해보면 내가 지정했던 속성값에 맞게 우측에 보여지는 것을 확인할 수 있다.

- 그 이후부터는 인스턴스를 하나 불러온 후 우측에서 내가 원하는 속성에 맞는 버튼으로 그때 그때 변경하여 사용할 수 있다.

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

> 강의 구성

> 강의 내용 정리

[ 프레임과 레이어 ]

- 프레임 생성 단축기 F / A 
- 프레임 이름 바꾸기 (단축키 Ctrl R )
- 화면에서 프레임 작게 보기 (단축키 Ctrl - )
- 비율 100%로 맞추기 화면 1:1 비율로 맞추기 (단축키 Ctrl 0) 

 * 실무에서 가장 많이 사용하는 기능
- 화면 안에 꽉 차도록 비율 설정 (단축키 Shift 1 )

-  피그마에서는 프레임 하나를 오브젝트로 인식하기 때문에 프레임 안에 프레임을 생성하거나 그룹핑을 할 수 있다.

- Clip content 체크를 활성화 하여 프레임 밖으로 나간 오브젝트도 프레임 안에 귀속될 수 있도록 한다.

- 2개 이상의 오브젝트들이 겹쳐져 있을 때 순서 바꾸기

  * 한칸씩 앞으로 이동하기 = 단축키 Ctrl ] 

    한칸씩 뒤로 이동하기 = 단축키 Ctrl [

    맨 앞으로 이동하기 = 단축키 ]

    맨 뒤로 이동하기 = 단축키 [

- 오브젝트 잠금 / 잠금해제 (단축키 Ctrl Shift L)

- 오브젝트 숨기기 / 보이기 (단축키 Ctrl Shift H)

[ 정렬과 스마트 셀렉션 ] - 관련 단축키 암기

- 2개 이상의 오브젝트 정렬시 정렬하려는 쪽의 가장 가까운 쪽으로 정렬된다. (왼쪽 정렬시 가장 왼쪽 오브젝트 기준으로 정렬)

- 가장 넓은 간격을 기준으로 모두 같은 간격으로 정렬

- 오브젝트들이 선택되어 있는 칸 안에서 같은 간격으로 정렬

1. 일정한 간격을 가지고 있는 오브젝트들을 선택했을 경우 오브젝트들 안에 작은 원이 생성된다.

2. 작은 원을 클릭한 후 수평 관계의 있는 오브젝트끼리 순서를 변경할 수 있다.

3. 수직 관계의 경우 전체적인 형태를 유지하면서 순서를 변경하는 건 불가능하다.

- 빨간 선들을 클릭한 후 이동하여 간격 조절을 할 수 있다.

- 작은 원들을 다중 선택한 후 일부 오브젝트들의 크기를 변형할 수 있다.

[ 컨스트레인트 ]

- 컨스트레인트를 적용하기 위해 모바일 화면에 맞는 프레임을 설정 후 상단바와 하단 푸터, 그리고 아이콘들이 위치할 곳을 배치한다.

- 프레임의 크기를 변형하게 되면 아직 컨스트레인트가 적용되지 않았기 때문에 화면 크기에 맞게 아이콘들과 각 영역들이 변하지 않는다.

- 상단바 영역을 컨스트레인트를 적용한 화면이다. (로고와 아이콘들은 제외)

  상단바의 경우 화면이 좌우로 변형될 때마다 크기게 맞게 움직여야 하며 상단바이기 때문에 위치는 'Top'으로 설정해야 한다.

  해당 설정값으로 적용한 후 프레임의 크기를 늘려보면 좌우 프레임 크기에 맞게 상단바 영역이 움직이는 것을 볼 수 있다.

- 오브젝트의 목적에 따라서 'Center' 'Left + Right' / 'Top' 'Bottom' 등 설정값을 줄 수 있다.

[ 오토레이아웃 ]

- 오토레이아웃 설정 (단축키 Shift + A)

- 오토레이아웃 해제 (단축키 Shift + Alt + A)

< 오토레이아웃과 스마트셀렉션의 차이와 활용 (오브젝트의 순서) >

- Ctrl D 단축키를 활용하여 일정 간격을 유지하면서 (레이아웃 유지) 아이콘을 복사할 수 있다.

  아이콘을 삭제해도 레이아웃은 유지된다.

- 오토 레이아웃 설정에서 일정 간격을 유지하면서 수평과 수직 상태로 자유롭게 변형할 수 있다.

- Hug 설정을 해놓으면 아이콘들의 개수가 늘어나도 아이콘이 잘리지 않고 아이콘을 감싸고 있는 컨테이너도 같이 늘어난다.

- 레이아웃의 크기보다 더 큰 크기를 가지고 있는 오브젝트를 안에 넣으려면 Ctrl 키를 누른 채로 안으로 넣는다. 

  Ctrl 키를 누른 채로 넣으면 레이아웃이 일정 간격으로 변형된다.

- Ctrl 키를 누르지 않으면 결과물이 달라진다. (세번째 이미지)

- 오토 레이아웃을 적용한 여러개의 오브젝트들끼리도 다시 오토 레이아웃을 설정할 수 있다. (다중 오토 레이아웃)

[ 레이아웃 그리드 ]

- 레이아웃 그리드 설정으로 프레임 안에 컬럼 영역 그리기

- 다른 오브젝트들의 설정값을 스타일로 적용할 수 있듯이 그리드도 스타일로 적용할 수 있다.

- Shift R 단축키로 자 모양 틀 생성하기

- 자모양을 나타낸 후 가이드를 잡을 수도 있지만 Gutter 값을 0으로 설정 후 가이드를 잡을 수도 있다.

- 그리드 레이아웃을 설정한 후 컨스트레인트까지 같이 적용해주면 설정해둔 간격을 유지하며 크기를 변경할 수 있다.

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

> 강의 구성

> 강의 내용 정리

[ 컬러 ]

1. 원을 연한 핑크색으로 색상 지정 후 Style 새로 생성 = babyPink

2. 다른 원은 연한 초록색으로 색상 지정 후 Style 새로 생성 = mintGreen

3. 세번쨰 원은 첫번째와 두번째 색상을 반반씩 추가

- 단축키 I 를 사용하면 스포이드를 활용하여 색상을 따올 수 있다.

- 스타일로 생성해놓은 mintGreen 색상을 1, 2, 3 에 동일하게 적용한 다음, 등록해놓은 스타일의 색 속성을 변경하게 되면

    모두 일괄 적용되는 장점이 있다.

[ 그레이디언트 ]

- UI 화면이 바뀌면서 그레이디언트 속성창의 위치도 바뀐 듯 하다.

  해당 버튼은 Fill 속성을 지정할 수 있는 창에서 상단에 위치하고 있다.

- 도형 위에 생긴 에너테이터(바)를 클릭하여 특정 지점에 다른 색을 추가할 수도 있고, 속성창에서 직접 클릭하여 색상을 추가할 수    있다.

- 그레이디언트 속성의 종류는 Linear / Radial / Angular / Diamond 네가지이다.

- 그레이디언트로 조합한 색상 또한 스타일로 적용할 수 있다.

- 같은 스타일의 색상으로 다른 그레이디언트 속성을 준 예시이다.

- 에너테이터 바를 움직여 도형 안에서 표현되는 그레이디언트를 다양하게 만들 수 있다.

- 세번째(Angular)의 경우 에너테이터 바의 경계가 뚜렷하다면

  밖으로 표시되는 색상 박스의 위치를 옮겨 경계를 자연스럽게 풀어준다.

- 에너테이터 바가 화면에 표시되는 상태에서는 도형을 선택하거나 움직일 수 없으니 속성 수정이 다 되었다면 

  속성창을 끈 후 도형을 움직여야 한다.

[ 도형과 이펙트 ]

1. 테두리를 입힌 사각형 도형에 Effects 효과를 적용한 결과. 

    Default 값은 Drop shadow이고 도형 뒤쪽에 그림자 효과를 준다.

2. Inner shadow, 도형 안쪽으로 그림자 효과를 준다.

3. Layer blur, 도형 자체의 블러 효과를 준다.

4. Background blur,  도형 뒤쪽의 블러 효과를 준다. (모자이크 효과)

    * 해당 기능은 도형 색상의 투명도를 어느정도 주어야 효과를 낼 수 있다.

- 이펙트 효과도 스타일로 적용할 수 있으며 도형에 대한 세부 속성들은 Ctrl+Alt+C / V  단축키를 활용하여 복사 / 붙혀넣기 가능하다. (도형과 텍스트를 모두 속성 적용해놓고, 동시에 속성 복사하려고 하면 안 되는 경우가 있으니 같은 오브젝트들끼리 적용할 것)

[ 이미지 활용 ]

- 도형에 이미지 삽입하기

- 이미지 위치 수정하기(우측 Fill 속성 창에서 Crop을 활용하여 뒤에 있는 이미지 위치를 바꾼다)

- Fill (도형 안에 가득 차도록) / Fit (도형 안에 사진이 전체적으로 들어가도록) /

  Crop (사진 위치 변경) / Title (%를 조절하여 타일 형태로 변경)

- 숫자키를 눌러 투명도 설정할 수 있다.

-  겹쳐진 도형을 활용하여 다양한 효과 표현하기

[ 플러그인 ]

[ 생성했던 스타일 정리하기 ]

- 그룹으로 묶을 스타일들을 선택 후 우클릭 Add new folder 로 폴더 생성

- 폴더에 넣을 스타일은 생성시 '폴더명/스타일명' 으로 저장하면 폴더 안에 생성 가능하다.

> 느낀점

= 이번에도 강의 화면과 다른 UI 때문에 버벅거리며 따라가기는 했지만, 이전에 복습하며 연습했던 단축키들이 손에 익으니까 첫번째 챕터 진행했을 때보다는 수월했다. 앞으로도 반복 복습으로 손에 익을 때까지 공부하자- 

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.

> 강의 구성

> 강의 내용 정리

[ 사각형 ]

1. 단축키R 누른 후 사각형 생성

2. Shift 누른 후 사각형 생성(정사각형)

3. 사각형 안에 작은 원으로 radius 값 조절(4각이 동일)

4. Alt 키 누른 상태에서 작은 원 하나를 클릭 후 radius 값 조절

[ 원 ]

1. 단축키O 누른 후 원 생성

2. Shift 누른 후 사각형 생성

3, 4. 작은 원을 움직여 원의 형태를 변형할 수 있음

[ 다각형과 별 ]

1. 삼각형(Polygon) 생성 후 작은 원을 활용하여 다각형 생성

2. 다각형 생성 후 radius 조절

3. 별(Star) 생성

4. 별 생성 후 작은 원으로 크기 모형 각 개수 변형

[ 선과 Stroke ]

1. 단축키L을 눌러 선 생성

2. 사각형 생성 후 Stroke 설정값 변경(포지션 inside) : 보통의 경우 inside 로 설정하면 보다 더 명확한 아이콘을 설정할 수 있다.

3. 사각형 생성 후 Stroke 설정값 변경(포지션 center)

4. 사각형 생성 후 Stroke 설정값 변경(포지션 outside)

[ 점선과 Stroke, 다양한 setting 설정 ]

[ 펜툴 ]

1. 펜툴을 사용하여 직선 생성

2. 펜툴을 사용하여 사각형 생성

3. 직선 중앙에 생기는 원을 클릭하여 새로운 포인트를 만들거나 / 펜툴을 사용하여 새로운 포인트 생성 후 드레그

4. 단축키Ctrl 밴드 툴을 사용하여 곡선으로 만들거나 Ctrl 누른 상태에서 작은 원을 클릭하여 취소 / 실행 가능

    곡선으로 변환 시에는 양쪽에 핸들러가 생기고 핸들러로 곡선의 형태를 조절할 수 있다.

     Alt 키를 누른 채로 핸들러를 움직이면 움직이고 있는 핸들러의 곡선 기울기만 변형된다.

위 작업을 하면서 알게된 단축키 (2개 이상의 개체 그룹화)

- 그룹화(ctrl G)
- 그룹화 해제(ctrl Shift G)

[ 펜툴을 사용하여 여러가지 형태 만들기 ]

- 클릭을 사용하여 직선 그리기

- 드레그를 사용하여 곡선 그리기

- Shift 드레그를 사용하여 각의 크기가 일정한 곡선 만들기

- 핸들러를 사용하여 각이 다른 곡선 만들기 

[ 불리언과 마스크 ]

1. 사각형과 원을 겹쳐놓은 상태

2. 두 개체를 모두 선택 후 Uion 설정(순서대로 적용)

- 위에 겹쳐진 개체 기준으로 형태가 달라질 수 있으니 참고

[ 마스크 활용 ]

1. 이미지와 다각형으로 마스크 활용 준비

2. 마스크를 설정하기 위해 단축키 ] 를 사용하여 이미지를 다각형 앞으로 순서 변경

3. 단축키 Ctrl Alt M 을 사용하여 마스크 적용(해제도 단축키 동일)

> 느낀점

= 피그마를 처음 사용하기도 하고 강의해주시는 피그마 버전과 최신 버전의 피그마의 UI가 달라서

강의를 멈춰놓고 실행 아이콘을 찾아다녀야 했다는 불편함은 있었지만 계속 도형을 만들고 예제를

따라 만들어보면서 손에 익히며 연습하니 강의를 멈추지 않고도 예제를 따라갈 수 있었다.

* 이 글은 제로베이스 UIUX 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.