사용 안내서 취소

Adobe XD에서 문서 에셋을 사용하여 작업

  1. Adobe XD 사용 안내서
  2. 소개
    1. Adobe XD의 새로운 기능
    2. 일반 질문
    3. Adobe XD를 사용하여 디자인, 프로토타이핑 및 공유
    4. 시스템 요구 사항
      1. 하드웨어 및 소프트웨어 요구 사항
      2. Adobe XD, Big Sur 및 Apple silicon | macOS 11
    5. 작업 영역 기본 사항
    6. Adobe XD에서 앱 언어 변경
    7. Access UI 디자인 키트
    8. Adobe XD의 접근성
    9. 키보드 단축키
    10. 팁 및 요령
    11. Adobe XD 구독 옵션
    12. XD 스타터 플랜 변경 사항
  3. 디자인
    1. 아트보드, 안내선 및 레이어
      1. 아트보드 시작하기
      2. 안내선 및 그리드 사용
      3. 스크롤 가능 아트보드 제작
      4. 레이어를 사용하여 작업
      5. 스크롤 그룹 만들기
    2. 모양, 오브젝트 및 패스
      1. 오브젝트 선택, 크기 조정 및 회전
      2. 오브젝트 이동, 정렬, 배치 및 배열
      3. 오브젝트 그룹화, 잠금, 복제, 복사 및 뒤집기
      4. 오브젝트에 대한 선, 채우기 및 그림자 설정
      5. 반복 요소 만들기
      6. 3D 변형으로 원근감 있는 디자인 만들기
      7. 부울 작업을 통해 오브젝트 편집
    3. 텍스트 및 글꼴
      1. 드로잉 및 텍스트 툴을 사용하여 작업
      2. Adobe XD의 글꼴
    4. 구성 요소 및 상태
      1. 구성 요소를 사용하여 작업
      2. 중첩된 구성 요소를 사용하여 작업
      3. 구성 요소에 여러 상태 추가
    5. 마스킹 및 효과
      1. 모양이 적용된 마스크 만들기
      2. 흐림 효과를 사용하여 작업
      3. 그레이디언트 만들기 및 수정
      4. 혼합 효과 적용
    6. 레이아웃
      1. 반응형 크기 조정 및 제한
      2. 구성 요소 및 그룹에 대해 고정된 패딩 설정
      3. 스택을 사용하여 다이내믹한 디자인 제작
    7. 비디오 및 Lottie 애니메이션
      1. 비디오를 사용하여 작업
      2. 비디오를 사용하여 프로토타입 제작
      3. Lottie 애니메이션을 사용하여 작업
  4. 프로토타입
    1. 인터랙티브 프로토타입 제작
    2. 프로토타입 애니메이트
    3. 자동 애니메이트에 대해 지원되는 오브젝트 속성
    4. 키보드 및 게임패드가 포함된 프로토타입 만들기
    5. 음성 명령 및 음성 재생을 사용하여 프로토타입 제작
    6. 시간 경과 전환 만들기
    7. 오버레이 추가
    8. 음성 프로토타입 디자인
    9. 앵커 링크 만들기
    10. 하이퍼링크 만들기
    11. 디자인 및 프로토타입 미리보기
  5. 공유, 내보내기 및 검토
    1. 선택한 아트보드 공유
    2. 디자인 및 프로토타입 공유
    3. 링크 액세스 권한 설정
    4. 프로토타입을 사용하여 작업
    5. 프로토타입 검토
    6. 디자인 사양 작업
    7. 디자인 사양 공유
    8. 디자인 사양 검사
    9. 디자인 사양 탐색
    10. 디자인 사양 검토 및 댓글 달기
    11. 디자인 에셋 내보내기
    12. 디자인 사양에서 에셋 내보내기 및 다운로드
    13. 기업을 위한 그룹 공유
  6. 디자인 시스템
    1. Creative Cloud Library 포함 디자인 시스템
    2. Adobe XD에서 문서 에셋을 사용하여 작업
    3. Adobe XD에서 Creative Cloud Libraries를 사용하여 작업
    4. 연결된 에셋에서 Creative Cloud Libraries로 마이그레이션
    5. 디자인 토큰을 사용하여 작업 
    6. Creative Cloud Libraries의 에셋 사용
  7. 클라우드 문서
    1. Adobe XD의 클라우드 문서
    2. 디자인 공동 작업 및 편집
    3. 나와 공유된 문서 공동 편집
  8. 통합 기능 및 플러그인
    1. 외부 에셋을 사용하여 작업
    2. Photoshop의 디자인 에셋을 사용한 작업
    3. Photoshop에서 에셋 복사 및 붙여넣기
    4. Photoshop 디자인 가져오기 또는 열기
    5. Adobe XD에서 Illustrator 에셋을 사용하여 작업
    6. Illustrator 디자인 열기 또는 가져오기
    7. Illustrator에서 XD로 벡터 복사
    8. Adobe XD용 플러그인
    9. 플러그인 생성 및 관리
    10. XD에 대한 Jira 통합
    11. XD용 Slack 플러그인
    12. XD용 Zoom 플러그인
    13. XD에서 Behance로 디자인 게시
  9. iOS 및 Android용 XD
    1. 모바일 디바이스에서 미리보기
    2. Adobe XD 모바일 FAQ
  10. 문제 해결
    1. 알려진 문제 및 해결된 문제
      1. 알려진 문제
      2. 해결된 문제
    2. 설치 및 업데이트
      1. Windows에서 XD가 호환되지 않음
      2. 오류 코드 191
      3. 오류 코드 183
      4. XD 플러그인 설치 문제
      5.  Windows 10에서 XD를 제거했다가 다시 설치하라는 메시지가 표시됨
      6. 환경 설정 마이그레이션 문제
    3. 실행 및 충돌
      1.  Windows 10에서 실행 시 XD 충돌 문제
      2.  Creative Cloud에서 로그아웃하면 XD가 종료됨
      3. Windows에서의 구독 상태 관련 문제
      4. Windows에서 XD 실행 시 차단된 앱 경고 표시
      5. Windows에서 크래시 덤프 생성
      6. 충돌 로그 수집 및 공유
    4. 클라우드 문서 및 Creative Cloud Libraries
      1. XD 클라우드 문서 관련 문제
      2. 연결된 구성 요소 관련 문제
      3. 라이브러리 및 링크 관련 문제
    5. 프로토타이핑, 게시 및 검토
      1. macOS Catalina에서 프로토타입 인터랙션을 기록할 수 없음
      2. 게시 작업 과정 관련 문제
      3. 게시된 링크가 브라우저에 표시되지 않음
      4. 프로토타입이 브라우저에서 올바르게 렌더링되지 않음
      5. 공유 링크에 댓글 패널이 갑자기 표시됨
      6. 라이브러리를 게시할 수 없음
    6. 다른 앱 가져오기, 내보내기 및 작업
      1. XD에서 가져오기 및 내보내기
      2. XD의 Photoshop 파일
      3. XD의 Illustrator 파일
      4. XD에서 After Effects로 내보내기
      5. XD의 Sketch 파일
      6. 내보내기에 서드파티 앱이 표시되지 않음

