Adobe CC가 와이어프레임을 만들 수 있다는 것을 누가 알았습니까?

와이어프레임은 웹사이트, 애플리케이션, 소프트웨어 제품 등 모든 사용자 인터페이스를 디자인하는 주요 단계입니다. 시각적 요소, 색상, 타이포그래피, 스타일 및 효과 형태의 방해 없이 콘텐츠 계층 구조와 사용자 경험을 정의하는 데 더 집중할 수 있습니다.

저충실도 와이어프레임 및 프로토타입을 수행하면 프로세스에서 더 일찍 그리고 더 자주 테스트하고 반복하는 데 도움이 됩니다. 저충실도 와이어프레임을 통해 디자이너는 더 빠르게 작업하고 사용자가 좋아할 제품을 개발할 수 있습니다.

야생에서 선택할 수 있는 다양한 와이어프레이밍 도구가 있습니다. 어떤 것을 선택하느냐는 개인의 선호도와 워크플로 스타일에 따라 달라집니다.

인쇄계에서 디지털 디자인으로 옮겨온 많은 디자이너들처럼 저도 Illustrator, InDesign, Photoshop과 같은 Adobe 응용 프로그램의 전문가입니다. 언제 어디서나 효율적이고 직관적으로 사용할 수 있습니다(한밤중에 누군가 나를 깨워 커피 한 잔 주기를 거부하더라도).

당연히 이러한 다용도 응용 프로그램은 웹 및 응용 프로그램 시각적 디자인을 수행하는 데 사용하는 도구가 되었습니다. 따라서 워크플로를 가장 효율적으로 만들기 위해 와이어프레이밍에도 사용합니다.

각 프로젝트에서 저는 보통 종이에 매우 대략적인 스케치를 하거나 사무실 책상 근처에 있지 않은 경우 iPad 또는 스마트폰 화면에서 디자인을 시작합니다. 이 스케치는 선택한 개념에 대한 내 생각을 집중시키기 위한 것입니다. 클라이언트는 아마 그들 중 어느 것도 보지 못할 것입니다. 내 아이디어가 효과가 있다고 확신하면 와이어프레임으로 이동합니다. 저는 일반적으로 Adobe Illustrator와 InDesign을 함께 사용합니다. 대부분의 UI 키트 요소를 만드는 데 Illustrator를 사용하고 와이어프레임 자체를 만드는 데 InDesign을 사용합니다.

기사 뒷부분에서 이러한 도구를 와이어프레이밍 워크플로에 통합하는 방법에 대한 단계별 프로세스를 설명하겠지만 세부 사항을 설명하기 전에 InDesign을 기본 와이어프레이밍 도구로 사용할 때의 장단점을 보여드리겠습니다. .

Adobe InDesign을 와이어프레임 및 프로토타이핑 도구로 사용할 때의 장단점

한동안 Adobe InDesign은 데스크탑 출판 응용 프로그램일 뿐만 아니라 디지털 출판 및 EPUB 제작에도 널리 사용되었습니다. 와이어프레이밍에도 적합한 도구인 몇 가지 이유가 있습니다.

