본문 바로가기

adobe xd

Adobe 구독 해지 '1 Step' 최근 Adobe 구독을 해지했습니다. 안타깝게도 이직 후에 XD를 쓸 일이 없었고, 직업 특성상 클라이언트 사의 툴을 사용해야 한다는 점과, 맡은 업무가 디자인툴을 다루기는 어려다는 점도 있었는데, 최근 Adobe XD 포트폴리오 링크가 깨져서 들어가보니 프로토타이핑 연결한 것들도 다 풀려있어 살짝 망신살이 뻗친게 크기는 했습니다. 분명히 Adobe의 기술은 대단하다고 생각하고 생각합니다만, Figma의 점유율도 높고, (그래서 결국 Adobe에서 인수를 하고), xd의 경우 이제 추가 개선은 또 없다고 하니, 뭔가 더 기대를 하고 사용하기도 불편해졌죠. 그래서 추후 다시 Adobe의 툴을 사용할 일이 있을때까지는 구독을 해지하기로 했습니다. 서론이 길었네요. 잠정적으로 마지막이 될 Adobe 구독해지는.. 더보기
[Adobe XD 기초]출력되는 화면 크기로 미리보기 'ctrl+enter' 제작한 화면 구성을 공유하기 전에, 만든 화면의 해상도가 의도한 바와 같이 출력되는지 확인을 할 필요가 있죠. 보기에 좋은 그림을 그렸다고 해도, 실제 전달하게 되는 해상도 기준에서 안맞게 나올 수도 있고, 비율이 달라지는 경우도 있을 수 있어요. 먼저 기준 해상도가 정해졌으면, 기준 해상도에 맞게 화면을 갖춰보고 작성된 작업물이 실제 단말기에서 출력되는걸 확인해보고 싶을 때에는, 작성된 파일의 아트보드 선택 후 control + enter 를 눌러줍니다. 같은 방법으로 다양한 해상도, 배율 기준의 아트보드 내에서 화면 확인을 해보면, 의도한 그림대로 나오는지 확인을 하고, 전달이 가능하니까, 꽤 유용해요. 실은 누군가에게 전해주고 싶은데, 전해줄 수가 없어서, 혹 검색하다가 찾아서 보라고 적어봅니다. .. 더보기
[Adobe XD 기초] 색상 관련 extension Adobe XD 는 다양한 플러그인을 지원합니다. 직접 만들어서 올릴 수도 있고, 또 올렸다가 업데이트가 안되서 사양되는 경우도 있기는 해요. 와이어프레임을 그릴때나, 혹은 색감을 바꿀때 adobe color를 이용해서 정해나가는 방법도 있지만, 색상이 이미 정해진 상용서비스같이 다른 색을 적용하기 어려운 환경이라면... 기존 색상을 이용해서 유사한 색상을 찾아보기도 합니다. 그래서 XD에서 지원하는 색상관련 Palette 플러그인을 몇개 둘러봤어요. material palette, Material Color Paletts, color designer, Create Color Palettes 이렇게 네 종류를 둘러봤어요. 일단 평으로는 material palette '단순 material palette .. 더보기
[Adobe XD 기초] 그럴싸한 모바일 앱 페이지 만들기 1 이번에는 지난번에 이어, 도형들과 제공되는 에셋을 이용해 그럴싸한 모바일 페이지를 만들어 보려고 해요. 우선은 모바일웹인지, 앱인지, 또 더 웹화면의 해상도는 얼마나 줄건지, 앱의 os는 어떤건지 살펴두고 그에 맞게 제작하면 좋은데, 안드로이드의 경우 360x640 해상도의 사용자가 많이 있고, iOS의 경우 이거랑 해상도 비율이 달라서, 만약 같은 종횡비의 이미지를 추출해서 주게되면, 개발자들이 그렇게 달가워하지는 않을거에요. :) 먼저, 지난번 에셋을 하나 열어서 하나씩 바꿔나가볼게요. 파일을 열고, 아트보드 하나를 만들게요. 단축키는 window 기준 a 입니다. 만든 아트보드에, 기본적인 틀을 먼저 넣을거에요. 보통 처음 진입하게 되는 화면, 'splash'의 경우는 화면 구성이랑은 조금 다른 얘.. 더보기
[Adobe XD 기초] 제작한 파일 내보내기 XD 에서 제작한 파일은 기본적으로 Shift + Ctrl + E ( 선택한 아트보드 전체 내보내기 ) 또는 Ctrl + E ( 선택한 아트보드 내보내기 ) 또는 모든 아트보드 내보내기 (별도 선택) 으로 오프라인 상에서 내보내기가 가능하며, 내보내기의 방식은 PNG, SVG, PDF, JPG 포맷과 대상으로는 디자인, 웹, iOS, Android 그리고 선택한 내보내기 방식 및 대상에 따라 디자인작업사양이 1배수 (1x) 부터 3배수, 또는 ldpi부터 xxxhdpi 와 같이 내보내기가 가능합니다. 이렇게 쓰면 이해가 어렵지않을까.. 싶은데 창은 의외로 간단합니다. 이전에 포스팅한 UI KIT 중에서 아트보드 하나를 추출해보면서 살펴보도록 하죠. [Adobe XD] 기초. UI Kit 둘러보기 [Ado.. 더보기
[Adobe XD] 기초. UI Kit 둘러보기 최근 일이 너무 많아서 업로드를 해야지.. 해놓고 업로드 할 거리들을 제목창에 정리만 하고 있었다. 우선 'Adobe XD 관련해서 어떤 주제로 어떻게 포스팅을 진행할까' 라는 고민을 하다가, 처음 사용하는 분들에게 하나씩 하나씩 같이 진행하는 방향, 조금 사용해보신 분들께는 일종의 팁같은걸 공유해보는 방향으로 하려고, 기초, 응용으로 주제에 달아서 진행을 해보려고 한다. 그렇게 어렵게 느껴지지는 않아도 알면 알수록 늘어나고, (이젠 업데이트 속도를 못따라가겠다..) 쓰면 쓸수록 유용한 Adobe XD 조금 더 공유를 해보면서 학습해보려고 한다. 힘내자, 나도, 방문해서 이걸 보고 계신 님도. 이번에 공유하고자 하는 내용, ui kit 처음 뭔가를 그리려고 할 때 정신없이 그리면 빠르고, 편할 수 있는데.. 더보기
[Adobe XD 기초] 원하는 크기로 많은 이미지 한꺼번에 넣어보기 'Repeat Grid' 스크린샷 이미지나 다른 이미지 파일을 xd에 불러오는 여러가지 방법이 있다. 이미지가 있는 폴더를 열어서 drag, drop 을 하면 불러올 수 있다. 아니면, 복붙 'ctrl+c, ctrl+v' 애플에서 제공하고 있는 디자인 가이드를 가지고 실행해보자. 구글의 material IO, 애플 guide는 각 사이트에서 무료로 받을 수 있다는 장점도 있지만, 안지키면 여러모로 귀찮아진다. 1. 이미지 삽입 하기 첫번째 'ctrl+c', 'print screenshot', 다음 'ctrl+v' 또는 이미지파일 drag and drop (주의 png, svg, jpg등 왠만해서는 다 된다. ai는 안된다. 굳이 가서 변경해주는 수고는 좀 필요하다) 2. 원하는 크기에 맞춰서 이미지 여러개 불러오기 그럼 이제 여.. 더보기
Adobe XD Flowchart template 조금전 공유올린 pptx 파일과 같이, 어쩌다보니 XD라는 프로그램과 너무 오래 지낸 것 같다. 1920 x 1080 화면 아트보드 별도로 진지하게 줄맞추지는 않았고, 그냥 얼추 pptx 의 안내화면과 비슷하게 맞춘뒤 설명을 붙여두었다. 사용할때에는 복사 붙여넣기, alt를 이용한 drag and drop 도 유용하지만, control+shift+y를 누르면 각 구성요소의 이름이 적혀있으니, 그걸 끌어다 쓰는편이 손쉬울 것. 배경을 지우지 않은 이유는, 선만 있으면 여기저기 끌어다 놓기 불편하니까... 구독하고 있는 프로그램이라, 최대한 유용하게 써먹어야지.. 하다가 결국 몇해째 이녀석 노예가 된 것 같다. 그걸 좀 뽑아야 할 건데... 더보기