피그마, 평면 디자인을 3D로 돌리고 CSS 값까지 넘긴다

피그마가 11월 12일 피그마 디자인의 ‘3D 변형’을 공개 베타로 내놨다. 기존 화면, 이미지, 글자를 입체적으로 기울이거나 배치하면서 같은 파일에서 글과 색을 계속 편집할 수 있다. 개발자는 개발 모드에서 디자인에 쓰인 회전과 깊이 값을 CSS로 가져올 수 있다.

피그마에 따르면 기능은 모든 요금제에서 Full 좌석과 해당 파일의 편집 권한을 가진 사용자에게 제공된다. 디자이너는 캔버스에서 직접 효과를 적용할 수 있다. 피그마 에이전트에는 문장으로 레이어 배치를 요청할 수 있고, 공유 파일에서 편집을 맡기려면 Full 좌석과 파일 편집 권한이 필요하다. 에이전트로 모션을 생성하려면 유료 요금제의 Full 좌석이 필요하다.

회전은 레이어에, 원근은 상위 프레임에

새 효과는 텍스트, 벡터, 이미지, 프레임, 컴포넌트에 붙는다. 가로축이나 세로축을 기준으로 기울이거나 화면에 수직인 축을 중심으로 돌릴 수 있고, 깊이 값으로 앞뒤 위치를 바꾼다. 피그마는 캔버스에서 각도를 움직일 때 결과를 바로 보여 준다. 플러그인 문서에 따르면 변형을 적용해도 레이어의 레이아웃 크기는 그대로다. 기울어진 버튼이 화면에서 좁게 보여도 레이아웃에서 차지하는 자리는 그대로 유지된다.

여러 레이어의 깊이가 하나의 장면처럼 보이려면 이를 담은 상위 프레임의 원근 설정이 쓰인다. 예를 들어 같은 크기의 카드라도 더 가까운 쪽은 크게, 뒤쪽은 작게 보이도록 배치할 수 있다. 피그마 도움말은 원근 값이 작을수록 시점이 가까워져 효과가 강해진다고 설명한다. 깊이는 카드마다 따로 정하고, 원근은 카드들이 속한 장면의 시점에 적용한다.

중첩 레이어를 3D로 유지하면 같은 공간에서 앞뒤 위치를 살릴 수 있다. 이 설정을 켠 상위 프레임에서는 불투명도와 일부 효과를 쓸 수 없고, 기존 채우기와 테두리는 숨겨진다. 카드 모음 전체를 포스터나 배너 안에 한 장면으로 넣을 때는 상위 프레임에서 평면으로 표시할 수 있다. 그 프레임을 경계로 내부의 3D 레이어가 바깥과 깊이를 공유하는 것도 끝난다.

에이전트가 만든 움직임도 타임라인에서 수정

피그마 모션은 지난 6월 디자인 파일 안의 타임라인을 제공하는 공개 베타로 등장했다. 이번 3D 변형은 그 타임라인에서 움직이는 대상으로 추가됐다. 예를 들어 뒤집히는 카드의 시작과 끝 시점에 서로 다른 회전 각도를 지정하면 그 사이의 움직임을 미리 볼 수 있다. 레이어의 깊이뿐 아니라 상위 프레임의 원근도 시간에 따라 바꿀 수 있다.

앞뒷면의 그림을 다르게 만들려면 각각을 레이어로 두고, 돌렸을 때 각 레이어의 뒷면이 보이지 않도록 설정할 수 있다. 이 구조라면 움직임을 정한 뒤에도 카드 앞의 글이나 뒤의 그래픽을 별도로 편집할 수 있다. 피그마가 소개한 에이전트 활용 예시도 이처럼 레이어를 먼저 배치한 뒤 회전 애니메이션을 넣는 방식이다. 에이전트가 만든 키프레임은 팀이 타임라인에서 확인하고 조정할 수 있다.

피그마 브랜드 스튜디오는 새 기능의 공개 영상 제작에 이 흐름을 적용했다고 밝혔다. 브랜드 팀은 한 장면에서 글자를 여러 거리로 띄우고 간격을 반복하는 작업을 에이전트에 맡겼다. 레이어가 실제로 어떻게 움직이는지는 모션으로 확인했다. 브랜드 디자이너가 컴포넌트의 색과 그라데이션을 조정하는 동안 모션 디자이너는 같은 파일에서 움직임을 다듬었다. 디자인 파일에서 에이전트를 쓰면 피그마 AI 크레딧을 사용한다. 이 크레딧은 피그마의 다른 AI 기능과 같은 잔액에서 차감되며, 회사는 요청의 복잡도와 에이전트가 수행한 작업에 따라 사용량이 달라진다고 안내한다.

깊이와 원근 값을 개발 모드에서 확인

개발자는 개발 모드에서 3D 효과가 있는 레이어를 선택해 CSS 변형 값을 확인하고 복사할 수 있다. 화면 앞뒤 위치는 CSS의 translateZ 값에 대응한다. 상위 프레임의 원근과 하위 레이어를 입체로 유지할지 정하는 설정도 CSS 속성에 대응한다. 회전 각도만 적힌 캡처보다 레이어의 위치와 이를 바라보는 시점을 함께 전달할 수 있다.

개발 모드 이용 범위는 요금제와 좌석에 따른다. 피그마는 MCP를 지원하는 코딩 에이전트가 레이어의 디자인 값을 읽어 3D 효과를 구현하는 경로도 안내한다. 플러그인 개발자에게는 회전과 깊이를 읽고 수정하고, 프레임의 공통 원근을 설정하는 API가 추가됐다. 이 API는 11월 12일자 개발자 문서에서 베타로 분류됐으며 피그마는 세부 인터페이스가 바뀔 수 있다고 명시했다.