• 마스터 페이지 – 마스터 페이지를 사용하여 탐색, 머리글, 바닥글 등과 같은 전역 디자인 요소를 빠르고 일관되게 적용할 수 있습니다. 필요한 만큼 마스터 페이지를 만들 수 있으며, 그 위에 하나의 마스터가 다른 마스터를 기반으로 할 수 있습니다.
• 솔리드 그리드 지원 – 다양한 종류의 그리드를 쉽게 생성하고 적용할 수 있으며, 기둥을 보완하고, 모듈을 생성하기 위한 수평 및 수직 가이드, 더 큰 복잡성과 정밀도를 위한 하위 그리드를 생성할 수 있습니다.
• 대체 레이아웃 - 동일한 파일에서 여러 장치 및 방향에 대한 와이어프레임을 활성화합니다.
• CC 라이브러리 – 일반적으로 사용되는 개체, 색상, 문자 및 단락 스타일과 같은 다양한 재사용 가능한 자산 라이브러리를 생성합니다. InDesign, Illustrator, Photoshop 또는 Adobe Capture 모바일 앱 중 원하는 대로 에셋을 만들 수 있습니다.
• 레이어 – 와이어프레임에서 선택적으로 개체와 콘텐츠를 구성, 그룹화, 표시/숨기기, 잠금/잠금 해제하는 기능을 제공합니다. 여러 페이지로 구성된 InDesign 문서의 모든 페이지에는 레이어 수와 순서가 동일합니다. 레이어에 대한 모든 변경 사항은 가시성, 스택 순서 또는 삭제와 같은 모든 페이지에 반영됩니다.
• 스타일 및 표 – InDesign 스타일을 사용하여 텍스트, 개체 및 표의 모양을 완벽하게 제어할 수 있습니다. 스타일은 문서 전체에서 원하는 서식을 쉽게 계단식으로 배열할 수 있는 기능을 제공하여 서로 상속될 수 있습니다. 와이어프레임 콘텐츠 요소 또는 레이아웃 목적의 도우미로 사용할 테이블을 만들고 형식을 지정하는 것은 매우 간단합니다.
• Typekit 통합 – 고화질 목업에서 데스크탑과 동기화되는 모든 Typekit 글꼴을 사용할 수 있습니다.
• 상호 작용 및 애니메이션 – Adobe InDesign의 내장 상호 작용 및 애니메이션 기능을 사용하여 상호 작용 프로토타이핑을 위한 웹 또는 응용 프로그램 디자인 요소의 다양한 상태를 만들 수 있습니다. 대부분의 사람들은 디지털 출판 솔루션 및 고정 레이아웃 EPUB 내보내기를 위한 매거진을 만들 때 이러한 기능을 사용하지만 프로토타이핑에도 적합합니다.
• 내보내기 옵션 – InDesign은 사용자가 만든 와이어프레임과 프로토타입을 다양한 형식으로 내보낼 수 있습니다. 대부분의 경우 대화형 PDF 형식을 선택할 수 있지만 Publish Online 기능을 사용하여 문서를 최신 데스크톱 및 모바일 브라우저에서 볼 수 있는 대화형 HTML로 변환할 수도 있습니다. 안타깝게도 Publish Online을 사용하여 내보내기를 제어할 수 있는 권한이 많지 않으며 내보낸 파일은 Adobe 서버에서 호스팅됩니다. 프로토타입 URL을 클라이언트와 공유하거나 사이트에 포함할 수 있습니다. 더 많은 제어 및 HTML5로 직접 내보내기를 위해 Ajar Productions의 in5 확장을 사용할 수 있습니다.

Adobe InDesign 에는 와이어프레임 및 프로토타이핑 도구로 사용할 수 있는 많은 장점이 있지만 다음과 같은 단점도 있습니다.

• 사전 정의된 와이어프레임 템플릿 및 요소 부족 – InDesign은 와이어프레임 도구가 아니므로 템플릿과 개체 자산을 직접 만들고 준비해야 합니다. (이 문서의 뒷부분에서 이 단계를 처리하는 방법을 보여 드리겠습니다.) 좋은 소식은 이 작업의 대부분이 한 번만 수행되고 몇 시간 후에 작업을 바로 시작할 수 있다는 것입니다. 인디자인 와이어프레임. 또한 인터넷에서 다운로드할 수 있는 에셋과 와이어프레임 키트가 많이 있으므로 모든 것을 직접 그릴 필요가 없습니다.
• 상호 작용 및 애니메이션 기능은 제한적입니다 . 페이지를 쉽게 연결하고 일부 상호 작용 및 애니메이션을 추가할 수 있지만 프로세스에 시간이 오래 걸릴 수 있습니다. 간단한 상호 작용 도구 중 일부는 매우 직관적이지 않습니다. InDesign 상호 작용 기능을 사용하지 않은 경우 이를 효율적으로 적용하려면 약간의 학습 곡선을 극복해야 합니다.
• InDesign 문서는 계층화된 PSD 파일로 직접 내보낼 수 없습니다 . Adobe Photoshop에서 시각적 디자인을 수행하고 디자인을 빌드하기 위해 와이어프레임 요소를 분리하려면 먼저 와이어프레임을 PDF로 내보내야 합니다. 그런 다음 Illustrator에서 PDF를 열고 계층화된 PSD로 다시 내보내야 합니다. Mac에서 작업하는 사람들은 Rob Day가 작성한 무료 스크립트를 사용하여 InDesign 파일을 계층화된 PSD로 저장할 수도 있습니다.

