오즈코딩스쿨 디자인 캠프 - 하나를 고치면 전부 바뀐다 — 컴포넌트, 베리언트, 베리어블 (day16)

오늘은 손도 머리도 바빴던 날이었다. 어제 마저 끝내지 못한 유튜브 카드 실습으로 몸을 풀고 나서, 본격적으로 컴포넌트의 속을 파고들었다. 프로퍼티가 무엇인지 다시 정리하고, 그걸 활용해 실제 카드 UI를 만들고, 베리언트와 네스티드 인스턴스까지 갔다. 화면을 "그리는" 일에서 시스템을 "설계하는" 일로 넘어가는 감각이 조금씩 잡히는 하루였다.

다시 짚은 컴포넌트와 프로퍼티

수업은 컴포넌트 복습으로 문을 열었다. 컴포넌트에서 가장 중요한 관계는 메인 컴포넌트와 인스턴스다. 메인 컴포넌트는 원본이고, 인스턴스는 거기서 복제해 온 사본이다. 핵심은 둘이 연결되어 있다는 것. 메인 컴포넌트 하나를 수정하면 거기에 연결된 모든 인스턴스가 자동으로 같이 바뀐다. 같은 버튼을 열 개의 화면에서 쓰고 있어도, 원본만 고치면 전부 반영되는 구조다.

메인 컴포넌트는 화면에 직접 쓰는 게 아니라, 따로 빼서 관리하는 요소다.

다만 인스턴스가 메인의 수정을 받기만 하는 건 아니다. 텍스트나 색상 같은 건 인스턴스에서 개별적으로 바꿀 수 있고, 그렇게 손댄 부분만 메인과의 연결이 끊긴다.

그리고 프로퍼티는 컴포넌트에 달린 옵션이라고 생각하면 됐다. 버튼의 텍스트를 바꾸게 하거나, 아이콘을 보이거나 숨기거나, 프라이머리·세컨더리로 전환하게 하는 그런 옵션들이다. 프로퍼티를 잘 설정해두면 인스턴스를 쓸 때마다 UI를 하나하나 파고들지 않아도, 오른쪽 패널에서 바로 바꿀 수 있다.

프로퍼티는 총 다섯 가지가 있다고 했다.

프로퍼티하는 일

텍스트(Text)	인스턴스 안의 텍스트 내용만 변경 (색상 등은 그대로)
불리언(Boolean)	선택한 레이어를 보이거나 숨김 (어피어런스에서 설정)
인스턴스 스왑(Instance Swap)	안에 들어간 컴포넌트를 다른 컴포넌트로 교체
베리언트(Variant)	상태·유형을 미리 정의해두고 전환
슬롯(Slot)	내부 콘텐츠 영역을 비워두고 유연하게 교체

이 중 텍스트·불리언·인스턴스 스왑은 어제까지 실습으로 익힌 것들이고, 오늘은 베리언트를 배웠다. 슬롯은 다음에 다루기로 했다.

<!-- 슬롯은 프로퍼티 종류로 언급만 되고, 이번 수업에서 실습은 진행되지 않음 -->

레고처럼, 컴포넌트로 화면을 조립한다

복습 다음엔 컴포넌트를 실제로 어떻게 쌓아 올리는지를 단계별로 봤다. 가장 작은 단위는 더 이상 쪼갤 수 없는 아이콘이나 텍스트다. 이 아이콘들을 조합하면 버튼이나 입력창 같은 모듈이 되고, 모듈을 모으면 헤더나 카드 같은 템플릿이 되고, 템플릿이 모이면 최종적으로 하나의 **페이지(화면)**가 완성된다. 아이콘 → 모듈 → 템플릿 → 페이지로 이어지는 이 구조가 컴포넌트 기반 설계다.

강사님은 이걸 레고에 빗댔다. 레고는 기본 블록이 규격화되어 있어서 어떤 블록이든 서로 연결된다. 컴포넌트도 기본 단위를 규격에 맞게 만들어두면 나중에 어떤 조합으로 붙여도 화면이 된다. 반대로 블록마다 위에 튀어나온 원기둥 크기가 제각각이라면, 아무리 예쁜 블록이어도 애초에 연결 자체가 안 된다.

기준 없이 컴포넌트를 만들어두면 화면을 구성할 때 안 맞는 부분이 생기고, 나중에 수정도 어려워진다.

