단계 인쇄

이 기사에서는 다음 내용을 알아보실 수 있습니다:

• 앱이 완료되었을 때 모든 데이터를 인쇄하는 방법
• 인쇄에 적합한 형식으로 단계를 설계하는 방법
• 단계에서 사용자 정의 위젯을 인쇄하는 방법

귀사에서 생산 현장의 종이 기반 프로세스를 자동화하고 양식을 디지털화하기 시작하더라도, 데이터를 적절히 공유하기 위해 다양한 작업 결과를 인쇄해야 할 필요가 여전히 있을 수 있습니다.

앱 단계 인쇄

Tulip 앱의 데이터를 실시간으로 인쇄(또는 로컬 PDF로 저장)하려면 다음 네 가지 작업을 수행해야 합니다.

1. 원하는 인쇄 크기에 맞게 단계(또는 여러 단계)를 구성합니다.
2. 인쇄 시 체계적이고 이해하기 쉬운 형태로 표시되도록 단계를 설계합니다.
3. "인쇄" 트리거가 포함된 버튼을 추가합니다.
4. 단계의 크기가 페이지 공간을 최대한 채우도록 인쇄 설정을 맞춤 설정합니다.

"스텝 인쇄" 트리거 액션을 사용하면 단일 스텝이나 전체 스텝 그룹을 한 번에 인쇄할 수 있습니다. 각 스텝은 별도의 페이지에 인쇄됩니다.

단계 해상도 구성

우선, 많은 사용자는 "보고서"라는 단계 그룹을 만들고, 한 번에 인쇄하고자 하는 모든 단계를 해당 단계 그룹에 추가하는 것을 선호합니다.

다음과 같이 구성됩니다:

그런 다음, 이 그룹에 포함된 단계들이 원하는 해상도로 인쇄되도록 적절히 구성하는 것이 중요합니다. 앱에서 컨텍스트 창(Context Pane)의 '단계(Step)' 탭으로 이동하여 '단계 해상도(Step Resolution)'를 선택합니다.

측면 패널에서 원하는 용지 크기에 맞는 해상도를 선택합니다.

PDF의 경우, 레터 세로 방향이 가장 적합한 경우가 많습니다. 용지 크기를 일치시키면 앱 화면이 한 페이지 전체로 인쇄됩니다.

단계 디자인하기

앱에서 단색이 많이 포함된 기본 레이아웃을 사용하고 계실 수 있습니다. 이는 작업자에게 정보를 전달하는 데는 효과적이지만, 다채로운 색상의 단계에 프린터 잉크를 낭비하고 싶지는 않으실 것입니다.

대신, 보고서 단계에서 모든 기본 레이아웃 요소를 제거하고 텍스트에 집중하는 것이 좋습니다.

다음은 인쇄에 최적화된 단계의 예시입니다:

이 단계에는 앱의 데이터 7개와 테스트 결과 5개가 포함되어 있습니다. 왼쪽 상단과 오른쪽 하단에 있는 ‘인쇄’ 및 ‘메뉴’ 버튼은 흰색 배경으로 되어 있어 컬러 잉크가 필요하지 않습니다.

이 단계는 Tulip의 다음과 같은 기능을 활용합니다:

• 간단한 시각적 레이아웃을 만들기 위한그리드 위젯
• 단계에 다양한 변수의 값을 삽입하기 위한변수 텍스트
• 사용자 정의 색상이 적용된버튼

인쇄 버튼 추가

인쇄 버튼을 사용하려면 하나의 트리거 액션이 필요합니다. 이 기능은 종종 앱 완료와 결합되지만, 동일한 트리거 내에서 두 작업을 동시에 수행할 수는 없습니다. 앱 완료를 트리거하려면 별도의 버튼을 생성해야 합니다.

다음은 운영자가 단계를 인쇄하고 “보고서” 단계 그룹 다음 단계로 이동하여 앱을 완료할 수 있도록 하는 트리거의 예시입니다:

• "단계 인쇄" "보고서"
• "단계로 이동" "다음"

또한 일반 단계에 "인쇄" 버튼을 배치하여, 운영자에게 단계를 표시하지 않고도 전체 단계 그룹을 한 번에 인쇄할 수도 있습니다.

이렇게 하면 컴퓨터의 기본 인쇄 옵션이 열립니다.

인쇄 설정 사용자 지정

인쇄 대화 상자

