전체 글

이번 피그마 강의에서는 반복적으로 관리해야하는 요소를 어떻게 효율적으로 관리하는지를 알아본다. 무엇이든 의미없는 반복작업은 금방 지치게되는 요소 중 하나이다. 잘 배워서 반복을 줄이고 통솔하고싶다! 내가 피그마에서 돋보기를 컴포넌트라고 명령하면 아이콘이 오른쪽 사각 다이아가 네개 모인 모양처럼 변한다. 컴포먼트가 된 돋보기라는 요소는 레이어창에 오른쪽 그림과 같은 아이콘으로 표시되게 된다. 레이어 패널에서의 아이콘은 변경되었지만돋보기라는 속성값은 그대로 가지고있다.만약 컴포넌트로 명령된 개체를 복사 붙여넣기 하게된다면검색 아이콘으로 나오게 되고 이들을 인스턴스라고 칭한다고 한다. 베리언트는 메인 컴포먼트의 속성값을 세분화한 것으로 하나의 큰 틀 안에서 작은 차이점들을 종류별로 만들어두는 것 같다. 사이즈..

작업 환경에서는 위계 순서가 정해져있다. 이전 강의에서 프레임들을 묶어서 하나의 섹션으로 만들었던 것이 기억난다. 섹션이 묶는 단위로는 제일 크다고 한다. 더 상위로 묶는 것은 없다는 것. 그룹은 하위 레이어가 없이 존재할 수 없다고 한다. 섹션은 다른 섹션을 포함할 수 있다. 레이어들도 서로 포함 및 결합이 되는 것처럼 제일 큰 단위인 섹션에서도 가능한가보다. 대신 상위개념인 섹션이 하위개념인 프레임이나 레이어 속으로 들어갈 수는 없다. 그런데 그룹안에는 프레임이 들어갈 수 있다고한다. 그럼에도 프레임이 상위개념인 이유는 프레임은 단독으로 존재 가능하지만 위에서 말하다시피 그룹은 하위레이어가 없이 존재할 수 없기 때문이다. 섹션만 포함불가능한 단독 상위인걸로 기억해야겠다. 독립적으로 존재하지 못하는 그..

일단 피그마를 개발자 모드로 바꾼 뒤 바를 선택해보면 오른쪽 Inspect에서 여러가지 정보들을 얻을 수 있다. 왼쪽에 띄워져있는 숫자들을 통해 넓이 등등을 상세하게 확인이 가능하고 Dev resources를 추가할 수도 있다고 한다. 또한 모드를 바꿔가며 뷰어 방식을 바꿀 수도 있다. Code 나 Properties로 바꾸는 등 원하는 방식으로 확인이 가능하다. 여하튼간 피그마는 개발자들이 원하는 방식으로 다양하게 보여주는 듯 하다. 왼쪽 토픽이라고 나열된 부분에서는 언제 어떻게 수정이 되었는지 기록을 남겨준다. 이는 디자이너와의 커뮤니케이션을 원활하게 하는 역할을 하여 개발자는 언제 무엇이 수정되었는지를 확인할 수 있다. 피그마는 기록을 통해 대화할 수 있는것은 직접 커뮤니케이션해야하는 수고를 생략해..

이번 피그마 강의에서는 드디어 설명한 것을 기반으로 무언가를 만들어보고자 한다. 먼저 홈에서 디자인 파일을 생성해서 원하는 디바이스의 프레임을 만들어주었다. 섹션도 설정해서 구분을 해주면 하나의 작업을 할 공간이 마련된다. 직사각형을 만들어 놓고 그에대한 크기를 조절할 때 W, H 옆에 있는 체인모양을 통해 한쪽 길이만 조절 할 수도 있다. 직사각형을 만들고싶으면 체인조절을 통해 W만 조절해서 옆으로만 늘릴수도 있고정사각형의 크기를 조절하고싶으면 체인으로 묶어서 양쪽이 같이 움직이도록 설정할 수 있다. 실습강의에서 사각형 모양에 대해 모서리의 둥근 정도를 조절하고색을 채우고(Fill) 테두리 까지 만들어진 모습을 확인할 수 있다.(Stroke)배웠던 것을 훑어봐주니 확실히 어떻게 디자인 할 때 써야할지명..

이번 피그마 강의에서는 화면을 이어서 애니메이션을 걸어주는 것을 배운다. 클릭하는 프레임에 연결될 것을 이어주면 화살표 아래 애니메이션 값을 상세하게 설정할 수 있는 박스가 나온다. 애니메이션 모양, 방향, 심지어 속도까지 디테일하다. 디테일하게 애니메이션을 설정하면 실행하기 전에 미리보기로 보여주기 때문에 부분적으로 여러가지를 보면서 고를 수 있다. 내가 설정한 값으로 바로바로 보여주기때문에 비교가 쉬울 것 같아서 유용한 것 같은 기능이다. 오른쪽 상단 플레이버튼을 누르면 새 창으로 이동하여 프로토타이핑 화면이 새로 생성된다고 한다. 클릭을 하면 걸어놓았던 애니메이션이 실행된다. 이를 Share 버튼을 통해 공유할 수도 있고 Options 버튼을 통해 다양한 크기로도 확인이 가능하다. 프로토타이핑 화면..