XD에서 문서 에셋을 관리하는 방법에 대해 알아보고자 하십니까? 바로 여기에서 배울 수 있습니다!

문서 에셋은 디자인 프로젝트에서 사용되는 색상, 문자 스타일, 구성 요소 및 오디오 에셋을 한 곳에서 만들고 관리 및 공유할 수 있습니다.

문서 에셋

문서 에셋을 사용해야 하는 이유

Richard는 클라우드 기반의 시스템에서 디자인 에셋 제작 및 사용을 표준화하는 디자인 책임자입니다. 디자인 시스템 전반에서 색상, 문자 스타일, 구성 요소 또는 오디오 에셋을 관리하기 위해 준비하고 있습니다.

 

  • Richard는 XD에서 에셋 및 라이브러리를 제작하고 관리하는 방법에 대해 알아보고 있습니다.

 

  • XD에서 에셋 관리 시스템을 만드는 데 도움이 필요합니다.

다음은 당사에서 Richard에게 XD의 문서 에셋을 소개하는 문서입니다. Richard가 시작하는 데 도움이 되는 방법을 함께 알아보시기 바랍니다.

Adobe XD를 처음 사용하십니까?

무료 체험판 앱 다운로드

앱 기본 사항 알아보기

XD를 이미 사용하고 있습니까?

