01_Adobe XD_인터페이스 살펴보기

툴 브레이커Tool breaker

툴 브레이커Tool breaker

아래 링크에서 Adobe XD를 다운로드 하여 설치하고 인터페이스를 살펴 봅니다. https://www.adobe.com/kr/products/xd.html?promoid=PYPVQ3HN&mv=other

더보기

공유

키워드

같이 보면 좋은 강좌

#9 디자인 작업 전 꼭 알아야 할 기능 Stack, Padding, Scroll - 어도비 XD 강좌

어도비 XD 아홉 번째 강좌입니다. XD에서 제플린사용법 이후에 오랜만에 XD 강좌를 만들었습니다. 업데이트 되면서 생긴 기능들인데 실무에서 사용해보고 너무 편해서 소개드립니다. Stack, Padding, Scroll 이 세가지를 사용할 텐데, 예제를 통해 기존에 배웠던 컴포넌트 기능과 스택+패딩 등등 어떻게 사용하는 것이 UI 디자인 시에 작업 효율을 높이는지 알려드립니다. Stack : 일정한 간격으로 가로 혹은 세로 방향으로 나열 Padding : 콘텐츠를 기준으로 상하좌우 간격을 유지하는 기능 (탭, 칩, 버튼 등의 UI 디자인 시 효율적으로 사용 가능합니다.) Scroll : 가로, 세로로 스크롤 가능하도록 해주는 기능 *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요. 누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 어도비XD의 첫단추는 디자인베이스에서 시작하세요. XD를 통해 손쉽게 UI 디자인 작업을 할 수 있습니다. : ) ☞ 디자인베이스 소개 : http://designbase.co.kr/about/ ☞ 공식 웹사이트 : http://designbase.co.kr/ *BGM 사용 출처 Track: Syn Cole - Gizmo [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/pZzSq8WfsKo Free Download / Stream: http://ncs.io/Gizmo Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/DqUQW3xyQ1c Free Download / Stream: http://ncs.io/FastLaneYO


#9 디자인 작업 전 꼭 알아야 할 기능 Stack, Padding, Scroll  - 어도비 XD 강좌

#1 XD 소개 및 인터페이스 파악하기 - 어도비 XD 강좌

어도비 XD 첫 번째 강좌입니다. 어도비에서 스케치의 대항마로 내놓은 XD가 꾸준히 버전업이 되면서 프로토타이핑과 상태 등 다양한 기능들이 좋아지고있죠. XD에 대한 간단한 소개부터 인터페이스를 살펴봅시다. *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요. 누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 어도비XD의 첫단추는 디자인베이스에서 시작하세요. XD를 통해 손쉽게 UI 디자인 작업을 할 수 있습니다. : ) ☞ 디자인베이스 소개 : http://designbase.co.kr/about/ ☞ 공식 웹사이트 : http://designbase.co.kr/ *BGM 사용 출처 Track: Syn Cole - Gizmo [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/pZzSq8WfsKo Free Download / Stream: http://ncs.io/Gizmo Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/DqUQW3xyQ1c Free Download / Stream: http://ncs.io/FastLaneYO


#1 XD 소개 및 인터페이스 파악하기 - 어도비 XD 강좌

06_Adobe XD_이미지의 사용방법 알아보기

이미지를 불러오고 종횡비 비율을 조절해 크기를 변경해 봅니다 . 배경 흐림효과나 오브젝트 흐림 효과에 대해서도 알아봅니다. 그리드 그룹으로 이미지를 한번에 삽입할 수 있습니다.


06_Adobe XD_이미지의 사용방법 알아보기

#5 마우스 오버를 ?! 컴포넌트 상태 - 어도비 XD 강좌

어도비 XD 다섯 번째 강좌입니다. 이번 강좌에서는 XD에서 강력한 기능인 컴포넌트 상태에 대해 알아보도록 할게요! 상태(states)는 말그대로 UI 엘리먼트 상에서 있을 수 있는 다양한 경우를 말합니다. 예를 들어, 버튼에도 Default, Hover, Pressed, Disabled 이런 다양한 경우의 상태가 있죠. 이를 각각 따로 컴포넌트로 등록하지 않아도 하나의 컴포넌트에 다양한 상태를 등록해서 사용할 수 있게 됐습니다. 아주 좋죠?! 더 좋은 것은 자주 사용하는 마우스 오버 상태를 추가하면 오토 애니메이션이라는 강력한 기능으로 자동으로 프로토타이핑이 적용 됩니다. 이때 가장 중요한 것은 Before(기본상태), After(마우스 오버 상태)로 생각하고 디자인을 하시면 됩니다! 자세한 프로토타이핑은 다음 강좌에서 배워보고 이번 'XD 컴포넌트 상태'에 대해 궁금한 내용은 댓글로 남겨주세요ㅎㅎ *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요. 누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 어도비XD의 첫단추는 디자인베이스에서 시작하세요. XD를 통해 손쉽게 UI 디자인 작업을 할 수 있습니다. : ) ☞ 디자인베이스 소개 : http://designbase.co.kr/about/ ☞ 공식 웹사이트 : http://designbase.co.kr/ *BGM 사용 출처 Track: Syn Cole - Gizmo [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/pZzSq8WfsKo Free Download / Stream: http://ncs.io/Gizmo Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/DqUQW3xyQ1c Free Download / Stream: http://ncs.io/FastLaneYO


