[디자인] 쉬운 앱 디자인 툴 XD

in #kr6 years ago (edited)

안녕하세요. @u robotics 입니다.
이번에는 전에 배웠던 앱 디자인을 쫌 풀어쓸까 합니다.

adobe XD cc라는 툴을 쓸 껍니다 .
무료 툴입니다.
(물론, 어도비 답게 앱 1개만 무료고,
여러개 할려면 유료입니다. ㅋㅋ)

다운로드 주소는 여기입니다.
https://www.adobe.com/kr/products/xd.html

0.jpg

화면이 굉장히 사용하기 쉽게 되어있죠.
다운로드도 금방 찾을 수 있어요.

어도비 XD cc 다운로드 받아주세요.

그리고 프로그램을 열어보시면요.
1 선택화면.jpg

저는 첫 번째로 아이폰 화면을 선택해봤어요.
1-2 선택 고른 화면.jpg

클릭하면 이런 화면이 나옵니다.
2 앱화면.jpg

제가 선택한 아이폰. 그리고 1번째 화면이다.
이런 뜻이죠.
2 앱화면(수정).jpg

저는 다시 열다 보니깐
화면이 작아서 안 보여서
키워봤어요.

엑셀, 파워포인트 등과 마찬가지로
ctrl + 마우스 휠. (위) 를 해주시면
화면이 커집니다.

3 키운 화면1.jpg

이런 너무 커졌네요.
화면이 없어져 버렸습니다.

3-2 너무 키운 화면.jpg

이상한 점이 있는데요. 정면에 맞춰서 커지지 않는다는 거죠.
그러면 화면을 정면으로 맞추려면 어떻게 해야될까요?

스페이스 바 + 마우스 왼쪽 클릭.
이 화면은 왼쪽으로 너무 갔으니깐,
오른쪽으로 끌어내야겠죠.?!

스페이스 바 누르면서
마우스 왼쪽 클릭으로
화면 오른쪽으로 끌어주세요.

그러면 이렇게 나옵니다.

기본 화면 컨트롤은 이정도면 돼요.

4 스페이스 바-오른쪽.jpg

그러면 사각형을 그려봅시다.
왼쪽에서 사각형을 선택해주세요.

5 사각형을 그려 봅시다.jpg

그리고 화면에 놓으면 사각형이 그려집니다.

5-2 사각형 그렸음.jpg

사각형을 그리면
오른쪽 밑에 선택할 수 있는 것들이 나옵니다.
PPT랑 비슷해요.

5-1 선택틀.jpg

채우기를 눌러서
사각형의 색을 바꿔봅시다.

주의할 것은 화살표로 가리키는 포인트
여기를 클릭해야
사각형의 색깔이 바뀐다는 겁니다.

5-3 여길 선택해야 바뀜.jpg

화면 왼쪽에서
기타 도형들을 그려봅시다.
역시 PPT랑 비슷해요.

원, 선, 다각형들 각각 그려보시면 됩니다.

6 기타 도형들.jpg

왼쪽에서 T자를 누르시면
글자 쓰기도 됩니다.

7 글자 쓰기.jpg

오른쪽에 보시면
속성 바꾸는 게 있어요.
글자 크기를 80으로 바꿔보니깐
엄청 커집니다.

7-2 글자크기 바꿈.jpg

마지막으로
새 화면 추가하기를 해봅시다.
역시 왼쪽에서 새화면 추가 아이콘을 누르시고
기존 앱 화면을 누르시면
새 화면이 또 생깁니다. ㅋㅋㅋ

8 새로운 화면.jpg

무한으로 생성되시는데
멈추고 싶으시면
왼쪽에서 화면추가 아이콘 말고
다른 아이콘을 눌러주시면 됩니다.

맨 위의 화살 아이콘이 가장 무난하겠네요.

오늘 어도비 XD cc 디자인 수업은 여기까지 입니다.
^^ 앱 디자인 한 번 도전해보시길 ㅋㅋㅋ

감사합니다.

Sort:  

즐거운 스팀잇 생활하시나요?
무더위야 가라!!!!

예 ㅎㅎ 시원함아 와라 ㅋㅋ

오홋~!
디자인 툴 소개 감사합니당~ ^^

bluengel_i_g.jpg Created by : mipha thanks :)항상 행복한 하루 보내셔용^^ 감사합니다 ^^
'스파'시바(Спасибо스빠씨-바)~!

블루엔젤 님 감사합니다. ^^ ㅎㅎㅎㅎ 행복한 하루 보내셔용 ㅎㅎㅎㅎ

앱 1개는 무료로 만들어 볼수 있겠어요~

예. 무료가 좋죠. ㅋㅋㅋ 근데 계속 지우고 또 만들면 되니깐,
동시에 여러앱 작업을 못 한다 뿐이지
거의 무한인듯요. ㅋㅋㅋ

오~ 오도비 엑스디~ 이거 10분쓰고 꺼버렸어염...저랑은 안맞는 툴인것 같아소(사실 베타버전땤ㅋㅋ) 전 oven 이 나름 편하더라구욤

오호.. ㅇ_ㅇ 글쿤요. 저는 그냥 교육받은 게 이 툴 뿐이라서 한 번 올려봤어요. ㅎㅎㅎㅎ 오 oven 좋은 모양이군요. 한 번 써보겠습니다. ㅎㅎㅎ

역시 천재 개발자 ㅋㅋ

고맙습니다. 타나마님. 천재개발자 이름을 되찾아야겠어요. ㅎㅎㅎㅎ

괜찮은 툴 같네요.
주말에 한번 테스트 해봐야겠어요.

예. 코딩맨님 뭔가 이거 쓸만한 것 같아요. ㅎㅎㅎㅎ

WARNING - The message you received from @habibur81 is a CONFIRMED SCAM!
DO NOT FOLLOW any instruction and DO NOT CLICK on any link in the comment!

For more information, read this post:
https://steemit.com/steemit/@arcange/phishing-site-reported-steembottracker-dot-trade

If you find my work to protect you and the community valuable, please consider to upvote this warning or to vote for my witness.

thankyou arcange

이 툴로 실제 사용가능한 앱 제작이 가능한 건가요..??

앱 디자인요. 안드로이드 수튜디오에 xml인가에 추가해주면 앱 디자인으로 쓸 수 있다고 해요. 버튼 같은거 지정할 수 있는지도 모르겠네요. 해봐야겠어요.

해당 툴에서는 디자인만(!)이군요.. 곧 '모기 잘 잡는 법' 후기 올리겠습니다
제 글에 @urobotics님 글의 일부분을 캡쳐해서 업로드 할 예정인데 괜찮으신지요..

예. 디자인만 입니다. ㅎㅎ 오홋 모기정복인가요. ㅋㅋ 물론이죠. 마음껏 사용해주세요. ㅎㅎㅎ 출처를 알려주시면 더 감사 ㅎㅎ

오호 기종마다 템플릿이 다 준비되어 있군요. 이제 개발만 하면 되네요 ~~ ㅎㅎ

예. 저도 냅니다. ㅋㅋㅋ 화이팅. 뀨님도 음악앱 한 번 ㅋㅋㅋ

템플릿이 넘쳐나도 제일 중요한 개발을 못합니다 ㅋㅋㅋ

저도 젤 중요한 개발을 못합니다. 그래서 개발 공부 중이에요. ㅎㅎㅎ 이번 기회에 개발을 잘 할 수 있게 되길 열망합니다. ㅎㅎㅎㅎ