사용 가이드

컴포넌트

구성요소는 디자인에 재사용할 수 있는 UI 요소입니다. 구성요소를 사용하면 디자인 시간을 크게 절감하고 작업 효율성을 향상시킬 수 있습니다.

재사용 구성요소 만들기

모든 오브젝트 또는 레이어에서 구성요소를 작성할 수 있습니다. 구성요소는 모양, 단추 또는 텍스트처럼 간단하게 만들거나 카드 및 메뉴와 같은 더 복잡한 디자인을 할 수 있습니다.

1. 단일 구성 요소 만들기

구성요소를 작성하는 방법에는 몇 가지가 있습니다.

구성요소로 만들 레이어를 선택합니다.

구성요소를 만들기 위해 몇 가지 다른 방법을 사용할 수 있습니다.

Pixso의 재사용 구성요소 만들기 화면

도구바에 구성요소를 만듭니다.

Pixso의 재사용 구성요소 만들기 화면

선택 영역을 마우스 오른쪽 버튼으로 클릭하고 [구성요소 만들기]을 선택합니다.

단축키:

  • Mac：⌥ Option+⌘ Command+K
  • Windows：Ctrl+ Alt+K

Pixso는 특수 구성 요소 프레임에 레이어를 중첩하고 보라색 아이콘으로 레이어 패널의 구성 요소를 찾을 수 있습니다.

오른쪽 패널에서 협업자에 대한 설명을 추가합니다. 협업자와 개발자는 검사 패널에서 이 정보를 볼 수 있습니다.

대량 구성 요소 일괄 만들기

기본적으로 구성요소 만들기 기능은 단일 구성요소를 작성하는 것이지만 Pixso 지원을 통해 구성요소를 대량으로 작성할 수 있습니다

  • 프레임의 오브젝트 및 레이어
  • 그룹의 오브젝트 및 레이어
  • 경로 또는 벡터와 같은 단일 레이어
  • 부울 연산 중의 레이어
  1. 구성요소 만들기 위한 레이어를 선택합니다.
  2. 구성요소 단추 옆에 있는 드롭다운 단추를 클릭합니다.
  3. 옵션에서 대량 구성 요소 일괄 만들기를 클릭합니다.
  4. Pixso는 각 프레임, 구성 요소, 부울연산 또는 경로에 대한 구성요소를 작성합니다.

구성 요소의 이름 지정 및 관리

구성요소 패널

파일의 구성요소에 접근하는  방법은 구성요소 패널을 통해 열립니다.

왼쪽 사이드바에서 구성요소를 클릭합니다.

또는 단축키를 사용해도 됩니다.

Mac：⌥ Option-2

Windows: Alt+2

구성요소 패널의 구조

구성요소 패널에서 다음 구성요소에 액세스할 수 있습니다.

로컬 구성 요소 : 이 파일에서 만든 구성 요소.

사용된 구성 요소: 이 파일에서 사용한 다른 라이브러리의 구성 요소.

사용 가능한 라이브러리: 팀 또는 그룹에서 사용 가능한 리소스

구성요소 패널의 각 섹션에는 제목이 있습니다. 파일 이름을 제목으로 사용하여 활성화된 모든 라이브러리를 표시합니다. 제목을 축소하여 차지하는 공간을 줄이거나 확장하여 해당 파일의 구성 요소를 볼 수 있습니다.

리소스 라이브러리에서 구성 요소 보기

구성 요소는 파일 > 페이지 > 프레임에 따라 배열됩니다. 왼쪽의 화살표를 사용하여 파일 경로를 확장하고 각 프레임의 구성 요소를 볼 수 있습니다. 원본 파일의 순서가 아닌 이니셜로 정렬합니다.

연관된 구성요소

다음을 통해 구성 요소 간의 관계를 결정합니다.