좋은 와이어프레임 준비는 작업의 절반입니다.

작업 환경을 미세 조정하여 시작하십시오. 이러한 종류의 작업을 위해 Illustrator 및 InDesign에 아직 저장된 작업 영역이 없는 경우 새로 만드십시오. Illustrator에서 미리 정의된 웹 작업 영역으로 시작하여 원하는 대로 조정합니다. 자주 사용하지 않는 패널을 닫고 사용할 패널을 연 다음 작업 스타일에 맞게 배열합니다.

완료되면 창 > 작업 영역 > 새 작업 영역...을 선택하여 작업 영역을 저장합니다. 디지털 출판 작업 영역을 스타터로 사용하여 InDesign에서 동일한 작업을 수행합니다.

와이어프레임/목업/프로토타입 키트 조립

Illustrator 및 InDesign을 사용하는 효율적인 와이어프레이밍 워크플로를 사용하려면 먼저 사용자 인터페이스 에셋 키트를 만드는 데 시간을 투자해야 합니다. Adobe Creative Cloud 도입 이후 CC Libraries는 모든 UI 키트 구성 요소를 저장하는 가장 좋은 방법입니다.

와이어프레임 및 프로토타입 제작을 위해 하나 이상의 라이브러리를 생성할 수 있습니다. 예를 들어 웹 사이트 와이어프레이밍을 위한 라이브러리 하나, iOS 응용 프로그램용 라이브러리, Android 응용 프로그램용 라이브러리 등을 만들 수 있습니다.

Adobe CC 라이브러리를 만들려면 라이브러리 패널을 열고 패널의 햄버거 메뉴에서 새 라이브러리 만들기를 선택합니다. 라이브러리에 넣은 에셋은 Adobe ID로 로그인하는 모든 장치의 다른 Adobe 데스크탑 또는 모바일 앱에서 만들고 사용할 수 있습니다. 즉, iPad 또는 iPhone에서 프로젝트를 시작하고 사무실의 데스크탑 컴퓨터에서 계속하며 모든 장치에서 사용할 수 있는 동일한 자산을 사용하여 가정용 랩톱에서 마지막 순간에 변경할 수 있습니다.

더 큰 팀의 일원으로 작업하는 경우 라이브러리 자산을 팀 구성원 간에 공유할 수 있습니다. 라이브러리에는 색상, 그래픽, 레이어 스타일(Photoshop만 해당), 단락 및 문자 스타일이 포함될 수 있습니다. 해당 요소가 선택된 CC 라이브러리 패널 하단의 해당 버튼을 클릭하여 라이브러리에 자산을 추가합니다. 그래픽 자산을 아트보드에서 라이브러리 패널로 직접 드래그하여 추가할 수도 있습니다.

라이브러리의 자산은 범주별로 구성됩니다. 모범 사례를 따르고 각 자산의 이름을 의미 있는 이름으로 바꾸십시오. 라이브러리는 검색 가능하며 이름의 시작 부분을 입력하여 자산을 찾으면 나중에 특히 라이브러리에 다양한 항목이 있는 경우 시간을 엄청나게 절약할 수 있습니다. 자산의 이름을 변경하려면 자산을 두 번 클릭하고 새 이름을 입력하십시오.

와이어프레임 키트 구성요소 생성

