06

TEXT

TEXT

문자 쓰기와 활용

UI 디자인에서 도형 그리기 외에 가장 많이 쓰이는 것이 문자 디자인 및 문자 쓰기 이다. AdobeXD 에서 어떻게 문자를 쓰고 속성을 변경하며 활용할 수 있는 지 살펴보도록 하자.

Text (T)

한줄 문자 쓰기
img_text_01@2x

좌측 Left Tool Bar 에서 문자쓰기를 클릭하거나 단축기 T 를 누르면 문자 쓰기를 할 수 있다. 아트보드 또는 워크 스페이스 에 마우스 좌 클릭을 하면 문자 쓰기가 시작된다. 문자 쓰기가 완료 되었을 때 ESC 키를 누르면 문자 쓰기 대기 상태로 돌아간다. 
우측 Property Inspector 에서 아래와 같은 다양한 문자 옵션을 조정 할 수 있다.

img_text_01
  • 정렬및 분배 ( 2, 3개의 오브젝트 선택시 ) - 아트보드 상에서는 1개만 선택에서 정렬이 활성화 되는데 이때에는 아트보드가 정렬의 기준이 된다. 
  • 반복 그리드 설정
  • 집합 설정 ( 2개 이상의 오브젝트 선택시 )
  • 크기 조정
  • 위치 조정
  • 각도 조정
  • 좌우, 상하 반전
  • 화면 스크롤시 위치 고정 설정
  • 반응형 디자인을 위한 설정
  • 문자명
  • 문자 사이즈
  • 문자 시리즈
  • 문자 정렬
  • 한줄 쓰기와 여러줄 쓰기의 선택
  • 문자 밑줄 선택
  • 자간, 행간, 단락간 조정
  • 투명도 조정
  • 면의 색 변경 (면 숨김 가능)
  • 외곽선의 색 변경 (선 숨김 가능)
  • 선의 굵기, 점선, 점선일 때 간격 설정
  • 선을 도형 크기의 안쪽, 바깥쪽, 중앙에 그려지도록 설정
  • 선의 캡 설정
  • 선의 모서리의 다른 표현
  • 그림자 설정
  • 배경 흐림 효과 
여러줄 문자 쓰기
img_text_03@2x

여러줄 문자 쓰기를 시작 하려면 단축키 T 를 누르고 난 후 아트보드나 워크 스페이스에 알맞은 공간으로 드래그 하면 된다. 정확한 사이즈는 우측 Property Inspector 에서 조정가능 하니 너무 정확한 사이즈를 드래그 하려 노력 하지 않아도 된다. 

여러줄 쓰기에서 한줄 쓰기로의 전환.
여러줄 쓰기에서 한줄 쓰기로 전환이 가능하고 반대로도 전환 가능하다. 우측 Property Inspector 의 한줄쓰기, 여러줄 쓰기 옵션은 선택하면 된다. 다만, 여러줄 쓰기에서 한줄 쓰기로 전환하고 나면 줄 바꿈이 고정이 되어 버린다. 다시 여러줄 쓰기를 선택 하게 되면 줄 바꿈 부분을 다시 원상 복구 해 주지 않으니 참고 하기를 바란다. 완벽한 줄바꿈 형태가 되었을때 한줄쓰기로 전환하기를 추천한다.

문자의 수정과 조정

문자 수정하기
img_text_04@2x

문자 쓰기를 완료한 문자를 다시 수정하기 위해서는 마우스로 문자를 두번 좌클릭하면 된다. 두번 클릭하는 순간 수정 쓰기 모드로 돌입하는 것이다. 드래그 하여 어러문자를 선택해서 수정 할 수 있고 Cmd + A 의 단축키로 전체를 선택하여 수정 할 수도 있다. 

문자 외모의 수정은 우측 Property Inspector 에서 언제든 가능 한데 문자 전체의 외모를 수정하기 위해서는 ESC 키를 눌러 문자 쓰기 모드에서 나와서 수정할 수 있다. 

핸들을 이용한 문자의 조정
img_text_06

한줄 쓰기의 핸들

img_text_05

여러줄 쓰기의 핸들

문자의 크기를 조정하기 위해서 Property Inspector 에서 정확하게 지정도 가능하지만, 문자의 핸들을 통해서도 조정이 가능하다. 위 그림에서 표현이 되어 있는데 두 그림은 비슷하지만 조금 다른 점이 있다. 첫번째 그림은 줄바꿈이 되어 있는 한줄쓰기 이고 두번째 그림은 여러줄 쓰기 이다. 자세히 보면 두 그림은 핸들의 갯수가 다르다. 한줄 쓰기는 중앙 하단에 핸들이 하나 있고 여러줄 쓰기에는 상하 좌우 8개의 핸들이 존재 한다. 

한줄 쓰기의 핸들
한줄 쓰기에서는 중앙 하단 위치한 한개의 핸들을 이용해 크기 와 각도를 조정할 수 있다. 

  • 문자 크기 크게 : 마우스로 핸들을 잡고 당긴다.
  • 문자 크기 작게 : 마우스로 핸들을 잡고 민다.
  • 문자 각도 설정 : 마우스를 핸들 주변에서 각도조정 표시가 나타날때 클릭한 후 좌, 우로 움직인다.

