PDF 회전 도구 만들기 (feat. agy)

Introduction

최근 LLM의 발달은 정말로 눈부시다. 통번역 분야에서는, 물론 전문 통번역사의 레벨에 이르지는 못하지만, 상당히 많은 저수준 수요를 이미 대체하기 시작했고 Cursor를 시작으로 SW 개발자들의 업무를 굉장히 많이 - 때로는 전부 - 도와주는 툴들도 널리 사용되고 있다.

일반적으로 가장 고성능 LLM이라고 하면 OpenAI사의 ChatGPT, Anthropic사의 Claude, 그리고 Google의 Gemini 3개를 꼽는다. 각각 Codex, Claude Code, Gemini CLI라는 개발용 도구를 제공하며, 최근 Google은 Antigravity라는 도구를 발표하며 개인 사용자는 Gemini CLI 대신 Antigravity를 사용하도록 하고 있다. 이 중에서 나는 Google AI Pro 요금제를 사용하고 있기 때문에 Antigravity를 종종 쓰면서 취미생활이나 공부 등에 활용중이다. 사실 Gemini는 최근 세 모델 중 최약체를 맡고 있는 중이라 못미더워 하는 사람들도 많을 것이다. 이 요금제는 Google 서비스에서 사용할 수 있는 스토리지를 5 TB까지 제공해주는데, Google Photo를 십수년 전부터 꾸준히 사용해오던 나로서는 사진 용량이 무료 용량 15 GB는 애저녁에 넘겼고 이제는 전체 스토리지 사용량이 250 GB를 넘어버린지라 어차피 저장공간에 돈을 쓴다면 조금 더 써서 이거도 해야지, 같은 느낌으로 이용하고 있다.

아일랜드 생활을 정리하기 전에 네달 가량 한국에서 생활했었는데, 급하게 인쇄할 문서가 꽤 돼서 쓰고 버릴 용도로 삼성 프린터 중 제일 쌌던 SL-J1680 프린터를 샀다. 잉크젯이고 스캐너도 있는 복합기인데 몇만원 수준으로 살 수 있으니 가성비는 괜찮았다. 다만 문제가, 윈도우즈용 드라이버만 제공하는데 당시 업무용 맥북에서 쓰려면 꼼수가 좀 필요했었다. 이와 관련된 이야기는 다른 포스트에서 한번 더 다룰 수 있을 것 같다. 그리고 한가지 별 것 아니지만 신경쓰이는 문제가 있었는데, 하단부의 인쇄불가영역이 좀 넓은 문제가 있었다. 주민등록등본을 떼면 아래 바코드 부분까지 간신히 나오고 그 밑의 문구는 인쇄가 안되는 정도였다. 대부분의 문서는 위에 중요한 정보가 모여있고 아래는 여백이거나 중요하지 않은 꼬릿말 정도라 큰 문제는 안됐는데 문제는 만들기 도안에서 터졌다.

만들기 도안은 가로 방향으로 만들어져 있었는데, 이걸 인쇄하면 자동으로 왼쪽이 아래쪽으로 가는 방향으로 돌려져서 인쇄된다. 즉, 가장 왼쪽 일부가 잘릴 수 있는 것이다. 근데 도안 자체는 오른쪽이 아래로 가는 것을 상정하고 만들어져서 도안이 약간 왼쪽으로 치우쳐져 있어서 빈번하게 잘려 나오게 되었다. 잘린 부분 때문에 아귀가 안 맞거나 모양새가 이상해지는 문제가 생기니 한번은 마음에 안든다고 애가 울고 난리를 친 적까지 있었다. 크기 조정을 해 봐도 문서의 좌상단 기준으로 늘어나고 줄어들다 보니 여전히 좌측 끝단이 잘리는 문제는 해결이 안되니 머리가 아팠다. 그래서 결국 인터넷 5분검색으로 어도비에서 제공하는 PDF 편집 온라인 툴이 이걸 돌릴 수 있다는걸 알고서 필요할 때마다 한번씩 사용해서 문서를 세로 방향으로 재정렬하는 방식으로 잘리는 영역을 반대로 돌리곤 했다.

그런데 아무래도 내 개인적인 파일을 타사 클라우드에 올린다는 것 자체가 그닥 맘에 들지 않았다. 그래도 자주 쓰는 것도 아니고 가끔가다 한번씩 사용하는데는 큰 문제가 없어서 그냥 쓰고 있었는데 오늘 ‘그 정도로 간단하고 안 중요한 도구라면 바이브코딩으로 만들어 쓰면 되지 않나?’ 하는 생각이 스치고 지나갔다. 그래서 해봤다.

