전체 글

나는 단순한 개념적인 부분은 잘 습득하는편인데 응용에 취약한 편이다. 따라서 강의에 나온 응용부분을 추가해서 정리해놓아야겠다. 위 그림은 아이콘을 추가한 버튼을 만든 것으로 다른 페이지에서 복사해서 붙여넣기 해준것이다. 디자인 패널에서 조절할 수도있지만 직접 사이간격을 눌러서 간격을 조절해줄 수 도 있다. 패딩값을 조절해주면 위의 넓이와 높이값이 그에따라 변화되는 것을 확인할 수 있다. 크기를 확인하면서 패딩값을 조절해줄 수 있다. 패딩값이 같으면 크기값도 같은게 아니군. 보면서 조절해야한다. 리사이징 옵션에 대해서 알아보면 Hug로 되어있을 때 텍스트명이 길어지면 패딩값을 조절하여 정사각형으로 만들어 놓은 프레임이직사각형으로 길어지게 된다.즉 안에있는 컨텐츠에 따라 가변이 되는 것이다. Fixed로 되..

버튼이라는 텍스트를 써주고 바로 오토 레이아웃을 설정해준다. 단축키로는 Shift+A를 누르면 된다. 버튼을 만드는 방법이 시작부터 심플하다. 오른쪽 디자인 패널 아래쪽에서 패딩값을 조절해준 모습이다. 사각형이 좌우 선과 위아래 선에 갇혀있는 모양 옆의 숫자를 조절해서 버튼 텍스트를 감싸는 사각형의 크기가 커졌음을 확인할 수 있다. 버튼의 배경색과 글자색을 바꿔주고 텍스트도 볼드로 해주며 모서리 알값도 둥글게 굴려준 모습이다. 여기서 오토 레이아웃을 가로방향으로 설정해주고 간격값을 조절해서 붙여넣기를 해주면 위 사진과 같이 하나의 배경안에서 여러가지 버튼 텍스트들이 가로방향으로 쭉 나열되는 것을 확인할 수 있다. 하지만 이렇게 글자와 글자만 조합되는 경우는 잘 없다. 버튼 배경까지 각각 띄워지는 것을 만..

오른쪽 디자인패널에 Auto Layout칸이 생성되었음을 확인할 수 있고 그 아래 화살표에는 세가지 방향이 있는데 개체가 추가될 때 어느방향으로 추가되는지를 정하는 것이다. 아래쪽 화살표가 선택되어있는데 그럴때 개체가 추가되면 아래쪽으로 수가 늘어나는 것을 확인할 수 있다. 개체수가 많아져도 동일한 방향으로 균일하게 생성된다. 화살표 아래쪽은 복사된 것들과의 간격을 조절하는 수치이다. 복사된 것들과의 간격을 조절하는 것 아래에는 좌우와 위아래를 표시하는 수치가 있는데 이를통해 패딩값을 자동으로 조절할 수도 있다. 패딩값을 대칭으로 일정하게 바꿀 수 있는 것이다. 그 바로 오른쪽에 선이 다 따로 떼져있는 네모아이콘이 있는데 이를통해 개별로도 값을 조절할 수도 있다. 오토 레이아웃으로 패딩을 설정해 놓으면 ..

오토 레이아웃의 적용 대상은 피그마에서 제작한 UI이다. 이는 바뀌는 화면마다 크기가 바뀔 때 조정할필요가 없도록 자동 조정 옵션을 설정하여 적용된다. 오토 레이아웃으로는 개체 크기, 정렬 및 방향, 절대위치를 설정할 수 있다. 예를 들어 ios에서 pc로 넘어가며 아이콘의 베리에이션이 필요할 때 화면 사이즈에 맞게 그 비율에 따라서 오토 레이아웃에서 개체 크기 등을 조절할 수 있다는 것이다. 바로 확인해보면 오토 레이아웃을 사용했을 땐 여백값도 동일하게 유지하며 사이즈를 변경할 수 있다. 위쪽 파란색 아이콘은 크기를 옆으로 늘리면 그에맞게 거리나 크기가 증가하고 아래처럼 오토레이아웃을 사용하지 않으면 텍스트사이즈는 움직이지않고 뒤에 직사각형만 움직이게 된다. 오토 레이아웃이 적용된 표시 아이콘은 Pro..

프레임을 24dp로 만든 후 2픽셀을 남기고 직사각형을 그려준 모습이다. 최소 2픽셀은 남기도록 도형을 채워넣어야 개발할 때에 에러가 생기지 않기 때문에 값을 잘 보면서 아이콘을 만들어주어야 한다. 아웃라인 스트로크로 뒤에 직사각형을 면처리 해준 모습이다. 텍스트를 개별편집하려면 (즉 4와 K를 따로) 아웃라인 스트로크를 눌러 면으로 묶어준 뒤 그룹을 해제한 후 개별로 더블클릭해서 편집해주면 된다. 개채들을 다중선택해서 Alt탭 혹은 옵션키를 눌러주면 위 그림과같이 여백에 있는 숫자를 확인할 수 있다. 피그마에서는 저렇게 중앙값이 아니면 디자인적으로도 완벽하지 않고 개발때 에러가 나기 때문에 수정을 해주어야 한다. 왼쪽 상단 피그마 아이콘에서 Quick actions를 통해 소수점 단위로 수정할 수 있다..