명명 규칙을 통해 분류합니다. 예를 들어, ‘디자인/컴포넌트/활성’, ‘디자인/컴포넌트/호버(Hover)’, ‘디자인/컴포넌트/비활성(Disabled)’과 같이 이름을 지정하여 관련 요소들을 한데 모아 관리할 수 있습니다.

원본 파일대로 설정됩니다. 예를 들어, 동일한 프레임 내의 모든 구성 요소를 관련 구성 요소로 정합니다.

구성요소의 인스턴스 만들기

구성 요소는 디자인 과정에 재사용할 수 있는 UI 요소이고, 주 구성 요소는 요소의 속성을 정의하며, 인스턴스는 디자인에 재사용할 수 있는 구성 요소의 사본입니다.다음 몇 가지 방법으로 인스턴스를 만들 수 있습니다. 어떤 방법을 사용하여 구성 요소를 생성하는지는 구성 요소가 게시된 클라우드 구성 요소인지 로컬 구성 요소인지에 따라 다릅니다.

구성요소 패널에서 인스턴스 만들기

왼쪽 패널의 "구성요소" 열에서 구성요소를 검색하고 "구성요소" 패널에서 다른 라이브러리를 열도록 선택할 수도 있습니다.

왼쪽 사이드바> 구성요소를 클릭합니다.

사용하려는 구성 요소 찾으세요.

현재 파일에 작성된 로컬 구성 요소를 찾아봅니다.

(팀 라이브러리를 열어야 하는 경우) 활성화된 라이브러리에서 구성 요소를 선택합니다.

개인 로컬 구성 요소 및 파일에 사용된 구성 요소를 찾아봅니다.

검색기능을 사용하여 팀,기업 라이브러리 및 보기 관한만 있는 파일을 포함하여 액세스할 수 있는 모든 라이브러리에서 구성 요소를 찾습니다.

구성요소를 선택하고 프레임으로 끌어 구성요소의 인스턴스를 작성합니다.

인스턴스 복제

동일한 파일에서 디자인하는 경우 구성 요소를 복사하여 인스턴스를 만들 수 있습니다. Pixso에는 구성요소를 복사할 수 있는 몇 가지 방법이 있습니다.

단축키를 사용하여

Mac：⌘ Command+D

Windows：Ctrl+D

드래그하고 복사

옵션(Mac) 또는 Alt(Windows)를  누르고 구성 요소를 드래그하여 인스턴스를 만듭니다.

키보드 키를 놓기 전에 마우스를 놓으십시오. 그렇지 않으면 Pixso가 복사하는 대신 원래 구성 요소를 이동합니다.

복사 및 붙여넣기

단축키를 사용하여 구성 요소를 복사하고 인스턴스로 붙여넣습니다.

Mac： ⌘ Command -C 및 ⌘ Command-V

Windows：Ctrl+C 및 Ctrl+V

인스턴스 대체

구성요소를 사용하면 디자인 요소를 작성 및 재사용하여 프로세스 속도를 높이고 일관성을 유지할 수 있습니다. 인터페이스를 구축할 때 아이콘, 단추 및 카드와 같은 오브젝트에 대해 이러한 구성 요소의 인스턴스 간에 전환하는 경우가 많습니다.

인스턴스 패널

인스턴스 패널을 통해 현재 파일 및 활성화된 팀 리이브러리에서 구성 요소를 찾고 바꿀 수 있습니다.

인스턴스를 선택한 후 오른쪽 사이드바의 속성 패널에서 인스턴스 메뉴에 액세스하고 현재 선택 영역을 바꿀 관련 구성 요소를 선택합니다.

변체 만들기 및 사용