이 대목에서 병원이 떠올랐다. 수액 라인이나 커넥터, 주사기 규격이 표준화되어 있어야 어느 병동에서든 같은 물품을 바로 연결해 쓸 수 있다. 규격이 어긋나면 제아무리 좋은 장비라도 무용지물이 된다. 디자인의 컴포넌트도 결국 같은 이야기였다. 처음부터 체계적으로 설계해두는 게 중요하다는 것.

카드 UI를 직접 만들어보며

이론을 들었으니 실습으로 넘어갔다. 카페에서 주문하는 프로덕트 카드를 만드는 과제였다. 썸네일, 베스트 스탬프, 뉴 배지, 상품명, 가격, 판매가, 할인율, 이벤트 배지가 들어가는 카드다.

먼저 썸네일 위에 배지를 얹어 묶는 것부터 시작했다. 배지를 가져와 썸네일 위에 올리면 스탬프 레이어가 아래 깔려 안 보이는 경우가 있는데, 이때 **Cmd + ]**로 레이어를 한 단계 위로 끌어올리면 썸네일 위에 잘 보이게 된다. 그다음 둘을 묶어 오토 레이아웃(Shift + A)을 적용하고, 정렬과 갭, 패딩을 조정한 뒤 컴포넌트로 만들었다.

그리고 카드 전체에 프로퍼티를 걸었다. 베스트 스탬프·뉴 배지·할인 정보·이벤트 배지처럼 경우에 따라 보였다 안 보였다 하는 요소들은 불리언으로, 상품명·이전 가격·판매가·할인율 같은 텍스트 요소들은 텍스트 프로퍼티로, 썸네일은 인스턴스 스왑으로 설정했다. 이렇게 해두니 오른쪽 패널에서 토글을 켜고 끄고 텍스트만 바꾸는 것으로 카드가 여러 케이스로 변신했다.

여기서 하나 제대로 배운 게 있다. 불리언으로 요소를 숨기면 그 자리가 비면서 아래 요소들이 위로 딸려 올라온다는 것. 예를 들어 '뉴' 배지를 끄면 그 공간이 사라지면서 제목이 위로 붙어버린다. 그래서 요소가 사라져도 자리를 지키게 하려면, 그 요소를 오토 레이아웃으로 한 번 더 감싸 영역을 확보해둬야 했다. 보이고 안 보이고를 다루는 일이 단순히 켜고 끄는 게 아니라, 사라진 뒤의 레이아웃까지 미리 설계하는 일이라는 걸 알았다.

강사님 말로는 이 카드 UI가 오늘의 가장 큰 고비였다고 했다. 실제로 손이 많이 갔다. 그래도 한 번 넘고 나니 그다음부터는 한결 수월했다.

베리언트 — 하나의 컴포넌트, 여러 상태

오늘의 새 개념은 베리언트였다. 버튼 하나를 떠올려보면 기본 상태만 있는 게 아니다. 커서를 올렸을 때(호버), 눌렀을 때(프레스드), 누를 수 없는 상태(디세이블드)처럼 여러 상태가 있다. 또 프라이머리·세컨더리·터셔리처럼 종류로도 나뉜다. 이런 상태와 유형을 하나의 컴포넌트 안에 미리 정의해두고 상황에 맞게 전환하는 게 베리언트다.

만드는 방법은 몇 가지였다. 컴포넌트를 선택하면 오른쪽 위에 다이아몬드 안에 플러스가 든 애드 베리언트 버튼이 있는데, 이걸 누르면 아래로 상태가 하나씩 추가된다. 또는 각각 따로 만들어둔 컴포넌트들을 한꺼번에 선택해 크리에이트 컴포넌트 셋으로 묶거나, 컴바인 애즈 베리언트로 합칠 수도 있다. 어떤 방식이든 이름을 잘 지어주는 게 중요했다. 전체 이름을 '텍스트 버튼'으로 통일하고, 각각을 디폴트·프레스드처럼 상태명으로 구분하는 식이다.

헷갈리기 쉬운 지점도 짚었다. 토글처럼 켜고 끄는 것도 베리언트로 만들 수 있는데, 이건 어피어런스에서 다루는 불리언과는 다르다. 불리언이 요소가 '보이고 안 보이고'였다면, 베리언트의 상태 전환은 버튼 자체가 'On일 때 / Off일 때'로 바뀌는 것이다. 각 컴포넌트의 이름을 True/False, On/Off, Yes/No로 지어두는 것만으로도 전환이 된다. 이건 불리언이라기보다 상태 전환으로 보는 게 맞다고 했다.

