피그마 기능 리뷰 - Variables(1)
Variables(변수)의 개념과 기본 사용법 (1)
Config 2023이 무사히 막을 내렸습니다.
아무래도 가장 충격적이었던 건 키노트 세션에서 발표된 이번 피그마 업데이트였는데요,
특히 그 중 Variables의 등장은 국내는 물론 전세계 디자이너들은 모두 탄성을 내지르게 만들었습니다.
토큰을 완벽하게 구현하는 그 개념과, 토큰 이상의 활용도를 기대하게 만들었거든요.
또 다른 이유로는 이제 지금까지 만든 걸 다시 variables를 사용해서 다 고쳐야 된다는 것 때문에...
와 진짜 좋은데 막막하다...디자인 시스템 만들어놨는데...토큰 스튜디오 연동해놨는데........그래도 어쩌겠습니까.
써야지......또 좋으니까...
(지난 번에 component property 업데이트 됐을 때도 그랬는데....또 눈물나네)
기왕 쓰는 거! 이번 업데이트를 하나하나 뜯어보면서 피그마에 아직 낯선 분들을 위해 기능을 설명하고, 활용하는 방법을 소개해보고자 합니다. 덕분에 피그마로 디자인 시스템 구축하는 글 쓰는 건 또 밀릴 것 같습니다.
이번 피그마 컨퍼런스 2023을 통해 소개된 기능은 크게 Variables와 Dev Mode인데, 이중 Variables를 먼저 소개하고자 합니다.
분량이 많은 관계로 연재물로 기획하니 구독 및 좋아요, 알림 설정까지 해두시면 좋아요!
??? : 히히 빨리 다 고쳐서 업데이트 해보세요! 물론 내년에 또 업데이트할거지만!Variables(변수)
1. 변수의 개념과 데이터 형식
먼저 Variables의 개념부터 소개해봅니다. 이하 변수라고 부르겠습니다.
변수라는 건 말 그대로 Vari(변하다)-ables, 즉 변하는 값(숫자) 입니다. 개발을 공부해보신 분들은 개념이 익숙할텐데요, 임의의 데이터값을 레이블을 달아 저장하는 개념이라고 보시면 됩니다.
조금 더 쉬운 말로 비유하자면,
'내 계좌 잔액' 이라는 변수를 만들었다고 생각해보시면 됩니다. 내 계좌 잔액은 잔고에 따라 변동하기 마련이죠. 따라서 '내 계좌 잔액' 을 조회할 때마다 그 결과값은 다르게 나올 겁니다.
물론 매번 0원이 나올 수도 있습니다.
개념을 더 확장해서 사용해보면, '내 이름' 처럼 특정 문자도 저장해둘 수 있고, '잘생김' 처럼예/아니오인 경우도 가능합니다. 저장할 수 있는 모든 값이면 저장이 가능합니다.
Q. 어? 그럼 변하지 않는 값도 변수라고 하나요?
A. 네! 변하지 않더라도, 변수로 저장할 수 있습니다. 물론 변하지 않을거라고 확신할 수 있는 값이라면, 굳이 변수로 저장하지 않고 쓰는 게 낫지만요
이 저장할 수 있는 형태를 데이터 형식이라고 부릅니다.
위에서 얘기한 '내 이름'은 문자열(String)이라는 데이터 형식으로 저장되고,
'잘생김 여부' 는 논리형(Boolean)이라는 데이터 형식으로 저장됩니다.
즉, 글자가 값인 데이터는 스트링 형식, Y/N인 데이터는 불리언 형식이라고 부르게 됩니다.
피그마에서 저장할 수 있는 변수는 위에서 소개한 숫자, 문자열, 논리형에 더해 색상까지 총 4가지 데이터 형식을 변수로 저장할 수 있습니다.
변수 패널에서 확인할 수 있는 4가지 형식2. 피그마의 변수 패널
피그마에서 변수 패널을 여는 방법은 기존에 사용하던 스타일을 쓰는 것과 동일하게 열 수 있습니다.
스타일 패널에서 라이브러리를 눌러 열 수도 있고,
아무것도 선택하지 않은 기본 패널에서도 열 수 있습니다.변수 패널을 열어보면 다음과 같은 화면을 볼 수 있습니다.
변수 패널 내부3-1. 변수 활용 (1) - 디자인 토큰
디자인 토큰의 개념은 어려워서 사실 이 글에서 설명하는 건 비효율적이라, 더 잘 설명된 좋은 글을 첨부합니다. GS SHOP 디자인 토큰 적용기입니다.
최대한 쉽게 풀어서 설명하자면 다음 2가지가 디자인 토큰의 핵심이 될 겁니다.
1. 제품을 만드는 모든 사람들이 규칙을 이해하고 일관된 설계를 할 수 있도록 - 디자인 시스템의 일관성
2. 디자인 시스템에서, UI 단계의 디자인들을 독립적으로 유지하기 위해 - 디자인 시스템의 효율성
디자인 시스템의 일관성이란, 제품을 만드는 기획자, 디자이너, 개발자, 심지어 마케터와 다른 유관 부서들까지 디자인 시스템의 규칙을 이해할 수 있도록 만드는 겁니다.
우리가 일반적으로 간격을 조정할 때 8px, 16px, 24px 식으로 조절하고, 폰트 사이즈도 16px, 20px, 24px 로 조절하게 됩니다. 여기서 우리는 디자이너를 말합니다. 디자이너들은 머릿 속에 저 수치들이 거의 반사적으로 들어있지만, 디자이너가 아닌 사람들은 7px이면 뭐 어떤가, 7px 다음엔 10px인가 하게 됩니다. 즉, 디자이너가 아닌 사람들이 저 숫자들이 변하는 과정을 봤을 때, 규칙을 알기 어렵다는 뜻입니다. 그래서 디자이너가 저 숫자들이 변하는 규칙을 정해주지 않으면, 개발자와 무지하게 싸우게 됩니다.
그래서 디자이너들은 font-small / font-medium / font-large 라는 이름을 붙여주게 됩니다. 14, 16, 18 이라는 임의의 숫자가 아니라, 작은 것부터 큰 것까지의 Context가 있는 이름을 붙여주게 되고, 이 이름들을 토큰이라 합니다. 더 확장해보면, 색상이나 다른 크기들에서도 이 컨텍스트들을 만들어 줄 수 있게 됩니다. 이 이름들이 디자인 시스템의 일관성이죠.
색상에도 토큰을 부여할 때가 사실 디자인 시스템에서 토큰을 쓰는 가장 핵심적인 이유가 됩니다.
위와 같은 색상을 규정해서 버튼의 배경색, 글자색, 테두리 색 등 총 3가지로 쓴다고 가정해봅시다.
그렇다면 각 색상들은 모두 같은 #2A79FF 색상을 사용하겠죠.
그런데, 만약 버튼의 색상을 다른 색으로 바꿔야 된다면 어떻게 될까요?
그냥 바꾸면 됩니다. 여기까진 문제가 생기지 않죠.
만약, 3가지가 아니라 10개의 UI를 사용하고, 이 중 5개에 이 색상을 쓰고 있다면 어떻게 될까요? 슬슬 커뮤니케이션이 어려울 겁니다. #2A79FF인 색깔을 모두 바꿔달라고 할 수는 있지만, 매번 이렇게 얘기할 수는 없으니까요. 이 색깔이 어떤 맥락에 쓰이는 색깔인지는 디자이너만 알고 있습니다. 개발자는 이게 얼마나 중요한 색상인지 모릅니다. 따라서, 개발자에게도 '이 색상은 어떤 색상이야' 라는 이름을 부여해줘야 합니다.
따라서 #2A79FF라는 색깔에 Primary 라는 이름을 붙이기 시작합니다.
그럼 다음과 같을 겁니다.
자, 이때 테두리에 사용하는 텍스트 색상을 바꾸려고 합니다. 이때, 개발자와 동시에 같은 UI를 지목하기 위해선, 테두리에 사용하는 프라이머리 컬러라고 소통하게 됩니다.
이걸 더 편하게 하기 위해서 버튼에 사용하는 프라미어리 컬러도, 텍스트에 사용하는 컬러도 각각 이름을 따로 부여해주게 됩니다.
만약 이렇게 이름을 붙여주지 않는다면,
1. 개발자는 이 색상이 UI 안에서 어떤 의미로 쓰이는 지 알 수가 없고
2. 디자이너 역시 색상을 지칭할 때 매번 커뮤니케이션의 비효율이 발생
하게 됩니다.
즉, #2A79FF 라는 색상값은 UI 컴포넌트에서의 의미가 들어있지 않은, 단순한 헥스코드일 뿐이라는 것입니다. 실제로 의미가 생기려면, 이 헥스코드가 button의 backgroundColor라는 이름으로 재탄생해야 된다는 것입니다. 그래야 버튼의 배경색이 바꾸게 되면 원래 색상값을 수정하는 것이 아니라, 버튼 배경색 토큰만 수정하면 된다는 것이죠.
버튼에 사용된 색상은 2가지인데, 어떤 컨텍스트로 쓰이는 색인지 알 수가 없다.이 이름들을 모두 토큰이라 부르게 됩니다. 토큰의 이름을 작성하는 방법은 모두 다르니 이건 별도의 문서에서 서술해보겠습니다.
Variables를 활용하는 첫번째 방법은, 이런 디자인 토큰 값들을 variables에 저장해서 사용할 수 있게 됩니다. 기존 피그마에선 스타일 이라는 값으로 색상을 저장해서 사용했지만, 딱 색상과 이름 한 쌍만 만들 수 있었고 이런 토큰 관계성은 만들 수 없었습니다. 따라서 토큰 스튜디오 같은 외부 프로그램을 쓰거나 별도의 문서로 가이드라인을 만들어야 했습니다. 물론 러닝 커브는 어마어마하게 높았죠.
이제 색상을 Variables로 저장해서 사용할 수 있습니다. 저장하는 방법은 스타일과 거의 같습니다.
스타일 만드는 것과 동일하게, /로 폴더를 만들어 구분지어줄 수도 있습니다.
여기까지는 스타일과 동일하지만, 동일한 과정을 한 번 더 반복하면 토큰을 연결할 수 있게 됩니다.
button/background/primary 라는 색상을 추가하고, 해당 변수의 색상 코드를 만들어둔 library에서 선택하게 되면, button/background/primary 라는 색상은 primary/500 이라는 색상을 값으로 가지는 토큰이 완성됩니다.
즉, 다음과 같은 관계성이 성립하게 됩니다.
즉, 버튼의 배경색을 바꾸기 위해선, Primary/500 이라는 색상 자체를 바꾸는 것이 아니라, button/background/primary 라는 ui 맥락이 들어있는 색상을 수정하면 되게 됩니다.
이렇듯 컴포넌트를 수정하고 대규모 디자인 시스템을 구축할 때, 토큰을 정교하게 연결해놓는 것만으로도 작업량이 대폭 줄어들고, 커뮤니케이션에 있어서도 매우 효율적으로 사용할 수 있습니다.
디자인 토큰은 색상에만 국한되는 것이 아니라 간격, 패딩, 곡률(border-radius)에 까지도 사용할 수 있습니다. 16 이라는 숫자를 padding/medium으로 저장해서 반복적으로 사용할 수도 있습니다.
이렇게 디자인 토큰으로 사용할 수 있는 변수들은 입력창 오른쪽에 작은 육각형 아이콘이 나타납니다. 이 변수들을 활용하면 디자인 시스템을 구축할 때 디자이너와 개발자가 일관된 규칙을 만들기 쉬워집니다.
작은 육각형 아이콘3-2. 변수 활용 (2) - 모드
모드는 정확하게 어떤 기능이다! 라고 규정하긴 어렵지만, 피그마 변수 기능에선 일반적으로 라이트 테마와 다크 테마처럼 같은 변수값들을 지니는 여러 벌의 세트를 의미하는 것으로 보입니다. 키노트 세션에서도 장바구니 기능을 프로토타이핑할 때, 상품들을 모드로 관리하고 있습니다.
상품들은 이름, 가격, 수량, 설명 등 같은 형식을 공유한다. 이 모드를 활용하면 1에서 다룬 디자인 토큰에 다크 테마와 라이트 테마를 부여할 수도 있고, 또 위 스크린샷처럼 같은 형식을 공유하는 여러 벌의 세트를 만들 수도 있습니다.
3-3. 변수 활용 (3) - 프로토타이핑
피그마는 지금까지 프로토타입 기능에서는 약세였습니다. 프레이머는 물론이고, 변수 기능 자체가 핵심이었던 프로토파이한테 매우 밀리는 추세였습니다. 업데이트 이후에도 프로토파이와 프레이머의 기능은 아직도 따라잡기 힘들지만, 그럼에도 이전에 가지고 있었던 불편함은 많이 해소가 되었습니다.
이 변수를 활용하면 프로토타이핑이 더 정교해집니다.
예전에는 프로토타입 기능이 단순히 화면을 연결하는 정도에 그쳤기 때문에, 경우에 따라 변하는 화면을 보여주기 위해선 각 경우마다의 화면을 다 그려야 했고, 이에 따라 디자인 프레임이 과도하게 많아지는 문제를 낳았습니다. 그걸 봐야 하는 개발자나 다른 디자이너 역시 불편했던 건 마찬가지였고요.
하지만 이제 변수를 활용하면, 경우의 수에 따라 화면을 더 그리지 않아도 되게 됩니다. 이번 피그마 컨퍼런스 키노트 세션에서 CEO 딜런 필드가 '변수를 활용해서 장바구니 아이템 숫자 및 결제 금액 변경하기' 를 프로토타이핑해본 부분을 가져왔습니다.
https://youtu.be/yI9QVwkk2Go?t=1291
이 외에 다르게 사용할 수 있는 방법도 하나 더 있습니다.
만약 로그인 여부에 따라 다르게 보여지는 화면이 있다고 생각해보겠습니다. 예시 디자인은 다음과 같습니다.
위 디자인처럼, 상품을 장바구니에 담았을 때 비회원인 경우와 회원인 경우의 UI가 다르다면, 기존에는 회원일 때의 구매 프로토타입과 비회원일 때의 구매 프로토타입을 별도로 만들어야 했습니다.
하지만 이제 변수 기능을 사용하면 2개 프로토타입을 하나의 프로토타입안에서 조건부로 분기를 나눠 줄 수 있습니다.
먼저 변수를 하나 생성합니다. 이 변수는 '로그인했는가?' 라는 이름의 변수입니다. 따라서 값은 했다의 Y, 안 했다의 N을 가지는 논리 형식을 가집니다.
모든 사용자는 기본적으로 로그인이 안 되어 있기 때문에, '로그인 안했음' 으로 둡니다.
로그인하고 둘러보기를 누르는 경우, Set Variables를 눌러 로그인 변수를 '로그인 했음' 으로 바꿔주고 상세 화면으로 보내줍니다. 만약 비회원으로 둘러보겠다면, 로그인 변수는 그대로 둔 채 상세 화면으로 보내줍니다.
상세 화면에서 장바구니 버튼을 누르면 장바구니로 이동시킵니다. 이때, 앞에서 처리했던 '로그인 했니?' 를 물어봐야 합니다. 그래야 로그인 했으면 회원 장바구니, 안 했으면 비회원 장바구니로 보내줘야 합니다.
[만약 ~ 라면 A, 아니라면 B] 를 만들 땐, Conditional 을 선택합니다.
프로토파이 하신 분들은 거의 달고 사는 조건분기...
위의 화면의 프로토타입을 이렇게 수정합니다.
써 있는 말만 보면 어려워 보이지만, 간단한 수식입니다.
'isLogin 이라는 변수의 값이 true 라면, 회원용 장바구니로 이동시켜줘. 아니라면 비회원 장바구니로 이동시켜줘.' 라는 조건에 따른 분기 처리를 해준 셈입니다.
비회원 장바구니에서 로그인을 할 수 있게 로그인 버튼을 달아주고, 여기에도 '로그인했음' 을 만들어줍니다. 그리고는 회원 장바구니로 새로고침되게 해줍니다.
테스트할 플로우는 다음과 같습니다.
메인 -> 비회원으로 진행 -> 상품 상세화면에서 장바구니 이동 -> 비회원 장바구니 화면에서 로그인 -> 회원 장바구니에서 뒤로 이동해 상품 상세화면으로 돌아가기 -> 다시 장바구니로 이동해 회원 장바구니로 나오는지 확인
프로토타입을 재생해 원하는 플로우가 완성되었는지 확인해봅니다
(Shift + Space Bar를 누르면 현재 디자인 화면을 유지한 채로 프로토타입을 띄워볼 수 있는 기능이 추가됐습니다. 인라인 프로토타입 이라고 부릅니다.)
위와 같이, 변수를 활용하면 다양한 경우의 프로토타입을 만들 수 있고, 실제 제품처럼 동작하는 프로토타입을 만드는 것도 가능해집니다. 로그인 여부를 변수로 저장할 수도 있고, 커머스나 배달 앱처럼 최소 주문 금액이 되지 않으면 결제 버튼을 비활성화시켜두는 것도 하나의 프로토타입 안에서 조건으로 만들어 보여줄 수 있습니다.
여기까지 변수의 기본 개념과 간단한 활용을 살펴봤는데요,
변수의 스코핑, 변수 세트 관리, 더 자세한 토큰 관련 내용 등 확장편은 다음 편에서 다뤄보겠습니다 :)
변수는 이번 피그마 컨퍼런스 2023에서 디자이너들이 가장 열광한 기능이 아닐까 싶습니다. 그동안 매우 불편하게 관리했던 디자인 토큰들은 물론이고, 프로토타입을 복잡하게 만들었던 조건에 따른 많은 디자인 플로우들이 변수라는 기능 하나로 많이 해소가 되었으니까요.
물론 프레이머나 프로토파이에 비하면 아직 프로토타입 기능은 갈 길이 멀고, 디자인 토큰 역시 아직은 매우 자세한 기능이 있는 것은 아닙니다. 그러나 프로토타입과 디자인 시스템이라는, UXUI디자이너들의 가장 강력한 무기 2가지가 이번 업데이트로 강화된 만큼, 앞으로의 업데이트는 얼마나 더 혁신적일지 기대해볼만 합니다.
변수 2편에서 계속 됩니다.
