웹 PDF 뷰어 솔루션

브라우저에서의 실시간 전자문서(PDF) 뷰어 솔루션

실무2022.04.13–2023.12.15기능 개발 전담2명 (기능 구현 1명, 관리자 페이지 담당 1명)

프론트엔드로써 첫 실무 경력을 쌓았습니다.

비가시 추적코드 설명 도식. 왼쪽 기존 워터마크는 문서 내용과 겹쳐 읽기 불편한 반면, 오른쪽 비가시 추적코드는 화면에 보이지 않으면서도 촬영 시 열람 일시·파일명·열람자를 확인할 수 있다

다크모드로 전환한 PDF 뷰어. 좌측 메뉴의 화면 테마에서 다크가 선택되어 있고 툴바가 어두운 색으로 바뀌어 있다

기여도: 90%
관리자 페이지를 제외한 모든 기능 구현

주요 기능: 우클릭(Context menu) 커스텀 기능
문서 추적코드 추가
다크모드
모바일 스크린 리더
기술 스택: Angular
SCSS
참고: demo.epapyrus.com/ko/streamdocs(새 창)

이렇게 만들었습니다

데모 버전으로 공개된, 이전 회사에서 진행한 프로젝트들을 모아 봤습니다. PDF를 웹에서 실시간으로 수정하는 뷰어 솔루션의 프론트엔드 기능 개발과 유지보수를 맡았습니다. 버그 수정이나 이슈 해결처럼 자잘한 작업은 빼고, 핵심적으로 참여한 것은 우클릭 커스텀 기능, 비가시 추적코드 추가, 다크모드 기능, 모바일 스크린 리더입니다.

1. 우클릭 커스텀 기능

문서에서 마우스 우클릭을 하면 컨텍스트 메뉴가 나타나고, 관리자 페이지에서 넣고 싶은 기능을 골라 나만의 컨텍스트 메뉴를 만들도록 구현했습니다. 자주 쓰는 기능을 메뉴에 올려 두니 손이 덜 가고 인터페이스도 더 직관적이 됐습니다.

2. 비가시 추적코드

문서 보안을 위해 PDF에 보이지 않는 워터마크를 삽입해 원본과 열람 정보를 추적하는 기능을 구현했습니다. 실제 인쇄된 문서에도 남는 기술이라, 문서를 인쇄한 뒤 전용 앱으로 추적코드의 인식 정확도를 테스트했고 그 과정에서 이미지 해상도와 인쇄 DPI 개념을 익혔습니다.

3. 다크모드

접근성과 편의를 생각해 다크모드를 구현했습니다. SCSS로 사용자의 선호에 따라 다크모드와 라이트모드를 전환하도록 설계하였습니다.

4. 모바일 스크린 리더

안드로이드의 TalkBack, IOS의 VoiceOver 모바일 스크린 리더가 PDF의 내용을 읽을 수 있도록 웹 접근성(Web Accessibility)을 향상시켰습니다.