#5 마우스 오버를 ?! 컴포넌트 상태 - 어도비 XD 강좌

Creative Dialogue | 와이어프레임과 프로토타입에 대한 모든 것

디지털 디자인 업계에서 '와이어프레임'과 '프로토타입'은 상호 교환적인 용어로 알려져 있지만 이 두 개념은 상당히 큰 차이가 있습니다. 이 글에서는 와이어프레임과 프로토타입의 기능, 유용한 이유, UX 디자인 프로세스에서 사용 방식 등에 대한 기본적인 사항을 살펴봅니다.


Creative Dialogue | 와이어프레임과 프로토타입에 대한 모든 것

#3 XD 포토샵에서 편집하기, 스케치에는 없는 부러운 기능 - 어도비 XD 강좌

어도비 XD 세 번째 강좌입니다. 이번 강좌에서는 XD의 핵심 기능 중의 하나인 포토샵에서 편집을 알아보겠습니다. 스케치에서 UI 작업을 하다가 배너나 이미지 보정이 필요한 부분은 포토샵을 따로 켜서 작업하고 불러와 줘야 하는데 XD에서는 역시 같은 어도비사에서 제작한 툴이라 포토샵과 호환성이 좋네요. 이미지 우클릭 후 포토샵에서 편집을 눌러서 포토샵에서 보정 후에 저장만 해주면 바로 XD에 반영된 것을 볼 수 있습니다. 여러분이 듀얼 모니터로 작업하고 있다면 더욱 효율적으로 작업할 수 있겠죠?? ㅎㅎ *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요. 누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 어도비XD의 첫단추는 디자인베이스에서 시작하세요. XD를 통해 손쉽게 UI 디자인 작업을 할 수 있습니다. : ) ☞ 디자인베이스 소개 : http://designbase.co.kr/about/ ☞ 공식 웹사이트 : http://designbase.co.kr/ *BGM 사용 출처 Track: Syn Cole - Gizmo [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/pZzSq8WfsKo Free Download / Stream: http://ncs.io/Gizmo Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/DqUQW3xyQ1c Free Download / Stream: http://ncs.io/FastLaneYO


#3 XD 포토샵에서 편집하기, 스케치에는 없는 부러운 기능 - 어도비 XD 강좌

01_Adobe XD_인터페이스 살펴보기

아래 링크에서 Adobe XD를 다운로드 하여 설치하고 인터페이스를 살펴 봅니다. https://www.adobe.com/kr/products/xd.html?promoid=PYPVQ3HN&mv=other


01_Adobe XD_인터페이스 살펴보기

05_ADOBE XD_XD에서의 펜 툴

포토샵이나 일러스트레이터에서와는 다른 사용 방법을 가진 펜 툴의 기능을 알아봅니다. 원하는 방향이나 원하는 각도로 펜 툴을 이용해 커스텀 오브젝트를 그려 봅니다.


05_ADOBE XD_XD에서의 펜 툴

#7 반응형을 위한 반응형 크기 조정 기능 - 어도비 XD 강좌

어도비 XD 일곱 번째 강좌입니다. 이번 강좌에서는 XD에서 반응형 레이아웃을 구현하기 위해 필요한 반응형 크기 조정 기능을 배워보겠습니다. 스케치의 리사이징 기능과 거의 똑같은 기능입니다. 스케치와는 다르게 자동과 수동으로 나뉘는데 수동 조정을 통해서 어떤 원리로 작동을 하는지 짧은 시간안에 배워봅시다. 디자인베이스와 함께 집에서 함께 디자인 공부해요 : ) #집에서 함께 공부해요 #디자인베이스 *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요. 누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 어도비XD의 첫단추는 디자인베이스에서 시작하세요. XD를 통해 손쉽게 UI 디자인 작업을 할 수 있습니다. : ) ☞ 디자인베이스 소개 : http://designbase.co.kr/about/ ☞ 공식 웹사이트 : http://designbase.co.kr/ *BGM 사용 출처 Track: Syn Cole - Gizmo [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/pZzSq8WfsKo Free Download / Stream: http://ncs.io/Gizmo Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/DqUQW3xyQ1c Free Download / Stream: http://ncs.io/FastLaneYO


