질문이나 공유하고자 하는 아이디어가 있습니까? Adobe XD 커뮤니티에 참여하십시오. 소중한 의견과 다양한 작품 활동을 기대하겠습니다!
마지막 업데이트 날짜
2023년 6월 7일
- Adobe XD 사용 안내서
- 소개
- 디자인
- 아트보드, 안내선 및 레이어
- 모양, 오브젝트 및 패스
- 텍스트 및 글꼴
- 구성 요소 및 상태
- 마스킹 및 효과
- 레이아웃
- 비디오 및 Lottie 애니메이션
- 프로토타입
- 공유, 내보내기 및 검토
- 디자인 시스템
- 클라우드 문서
- 통합 기능 및 플러그인
- iOS 및 Android용 XD
- 문제 해결
- 알려진 문제 및 해결된 문제
- 설치 및 업데이트
- 실행 및 충돌
- 클라우드 문서 및 Creative Cloud Libraries
- 프로토타이핑, 게시 및 검토
- 다른 앱 가져오기, 내보내기 및 작업
XD에서 문서 자산을 관리하는 방법에 대해 알아보고자 하십니까? 바로 여기에서 배울 수 있습니다!
문서 자산은 디자인 프로젝트에서 사용되는 색상, 문자 스타일, 구성 요소 및 오디오 자산을 한 곳에서 만들고 관리 및 공유할 수 있습니다.
문서 자산을 사용해야 하는 이유
Richard는 클라우드 기반의 시스템에서 디자인 자산 제작 및 사용을 표준화하는 디자인 책임자입니다. 디자인 시스템 전반에서 색상, 문자 스타일, 구성 요소 또는 오디오 자산을 관리하기 위해 준비하고 있습니다.
- Richard는 XD에서 자산 및 라이브러리를 제작하고 관리하는 방법에 대해 알아보고 있습니다.
- XD에서 자산 관리 시스템을 만드는 데 도움이 필요합니다.
다음은 당사에서 Richard에게 XD의 문서 자산을 소개하는 문서입니다. Richard가 시작하는 데 도움이 되는 방법을 함께 알아보시기 바랍니다.
진행하기에 앞서
XD에서 다음 개념을 익히십시오.
디자인 스타일 및 구성 요소 선별을 시작하려면 도구 모음에서 라이브러리
를 클릭하거나 Cmd + Shift + Y(macOS) 또는 Ctrl + Shift + Y(Windows)를 눌러 문서 자산 패널
을 엽니다.
팁:
자산 패널의 모든 노드를 한 번에 펼치거나 접으려면 Cmd + 클릭(macOS) 또는 Ctrl + 클릭(Windows)을 사용하여 시간과 노력을 절약합니다.
문서 자산 패널을 연 경우 문서 전체에 걸쳐 재사용하거나 나중에 라이브러리의 일부로 게시할 색상, 문자 스타일, 구성 요소, 오디오 또는 비디오를 추가하려면 다음 단계를 따르십시오.
비디오 추가
- 캔버스에서 비디오를 선택한 다음 문서 자산 패널에서 비디오 옆에 있는 [+] 아이콘을 클릭합니다.
- 비디오를 구성 요소로 변환하면 해당 비디오는 문서 자산 패널의 구성 요소 및 비디오에 추가됩니다.
주의해야 할 사항
- 그림자의 색상을 문서 자산에 추가할 수는 없습니다.
- 공통 속성을 사용하여 문자 스타일을 그룹화할 수 없습니다.
- 오디오 파일은 문서 자산에서만 삭제할 수 있습니다.
- 속성 관리자에서 오디오 파일을 추가하려면 프로토타입 모드를 사용해야 합니다.
- 오디오 파일의 이름을 바꾸거나 순서를 변경할 수 없습니다.
- 클라우드 문서로 링크할 경우 오디오 파일은 연결되지 않습니다.
팁 및 요령
- 문서 자산의
목록 보기 기능을 사용하여 조직의 요구 사항에 부합하도록 자산의 이름을 변경하고 정렬합니다. 
격자 보기가 보다 큰 썸네일과 자산 렌디션이 제공되는 자산을 재사용할 수 있도록 최적화되었습니다.
- 프리플라이트를 위해 문서의 모든 아트보드를 선택하여 문서에 사용된 모든 색상 및 문자 스타일을 추출합니다.
문서 자산 적용 및 재사용
문서 자산에서 추가한 자산을 볼 수 있으므로 아트보드에서 오브젝트 또는 오브젝트 그룹을 선택하고 색상 또는 문자 스타일을 클릭하여 선택 영역에 적용합니다.
디자인에서 구성 요소 중 하나 또는 여러 개를 사용하려면 문서 자산 패널에서 구성 요소를 선택하고 캔버스로 드래그합니다. 이들 구성 요소의 인스턴스가 캔버스에서 생성됩니다.
색상, 문자 스타일 또는 구성 요소를 재사용하려면 다음 단계를 따르십시오.
색상 재사용
다음 중 하나를 수행합니다.
- 오브젝트 또는 텍스트 레이어를 선택하고, 색상 견본을 클릭하여 채우기 색상으로 적용합니다.
- 오브젝트를 다중 선택하고 색상 또는 그레이디언트를 선택 영역에 적용합니다.
- 문서 자산에서 색상 견본을 마우스 오른쪽 버튼으로 클릭하고, 테두리 색상 적용을 선택하여 테두리 색상으로 적용하거나 16진수 값을 복사하여 재사용할 수 있습니다.
- 오브젝트의 테두리에 동일한 색상을 적용하려면 오브젝트를 선택하고 색상을 선택한 다음 Opt(macOS) 또는 Alt(Windows)를 누릅니다.
구성 요소 재사용
다음 중 하나를 수행합니다.
- 구성 요소를 문서 자산에서 캔버스로 드래그합니다.
- 오브젝트를 다중 선택하고, 캔버스에서 여러 구성 요소를 드래그합니다.
- 구성 요소를 드래그할 때 다른 구성 요소 인스턴스 위로 마우스를 가져다 대면 교체할 수 있습니다.
팁 및 요령
- 일관성 있는 사용을 위해 색상 및 문자 스타일을 저장한 후에는 문서 자산에서 선택한 오브젝트에 색상 및 문자 스타일을 적용해야 합니다.
문서 자산 편집
자산을 추가하여 재사용하면 문서 자산에서 자산을 편집하여 문서 전체에 걸쳐 전역 변경을 적용할 수 있습니다. 이 기능은 문서 전체에 걸쳐 색상 및 문자 스타일을 수정하는 과정을 간소화할 수 있습니다.
계속하기 전에, 올바른 자산을 편집하고 있는지 확인합니다.
- 문서 자산에서 자산을 마우스 오른쪽 버튼으로 클릭하고, 캔버스에서 강조 표시를 선택하여 특정 색상 또는 문자 스타일을 사용하거나 구성 요소의 인스턴스를 발견하는 모든 오브젝트를 찾을 수 있습니다.
- 캔버스에서 오브젝트를 선택해 마우스 오른쪽 버튼을 클릭한 다음 자산의 구성 요소 공개를 선택하여 문서 자산에서 해당 색상, 문자 스타일 또는 구성 요소를 검색합니다.
문서 자산을 편집하려면 다음 절차를 따르십시오.
색상 편집
- 색상 견본을 마우스 오른쪽 버튼으로 클릭하고 편집을 선택하여 문서 전체에서 색상 값을 수정할 수 있습니다.
- 해당 색상이 사용된 캔버스의 모든 오브젝트가 실시간으로 업데이트됩니다. 이는 색상 변경을 대규모로 미리 보고 편집할 수 있는 좋은 방법입니다.
문자 스타일 편집
- 문자 스타일을 마우스 오른쪽 버튼으로 클릭하고 편집을 선택하여 문서 전체에 걸쳐 해당 스타일을 수정할 수 있습니다.
- 해당 스타일이 사용된 캔버스의 모든 텍스트 레이어는 실시간으로 업데이트됩니다.
구성 요소 편집
- 캔버스 또는 문서 자산 패널에서 구성 요소를 마우스 오른쪽 버튼으로 클릭하고 메인 구성 요소 편집을 선택하여 캔버스에서 메인 구성 요소를 강조 표시하거나 삭제된 경우 다시 만듭니다.
- 메인 구성 요소에 대한 모든 변경 내용은 다른 구성 요소 인스턴스에 전파됩니다.
주의해야 할 사항
- 여러 오브젝트(100개 이상)에 걸쳐 사용된 색상 또는 문자 스타일을 편집하는 경우에는 변경 내용이 패널에서 캔버스의 모든 오브젝트로 반영되는 데 어느 정도 시간이 소요될 수 있습니다.
팁 및 요령
- 편집 내용이 디자인에 미치는 영향을 파악하기 위해 문서 자산에서 자산을 편집하기 전에 캔버스에서 강조 표시 옵션을 선택합니다.
- 문자 스타일로 색상을 편집하려면 색상 값을 변경한 다음 전역 색상 값을 변경하여 문자 스타일을 유지하십시오.
- 연결된 색상 또는 문자 스타일을 업데이트하면 연결된 색상 또는 문자 스타일이 적용된 오브젝트만 업데이트됩니다.
자산을 추가한 후 문서 자산 패널에서 다음과 같은 방법으로 자산을 관리 및 구성할 수 있습니다.
- 자산 보기 및 정렬
- 자산 검색 및 필터링
- 자산에 마우스 가져다 대기
- 자산 순서 바꾸기, 이름 바꾸기 및 삭제
자산을 그룹화하는 방법을 알아보려면 자산을 그룹 및 하위 그룹으로 구성을 참조하십시오.
자산 보기 및 정렬
- 격자 보기: 썸네일을 표시하도록 최적화되어 있는 경우, 자산을 시각적으로 식별할 수 있습니다.
- 목록 보기: 조직에 최적화된 경우 모든 자산의 이름을 보고 순서를 변경할 수 있습니다.
- 이름순으로 정렬: 자산 범주와 그 안에 있는 모든 자산을 알파벳순으로 정렬합니다.
두 보기 모두에서 자산을 추가, 재사용 및 편집할 수 있습니다.
자산 검색 및 필터링
검색을 사용하여 자산을 검색합니다.
유형별 필터링를 사용하여 색상,문자 스타일 또는구성 요소를 기준으로 문서 자산을 필터링합니다. 자세한 내용은 자산 검색 및 필터링을 참조하십시오.
자산에 마우스 가져다 대기
자산 썸네일에 마우스를 가져다 대면 다음 정보가 표시됩니다.
- 색상: 16진수 값 또는 사용자 정의 색상 이름을 표시합니다.
- 그레이디언트: 그레이디언트 값 중단점을 표시합니다.
- 문자 스타일: 줄 간격 같은 속성을 표시합니다.
- 구성 요소: 캔버스에서 해당 구성 요소의 인스턴스 수를 표시합니다.
주의해야 할 사항
- 목록 보기를 사용하여 작업할 때, 구성 요소의 대형 미리보기가 표시되지 않습니다.
- 다양한 범주에 걸쳐 그룹화하려면 자산의 순서를 변경하십시오.
팁 및 요령
- 문서 자산의 필터를 사용하여 특정 자산 범주 또는 소스를 필터링하여 볼 수 있습니다.
- 변경 내용이 디자인에 어떤 영향을 미칠지 확실하지 않습니까? 캔버스에서 강조 표시를 사용하여 문서 전체에서 해당 자산의 인스턴스를 볼 수 있습니다.
- 사용되지 않는 구성 요소를 확인하려면 캔버스에서 모든 오브젝트를 선택해 마우스 오른쪽 버튼으로 클릭한 다음 자산에서 구성 요소 공개 구성 요소 공개를 선택하고 강조 표시되는 구성 요소를 목록의 맨 위로 드래그합니다.
- 다음 항목에 마우스를 가져다 대면
- 그레이디언트, 툴팁에 그레이디언트의 시작 및 종료 값이 표시됩니다. 값 사이의 “-”는 두 개의 변환점이 있는 그레이디언트를 나타내며 값 사이의 “...”는 여러 개의 색상 변환점이 있는 그레이디언트를 나타냅니다.
- 구성 요소, 툴팁은 캔버스에서 해당 구성 요소의 인스턴스 수를 표시합니다.
- 목록 보기 에서 자산의 이름을 변경할 때, TAB 키를 사용하여 목록 보기에서 다음 자산을 이동하고 SHIFT+TAB 키를 사용하여 역방향으로 이동합니다.
트리 보기 또는 경로 보기에서 문서 자산 패널에 원하는 수의 그룹 및 하위 그룹을 생성하여 손쉽게 문서 자산을 구성할 수 있습니다.
- 트리 보기: 계층 구조로 정렬된 그룹 및 하위 그룹이 표시됩니다. 문서 자산 패널의 오른쪽 상단에 있는 (트리/경로 전환) 아이콘을 클릭하여 트리 보기로 전환합니다.
- 경로 보기: 그룹 경로 목록이 표시되고 각 경로에 슬래시(/)로 구분된 그룹 및 중첩된 하위 그룹이 표시됩니다. 경로 보기는 중첩 그룹 구조를 병합하여 하위 그룹 내의 모든 자산을 쉽게 스캔할 수 있도록 합니다. 문서 자산 패널의 오른쪽 상단에 있는 (트리/경로 전환) 아이콘을 클릭하여 경로 보기로 전환합니다.
트리 보기와 경로 보기 모두에서 다음과 같은 방법으로 자산을 구성할 수 있습니다.
다음 방법 중 하나를 사용하여 각 자산 범주(색상, 문자 스타일 등) 내에 그룹을 만듭니다.
- 자산을 다중 선택하고 마우스 오른쪽 버튼으로 클릭한 다음, 선택 항목의 새 그룹을 선택합니다.
- 자산 범주(색상, 문자 스타일, 구성 요소 등)를 마우스 오른쪽 버튼으로 클릭하고, 하위 그룹 만들기를 선택합니다.
- 자산을 마우스 오른쪽 버튼으로 클릭하고, 요소의 새 그룹을 선택합니다.
- 자산을 마우스 오른쪽 버튼으로 클릭하고, 이동을 선택하여 폴더 아이콘, 만들기 및 이동을 차례로 클릭합니다.
- 자산을 다중 선택하고 마우스 오른쪽 버튼으로 클릭한 다음, 선택한 항목 이동을 선택하고 폴더 아이콘, 만들기 및 이동을 차례로 클릭합니다.
그룹을 만든 후 마우스 오른쪽 버튼을 클릭하여 다음 중 하나를 수행합니다.
- 하위 그룹 만들기: 여러 개의 하위 그룹을 만듭니다.
- 이동: 자산 범주가 내에 있는 다른 그룹으로 자산을 이동합니다.
- 그룹 이름 바꾸기: 사용자 정의 이름을 입력합니다.
- 그룹 해제: 그룹을 제거하고, 그룹 내의 자산을 한 수준 위로 이동합니다.
- 삭제: 그룹과 그룹 내의 자산을 삭제합니다.
그룹 및 하위 그룹을 만든 후에는 자산을 드래그하여 해당 그룹으로 이동할 수 있습니다. 또는 자산을 마우스 오른쪽 버튼으로 클릭하고 다음으로 이동을 선택한 다음 자산을 이동할 그룹을 선택할 수도 있습니다.
그룹 경로에 슬래시(/)를 사용하여 한 번에 여러 개의 중첩된 하위 그룹을 만들고 경로를 편집하여 자산을 손쉽게 구성할 수 있습니다. 자세한 내용은 슬래시를 사용하여 자산 구성을 참조하십시오.
슬래시(/)를 사용하여 자산 범주 내에서 그룹 및 하위 그룹을 손쉽게 구성할 수 있습니다. 슬래시를 사용하여 다음 작업을 수행할 수 있습니다.
- 중첩된 하위 그룹이 있는 그룹 만들기
- 경로를 편집하여 자산 그룹 해제 및 이동
경로를 편집하여 자산 그룹 해제 및 이동
강력한 경로 편집 기능을 사용하여 여러 그룹 해제 기능을 한 번에 수행하거나 다음으로 이동 및 그룹 해제 기능을 결합할 수 있습니다.
다음에서 경로를 편집할 수 있습니다.
- 문서 자산 패널의 경로 보기
- 레이어 패널 (메인 구성 요소만 해당)
경로를 더블 클릭하여 편집합니다. 경로에서 그룹 또는 하위 그룹을 제거하면 그 안에 있는 모든 자산이 한 수준 위로 이동합니다. 경로에서 원하는 수의 중첩 수준을 한 번에 제거하고 자산을 여러 수준 위로 이동할 수 있습니다. 이미 존재하는 경로를 입력하면 모든 자산이 해당 경로로 이동합니다.
주의해야 할 사항
- 자산 이름에 슬래시가 포함된 이전 XD 문서가 있습니까? XD 50 이상 버전에서 이러한 문서를 열면 다음 중 하나를 수행하라는 메시지가 표시됩니다.
a. 슬래시를 대시(—)로 바꾸고 그룹 계층 구조를 유지합니다.
b. 슬래시를 새 중첩 수준으로 변환하고 그룹 계층 구조에 깊이를 추가합니다.
- XD에서 Sketch 문서를 열면 해당 자산 그룹 및 구조가 유지됩니다.
- 경로를 편집해도 자산은 삭제되지 않습니다. 그룹 및 모든 자산을 함께 삭제하려면 해당 그룹을 마우스 오른쪽 버튼으로 클릭하고 [삭제]를 선택하십시오.
- 레이어 패널에서 메인 구성 요소 이름에 대한 그룹을 구성하면 문서 자산 패널에도 반영됩니다.
- XD 클라우드 문서에서 연결된 라이브러리를 게시하면 모든 그룹과 하위 그룹이 라이브러리에 유지됩니다.
- 디자인 사양을 게시할 때, 자산의 그룹 경로는 표시되지 않습니다.
팁 및 요령
- 이미 아트보드에서 문서 자산을 구성한 경우, 아트보드 이름을 마우스 오른쪽 버튼으로 클릭하고 자산의 구성 요소 공개, 자산의 색상 공개 또는 자산의 문자 스타일 공개를 선택합니다. 선택한 자산 범주의 모든 자산이 문서 자산에서 강조 표시되고 선택됩니다. 해당 자산 중 하나를 마우스 오른쪽 버튼으로 클릭하고, 선택 항목의 새 그룹을 모든 자산으로 그룹을 쉽게 만들 수 있습니다.
- 문서 자산에 이름이 지정되어 있고 빠르게 그룹화하려면 검색을 사용하여 검색 기준과 일치하도록 자산 범위를 좁힙니다. 여기에서 필터링된 자산만으로 그룹을 빠르게 만들 수 있습니다.
문서 자산 구성에 대한 전문적인 팁을 얻으려면 다음 비디오를 시청하십시오.
자산 공유 및 게시
이제 문서 자산에서 재사용 가능한 모든 색상, 문자 스타일 및 구성 요소를 만들었으므로 Creative Cloud Libraries를 사용하여 디자인 시스템 자산을 게시하고 팀의 다른 사람들과 공유하는 방법에 대해 알아보십시오.
자세히 알아보기
이 비디오를 통해 자산으로 작업하는 방법에 대해 자세히 알아보십시오.
다음 단계
지금까지 XD의 자산 및 라이브러리를 사용하여 작업하는 방법에 대해 살펴보았습니다. 한발 더 나아가 라이브러리를 사용하여 자산, 구성 요소 및 디자인 시스템을 공유하거나 기존 XD 클라우드 문서를 라이브러리로 마이그레이션하는 방법을 살펴보십시오.
질문이나 아이디어가 있습니까?
