섹션과 프로세스
프로덕트를 나누고, 구분하는 방법
피그마에는 오브젝트를 담을 수 있는 다양한 도구가 있습니다.
그룹, 프레임, 섹션이 캔버스에서 사용할 수 있는 도구이며, 레이어와 페이지가 왼쪽 사이드바에서 쓸 수 있는 도구입니다.
Figma Config 2023에서 섹션 기능이 업데이트 되면서 레이어 패널과 캔버스 양쪽에서 섹션의 변화가 일어나게 되었습니다.
이번 글에서는 섹션의 확장된 기능과 추가된 기능을 활용한 디자인 프로세스를 생각해 봅니다.
확장된
섹션의 기능
섹션은 그룹이나 프레임에 들어가지 않는
상위 요소입니다.
섹션은 간단한 기능인데, 섹션의 역할이 확장되면서 다른 기능과 시너지를 일으킵니다. 섹션은 피그마가 디자인과 오브젝트를 다루는 구조에서 상위 요소로 작용합니다.
센스 있게 레이블 방향이 바뀐다.현재 버전에서 섹션은 프레임과 그룹으로 표현할 수 없는 부분을 표현합니다. 그룹은 실무자만 볼 수 있는 묶음이라면, 프레임은 사용자가 보게 되는 프로덕트의 실제 형태 중 하나입니다. 섹션은 이 두가지를 묶을 수 있는 단위입니다.
이 묶음 단위는 여러가지를 표현할 수 있습니다. 경험의 단위가 될 수도 있고, 기능의 단위가 될 수도 있습니다. 이 개념을 사용해서 복잡해지기 쉬운 디자인 및 설계 과정을 단순하게 만들 수 있습니다.
섹션에는 배리어블을 적용할 수 있습니다.
배리어블이 생기면서 섹션과 배리어블의 가능성은 무척 커졌습니다. 섹션으로 프레임을 묶으면, 배리어블을 적용하여, 프레임 전체에 영향을 줄 수 있습니다.
배리어블의 가장 기본적인 사용 사례는 다크 모드 적용이지만, 디바이스마다 다른 Spacing 혹은 Padding 관리도 가능합니다.
섹션에 개발 가능한 상태라고 표시할 수 있는 기능이 생기면서 섹션의 상태를 바꿀 수 있습니다. 상태를 변경하면 레이어와 페이지가 있는 왼쪽 사이드바에서 섹션의 상태를 확인할 수 있습니다.
섹션에는 Ready for Dev 상태를
적용할 수 있습니다.
Ready for Dev는 디자이너와 개발자의 사이에서 명확하고 효과적인 소통을 가능하게 합니다.
Ready for Dev를 선택하면 왼쪽 사이드바에 섹션 컨테이너 하위의 컨테이너에 대한 썸네일을 표시해줍니다. 스크린을 빠르게 선택할 수 있으니, 디자인 시에 레이어와 스크린의 계층을 맞춰서 전달하면 효율적입니다.
Ready for dev는 편집 권한이 있으면 누구나 누를 수 있는데 눌러 놓지 않으면 하위 컨테이너의 썸네일이 표시 되지 않습니다.
녹색을 많이 쓰는 회사에선 곤란할 수도 있겠네요.Dev Mode를 활성화하면 개발을 위한 상태로 피그마 UI가 전환되면서 오른쪽 사이드바의 인스펙터에 개발자가 작업해야 하는 화면과 업데이트 날짜가 표시됩니다.
Dev Mode에서는 프론트엔드 개발자가 유용하게 사용할 수 있는 2가지 기능이 있습니다.
Compare Change은 섹션 바로 아래의 컨테이너를 선택하면, 오른쪽 인스펙터에 표시됩니다. 최종 업데이트와 변경사항을 확인할 수 있습니다.
피그마의
디자인 프로세스
현재(2023년 10월)까지 섹션의 기능을 통해서 피그마에서 적합한 디자인 프로세스를 생각해 볼 수 있습니다. 프로덕트를 구성하는 환경을 설계하는데 도움을 줄 수 있습니다.
로드맵에 따라서 제작해야 하는 기능을 섹션으로 구성하고, 그에 맞는 스크린을 프레임에 따라 제작하여 채워나가는 방식을 생각할 수 있기 때문입니다. 섹션은 테두리와 배경색을 구분할 수 있어서 사용자 경험의 단위로 구분할 수도 있습니다.
섹션 구성이 먼저 되는 프로젝트 혹은 프로덕트의 경우, 일정에 따라서 적용되는 과정을 생각할 수 있습니다. Page 혹은 Layer로 디바이스나 화면 모드를 분류할 수도 있습니다.
섹션의 주기는 섹션 생성 - 베리어블 적용 - Ready to Dev로 스프린트 주기에 따라 순환할 수 있습니다.
실제로 피그마는 시작부터 끝까지 end-to-end를 지원할 수 있는 협업 플랫폼을 목표로 하고 있기 때문에, 프로덕트나 프로젝트를 모든 과정에서 활용하기 쉬운 기능을 많이 추가하고 있습니다.
그 중에서 섹션은 작업을 분담하고, 전달할 수 있는 역할이 부여되고 있습니다.
이전까지 디자인 프로세스는 툴에서 시작되지 않았습니다. 대부분의 디자인 프로세스는 대화 혹은 문서 교환에서 시작된 경우가 많습니다. 그래서 일단 대화를 하거나, 문서를 작성한 후, 그 다음에 절차를 논의하는 형식으로 진행되었습니다.
디자인 도구에 컴포넌트와 실시간 협업 기능이 업데이트 되기 시작하면서 디지털 도구가 임계점을 넘었습니다. 지금의 피그마는 지배적인 디지털 도구이면서, 프로젝트와 프로덕트의 가장 밑부분에 있는 실무 작업을 빠르게 디지털화하고 있습니다.
대화와 문서로 이루어지는 부분을 상당 부분 흡수하면서, 효율적으로 변환하고 있는 중입니다. 섹션 기능을 프레임을 관리하거나 정리하는 정도로 여길 수도 있지만, 대부분의 전체 기능을 분할하고, 세부 요소를 통제할 수 있도록 이름을 붙이면서 디지털 제품 제작 영역의 발전은 더욱 빨라질 것으로 예상됩니다.