Adobe InDesign에는 Illustrator와 매우 유사한 몇 가지 기본 그리기 도구가 있지만 Illustrator는 와이어프레임의 다양한 요소를 그리는 데 훨씬 더 나은 선택입니다. 일반적으로 Illustrator의 기본 기하학적 모양보다 복잡한 드로잉이 필요한 모든 키트 요소를 만듭니다. InDesign에서 간단한 버튼과 같이 레이아웃에서 변경해야 하는 텍스트가 포함된 더 간단한 요소를 만듭니다.

우선 탐색 요소, 이미지, 비디오 프레임 및 텍스트 상자를 포함한 페이지 요소, 아이콘, 아바타, 양식 요소 및 기타 모든 인터페이스 요소와 같이 와이어프레임에 필요한 모든 요소의 목록을 만드십시오. 목록이 완성되면 Illustrator 및 InDesign으로 이동하여 해당 요소를 만들 수 있습니다.

와이어프레임 또는 목업 키트 구성요소에 대한 새 문서를 작성하여 시작하십시오. Illustrator에서 웹/장치 프로필 또는 새 문서 대화 상자에서 웹/디지털 출판 의도를 선택했는지 다시 확인하십시오. 이렇게 하면 픽셀이 단위로 사용되고 색상 모드가 RGB로 설정됩니다.

와이어프레임 키트 자산은 너무 상세하지 않으면서 표현하는 것에 대한 빠른 시각적 신호를 제공해야 하므로 가능한 한 단순하게 만드십시오. 바람직하게는 몇 가지 회색 음영의 매우 제한된 색상 팔레트를 사용해야 합니다. 더 중요한 요소를 더 어두운 음영으로 색칠하거나 더 높은 대비를 주어 시각적으로 강조합니다.

충실도가 높은 모형 또는 프로토타입의 경우 각 프로젝트의 해당 색상 팔레트를 사용하는 보다 자세한 요소로 UI 키트를 만드십시오. 색상 팔레트에 쉽게 액세스하려면 CC 라이브러리에 추가하십시오.

CC Libraries의 Adobe Illustrator 에셋

Illustrator에서 라이브러리에 추가한 에셋은 기본적으로 연결됩니다(Adobe CC 2015부터). 즉, Illustrator에서 라이브러리 자산을 수정하면 사용된 모든 인스턴스에 변경 사항이 반영됩니다. 연결되지 않은 자산을 문서에 추가하려면 Option/alt 키를 누른 상태에서 패널에서 끌어다 놓습니다.

InDesign에서 연결된 Illustrator 자산을 사용하는 경우 문서를 표준 모드에서 볼 때 왼쪽 상단 모서리에 작은 구름 아이콘이 있습니다. 링크 패널에도 모두 나열됩니다. Illustrator에서 라이브러리 에셋을 수정하면 InDesign 문서의 변경 사항이 자동으로 수행되지 않습니다. 구름 아이콘은 수정된 링크 느낌표 아이콘으로 대체되며 이 링크를 업데이트해야 합니다.

InDesign 문서에 배치한 InDesign 에셋은 연결되지 않습니다. 즉, 원본과 별도로 인스턴스를 편집할 수 있으며 원본 자산이 수정될 때 이러한 변경 사항은 이미 레이아웃에 배치된 자산에 반영되지 않습니다.

와이어프레임을 만들 때 다음 속성을 고려하십시오. 자산을 전체적으로 수정하고 업데이트해야 한다고 가정할 때 Illustrator에서 라이브러리에 자산을 추가하거나 개별적으로 수정하려는 경우 InDesign에서 자산을 추가합니다. Illustrator에서 그래픽을 만들고 InDesign에 복사/붙여넣기한 다음 필요한 경우 수정한 다음 라이브러리에 InDesign 자산으로 추가할 수 있습니다.

어떤 그래픽 자산이 어떤 응용 프로그램에서 생성되었는지 잊어버린 경우 목록으로 항목 표시를 사용하는 동안 라이브러리 패널에서 각 항목의 오른쪽을 확인하십시오.

컨텐츠 및 카피를 통한 Adobe InDesign의 유연성

