본문으로 건너뛰기

스크린샷 요구사항 - PDF Connect v3 문서

우선순위 1: 핵심 워크플로(필수) 📸​

메인 앱 인터페이스​

  1. PDF Connect v3 대시보드 - 최신 디자인이 반영된 메인 화면
  2. PDF 라이브러리 관리 - 검색/태그/일괄 작업이 포함된 그리드 뷰
  3. PDF 상세 페이지 - 개별 PDF 화면(연결(Link) 버튼이 강조된 상태)

범용 연결(Universal Linking)​

  1. 페이지 유형 드롭다운 - 지원되는 모든 페이지 유형(상품, 컬렉션, 게시글, 페이지, 홈페이지, 검색)
  2. 리소스 선택 모달 - 검색 바, 리소스 목록, 페이지네이션, 일괄 선택
  3. 연결 진행 중 화면 - 로딩 상태 및 확인 메시지
  4. 연결된 리소스 표시 - 연결된 페이지 목록과 연결 해제(Unlink) 옵션

게시(Publishing) 시스템​

  1. 게시 옵션 모달 - 3가지 표시 방식이 나란히 보이도록
  2. 테마 편집기 연동 - 템플릿에 PDF 블록을 추가하는 과정
  3. 블록 설정 - 표시 방식별 설정 패널

표시 방식 실제 예시​

  1. 임베디드 PDF 예시 - 상품 페이지에 임베디드 PDF가 표시된 화면
  2. PDF 버튼 예시 - 팝업 오버레이가 열린 버튼 화면
  3. PDF 목록 예시 - 여러 PDF가 정리된 목록으로 표시된 화면

우선순위 2: 고급 기능(중요) 📸​

멀티 블록 전략​

  1. 멀티 블록 상품 페이지 - 같은 페이지에 임베디드 + 버튼 + 목록을 함께 사용한 예시
  2. 템플릿 상태 개요 - 어떤 템플릿에 블록이 구성되어 있는지 보여주는 화면
  3. 일괄 선택 인터페이스 - 여러 항목 선택 및 카운터 표시

모바일 경험​

  1. 모바일 PDF 보기 - 모바일에서 3가지 표시 방식이 모두 동작하는 화면
  2. 모바일 관리자 화면 - 모바일에서 연결 및 게시 작업을 진행하는 화면
  3. 반응형 동작 - 화면 크기에 따라 PDF가 적응하는 방식

워크플로 예시​

  1. 전/후 비교 - 기존 인터페이스 vs 신규 인터페이스
  2. 페이지 간 연결 - 동일한 PDF를 여러 페이지 유형에 연결한 예시
  3. 검색 기능 - 실시간 검색 결과 화면

우선순위 3: 보조 콘텐츠(있으면 좋음) 📸​

사용 사례 예시​

  1. 상품 문서 - 기술 매뉴얼(설명서) 연동 예시
  2. 컬렉션 카탈로그 - 컬렉션 페이지에 PDF 카탈로그가 표시된 화면
  3. 블로그 리소스 - 다운로드 가능한 PDF가 포함된 게시글(Article)
  4. 홈페이지 기능 - 홈페이지에 회사 브로셔가 표시된 예시

오류 및 엣지 케이스​

  1. 로딩 상태 - 작업이 처리되는 동안 사용자에게 보이는 화면
  2. 오류 메시지 - 명확한 오류 안내
  3. 빈 상태(Empty State) - 콘텐츠를 추가하기 전 신규 사용자에게 보이는 화면

분석 및 성능​

  1. 사용 분석 - PDF 참여 지표(가능한 경우)
  2. 성능 지표 - 속도 및 최적화 데이터
  3. 템플릿 분석 - 어떤 템플릿이 가장 많이 사용되는지

스크린샷 사양​

기술 요구사항​

  • 해상도: 문서에서 선명하게 보이도록 High-DPI
  • 브라우저: 렌더링 일관성을 위해 Chrome 또는 Safari
  • 창 크기: 표준 데스크톱(1920x1080) 및 모바일(375x812)
  • 테마: 데모용으로 깔끔하고 전문적인 Shopify 테마

콘텐츠 요구사항​

  • 샘플 PDF: 현실적인 비즈니스 문서(매뉴얼, 카탈로그, 가이드)
  • 테스트 스토어: 상품/컬렉션/게시글/페이지에 관련 콘텐츠가 채워진 상태
  • 정리된 데이터: 전문적인 이름/설명, 체계적으로 정리된 콘텐츠

브랜딩 요구사항​

  • UI 일관성: 모든 스크린샷은 동일한 앱 버전을 보여야 함
  • 전문적인 인상: 깔끔하고 정돈된 인터페이스 연출
  • 명확한 초점: 시연하려는 기능이 무엇인지 분명하게 보이도록

스크린샷 워크플로​

준비 단계​

  1. 현실적인 콘텐츠로 테스트 스토어 구성
  2. 전문적인 네이밍으로 샘플 PDF 생성
  3. 3가지 표시 방식을 모두 구성
  4. 모든 기능이 정상 동작하는지 테스트

촬영 단계​

  1. 데스크톱 스크린샷을 원본 해상도로 촬영
  2. 핵심 화면의 모바일 버전도 촬영
  3. 로딩/오류 상태 화면도 함께 기록
  4. 필요 시 전/후 비교 화면 촬영

후처리 단계​

  1. 관련 UI 요소가 중심이 되도록 크롭
  2. 도움이 되는 경우 콜아웃/주석 추가
  3. 모든 이미지의 시각적 스타일 일관성 유지
  4. 웹 배포를 위해 파일 크기 최적화

문서에서의 활용​

배치 전략​

  • 히어로 이미지: 문서 시작 부분에 주요 UI 변화 화면 배치
  • 단계별 안내: 튜토리얼에서 각 액션마다 스크린샷 제공
  • 비교: 중요한 개선 포인트는 전/후 비교로 제공
  • 참고: 위치/외형을 빠르게 확인할 수 있는 레퍼런스 이미지 제공

대체 텍스트(Alt Text) 요구사항​

접근성을 위해 모든 스크린샷에는 설명형 alt 텍스트가 필요합니다.

  • 인터페이스에 무엇이 보이는지 설명
  • 이미지에서 보이는 핵심 텍스트 포함
  • 중요한 UI 요소 또는 액션을 명시
  • 가능하면 125자 이내로 유지

파일 네이밍 규칙​

관리를 쉽게 하기 위해 일관된 이름을 사용합니다.

  • pdf-guru-v3-[feature]-[context].png
  • 예시: pdf-guru-v3-linking-page-types.png
  • 예시: pdf-guru-v3-display-embedded-product.png

이 체계적인 방식은 향상된 PDF Connect v3 기능의 품질에 걸맞은, 포괄적인 시각 문서화를 보장합니다.