이전에도 포스팅 했던 것 처럼 스케치라는 프로그램이 출시되면서 이제 UI디자인 트렌드도 워터폴 개발 방법론에서 애자일 개발 방법론으로 많이 따라가고 있는 추세입니다.
이전 포스팅 참조 : UI디자인 개발 트렌드의 변화
그래서 이번에는 기존에 UI디자인 툴로 많이 사용했던 Adobe 포토샵과 최근에 많이 사용하고 있는 UI디자인 전용 툴인 Adobe XD의 차이점을 제가 아는 한도 내에서 정리를 해 볼까 합니다.
포토샵은 비트맵 이미지를 다루고 XD은 벡터 이미지를 다룹니다.
포토샵은 기본적으로 비트맵 이미지를 다루지만 XD는 벡터 이미지 방식을 사용합니다. 비트맵 이미지의 경우 픽셀에 대한 이미지 색상정보를 저장했다가 보여주는 방식인 반면에 백터 이미지 방식은 이미지의 지점 정보와 계산식으로 이미지를 저장하고 처리하는 방식입니다. 그래서 비트맵은 이미지 사이즈가 커지면 파일의 용량도 상대적으로 증가를 하게 됩니다. 하지만 벡터이미지 방식은 이미지 사이즈가 커지든 작아지든 동일한 파일용량을 가지게 됩니다.
비트맵 이미지 특징
- 확대/축소 시 해상도에 따라 화면이 모자이크 처럼 깨질 수 있음
- 이미지가 커질 수록 파일용량도 커짐
- 주로 사진을 다루는데 이용
- 디테일한 이미지 효과를 표현하는데 최적화되어 있음
벡터이미지 특징
- 확대/축소 시 해상도와 무관하게 화면이 깨지지 않음
- 이미지가 커져도 파일용량은 동일함
- 주로 일러스트를 다루는데 이용
- 디테일한 이미지 효과를 표현하는데 어려움
포토샵은 범용적인 디자인 툴이고 XD는 UX/UI 디자인에 특화된 툴입니다.
웹/모바일 UI디자인이 나오기도 전부터 포토샵은 존재하고 있었음으로 당연히 포토샵이 웹/모바일 UI디자인을 위한 툴은 아닙니다. 초창기 그래픽디자인이나 편집디자인을 하던 웹/모바일 UI디자이너 들이 화면 디자인을 하기 위해 적당한 툴을 찾다가 기존부터 익숙했던 포토샵으로 디자인을 하기 시작했던 것 뿐입니다.
하지만 Adobe XD는 오로지 UI디자인을 하기 위해 개발한 것으로, 작은 프로그램 크기, 작은 디자인 파일 크기, 파일 하나에 다중 페이지 생성, 다양하고 편리한 플러그인들 등등.. UI디자인을 하기에 최적화된 형태를 가지고 있습니다.
Adobe 포토샵
- 포토샵은 사진, 인테리어, 영화, 광고 포스터, 그래픽디자인, 제품 디자인 등 다양한 방면에서 사용되고 있습니다.
Adobe XD
- XD는 오직 모바일/웹의 UI화면 디자인에 특화되어 사용되고 있습니다.
포토샵은 하나의 파일에 하나의 화면만 담을 수 있고 XD는 하나의 파일에 여러 화면을 담을 수 있습니다.
기존에는 파일 하나에 화면 하나는 지극히 당연한 것이라 생각했습니다. 하지만 이런 고정관념을 보헤미안의 스케치라는 디자인 툴이 깨버렸습니다. 그리고 XD도 스케치를 따라 파일 하나에 여러 화면을 담을 수 있게 하였습니다. 저는 개인적으로 이부분이 스케치나 XD가 UI디자인 툴로써 자리 잡은 큰 이유라 생각합니다.
이전부터 계속 포토샵 말고 UI디자인 전용툴을 개발하기 위해 많은 회사들이 여러가지 툴을 개발했지만 대부분 실패를 했습니다. 대표적으로 Adobe에서 이미지레디라는 툴도 출시를 했었고 매크로미디어를 인수해서 파이어웍 이라는 툴도 자기네 이름으로 출시를 했습니다만 계속해서 실패를 거듭해 왔었습니다.
이미지레디도 파이어웍도 XD와 마찮가지로 벡터방식을 사용했었고, 에니메이션, 포토샵 연동 등 다양한 기능으로 메리트가 있었음에도 불구하고 하나의 파일에 하나의 화면이라는 고정관념을 깨지 못해서 역사 속으로 사라지지 않았나 하는 것이 저의 생각입니다. 그만큼 하나의 파일에 여러 화면을 담을 수 있는 기능은 너무나 편리하고 좋은 기능입니다.
Adobe 포토샵
- 하나의 파일에 하나의 이미지만 담을 수 있음
- 웹사이트 전체를 디자인 할 경우 수십 장의 PSD파일이 생성됨
jalique 님께서 수정부분을 찾아 주셨어요 ^^ 감사합니다.
Adobe XD
- 아트보드 기능을 활용하여 하나의 파일에 여러 개의 화면을 담을 수 있음
- 웹사이트 전체를 디자인 하는 경우도 하나의 XD파일에 모든 화면을 담을 수 있음
포토샵과 XD의 차이점을 비교해 봤습니다.
다음번에는 Adobe XD와 보헤미안 스케치에 대해서 비교해 보도록 하겠습니다.
