드로잉 및 텍스트 툴을 사용하여 작업

Adobe XD에서 왼쪽 툴바에 있는 사각형, 다각형, 타원, 선 및 펜 도구를 사용하여 간단한 아이콘과 그래픽을 빠르게 제작할 수 있습니다. 선택 도구는 편집할 특정 선, 모양 또는 오브젝트를 선택하는 데 유용합니다.

그런 다음 이들 모양을 다양한 방식으로 결합하여 복잡한 모양과 오브젝트 또는 해당 모양의 마스크 부분을 제작할 수 있습니다. 결합 및 마스크 적용 기술에 대한 자세한 내용은 부울 작업 및 마스크 적용 기술을 사용하여 오브젝트 편집을 참조하십시오.

직사각형 및 정사각형 그리기

타원 및 원 그리기

다각형 그리기

다각형 도구를 사용하면 삼각형, 마름모, 오각형, 별 및 하트와 같은 다양한 형태의 새로운 모양을 만들 수 있습니다.

선 그리기

펜 툴을 사용하여 그리기

펜 툴로 그릴 수 있는 가장 단순한 패스는 직선으로, 펜 툴을 클릭하면 두 개의 고정점이 생성됩니다. 이어서 클릭하면 모퉁이 점에 연결되는 직선 선분으로 구성된 패스가 생성됩니다.

곡선 그리기

곡선의 방향이 바뀌는 지점에 고정점을 추가하고 곡선의 모양을 만드는 방향선을 드래그하여 곡선을 만들 수 있습니다. 방향선의 길이와 기울기에 따라 곡선의 모양이 정해집니다.

되도록 적은 수의 고정점을 사용하여 곡선을 그리면 보다 쉽게 편집할 수 있으며, 시스템에서 더 빠르게 표시하고 인쇄할 수 있습니다. 너무 많은 점을 사용하면 곡선에서 원하지 않는 충돌이 생길 수 있습니다. 대신 간격을 넓게 하여 고정점을 그리고 방향선의 길이와 각도를 조정하여 곡선의 모양을 만듭니다.

직선을 그린 다음 곡선 그리기

곡선을 그린 다음 직선 그리기

모퉁이에 연결된 두 개의 곡선 선분 그리기

드로잉 모드와 편집 모드 비교

드로잉 모드와 편집 모드 간 전환하려면 Esc 키를 누릅니다.

모양이나 패스를 더블 클릭하여 “패스 편집 모드”로 들어갈 수도 있습니다. 이 모드에서는 모양의 고정점이 표시되지만 마우스를 움직여도 아무런 그림이 그려지지 않습니다. 기존의 고정점/조절점을 조작하거나 경로의 기존 선분에 고정점을 새로 삽입할 수 있습니다.

펜 툴을 사용하여 그릴 때 새로운 선분을 그리는 것뿐만 아니라 위에 설명된 모든 편집 작업을 수행할 수 있습니다.

기존 패스 연장

펜 툴을 선택하면 마우스 아래 아트보드에 있는 모든 패스의 시작점과 끝점 위로 핸들이 표시됩니다. 해당 포인트로부터 패스 그리기를 계속하려면 이들 핸들 중 하나를 클릭합니다.

닫힌 패스를 연장하면 패스가 다시 열리며 해당 패스에 대한 드로잉 모드에 펜 툴이 놓입니다.

고정점 선택

드로잉을 더블 클릭하여 고정점이 표시되도록 합니다. 그런 다음 고정점을 클릭하여 선택할 수 있습니다. 고정점을 여러 개 선택하려면 Shift 키를 누른 상태로 고정점을 선택하거나 선택 도구를 사용하여 해당 고정점을 윤곽 선택합니다.

고정점을 선택하고 나면 키보드를 사용하여 이들 고정점을 동시에 약간씩 옮기거나 마우스를 사용하여 드래그하거나 속성 관리자에서 이들 속성(x 좌표 및 y 좌표)을 편집할 수 있습니다.

고정점 스냅 비활성화

고정점을 새로 배치하거나 기존 고정점을 드래그하는 동안 고정점 근처의 세로 또는 가로 방향에 다른 고정점이 있으면 스냅 라인이 표시됩니다. 고정점 스냅을 비활성화하려면 Cmd/Ctrl 키를 누른 상태를 유지합니다.