앱 업데이트

새로운 기능 살펴보기

직접 사용해 보기

샘플 파일 다운로드

.xdc 파일, 604KB

진행하기에 앞서

XD에서 다음 개념을 익히십시오.

문서 에셋 추가

디자인 스타일 및 구성 요소 선별을 시작하려면 도구 모음에서 라이브러리 를 클릭하거나 Cmd+Shift+Y(Mac) 또는 Ctrl+Shift+Y(Windows)를 눌러 문서 에셋 패널 을 엽니다.
문서 에셋 패널을 연 경우 문서 전체에 걸쳐 재사용하거나 나중에 라이브러리의 일부로 게시할 색상, 문자 스타일, 구성 요소, 오디오 또는 비디오를 추가하려면 다음 단계를 따르십시오. 

색상 추가

  • 캔버스에서 오브젝트를 선택한 다음 문서 에셋 패널에서 색상 옆에 있는 + 아이콘을 클릭합니다. XD에서는 선택한 오브젝트와 관련된 채우기 및 테두리 색상을 추출합니다.

문자 스타일 추가

  • 캔버스에서 텍스트를 선택한 다음 문서 에셋 패널에서 문자 스타일 옆에 있는 [+] 아이콘을 클릭합니다. XD에서는 하위 범위 스타일을 포함한 텍스트 레이어와 관련된 모든 스타일을 추출합니다.

구성 요소 추가

  • 캔버스에서 오브젝트를 선택한 다음 문서 에셋 패널에서 구성 요소 옆에 있는 [+] 아이콘을 클릭하여 해당 오브젝트를 구성 요소로 전환합니다. 
  • 캔버스에서 구성 요소를 만들면 해당 구성 요소는 XD에서 자동으로 문서 에셋 패널의 [구성 요소]에 추가됩니다.

오디오 추가

오디오 에셋 추가

  • 속성 관리자에서 프로토타입에 프로토타입 모드로 추가된 오디오 파일은 문서 에셋에 자동으로 표시됩니다.

비디오 추가

비디오 추가

  • 캔버스에서 비디오를 선택한 다음 문서 에셋 패널에서 비디오 옆에 있는 [+] 아이콘을 클릭합니다.
  • 비디오를 구성 요소로 변환하면 해당 비디오는 문서 에셋 패널의 구성 요소 비디오에 추가됩니다.


주의해야 할 사항

  • 그림자의 색상을 문서 에셋에 추가할 수는 없습니다.
  • 공통 속성을 사용하여 문자 스타일을 그룹화할 수 없습니다. 
  • 오디오 파일은 문서 에셋에서만 삭제할 수 있습니다.

  • 속성 관리자에서 오디오 파일을 추가하려면 프로토타입 모드를 사용해야 합니다.
  • 오디오 파일의 이름을 바꾸거나 순서를 변경할 수 없습니다.
  • 클라우드 문서로 링크할 경우 오디오 파일은 연결되지 않습니다. 

팁 및 요령

  • 문서 에셋의 목록 보기 기능을 사용하여 조직의 요구 사항에 부합하도록 에셋의 이름을 변경하고 정렬합니다. 격자 보기가 보다 큰 썸네일과 에셋 렌디션이 제공되는 에셋을 재사용할 수 있도록 최적화되었습니다.
  • 프리플라이트를 위해 문서의 모든 아트보드를 선택하여 문서에 사용된 모든 색상 및 문자 스타일을 추출합니다.

