Adobe XD로 프로토 타입 빌드

Feb 2, 2026

어떻게

(이미지 크레디트 : 미래)

현대 웹 및 앱 디자인에서는 상호 작용이 전체 새 페이지 나 화면을 열지 않는 경우가 종종 있습니다. 대화 형 콘텐츠를 만드는 현대적인 접근법은 콘텐츠를 변경하는 경험에 의해 사용자가 놀랍고 흔들릴 수 있도록 설계 인터페이스 요소 간의 전환이 필요합니다. 이 모든 것은 새로 고침없이 동일한 화면이나 페이지에서 발생합니다. 이러한 종류의 상호 작용을 디자인하고 제대로 작동하도록 정제 할 수 있지만 코드를 작성하기 전에 할 가치가 있습니다.

이것은 Adobe XD가 지난 몇 개월의 개발을 보냈던 것입니다. 한 상태에서 콘텐츠 만들기 한 화면에서 해당 내용을 새 화면의 새 상태로 이동하고 전환하려면 '자동 애니메이션'옵션을 선택하기 만하면됩니다. 두 화면에서 동일한 모든 콘텐츠는 한 위치에서 다른 위치로 자동 애니메이션을 제공합니다. 두 화면에서 볼 수있는 모든 콘텐츠를 원하지 않으면 첫 번째 콘텐츠를 보이지 않게 만들고 전환합니다.

다른 Adobe 소프트웨어에 대해 알아보십시오 어도비 차원 ...에

8 필수 프로토 타이핑 및 빌드 도구

여기서는이 작업을 수행하는 앱 프로토 타입을 만드는 방법을 보여 드리겠습니다. 응용 프로그램을 만드는 방법 자습서, 최고의 것들의 런던을 확인하십시오). 그 이상으로, XD의 새로운 기능을 사용하면 사용자가 목소리와의 상호 작용을 제어 할 수 있습니다. 우리는 이것을 디자인 기능으로 탐구하고 앱이 사용자에게 어떻게 다시 말할 수 있는지 흥미로운 디자인 기회를 제공 할 수 있습니다.

프로젝트 파일을 다운로드하십시오 이 자습서의 경우.

01. 프로젝트 시작

Build prototypes with Adobe XD: Starting the project — XD를 설치하고 새 프로젝트를 시작하십시오 (이미지 크레디트 : 웹 디자이너)

Adobe XD가없는 경우 다운로드하여 설치할 수 있습니다. 여기 ...에 설치가 완료되면 소프트웨어를 열면 시작 화면을 사용하여 다운로드 할 화면 크기를 선택할 수 있습니다. 이 경우 iPhone 6/7/8을 선택하십시오.이 프로젝트의 올바른 크기는 없지만 다양한 크기가 있는지 알 수 있습니다.

02. 첫 번째 이미지 가져 오기

Build prototypes with Adobe XD: Import the first image — 첫 번째 이미지를 찾아 가져 오십시오 (이미지 크레디트 : 웹 디자이너)

이미지를 가져 오는 방법에는 다른 방법이 있지만이 첫 번째 인스턴스에서는 파일 & gt로 이동합니다. 수입. 프로젝트 파일에서 '자산'폴더를 선택하면 가져 오기 위해 첫 번째 이미지는 'sky.png'가됩니다. 화면 상단에 놓고 몇 픽셀 단위로 이동하십시오.

03. 오두막을 놓습니다

Build prototypes with Adobe XD: Place the cabin — 더 이상 이미지를 가져 오십시오 (이미지 크레디트 : 웹 디자이너)

디자인을위한 다음 이미지는 'cabin.png'가됩니다. 이전 단계에서했던 것과 같은 방식 으로이 작업을 가져 와서 화면을 채우기 위해 배치하십시오. 마지막으로 이미지의 'trees.png'을 가져 와서 호수 위로 나무로 화면의 바닥에 놓습니다.

04. 로고를 가져 오십시오