와이어프레임에서 복사 및 타이포그래피를 쉽게 변경할 수 있도록 InDesign에서 텍스트 컨테이너를 만드십시오. InDesign에는 자리 표시자 텍스트로 텍스트 상자를 채우는 멋진 기능이 있습니다. 텍스트 상자를 그릴 때 마우스 오른쪽 버튼을 클릭하고 자리 표시자 텍스트로 채우기 를 선택합니다.

텍스트 상자를 드래그하여 다른 그래픽 요소와 마찬가지로 Adobe 라이브러리에 추가합니다. 나중에 이러한 텍스트 자산을 와이어프레임 레이아웃의 일부로 사용할 때 와이어프레임의 텍스트 상자와 내용을 수정할 수 있습니다.

InDesign에서 버튼 UI 요소를 만드는 것도 고려하십시오. 버튼을 만들려면 텍스트 프레임을 만들고 텍스트를 입력한 다음 개체 > 텍스트 프레임 옵션을 사용하여 삽입 간격을 정의합니다. 정렬 드롭다운 메뉴에서 원하는 옵션을 선택하여 상자 안에 있는 텍스트의 수직 정렬을 조정합니다.

자동 크기 조정 탭으로 전환하고 적절한 자동 크기 조정(아마도 너비 전용일 수 있음)과 편리한 참조점을 선택하십시오. InDesign에서 텍스트를 둘 이상의 줄로 나누지 않도록 하려면 줄 바꿈 없음 옵션을 선택합니다.

기존 리소스 사용

인터넷에서 사용할 수 있는 Adobe Illustrator 와이어프레이밍 및 프로토타이핑 UI 키트가 많이 있으며 기성품 솔루션을 원하는 경우 구입하거나 무료로 다운로드할 수도 있습니다. 완성된 프로젝트에서 파헤칠 수 있는 요소가 이미 있을 수 있습니다. 해당 문서를 열고 필요에 따라 이전에 만든 요소를 ​​조정한 다음 해당 라이브러리에 넣습니다.

iOS 또는 Android 애플리케이션과 같은 특정 플랫폼용으로 디자인하는 경우 해당 플랫폼의 휴먼 인터페이스 지침을 주의 깊게 읽고 적절한 자산을 사용해야 합니다. 키트에 다양한 플랫폼에 특정한 UI 요소가 있으면 편리할 수 있습니다.

실제 와이어프레이밍 프로세스를 시작하기 전에 라이브러리의 모든 미래 자산 또는 상태를 설명하는 데 너무 집중하지 마십시오. 나중에 자산을 라이브러리에 추가하고 이동하면서 이를 기반으로 구축할 수 있습니다.

InDesign 와이어프레임 템플릿 만들기

중요한 준비 단계가 하나 더 남아 있습니다. 와이어프레임을 만드는 데 사용할 InDesign 템플릿을 만듭니다. Web 또는 Digital Publishing 의도로 새 문서를 만드는 것으로 시작하고 디자인하려는 화면에 적절한 페이지 크기를 정의하십시오.

와이어프레임 요소를 배치할 때 일종의 그리드를 사용하는 것이 좋으므로 여백을 설정하고 원하는 열 수와 여백 공간을 설정하여 기둥 그리드를 만듭니다. 나중에 레이아웃 > 여백 및 단에서 페이지 패널에서 해당 마스터 페이지를 선택한 상태로 이러한 설정을 변경할 수 있습니다.

가로 안내선과 보완 세로 안내선이 필요한 경우 수동으로 만들거나 레이아웃 > 안내선 만들기를 사용하여 추가 격자를 만듭니다. 그리드를 생성할 때 Gridulator와 같은 온라인 그리드 계산기 도구 중 하나를 사용하는 것이 좋습니다.

또한 장치 모형을 와이어프레임의 프레임으로 사용하여 프레젠테이션 목적으로 추가 템플릿을 만들 수 있습니다. 한 InDesign 문서를 다른 문서에 연결할 수 있으므로 한 InDesign 문서에서 와이어프레임을 만든 다음 프레젠테이션을 위해 다른 문서에 배치할 수 있습니다.