문서 에셋 적용 및 재사용

문서 에셋에서 추가한 에셋을 볼 수 있으므로 아트보드에서 오브젝트 또는 오브젝트 그룹을 선택하고 색상 또는 문자 스타일을 클릭하여 선택 영역에 적용합니다.

디자인에서 구성 요소 중 하나 또는 여러 개를 사용하려면 문서 에셋 패널에서 구성 요소를 선택하고 캔버스로 드래그합니다. 이들 구성 요소의 인스턴스가 캔버스에서 생성됩니다.

색상, 문자 스타일 또는 구성 요소를 재사용하려면 다음 단계를 따르십시오. 

색상 재사용

색상 재사용

다음 중 하나를 수행합니다.
  1. 오브젝트 또는 텍스트 레이어를 선택하고, 색상 견본을 클릭하여 채우기 색상으로 적용합니다.
  2. 오브젝트를 다중 선택하고 색상 또는 그레이디언트를 선택 영역에 적용합니다.
  3. 문서 에셋에서 색상 견본을 마우스 오른쪽 버튼으로 클릭하고, 테두리 색상 적용을 선택하여 테두리 색상으로 적용하거나 16진수 값을 복사하여 재사용할 수 있습니다.

문자 스타일 재사용

다음 중 하나를 수행합니다.
  1. 텍스트 레이어 또는 텍스트의 일부를 선택하고 문자 스타일을 클릭하여 문자 스타일을 적용합니다.
  2. 오브젝트를 다중 선택하고, 선택 영역에 문자 스타일을 적용합니다.

구성 요소 재사용

구성 요소 재사용

다음 중 하나를 수행합니다.
  1. 구성 요소를 문서 에셋에서 캔버스로 드래그합니다.
  2. 오브젝트를 다중 선택하고, 캔버스에서 여러 구성 요소를 드래그합니다.
  3. 구성 요소를 드래그할 때 다른 구성 요소 인스턴스 위로 마우스를 가져다 대면 교체할 수 있습니다. 

팁 및 요령

  • 일관성 있는 사용을 위해 색상 및 문자 스타일을 저장한 후에는 문서 에셋에서 선택한 오브젝트에 색상 및 문자 스타일을 적용해야 합니다.

문서 에셋 편집

에셋을 추가하여 재사용하면 문서 에셋에서 에셋을 편집하여 문서 전체에 걸쳐 전역 변경을 적용할 수 있습니다. 이 기능은 문서 전체에 걸쳐 색상 및 문자 스타일을 수정하는 과정을 간소화할 수 있습니다. 

계속하기 전에, 올바른 에셋을 편집하고 있는지 확인합니다.

  • 문서 에셋에서 에셋을 마우스 오른쪽 버튼으로 클릭하고, 캔버스에서 강조 표시를 선택하여 특정 색상 또는 문자 스타일을 사용하거나 구성 요소의 인스턴스를 발견하는 모든 오브젝트를 찾을 수 있습니다.
  • 캔버스에서 오브젝트를 선택해 마우스 오른쪽 버튼을 클릭한 다음 에셋의 구성 요소 공개를 선택하여 문서 에셋에서 해당 색상, 문자 스타일 또는 구성 요소를 검색합니다.
캔버스에서 강조 표시
문서 에셋에서 에셋을 마우스 오른쪽 버튼으로 클릭하고, 캔버스에서 강조 표시를 선택합니다.

에셋의 구성 요소 공개
캔버스에서 오브젝트를 선택하고 마우스 오른쪽 버튼을 클릭한 다음 에셋에 구성 요소 공개를 선택합니다.

문서 에셋을 편집하려면 다음 절차를 따르십시오.

색상 편집

