피그마를 공부하고 프론트 개발을 하니 개발이 한층 더 개발이 쉬어졌습니다. 더 공부해야 할 것들이 많지만 하나씩 급하지 않게 공부해나가도록 하면 좋을 것 같습니다.
간격
가장 기본적으로 간격을 볼 수 있어야 합니다.
객체를 하나 선택한 후 alt를 누른 상태에서 선택된 객체와 간격을 보고싶은 객체에 mouseover를 하면 위 그림과 같이 간격이 나옵니다.
그리드
단순해 보이는 아래 레이아웃을 퍼블리싱 한다고 생각해봅시다
개별 width, height, 그리고 간격까지 모두 figma에서 확인해서 맞춰 퍼블리싱을 할 수 있지만 만약 디자이너 그리드를 설정해서 디자인을 했다면 내가 한 퍼블리싱은 틀린 퍼블리싱 결과물이 될 수 있습니다.
옳바르게 확인하기
먼저, 해당 결과물이 그리드 시스템이 적용되어있는지 확인해야 합니다. 해당 프레임을 선택해서 적용된 레이아웃이 있는지 확인합니다.
우측 Auto Layout 항목을 보니 6단 그리드가 적용된 것을 확인 할 수 있습니다.
일단 해당 그리드를 확인하기 위해 감겨진 눈을 선택해 그리드를 켜주도록 합니다. 또는 window 의 경우 ctrl + shift + 4를 눌러서 그리드를 켤 수 있습니다.
그리드가 켜지고 나니 보이지 않았던 레이아웃이 보이기 시작했습니다. 6단으로 구성된 그리드가 적용되어 있었고 이에 맞춰 퍼블리싱을 해야 옳바른 디자인이 될 수 있습니다.
반응형의 경우 그리드 시스템이 필수적으로 사용됩니다. 이런 그리스 시스템이 디자이너와 개발자 사이에서 소통이 잘 되야 시행착오 없이 결과물을 도출 할 수 있습니다.
옳바르게 해석하기
이제 적용된 6단 그리드에 대하여 자세히 살펴보도록 하겠습니다.
-
Count
단을 설정할 수 있는 항목입니다. 현재 6단으로 되어 있는 것을 확인 할 수 있습니다. -
Gutter
그리드간의 간격입니다. -
Margin
그리드들 포함한 객체의 좌우 마진입니다.
위에 살펴본것과 같이 여러 여백이 있었지만 맨 좌우 여백과 박스간 여백의 의미는 달랐습니다. 위와 같이 이해가 되었으면 우리는 flex, gap을 이용하여 굉장히 편리하게 퍼블리싱 할 수 있습니다.
디자인시스템
Global css 설정을 하듯 figma에서도 전역에 설정하는 공통 다지인을 설정하는 부분입니다.
아무것도 선택하지 않을 경우 우측에 local styles 항목아래 여러 디자인 시스템 항목들이 나오는 것을 볼 수 있습니다.
Text style에넌 Body1,Body2, color styles에는 red와 blue가 있네요. 아까 그리드를 확인했을 때 보았던 grid styles에 6단 그리드도 보입니다.
두개의 Reds
아래 2개의 빨강 박스가 있습니다.
개별 스타일
왼쪽 빨강 을 확인해보겠습니다.
특별한 것이 없습니다. 현재 #9A0000으로 색상이 지정되어 있습니다. 디자이너의 의도가 맞다면 이 객체는 해당 색상으로 개별 퍼블리싱으로 진행합니다.
전역 스타일
이제 오른쪽 빨강을 확인해보겠습니다.
선택된 색상에 헥스값이 아닌 텍스트로 Color/Red로 지정이 되어있습니다. 이는 우리가 상단에서 보았던 전역으로 설정된 컬러입니다. 이와 같은 경우에는 개별스타일로 적용하면 절대로 안됩니다. 지정된 global css 또는 테마에 해당 빨강을 정의한 후 정의된 빨강으로 사용해야 합니다.
결과물은 같을 수 있어도 이렇게 퍼블리싱을 해야 유지보수가 가능한 제품을 만들 수 있습니다.
디자인 시스템에 대한 고뇌
디자인시스템을 적용하려다보니 개발자뿐만 아니라 디자이너도 동일하게 하나의 디자인 시스템을 바라볼 수 있는 능력이 필요하다는 것을 느꼇습니다. 협력의 영역이기에 좋은 디자이너를 만나는 것은 굉장히 좋은 운이라고 생각됩니다. 이러한 협력이 필요하기에 디자이너도 html,css를 공부해야 하며 개발자도 피그마를 익혀야 한다고 생각합니다.
컴포넌트(Component)
Component라는 개념은 피그마에서 제일 중요한 개념입니다. 개발할 때 class 와 상속을 이용하여 중복된 요소를 줄여나가는것과 동일하게 figma에서도 component나는 개념이 있습니다. 이를 통해 유지보수 및 가독성을 굉장히 높일 수 있습니다.
먼저 피그마 객체 속성을 잠시 살펴봅시다.
여러 객체들이 나열된 것을 볼 수 있는데 객체에 왼쪽에는 객체타입가 아이콘형태로 나와있고 오른쪽에는 객체명을 확인 할 수 있습니다. 오늘 주목 할 내용은 컴포넌트 타입 아이콘입니다.
Main Component & Child Component
아래 이미지를 보면 마름모 타임의 객체가 있습니다. 하나는 4개의 작은 마름모로 되어 있고 하나는 선으로 되어 있는 하나의 마름모 아이콘 입니다.
위 그림에서도 표현하듯이 4개의 마름모 아이콘이 메인 Component이고 선으로된 아이콘이 Main Component로 부터 만들어진 자식 컴포넌트입니다.
디자인에 자식 컴포넌트가 사용되었다면 퍼블리싱을 잠시 멈추고 부모가 누구인지 확인해야 합니다. 그 부모 컴포넌트가 개발상에 구현이 되어 있지 않았다면 부모 컴포넌트를 개발하고, 만약 기존에 만들어져있던 컴포넌트라고 하면 재사용 하시면 됩니다.