처음에는 복잡해 보일 수 있지만 실제로는 매우 간단하고 효과적인 워크플로입니다. 실제 와이어프레임을 별도의 문서에 보관하면 승인된 와이어프레임에서 세련된 시각적 디자인으로 계속 구축하기가 더 쉬워집니다.

또한 와이어프레임을 배치하고 레이블과 설명을 추가하고 고객에게 최상의 솔루션을 보여줄 수 있는 프레젠테이션용 템플릿을 간단하게 생성할 수 있습니다. 와이어프레임 파일을 수정할 때 프레젠테이션 문서의 다른 링크처럼 업데이트하면 됩니다. 모든 변경 사항은 프레젠테이션에도 있습니다.

레이어 패널에서 사용자 인터페이스 요소, 대화형 기능, 제스처, 레이블 및 메모와 같은 다양한 종류의 콘텐츠에 대해 별도의 레이어를 준비할 수 있습니다. 특정 프로젝트에 더 많은 레이어가 필요한 경우 와이어프레임 프로세스 중에 언제든지 레이어를 쉽게 추가할 수 있습니다.

만들기가 끝나면 템플릿을 InDesign.indt 템플릿 파일로 저장합니다. 필요한 모든 템플릿이 저장되면 마침내 효율적으로 와이어프레이밍을 시작할 준비가 된 것입니다.

와이어프레임 구축

먼저 마스터 페이지부터 시작하십시오. 라이브러리에서 프로젝트의 모든 화면에서 동일할 모든 전역 요소를 드래그합니다. 웹 사이트를 디자인하는 경우 일반적으로 로고, 탐색 및 바닥글이 있는 머리글입니다. 하나 이상의 마스터 페이지를 만들 수 있고 서로 상속할 수 있으므로 마스터 페이지를 중첩할 수 있습니다.

예를 들어 프로젝트에 따라 하나의 UI 요소(예: 모달 또는 대화 상자 팝업)에 대한 마스터 페이지를 만든 다음 첫 번째 마스터를 기반으로 새 마스터를 만들어 달라야 하는 요소만 변경할 수 있습니다.

Command/Control + Shift를 누른 상태에서 마스터 요소를 클릭하지 않으면 일반 문서 페이지에서 마스터 요소를 선택, 변경 또는 삭제할 수 없습니다. 요소가 재정의되면 해당 매개변수를 변경하거나 레이아웃에서 완전히 삭제할 수 있습니다.

요소를 재정의하더라도 변경하지 않은 매개변수는 여전히 마스터에서 상속됩니다. 예를 들어, 색상을 변경하여 요소를 재정의하는 경우 해당 요소는 여전히 마스터에 연결되어 있으므로 크기가 변경되지 않습니다. 또한 마스터 페이지에서 변경하면 이전에 재정의한 요소에서도 수정됩니다.

와이어프레이밍 문서에 추가 페이지를 삽입할 때 해당 마스터를 기반으로 하는 것을 기억하십시오. 레이아웃에 이미 있는 페이지의 마스터를 변경해야 하는 경우 페이지 패널에서 해당 페이지를 선택하고 마우스 오른쪽 버튼을 클릭한 다음 페이지에 마스터 적용을 선택합니다. 라이브러리 자산을 사용하고 스마트 가이드 및 정렬 옵션을 사용하여 정렬하여 최종 UI 와이어프레임 레이아웃을 만듭니다.

둘 이상의 화면 크기에 대한 디자인을 만드는 경우 레이아웃 > 대체 레이아웃 만들기 또는 페이지 패널에서 대체 레이아웃을 만듭니다. 대체 레이아웃을 생성할 때 유동적인 레이아웃 규칙을 사용하여 페이지 요소를 한 크기와 방향에서 다른 크기와 방향으로 자동으로 채택하거나 수동으로 제어할 수 있습니다. 유동적 레이아웃 규칙을 적용하고 테스트하려면 페이지 도구를 사용하거나 창 > 대화형 > 유동적 레이아웃 패널을 엽니다.

상호 작용 추가