피그마의 도구메뉴를 차례대로 소개해보자면 화살표 모양은 요소를 이동시킬수 있는 Move툴이 있고 격자무늬 모양에서 Frame은 화면에 아트보드를 만들 때 사용한다. Section은 프레임이나 여러 요소들을 한꺼번에 묶어주는 역할을 한다. 묶을 때에는 드래그나 쉬프트키를 이용하면 될 것 같다. 사각형 도구를 클릭하고 프레임 안에서 잡아 늘리면 Rectangle이라는 이름으로 레이어에 추가되는 것을 볼 수 있다. 이 외에도 아래에 여러모양들을 만들 수 있으니 필요한 모양을 그려줄 때 이용하면 될 것 같다.정방향으로 그려줄 때에는 Shift키를 눌러주며 드래그해주면 된다고 한다. 삼각형모양을 해주면 꼭지점쪽에 동그라미가 뜨는데 모서리를 잡아당기면서 조절이 가능하다. 즉 Radius값을 조절해서 모서리의 둥근정..

오른쪽 패널에서는 디자인의 설정값들을 세심하게 조절할 수 있는 모양이다. 컬러감도 투명도도 세밀하게 조절할 수 있고 스포이드 아이콘을 선택해서 정한 색감을 복사해서 붙여넣기도 가능하다. 디자인 하고싶은 글씨를 클릭해서 Text로 가면 여러가지 글씨체를 선택하여 바꿀 수 있다. 두께와 기울기 크기등 글씨체에 따라서 상세하게 설정할 수 있으니 원하는 디자인을 구체화시키는데 큰 도움이 될 것 같다. 글씨 위아래로 바가 쳐져있는 설정은 Line height, 즉 줄간의 사이간격을 의미한다. 하나의 프레임에 두 줄 이상의 글이 들어가있을 때 설정해주면 될 것 같다. 직접 숫자를 입력해도 되지만 방향키 위 아래로도 눌러서 조절해보고 설정도 가능하다. 글씨 좌우로 바가 쳐져있는 설정은 Letter spacing은 자..

피그마에서 여러 페이지들을 만들었을 때 커버의 이름을 바꾸는법을 알려준다. 저 위에 화면에서는 더블클릭으로 바꾸는 법을 설명하고있는데 마우스 오른쪽을 클릭해서 Rename page로 이름을 바꿔도 된다고 한다. (더블클릭이 훨씬 빠르고 편하니 굳이 후자방법은 머리에서 지워도 될듯하다. ㅎ0ㅎ) 페이지를 삭제할 때에는 Delete page를 누르면 된다. 잘못 삭제되었을 때는 복구할 수 있는데 커맨드키와 Z키를 누르면 된다고 한다. 여기서 커맨드키가 무엇인지 몰랐던 나는 검색해서 찾아보았는데 윈도우에서는 Ctrl키라고 한다. 애플맥의 고유한 키였던것! 이제야 알게되었다. 하하 Ready for dev라고 띄어져있는 저 아이콘 표시는 개발버전으로 바로 넘겨도 가능할 정도로 디자인이 완성되어있다는 표시라고 한..

홈화면으로 이동하려면 Back to files를 클릭해주면 된다. 이전에 혼자 피그마를 이용했을 때 홈화면버튼을 찾지못해서 나갔다가 들어오기를 반복했던 기억이있다. 홈화면은 집모양으로 쉽게있는게 훨씬 좋을것같은데... 내가 디자인할때는 집모양으로 만들어야지! File에 Place image/video 메뉴를 통해 이미지랑 동영상을삽입할 수 있다고 한다.동영상을 재생할 수는 없지만 썸네일을 통해위치를 알려줄 수 있는 용도로 쓴다고한다.디자인에 충실한 기능을 하고있다는 느낌이었다. 그런의미로 재생안되는것에대해 불평할 필요는 없는것 같다. Save local coppy 메뉴는 말그대로 로컬에 저장하는 것이다. 인터넷연결없이도 볼 수 있게끔 말이다. 태블릿같은곳에 저장해서 어디에서든 디자인을 보여줄 때 유용할 ..

권한에는 편집 가능 모드와 시청만 가능 모드로 나뉘는데 이 화면은 위 아이콘들이 활성화되어있으며 클릭 및 수정이가능한 권한을 가진 사람들에게 보여지는 화면이다. 즉 이 화면이 내가 주로 보게될 화면이란 것! 작업물이 훼손되지 않게 하려면 이 화면을 아무에게나 보여주면 안되겠지. 특정 레이어만 수정권한을 줄 수 있는 디테일한 설정도 할 수 있다고한다. 섬세하다. 이 화면이 시청만 가능한 모드이다. 위에 Ask to edit 버튼을 통해 편집가능권한을 요청해서 얻을 수 있다고하는데 메타코드 강의에서 중간 요금제에서는 과금이 될 수 있으니 주의하라는 점도 설명해주어서 참 다행이었다.저 버튼 설명을 들으면서 여기저기 보여주며 바로바로 수정을 요청할 수 있겠다고 생각했다가생각보다 비싸게 붙을 요금제설명을 듣고 식..