미리보기

비정형 문서 데이터를 DB화하고 동시 편집이 가능한 웹 기반 오피스 애플리케이션 개발

Frontend

• 담당 기능

  • 오피스 제품 개발, 성능 최적화, 댓글 기능, 인쇄/썸네일, z-index, 텍스트 검색 기능 설계, 구현 및 유지보수

• 성능 최적화

  • 대용량 워드 문서 편집 시 발생하는 메인 스레드 블로킹 문제를 해결하기 위해 JavaScript 동시성 처리 아키텍처 설계. 이를 통해 끊김 없이 작업할 수 있는 매끄러운 사용자 경험 제공

  • MobX의 상태 관리 구조 분석 및 최적화를 통해 빈 문서 로딩시 메모리 사용량 20% 절감

  • React Suspense 구조에서 fetch 전에 실행되던 비동기 작업들을 fetch 이후로 재배치, Code Splitting, Tree Shaking을 통해 첫 화면 로딩 시간을 5초에서 2초로 단축

• 공통 프레임워크화

  • 워드 제품의 댓글 기능을 다양한 모듈(워드, 셀, 포인트)에서 공통적으로 사용 가능하도록 리팩토링

Backend

• 다양한 문서 포맷 호환 기능 구현 및 배포

  • 서버에서 오픈소스 라이브러리를 활용하여 다양한 문서 포맷(ODF, PDF, HTML)을 DOCX로 변환하고, Kubernetes 환경에서 라이브러리 실행 환경 구축

• 텍스트 검색 서비스 개발

  • PL/SQL 프로시저를 사용하여 문서 데이터 내 텍스트 검색 서비스 구축

  • Client에서는 RESTful API를 통해 검색 결과를 받아, 문서상의 순서대로 정렬해 관리

다양한 문서 포맷(ODF, HTML, PDF)을 DOCX로 변환하는 서버 기능 개발. Libreoffice와 pdf2docx 오픈소스 라이브러리 활용

Kubernetes 환경에서 영구 볼륨과 PATH 설정을 통해 파드 재가동 시에도 일관된 라이브러리 실행 환경 보장하며 안정성 강화

QA 문서 호환 테스트 성공률 95%를 달성 및 IITP 과제를 성공적으로 완료하며 안정적이고 확장 가능한 배포 구조 구축

기존 워드 모듈에서만 사용 가능했던 댓글 기능을 셀 및 포인트 모듈에서도 사용할 수 있도록 공통 프레임워크화

Typescript Mixin 패턴을 적용해 다양한 객체(슬라이드, 도형 등)에서 댓글 기능을 손쉽게 확장하도록 구현

Mixin이 적용된 클래스의 타입을 정의해 정적 타입 안정성을 강화하고, 해당 타입에 대해 타입 가드를 정의해 런타임 안정성 확보. 코드의 신뢰성과 유지 보수성 향상

공통 프레임워크화 과정에서 PPT 발표, Git Wiki, 코드 주석 설명을 통해 각 모듈 담당자들이 쉽고 명확히 이해할 수 있도록 지원하며 프로젝트를 성공적으로 이끌었음

객체 지향 모델 구조에서 MobX 사용 시 메모리 사용량 증가와 성능 저하 문제 해결을 목표로 프로젝트 진행

MobX의 Observable, Observer, Action 구조를 분석하여 상태 관리 개선

observable 옵션(deep, shallow, ref 등)에 따른 메모리 사용량 테스트 및 최적화

Action을 상위 함수에만 설정해 리렌더링 요청을 최적화

빈 문서 로딩 시 약 20% 메모리 절감 및 성능 개선 달성

오피스 font 초기화 등 시간이 오래 걸리는 비동기 작업들을 fetch 이후로 재배치해 React Suspense의 fallback UI 표시 시간을 최소화

FCP(First Contentful Paint)와 무관한 라이브러리를 dynamic import로 분리해 초기 로딩 성능 최적화

라이브러리의 소수 메서드만 사용되는 경우를 분석해, 불필요한 의존성을 제거하고, 필요 메서드만 직접 구현하도록 가이드해 번들 크기를 최적화

첫 화면 로딩 시간을 5초에서 2초로 단축, 사용자 콘텐츠 접근 속도와 서비스 응답성을 크게 향상

대용량 문서 편집 시 워드 페이지 레이아웃으로 인해 브라우저 메인 스레드가 과부하되어 사용자 이벤트 처리 지연 문제가 발생

자바스크립트의 동시성을 지원하는 브라우저의 이벤트 루프와 태스크 큐를 이용한 레이아웃 최적화 아키텍처 설계 및 구현

사용자 이벤트에 즉각 반응하며, 대용량 문서에서도 이벤트 처리 지연 없이 매끄러운 UI를 제공해 사용자 경험을 크게 개선