심볼 아이콘을 만들기에 앞서 간단하게 아이콘을 잘 그리는 방법에 대해서 설명해주고있다. 구글 머터리얼 가이드의 스타일에서 친절하게 예시를 들어주며 주의해야할 점을 알려주는 것을 확인할 수 있다. 아이콘은 범용적으로 쓰기 위해서 모양을 간단한 직선이나 라운드 위주로 쓰는 것이 좋다고 한다. 아이콘의 크기는 24DP 또는 짝수단위로 하는 것이 좋다. 이는 개발할 때 코드화를 하기에 유리하기 때문이라고 한다. 아이콘은 정사각형 프레임안에 위치하도록 하는게 좋고 그 중에서도 중앙에 위치하게 해야한다. 그래야 개발했을 때 에러가 나지 않고 원하는 디자인으로 나올 확률이 높기 때문이다. 개발되는 것을 고려하면서 디자인 해야한다는 것을 처음 알게되었다. 위 그림은 아이콘 그래픽이 소수점단위로 끝나지 않게 정수로 끝나..

마스크의 아이콘을 보면 부분만 색칠된 동그라미를 볼 수 있다. 특정 레이어의 영역만큼만 하위 레이를 보여준다는 의미이다. 배경컬러 영역이 마스크로 지정된 영역이고 그 안에있는 하위레이어인 텍스트가 마스크로 지정된 영역의 범위 내에서만 노출되고 있다. 즉 마스크 외의 범위는 잘리는 것이다. 마스크로 지정된 범위는 꼭짓점을 드래그해서 범위를 늘릴수도 있다. 마스크 밖의 범위가 아예 잘려서 없어져버리는 것이 아니라숨겨져서 보이지 않을 뿐 그대로 있음을 확인할 수 있다. 윗줄의 상단 아이콘 3가지중 맨 오른쪽에 위치하고 있으며 포함될 레이어들을 중복으로 선택해준 후 아이콘을 눌러주면 마스크범위로 묶이며 부분만 보이게 된다. 마스크의 범위를 설정해도 하위 레이어들의 스타일 요소는 통합되지 않기 때문에 색 등을 개..

Flatten은 한마디로 심플하게 정리해주는 기능이다. 레이어가 그룹형태일 때에는 리사이징 할 때 제한이 많은데 이를 단일개체로 만들어준다. 위 사진처럼 여러 그룹으로 된 레이어를 통합해서 심플한 레이어로 만들어준다. 네개의 정사각형을 만들어서 배열한 후 Union Selection으로 묶으면 각각 하나씩 4개의 정사각형 레이어가 Union 아래로 들어가는 그룹이 되는데 맨 아래 Flatten selectionm을 클릭해서 묶어주면 아래 줄줄이 달려있던 정사각형 레이어들이 사라지고 하나의 레이어로 정리되는 것을 확인할 수 있다. 플랫튼 상태의 도형을 더블클릭하면 오른쪽 도형과 같이 벡터상태가 된다. 플랫튼은 심플하게 정리되어있는 하나의 단일개체이기 때문에 더블클릭을 한 상태에서 변화를 주면 그 변화도 하..

불리언이란 복수의 도형을 빠르게 편집할 수 있는 기능이다. 피그마에서는 4가지의 수정가능한 기능을 모아서 불리언 그룹이라고하는데 위의 네가지 그림이 기능을 가진 아이콘모양이다. 뷰어는 수정할 수 있는 권한이 없으니 당연히 사용이 불가능하다. 불리언 그룹으로 할 수 있는 기능은 위와 같이 네가지이다. 비워져있는 부분은 없어지고 채워져있는 부분이 남는다고 생각하면 피그마에서 아이콘만 보더라도 바로 기능을 이해할 수 있을 것이다. 불리언의 위치는 상단의 세 아이콘 중 맨 오른쪽에 위치하며 결합모양의 Union을 선택해주면 레이어에 두 사각형이 묶인 그룹이 만들어진다. 위 그림은 따로 겹쳐놓지않았기때문에 묶이기만 할 뿐 직접 이동시키지 않는 한 저절로 합쳐지지는 않았다. 그래서 직접 옮겨주었더니 하나의 직사각형..

면과 선의 속성을 이해하기 전에 피그마는 벡터 기반의 프로그램이라는 것을 알아둬야한다고 한다. 위 그림을 보면 벡터는 매끄럽고 비트맵은 거친 느낌인것을 확인할 수 있다. 벡터는 사이즈의 변화에 매끄러운 반면 비트맵은 손실되는 것이다. 면을 하나의 도형 개체로 인식하는 주체는 코드다. 따라서 면으로 만들어놓으면 피그마의 CSS가 코드로 전환하기 수월하다는 의미같다. 또한 면으로 해놓으면 자동 비율이 적용되기 때문에 선으로 그려놓은 것도 면화 해놓으면 디자인하기에 더 수월하다. 다만 면을 선으로 다시 돌리는 것은 불가능하니 신중해야 할 것 같다. 피그마에서는 하나의 도형개체로 인식되는 면과달리 선은 스타일 속성으로 우선 인식 된다. 하나의 코드로 전환되지 못한다는 것. 자동비율이 적용되지 않으니 크기조절시 ..