컴포넌트 상속과 오버라이드: 공통 속성과 화면별 차이 관리

컴포넌트를 바꿨는데 특정 화면의 색상이나 문구가 그대로라면 먼저 어느 속성을 주 컴포넌트에서 가져오고, 어느 속성을 인스턴스에서 따로 바꿨는지 확인하세요. 상속은 연결된 주 컴포넌트의 속성을 따르는 것이고, 오버라이드는 한 인스턴스에서 특정 속성을 별도로 지정하는 것입니다. 같은 모양이나 같은 이름이라는 이유만으로 연결 관계가 생기지는 않습니다.

Pixso 디자인 시스템에서는 공통 기준과 화면별 변형을 구분해 관리하는 것이 중요합니다. 이 글에서는 카드의 문구와 아이콘은 화면에 맞게 바꾸되 공통 배경과 간격은 유지하는 예제로 그 차이를 살펴봅니다.

1부. 상속과 오버라이드란 무엇인가?

주 컴포넌트는 반복해서 사용하는 요소의 기본 스타일, 레이아웃, 속성을 정의합니다. 인스턴스는 그 주 컴포넌트에 연결된 재사용 요소입니다. 같은 파일에서 주 컴포넌트를 수정하면 연결된 인스턴스에도 변경이 반영됩니다. 다만 인스턴스에서 이미 따로 지정한 속성까지 무조건 같은 값으로 바뀌는 것은 아닙니다.

버튼을 예로 들면 공통 배경색과 글꼴은 주 컴포넌트에서 관리하고, 인스턴스의 문구는 “저장” 또는 “초대 보내기”로 바꿀 수 있습니다. 한 화면의 문구를 바꾸려고 모든 버튼의 원본 문구를 수정할 필요가 없는 것입니다. 반대로 브랜드 색상을 공통으로 바꾸고 싶다면 각 화면을 하나씩 수정하기 전에 원본과 연결 관계를 확인해야 합니다.

Pixso의 컴포넌트 가이드(영문)는 인스턴스에서 크기, 색상, 글꼴, 텍스트 등을 변경할 수 있고, 그렇게 변경한 스타일은 주 컴포넌트와 함께 갱신되지 않는다고 설명합니다. 따라서 “업데이트가 안 됐다”는 현상은 오류일 수도 있지만 의도한 오버라이드가 유지된 결과일 수도 있습니다.

2부. 변경이 반영되지 않을 때 확인할 관계

인스턴스 수가 많다는 사실만으로 상속 충돌이 생기는 것은 아닙니다. 문제를 찾을 때는 대상 인스턴스에서 출발해 다음 세 가지를 구분하세요.

• 연결된 주 컴포넌트: 이름이 같은 다른 카드가 아니라 실제로 연결된 원본을 열어 확인합니다. 연결을 해제한 요소는 더 이상 같은 방식으로 원본의 변경을 따르지 않습니다.
• 변경한 속성: 배경색 문제인지 텍스트 문제인지 먼저 정합니다. 라벨만 바꾼 인스턴스와 배경도 따로 지정한 인스턴스는 같은 결과를 기대할 수 없습니다.
• 같은 파일인지 다른 파일인지: 로컬 인스턴스의 반영과 팀 라이브러리의 게시·업데이트는 서로 다른 단계입니다.

명명 규칙과 계층 정리는 필요한 요소를 찾는 데 도움이 됩니다. 하지만 이름·계층·순서가 같으면 모든 인스턴스가 자동으로 연결된다는 규칙으로 이해하면 안 됩니다. 특히 라이브러리를 교체할 때 이름을 기준으로 후보를 찾는 과정과, 이미 연결된 인스턴스가 원본 변경을 받는 과정은 다릅니다.

3부. 카드 예제로 변경 범위 비교하기

“프로젝트 카드”라는 주 컴포넌트에 제목, 설명, 아이콘, 배경을 만들고 공통 여백을 정했다고 가정하겠습니다. 캔버스에 인스턴스 A와 B를 추가합니다. A에서는 제목을 “팀 일정”으로 바꾸고 아이콘을 선택합니다. B에서는 제목을 “개인 메모”로 바꾸고 배경색도 별도로 지정합니다.

이제 주 컴포넌트의 배경색과 공통 여백을 바꾸려고 합니다. 한꺼번에 결과를 판단하지 말고 변경할 속성을 나눠 비교하세요. 아래 표는 이 예제에서 의도한 결과입니다. 실제 파일에서 해당 속성에 오버라이드가 있는지 확인하며 적용합니다.

확인할 속성	인스턴스 A: 팀 일정	인스턴스 B: 개인 메모
제목	화면에 맞게 바꾼 “팀 일정”을 유지	화면에 맞게 바꾼 “개인 메모”를 유지
아이콘	의도적으로 선택한 아이콘을 유지	별도로 변경하지 않았다면 연결된 원본을 기준으로 확인
배경색	별도 지정이 없으므로 원본 변경의 반영 여부 확인	로컬에서 바꾼 배경색이 유지되는지 확인
공통 여백	해당 레이아웃 속성을 따로 바꾸지 않았는지 확인 후 비교	별도 배경색과 레이아웃 속성을 혼동하지 않고 비교