여러줄 쓰기의 핸들 ( 문자 크기를 조정할 수 없다. )
여러줄 쓰기에는 상하 좌우 의 모든 핸들을 이용해 조정이 가능한데 의미가 조금 다르다. 이 핸들은 문자의 크기를 조정할 수 없고 여러줄 쓰기의 공간의 크기를 조정할 수 있는 개념이다. 문자의 크기는 우측 Property Inspector 에서 조정해야 한다. 각도는 핸들 주변 어느곳에서나 조정이 가능하다.

핸들의 필요성?
우측 Property Inspector 에서 크기 조정이 가능한데 굳이 핸들이 필요할까? 답은 "그렇다" 이다. 디자인을 하다보면 크기의 가늠이 필요할 때가 많다. 그 정확한 수치를 이미 알고 있는 경우는 필요 없겠지만 분명 문자의 크기와 공간에 대한 가늠이 필요하다. 이 핸들로 빠르게 그 것을 가늠해 볼 수 있으니 문자 디자인을 할때 꼭 필요하다.

보조키의 활용
모든 오브젝트들의 크기 조정시 드래그 와 함께 아래와 같은 보조키를 이용할 수 있으니 참고하자.

  • Shift + : 정사이즈로 크기 변환
  • Option(alt) + : 상하, 좌우 대칭으로 크기 변환
  • Shift + Option + : 정 가운데를 중심으로 정사이즈 크기 변환

문자의 변형

문자의 속성 변경 (Cmd + 8)
img_text_07@2x

문자 디자인을 하다보면 문자를 모양으로 만들어야 할 경우가 생긴다. 그럴때에는 Convert to Path 를 해주면 된다. 문자를 선택한 후 메뉴에서 Object>Path>Convert to Path 선택 해 주거나 단축키 Cmd + 8 을 누르면 된다. 

문자의 속성을 모양으로 바꿔야 할 경우?
여러가지 상황이 있겠지만 문자로 된 아이콘, 이미지 등을 SVG 내보내기 할때에는 꼭 속성을 변경해 줘야 한다. SVG 는 문자의 속성을 그대로 담고 있기 때문에 다른 유저가 같은 폰트가 없다면 그 문자는 깨져서 보여지게 될 것이다. 이 점 유의 하자. 

Align to Pixel Grid 의 사용과 유의사항.
문자 쓰기를 할때에 소숫점 이하의 크기표현이나 위치 표현은 지양해야 하므로 문자를 클릭하고 오른쪽 마우스 클릭하여 Align to Pixel Grid 로 픽셀에 맞추어 주는 작업을 하면 소숫점 이하의 표현이 사라진다.
다만, 일반 문자 쓰기 모드일때에는 유용하게 쓰이지만 문자의 속성을 바꾸었을 때 무심코 Align to Pixel Grid 하게 되면 모양이 틀어지거나 이상하게 변하게 된다. 이때에는 크기 조정에서 자물쇠 모양의 Lock Aspect 를 꼭 잠그고 수치를 직접 조정하는 것을 권장한다. 

문자는 디자인와 정보의 전달 모두 가능한 오브젝트이다. 매우 자주 쓰일 수 밖에 없으니 위 내용을 잘 숙지 하고 있으면 좋겠다. 어떻게 쓰고 어떻게 수정 또는 변형 하는지 잘 숙지 하고 있으면 UI 디자인 하는데에 큰 도움을 줄 것이다. 사실 자주 쓸 수 밖에 없기 때문에 가장 빨리 익힐 수 있는 내용중에 하나가 이 문자 쓰기 일 것이다. 

AdobeXD Classes

01 . INTROAdobeXD의 대한 소개

02 . INTERFACEAdobeXD의 인터페이스 소개

03 . ARTBOARDSArtboards 에 대한 이해

04 . PANNING & ZOOMING화면 움직이기와 화면 확대 축소

05 . SHAPES도형 그리기와 활용

06 . TEXT문자 쓰기와 활용

07 . PEN TOOL펜 도구의 이용 및 활용

08 . SELECT MOVE RESIZE오브젝트 선택하기, 움직이기, 크기변경하기

09 . STYLING APPEARANCE오브젝트의 면과 선의 색상, 그림자, 흐림 효과

10 . LAYERS레이어 패널의 사용과 관리

11 . DUPLICATE오브젝트 복제의 여러가지 방법

12 . ALIGN & DISTRIBUTE객체의 정렬과 각 객체들간의 공간 분배

13 . UNION두개 이상 객체의 조합 만들기

14 . GROUPAdobeXD 에서의 그룹의 의미와 활용

15 . SYMBOLS심볼 만들기와 응용

16 . REPEAT GRID반복 그리드 사용법과 활용

17 . MASK마스크의 여러가지 사용법

18 . ASSETS PANEL에셋 패널의 사용법과 활용

logo_basic@2x

Copyright © 2018 AdobeXD.info & Bandy garnet.
All Rights Reserved.

E-mail: bandygarnet@gmail.com
Slack: adobexdclass.slack.com