그 이미지가 별도의 레이어 인 이유는 스크린간에 전환이 생성 될 때 별도로 이동할 수 있습니다. 파일 메뉴로 이동하여 가져 오기를 선택하십시오. 이번에는 벡터 이미지 인 'logo.ai'를 선택합니다. 이 이미지를 화면의 상단 중앙에 놓습니다.

05. 서클을 추가하십시오

Build prototypes with Adobe XD: Add a circle — 원 도구를 사용하여 로고 주위를 그립니다 (이미지 크레디트 : 웹 디자이너)

원 도구를 선택하고 원보다 약간 큰 원을 그립니다. 오른쪽의 속성 패널에서 스트로크를 제거하고 배경을 검정색으로 만듭니다. 백그라운드를 선택하고 밝기를 -30으로 줄이고 원이 여전히 검은 색입니다.

06. 그래픽 순서를 변경하십시오

Build prototypes with Adobe XD: Reorder the graphics — 로고 아래에 원을 보냅니다 (이미지 크레디트 : 웹 디자이너)

이제 원은 로고 뒤에서 움직여야합니다. 객체 & gt; 뒤로 배열하고 보내십시오. 다른 Adobe 제품과 마찬가지로, 그것은 또한 있습니다 cmd / ctrl + [ 레이어 순서에서 그래픽을 뒤로 이동합니다. 한편 오른쪽 사각 브래킷을 사용하면 오브젝트가 순서대로 전달됩니다.

07. 마이크를 떨어 뜨리십시오

Build prototypes with Adobe XD: Drop the mic — 마이크 이미지를 놓고 크기를 조정하고 그 주위에 원을 그립니다. (이미지 크레디트 : 웹 디자이너)

이제 'mic.ai'이미지를 가져 와서 상대적으로 작게 이미지의 크기를 조정하십시오. 이것을 화면 하단에 놓습니다. 이 주위에 원을 그립니다. 삭제되도록 채우기를 선택 해제하십시오. 그런 다음 스트로크 화이트와 2 픽셀을 넓게 만듭니다. 'mic'이미지 주변의 위치.

08. 텍스트 메시지

텍스트 도구를 사용하여 마이크 아래의 '검색하도록 말하기'단어를 추가하십시오. 텍스트를 흰색으로 만들고 Helvetica Neue 응축 된 검은 색으로 변경하십시오. 화면 왼쪽 하단에 자산 패널 아이콘을 클릭하여 엽니 다. 화면에서 선택한 텍스트를 사용하여 '문자 스타일'옆의 '+'아이콘을 클릭하여 텍스트 에이 형식을 저장하십시오.

09. 그룹에 가입하십시오

화면 왼쪽 하단에있는 레이어 패널 아이콘을 선택하십시오. 화면에서 '검색'텍스트를 선택하고 Shift 키를 클릭하십시오 원과 마이크 아이콘을 추가하려면. 개체로 이동하여 그룹을 선택하십시오. 레이어 패널 에서이 그룹 '검색'의 이름을 바꿉니다. 그룹 이름을 지정하는 것이 특히 이들을 애니메이닝 할 때 유용합니다.

10. 로고를 그룹화하십시오

로고와 동그라미를 그룹화하십시오 (이미지 크레디트 : 웹 디자이너)

마지막 단계에서와 마찬가지로 로고와 흐리게 원 주위를 선택한 다음 함께 그룹화하십시오. 레이어 패널에서 전체 그룹의 로고의 이름을 바꾸므로 나중에 다시 편집 해야하는 경우 쉽게 식별 할 수 있습니다. 잠시 동안 첫 번째 화면의 디자인이 완료됩니다.

11. 여분의 요소

Build prototypes with Adobe XD: Extra elements — 애니메이션 목적으로 더 많은 디자인 요소를 가져 오십시오 (이미지 크레디트 : 웹 디자이너)

첫 번째 화면이 완료 되더라도 추가 해야하는 더 많은 디자인 요소가 있습니다. 이것은 스크린 간의 요소의 위치 지정 요소를 변경하여 애니메이션이 생성되는 방식입니다. 사각형 도구로 이동하여 보류하십시오 시프트 화면에 사각형을 추가하려면 테두리를 흰색으로 만듭니다.

12. 다른 가져 오기

Build prototypes with Adobe XD: Different import — 운영 체제의 폴더에서 이미지를 드래그하기 만하면됩니다. (이미지 크레디트 : 웹 디자이너)

이제 운영 체제를 통해 자산 폴더를 엽니 다. 'cabin1.png'이미지를 선택하고 이전 단계에서 만든 사각형으로 직접 드래그하십시오. 이것은 자동으로 이것을 가면으로합니다. 두 번 클릭하여 이미지의 위치를 편집하고 캐빈이 사각형에 표시되는지 확인하십시오.

13. 레이블을 추가하십시오

Build prototypes with Adobe XD: Add a label — 텍스트 도구를 사용하여 레이블을 자산에 추가하십시오 (이미지 크레디트 : 웹 디자이너)

텍스트 도구를 사용하여 텍스트 아래에 레이블 '포리스트 캐빈'을 추가하고 자산 패널을 사용하여 저장된 스타일의 텍스트를 스타일로 지정하십시오. 이미지와 레이블을 함께 그룹화하고 함께 그룹화하십시오. 레이어 패널에 그룹의 '왼쪽 오두막'의 이름을 지정하십시오.

14. 그룹을 복제하십시오

Build prototypes with Adobe XD: Duplicate the group — 반복망을 사용하는 대신 인터페이스 요소 복사 및 붙여 넣기 (이미지 크레디트 : 웹 디자이너)

일반적으로 인터페이스 요소를 반복하면 '반복망'도구의 완벽한 작업입니다. 그러나 이것은 반복 격자에서 작동하지 않는 특정 애니메이션이 필요합니다. 이미지와 텍스트 그룹을 선택한 다음 복사하여 원본 옆에 앉아서 붙여넣고 이미지의 'cabin2.png'을 추가하십시오.

15. 이름 바꾸기 다음 다시 복사하십시오

Build prototypes with Adobe XD: Rename then copy again — 복사 한 텍스트를 필요에 따라 업데이트하십시오 (이미지 크레디트 : 웹 디자이너)

텍스트를 '스노우 캐빈'으로 변경하십시오. 레이어 패널 이름이 '오른쪽 오두막'을 지정하십시오. 왼쪽 및 오른쪽 오두막을 모두 선택하고 복제하여 아래 복제본을 배치하고 'Cabin3.png'및 'Cabin4.png'로 텍스트 및 이미지를 업데이트하십시오. 이 두 그룹 모두 그룹의 '하부 오두막'을 지정하십시오.

16. 텍스트 제목

텍스트 '검색 결과에 대한 검색 결과'가 페이지에 텍스트를 추가하십시오. 이 글을 로크웰 서체를주고 해당 자산 패널의 문자 스타일에 저장하십시오. 이제 '아래쪽 오두막'그룹을 화면 하단에 바로 놓고 모양을 0으로 꺼내서이 화면에서 보이지 않도록하십시오.

17. 불투명도 변경

Build prototypes with Adobe XD: Changing opacity — 왼쪽 및 오른쪽 캐빈의 불투명도를 0으로 설정하십시오. (이미지 크레디트 : 웹 디자이너)

이제 왼쪽 및 오른쪽 캐빈을 선택하고 화면 하단으로 이동하여 모양 슬라이더를 0으로 가져갑니다. 검색 텍스트를 다시 반복하십시오. 우리가 다른 화면으로 이동하면 이들은 모두 새로운 위치에 애니메이션을 제공합니다. 레이어 패널에서 다른 오두막 그룹 모두 위의 '왼쪽 오두막'을 이동하십시오.

18. 화면을 복제합니다

Build prototypes with Adobe XD: Duplicate the screen — 화면을 복제 한 다음 로고를 이동하여 보이지 않게하십시오. (이미지 크레디트 : 웹 디자이너)

이름을 클릭하면 아트 보드를 선택한 다음 대지를 두 번 클릭하고 '홈'으로 이름을 변경하십시오. 아트 보드를 복사하여 붙여넣고 '검색'의 이름을 바꿉니다. 이제 로고를 선택하고 위로 이동하여 화면에서 거의 끄고 모양을 0으로 줄이십시오.

19. 배경을 이동하십시오

Build prototypes with Adobe XD: Move the backgrounds — 배경과 다른 요소를 이동하십시오 (이미지 크레디트 : 웹 디자이너)

하늘 이미지를 선택하고 화면에서 약간 조금씩 움직입니다. 캐빈 이미지를 선택하고 캐빈이 화면 상단에있을 때까지 움직입니다. 그런 다음 나무 이미지를 클릭하고 캐빈 위로 이동하십시오. 마지막으로 '검색'그룹을 선택하고 모양을 0으로 줄이십시오.

20. 새로운 요소가 나타납니다

Build prototypes with Adobe XD: New elements appear — 이제 새로운 요소가 나타납니다 (이미지 크레디트 : 웹 디자이너)

레이어 패널에서 검색 결과를 선택하고 모양을 최대 100 개까지 가져옵니다. 화면에서 이동하십시오. 왼쪽 오두막, 오른쪽 오두막 및 하부 오두막에 대해이 작업을 반복하십시오. 펜 도구를 사용하여 간단한 뒤로 버튼을 그립니다. 그 주위에 원을 추가하십시오. 배경을 흐리게하고 그 밝기를 -30으로 가져 가라.

21. 뒤로 버튼을 완료하십시오

뒤쪽 화살표와 원을 선택하고 함께 그룹화하고 레이어 패널에서 '뒤로 버튼'이라는 이름을 지정하십시오. XD 인터페이스의 왼쪽 상단에서 '프로토 타입'을 눌러 '프로토 타입'모드로 전환하십시오. 홈 화면을 선택하고 파란색 화살표를 검색 화면으로 드래그하면 팝업 패널이 나타납니다.

22. 음성 명령

Build prototypes with Adobe XD: Voice command — 음성 명령을 추가하는 것은 쉽습니다 (이미지 크레디트 : 웹 디자이너)

트리거를 음색으로 변경하고 '검색'이라는 단어를 음성 명령으로 입력 하여이 값을 제어합니다. 조치를 변경하여 자동 애니메이션을 변경하고 스냅 할 수 있습니다. 기간을 1.5s로 만듭니다. 검색 화면에서 뒤로 버튼을 클릭하고 파란색 화살표를 '홈'화면으로 바꾸십시오. 트리거를 변경하여 탭하십시오.

23. 프로토 타입을 테스트하십시오

Build prototypes with Adobe XD: Test the prototype — 재생 버튼을 눌러 프로토 타입을 테스트하십시오 (이미지 크레디트 : 웹 디자이너)

XD 인터페이스의 오른쪽 상단에있는 플레이 버튼이 있습니다. 이 항목을 클릭하면 작업 프로토 타입이 이제 화면에 팝업됩니다. 홈페이지에서는 음성 명령 '검색'을 말하는 동안 스페이스 바를 누르고 있어야합니다. 스페이스 바를 놓아 낼 때 다음 화면으로 이동하여 그래픽 인터페이스를 제자리에 애니메이션으로 만듭니다.

24. 돌아왔다

Build prototypes with Adobe XD: Going back — 뒤로 버튼을 눌러 홈 화면으로 돌아갑니다 (이미지 크레디트 : 웹 디자이너)

전환이 실행되면 뒤로 버튼을 눌러 홈 화면으로 돌아갑니다. 프로토 타입을 닫고 검색 화면을 클릭 한 다음 오른쪽으로 파란색 화살표를 클릭하십시오 (드래그하지 마십시오). 트리거를 시간으로 변경하고 지연 0을 만들고 작업을 음성 재생으로 설정하십시오. 사용 가능한 캐빈에 대한 연설의 '검색 결과'를 만드십시오.

25. 음성 확인

Build prototypes with Adobe XD: Speech confirmation — 음성 확인을 테스트 한 다음 디자인보기로 돌아갑니다. (이미지 크레디트 : 웹 디자이너)

재생 버튼으로 지금 테스트하여 검색의 음성 확인을들을 수 있습니다. 이것을 시도 할 때 프로토 타입을 닫으십시오. 다른 화면이 생성 될 예정이므로 XD 인터페이스의 왼쪽 상단의 '디자인'보기에서 다시 클릭하십시오. 이름을 클릭 한 다음 복사하여 붙여 넣기를 클릭하여 검색 화면을 클릭하십시오.

26. 이미지 크기 조정

Build prototypes with Adobe XD: Scaling the image — 새 화면의 이름을 바꾸고 캐빈 이미지의 크기를 조정하십시오 (이미지 크레디트 : 웹 디자이너)

새 화면의 '캐빈'의 이름을 바꿉니다. '왼쪽 오두막'레이어의 이미지를 두 번 클릭하십시오. 모서리 핸들의 크기를 조정하여 화면을 채우도록 화면을 덮을 수 있도록 이미지의 위치를 변경하십시오. 검색 결과 텍스트를 클릭하고 모양에서 삭제하려면 외관을 0으로 이동하십시오.

27. 새로운 화면 요소

Build prototypes with Adobe XD: New screen elements — 새로운 요소를 가져올 시간입니다 (이미지 크레디트 : 웹 디자이너)

그룹의 일부인 '숲 캐빈'텍스트를 두 번 클릭하십시오. 텍스트 크기를 26 픽셀로 확대하고 화면에서 약간 움직입니다. 14 픽셀 크기의 Helvetica Neue 매체에서 화면에 텍스트를 추가하고 백그라운드에서 눈에 띄는 흰색으로 설정하십시오. 표제 아래에 선 도구가있는 흰색 선을 추가하십시오.

28. 버튼을 만듭니다

Build prototypes with Adobe XD: Create a button — 버튼으로 사용할 둥근 사각형을 만듭니다 (이미지 크레디트 : 웹 디자이너)

사각형 도구를 사용하여 디자인 하단에있는 화면에 사각형을 그립니다. 모서리 핸들을 끌어서이 모양의 둥근 모서리를주십시오. 응축 된 대담한 Helvetica Neue의 자산 패널의 저장된 문자 스타일을 사용하여 '예약'이라는 단어를 추가하십시오.

29. 프로토 타입 모드로 이동하십시오

Build prototypes with Adobe XD: Move to Prototype mode — 모든 기능을 사용하여 프로토 타입 모드로 전환하십시오 (이미지 크레디트 : 웹 디자이너)

모든 디자인 요소는 이제 앱의 전체 설계를위한 장소에 있습니다. 왼쪽 상단 모서리에서 '프로토 타입'이라는 단어를 클릭하여 '프로토 타입'모드로 이동하십시오. 검색 화면에서 이미지 및 텍스트의 '숲 캐빈'그룹을 클릭하십시오. 파란색 손잡이를 이소에서 '캐빈'화면으로 드래그하십시오.

30. 애니메이션 설정

Build prototypes with Adobe XD: Animation settings — Animation Settings를 조정하여 물건을 똑같이 유지하십시오 (이미지 크레디트 : 웹 디자이너)

화면 간 전환을위한 팝업 패널에서 트리거로 탭을 선택한 다음 Auto-Animate를 선택하십시오. 스냅으로 완화되도록 유지하지만이 지속 시간을 0.6 초로 줄입니다. 이렇게하면 애니메이션이 드래그되지 않도록 끌어 오는 것은 첫 번째 화면의 움직임이 더 긴 전환을 필요로하는 많은 움직임이있었습니다.

31. 뒤로 버튼을 연결하십시오

Build prototypes with Adobe XD: Link up the back button — 뒤로 버튼을 연결하면 테스트 할 준비가됩니다. (이미지 크레디트 : 웹 디자이너)

이제 최종 화면에서 뒤로 버튼을 선택 하고이 백 화살표를 '검색'화면으로 뒤로 끌어 당깁니다. 이전 전환의 모든 설정을 기억해야합니다. 이제 Play 버튼을 클릭 하여이 작업을 수행 할 준비가되었습니다.

32. 자동 애니메이션

Build prototypes with Adobe XD: Auto-animate — 이제 자동 애니메이션이 작동하는 방법을 볼 수 있습니다. (이미지 크레디트 : 웹 디자이너)

이제 자동 애니메이션으로 볼 수있는 것은 이미지가 화면을 채우기 위해 확장되고 더 이상 필요없는 요소가 사라지는 동안 새로운 텍스트가 사라질 것입니다. 반대가 되돌릴 때 반대가 발생합니다. 이것은 세 화면에서 일하는 자동 애니메이트를 볼 수있는 좋은 방법을 제공합니다.

33. 프로젝트를 저장하십시오

Build prototypes with Adobe XD: Save the project — 프로젝트의 로컬 복사본을 저장하는 것을 잊지 마십시오. (이미지 크레디트 : 웹 디자이너)

기본적으로 프로젝트는 자동으로 Creative Cloud에 저장되어야하지만 문제가있는 경우 사본을 자신만의 하드 드라이브에 저장하는 것이 좋습니다. 파일 & gt; 저장하고 위치를 자신의 컴퓨터로 변경하고 적절한 이름으로 프로젝트를 이름을 지정하십시오.

34. 프로젝트 공유

Build prototypes with Adobe XD: Sharing the project — 공유 버튼을 사용하여 프로젝트를 다른 사람들에게 보내십시오. (이미지 크레디트 : 웹 디자이너)

프로토 타이핑의 전체 요점은 다른 사람들에게 프로젝트를 테스트하는 것입니다. 다행스럽게도 XD 인터페이스의 오른쪽 상단에있는 공유 버튼이 있습니다. 공유 단추를 클릭하고 나타나는 드롭 메뉴에서 검토를 위해 공유 옵션을 선택하십시오.

35. 프로토 타입을 게시하십시오

Build prototypes with Adobe XD: Publish prototype — 사람들이 브라우저에서 프로젝트를 테스트 할 수 있도록 공개 링크를 만듭니다. (이미지 크레디트 : 웹 디자이너)

다음 화면에서 자동 애니메이션 지원이 웹에서 아직 사용할 수 없지만 곧 제공 될 것이라고 들었습니다. 공용 링크 만들기를 클릭 한 다음 오른쪽 상단 링크를 클릭하여 웹 브라우저에서 공용 링크를 방문하십시오. 프로토 타입을 사용하여 음성 명령을 사용하려면 스페이스 바를 누른 상태로 유지해야합니다.

36. 비디오 버전

Build prototypes with Adobe XD: Video version — 또는 인터페이스를 동영상으로 녹화 할 수 있습니다. (이미지 크레디트 : 웹 디자이너)

다른 프로토 타입은 인터페이스를 조치로 기록하여 공유 할 수 있습니다. 공유 버튼을 클릭하고 비디오 녹화를 선택하십시오. 이렇게하면 창이 열리고 닫을 때 화면의 녹화를 MP4 파일로 저장하는 메시지가 표시되며 프로토 타입을 공유하는 데 유용한 방법이됩니다.

이 기사는 원래 Creative Web Design Magazine의 문제 285에 게시되었습니다. 웹 디자이너 ...에 여기 문제를 구입하십시오 또는 웹 디자이너를 구독하십시오 ...에

관련 기사:

모바일 앱 디자인 : 초보자 가이드
vue.js로 앱을 만드는 방법
모바일 앱을 보딩하여 그립에 도착하십시오