Adobe InDesign에는 와이어프레임이나 프로토타입을 만들 때 활용할 수 있는 다양한 상호 작용 기능이 있습니다. 포함할 기능은 와이어프레임, 프로토타입 또는 프레젠테이션에 필요한 최종 형식에 따라 다릅니다.

PDF로 내보내는 경우 상호 작용이 제한되지만 최소한 하이퍼링크 패널을 사용하여 화면 사이의 링크가 작동하도록 하여 화면을 생성할 수 있습니다. 링크로 사용할 요소를 선택하고 새 하이퍼링크 아이콘을 클릭합니다. 링크 대상 드롭다운 메뉴에서 페이지를 선택하고 원하는 페이지 번호를 입력합니다. 화면 간의 링크로 작동하려는 모든 항목에 대해 해당 작업을 반복합니다.

또한 마스터 페이지에 있는 개체에 하이퍼링크를 추가하여 시간을 절약할 수 있습니다. 마스터 페이지에 링크를 한 번 생성하면 문서의 모든 화면에서 작동합니다.

모든 그래픽, 텍스트, 이미지 또는 요소 그룹에서 버튼을 만들 수 있습니다. 선택한 개체에서 단추를 만들려면 창 > 대화형 > 단추 및 양식 패널을 사용하고 단추로 변환 아이콘을 클릭합니다.

버튼은 일반, 롤오버 및 클릭 모양에 대해 생성된 다양한 상태를 가질 수 있습니다. 버튼에 롤오버 또는 클릭 상태를 추가하려면 버튼 패널에서 해당 버튼을 클릭하고 각 상태에 대한 버튼 모양을 편집합니다. 버튼에 작업을 추가하려면 더하기 기호를 클릭하고 목록에서 선택합니다. SWF/EPUB의 작업은 대화형 PDF에서 작동하지 않는다는 점을 고려하십시오.

팝업 요소를 생성하려면 버튼 및 양식 표시/숨기기를 선택합니다. 트리거될 때까지 버튼을 숨기려면 트리거될 때까지 숨김 옵션을 선택합니다. 다중 상태 개체를 대화형 PDF에 포함할 수 있지만 먼저 SWF로 내보낸 다음 PDF 내보내기를 위해 InDesign 레이아웃에 다시 배치하는 경우에만 가능합니다. 이 작업 과정은 지루하고 모든 PDF 리더에서 PDF를 제대로 볼 수 없으므로 꼭 필요한 경우가 아니면 이 작업을 수행하지 마십시오.

InDesign CC 2015 Publish Online 기능을 사용하여 문서를 HTML 프로토타입으로 변환하려는 경우 애니메이션, 다중 상태 개체 및 SWF/EPUB 내보내기를 위한 모든 옵션을 포함하여 여러 버튼 동작과 같은 더 많은 대화형 옵션을 사용할 수 있습니다.

애니메이션 패널을 사용하고 드롭다운 메뉴에서 기본 제공 사전 설정 중 하나를 선택하고 속성을 설정하여 간단한 애니메이션을 추가할 수 있습니다. 하나의 개체에는 하나의 애니메이션만 적용될 수 있지만 더 추가해야 하는 경우 개체를 빈 상자로 그룹화하고 새로 생성된 개체에 새 애니메이션을 사용합니다.

다른 상태를 표시해야 하는 UI 요소의 경우 다중 상태 개체를 만듭니다. 각 상태에 대해 별도의 개체를 만듭니다. 개체는 단일 요소(그림, 텍스트 상자, 그래픽) 또는 여러 요소의 그룹일 수 있습니다. 창 > 대화형 > 개체 상태 패널을 열고 다중 상태 개체에 대해 만든 모든 개체를 선택한 다음 패널 맨 아래에 있는 새로 만들기 버튼을 클릭합니다.

다중 상태 개체를 만든 후에는 한 개체 상태에서 다른 상태로 이동하는 버튼을 만들어야 합니다. 다음 상태로 이동 또는 이전 상태로 이동 작업은 상태로 이동 작업으로 특정 개체 상태를 표시합니다.