#7 반응형을 위한 반응형 크기 조정 기능 - 어도비 XD 강좌

07_ADOBE XD_그리드 활용하기

Adobe XD에서 격자문양 그리드나 레이아웃 형태의 그리드를 만들고 등록하여 사용하는 방법을 알아봅니다.


07_ADOBE XD_그리드 활용하기

#4 UI 디자인을 효율적으로 하기 위한 필수 기능! 에셋 컴포넌트 - 어도비 XD 강좌

어도비 XD 네 번째 강좌입니다. 이번 강좌에서는 어도비 XD에서 가장 중요한 에셋 컴포넌트에 대해 알아보도록 할게요! 스케치 툴의 심볼과 비슷한 기능입니다. 자주 사용하는 엘리먼트(버튼, 아이콘, 로고, 인풋창 등)나 컴포넌트(네비게이션바, 탭바, 카드 UI 등)을 등록하고 사용하는 기능입니다. 반복되는 UI 디자인을 할 때 사용하면 좋습니다. 전에 두 번째 강좌에서 배웠던 반복 그리드와는 다른 개념입니다. 다른 아트보드에 사용하더라도 해당 컴포넌트의 디자인을 수정하면 동시에 변합니다. 스케치의 Overrides 처럼 에셋에 있는 컴포넌트를 활용해서 텍스트나 이미지를 쉽게 바꿀 수 있습니다~! 궁금한 내용은 댓글로 남겨주세요ㅎㅎ 추가로, 다음 강좌에서 배워볼 컴포넌트의 상태도 같이 배우면 아주 좋습니다 : ) *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요. 누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 어도비XD의 첫단추는 디자인베이스에서 시작하세요. XD를 통해 손쉽게 UI 디자인 작업을 할 수 있습니다. : ) ☞ 디자인베이스 소개 : http://designbase.co.kr/about/ ☞ 공식 웹사이트 : http://designbase.co.kr/ *BGM 사용 출처 Track: Syn Cole - Gizmo [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/pZzSq8WfsKo Free Download / Stream: http://ncs.io/Gizmo Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/DqUQW3xyQ1c Free Download / Stream: http://ncs.io/FastLaneYO


#4 UI 디자인을 효율적으로 하기 위한 필수 기능! 에셋 컴포넌트 - 어도비 XD 강좌

#8 제플린 사용법은 이걸로 끝 - 어도비 XD 강좌

어도비 XD 여덟 번째 강좌입니다. 이번 강좌에서는 XD에서 제플린을 사용하는 방법을 배워보겠습니다. 예전에 스케치에서 제플린 사용법을 배워봤는데 이번에는 XD! 사용시 주의해야 할 부분은 딱 두가지 입니다. 크기나 간격 등의 수치가 정수로 떨어지게 조정해야하는 것과 아이콘 같이 벡터로 내보내야 하는 경우는 XD 상에서 내보내기를 활성화시켜줘야 합니다. 제플린을 왜 사용해야 하는지부터 소개 후 자세한 제플린 사용법을 알아보도록 할게요. 집에서 함께 디자인 공부해요 : ) #집에서 함께 공부해요 #디자인강좌 #제플린 Zeplin - https://zeplin.io/ *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요. 누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 어도비XD의 첫단추는 디자인베이스에서 시작하세요. XD를 통해 손쉽게 UI 디자인 작업을 할 수 있습니다. : ) ☞ 디자인베이스 소개 : http://designbase.co.kr/about/ ☞ 공식 웹사이트 : http://designbase.co.kr/ *BGM 사용 출처 Track: Syn Cole - Gizmo [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/pZzSq8WfsKo Free Download / Stream: http://ncs.io/Gizmo Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/DqUQW3xyQ1c Free Download / Stream: http://ncs.io/FastLaneYO


#8 제플린 사용법은 이걸로 끝  - 어도비 XD 강좌

04_ADOBE XD_도형 툴로 날씨 아이콘 만들기

Adobe XD에서 도형툴의 옵션을 이용해 날씨 아이콘을 제작해 봅니다.


