안녕하세요! 제가 어도비xd를 직접 써보면서 얻은 느낌을 말씀드리려고 해요. Adobe XD는 웹사이트나 앱 디자인을 만드는데 진짜 좋더라고요. 사용자 경험(UX)과 사용자 인터페이스(UI) 디자인을 직접 만들어볼 수 있어서 신기하고 재미있었어요. 디자인부터 프로토타입 제작, 그리고 공유까지 한 번에 할 수 있어서 너무 편리했구요, 초보라도 쉽게 배울 수 있는 인터페이스와 드래그 앤 드롭 방식이라서 부담 없이 시작할 수 있었습니다.
특히 일관된 요소를 금방 만들어주는 컴포넌트와 반복 그리드 기능으로 시간을 많이 아낄 수 있었어요. 그리고 자동화된 애니메이션 기능으로 실제 같은 움직임도 구현해볼 수 있었습니다. 마지막으로 Adobe XD의 공유 기능이 정말 좋았어요. 작업물을 다른 사람들과 쉽게 공유하고 피드백도 받아볼 수 있어서 협업하는 데에 정말 유용했습니다. 이런 경험들로 Adobe XD를 사용하는 것이 정말 좋았습니다
1. 어도비xd 사용방법
- 프로젝트 시작하기 Adobe XD를 처음 켜봤는데, 다양한 템플릿 중에서 골라서 새 프로젝트를 시작할 수 있더라고요. 그래서 복잡하지 않게 바로 작업을 시작할 수 있었어요.
- 디자인 작업 프로젝트를 만들고 나니까 디자인 화면으로 넘어가더라고요. 거기서 텍스트나 도형, 이미지 등을 추가하거나 수정하는 걸 할 수 있었습니다.
- 도구 사용하기 화면 왼쪽에 있는 도구 메뉴를 이용해서 그래픽 요소들을 만들거나 수정하는 게 가능했어요. 이 도구 덕분에 디자인 과정이 꽤 원활하게 진행됐습니다.
- 레이어와 컴포넌트 관리 화면 오른쪽의 패널에서는 레이어랑 컴포넌트를 관리할 수 있던데, 이 기능 좋았어요! 여러 개의 객체 정리도 간단하게 하고, 자주 사용하는 요소들은 재사용할 수 있으니까 많이 편리하더라고요.
- 실제 앱처럼 만들기 디자인 작업 다 하고 나서 ‘Prototype’ 탭으로 넘어가니까 각 화면(아트보드)을 연결해서 실제 앱처럼 만드는 것도 가능하더군요!
- 애니메이션 추가하기 ‘Prototype’ 탭에서는 화면 간 전환에 애니메이션 효과도 넣을 수 있었습니다! 이 기능 덕분에 제가 만든 인터페이스가 좀 더 생동감있게 보였답니다.
- 다른 사람과 공유하기 모든 작업 마치고 나서 상단의 ‘Share’ 버튼 클릭하니까 다른 사람들과 내 작업물 공유하는 것도 엄청 간단했어요. 그래서 다른 사람들의 피드백도 받아보고 디자인을 개선하는 데 도움이 많이 됐습니다.
2. 어도비xd 다운로드 방법
- 일단 인터넷에서 Adobe 공식 홈페이지로 들어가 보세요. (Adobe XD 시작하기)
- 홈페이지에 들어가면 위쪽 메뉴에서 ‘Creative Cloud’라는 걸 찾을 수 있을 거예요. 그거나 ‘Products’ 메뉴에 있는 ‘View all products’를 클릭하시면 돼요.
- 그러면 여러 제품들이 나오는데, 여기서 ‘XD’를 찾아 클릭하세요.
- Adobe XD 페이지로 넘어가면, 오른쪽 상단에 ‘Free Download’나 ‘Start for free’라고 적힌 버튼이 보일 거예요. 그 버튼을 클릭하시면 됩니다.
- 이제 다운로드가 시작되는데, 파일 받은 다음에 설치 프로그램 실행해서 따라하시면 되겠습니다.
3. 상세페이지 만드는 방법
- 아트보드 그리기: Adobe XD를 실행하시고 왼쪽 메뉴에서 ‘Artboard Tool(A)’를 선택하시면 아트보드를 화면에 그릴 수 있습니다. 원하시는 크기로 그려주시면 됩니다.
- 레이아웃 잡기: 레이아웃을 잡는 것은 디자인의 기본입니다. 아트보드 선택 상태에서 오른쪽 패널의 ‘Layout’ 옵션을 활성화하고 조정해 주세요.
- 디자인 요소 추가하기: 이제 필요한 텍스트나 이미지, 버튼 등을 넣어주셔야 합니다. 왼쪽 도구바에서 ‘Rectangle Tool(R)’, ‘Ellipse Tool(E)’, ‘Text Tool(T)’ 등을 선택하여 아트보드 위에 드래그하시면 요소들이 생성됩니다.
- 스타일링 하기: 오른쪽 패널에서 텍스트 스타일, 색상, 효과 등 다양한 옵션으로 디자인 요소들의 모양새를 바꿀 수 있습니다.
- 프로토타입 연결하기: 디자인 작업이 다 끝나신 후에는 상단 메뉴에서 ‘Prototype’ 탭으로 넘어가서 페이지 간 연결 및 애니메이션 효과 등 프로토타입 설정도 해 보실 수 있습니다.
- 미리보기 및 공유하기: 마지막으로 우측 상단의 미리보기 버튼(‘Preview’)으로 작업물을 확인해 보실 수 있으며, 다른 사람과 공유하려면 ‘Share’ 버튼으로 공유 링크를 생성해서 보내주실 수 있습니다.
Adobe XD는 처음 사용할 때는 조금 복잡해 보일 수 있지만 몇 번만 사용해 보시면 익숙해집니다! 천천히 하다 보면 금방 손에 익으실 거예요.
4. 어도비xd 단축키
일반적인 단축키
- 선택 도구: V
- 직사각형 도구: R
- 원형 도구: E
- 펜 도구: P
- 텍스트 도구: T
- 줌 도구: Z
- 핸드 도구(화면 이동): Spacebar (눌러둔 상태에서 움직이면 화면 이동)
- 그룹 만들기/해제하기 : Ctrl + G / Shift + Ctrl + G (Windows), Command + G / Shift + Command + G (Mac)
디자인 관련 단축키
- 복사하고 붙여넣기 : Ctrl+C, Ctrl+V (Windows), Command+C, Command+V (Mac)
- 복사하고 현재 아트보드에 붙여넣기 : Ctrl+Alt+V (Windows), Command+Option+V(Mac)
보기 및 줌 관련
- 실제 크기로 보기 : Ctrl+1 (Windows), Command+1(Mac)
- 마치며
어도비 XD에 대해 같이 알아보았는데요, 이 정보가 여러분께 도움이 되었으면 좋겠습니다. 처음 사용하는 분들에게는 어려울 수 있지만, 몇 번만 써보면 금방 익숙해질 거라고 생각합니다.
다 이해가 안 가거나 궁금한 점 있으시면 언제든지 물어봐주세요. 최대한 자세하고 쉽게 설명해 드릴게요. 여러분의 질문과 피드백은 제게 큰 도움이 됩니다.
그럼 오늘도 행복 가득한 하루 되시길 바라며, 다음에 또 유익한 정보로 찾아뵙겠습니다! 감사합니다~^^