와이어프레임/프로토타입에 스크롤 가능한 프레임을 갖고 싶다면 가장 쉬운 방법은 Ajar Productions의 Universal Scrolling Frames 확장을 사용하는 것입니다. 확장 프로그램을 다운로드하여 설치한 후 InDesign 패널로 사용할 수 있습니다. 스크롤 가능한 프레임의 경우 콘텐츠와 컨테이너에 대한 하나의 프레임을 만들어야 합니다.

스크롤 가능한 콘텐츠는 텍스트 프레임, 그림 또는 함께 그룹화된 여러 요소일 수 있습니다. 콘텐츠 및 컨테이너 상자 생성이 완료되면 콘텐츠를 선택하고 편집 > 잘라내기를 선택합니다. 그런 다음 컨테이너를 선택하고 편집 > 다음에 붙여넣기를 사용하여 내부에 내용을 붙여넣습니다. 컨테이너를 선택하고 Universal Scrolling Frames를 사용하여 원하는 스크롤 방향을 조정합니다.

버튼, 다중 상태 개체, 애니메이션 및 스크롤 가능한 프레임을 결합하여 풍부한 대화형 경험을 얻을 수 있습니다. InDesign에서 상호 작용을 테스트하려면 EPUB 상호 작용 미리 보기 패널을 사용합니다. 단일 페이지 또는 전체 문서를 미리 볼 수 있습니다. 필요에 따라 미리보기 패널을 확대합니다.

Adobe InDesign 대화형 기능을 사용하지 않은 경우 처음에는 약간의 학습 곡선이 있으므로 준비하십시오. 그러나 약간의 연습과 약간의 시행착오를 통해 빠르게 마스터할 수 있습니다.

완성된 문서 내보내기

와이어프레임과 프리젠테이션 파일 생성이 끝나면 남은 일은 고객에게 가능한 최선의 방법으로 훌륭한 아이디어를 보여주는 것뿐입니다. 이를 위해서는 클라이언트가 미리 볼 수 있는 형식으로 와이어프레임을 내보내야 합니다. InDesign 파일을 다양한 형식으로 내보낼 수 있지만 기능이 낮은 또는 충실도가 높은 프로토타입을 테스트하는 경우 대화형 PDF 또는 Publish Online 기능을 사용하게 될 것입니다. 대화형 PDF로 저장하려면 내보내기 대화 상자의 형식 드롭다운 메뉴에서 Adobe PDF(대화형)를 선택하고 필요에 따라 속성을 조정합니다. 포함하려는 대화형 요소가 있는 경우 양식 및 미디어를 선택하는 것을 잊지 마십시오. 클라이언트는 무료 Adobe Reader에서 PDF 와이어프레임을 보고 동일한 파일에 모든 의견을 작성할 수 있습니다.

InDesign에서 내보낸 PDF 문서를 사용하여 InVision(또는 PDF를 지원하는 다른 도구) 프로토타입을 만들 수도 있습니다. Marvel과 같은 표준 프로토타이핑 도구가 PDF를 가져올 수 없는 경우 InDesign 와이어프레임 페이지를 JPEG 또는 PNG 이미지로 내보내십시오.

다른 장치의 최신 브라우저에서 볼 수 있는 대화형 HTML 프로토타입을 내보내려면 파일 > 온라인 게시로 이동하거나 애플리케이션 표시줄에서 온라인 게시 버튼을 클릭하십시오. 문서가 온라인 게시를 위해 준비되고 업로드되면 문서 URL을 복사하여 이해 관계자와 공유하고 검토 프로세스를 시작할 수 있습니다. 게시된 프로토타입을 사이트에 포함할 수도 있습니다.

Publish Online 기능의 단점은 내보내기를 추가로 제어할 수 없고 파일이 항상 Adobe 서버에 저장된다는 것입니다. 또한 아직 미리보기 기능이므로 Adobe에서 어떤 방향으로 개발할지 또는 중단할지 여부를 알 수 없습니다.

와이어프레임/프로토타입을 내보내고 나면 테스트, 검토 및 반복 프로세스를 시작할 차례입니다.