외주 프로젝트SaaS
KnowHow.zip
작가가 Google Docs로 쓴 원고를 그대로 전자책으로 출간하고, 독자는 기기와 위치에 상관없이 전용 뷰어로 읽는 클라우드 전자책 서비스입니다. 뷰어 전반과 하이라이트·메모 패키지를 맡았습니다.
- 소속
- 팀스파르타 외주개발팀
- 팀 구성
- 프론트엔드 3명 · 백엔드 2명
- 현재 상태
- 서비스 종료
- 스택
- Next.jsTypeScriptZustandshadcn/uiRESTful APIMonorepo
어떤 서비스인가
작가가 Google Docs 링크를 넘기면 원고가 전자책으로 변환되고, 독자는 웹 뷰어로 어디서든 읽습니다. 작가가 번역을 켜두면 독자는 원하는 언어로 바꿔 읽을 수 있습니다.
작가 쪽 기능
- Google Docs 링크로 가져온 HTML 파싱
- 업로드 후에도 수정할 수 있는 원고 편집
- 업로드 전에 미리 확인하는 챕터 선택
- Stripe API 결제 시스템
- 전자책 독자 초대 및 관리
독자 쪽 기능
- DeepL API로 전자책을 원하는 언어로 번역 (작가가 활성화한 경우)
- 권한과 용도에 따라 최대 6종류의 뷰어 사용
- 뷰어 모드 선택과 글자 크기·자간 조절
- 드래그로 생성되는 하이라이트, 하이라이트마다 붙는 메모
- 페이지 북마크
맡은 일
- 하이라이트·메모 패키지 개발 — 오픈소스 web-highlighter를 기획에 맞게 확장해 뷰어에 적용
- 6종류 뷰어의 전체 UI와 글자 크기·자간 조절 기능 구현
- 회원가입·출판물 정보·작가 전용 페이지를 크로스 브라우징과 반응형을 고려해 제작
- 이메일 인증 기반 회원가입·로그인
- 권한에 따라 접근을 제한하는 router guard
- 유저·출판물 증감 추이 리포트를 조회하는 백오피스
문제 — 모바일에서 어긋난 뷰어
반응형 한 벌로 만든 뷰어가 모바일에서는 조작 방식과 이용 패턴이 달라 UI·UX가 맞지 않았습니다. 접속 기기를 감지해 모바일 전용 뷰어 컴포넌트와 URL을 따로 만들어 전용 페이지로 이동하도록 했습니다.
문제 — 문서를 고치면 사라지는 하이라이트
하이라이트 위치를 시작·끝 태그 정보만으로 잡고 있어 문서를 수정하면 좌표가 무너지는 문제가 있었습니다. 파라미터에 중간 태그 정보를 더해, 태그가 지워지거나 새로 생기는 경우까지 위치를 놓치지 않도록 처리했습니다.
기술 선택
- SSR — 요청에 맞춰 실시간으로 문서를 구성해야 하는 페이지에 적용
- SSG + i18n — 지원 언어별로 페이지를 미리 생성해 다국어 페이지를 빠르게 제공
- i18next — 지역에 따른 라우팅과 사용자 선택에 따른 언어 감지
- Zustand — 단순한 API로 전역 상태 로직을 짜 협업과 유지보수 비용을 낮춤
- shadcn/ui — Radix 기반 컴포넌트를 커스터마이징해 모든 페이지에서 재사용
개발 환경
프론트엔드 패키지를 따로 관리하려고 Monorepo로 구성하고, GitHub Actions와 CodePipeline으로 빌드·배포를 자동화했습니다. RDS에 SSL 통신을 설정하고 CloudWatch로 로그와 헬스체크를 남겨 배포를 안정적으로 운영했습니다.
결과
QA 템플릿을 만들어 자체 QA를 돌린 뒤 오픈했고, 오픈 후 1,000명 가까운 사용자가 쓰면서 전달받은 문제를 이어서 개선했습니다.