본문 바로가기

기획/Adobe XD

[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 뭐 딱히 한건 없는것 같다 싶어도, 사실 이제 뭐든 그리실 수 있으실거에요. 우리는 도형을 그릴 수 있고, 글자를 쓸 수 있고, 그려놓은 것들을 패스로 변환하는 방법도, 불투명도를 이용하는 방법도, 기본적으로 주어지는 에셋을 이용해서 와이어프레임을 구성하는 것도 해보았습니다. 이제 딱히 할게 없어졌는데, 오늘은 xd를 이용해서 서비스 화면을 바꾸는걸 살짝 선보여드리려고 해요. 먼저 대상화면을 녹화해서 사진을 추출하는데, 그건 넘어가고요. 화면의 해상도만한 아트보드를 만들어줍니다. 일단 상용서비스를 보여드릴 수는 없으니, 잠시 작업을 할게요.:) 이 서비스에서 제공하고 있는 중점적인 기능, 서비스에서 제공하고 싶은 중심기능은 하단에 포진되어 있어요. 사용자입장에서 화면에 접근해서 해당 중심기능을 활용하는데.. 더보기
1. HTML 데스크탑 모양 만들어보기 이번에는 데스크탑과 모바일 화면모양을 Adobe 와 Windows에서 기본제공하고 있는 에셋을 이용해서 간단히 작성해보겠습니다. (실은 너무 쉽기도 하면서 어렵기도 해요.) 대강 이렇게, 이렇게 생긴거, 하면서 그림만 그리면, 은근히 쉬운것도 같지만, 데스크탑웹, 모바일웹도 모바일 앱과 마찬가지로 각자의 이름을 가지고 있습니다. 그 이름을 다 기억하기에는 조금 어려울 수 있는데, xd에서 제공하고 있는 에셋을 활용해서 어느정도 부족한 점도 채워줄 수 있어요. 그럼 바로 시작해보겠습니다. 준비물은 Adobe XD에서 제공해주고 있는 Microsoft Windows kit 같은거.. 편하게 쓰시면 됩니다. 이번에 강조드리고 싶은건 사실 그림이 아니거든요. 먼저 아트보드 하나를 만들어줍니다. 아트보드 단축키 .. 더보기
2. HTML 모바일 모양 만들어보기 1. HTML 데스크탑 모양 만들어보기 1. HTML 데스크탑 모양 만들어보기 이번에는 데스크탑과 모바일 화면모양을 Adobe 와 Windows에서 기본제공하고 있는 에셋을 이용해서 간단히 작성해보겠습니다. (실은 너무 쉽기도 하면서 어렵기도 해요.) 대강 이렇게, 이렇게 생긴� jaehyunshin.tistory.com 요즈음 추세는 데스크탑이 아닌 모바일 우선이죠. 구글의 search console에서도 모바일 최적화 여부를 우선하고 있기도 합니다. 워낙 모바일 기기를 많이 사용하게 되니까, 지금 저처럼 컴퓨터 앞에 앉아서 작업하는 사람이 많이 주의를 기울여야 할 부분인 것도 같습니다. 앞서 보셨던 데스크탑 화면의 구성은 아래와 같습니다. 마찬가지로 이번에도 한 두어개 집어넣어볼겁니다. 우선은 아트보.. 더보기
[Adobe XD 활용] 플러그인 1.Zeplin XD를 이용한 이미지파일의 추출이나 다른 포맷으로의 내보내기가 굉장히 다양한 편이고, 최근에는 flutter 파일로도 나가기도 하지만, 기본적인 구성 및 프로토타입 또는 작업 진행하는데 기준을 잡고 작업, 변경적용하는데에는 제플린이라는 플러그인이 굉장히 유용합니다. 기본적으로 한개 프로젝트를 생성하는데에는 무료고, 세가지 이상 생성하기 위해서는 비용을 지불해야 하지만, |자세한 설명은 생략합니다.| 제플린으로 내보내기를 하게되면 생기게되는 장점으로는 1. 이미지 작업에 있어 굉장히 수월하다 - 이미지 작업을 해놓고, 수정을 필요로 하는 경우 해당 이미지에 대한 수정 후 다시 내보내기를 하면, 이미지가 변경됩니다. 2. 개발자와의 작업에서 굳이 메일을 보내줄 필요가 줄어든다. - 프로젝트의 설정에 따라 D.. 더보기
[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.. 더보기

티스토리툴바