구성요소를 작성하고 디자인 시스템을 구축하면 서로 비슷하지만 약간만 다른 구성요소가 필요합니다. 예를 들어, 상태와 크기가 다르고 밝은 모드와 어두운 모드를 가진 여러 버튼 구성 요소가 있을 수 있습니다. 구성요소 변체기능은 유사한  구성요소를 동일한 용기에 넣어 쉽게 찾을 수 있도록 하는 것입니다.

  • 속성:：변체의 특성으로 이해할 수 있습니다. 예를 들어 버튼 구성 요소의 속성은 유형, 크기, 상태 또는 아이콘이 있는지를 포함합니다.

    값: 즉, 속성 값입니다. 예를 들어 상태 속성에는 기본값, 호버, 누름 및 비활성화 값이 있을 수 있습니다.

    구성요소 집합의 모든 변체는 특성 및 값이 동일하지만 각 변형은 특성 및 값의 조합에 대해 고유한 값이어야 합니다.

    예를 봅시다! 8가지 독특한 변체가 있는 버튼 구성 요소가 있습니다. 아래 이미지는 구성 요소 세트에 있는 이 구성 요소의 모든 변체를 보여줍니다.

    버튼 구성 요소 그룹에는 각각 고유한 값 세트가 있는 두 가지 속성이 있습니다.

    단추 유형에는 두 개의 기본 및 보조 속성 값이 있습니다.

    상태에는 호버, 초점, 기본값 및 비활성화의 4가지 속성 값이 있습니다.

    레이어 이름 및 할당 구문

    네이밍은 베리언트(Variant)를 생성하고 관리하는 데 있어 매우 중요한 요소입니다.

    Pixso 내의 일반적인 레이어 이름과 달리, 컴포넌트 세트(Component Set) 내의 베리언트 이름에는 고유한 명명 규칙이 적용됩니다. 베리언트 이름에는 해당 요소의 속성(Property)과 값(Value)에 대한 정보가 포함되어야 하며, 레이어 패널에서 베리언트를 더블 클릭하여 이름을 수정할 때 이 정보를 확인할 수 있습니다.

    구성 요소를 변체로 결합

    구성 요소의 이름을 변경하고 슬래시(/)로 분할합니다.

    프레임에 구성요소를 조정하고 배치합니다.

    구성 요소를 변체로 만듭니다.

    구성 요소의 속성 이름 지정합니다.

    프레임의 구성요소 관리

    참고: 구성요소 그룹은 구성요소만 포함할 수 있으므로   텍스트, 설명, 프레임 또는 그룹에게 변체를 추가할 수 없습니다.

    구성 요소를 변체로 결합할 때 Pixso 는 현재 캔버스의 레이아웃과 간격을 구성 요소 세트의 변체에 적용하므로 구성 요소를 구성하는 것이 좋습니다. 변형을 만들기 전에 배치 및 간격을 지정하여 다시 정렬하지 않도록 합니다.

    변체로 결합할 구성요소를 선택합니다.

    오른쪽 사이드바에서 구성요소 변체 만들기 버튼을 클릭합니다.

    Pixso는 모든 구성요소를 단일 구성요소 그룹에 추가합니다.

    속성 이름 지정

    구성요소 그룹을 선택합니다.

    오른쪽 사이드바의 변체 섹션에서 현재 속성 이름을 봅니다.

    클릭하고 속성 이름을 편집할 수 있습니다.

    빈 공간을 클릭하여 이름 변경을 완료합니다.

    나머지 속성에 대해 이 과정을 반복합니다.

    새 변체 만들기

    참고: Pixso 는 구성 요소 변체라고 하는 단일 프레임에 변체를 배치합니다. 구성 요소 그룹은 구성 요소만 포함할 수 있습니다. 도구바에서 구성요소 만들기를 클릭하거나 단축키를 사용하여 구성요소를 빠르게 작성할 수 있습니다.

    Mac：⌥ Option ⌘ Command+K

    Windows：Ctrl+ Alt+K

    구성요소 선택합니다.

    오른쪽 사이드바에서 변체 섹션 아래의 더하기 기호[+]를 클릭하여 첫 번째 변체를 추가합니다.

    Pixso는 다음 단계를 수행합니다.

    동일한 속성을 가진 동일한 구성 요소 추가합니다.

    구성요소 그룹에 두 개의 구성요소를 변체로 추가합니다.

    디자인에 따라 변체를 시각적으로 변경할 수 있습니다.

  • 구성요소 변체를 선택합니다.

    오른쪽 사이드바의 변체 섹션을 클릭합니다.

    속성 추가를 선택합니다.

    변체를 선택한 경우에만 값을 추가할 수 있습니다.

    속성의 드롭다운 메뉴를 클릭하여 값을 추가합니다.

    구성 요소 그룹에 변체 추가

    다음 방법으로 구성 요소 그룹에 변체를 계속 추가합니다.

    구성요소 그룹을 선택하면 오른쪽 아래에 더하기 기호(+)가 나타나고 두 개 이상의 변체가 있는 경우에만 더하기 기호(+)가 표시됩니다.

    오른쪽 사이드바의 변체 섹션을 클릭하고 변체 추가를 선택합니다.

    단축키를 사용하여 기존 변체를 복사합니다.

    Mac：⌘ Command+D

    Windows：Ctrl+D

    다른 구성 요소를 구성 요소 그룹으로 끌어 변체로 추가합니다.

    팁: 다른 구성 요소를 드래그해도 기존 변체가 재배열되지 않습니다.

    참고:

  • 주의:
    베리언트(Variant)가 포함된 인스턴스를 파일에 추가하면, Pixso는 해당 컴포넌트 세트 내의 모든 베리언트를 함께 불러옵니다. 대규모 컴포넌트 세트를 불러올 경우 Pixso의 구동 속도와 성능에 영향을 미칠 수 있습니다.
    변체 관리
    구성 요소에 새 변체를 추가하면 Pixso는 기본적으로 구성 요소 사이에 동일한 간격으로 변체를 추가합니다. 구성 요소를 구성 요소 그룹에 배치하기 전에 다른 레이아웃에 있는 경우 Pixso는 배치 후 구성 요소 그룹의 원래 속성을 유지합니다.

    변체를 선택하고 구성 요소 그룹의 새 좌표로 이동합니다. Pixso는 다른 변체의 상단을 포함하여 구성 요소 그룹의 모든 위치에 변체를 배치할 수 있습니다.

    오른쪽 사이드바의 구성요소 그룹의 크기를 조정하거나 일반 프레임과 마찬가지로 캔버스에서 크기를 조정합니다.

    오른쪽 패널의 필드를 통해 변체 간의 수평 간격을 조정할 수도 있습니다.

    속성 이름 및 값 변경

    속성 이름 변경:

    속성을 클릭하고 이름을 변경합니다.

    Enter 키를 눌러 적용하거나 빈 공간을 클릭하여 수정을 완료합니다.

    나머지 속성에 대해 이 과정을 반복합니다.

    값 변경：

    속성 값을 두 번 클릭하여 텍스트를 활성화합니다.

    Enter 키를 눌러 적용하거나 빈 공간을 클릭하여 수정을 완료합니다.

    속성 제거

    구성요소 그룹을 선택합니다.

    사이드바의 변체 속성 섹션에서 호버합니다.

    아이콘을 클릭하고 삭제합니다.

    변체 사용

    변체 구성

    오른쪽 패널의 속성 및 값을 구성하여 구성요소 그룹에서 추가 변체를 선택합니다.

    인스턴스를 선택합니다.

    오른쪽 사이드바에서 구성 요소 그룹 이름을 확인하십시오. 아래는 구성할 수 있는 속성 및 값에 대한 필드입니다.

    변경할 속성 및 속성 값을 선택합니다.

    예를 들어, 아래 이미지에서 녹색 구성 요소의 색상 속성을 흰색으로 변경하거나 섀도우 속성을 "없음"으로 변경할 수 있습니다.

    인스턴스 간 바꾸기

    변체를 사용할 때도 일반 구성 요소와 마찬가지로 인스턴스 대체를 가능할 수 있습니다.

    가장 효율적인 방법은 인스턴스 대체 메뉴를 사용하는 것입니다. 인스턴스 메뉴를 사용하면 현재 파일 또는 활성화된 라이브러리에서 대체 구성 요소를 찾을 수 있습니다.

    구성 요소를 선택한 후 오른쪽 사이드바의 속성 패널에서 인스턴스 메뉴에 액세스합니다.

    변경할 인스턴스를 선택합니다.

    오른쪽 사이드바에서 구성요소 이름을 클릭합니다.

    인스턴스 메뉴에서 대체 구성 요소를 선택합니다.

    주 구성 요소 편집

    모든 인스턴스는 주 구성 요소에 대한 링크를 만듭니다. 주 구성 요소를 조정하면 Pixso가 변경된 내용을 연결된 모든 인스턴스에 적용합니다.

    주 구성 요소와 인스턴스가 동일한 파일에 있으면 Pixso 가 즉시 변경 사항을 적용합니다. 구성 요소가 이미 리소스 라이브러리에 게시된 경우 구독 파일에서 업데이트를 확인하려면 구성 요소 패널을 통해 구성 요소를 게시해야 합니다.

    구성요소 업데이트

    디자인을 수정하려면 원본 파일의 주 구성 요소만 편집해야 합니다.

    게시되지 않은 구성 요소:  Pixso는 주 구성 요소에서 변경한 내용을 파일의 로컬 인스턴스에 자동으로 적용합니다.

    게시된 구성 요소: 주 구성 요소와 인스턴스가 동일한 파일에 있으면 변경 내용이 즉시 적용됩니다. 이러한 변경 사항을 다른 파일의 인스턴스에 적용하려면 이러한 변경 사항을 리소스 라이브러리에 게시해야 합니다.

    주 구성 요소 검색

    현재 파일에서 인스턴스를 선택합니다.

    오른쪽 패널에서 디자인 옵션을 클릭합니다.

    인스턴스 섹션에서 [주 구성 요소로]를 클릭합니다.

    주 구성요소를 선택하고 원하는 대로 수행하십시오.

    참고: Pixso는 인스턴스로 돌아갈 수 있는 옵션을 제공합니다.

    팀 라이브러리에 업데이트

    게시된 스타일 또는 구성 요소를 변경하는 경우 이러한 변경 내용은 현재 파일 의 현재 파일의 인스턴스에만 적용할 수 있습니다.

    Pixso는 구성 요소 패널에 파란색 점을 표시하여 게시해야 하는 변경 사항이 있는지 여부를 알려줍니다.

    왼쪽의 구성요소 패널을 클릭하여 팀 리소스 라이브러리를 엽니다.

    추가, 수정 또는 삭제된 스타일 및 구성요소가 표시되는 목록을 확인합니다.

    관련 설명을 추가합니다.

    게시 버튼을 클릭하면 픽소 가 변경 내용을 게시했는지 여부를 알려줍니다.

    구성요소에서 인스턴스 분리

    주 구성 요소에서 인스턴스를 분리할 수 있습니다.

    인스턴스 메뉴에서

    분리할 인스턴스를 선택하십시오.

    오른쪽 패널에서 인스턴스 메뉴를 클릭합니다.

    주 구성 요소에서 분리를 클릭합니다.

    마우스 오른쪽 버튼 메뉴에서

    캔버스 또는 레이어 패널에서 인스턴스를 마우스 오른쪽 버튼으로 클릭합니다.

    모든 옵션 중에서 [구성요소 분리]를 선택합니다.

    단축키 사용

    단축키로 인스턴스를 빠르게 분리할 수도 있습니다.

    Mac：⌥ Option +⌘ Command +B

    Windows：Ctrl+B

    참고: 실수로 구성 요소를 생성한 경우 인스턴스로 돌아가거나 아래 단축키로 취소할 수 있습니다.

    Mac: Command + Z

    Windows : Ctrl + Z

    구성 요소였던 인스턴스를 복원하려면 다음을 수행할 수 있습니다.

    새 구성 요소에 대한 인스턴스를 만듭니다.

    구성 요소에서 인스턴스를 분리합니다.

    원래 구성 요소를 삭제합니다.

    컴포넌트 속성 설정하기

    컴포넌트 속성을 설정하면 협업자가 변경해야 할 부분을 인스턴스의 컨트롤로 제공할 수 있습니다. 메인 컴포넌트나 컴포넌트 세트에서 속성을 설정한 뒤 인스턴스의 오른쪽 패널에서 값을 변경합니다.

    속성제어하는 내용생성 위치
    베리언트크기, 유형이나 상태 등의 선택 항목상위 컴포넌트 또는 컴포넌트 세트
    레이어내부 레이어의 표시 여부해당 하위 레이어
    인스턴스중첩 인스턴스에서 사용할 컴포넌트중첩된 컴포넌트 인스턴스
    텍스트텍스트 레이어의 내용해당 텍스트 레이어

    속성이 필요한 하위 요소에서 직접 생성하거나, 속성을 먼저 정의한 뒤 해당 하위 레이어에 연결할 수 있습니다. 편집 권한이 있는 협업자는 속성을 설정하고 값을 변경할 수 있습니다.

    베리언트 속성

    컴포넌트나 컴포넌트 세트를 선택하고 컴포넌트 속성 영역에서 베리언트 속성을 만듭니다. size나 state처럼 선택 항목을 나타내는 이름과 값을 설정합니다. 각 베리언트는 서로 다른 속성 값의 조합을 가져야 합니다. 예를 들면 size=small, state=hover입니다.

    레이어 표시 속성

    1. 메인 컴포넌트 안에서 버튼의 아이콘과 같은 하위 레이어를 선택합니다.
    2. 오른쪽의 레이어 영역에서 속성 컨트롤을 선택합니다.
    3. 속성 이름을 지정하고 기본 표시 여부를 설정합니다.
    4. 인스턴스를 만든 뒤 해당 속성으로 레이어를 표시하거나 숨깁니다.

    간단한 선택적 콘텐츠는 표시 속성으로 처리하여 필요한 베리언트 수를 줄일 수 있습니다. 표시 속성을 사용해도 컴포넌트는 하나의 개체입니다. 프로토타입 상태로 연결할 별도의 두 개체가 생성되는 것은 아닙니다. 상호작용에 서로 다른 대상이 필요하면 별도 개체나 베리언트를 사용합니다.

    인스턴스 속성과 빠른 교체

    1. 메인 컴포넌트 안의 중첩 인스턴스를 선택합니다.
    2. 오른쪽 인스턴스 영역의 속성 컨트롤에서 인스턴스 속성을 만듭니다.
    3. 로컬 컴포넌트나 활성화한 라이브러리에서 기본 인스턴스를 선택합니다.
    4. 속성을 만들 때 빠르게 교체할 후보 컴포넌트를 지정합니다.

    상위 인스턴스에 중첩 컴포넌트를 교체하는 컨트롤이 표시됩니다. 인스턴스 속성을 설정할 레이어는 먼저 컴포넌트 인스턴스여야 합니다.

    텍스트 속성

    1. 메인 컴포넌트 안의 텍스트 레이어를 선택합니다.
    2. 오른쪽 내용 영역에서 속성 만들기를 선택합니다.
    3. 속성 이름과 기본 텍스트를 설정합니다.
    4. 인스턴스를 선택하고 속성에 표시된 텍스트 값을 수정합니다.

    여러 텍스트 레이어를 같은 속성에 연결할 수 있습니다. 해당 속성 값을 바꾸면 연결된 레이어의 텍스트가 함께 변경됩니다.

    텍스트 속성은 번호 목록, 글머리 기호 목록이나 위 첨자 같은 고급 서식을 제공하지 않습니다. 이러한 서식이 있는 텍스트를 컴포넌트의 텍스트 속성으로 수정하면 서식이 제거될 수 있습니다. 서식을 유지해야 할 때는 텍스트 레이어를 직접 편집합니다.