[나 혼자 ]Adobe xd로 로고 이미지 가져오고 내보내기-jpg, png, svg, pdf

안녕하세요. 웹/앱 개발 전문 회사 샐리입니다.

몇 주 전부터 웹 빌더를 이용해 혼자 웹 제작을 하시는 분들을 위한 콘텐츠를 

샐리 블로그와 홈페이지를 통해서 공유하고 있는데요.


본격적인 컴포넌트 디자인에 앞서서 이미지 형식에 대한 사전 지식을 가지고 있으면 좋을 것 같더라구요.


그래서 준비했습니다!

Adobe xd로 이미지를 가져오고 다양한 이미지 형식으로 내보내는 방법, jpg와 png, 벡터와 비트맵의 차이까지!  

아래 글에서 확인해보세요~




1. xd로 이미지 파일 가져오기

PNG, JPG , GIF 또는 SVG 파일로 저장된 파일을 가져오려면 다음 작업 중 하나를 수행합니다.


- Mac의 경우 XD에서 파일 > 가져오기를 클릭하고 선택할 파일을 검색합니다. Windows의 경우 햄버거 메뉴를 클릭하고 가져오기를 선택합니다.


- 파인더 또는 Windows 파일 탐색기에서 해당 이미지를 드래그 앤 드롭하거나 복사하여 XD에 붙여넣습니다.




2. 이미지 크기 조절

- 원본 비율을 유지하고 싶다면 shift키를 누른 상태로 모서리를 선택해서 크기를 조절합니다.

- 혹은 선택툴로 에셋을 선택한 다음 오른쪽 패널에서 수치(width,height)를 입력합니다.




3. 파일 내보내기

① pc환경에 따라 다음과 같이 수행합니다.

- Mac :오브젝트 또는 아트보드를 선택하고 파일 > 내보내기로 이동하거나 Cmd + E를 누릅니다. 

- Windows : 오브젝트 또는 아트보드를 선택하고 파일 > 내보내기로 이동합니다.  


② 선택됨과 모든 아트보드 내보내기 중 하나를 선택하여 수행합니다.

- 선택됨: 특정 에셋을 선택하고 내보낼 수 있습니다.

- 모든 아트보드: 디자인 프로젝트의 모든 아트보드를 선택하여 내보낼 수 있습니다.






맥의 경우 이렇게 팝업 창(?)이 생깁니다. 여기서 파일이름과 저장 위치, 이미지 형식을 지정해주면 되는데요.

포맷은 4가지 다 자주 사용하는 형식들이기 때문에 사용하는 목적과 사용처에 따라 선택합니다.

이미지 형식별 특징은 다음과 같습니다.





*png, sag, pdf, jpg 이미지 형식의 특징


png: 투명도를 지원해서 웹 환경에 많이 사용

svg : 벡터화된 그래픽 이미지, 확대해도 선명도 유지

pdf : 응용프로그램이나 웹환경에 상관없이 문서와 그래픽을 정확히 보여줌. 디자인 파일 공유에 많이 사용

jpg : 압축해서 크기를 줄이는 방식으로 해상도가 png보다 낮지만 용량이 가벼워 웹 페이지에 사용됨




좀 더 쉬운 비교를 위해 오랜만에 개나소나를 소환해봤습니다!


jpg와 png는 용량과 해상도 차이도 있지만 가장 큰 차이점은 투명도(알파채널)을 지원해주나입니다.


개나소나 캐릭터를 선택해서 내보내기 했더니 jpg는 흰색 배경이 생성되지만 png는 배경없이 개나소나 그래픽만 출력된 것을 확인할 수 있습니다.


즉, png는 홈페이지에 이미지 배경을 투명하게 처리해야 하는 곳에 사용하면 유용합니다.




다음은 벡터와 비트맵의 비교입니다.


svg 형식은 조금 생소할 수 있는데요. 확대한 jpg파일과 비교하면 이해하기 쉽습니다.


svg(벡터)는 픽셀이 아닌 좌표값을 기억하기 때문에 아무리 확대해도 절대 깨지지 않는다는 장점이 있죠.

반면, jpg/png(비트맵) 파일은 시각적으로 봤을 때는 큰 차이가 없어 보여도 확대해보면 모자이크처럼 깨지는 현상이 나타납니다. ( 대표적인 비트맵 프로그램은 포토샵, 벡터 프로그램은 일러스트레이터가 있습니다. )






여러분만의 홈페이지를 만들어보세요.

만약 홈페이지를 제작하는데 전문가의 도움이 필요하다면 웹/앱 개발 전문 회사 샐리가 도와드리겠습니다.

샐리 메일(stelar@sally.company) 혹은 홈페이지 문의를 통해 연락주세요!


135, Jungdae-ro, Songpa-gu, Seoul, Republic of Korea