[SvelteKit] 이미지 드래그앤드롭 PDF 변환 웹 프로그램 만들기

 

안녕하세요! 오늘은 스벨트킷(SvelteKit)을 활용하여 사용자가 업로드한 이미지들을 하나의 PDF 파일로 병합하고 다운로드할 수 있는 웹 애플리케이션 개발 가이드를 정리해 보려고 합니다.

특히 데스크톱뿐만 아니라 모바일 환경 최적화, 작업 진행 중 세련된 애니메이션, 그리고 서버 용량 관리를 위한 24시간 임시 파일 자동 삭제(TTL) 기능까지 포함된 완성도 높은 풀스택 프롬프트와 설계 구조입니다.

🛠️ 기술 스택 및 개발 프레임워크

• Framework: SvelteKit (최신 안정 버전)
• Styling: Tailwind CSS (반응형 및 모바일 터치 최적화)
• PDF Library: pdf-lib 또는 jsPDF (서버/클라이언트 환경에 맞춤)
• Storage: Node.js 내부 스케줄러 기반의 24시간 자동 임시 파일 삭제 로직

📋 핵심 기능 및 요구사항 요약

1. 반응형 & 모바일 최적화 드래그앤드롭

• 데스크톱 마우스 드래그는 물론, 모바일 터치 환경에서도 자연스럽게 이미지를 업로드할 수 있는 UX를 제공합니다.
• 업로드된 이미지는 썸네일 그리드 리스트로 시각화됩니다.

2. 변환 애니메이션 및 상태 관리

• 대기: 이미지 업로드 및 'PDF 만들기' 버튼 활성화.
• 진행 중: 버튼이 비활성화되며 CSS/SVG 기반의 부드러운 로딩 애니메이션 노출.
• 완료: 로딩 UI가 걷히고 최종 결과물을 받을 수 있는 '다운로드' 버튼 생성.

3. 서버 저장소 24시간 자동 삭제 (TTL)

• 개인정보 보호 및 서버 용량 관리를 위해, 업로드된 원본 이미지와 생성된 PDF는 정확히 24시간이 지나면 스케줄러에 의해 자동 삭제됩니다.

🏗️ 프로젝트 디렉토리 구조 (SvelteKit)

SvelteKit의 파일 기반 라우팅을 활용한 깔끔한 구조입니다.

 

my-pdf-converter/
├── src/
│   ├── routes/
│   │   ├── api/
│   │   │   └── convert/
│   │   │       └── +server.js       # PDF 변환 및 파일 저장 API
│   │   ├── +page.svelte             # 프론트엔드 UI 및 상태 관리 (애니메이션)
│   │   └── +layout.svelte           # 글로벌 스타일 및 레이아웃
│   └── lib/
│       └── server/
│           └── cron.js              # 24시간 지난 파일 삭제 스케줄러
├── static/
│   └── uploads/                     # 임시 파일이 저장될 공간
├── tailwind.config.js
└── package.json

 

 

🚀 AI 개발을 위한 마스터 프롬프트 (Prompt)

LLM(ChatGPT, Claude, Gemini 등)에 입력하여 단번에 동작하는 코드를 얻어낼 수 있는 정밀 설계 프롬프트입니다. 블로그 공유용이나 직접 개발용으로 활용해 보세요.

👍 Tip: 아래의 프롬프트 코드를 그대로 AI에게 던지면 구조화된 전체 소스 코드를 얻을 수 있습니다.   

 

 

# Role & Context
너는 SvelteKit(스벨트킷)과 Tailwind CSS 전문가이자, 풀스택 웹 개발자야. 
사용자가 이미지들을 업로드하거나 드래그앤드롭하여 하나의 PDF 파일로 병합 및 다운로드할 수 있는 웹 애플리케이션을 개발하려고 해. 이 코드는 'Ant Gravity(안티그래비티)' 환경에서 구동될 예정이므로, 백엔드와 프런트엔드가 SvelteKit 구조 안에서 완벽하게 상호작용해야 하며 모바일 브라우저(터치 입력 등)에서도 완벽히 작동해야 해.

다음 요구사항을 반영하여 전반적인 프로젝트 아키텍처와 핵심 파일(`+page.svelte`, `+page.server.js` 또는 `+server.js`)의 전체 코드를 작성해줘.

---

# 기술 스택 및 제약 조건
- **Framework:** SvelteKit (최신 안정 버전)
- **Styling:** Tailwind CSS (반응형 및 모바일 최적화)
- **PDF Library:** client-side 또는 server-side 중 이 작업에 가장 최적화되고 안정적인 라이브러리 사용 (예: jsPDF 또는 pdf-lib 등 사용 및 설치 안내 포함)
- **Storage:** 24시간 후 자동 삭제 메커니즘 필수 (Server-side 크론탭, 임시 폴더 주기적 삭제, 또는 Vercel Blob/Cloudflare R2 등 서버리스 환경을 고려한 TTL 설정 방식 제안)

---

# 핵심 기능 및 요구사항

### 1. 이미지 업로드 및 드래그앤드롭 (Drag & Drop)
- 데스크톱뿐만 아니라 **모바일 터치 환경에서도 정상 작동**하는 드래그앤드롭 영역 제공.
- 이미지 파일(PNG, JPG, JPEG)만 허용하며, 다중 선택 업로드 가능.
- 파일이 업로드되면 화면에 순서대로 **썸네일 리스트**를 그리드 형태로 표시.
- (선택 사항) 사용자가 리스트 내에서 순서를 마우스 드래그나 모바일 터치(Sortable 라이브러리 등 활용 가능)로 변경할 수 있도록 구조 설계.