고정점 추가 및 편집

드로잉을 더블 클릭하여 선택하고 기존 고정점이 표시되도록 합니다. 패스를 클릭하여 커서가 놓인 위치에 고정점을 새로 추가합니다.

고정점 삭제

고정점을 선택한 다음 Delete 키를 누릅니다.

드로잉 단축키

거리 측정

오브젝트를 클릭하고 Option 키(Mac) 또는 Alt 키(Windows)를 눌러 오브젝트와 아트보드 사이 또는 오브젝트와 주변의 다른 오브젝트 사이의 거리를 측정할 수 있습니다. 

 선택한 오브젝트가 정사각형이나 직사각형이 아닌 경우 XD는 해당 오브젝트 주변에 테두리 상자를 그립니다. 이후 테두리 상자의 경계로부터 측정된 값이 표시됩니다.

아트보드의 가장자리에서 오브젝트까지의 거리 측정:

간단히 오브젝트를 클릭하고 Option 키(Mac) 또는 Alt 키(Windows)를 누릅니다.

Option 키 또는 Alt 키를 누르고 있는 동안 Adobe XD가 거리를 측정하고 값을 표시합니다.

아트보드의 다른 오브젝트에서 해당 오브젝트까지의 거리 측정:

오브젝트를 클릭하고 Option 키(Mac) 또는 Alt 키(Windows)를 누른 상태에서 다른 오브젝트 위로 마우스를 가져다 댑니다.

Option 또는 Alt 키를 누르고 있는 동안 Adobe XD가 두 오브젝트 간 가장 가까운 경계 사이의 거리를 측정하고 값을 표시합니다.

텍스트 툴

임의의 위치에 텍스트 입력

텍스트 툴을 클릭하고 텍스트를 입력하려는 위치를 클릭합니다. 텍스트를 입력하고 Esc를 눌러 텍스트 변경 내용을 커밋하거나 Return 키를 눌러 다음 줄로 이동합니다.

캔버스에서 임의의 위치를 선택하여 텍스트를 입력할 때 텍스트가 시작되는 위치에 가로 행이 표시되며 문자를 입력하면 확장됩니다. 각 텍스트 행은 서로 독립적입니다. 즉, 행은 편집하면 확장 또는 축소되지만 다음 행으로 넘어가지는 않습니다. 아트워크에 몇 개의 단어만 추가할 경우에는 이 방법이 유용합니다.

다른 오브젝트 위에 텍스트를 입력하고 오브젝트 > 정렬 옵션을 사용하여 텍스트를 앞쪽에 표시되도록 할 수 있습니다.

영역에 텍스트 입력

텍스트 툴을 클릭하고 캔버스에서 텍스트를 추가하려는 위치를 클릭한 상태로 드래그하여 텍스트 영역을 정의합니다. 그런 다음 해당 영역의 안쪽을 클릭하여 텍스트 입력을 시작합니다.

텍스트 영역을 정의할 때 오브젝트의 경계를 사용하여 문자의 흐름을 가로 또는 세로 방향으로 제어합니다. 테두리까지 텍스트를 입력하면 정의된 영역 내부에 맞게 텍스트가 자동으로 다음 줄로 이동합니다. 브로슈어와 같이 여러 단락을 만들려는 경우 이 방법으로 텍스트를 입력하는 것이 유용합니다.

맞춤법 검사

편집 메뉴에서 맞춤법 검사 켜기를 선택합니다. 맞춤법 검사 기능은 텍스트 컨테이너의 잘못된 텍스트에만 적용됩니다. 맞춤법이 틀린 단어에는 빨간색 밑줄이 그어지고 자동 수정된 단어에는 파란색 밑줄이 그어집니다. 문법 오류는 녹색 밑줄로 강조 표시됩니다.

맞춤법이 틀린 단어를 마우스 오른쪽 버튼으로 클릭하고 제안 목록에서 상황에 맞는 정확한 맞춤법을 선택합니다.

자동 수정된 맞춤법을 원래 입력한 단어로 되돌리려면 Cmd + Z(Mac OS) 또는 Ctrl + Z(Windows OS)를 누릅니다.

텍스트 파일에서 텍스트 가져오기

다음 방법 중 하나를 통해 미리 작성된 텍스트를 아트보드로 간편하게 가져올 수 있습니다.