색상 편집

  • 색상 견본을 마우스 오른쪽 버튼으로 클릭하고 편집을 선택하여 문서 전체에서 색상 값을 수정할 수 있습니다. 
  • 해당 색상이 사용된 캔버스의 모든 오브젝트가 실시간으로 업데이트됩니다. 이는 색상 변경을 대규모로 미리 보고 편집할 수 있는 좋은 방법입니다.

문자 스타일 편집

문자 편집

  • 문자 스타일을 마우스 오른쪽 버튼으로 클릭하고 편집을 선택하여 문서 전체에 걸쳐 해당 스타일을 수정할 수 있습니다. 
  • 해당 스타일이 사용된 캔버스의 모든 텍스트 레이어는 실시간으로 업데이트됩니다.

구성 요소 편집

구성 요소 편집

  • 캔버스 또는 문서 에셋 패널에서 구성 요소를 마우스 오른쪽 버튼으로 클릭하고 메인 구성 요소 편집을 선택하여 캔버스에서 메인 구성 요소를 강조 표시하거나 삭제된 경우 다시 만듭니다.
  • 메인 구성 요소에 대한 모든 변경 내용은 다른 구성 요소 인스턴스에 전파됩니다.


주의해야 할 사항

  • 여러 오브젝트(100개 이상)에 걸쳐 사용된 색상 또는 문자 스타일을 편집하는 경우에는 변경 내용이 패널에서 캔버스의 모든 오브젝트로 반영되는 데 어느 정도 시간이 소요될 수 있습니다.

팁 및 요령

  • 편집 내용이 디자인에 미치는 영향을 파악하기 위해 문서 에셋에서 에셋을 편집하기 전에 캔버스에서 강조 표시 옵션을 선택합니다.
  • 문자 스타일로 색상을 편집하려면 색상 값을 변경한 다음 전역 색상 값을 변경하여 문자 스타일을 유지하십시오.
  • 연결된 색상 또는 문자 스타일을 업데이트하면 연결된 색상 또는 문자 스타일이 적용된 오브젝트만 업데이트됩니다.

문서 에셋 관리 및 구성

에셋을 추가한 후, 문서 에셋 패널에서 다음과 같은 방법으로 에셋을 관리 및 구성할 수 있습니다.

  • 에셋 보기 및 정렬
  • 에셋 검색 및 필터링
  • 에셋에 마우스 가져다 대기
  • 에셋 순서 바꾸기, 이름 바꾸기 및 삭제

에셋을 그룹화하는 방법을 알아보려면 에셋을 그룹 및 하위 그룹으로 구성을 참조하십시오.

에셋 보기 및 정

에셋 보기 및 정렬

  • 격자 보기: 썸네일을 표시하도록 최적화되어 있는 경우, 에셋을 시각적으로 식별할 수 있습니다.
  • 목록 보기: 조직에 최적화된 경우 모든 에셋의 이름을 보고 순서를 변경할 수 있습니다.
  • 이름순으로 정렬: 에셋 범주와 그 안에 있는 모든 에셋을 알파벳순으로 정렬합니다.

두 보기 모두에서 에셋을 추가, 재사용 및 편집할 수 있습니다. 

에셋 검색 및 필터링

에셋 검색 및 필터링

검색을 사용하여 에셋을 검색합니다.

유형별 필터링를 사용하여 색상,문자 스타일 또는구성 요소를 기준으로 문서 에셋을 필터링합니다. 자세한 내용은 에셋 검색 및 필터링을 참조하십시오.

에셋에 마우스 가져다 대기

에셋에 마우스 가져다 대기

에셋 썸네일에 마우스를 가져다 대면 다음 정보가 표시됩니다. 

  • 색상: 16진수 값 또는 사용자 정의 색상 이름을 표시합니다. 
  • 그레이디언트: 그레이디언트 값 중단점을 표시합니다.
  • 문자 스타일: 줄 간격 같은 속성을 표시합니다.
  • 구성 요소: 캔버스에서 해당 구성 요소의 인스턴스 수를 표시합니다.