운영자는 다양한 크기의 화면에서 Tulip Player를 사용합니다. 따라서 Tulip Player가 실행 중이고 단계 인쇄 또는 저장이 필요한 각 컴퓨터에서 다음 작업을 수행해야 합니다.

1. 인쇄할 스텝의 해상도에 맞게 페이지 레이아웃을 변경하십시오. 예: Letter 세로 방향.
2. 운영자가 나중에 쉽게 선택할 수 있도록 이 설정을 "사전 설정"으로 로컬에 저장하십시오:

앱이 올바르게 인쇄되는지 확인하려면, 인쇄하기 전에 인쇄 대화 상자의 ‘미리 보기’ 옵션을 사용하여 앱이 어떻게 표시될지 확인해야 합니다.

PDF의 필드 채우기

또한, 단계(Step)에 PDF를 삽입한 다음, PDF 위의 적절한 위치에 변수 텍스트 위젯을 배치하여 "입력된" PDF를 인쇄할 수도 있습니다. 이 단계는 Tulip Player에 표시된 대로 인쇄됩니다.

방법은 다음과 같습니다:

1. 적절한 해상도로 크기가 조정된 스텝에PDF를 삽입합니다.
2. PDF의 해당 필드 위에 변수 텍스트 위젯을 추가합니다. 이 위젯들은 플레이어에서 앱을 사용할 때 동적으로 채워집니다.
3. PDF에 여러 페이지가 있는 경우, PDF의 각 페이지마다 Tulip에 새 단계를 추가하고 위의 과정을 반복합니다.

앱 데이터를 로컬에 PDF로 저장하기

인쇄 대화 상자는 앱 데이터를 로컬 컴퓨터에 PDF로 저장하는 가장 좋은 방법이기도 합니다. 시스템 대화 상자에서 ‘인쇄’를 누르는 대신, ‘PDF로 저장’을 선택하여 단계와 실시간 데이터를 로컬 파일에 저장하십시오.

기술 참고 사항

인쇄 시 제대로 작동하지 않는 앱 콘텐츠에 대한 규칙.

• 변수 텍스트 위젯에서 ‘현재 단계’를 참조하는 내용은 ‘인쇄’ 버튼을 누를 때 열려 있는 단계에서만 작동합니다.
• '단계 진입 시' 트리거는 인쇄된 단계에서는 실행되지 않으므로, '인쇄'를 누르기 전에 올바른 데이터가 이미 추가되어 있는지 확인해야 합니다.
• 기계 속성 위젯: 이 위젯은 제대로 작동하는 경우가 드뭅니다. 마지막으로 알려진 출력을 캡처하려는 보고서의 경우, 기계 출력에 트리거를 설정하여 출력을 로컬 변수에 저장한 다음, 사용자 정의 위젯을 통해 표시하는 것이 더 좋은 방법입니다.
• 동영상: YouTube 동영상의 경우 배너 이미지가 로드되지 않습니다.

사용자 정의 위젯 인쇄

Player 단계를 인쇄할 때, 각 사용자 정의 위젯은 현재 콘텐츠의 정적 스냅샷으로 포함됩니다. 스냅샷을 캡처하면 브라우저가 내장된 프레임을 직접 인쇄할 수 없는 경우에도 위젯이 안정적으로 인쇄됩니다.

위젯 스냅샷 동작

• 스냅샷은 인쇄가 시작되는 시점의 위젯 상태를 반영하며, 여기에는 화면에 표시된 텍스트, 레이아웃, 색상, 양식 값, 이미지 및 표준 2차원 캔버스 콘텐츠가 포함됩니다.
• 동일한 사용자 정의 위젯이 단계에 두 번 이상 배치된 경우, 각 위젯 배치마다 고유한 스냅샷이 인쇄됩니다.
• 인쇄된 스냅샷은 정적입니다. 즉, 인쇄 중에는 위젯의 자바스크립트가 다시 실행되지 않습니다. beforeprint 핸들러나 기타 인쇄 시점 자바스크립트에 의존하는 변경 사항은 나타나지 않습니다. 인쇄가 시작되기 전에 위젯에 적용된 변경 사항은 유지됩니다.
• 인쇄 보기를 정적 상태로 유지하기 위해 스냅샷이 정리됩니다. 인라인 스크립트, 인라인 이벤트 핸들러 속성(예: onclick, onerror, onload) 및 javascript: URL이 제거됩니다. 이는 일반 텍스트, 레이아웃, 스타일, 이미지 또는 양식 값에는 영향을 미치지 않습니다.
• 위젯 자체의 스타일시트는 캡처되어 다시 적용되므로 스타일링이 유지됩니다. @media print 규칙을 포함한 직접 CSS는 인쇄된 스냅샷에 영향을 미치므로, 인쇄 시 반영하고자 하는 모든 표시 변경 사항에는 CSS를 사용하십시오.