• 텍스트 파일을 아트보드로 드래그하여 놓습니다.
  

일반 텍스트 파일을 아트보드 위로 간단히 드래그하여 미리 작성된 텍스트를 디자인에 간편하게 포함시킬 수 있습니다. 이렇게 하면 아트보드에 텍스트 파일의 콘텐츠가 포함된 영역 텍스트가 생성됩니다.          

• 반복 그리드 위로 텍스트 파일을 드래그합니다.

텍스트 파일(새 행 포함)을 드래그하고 해당 파일을 반복되는 그리드의 텍스트 구성 요소 위로 드래그할 수도 있습니다. 모든 텍스트 요소가 해당 파일의 텍스트로 채워집니다.

자세한 내용은 분리 반환 텍스트 파일을 반복 그리드의 텍스트 오브젝트로 드래그를 참조하십시오. 

• 텍스트를 복사하고 아트보드에 붙여넣습니다.

Adobe XD에서 간편하게 이동하고 편집할 수 있는 영역 텍스트 요소를 생성하는 아트보드에서 텍스트를 복사하고 붙여넣을 수도 있습니다.

텍스트 크기 조정 옵션

XD는 텍스트 상자의 폭을 한 줄 내에서 내용에 맞춰 확장하고, 텍스트 상자의 높이를 동적으로 조정하고, 텍스트 영역의 폭과 높이를 제어할 수 있는 세 가지 텍스트 크기 조정 옵션을 제공합니다.

디자인 요구 사항에 따라 텍스트 오브젝트를 선택하고 속성 관리자의 폭 자동 조정, 높이 자동 조정 및 크기 고정 옵션 중에서 선택할 수 있습니다.

폭 자동 조정

프레임, 이미지 및 오브젝트 내에서 텍스트를 추가할 때 텍스트 상자의 폭을 최대 범위로 확장하고 텍스트를 한 줄 내에서 내용에 맞춰 조정할 수 있습니다.

자동 높이 조정

많은 양의 텍스트가 포함된 애플리케이션을 디자인하거나 스택과 함께 반응형 디자인을 만드는 경우 폭을 변경하지 않고 영역 텍스트의 높이를 동적으로 조정할 수 있습니다.

텍스트 높이 자동 조정 기능을 사용하면 영역 텍스트의 높이가 내용에 맞게 자동으로 조정되도록 할 수 있습니다. 영역 텍스트를 그릴 때 기본적으로 이 옵션이 활성화됩니다. 

크기 고정

브로슈어, 웹 사이트와 같은 디자인에 텍스트를 추가할 때 하나의 텍스트를 추가하거나 단락을 추가하고 텍스트 영역의 폭과 높이를 제어할 수 있습니다. 크기 고정 기능을 사용하여 텍스트 상자 내부에 맞게 텍스트를 감싸거나 높이를 초과하면 자동으로 잘리도록 할 수 있습니다. 

크기 고정 기능을 활성화하려면 속성 관리자에서  아이콘을 선택합니다. 영역 텍스트의 크기를 조정하려면 모든 면에서 크기 조정 핸들을 클릭하고 드래그합니다. 텍스트 영역 내부의 텍스트가 맞지 않는 경우 XD에서는 빨간색 하단 크기 조정 핸들로 표시됩니다.

콘텐츠에 맞춰 텍스트 영역의 크기를 빠르게 조정하려면 텍스트 상자의 아래쪽에 있는 크기 조정 핸들을 더블 클릭하십시오.

텍스트 서식 적용

텍스트를 클릭한 다음 속성 관리자를 사용하여 해당 텍스트에 대한 유형, 글꼴 크기 및 텍스트 정렬을 지정합니다.

텍스트 블록에서 개별 단어나 문자를 선택하고 이들 섹션에 대해서만 별도로 서식을 지정할 수도 있습니다.

문자, 줄 및 단락 간격 변경

문자 간격을 변경하려면 텍스트 오브젝트를 클릭하고 속성 관리자의 문자 간격 옵션을 사용하여 문자 간격을 지정합니다.

텍스트의 하위 집합에서 문자 간격을 변경하려면 해당 텍스트를 클릭하고 속성 관리자를 사용하여 밀리 단위로 문자 간격을 수정합니다.