에셋 순서 바꾸기, 이름 바꾸기 및 삭제

  • 목록 보기에서 을(를) 드래그하여 각 범주 내의 에셋 순서를 변경합니다.
  • 마우스 오른쪽 버튼을 클릭하여 이름을 변경하거나 목록 보기로 전환하고  모든 에셋의 이름을 변경합니다. 구성 요소 경로를 더블 클릭하여 레이어 패널에서 메인 구성 요소의 이름을 바꿀 수도 있습니다.
  • 삭제 에서 마우스 오른쪽 버튼을 클릭해 선택하여 문서 에셋에서 색상, 문자 스타일, 구성 요소 또는 오디오를 삭제합니다. 패널에서 구성 요소를 삭제하면 인스턴스가 캔버스에서 일반적인 오브젝트로 그룹 해제됩니다.

 주의해야 할 사항

  • 목록 보기를 사용하여 작업할 때, 구성 요소의 대형 미리보기가 표시되지 않습니다.
  • 다양한 범주에 걸쳐 그룹화하려면 에셋의 순서를 변경하십시오. 

팁 및 요령

  • 문서 에셋의 필터를 사용하여 특정 에셋 범주 또는 소스를 필터링하여 볼 수 있습니다.
  • 변경 내용이 디자인에 어떤 영향을 미칠지 확실하지 않습니까? 캔버스에서 강조 표시를 사용하여 문서 전체에서 해당 에셋의 인스턴스를 볼 수 있습니다.
  • 사용되지 않는 구성 요소를 확인하려면 캔버스에서 모든 오브젝트를 선택해 마우스 오른쪽 버튼으로 클릭한 다음 에셋에서 구성 요소 공개 구성 요소 공개를 선택하고 강조 표시되는 구성 요소를 목록의 맨 위로 드래그합니다.
  • 다음 항목에 마우스를 가져다 대면
    • 그레이디언트, 툴팁에 그레이디언트의 시작 및 종료 값이 표시됩니다. 값 사이의 “-”는 두 개의 변환점이 있는 그레이디언트를 나타내며 값 사이의 “...”는 여러 개의 색상 변환점이 있는 그레이디언트를 나타냅니다.
    • 구성 요소, 툴팁은 캔버스에서 해당 구성 요소의 인스턴스 수를 표시합니다.
  • 목록 보기 에서 에셋의 이름을 변경할 때, TAB 키를 사용하여 목록 보기에서 다음 에셋을 이동하고 SHIFT+TAB 키를 사용하여 역방향으로 이동합니다.

에셋을 그룹 및 하위 그룹으로 구성

트리 보기 또는 경로 보기에서 문서 에셋 패널에 원하는 수의 그룹 및 하위 그룹을 생성하여 손쉽게 문서 에셋을 구성할 수 있습니다.

  • 트리 보기: 계층 구조로 정렬된 그룹 및 하위 그룹이 표시됩니다. 문서 에셋 패널의 오른쪽 상단에 있는 트리/경로 전환 아이콘을 클릭하여 트리 보기로 전환합니다. 
  • 경로 보기: 그룹 경로 목록이 표시되고 각 경로에 슬래시(/)로 구분된 그룹 및 중첩된 하위 그룹이 표시됩니다. 경로 보기는 중첩 그룹 구조를 병합하여 하위 그룹 내의 모든 에셋을 쉽게 스캔할 수 있도록 합니다. 문서 에셋 패널의 오른쪽 상단에 있는 트리/경로 전환 아이콘을 클릭하여 패스 보기로 전환합니다.

트리 보기와 경로 보기 모두에서 다음과 같은 방법으로 에셋을 구성할 수 있습니다.

트리 보기(왼쪽) 및 경로 보기(오른쪽)의 문서 에셋 패널
트리 보기(왼쪽) 및 경로 보기(오른쪽)의 문서 에셋 패널

