![]()
마스크의 아이콘을 보면 부분만 색칠된 동그라미를 볼 수 있다. 특정 레이어의 영역만큼만 하위 레이를 보여준다는 의미이다. 배경컬러 영역이 마스크로 지정된 영역이고 그 안에있는 하위레이어인 텍스트가 마스크로 지정된 영역의 범위 내에서만 노출되고 있다. 즉 마스크 외의 범위는 잘리는 것이다. 마스크로 지정된 범위는 꼭짓점을 드래그해서 범위를 늘릴수도 있다. 마스크 밖의 범위가 아예 잘려서 없어져버리는 것이 아니라숨겨져서 보이지 않을 뿐 그대로 있음을 확인할 수 있다. 윗줄의 상단 아이콘 3가지중 맨 오른쪽에 위치하고 있으며 포함될 레이어들을 중복으로 선택해준 후 아이콘을 눌러주면 마스크범위로 묶이며 부분만 보이게 된다. 마스크의 범위를 설정해도 하위 레이어들의 스타일 요소는 통합되지 않기 때문에 색 등을 개..
![]()
Flatten은 한마디로 심플하게 정리해주는 기능이다. 레이어가 그룹형태일 때에는 리사이징 할 때 제한이 많은데 이를 단일개체로 만들어준다. 위 사진처럼 여러 그룹으로 된 레이어를 통합해서 심플한 레이어로 만들어준다. 네개의 정사각형을 만들어서 배열한 후 Union Selection으로 묶으면 각각 하나씩 4개의 정사각형 레이어가 Union 아래로 들어가는 그룹이 되는데 맨 아래 Flatten selectionm을 클릭해서 묶어주면 아래 줄줄이 달려있던 정사각형 레이어들이 사라지고 하나의 레이어로 정리되는 것을 확인할 수 있다. 플랫튼 상태의 도형을 더블클릭하면 오른쪽 도형과 같이 벡터상태가 된다. 플랫튼은 심플하게 정리되어있는 하나의 단일개체이기 때문에 더블클릭을 한 상태에서 변화를 주면 그 변화도 하..
![]()
불리언이란 복수의 도형을 빠르게 편집할 수 있는 기능이다. 피그마에서는 4가지의 수정가능한 기능을 모아서 불리언 그룹이라고하는데 위의 네가지 그림이 기능을 가진 아이콘모양이다. 뷰어는 수정할 수 있는 권한이 없으니 당연히 사용이 불가능하다. 불리언 그룹으로 할 수 있는 기능은 위와 같이 네가지이다. 비워져있는 부분은 없어지고 채워져있는 부분이 남는다고 생각하면 피그마에서 아이콘만 보더라도 바로 기능을 이해할 수 있을 것이다. 불리언의 위치는 상단의 세 아이콘 중 맨 오른쪽에 위치하며 결합모양의 Union을 선택해주면 레이어에 두 사각형이 묶인 그룹이 만들어진다. 위 그림은 따로 겹쳐놓지않았기때문에 묶이기만 할 뿐 직접 이동시키지 않는 한 저절로 합쳐지지는 않았다. 그래서 직접 옮겨주었더니 하나의 직사각형..
![]()
면과 선의 속성을 이해하기 전에 피그마는 벡터 기반의 프로그램이라는 것을 알아둬야한다고 한다. 위 그림을 보면 벡터는 매끄럽고 비트맵은 거친 느낌인것을 확인할 수 있다. 벡터는 사이즈의 변화에 매끄러운 반면 비트맵은 손실되는 것이다. 면을 하나의 도형 개체로 인식하는 주체는 코드다. 따라서 면으로 만들어놓으면 피그마의 CSS가 코드로 전환하기 수월하다는 의미같다. 또한 면으로 해놓으면 자동 비율이 적용되기 때문에 선으로 그려놓은 것도 면화 해놓으면 디자인하기에 더 수월하다. 다만 면을 선으로 다시 돌리는 것은 불가능하니 신중해야 할 것 같다. 피그마에서는 하나의 도형개체로 인식되는 면과달리 선은 스타일 속성으로 우선 인식 된다. 하나의 코드로 전환되지 못한다는 것. 자동비율이 적용되지 않으니 크기조절시 ..
![]()
이번 피그마 강의에서는 반복적으로 관리해야하는 요소를 어떻게 효율적으로 관리하는지를 알아본다. 무엇이든 의미없는 반복작업은 금방 지치게되는 요소 중 하나이다. 잘 배워서 반복을 줄이고 통솔하고싶다! 내가 피그마에서 돋보기를 컴포넌트라고 명령하면 아이콘이 오른쪽 사각 다이아가 네개 모인 모양처럼 변한다. 컴포먼트가 된 돋보기라는 요소는 레이어창에 오른쪽 그림과 같은 아이콘으로 표시되게 된다. 레이어 패널에서의 아이콘은 변경되었지만돋보기라는 속성값은 그대로 가지고있다.만약 컴포넌트로 명령된 개체를 복사 붙여넣기 하게된다면검색 아이콘으로 나오게 되고 이들을 인스턴스라고 칭한다고 한다. 베리언트는 메인 컴포먼트의 속성값을 세분화한 것으로 하나의 큰 틀 안에서 작은 차이점들을 종류별로 만들어두는 것 같다. 사이즈..
![]()
작업 환경에서는 위계 순서가 정해져있다. 이전 강의에서 프레임들을 묶어서 하나의 섹션으로 만들었던 것이 기억난다. 섹션이 묶는 단위로는 제일 크다고 한다. 더 상위로 묶는 것은 없다는 것. 그룹은 하위 레이어가 없이 존재할 수 없다고 한다. 섹션은 다른 섹션을 포함할 수 있다. 레이어들도 서로 포함 및 결합이 되는 것처럼 제일 큰 단위인 섹션에서도 가능한가보다. 대신 상위개념인 섹션이 하위개념인 프레임이나 레이어 속으로 들어갈 수는 없다. 그런데 그룹안에는 프레임이 들어갈 수 있다고한다. 그럼에도 프레임이 상위개념인 이유는 프레임은 단독으로 존재 가능하지만 위에서 말하다시피 그룹은 하위레이어가 없이 존재할 수 없기 때문이다. 섹션만 포함불가능한 단독 상위인걸로 기억해야겠다. 독립적으로 존재하지 못하는 그..
![]()
일단 피그마를 개발자 모드로 바꾼 뒤 바를 선택해보면 오른쪽 Inspect에서 여러가지 정보들을 얻을 수 있다. 왼쪽에 띄워져있는 숫자들을 통해 넓이 등등을 상세하게 확인이 가능하고 Dev resources를 추가할 수도 있다고 한다. 또한 모드를 바꿔가며 뷰어 방식을 바꿀 수도 있다. Code 나 Properties로 바꾸는 등 원하는 방식으로 확인이 가능하다. 여하튼간 피그마는 개발자들이 원하는 방식으로 다양하게 보여주는 듯 하다. 왼쪽 토픽이라고 나열된 부분에서는 언제 어떻게 수정이 되었는지 기록을 남겨준다. 이는 디자이너와의 커뮤니케이션을 원활하게 하는 역할을 하여 개발자는 언제 무엇이 수정되었는지를 확인할 수 있다. 피그마는 기록을 통해 대화할 수 있는것은 직접 커뮤니케이션해야하는 수고를 생략해..
![]()
이번 피그마 강의에서는 드디어 설명한 것을 기반으로 무언가를 만들어보고자 한다. 먼저 홈에서 디자인 파일을 생성해서 원하는 디바이스의 프레임을 만들어주었다. 섹션도 설정해서 구분을 해주면 하나의 작업을 할 공간이 마련된다. 직사각형을 만들어 놓고 그에대한 크기를 조절할 때 W, H 옆에 있는 체인모양을 통해 한쪽 길이만 조절 할 수도 있다. 직사각형을 만들고싶으면 체인조절을 통해 W만 조절해서 옆으로만 늘릴수도 있고정사각형의 크기를 조절하고싶으면 체인으로 묶어서 양쪽이 같이 움직이도록 설정할 수 있다. 실습강의에서 사각형 모양에 대해 모서리의 둥근 정도를 조절하고색을 채우고(Fill) 테두리 까지 만들어진 모습을 확인할 수 있다.(Stroke)배웠던 것을 훑어봐주니 확실히 어떻게 디자인 할 때 써야할지명..
![]()
이번 피그마 강의에서는 화면을 이어서 애니메이션을 걸어주는 것을 배운다. 클릭하는 프레임에 연결될 것을 이어주면 화살표 아래 애니메이션 값을 상세하게 설정할 수 있는 박스가 나온다. 애니메이션 모양, 방향, 심지어 속도까지 디테일하다. 디테일하게 애니메이션을 설정하면 실행하기 전에 미리보기로 보여주기 때문에 부분적으로 여러가지를 보면서 고를 수 있다. 내가 설정한 값으로 바로바로 보여주기때문에 비교가 쉬울 것 같아서 유용한 것 같은 기능이다. 오른쪽 상단 플레이버튼을 누르면 새 창으로 이동하여 프로토타이핑 화면이 새로 생성된다고 한다. 클릭을 하면 걸어놓았던 애니메이션이 실행된다. 이를 Share 버튼을 통해 공유할 수도 있고 Options 버튼을 통해 다양한 크기로도 확인이 가능하다. 프로토타이핑 화면..
![]()
피그마의 도구메뉴를 차례대로 소개해보자면 화살표 모양은 요소를 이동시킬수 있는 Move툴이 있고 격자무늬 모양에서 Frame은 화면에 아트보드를 만들 때 사용한다. Section은 프레임이나 여러 요소들을 한꺼번에 묶어주는 역할을 한다. 묶을 때에는 드래그나 쉬프트키를 이용하면 될 것 같다. 사각형 도구를 클릭하고 프레임 안에서 잡아 늘리면 Rectangle이라는 이름으로 레이어에 추가되는 것을 볼 수 있다. 이 외에도 아래에 여러모양들을 만들 수 있으니 필요한 모양을 그려줄 때 이용하면 될 것 같다.정방향으로 그려줄 때에는 Shift키를 눌러주며 드래그해주면 된다고 한다. 삼각형모양을 해주면 꼭지점쪽에 동그라미가 뜨는데 모서리를 잡아당기면서 조절이 가능하다. 즉 Radius값을 조절해서 모서리의 둥근정..