줄 간격을 변경하려면 텍스트 영역을 클릭한 다음 속성 관리자의 줄 간격 옵션을 사용하여 줄 간격을 지정합니다.

행 높이를 기본값으로 재설정하려면 속성 관리자의 줄 간격 옵션에 0을 입력합니다.

Photoshop 및 InDesign과 마찬가지로 Adobe XD에서도 동일한 텍스트 요소 내의 단락 앞뒤 간격을 변경할 수 있습니다.

단락 간격을 변경하려면 단락을 선택하고 서식 패널에서 단락 아이콘을 클릭합니다. 필요에 따라 간격 값을 변경합니다.

텍스트 변환

텍스트 변환 중 하나를 적용하려면 변경할 텍스트를 선택합니다. 속성 관리자에서 다음 옵션을 선택합니다.

• 텍스트를 대문자로 설정하려면 대문자 아이콘 (TT)
• 텍스트를 소문자로 설정하려면 소문자 아이콘 (tt)
• 텍스트를 제목으로 설정하려면 제목 아이콘 (Tt) 
• 텍스트를 위 첨자로 설정하려면 텍스트 위 첨자 아이콘
• 텍스트를 아래 첨자로 설정하려면 텍스트 아래 첨자 아이콘

텍스트 밑줄 긋기

텍스트에 밑줄을 적용하려면 텍스트 영역을 클릭한 다음 속성 관리자에서 밑줄 아이콘을 클릭합니다. XD가 텍스트의 디센더 주변에서 비연속적인 부드러운 밑줄을 그립니다(보다 심미적인 라인 생성).

텍스트 취소선

텍스트에 취소선을 적용하려면 텍스트 영역을 선택한 다음 속성 관리자에서 취소선 아이콘을 클릭합니다. 부드러운 선이 텍스트 중앙에 바로 그려지므로 마치 선이 겹쳐져 있는 것처럼 보입니다.

글로벌 스타일 변경

전역 스타일을 쉽게 변경하려면 텍스트 변환 또는 취소선을 문자 스타일에 적용합니다.

에셋 패널에서 문서 전체에서 문자 스타일로 사용할 스타일을 저장합니다. 그런 다음 문자 스타일을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 편집 옵션을 선택합니다. 대문자, 소문자, 제목 또는 취소선 옵션 중 하나를 선택하면 해당 문자 스타일을 사용하는 텍스트가 문서 전체에서 변경됩니다. 

수학 연산을 통해 정밀한 디자인 제작

수학 연산을 사용하여 더욱 정밀하게 디자인을 제작하거나 오브젝트를 새로운 위치로 옮기거나 폭과 높이를 수정할 수 있습니다.

하나 이상의 오브젝트를 선택합니다. 속성 관리자에서 숫자 값을 허용하는 모든 상자에서 간단한 수학 연산을 수행할 수 있습니다. Adobe XD는 변경 사항을 계산하기 위한 +, -, /, * 수학 연산을 지원합니다.

예를 들어 선택한 오브젝트를 현재 측정 단위를 사용하여 오른쪽으로 3 단위 옮기고자 한다면 현재 값 다음에 +3을 입력하면 됩니다.

숫자 값을 허용하는 속성 관리자 텍스트 상자에서 다음 중 하나를 수행합니다.

•   현재 값 전체를 수학식으로 바꾸려면 현재 값 전체를 선택합니다.
•   현재 값을 수학식의 일부로 사용하려면 현재 값의 앞이나 뒤를 클릭합니다.

 Adobe XD는 한 번에 하나의 작업만 수행할 수 있습니다. 즉, “4in+2p”는 처리할 수 있지만 “4in+2p-1p”는 두 개의 서로 다른 연산으로 해석되기 때문에 처리할 수 없습니다.

비디오: 텍스트 높이 자동 조정 기능을 사용하여 작업하려면 어떻게 해야 합니까?

“텍스트 높이 자동 조정 컨테이너는 안에 들어 있는 텍스트 양에 따라 높이가 자동으로 조정됩니다. 또한 스택 및 패딩과 같은 콘텐츠 인식 레이아웃 기능과도 훌륭하게 작동합니다.” - Adobe XD의 수석 제품 관리자 Dani Beaumont.

이 비디오를 통해 XD에서 텍스트 높이 자동 조정 기능을 사용하여 작업하는 방법에 대해 알아보십시오.

시청 시간: 3분