다음 방법 중 하나를 사용하여 각 에셋 범주(색상, 문자 스타일 등) 내에 그룹을 만듭니다.

  • 에셋을 다중 선택하고 마우스 오른쪽 버튼으로 클릭한 다음, 선택 항목의 새 그룹을 선택합니다.
  • 에셋 범주(색상, 문자 스타일, 구성 요소 등)를 마우스 오른쪽 버튼으로 클릭하고, 하위 그룹 만들기를 선택합니다.
  • 에셋을 마우스 오른쪽 버튼으로 클릭하고, 요소의 새 그룹을 선택합니다.
  • 에셋을 마우스 오른쪽 버튼으로 클릭하고, 이동을 선택하여 폴더 아이콘, 만들기이동을 차례로 클릭합니다.
  • 에셋을 다중 선택하고 마우스 오른쪽 버튼으로 클릭한 다음, 선택한 항목 이동을 선택하고 폴더 아이콘, 만들기이동을 차례로 클릭합니다.
그룹 내에서 하위 그룹 만들기
에셋을 다중 선택하여 마우스 오른쪽 버튼을 클릭하고 및 그룹 만들기

그룹을 만든 후, 마우스 오른쪽 버튼을 클릭하여 다음 중 하나를 수행합니다.

  • 하위 그룹 만들기: 여러 개의 하위 그룹을 만듭니다.
  • 이동: 에셋 범주가 내에 있는 다른 그룹으로 에셋을 이동합니다.
  • 그룹 이름 바꾸기: 사용자 정의 이름을 입력합니다.
  • 그룹 해제: 그룹을 제거하고, 그룹 내의 에셋을 한 수준 위로 이동합니다.
  • 삭제: 그룹과 그룹 내의 에셋을 삭제합니다.

그룹 및 하위 그룹을 만든 후에는 에셋을 드래그하여 해당 그룹으로 이동할 수 있습니다. 또는 에셋을 마우스 오른쪽 버튼으로 클릭하고 다음으로 이동을 선택한 다음 에셋을 이동할 그룹을 선택할 수도 있습니다.

그룹 경로에 슬래시(/)를 사용하여 한 번에 여러 개의 중첩된 하위 그룹을 만들고 경로를 편집하여 에셋을 손쉽게 구성할 수 있습니다. 자세한 내용은 슬래시를 사용하여 에셋 구성을 참조하십시오.

경로를 편집하여 에셋 구성

슬래시(/)를 사용하여 에셋 범주 내에서 그룹 및 하위 그룹을 손쉽게 구성할 수 있습니다. 슬래시를 사용하여 다음 작업을 수행할 수 있습니다.

  • 중첩된 하위 그룹이 있는 그룹 만들기
  • 경로를 편집하여 에셋 그룹 해제 및 이동

중첩된 하위 그룹이 있는 그룹 만들기

슬래시(/)를 사용하여 그룹 내에 여러 개의 중첩된 하위 그룹을 한 번에 만들 수 있습니다. 

다음에서 슬래시를 사용하여 중첩된 하위 그룹을 만들 수 있습니다.

  • 문서 에셋 패널의 패스 보기 및 트리 보기
  • 레이어 패널 (메인 구성 요소만 해당)

그룹 이름을 입력한 후 슬래시를 추가하고 하위 그룹 이름을 입력한 다음 필요한 수의 수준을 중첩합니다. 동일한 이름을 가진 하위 그룹이 중첩 수준에 이미 존재하는 경우 두 하위 그룹이 병합됩니다.

경로를 편집하여 에셋 그룹 해제 및 이동

강력한 경로 편집 기능을 사용하여 여러 그룹 해제 기능을 한 번에 수행하거나 다음으로 이동 및 그룹 해제 기능을 결합할 수 있습니다.