04_ADOBE XD_도형 툴로 날씨 아이콘 만들기

#6 프로토타이핑 집에서 함께 공부해요 - 어도비 XD 강좌

어도비 XD 여섯 번째 강좌입니다. 이번 강좌에서는 XD에서 프로토타이핑 기능을 배워보겠습니다. 프로토타이핑의 기본인 링크를 걸어줄 요소 선택과 이동할 아트보드를 선택하는 것이죠. 어떻게 사용하는지 배워보고, 드래그와 자동 애니메이트를 활용해서 좀 더 다양한 프로토타이핑을 한번 예제를 통해 배워보세요. 코로나 때문에 많이 답답하죠.. 디자인베이스와 함께 집에서 함께 디자인 공부해요 : ) #집에서 함께 공부해요 #디자인베이스 *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요. 누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 어도비XD의 첫단추는 디자인베이스에서 시작하세요. XD를 통해 손쉽게 UI 디자인 작업을 할 수 있습니다. : ) ☞ 디자인베이스 소개 : http://designbase.co.kr/about/ ☞ 공식 웹사이트 : http://designbase.co.kr/ *BGM 사용 출처 Track: Syn Cole - Gizmo [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/pZzSq8WfsKo Free Download / Stream: http://ncs.io/Gizmo Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/DqUQW3xyQ1c Free Download / Stream: http://ncs.io/FastLaneYO


#6 프로토타이핑 집에서 함께 공부해요 - 어도비 XD 강좌

03_ADOBE XD_도형의 활용과 옵션 알아보기

ADOBE XD에서 도형을 그리고 크기를 조절하고 색상과 가장자리 라인의 투명도를 조절해 봅니다. 그림자를 입력하거나 오브젝트를 흐리게 하는 효과 및 정렬과 배치에 대해 공부할 수 있습니다.


03_ADOBE XD_도형의 활용과 옵션  알아보기

#2 XD 핵심 기능 반복 그리드 (작업 능률 UP) - 어도비 XD 강좌

어도비 XD 두 번째 강좌입니다. 이번 강좌에서는 XD의 핵심 기능 중의 하나인 반복 그리드(Repeat grid)를 알려드리겠습니다. 반복되는 UI 요소가 있을 때 활용하는 기능인데, 아주 유용합니다. 사용법과 유의사항에 대해 배워보도록 하죠. 포토샵으로 UI 디자인을 하시는 분들은 XD 꼭 한 번 사용해보시는 걸 추천드려요!! *디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요. 누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 어도비XD의 첫단추는 디자인베이스에서 시작하세요. XD를 통해 손쉽게 UI 디자인 작업을 할 수 있습니다. : ) ☞ 디자인베이스 소개 : http://designbase.co.kr/about/ ☞ 공식 웹사이트 : http://designbase.co.kr/ *BGM 사용 출처 Track: Syn Cole - Gizmo [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/pZzSq8WfsKo Free Download / Stream: http://ncs.io/Gizmo Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/DqUQW3xyQ1c Free Download / Stream: http://ncs.io/FastLaneYO


#2 XD 핵심 기능 반복 그리드 (작업 능률 UP) - 어도비 XD 강좌

[Adobe XD 강좌] 08_ADOBE XD_프로토타입 활용하기

인터페이스를 디자인하고 두개 이상의 아트보드를 만든 후 프로토타입을 이용해 애니메이션을 적용해봅니다. 사용된 이미지는 아래 링크에서 다운로드 받으세요. https://blog.naver.com/vhekfdlfekf/221490860295 #어도비XD, #adobe XD


[Adobe XD 강좌] 08_ADOBE XD_프로토타입 활용하기

02_ADOBE XD_반복 그리드 활용하기

반복되는 오브젝트를 반복 그리드 옵션을 통해 반복적으로 배치시켜 봅니다. 복제하여 배치하는 것과는 달리 그리드의 간격을 한 번에 조절할 수 있습니다.


02_ADOBE XD_반복 그리드 활용하기

이 강좌가 포함된 라이브러리

+ 더보기
thumnail
thumnail thumnail

How - To 32lLesson 7

usericon usericon

김아무개

자바스크립트 팁 모음과 CSS 응용 강좌

팔로워:128

thumnail
thumnail thumnail

How - To 32lLesson 7

usericon usericon

김아무개

자바스크립트 팁 모음과 CSS 응용 강좌

팔로워:128

thumnail
thumnail thumnail

How - To 32lLesson 7

usericon usericon

김아무개

자바스크립트 팁 모음과 CSS 응용 강좌

팔로워:128