Prompt

원 샷 프롬프트로 한방에 만들어내는 이야기가 많지만, 개인적으로는 선호하지 않는다. 내가 원하지 않는 방향으로 완성되어버린 코드를 내 취향으로 바꾸는 데는 꽤나 큰 비용이 들기 때문이다. 대략적으로 어떤 기능을 어떤 단계로 더해 나갈지를 머릿속에 그린 뒤에 하나씩 확인하면서 진행하는 방식을 좀 더 선호하는 편이다.

그래서 나는 내가 만들고 싶은 도구를 5단계 정도로 나눠서 구현해보기로 했다.

  1. 단순 웹브라우저 기반 PDF 뷰어: 서버 없이 브라우저에서 모든 일이 진행되며, 클릭하면 PDF파일을 선택할 수 있다. 드래그 앤 드롭으로 PDF 파일을 드롭해도 된다. 그렇게 PDF파일을 지정하면 이 파일을 분석해서 각 페이지를 보여주는 단순 PDF 뷰어이다.
  2. 페이지를 제외하는 기능: 사실 당장 제외가 이루어지는 것은 아니고, 각 페이지별 우상단에 X 버튼을 두고서 누르면 지워진 것처럼 회색으로 만드는 기능을 추가한다.
  3. 페이지를 클릭하면 시계방향으로 90도 돌아가는 기능
  4. 2, 3에서 수정한 내용 그대로 PDF로 저장하는 기능
  5. 4와 동일하지만 그대로 인쇄하는 기능

실제로 사용한 프롬프트는 다음과 같다.

  1. Write a pdf viewer tool in HTML and JS. It should accept drag and drop and browsing. Use tailcss to make it responsive. No other features but showing each page.
  2. Add (x) button on top right corner of each page. If it clicked, it grays out that page.
  3. If user clicks a page, rotate it 90 degree clockwise.
  4. Add a header; shows the title of pdf file on top. At the right end there is a save button. If the user clicks it user will get a copy of pdf file with changes the user made. It includes gray-out (dropping that page) and rotation of the page.
  5. Add print button.
  6. Each PDF pages are not fit into the whole printable area. Also there is header and footer from the browser. Print should preserve PDF’s shape.

비록 5년정도 영어로 밥벌이를 하긴 했지만 난 기본적으로 영어못함인간이기 때문에 문법이라거나 이상한 부분이 많이 있을 것이다. 이따위로 이상하게 영작하더라도 찰떡같이 알아듣더라 정도로 이해해주면 감사하겠다. 참고로 개인적인 느낌이지만 영어로 설명하는 편이 모델이 잘 알아먹는듯한 느낌이 있다. 말도 좀 더 정돈되는 느낌도 있고. 도구 구현단계가 5단계인데 프롬프트가 6개인 이유는, 5번에서 너무 단순하게 언급했더니 프린트 레이아웃이 이상하게 배치돼서 문제점을 지적하고 어떻게 해줬으면 하는지 추가 요청이 들어갔기 때문이다. 이 외에는 생각했던 것 거의 그대로, 가끔은 그 이상으로 깔끔하게 말아줘서 정정해줄 필요도 없었다.

심지어 이 프로젝트는 도구를 구성하는 모든 구성요소가 - tailwind CSS, pdf.js, pdf-lib - 이미 다 준비돼 있고 조립만 하면 되는 상황이라 더 간단하게 만들 수 있었다.

Result

rotpapier

Conclusion

간단하고 안 중요한 도구라면 이제 찾아보고 맞나 안맞나 확인하는 것보다 그냥 바이브코딩으로 쪄내는게 더 빠른 시대가 됐다. 간단하게 쪄내기 위해서는 이를 이루는 구성요소들이 충분히 잘 만들어져 있어야 하고 그 구성요소는 이렇게 간단하게 바이브코드 할 수 없기 때문에 “걍 바이브코딩 하져?” 같은 소리를 언제나 할 수 있는 것은 절대 아니지만, 취미 수준에서는 무시무시한 미래가 찾아오고 있다. 문제는 옛날엔 이렇게 도구를 툭툭 짜보면서 웹기술도 배우고 PDF 파일 포맷도 공부하고 할 수 있었는데 이제는 그걸 하나도 몰라도 도구가 쪄져서 나오니 앞으로 취미생활하며 공부하기는 더 어렵겠다 싶은 생각도 든다.