이 테스트에서 B의 배경이 그대로라는 이유만으로 전체 컴포넌트를 다시 만들 필요는 없습니다. 그것이 의도한 화면별 차이라면 유지해야 합니다. 반대로 공통 배경을 따르게 하려는 상황이라면 해당 배경의 별도 지정을 정리해야 합니다. 단순히 현재 원본과 같은 색상값을 입력했다고 해서 상속 상태까지 복원되었다고 단정하지 마세요.

기존 인스턴스의 상태가 불분명하면 주 컴포넌트에서 새 인스턴스를 하나 만들어 옆에서 비교하는 방법이 있습니다. 새 인스턴스에 필요한 제목과 아이콘만 적용하고, 공통 배경은 직접 수정하지 않습니다. 원본 배경을 한 번 더 바꿔 두 인스턴스의 차이를 살펴보면 별도 수정이 어디에 남아 있는지 좁힐 수 있습니다. 기존 인스턴스를 교체할 경우에는 연결된 프로토타입 동작과 화면 내 배치도 함께 확인하세요.

4부. Pixso에서 안전하게 변경을 확인하는 순서

1. 원본으로 이동합니다. 대상 인스턴스를 선택하고 연결된 주 컴포넌트를 확인합니다. 비슷한 이름의 다른 원본을 수정하고 있지 않은지 먼저 확인하세요.
2. 비교 대상을 남깁니다. 수정 전 화면이나 인스턴스를 복제해 문구, 배경, 간격을 비교할 기준을 만듭니다. 보존해야 할 화면별 값도 적어둡니다.
3. 원본의 한 속성만 바꿉니다. 예를 들어 배경색부터 바꿔 A와 B에서 무엇이 유지되는지 확인합니다. 텍스트와 레이아웃까지 동시에 바꾸면 원인을 구분하기 어렵습니다.
4. 필요한 차이와 불필요한 차이를 나눕니다. 화면별 라벨은 유지하고, 잘못 바뀐 배경만 정리하는 식으로 범위를 좁힙니다. 전체 초기화로 필요한 문구나 아이콘을 잃지 않도록 하세요.
5. 긴 내용과 실제 화면에서 비교합니다. 제목이 두 줄이 되거나 아이콘 크기가 다른 경우에도 카드의 간격과 정렬이 맞는지 확인합니다. 원본과 값이 같다는 것만으로 화면 구성이 적절해지는 것은 아닙니다.

컴포넌트 연결을 해제하면 당장 자유롭게 편집할 수 있지만 이후 공통 변경을 전달받는 관계도 달라집니다. 일회성 결과를 만들기 위해 연결을 해제하기 전에 화면별 차이가 텍스트 변경, 적절한 변형 또는 별도 컴포넌트 중 무엇에 해당하는지 판단하세요.

5부. 다른 파일의 라이브러리 업데이트까지 관리하기

같은 파일의 인스턴스에서 변경을 확인했다고 해서 다른 파일까지 모두 최신이라는 뜻은 아닙니다. 주 컴포넌트가 팀 라이브러리로 게시되어 있다면 변경 내용을 라이브러리에 다시 게시해야 합니다. 사용하는 파일에서는 제공된 업데이트를 확인하고 적용합니다. Pixso의 리소스 라이브러리 안내(영문)에서는 업데이트를 개별 항목 또는 전체에 적용하는 과정을 설명합니다.

공유 카드의 업데이트 설명에는 “카드 수정”보다 무엇을 바꿨는지 적으세요. 예를 들어 “공통 배경색 변경, 화면별 제목과 아이콘은 유지”라고 쓰면 사용하는 사람이 비교할 대상을 알 수 있습니다. 예외적인 배경을 허용할지, 반복되는 차이를 별도 변형으로 관리할지도 팀에서 정해두는 것이 좋습니다.

• 주 컴포넌트와 사용 위치를 찾을 수 있도록 이름을 일관되게 정합니다.
• 라벨·아이콘처럼 화면별로 바꿀 수 있는 항목과 공통으로 관리할 항목을 구분합니다.
• 변경 전후의 대표 화면을 함께 남겨 긴 텍스트와 여러 상태를 비교합니다.
• 라이브러리 게시 담당자와 사용하는 파일의 검토 담당자가 업데이트 범위를 공유합니다.

이렇게 관리하면 모든 차이를 제거하려고 하기보다 의도한 차이만 남길 수 있습니다. 주 컴포넌트를 수정한 사람과 실제 화면을 사용하는 사람이 같은 변경을 확인하는 과정도 분명해집니다.

공통 기준과 화면별 차이를 구분하세요

상속과 오버라이드는 둘 중 하나를 없애는 문제가 아닙니다. 공통으로 바꿔야 할 속성과 특정 화면에서 유지해야 할 속성을 구분하는 방법입니다. 연결된 원본, 바뀐 속성, 라이브러리 업데이트 단계를 순서대로 확인하면 같은 이름의 요소를 무작정 수정하거나 모든 인스턴스를 초기화하는 일을 줄일 수 있습니다.

Pixso에서 카드 컴포넌트의 변경 비교하기