### 2. PDF 변환 및 애니메이션 상태 관리
- 사용자가 'PDF 만들기' 버튼을 누르면 변환 작업이 시작됨.
- **작업 진행 중(Loading/Processing):** 사용자에게 현재 진행 상태를 알리는 세련된 CSS/SVG 기반 로딩 애니메이션(스피너 또는 프로그레스 바)을 노출하고, 버튼은 비활성화 처리.
- **작업 완료(Success):** 로딩 애니메이션이 사라지고 결과물을 다운로드할 수 있는 'PDF 다운로드' 버튼이 나타남.

### 3. 파일 보관 및 24시간 자동 삭제 (Storage & TTL)
- 업로드된 원본 이미지나 생성된 임시 파일은 **서버에 저장된 지 24시간이 지나면 자동으로 완전히 삭제**되어야 함.
- AntG 및 현대적인 배포 환경을 고려하여, Node.js의 `fs` 모듈을 이용한 서버 로컬 스토리지 기반 자동 스케줄러(예: `node-cron` 또는 앱 구동 시 체크) 구현 예시를 보여주거나, 클라우드 스토리지의 TTL 설정을 가이드해줘.

### 4. UI/UX 및 모바일 최적화
- 모바일(iOS, Android) 브라우저 화면에 꽉 차는 반응형 레이아웃.
- 터치 영역을 충분히 확보하고, 모바일 스크롤과 드래그 오퍼레이션이 충돌하지 않도록 처리.
- 스타일은 깔끔하고 모던한 UI 톤앤매너 유지.

---

# 출력 요구사항
1. 필요한 패키지 설치 명령어 (`npm install ...`)
2. 프로젝트 디렉토리 구조 (SvelteKit 기준)
3. 클라이언트 컴포넌트 코드 (`src/routes/+page.svelte`) - 상태 관리 및 UI, 애니메이션 포함
4. 서버 사이드 로직 및 API 코드 (`src/routes/api/pdf/+server.js` 또는 `+page.server.js`) - 이미지 처리, PDF 생성(서버에서 처리할 경우), 24시간 삭제 로직 포함
5. 각 코드 블록은 생략(줄임표) 없이 **전체 작동 가능한 코드**로 작성해줘.

 

💡 개발 시 주의할 점 (Insight)

1. 모바일 메모리 이슈 방지: 모바일 기기 자체(클라이언트 사이드)에서 수십 장의 고화질 이미지를 PDF로 변환하면 브라우저가 튕기는 현상이 발생할 수 있습니다. 따라서 이미지를 서버 API로 전송한 뒤, 서버에서 PDF를 병합하여 결과물 링크를 내려주는 방식이 모바일 안정성에 훨씬 유리합니다.
2. 모바일 터치 이벤트: dragover, drop 같은 표준 드래그 앤 드롭 API는 모바일에서 작동하지 않으므로, 파일 선택 창(input type="file")을 터치 영역 전체에 투명하게 덮는 방식으로 구현해야 모바일 하이브리드 UX를 완성할 수 있습니다.

 

 

---

 

작업후기:

 

바이브코딩이 한창인 요즘이라 흥미가 생겨 구글의 안티그래비티로 이미지를 PDF로 병합할 수 있는 웹사이트를 만들고 싶었다.

실제로 PDF 병합기능이 급히 필요하기도 해서 제미나이에 아래와 같이 이런이런 기능을 가진 웹사이트를 만들건데 안티그래비티에 넣을 프롬프트를 만들어줘 라고 했더니 위의 프롬프트를 상세하게 만들어주었다.

 

스벨트킷을 이용해서 안티그래비티에서 프로그래밍을 할거야. 이미지들을 드래그앤드롭하거나 업로드하면 하나의 pdf 파일로 만들어주는 프로그램이야. 이미지가 업로드되면 순서대로 썸네일을 보여주고 pdf 만들기 버튼을 누르면 작업을 시작하는거야. 작업이 진행되는 동안 애니메이션을 보여줬으면 좋겠어. 작업이 완료되면 다운로드 버튼이 나와서 다운로드 받을 수 있어야 하고, 24시간이 지나면 업로드된 이미지들은 모두 자동삭제가 되어야 해. 모바일에서도 작동해야 돼. 이 프로그램을 만들 수 있는 프롬프트를 잘 만들어줘봐

 

안티그래비티에서 위 프롬프트를 입력했더니 실행계획을 보여줬는데 그 대안으로 서버에서 병합하기 보다는 클라이언트 사이드에서 병합하는 것도 한 방법이라고 해서 그렇게 하기로 하고 작업을 시켜보았다.

 

몇 분 걸리지 않아 프로그램이 완성되었고, 두어가지 수정을 거친 뒤 깃허브 page에서 배포하기로 했다.

그리고 완성된 모습. (몇 가지 손을 더 보고 싶지만 일단은 사용하는데 크게 무리는 없다.)

 

스벨트를 공부하긴 했지만 실제로 손수 웹사이트를 만들 수는 없었지만 안티그래비티를 통해 코딩 한 줄 하지 않고 웹사이트를 만들 수 있었다.

 

https://ethanjoh.github.io/image2pdf/

Image2PDF