다음에서 경로를 편집할 수 있습니다.

  • 문서 에셋 패널의 패스 보기
  • 레이어 패널 (메인 구성 요소만 해당)

경로를 더블 클릭하여 편집합니다. 경로에서 그룹 또는 하위 그룹을 제거하면 그 안에 있는 모든 에셋이 한 수준 위로 이동합니다. 경로에서 원하는 수의 중첩 수준을 한 번에 제거하고 에셋을 여러 수준 위로 이동할 수 있습니다. 이미 존재하는 경로를 입력하면 모든 에셋이 해당 경로로 이동합니다. 


주의해야 할 사항

  • 에셋 이름에 슬래시가 포함된 이전 XD 문서가 있습니까? XD 50 이상 버전에서 이러한 문서를 열면 다음 중 하나를 수행하라는 메시지가 표시됩니다.

a. 슬래시를 대시(—)로 바꾸고 그룹 계층 구조를 유지합니다.

b. 슬래시를 새 중첩 수준으로 변환하고 그룹 계층 구조에 깊이를 추가합니다.

  • XD에서 Sketch 문서를 열면 해당 에셋 그룹 및 구조가 유지됩니다.
  •  경로를 편집해도 에셋은 삭제되지 않습니다. 그룹 및 모든 에셋을 함께 삭제하려면 해당 그룹을 마우스 오른쪽 버튼으로 클릭하고 [삭제]를 선택하십시오.
  • 레이어 패널에서 메인 구성 요소 이름에 대한 그룹을 구성하면 문서 에셋 패널에도 반영됩니다.
  • XD 클라우드 문서에서 연결된 라이브러리를 게시하면 모든 그룹과 하위 그룹이 라이브러리에 유지됩니다.
  • 디자인 사양을 게시할 때, 에셋의 그룹 경로는 표시되지 않습니다.

팁 및 요령

  • 이미 아트보드에서 문서 에셋을 구성한 경우, 아트보드 이름을 마우스 오른쪽 버튼으로 클릭하고 에셋의 구성 요소 공개,에셋의 색상 공개 또는 에셋의 문자 스타일 공개를 선택합니다. 선택한 에셋 범주의 모든 에셋이 문서 에셋에서 강조 표시되고 선택됩니다. 해당 에셋 중 하나를 마우스 오른쪽 버튼으로 클릭하고, 선택 항목의 새 그룹을 모든 에셋으로 그룹을 쉽게 만들 수 있습니다.
  • 문서 에셋에 이름이 지정되어 있고 빠르게 그룹화하려면 검색을 사용하여 검색 기준과 일치하도록 에셋 범위를 좁힙니다. 여기에서 필터링된 에셋만으로 그룹을 빠르게 만들 수 있습니다.

문서 에셋 구성에 대한 전문적인 팁을 얻으려면 다음 비디오를 시청하십시오.

에셋 공유 및 게시

이제 문서 에셋에서 재사용 가능한 모든 색상, 문자 스타일 및 구성 요소를 만들었으므로 Creative Cloud Libraries를 사용하여 디자인 시스템 에셋을 게시하고 팀의 다른 사람들과 공유하는 방법에 대해 알아보십시오.

자세히 알아보기

이 비디오를 통해 에셋으로 작업하는 방법에 대해 자세히 알아보십시오.

다음 단계

지금까지 XD의 에셋 및 라이브러리를 사용하여 작업하는 방법에 대해 살펴보았습니다. 한발 더 나아가 라이브러리를 사용하여 에셋, 구성 요소 및 디자인 시스템을 공유하거나 기존 XD 클라우드 문서를 라이브러리로 마이그레이션하는 방법을 살펴보십시오.

질문이나 아이디어가 있습니까?

커뮤니티에 질문

질문이나 공유하고자 하는 아이디어가 있습니까? Adobe XD 커뮤니티에 참여하십시오. 소중한 의견과 다양한 작품 활동을 기대하겠습니다!

Adobe 로고

내 계정 로그인