인쇄된 위젯은 독립적으로 렌더링됩니다. 화면에서와 마찬가지로, 인쇄된 페이지의 나머지 부분에 대한 스타일에 영향을 주지도 않고, 그로부터 스타일을 상속받지도 않습니다. 또한 인쇄 보기는 깨끗한 스타일 기준선에서 시작하므로, 위젯이 특정 글꼴이나 색상에 의존하는 경우 기본값을 가정하지 말고 위젯 자체의 CSS에서 명시적으로 설정해야 합니다.

예상 결과

인쇄는 위젯에 표시되는 내용을 최대한 정확하게 재현하는 것을 목표로 합니다.

가장 예측 가능한 출력 결과를 얻으려면:* 필수 인쇄 콘텐츠를 위젯의 메인 문서에 포함시키세요.* 인쇄 스타일링에는 직접 CSS를 사용하세요.* 인쇄가 시작되기 전에 중요한 이미지와 데이터가 표시되는지 확인하세요.* 필수 인쇄 정보가 다음 요소에 의존하지 않도록 하세요:* 인쇄 시점의 JavaScript, 인라인 이벤트 핸들러, 비디오 또는 WebGL 프레임, 중첩된 웹 페이지, 외부에서 가져온 스타일.

제한 사항

인쇄된 사용자 정의 위젯은 완벽하게 캡처된 것이 아니며, 외부 리소스나 브라우저별 렌더링에 의존하는 콘텐츠는 다르게 표시될 수 있습니다.

• 위젯의 메인 문서에 있는 콘텐츠만 캡처됩니다. 웹 컴포넌트, 사용자 정의 요소 또는 섀도 DOM(예: Lit)을 통해 표시되는 UI를 렌더링하는 위젯은 캡처되지 않으며, 화면상에서는 올바르게 표시되더라도 인쇄 시 비어 있는 상태로 출력됩니다. 일반적인 라이브러리(예: Chart.js, D3, jQuery)로 구축된 위젯은 메인 문서에 렌더링되므로 영향을 받지 않습니다. 중첩된 iframe 역시 캡처되지 않습니다.
• @media print 규칙을 포함한 직접 읽을 수 있는 CSS는 보존됩니다. 외부 스타일시트와 CSS @import 규칙은 최선의 노력을 기울여 처리되지만 로드되지 않을 수도 있습니다.
• 위젯 스냅샷은 플레이어의 인쇄 페이지에 의해 로드되며, 해당 보안 정책을 준수해야 합니다:
• 따라서 위젯 자체 프레임 내에서 로드되는 리소스(예: 이미지, 글꼴, 스타일, 배경 이미지 또는 미디어 파일)는 인쇄 시 차단될 수 있습니다.
• 위젯 프레임에 연동된 인증, 혼합 콘텐츠 규칙, 만료되는 URL 및 상대 URL 역시 리소스 로딩을 방해할 수 있습니다.
• 느린 외부 리소스는 누락될 수 있습니다. 인쇄는 자산이 로드될 때까지 잠시 기다리지만, 모든 리소스의 로드가 완료되었음을 보장하지는 않습니다.
• 2차원 캔버스는 픽셀을 캡처할 수 있을 때만 인쇄됩니다: 크로스 오리진(오염된) 캔버스는 비어 있을 수 있으며, WebGL 캔버스는 일반적으로 캡처되지 않습니다.
• 비디오의 현재 프레임은 캡처되지 않습니다: 비디오, 오디오, 중첩된 웹 페이지, 애니메이션, 텍스트 선택, 포커스, 호버 상태 및 스크롤 위치는 표시되지 않을 수 있습니다.
• 현재 스냅샷을 캡처할 수 없는 경우, 위젯은 현재 상태가 아닌 초기 구성된 HTML 및 CSS를 사용하여 출력됩니다.

아래 표는 일반적으로 출력되는 위젯의 차이점과 그 가능한 원인을 요약한 것입니다:

추가 정보

• 앱의 모든 단계를 인쇄하는 방법

{{snippet.원하는 정보를 찾으셨나요?}}