베리언트를 만들면 컴포넌트 세트가 좀 지저분해지는데, 세트 전체를 오토 레이아웃으로 묶으면 간격을 깔끔하게 정리할 수 있었다.

네스티드 인스턴스 — 컴포넌트 안의 컴포넌트

처음 보는 개념으로 **네스티드 인스턴스(중첩 인스턴스)**도 나왔다. 컴포넌트 안에 또 다른 컴포넌트 인스턴스가 들어가 있는 구조다. 컴포넌트 세트 박스를 선택하고 프로퍼티에서 플러스를 눌러 네스티드 인스턴스를 추가하면, 바깥에서 안쪽 컴포넌트의 속성까지 바꿀 수 있게 된다.

탭을 예로 들었다. 네스티드를 적용하기 전에는 인스턴스를 꺼내도 탭 개수 같은 숫자만 바꿀 수 있었는데, 중첩 인스턴스를 적용하니 각각의 탭이 따르는 원본까지 바깥에서 전환할 수 있게 됐다. 안에서만 왔다 갔다 하던 걸 이제 바깥에서 통제할 수 있게 된 셈이다. 솔직히 눈으로 보기만 할 때는 좀 헷갈렸는데, 직접 만들어보면 그렇게 어려운 개념은 아니라고 했다.

베리언트를 두 축으로 — 타입과 스테이트

버튼 베리언트는 한 단계 더 나갔다. 프로퍼티를 두 개 만들어, 하나는 버튼의 종류(타입: 프라이머리/세컨더리/터셔리), 다른 하나는 버튼의 상태(스테이트: 디폴트/호버/프레스드/디세이블드)로 지정하는 방식이다. 이렇게 해두면 인스턴스 하나를 가져와서 '프라이머리 + 호버'처럼 두 축을 동시에 골라 조합할 수 있다. 버튼 하나에 들어가는 경우의 수를 깔끔하게 관리하는 방법이었다.

이 두 축을 만들 때 한꺼번에 선택하면 타입이 '믹스드(Mixed)'로 표시되는데, 이건 프라이머리·세컨더리·터셔리가 한 번에 섞여 있어서 그렇게 보이는 것이라고 했다. 각각을 따로 선택해 값을 지정해주면 정리된다.

파운데이션과 베리어블 세팅

마지막은 파운데이션, 즉 베리어블 세팅이었다. day14에서 정리했던 디자인 토큰 구조(프리미티브 → 시멘틱 → 컴포넌트로 이어지는 층위)를 피그마에서 실제로 만드는 작업이다. 프리미티브, 시멘틱, 컬러 컬렉션을 만들고, 색상은 테일윈드 플러그인으로 한 번에 등록한 뒤 베리어블로 변환하는 흐름이었다.

다만 이 부분은 수업 중에 깔끔하게 끝내지 못했다. 베리어블을 복사해 붙여넣는 과정에서 자꾸 그룹이 안 잡히고 값이 어긋나는 문제가 반복돼서, 결국 강사님이 과제로 다시 세팅해보라고 정리하셨다. day14에서 입력했던 갭값과 14일 차 컬러를 그대로 적용하고, 테일윈드 플러그인으로 색상 컬렉션을 정리한 뒤 텍스트·배경·아이콘·보더 네 가지를 세팅하는 식으로 복습하면 된다고 했다.

<!-- 베리어블 세팅은 복사·붙여넣기 과정의 기술적 문제로 수업 중 완료되지 못하고 과제로 이월됨 -->

원래는 이렇게 지정한 베리어블이 데브 모드의 스타일스 코드에 어떻게 나오는지, 그래서 개발자와 소통하기 좋다는 걸 보여주려 했는데 그것도 수업에선 잘 되지 않았다. 과제로 직접 지정해보고 데브 모드에서 확인해보라고 하셨다.

오늘 실습하며 나온 피그마 단축키를 따로 모아둔다.

단축키기능

 

Cmd/Ctrl + ]	선택한 레이어를 한 단계 앞으로(위로) 올리기
Shift + A	오토 레이아웃 적용
Enter	하위 레이어(자식)로 진입해 선택
Shift + Enter	상위 프레임(부모) 선택
Cmd/Ctrl + C / Cmd/Ctrl + V	복사 / 붙여넣기
Cmd/Ctrl + 클릭	인스턴스 내부 요소로 바로 진입해 선택
Shift + 클릭	여러 요소 다중 선택
I	색상 추출(스포이드)로 색 찍기
Option/Alt 누른 채 호버	요소 사이 간격·크기 측정 (핸드오프 확인용)