2023년 hwp를 웹에서 보는 방법

후보

크게 4가지 정도 있는 듯하다.

1. 사이냅 문서뷰어: 상용. SSR
2. Flexer Server 바로보기 솔루션: 상용. SSR
3. hahnlee/hwp.js: 오픈소스. CSR. ts
4. ohah/hwpjs: 오픈소스. CSR. js
5. 네이버 오피스: 종료 예정이라 논외
6. 웨일??: 기능이 있다던데 안 써서 모름

3번이 제일 유명했고, 나도 회사에서 드라이브에 있는 hwp 파일을 볼 때 잘 썼지만 확장 프로그램이 내려갔고 더는 개발도 안 하는 듯하다.

4번은 3번보다 아주 조금 더 오래 개발했지만, 완성도는 더 낮다. 3번에서 열리던 파일이 아예 안 열리기도 한다(콘솔에는 에러 작렬). 가령 보험업감독규정 일부개규정안.hwp 뭐 이런 파일. 이미지는 아예 없고 표만 있는 파일인데도 그랬다.

2번은 내 파일을 올려서 돌릴 수가 없고, 1번은 웹에 체험 기능이 있어 여러 파일을 돌려봤는데 품질이 대단히 좋았다. 3번과 비교가 안 될 정도로 좋았다. 이것이 돈의 힘. 네이버 한글 문서에 있는 문서도 어느 정도는 비슷하게 나왔다.

무엇보다, 저 체험 페이지에서는 url로 내 파일을 전달할 수가 있다. 그러니까, 북마클릿을 이용하면 내 드라이브 미리보기 화면에서 원클릭으로 저 페이지를 열어서 hwp를 쉽게 볼 수가 있는 거다.

사랑해요 사이냅

아이디어는 이렇다.

1. 드라이브에서 hwp를 선택한 미리보기 화면('파일을 미리 볼 수 없습니다') 주소는 이런 식이다. https://drive.google.com/file/d/{id}/view
2. 이 id에 해당하는 다이렉트 다운로드 링크는 정해져 있다. https://drive.google.com/uc?export=download&id={id}
3. 이 hwp 파일이 '링크가 있는 모든 사용자'에 공유되어 있다고 가정하고, 2번의 주소(encodeURIComponent 필요)를 사이냅 서버로 넘겨서 새 창에 열면 되는 거다. 사이냅 뷰어 주소는 이런 식이다. https://demo.synapdocviewer.com/SynapDocViewServer/job?fid=02_hwp_sample_1&filePath={url}&fileType=URL&convertType=0&sync=true
4. fid는 아무거나 넣어도 되는 걸 확인했고, 나머지 쿼리 매개변수도 역할이 있을 텐데 굳이 몰라도 될 것 같아서 그냥 뒀다.

이 과정을 js로 짜고 북마클릿으로 쓰면 편할 듯하다.

20분 후

완성.

(() => {
  const id = location.pathname.split('/').sort((a,b) => a.length-b.length).pop();  //대충 pathname 중 제일 긴 게 id일 것.
  const dl = 'https://drive.google.com/uc?export=download&id=' + id;
  const newUrl = 'https://demo.synapdocviewer.com/SynapDocViewServer/job?fid=a&fileType=URL&convertType=0&filePath=' + encodeURIComponent(dl);

  const win = window.open('', 'merong');
  win.location.href = newUrl;
})();

북마클릿용 미니파이드 원라이너.

javascript:(()=>{let e=location.pathname.split("/").sort((e,o)=>e.length-o.length).pop(),o="https://drive.google.com/uc?export=download&id="+e,t="https://demo.synapdocviewer.com/SynapDocViewServer/job?fid=a&fileType=URL&convertType=0&filePath="+encodeURIComponent(o),p=window.open("","merong");p.location.href=t})();

생략한 부분

사실 링크 노출을 막으려면(의미가 있나...?) ggff.io 같은 곳에서 5분짜리 링크를 만들어서 그걸로 넘기면 더 좋을 수도 있겠다. 하지만 ggff.io에 따로 API는 없었고, 그래서 그냥 접두사로 붙인 다음 fetch하려고 했더니 cors 제약에 막혔고, 그래서 맨날 쓰던 프록시로 우회하려고 했더니 리다이렉션이 두 번 일어나는 바람에 그것도 불가능했다.

또 전체 공유가 되어 있지 않은 문서는 gapi로 공유까지 한 다음에 새 창을 연 후에 공유를 다시 풀면 보안 문제도 (대충) 해결이 될 것 같다. 하지만 이렇게까지 하려면 정말 귀찮다...

---

혹시 사이냅소프트의 직원이 이 글을 본다면... 그냥 모른 척해주세요. ㅠㅠ