#8 제플린 사용법은 이걸로 끝 - 어도비 XD 강좌
HTML-код
- Опубликовано: 21 сен 2024
- 어도비 XD 여덟 번째 강좌입니다. 이번 강좌에서는 XD에서 제플린을 사용하는 방법을 배워보겠습니다. 예전에 스케치에서 제플린 사용법을 배워봤는데 이번에는 XD! 사용시 주의해야 할 부분은 딱 두가지 입니다.
크기나 간격 등의 수치가 정수로 떨어지게 조정해야하는 것과 아이콘 같이 벡터로 내보내야 하는 경우는 XD 상에서 내보내기를 활성화시켜줘야 합니다.
제플린을 왜 사용해야 하는지부터 소개 후 자세한 제플린 사용법을 알아보도록 할게요.
#디자인강좌
#제플린
Zeplin - zeplin.io/
🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟
🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요 🚀
┗ / @designbase
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 어도비XD의 첫단추는 디자인베이스에서 시작하세요. XD를 통해 손쉽게 UI 디자인 작업을 할 수 있습니다. : )
☞ 디자인베이스 소개 : designbase.co.k...
☞ 공식 웹사이트 : designbase.co.kr/
*BGM 사용 출처
Track: Syn Cole - Gizmo [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • Syn Cole - Gizmo | Hou...
Free Download / Stream: ncs.io/Gizmo
Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • NIVIRO ft. PollyAnna -...
Free Download / Stream: ncs.io/FastLaneYO
급한 분들은 아래 부터 시청하세요😊
제플린 사용 방법 03:40
ㅋㅋㅋㅋ대화활용 예시부분에서 빵터졌네요 영상 잘봤습니다
완전 꿀팁입니다 ㅎㅎ 어딜가도 쉽게 접할수없는 실무 제플린... 오늘도 잘 배워갑니다.
감사합니다 :!
업무에 도움이 많이 되용 설명도 포인트만 찝어주셔서 너무 좋네용 감사해용 ㅎ--ㅎ
감사합니다👍👍
디자인베이스님은 신이에여.. 구원의 신 ㅠㅡㅠ
감사합니다ㅎㅎ
너무 잘 보고 있습니다! 설명도 깔끔하게 포인트를 잘 찝어주셔서 감사해요 :)
감사합니다🙌👍
딱 필요한 내용만 있고 설명도 잘해주셔서 너무 좋아요.. 크게되실거에요.. 감사합니다
감사합니다 : ) 크게 되고싶네요 ㅎㅎ
디베님! 클래스 장난 아닙니다! 탄탄하게 기초부터 실무적인 개념까지 ... 늘 업무적 영감을 얻어 가네요! 감사합니닷
감사합니다ㅎㅎ☺️☺️👍
어쩜 이렇게 설명을 잘하세요~~~너무 도움이 됩니다.. 바보 디자이너 구원해주셔서 감사합니다.ㅠㅠ
현예련 감사합니다ㅎㅎ🙌
XD너무 배우고 싶었는데 이렇게 깔꼼하게!! 예쁘게!! 재미지게!! 유용하게!! 영상 만들어주셔서 감사합니다ㅠㅠㅠ
감사합니다~!ㅎㅎ👍👍
스케치하다가 엑스디다시 공부중 좋은 강의 감사합니다~ 자주 올려주세횸~~
넵 :) ㅎㅎ
감사합니다. 저같은 무지랭이들을 위해서 이건 당연히 알겠지 싶은 내용들도 새로운 강좌 부탁드립니다.
제발~~~ 현기증 난단 말이에요~~~~~
넵! 감사합니다ㅎㅎ
와우, 짧게 핵심만! 너무 좋은 강좌입니다.
감사합니다ㅎㅎ👍
혼자서 페이지 만들어보려고 했는데 xd강좌 찾던중에 이렇게 딱 만들어주셔서 너무 도움됐습니다 감사합니다!!
도움되셨다니 다행이네요👍👍감사합니다ㅎㅎ
항상잘보고있습니다^^~ 화이팅이요 선생님넘잘생긴듯요..😤
감사합니다 승준님ㅋㅋ👍👍
xd 사용중인데 제플린 이용하면 마크업하는데 훨씬 편리하겠네요!! 영상 감사합니다
그쵸ㅎㅎ좋은 핸드오프툴이죠👍
뭐랰ㅋㅋㅋ에서 엄청 웃었네요ㅋㅋㅋㅋㅋ🤣
ㅋㅋㅋㅋ깨알...😗
영상 잘 봤습니다! 아직 제플린을 써보진 않았는데, 현재 피그마의 inspect와 제플린 주요기능들과 차이점을 잘 모르겠는데 제플린을 반드시 꼭 사용해야만 하는 특별한 기능들이 있나요?
안녕하세요. 요즘 피그마나 xd에서도 inspect기능을 제공하는데 제플린과 크게 사용방법이 다르지는 않습니다. 제플린을 꼭 써야하는 것은 아니고, 실무에서 제플린이 좋았던 점은 프로젝트, 섹션, 페이지 단위로 나눠서 관리가 가능합니다. 타부서와 협업할 때 히스토리가 잘 남아서 개발자 입장에서 필요한 화면만 확인하면 되는 것입니다. 피그마로 한다면 어떤 부분이 완성인지, 아니면 실제 작업하고 있는 화면 내에서 특정 페이지를 개발자가 들어와서 확인하면서 픽스된 디자인이 아닌 것을 코드로 짠다던가 하는 상황이 발생할 수 있어서 협업 프로세스를 잘 잡지 않으면 제플린이 더 낫습니다.
도움이 많이 되었습니다 감사합니다!^^
댓글 감사합니다👍
너무 이해가 잘되는 구성과 설명과 톤 감사합니다 그런데 혹시 그림자가 들어간 것들은 어떻게 써야 하나요?!?
감사합니다~! 그림자가 들어간것들이라는게 어떤걸까여?
너무나도 좋은 강의들
감사합니다😊
이미지들이 여러 레이어로 겹쳐져있는데 다중선택으로 그룹화하거나 한번에 다운받는 방법이 있나요..? 아무리 찾아도 모르겠어요 ㅠㅠ
영상 정말 도움됩니다. 구독했어요!!^^
혹시 원하시는게 여러 레이어를 하나의 그룹으로 묶어서 그 그룹통으로 하나의 이미지로 출력하고싶은건가요? 아니면 여러 이미지를 동시에 잡아서 한번에 각각 파일로 다운받고싶으신건가요?
@@designbase 여러 레이어를 하나의 그룹으로 묶어서 통으로 합쳐진 이미지를 추출하고 싶습니다. 예를들면 “원 안의 원” 이미지를 바깥원과 안쪽원을 묶어서 “원 두개가 곂쳐진” 한개의 이미지를 추출하고자 합니다.
답변 감사드립니다^^
넘나 좋네여!
좋죠!ㅎㅎ
강의내용은 훌륭합니다. xd 플러그인에는 제플린이 들어있는데 내보내기에는 제플린이 없는데 이유가 무엇인지요
설치를 했는데도 내보내기에 제플린이 없나요?? XD툴을 껐다 켜봐도 그런가요?
덕분에 adobe xd 생초보로 시작해서 디자인까지 했는데 제플린에서 막혀서 문의 드려요~!
제플린으로 익스포트 했지만 영상 5:06분 에 나오는 "select a project or styleguide" 로 다음단계로 안넘어가는 현상이 있어서요
컴터도 껏다 켜보고 하는데 계속 대쉬보드(4:30초)에서 깜깜 무소식입니다.. 왜그런걸까요?
도와주세요 ㅠㅠ
음... 왜 안넘어가질까요?!ㅠㅠ 제플린, xd 둘다 최신버전으로 설치된게 맞을까요??
02:31 지점에서 제플린 영상을 보라고 하셨는데, 혹시 올려주신 영상이 있나요?
영상이라는건 웹사이트 내에 제플린에서 제공한 영상입니다~!
안녕하세요~~ 강의 너무 잘 봤습니다!!
질문이 있어서 문의드려요~~~
버튼의 경우는 상태가 3가지 정도 나오는데... 제플린에서 반영되게 할려면 XD에서 어떻게 설정해야되나요?
상태 여러가지를 한번에 별도로 올리는 기능은 없고, 세가지 상태를 아트보드 하나에 정리해서 올리는 방법이 있습니다. 아니면, 제플린에 올라간 아트보드를 하나로 합치면 하나의 디자인에 여러가지 상황이 등록 가능합니다.
@@designbase 감사합니다~~~ 그리고 혹시 XD에서 와콤타블렛을 사용하면 손바닥모양이 적용이 안되는데.. 혹시 적용되게 할려면 어떻게 해야되는지 아시는지요 ㅠㅠ 어도비쪽에도 문의했었는데 드라이브 업뎃하라고 하셔서 최신으로 다했는데도 안되서요 ㅠㅠ 디자인베이스님은 혹시 아실까해서 문의드립니다~~~
08:02 지점에 관한 질문입니다. 저는 제플린 3.26 버전을 사용합니다. 저는 제플린 iOS에서 오른쪽 메뉴에 PDF와 SVG 모두 나타납니다. 영상에서는 SVG는 안드로이드에 쓴다고 하셨는데, iOS에 나타나는 이유가 있을까요?
제플린에서 프로젝트 생성시에 iOS로 선택한게 맞을까요? 웹으로 생성하신것 같아요
04:24 지점에서 아이폰 사이즈로 작업을 하셔서 iOS 옵션으로 선택하셨다고 하셨습니다. 만일 안드로이드 옵션을 선택하면 어떻게 되나요? 제가 여쭙는 이유는, 보통 XD는 하나의 사이즈로 작업하지 않나요 (여기서는 아이폰 사이즈)? 아니면, XD에서 다양한 사이즈에 대해 여러개 화일을 만들어야 하나요?
안드로이드로 작업하셨으면 안드로이드로 선택하셔야됩니다. 그래야 그것에 맞게 가이드라인이 올라가요. 개발하는 플랫폼의 범위에 따라 다르겠죠? 해당 회사에서 iOS개발도 진행한다고 하면 디자이너가 당연히 iOS버전도 작업해야됩니다.
설치가 안되는데 어디를 봐야하나요
선생님 2배수로 작업을 한다면 간격 같은 치수에서 홀수가 아예 없도록 해야 개발이 되나요?? 아니면 2배수 디자인에서도 홀수를 쓸수 있나요?
만약 전자가 맞다면 그 이유는 1배수로 만들었을때 소수점이 나오기 때문인가요?
2배수로 작업하는 이유는 비트맵기반의 이미지 작업 때문일텐데, 그게 아니라면 1배수로 작업하는게 올바른 작업 방식입니다 :) 포토샵같은 비트맵 기반의 툴로 UI 작업을 할 경우 xxxhdpi 기준으로 제작하면 4배수를 해야하기 때문에 고해상도에 맞게 제작후 축소한다고 했을때 소수점처리가 안되도록 4배수로 치수를 잡고 제작해야합니다. 그 이유는 iOS는 pt, AOS는 dp라는 상대값을 이용하기 때문입니다~!
넘모 넘모 넘모 넘모 🤜🤛👊👊
ㅎㅎ👊👊
안녕하세요! 궁금한게있어요! 웹작업후 마우스오버시 버튼의컬러가 변한다거나 하는 기능은 개발자분께따로공유드리는건가요?
네 그런 엘리먼트에 대해서는 따로 만들어서 전달드려야됩니다ㅎㅎ
보통 xd에서 작업하면 1배율로 작업하고 이미지를 전달할때 xxxhdpi처럼 4배수로 전달하는 편입니다. 그런데 제플린에 내보낼때도 4배율로 내보내야 하는 것이 아닌 지 궁금합니다!
보통 운영성 업무에 속하는 이미지는 제플린으로 보내지않고 어드민에서 업로드할수있게 담당자에게 전달하죠~! GUI의 일부 요소로 그래픽적인 요소가 들어가는거라면 별도로 4배크기 아트보드 만들어서 제플린에 올리는것도 방법이에요.
안녕하세요. 영상 잘 봤습니다! 혹시 제플린을 다운받았는데 xd에서 연동 키가 아예 안뜨는 경우에는 어떻게 하나요? 단축키도 안되고 계속 다시 깔아도 안되네요ㅜㅜ
아 그런가요..?ㅠㅠ 그런경우는 못봐서.. 혹시 xd가 최신버전이 맞아요??
안녕하세요. 웹 ui 디자인과 여러 실용적인 프로그램을 배우고 싶어 디자인 베이스 채널을 구독하고 시청하며 배우고 있습니다. 기본적인 ui 디자인은 어도비 프로그램들 사용으로 어도비 xd를 사용하고 있습니다.
다름이 아니라 어떠한 원리로 웹사이트가 결과로 나오는지 궁금하여 댓글을 남깁니다.
ui 디자이너가 ui 디자인을 제작 후 개발자에게 넘어가게 되면, 개발자는 그 디자인을 호스팅하는 채널에 적용하여 웹사이트를 생성하는 것인지, 혹은 ui디자인은 이렇게 만들어 달라는 전체적인 스케치로서 참고로 사용하고 개발자가 백지 상태에서 ui 디자인 그대로 따라 만들어 웹사이트를 생성하는 것인가요?
개인적인 포트폴리오와 ecommerce 웹사이트를 제작할 예정인 예술 대학생이어서 웹사이트 디자인부터 개발까지 그리고 호스팅까지 이루어지는지 궁금하여 댓글을 남깁니다.
감사합니다.
안녕하세요! 웹사이트같은 경우는 디자이너가 디자인을 한 이후에 개발자가 백지상태에서 코드로 하나하나 구현하는 것이 일반적인 방법이에요.
개발을 모르는 상태에서 사이트를 만드는 방법은 윅스나 스퀘어스페이스 같이 해당 기능을 제공하는 플랫폼을 사용하는게 가장 빠릅니다. 대신 이용료가 기본적인 호스팅업체에 서버를 빌리는것보다 비용이 조금더 나가요~! 워드프레스 유료 테마를 사는 방법도 있고, 쇼핑몰은 카페24 스킨을 구매하는 방법도 있어요
@@designbase 답변 남겨주셔서 감사합니다. 응어리 같았던 궁금증이 이렇게 시원하게 해결이 되었네요. 디자인 베이스를 웹사이트를 통해 먼저 알게되다가 유튜브로도 잘 시청하고 있습니다.
항상 질 높고 구체적으로 잘 설명해주시는 영상 덕에 저 이외에도 많은 사람들이 유익하게 배우고 있어요. 고맙습니다.
구독자가 얼른 많아지길 소망합니다~
제플린은 영문화버전바께 없나요??
네 해외 서비스라서 그런것 같아요ㅠㅠ
현재 제플린이랑 xd 연동 되어있는데 포토샵을 추가로 연동 가능한가요?
포토샵에서는 제플린을 사용 안해봐서 두개가 동시에 연동될지는 모르겠습니다.. 아마 안되지 않을까 싶네요 ㅠㅠ
그림자가 들어간 네모를 다운받으면 이미지는 그림자가 들어간 이미지로 나오지만 제플린에서 값은 그림자 없는 네모의 위치만 잡는데 .. 이때 개발자와 공유를 어떻게 해야할지.. 궁금합니다!
질문을 완벽히 이해를 못했는데.. 스케치상에서 그림자를 만들었으면 제플린에서 개발가능한 수치로 나옵니다~!
안녕하세요, 알려주신대로 내보내기하면 제플린에서 프로젝트 선택 항목이 안뜨고 그냥 제플린 화면 나와요. 이럴땐 어떡하죠??
음….XD랑 제플린 둘다 최신버전이 맞을까요??
저 혹시... xd, 제플린 다 깔려있는데 xd에서 내보내기하면 export 클릭하는 화면이 떠야하는데 그 화면이 안떠서요... 왜 그런지 아시나요...??
오류에 대해서는 모르겠네요..ㅠㅠ
공부하기!!!!!
열공👊
안녕하세요 png파일과 혹시 jpg 로 나타나게 하는 방법이 있나요? Png는 나오는데 jpg는 잘 안나오네요
질문은 잘 이해하지 못했어요ㅠㅠ jpg파일을 불러오면 안나오는건가요?
@@designbase xd에서 작업한 이미지를 제플린에서 개발자가 jpg로 다운받고 싶어하는데 png밖에 안나와서요 혹시 jpg도 나오는 방법이 있는지 여쭤본거에요
@@nkssi8658 아 제플린에서 jpg로 다운받는건 제공을 안하네요.
질문이있어요~! 375로작업했는데 개발자가
1125×2436로 해달라는데 x3으로 내보내면되는거죠????
제플린으로 공유하면 그렇게 할필요는 없는데 시안 자체를 3배로 달라는건가요 아니면 에셋만 3배로 뽑아달라는건가요?
@@designbase 시안자체용ㅠ
음 그렇게 작업할 필요가 있나 싶네요..😭 이미지를 제외하고는 벡터기반이라서 1배로 제작하는게 더 좋긴한데..😢
@@designbase 그렇지요ㅜ 1배수로 작업하고 3배수로 내보내야겠네요ㅠ
안녕하세요~ 혹시 아이폰규격으로 할때 아이폰 디스플레이 모양?? 디스플레이 가이드라인??은 어떻게 만드는 건가요...?ㅠ
정예린 디스플레이 모양이라는게 어떤걸 말씀하시는건가요??
@@designbase xd로 아이폰x 규격으로 디자인할려고 하면 그냥 아이폰 x크기의 네모난 아트박스만 나오는데, 다른 xd쓰시는 분들은 아트박스안에 아이폰 디스플레이 모양이 있으시더라구요..!!
@@designbase ruclips.net/video/viIAYxz346w/видео.html 이 영상의 썸네일 부분을 보시면 아이폰 x의 디스플레이 모양을 만들어서 핑크색으로 채우셨는데 이걸 어떻게 하는지 모르겠어요..ㅠ
아 그건 UI키트를 받아서 작업하시면 됩니다ㅎㅎ 상단 메뉴바에서 파일 > UI 키트 받기 > Apple iOS 들어가서 설치하고 열어보면 안에 있습니다
@@designbase 너무 감사합니다!!! 앱/웹 디자이너 준비중인데 많은 도움이 되고 힘이 되요 ㅎㅎ 감사합니다~!!
xd를 아는 코더분한테 375로 작업해도되냐고 했을때 그냥 750으로 작업해달라고 하는데 그 이유가 뭘까요? 그분은 깨지는경우가 있다고 750으로 작업해달라고 하시는데 이해가 안되서욤.....
375로 해도 코드로 구현되는 영역은 깨지지 않습니다. 하지만, 배너 이미지와 같은 비트맵 기반의 그래픽은 고해상도로 작업하는게 좋습니다.
@@designbase 답변감사합니당
내보내기 후 중간에 나오는 Export 창은 왜 안뜨는 걸까요?ㅠㅠ아무리해봐도 저 창은 없이 바로 프로젝트 방만 뜹니다...도와주세요ㅠ
Export할 아트보드를 선택하고 눌러도 창이 안뜨나요??ㅠㅠ 프로젝트 방이 뭔지는 모르겠지만.. 프로젝트를 우선 만들어주시고 xd에서 내보내기를 눌러서 좀 전에 만든 프로젝트를 선택해주세면 되는건데 그 화면이 안뜬다는건가요??
@@designbase 네ㅜ웹에서는 되는데 맥북에서는 안되네요..위에말씀대로 다 한거 맞는데 맥에서는 창이 안떠여ㅠ 여튼 답변 감사합니당^^
이상하네요ㅠㅠ😭
이렇게 만든다음에 웹사이트로 어떻게 연결하나요? 도메인 같은건 다 있습니다.
웹사이트로 만들기위해서는 웹 개발 관련된 코드로 구현을 해야합니다.ㅎㅎ 디자인한걸로는 도메인이 있다고해도 웹사이트에 연결할 수 없습니다.