DocuSûr
31개의 PDF 도구, 서버로 전송되는 문서는 단 1바이트도 없습니다.
- 연도
- 2026
- 제작 기간
- 10주
- 기술 스택
- React · TypeScript · Tailwind · PDF.js · Vercel
- 프로덕트 디자인
- 디자인
- 개발
- SEO
- 접근성
- 개 문서 도구
- 31
- 서버로 전송되는 데이터
- 0바이트
- Lighthouse 접근성
- 100/100
- Lighthouse 성능
- 95/100
해결해야 했던 과제.
배경
DocuSûr는 병합, 분할, 압축, 변환, 서명, OCR 등 31가지 문서 도구를 회원가입 없이 무료로 제공합니다. 리옹의 Kayzen Web이 운영하는 서비스입니다.
제약
대중적인 대안 서비스들은 문서를 해외 서버로 보내 몇 시간 동안 보관하고, 광고로 서비스를 운영합니다. 계약서, 급여 명세서, 신분증이라면 치명적인 문제입니다. 업무용 사용자의 절반은 이를 알면서도 대안이 없었습니다.
해법
모든 처리가 브라우저 안에서 이루어집니다. 파일은 결코 전송되지 않습니다. 개발자 도구의 네트워크 탭으로 3초 만에 증명할 수 있으며, 이것이 사이트의 핵심 세일즈 포인트입니다. 이 제약이 기술 아키텍처 전체를 결정했습니다.
납품 시점에 측정한 점수.
운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.
모든 선택에는 이유가 있습니다.
대시보드가 아니라 디렉터리
도구 31개는 메뉴에 담기에는 너무 많습니다. 홈은 즉시 검색이 되는 카테고리별 그리드이고, 도구마다 전용 페이지와 고유 URL이 있습니다. 사람들은 Google을 통해 그렇게 들어오기 때문입니다.
첫 화면에 개인정보 보호의 증거
“파일은 절대 브라우저 밖으로 나가지 않습니다”를 파일 선택기보다 먼저, 기술 설명 링크와 함께 보여 줍니다. 개인정보 보호의 약속이 그 약속을 시험하는 행동보다 먼저 옵니다.
대체 수단을 갖춘 드래그 앤 드롭
드롭 영역, 일반적인 파일 선택 버튼, 붙여넣기 지원. 드래그 앤 드롭만 있으면 키보드 사용자와 일부 터치 환경을 배제하게 됩니다.
프로젝트 색상 팔레트
잉크
#111827
텍스트
트러스트 블루
#2563EB
주요 행동 유도
세이프 그린
#059669
로컬 처리 확인
페이퍼 그레이
#F9FAFB
드롭 영역 배경
타이포그래피 체계
제목용 서체
Inter 700
본문용 서체
Inter 400
멋 부리기는 없습니다. 도구는 문서를 위해 스스로를 지워야 합니다.
보이지 않는 곳의 기술.
- React
- TypeScript
- Tailwind
- PDF.js
- Vercel
클라이언트 측 PDF.js와 WebAssembly
PDF 읽기, 렌더링, 쓰기를 브라우저에서 처리합니다. 압축, OCR 같은 무거운 작업은 워커 안의 WebAssembly로 돌립니다. 200페이지 문서에서도 인터페이스가 멈추지 않습니다.
저장소도, 계정도 없음
데이터베이스가 없으니 유출될 것도, 신고할 보관 기간도, 나열할 수탁자도 없습니다. 여기서 GDPR은 정책이 아니라 아키텍처로 해결합니다.
도구별 필요 시 로드
31개 도구가 하나의 번들을 공유하지 않습니다. “PDF 두 개 합치기”를 열어도 그것만으로 수 메가바이트에 달하는 OCR 엔진은 내려받지 않습니다.
사이트가 검색되는 방식.
도구마다 페이지 하나, 페이지마다 의도 하나
“PDF 합치기”, “PDF 압축”, “PDF 서명”. 검색량이 많고 즉시 사용하려는 의도가 담긴, 서로 다른 검색어입니다. 도구를 나열한 단일 페이지로는 어느 것도 잡지 못했을 것입니다.
제목 속의 차별점
title 태그에는 최상급 표현 대신 “파일 업로드 없이”를 넣었습니다. 모든 페이지가 비슷한 시장에서 클릭을 결정하는 것은 바로 이 한 구절입니다.
절차형 도구에 HowTo
여러 단계로 된 도구에는 HowTo 마크업을 적용했습니다. 검색 엔진과 AI 어시스턴트가 가져다 쓰는 것이 이런 스니펫입니다.
누구나 사용할 수 있도록.
2025년 6월부터 유럽 접근성법(European Accessibility Act)에 따라 상당수 온라인 서비스에 디지털 접근성이 의무화되었습니다. 저희는 사후 보완이 아니라 설계 단계에서부터 접근성을 다룹니다.
Lighthouse 100/100, 그리고 수동 검증
자동 점수는 기준의 일부만 다룹니다. 모든 도구를 키보드와 스크린 리더로 직접 점검했습니다. 처리 진행 상황 안내, 명확한 파일 오류 메시지, 다운로드 후 포커스 복귀.
납품한 결과물.
- 홈 — 31개 도구 그리드와 검색
- /<도구> — 도구별 페이지
- 개인정보 보호 — 로컬 처리에 대한 기술 설명
- 소개, 문의, 법적 고지
프로젝트 진행 과정.
실현 가능성
OCR을 포함해 모든 처리가 브라우저 안에서 가능한지 검증.
기반
PDF 렌더링, 워커, 도구별 로드.
도구 배포
31개 도구, 도구마다 페이지 하나와 테스트 세트 하나.
접근성
모든 도구에서 키보드와 스크린 리더 동선 점검.
