배리어블 시작하기
개발과 더 가까워진 피그마
배리어블이 업데이트되고 나서 한참 후에 올리는 글이라 자세한 툴의 기능보다는 가능성과 구조적으로 변할 수 있는 부분에 집중했습니다.
한 번씩은 써보셨다고 생각하고 글을 씁니다. 혹시 자세한 부분이 궁금하시면 홀릭스나 브런치로 요청하시면 구글 미트나 줌을 통해서 자세히 알려드릴 수도 있습니다. 아니면 구체적인 사례를 따로 글로 쓰거나요.
아직 베타 기간이라 추후 변경될 수도 있기 때문에, 배리어블이 시사하는 점을 집어봤습니다.
배리어블
Figma Config 2023을 보지 않으셨거나, 유튜브에서 소개 영상을 보지 않으신 분이라면, 이 기능이 어디 있는지 찾기 어려울 수 있습니다.
수치와 색을 입력하는 입력창에 포커스를 맞추면, 오른쪽에 육각형 아이콘이 생긴 것을 확인할 수 있습니다.
여기서 육각형 아이콘을 누르면, 배리어블을 생성할 수 있습니다.
혹은 아무 프레임도 선택하지 않은 피그마의 오른쪽 패널에서 Local Variables를 선택하여 배리어블 대화 상자를 불러낼 수 있습니다.
배리어블의 기능을 아직 자세히 모르더라도 이 부분을 통해서 2가지 프로세스를 생각할 수 있습니다.
하나는 기존의 애자일이나 아토믹 디자인처럼 중요한 컴포넌트나 스크린에서 시작하여, 부가적인 기능을 추가하면서 전체 제품을 만드는 프로세스입니다.
다른 하나는 구체적인 계획을 세운 후, 세팅을 먼저 진행하고, 이 규칙에 따라서 컴포넌트를 생성하며 프로덕트와 배리어블을 완성해 가는 과정입니다.
스타트업이든 중견 기업이든, 혼자든 팀이든, 자연스럽게 기능을 발견해서 사용할 수 있는 플로우입니다. 배리어블을 사용하지 않아도, 얼마든지 기존의 형태로 작업할 수도 있습니다.
배리어블의
구성
배리어블은 2023년 7월까지는 크게 4가지의 분류에서 작동합니다.
색, Color
기존 스타일이나 디자인 시스템에서는 색상을 정의할 때, 같은 색상이라도 Fill과 line, Text, Shape에 사용하는 색을 따로 정했습니다.
색과 숫자는 형태와 색상을 결정하는 요소로 컬러인 경우에 Fill과 Stroke를 구분하여 더 효율적으로 색을 구성하도록 되어 있습니다. 체크 표시를 하면, 특정 색상의 적용 정도를 바꿀 수 있습니다.
숫자, Number
숫자 부분이 굉장히 편리합니다. 숫자 부분에서 가장 중요한 부분은 Width와 Height입니다. 이번에 Max와 Min 부분이 업데이트되어 기기 대응이 더 쉽게 되었습니다. 나머지는 숫자도 디자인 과정에서 매우 편리하게 쓸 수 있습니다.
String & Boolean
스트링은 텍스트를 변경할 수 있습니다. 불린은 컴포넌트의 True, False를 조정할 수 있는 값입니다.
두 기능 모두 디자인보다는 간단한 코드를 비개발자가 이해하기 쉽게 만든 부분입니다.
디바이스 혹은 맥락에 따라 다른 값을 보여줘야 할 때 사용할 수 있습니다. 이걸로 컴포넌트의 배리언트 부분을 더 일관되게 관리 할 수 있습니다.
스트링 같은 경우는 한 번에 적용되는 문구 관리에도 편리합니다.
이전에는 플랫폼(데스크톱, 모바일), 상황(컴포넌트의 상태)과 맥락(유지해야 하는 정보와 변하는 정보 및 상태)에 따라 배리언트를 만들고 특정값을 변경해서 디자인에 적용했습니다.
새로운 배리어블을 사용하면, 반응형 디자인과 시각적인 요소의 상당 부분을 변수로 통제할 수 있기 때문에 배리언트로 표현해야 하는 기능을 명확하게 할 수 있고, 모든 경우의 수를 만드는 시간을 절약할 수 있습니다.
또 수치를 그룹으로 만들어 관리할 수 있기 때문에 Mode를 적용하지 않은 상태에서 기존의 스타일보다 효율적으로 값을 관리할 수 있습니다.
컬렉션 아래로 폴더를 만들면 색, 크기, 간격 등을 쉽게 정리 할 수 있습니다.
Mode를 추가하면, 한 차원 높은 관리와 디자인이 가능합니다.
단, 모드의 추가는 유료 플랜(Professional 이상)에서만 가능합니다. 무료인 Starter에서는 모드를 추가할 수 없습니다.
배리어블은 가로축과 세로축을 사용해서 모드와 그룹을 다양한 구성으로 만들어서 활용할 수 있습니다.
‘모드’라는 가로축이 스타일과 다른 점입니다. 기존의 스타일도 폴더를 만들어서 관리할 수 있었지만, 1차원 목록으로 구성이 되어 다른 용도의 스타일을 만들면 복잡한 폴더를 만들어야 했고, 여러 색상을 중복으로 설정해야 했습니다.
반면, 배리어블은 가로와 세로로 2차원으로 표를 구성할 수 있고, 각각의 값이 분리되어 있기 때문에 설계를 어떻게 하느냐에 따라서 프로젝트의 효율성이 높아질 수 있습니다.
모드의 활용 가능성은 다양합니다.
가장 먼저 예제로 소개된 사례는 다크 모드와 라이트 모드를 만드는 작업입니다. 색상을 2개의 모드로 설정하면 같은 이름의 변수에 두 개에 색을 정할 수 있습니다.
만일 최댓값과 최솟값이 적용된 배리어블을 모드로 만들면 데스크톱, 태블릿, 폰을 설정할 수 있습니다.(모드는 2개 이상 계속 만들 수 있습니다.)
조금 더 응용해서 와이어프레임, 스켈레톤, 콘텐츠가 많을 때와 적을 때, 입력창의 에러 체크 상황, UX에서 A/B 테스트, 로그인 한 사용자의 권한에 따른 분류도 모드로 만들 수 있습니다.
컴포넌트는 인스턴스인데, 이해를 위하여 컴포넌트로 표기했습니다.기존에는 프레임을 보기 쉽게 만드는 용도였던 ‘세션’은 배리어블을 만나면서 중요도가 올라갔습니다.
세션에 배리어블을 적용되면. 세션에 있는 프레임을 다른 모드가 적용된 세션으로 옮기기만 해도 다른 모습이
됩니다.
배리어블이 중요한 기능이 되는 이유입니다.
배리어블은 디자인에서 자주 쓰이는 숫자와 문자를 개발자들이 사용하듯이 변수로 관리하고, 그 변수의 모음과 변경을 빠르고 직관적으로 보여줍니다.
색상과 크기의 값만 있다면 다크 모드와 라이트 모드처럼 스타일만 변경되지만, 스트링과 불린도 생기면서 세션, 프로토타입은 물론이고 다른 기능들의 연관성도 높아졌습니다.
디자인은
다시 정의된다.
많은 사람들이 UX, UI를 구분하고, 기존의 프로젝트 방식과 프로덕트 중심의 사고방식 변화를 구분하고, UX와 BX, CX를 구분하려고 합니다. 그중에서 UI 디자인은 거의 모든 디자인 중에서 가장 사용자와 가깝고, 이해하기 쉬우며 명확한 컴포넌트를 제작합니다.
지난 몇 년간 새로운 디자인 툴의 출시와 업그레이드는 프로덕트의 기본이 되는 UI 디자인의 효율성에 집중하고 있습니다. XD, 스케치, 피그마가 일으킨 변화는 UI 디자인을 더 쉽고 빠르게 만들었습니다. 그리고 이제는 개발자와 UI 디자인의 차이를 점점 더 줄여가고 있습니다.
오래된 방식에서 프런트엔드나 앱 개발자는 디자인된 이미지나 PSD 파일을 보고 수치를 확인한 후 개발 환경에 맞게 디자인을 최적화시키는 일을 해왔습니다. 이제는 개발에 필요한 에셋을 공유하는 수준을 테스트하고 있습니다.
디자이너가 코딩을 배워서 개발자에게 넘기는 게 쉽지 않자, 디자인 툴에서 코드에 적합한 내용을 만들기 시작했고, 배리어블은 그 과정을 좀 더 밀접하게 만들어진겁니다.
전통적인 디자인은 미묘함을 중요하게 생각했습니다. 그래서 하나의 이상적인 디자인을 구상하고 다양한 상황에 맞춰서 융통성 있게 변형하는 방법을 많이 선택했습니다.
그래픽툴의 영역에서 이런 행동은 별 문제가 없었지만, 코드로 만들어진 공간에서 작업하는 개발자는 약간씩 다른 버튼 크기와 텍스트 크기를 접하고 당황하는 경우가 많았습니다.
많은 프로젝트가 그래픽툴과 코드의 문제를 직군간의 사소한 갈등으로 여겼지만, 소수의 인력이 복잡한 프로덕트를 만드는 환경이 많아지자, 해결해야 하는 문제가 되었습니다.
디자인은 창의적인 활동이지만, UI와 프로덕트에서 디자인은 툴이 제공하는 옵션을 활용하여 진행됩니다. 디자인 툴이 제공하는 기능은 정해져 있고, 그 기능에 따라 머릿속의 디자인이 디지털화되어 디자인 결과물이 됩니다.
그러나 디자인 결과물이 만들어지는 과정과 노하우는 에이전시나 디자이너, 그 디자이너와 협업한 개발자 정도만 알게 됩니다. 또 디자이너는 프로젝트 초기에 같은 일을 반복하고, 반복되는 작업은 형식화 되었습니다. 아무도 보지 않는 디자인 가이드는 가이드만 정리하는 계약직이나 주니어 디자이너만 보는 일이 되었습니다.
최근의 트랜드는 문서형식의 디자인 가이드보다는 피그마와 같은 툴을 활용하여 디자인 가이드에 담겼던 디자인의 규칙과 수치를 툴이 제공하는 디지털 형식으로 디자인과 개발의 자원으로 만들고, 실시간으로 관리하는 것입니다.
이제 피그마는 디자인을 위해 기능을 통해 입력하는 넓이, 높이, 반지름, 색 등의 수치, 값 혹은 변수(배리어블)는 툴 안에서 일정한 패턴으로 다시 조직화됩니다. 이 과정과 결과는 디지털 기기에 맞는 규칙으로 구성되었지만, 이 과정을 디자이너 혹은 회사에 따라 재활용하기 어려웠습니다.
그래서 배리어블이 사용한 피그마의 디자인 과정은 개발자가 사용하는 코드처럼 개발 에셋이 되어 재활용되고 업데이트되는 과정을 겪게 될 것입니다.
결론,
디자인이 변하고 있다.
많은 사람들이 디자인이 특별하다고 말합니다. 디자인은 인간적이며, 가치 있다고 말합니다. 하지만 현실은 약간 다릅니다. 피그마 환경에서 디자인은 프로덕트 제작의 부분입니다. 개발자가 디자인에 관심을 가질수록 디자인은 측정되기 시작하고, 측정된 후 빠르게 디지털화되었습니다.
배리어블로 디자인이 수치화되면, 이제 거의 모든 디자인 세트를 한 번에 만들 수 있게 됩니다. 그게 전 세계 평균이든, 모바일 앱의 평균이든, 적절한 크기와 개수, 항목이 충분히 AI를 통해서 생성될 수 있습니다. 전체 스크린을 대신 만들어주는 AI보다 이 값을 만들어주는 AI가 더 빠르고 쉬울 수 있습니다. 컴포넌트를 제작하긴 어렵지만, 최적의 기본 수치가 나오는 것은 어려운 일이 아닐 듯합니다.
적어도 디자이너가 코드를 배우지 않자, 코드화될 수 있는 툴이 생겼다는 부분은 인정해야 합니다. 개발자들이 가장 어려워하고, 팀이 가장 힘들어하는 부분은 '디자인이 언제 끝나느냐'와 '디자인의 논리'를 이해할 수 없다는 부분이었습니다.
아직은 베타 테스트 중인 배리어블의 성과에 달라지겠지만, 많은 사람들이 협업에 사용하는 피그마의 이번 업데이트는 디자이너에 따른 품질 변화를 줄이고, 개발자와 디자이너 사이의 공유와 커뮤니케이션 방식을 바꿀 겁니다. 그리고 우리가 알고 있던 UI와 프로덕트 디자인을 재정의하게 될 것입니다.
시니어와 주니어의 차이는 점점 옅어지고 있습니다. 피그마가 나오면서 이제 디자이너의 모니터를 슬쩍 보면서 일정을 기다리는 시기는 지났습니다. 빠른 정보 수집과 깊은 통찰이 필요한 시기입니다.
