hohyeon99 님의 블로그

프레임 Frame 이란?코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체를 말한다   프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어진다. 박스 모델의 박스 하나하나가 피그마에서 프레임이라는 기능으로 구현되는 셈이며 다른 개체나 프레임을 넣을 수 있기 때문에, 컨테이너(Container)라고도 불린다 그룹 Group 이란?여러 개체를 하나로 묶어주는 기능을 말한다사진을 보면 각 개체를 하나로 묶어 새로운 그룹을 만들어 낸 것을 볼 수 있다. 이처럼 그룹은 여러 개체를 조정하거나 디자인을 정리하는 등 편의를 위해 여러 개체를 하나로 담는 기능을 말한다. 프레임과 달리 그룹은 코드 블록으로 인식되지 않는다는 것이 특징이다.

어떤 툴을 쓰더라도 항상 기본적인 움직임이나 이동을 위한 기능이 있듯이 피그마에서도 기본 커서로 이동(Move)을 사용한다.피그마는 디자인 특성 상, 크기 조절이 조금 특별한데 다른 툴에서 사용하는 크기 조정을 피그마에선 크기 조정 툴(Scale)을 따로 써야 하는 것이 차별점이다.   이동(move) 도구 메뉴의 첫번째 아이콘이자 기본 커서인 무브 툴이며 단축키 V로 바로 쓸 수 있다. 무브 툴 상태에서 개체를 선택할 수 있고, 개체를 선택한 채로 원하는 곳으로 이동시킬 수 있으며 무브 툴 상태에서 개체의 가장자리를 잡고 움직이면 크기를 줄이거나 키울 수 있는것이 특징이다.  크기 조정(Scale) 도구 메뉴의 첫번째 아이콘의 화살표를 눌러 열어보면 무브 툴 밑에 위치해 있으며 단축키 K로 바로 쓸 수..

8포인트 그리드란??  우리가 보는 앱과 웹사이트 화면을 잘 들여다보면, 많은 요소들로 되어 있는데 이 요소들 간에도 일정한 규칙이 있다화면에 배치된 버튼이나 입력창, 메뉴들을 한번 둘러보면 다양한 UI를 볼 수 있는데 이 UI들은 아무렇게나 만들어진 것이 아닌 디자인에서 합의한 규칙이 있다. 이 디자인 요소들은 8의 배수로 만든다는 규칙을 가지고 있는데그 규칙을 8포인트 그리드 디자인(8-point grid design)이라고 한다. 왜 8포인트 그리드가 필요할까??사진을 보면 각각 XL,L,M,S사이즈의 배너 버튼이 존재한다. M배너를 기준으로 L와 M 버튼을 비교하면 배너의 규칙이 보일텐데 사이즈에 따라 폰트사이즈는 2씩 변경되고 여백사이즈는 4씩 변경된다 그렇다면 우리는 이러한 규칙을 발견함으로서..

디스플레이(Display)우리는 일상생활에서 웹사이트나 앱, 키오스크, 전광판, TV 등을 보게 되는데전가기기의 보이는 화면을 우리는 디스플레이(DISPLAY)라고 부른다. 이 디스플레이는 픽셀(Pixel)이라는 정말 작은 칸들로 이루어져 있으며 따로 규격화 되어 있지는 않다TV나 모니터을 자세히 보면 보이는 작은 입자들이 픽셀이다. 해상도(Resolution) 디스플레이의 선명한 정도를 나타내며 픽셀의 개수를 의미한다픽셀의 갯수는 가로줄의 픽셀의 갯수 * 세로줄의 픽셀수로 나타내며해상도가 1,920 * 1,080  인 디스플레이는 가로줄의 픽셀이 1,920개, 세로 줄엔느 1,080개가 들어 있기에 총 2,073,600개의 픽셀이 들어가 있는것이다. 픽셀수와 해상도의 연관성  해상도가 같다면??화면 크..