1f:I[536515,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostViewTracker"] 20:I[207142,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostBackButton"] 21:I[390236,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostSummary"] 25:I[948688,["/_next/static/immutable/chunks/1opgw09b2rf0r.js"],"IconMark"] 1e:T644,{"@context":"https://schema.org","@type":"BlogPosting","headline":"전자문서 프로젝트에서의 기술적 도전과 성장기","description":"전자문서 프로젝트에서는 단순한 PDF 뷰어를 만드는 수준을 넘어,사용자가 원하는 위치에 컴포넌트를 배치하고 다시 불러올 수 있는 시스템을 구현해야 했습니다.처음에는 단순해 보였지만, 실제로는 비동기 로딩, 좌표계 변환, 렌더링 타이밍 같은 복잡한 문제가 한꺼번에 몰려왔습니다.이번...","image":["https://3d-blog.vercel.app/blog/category/회사/post/%EC%A0%84%EC%9E%90%EB%AC%B8%EC%84%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%EA%B8%B0%EC%88%A0%EC%A0%81-%EB%8F%84%EC%A0%84%EA%B3%BC-%EC%84%B1%EC%9E%A5%EA%B8%B0/opengraph-image"],"author":{"@type":"Person","name":"성창수"},"publisher":{"@type":"Organization","name":"3D Blog","logo":{"@type":"ImageObject","url":"https://3d-blog.vercel.app/opengraph-image"}},"datePublished":"2025-09-16T13:46:03.734Z","dateModified":"2026-08-17T08:22:10.926Z","mainEntityOfPage":{"@type":"WebPage","@id":"https://3d-blog.vercel.app/blog/category/회사/post/%EC%A0%84%EC%9E%90%EB%AC%B8%EC%84%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%EA%B8%B0%EC%88%A0%EC%A0%81-%EB%8F%84%EC%A0%84%EA%B3%BC-%EC%84%B1%EC%9E%A5%EA%B8%B0"},"url":"https://3d-blog.vercel.app/blog/category/회사/post/%EC%A0%84%EC%9E%90%EB%AC%B8%EC%84%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%EA%B8%B0%EC%88%A0%EC%A0%81-%EB%8F%84%EC%A0%84%EA%B3%BC-%EC%84%B1%EC%9E%A5%EA%B8%B0"}22:T19f6,

전자문서 프로젝트에서는 단순한 PDF 뷰어를 만드는 수준을 넘어,
사용자가 원하는 위치에 컴포넌트를 배치하고 다시 불러올 수 있는 시스템을 구현해야 했습니다.
처음에는 단순해 보였지만, 실제로는 비동기 로딩, 좌표계 변환, 렌더링 타이밍 같은 복잡한 문제가 한꺼번에 몰려왔습니다.

이번 글에서는 제가 겪었던 주요 기술적 어려움과 해결 과정을 공유해보려고 합니다.

1. react-pdf 비동기 로딩 문제와 컴포넌트 재배치

처음 겪은 난관은 PDF가 다시 로딩될 때, 컴포넌트가 모두 (0,0) 좌표로 몰려버리는 현상이었습니다.
원인은 onDocumentLoadSuccess 콜백 실행 시점이 PDF 페이지 크기 계산보다 빨랐다는 점이었죠.

const [loadedPages, setLoadedPages] = useState<number[]>([]);
const handlePageLoad = (pageNumber: number) => { setLoadedPages(prev => [...prev, pageNumber]); };



useEffect(() => { if (loadedPages.length === totalPages) { restoreComponents(); // 저장된 좌표에 따라 컴포넌트 재배치 } }, [loadedPages]);

const page = 1

loadedPages 상태로 페이지 로딩을 추적하고, 모든 페이지가 준비된 뒤에만 재배치를 실행하도록 했습니다.
이후 IntersectionObserver를 추가해 DOM 준비 여부까지 체크하니 문제가 말끔히 해결됐습니다.

외부 라이브러리의 생명주기를 이해하고 타이밍을 제어하는 것이 핵심이었습니다.

2. PDF 페이지 경계 인식과 좌표계 변환

PDF는 여러 페이지가 세로로 붙어 있기 때문에,
클릭 좌표를 어떤 페이지에 속하는지 정확히 구분하는 게 필요했습니다.

해결 방법

각 페이지 컨테이너에 data-page 속성을 부여
getBoundingClientRect()로 각 페이지의 상대 좌표를 계산
클릭 시 해당 페이지 번호 + 상대 좌표를 함께 저장

const getPdfMousePosition = (e: MouseEvent, pageEl: HTMLElement) => {
const rect = pageEl.getBoundingClientRect();
return {
x: (e.clientX - rect.left) / rect.width,
y: (e.clientY - rect.top) / rect.height,
};
};

👉 덕분에 스크롤이나 스케일링이 달라져도,
항상 올바른 위치에 컴포넌트를 표시할 수 있었습니다.

3. 예상보다 짧아진 개발 기간 속 우선순위 재조정

프로젝트 중반, 예상치 못하게 개발 기간이 줄어들면서 모든 기능을 계획대로 담아내기는 어려워졌습니다.
처음에는 부담이 컸지만, 이번 스프린트에서는 핵심 기능에 집중하고 부가 기능은 다음으로 미루는 전략을 선택했습니다.

예를 들어, 컴포넌트 배치와 복원 같은 사용자 경험에 직결되는 기능은 이번에 반드시 포함했고,
부가적인 편의 기능이나 관리 도구는 다음 스프린트로 넘겼습니다.

👉 이 과정을 통해 스프린트 단위에서 범위를 조정하는 감각을 배울 수 있었고,
“모든 걸 다 하려고 하기보다 중요한 것부터 끝내는 것”이 얼마나 중요한지 체감했습니다.

4. 안정적인 컴포넌트 위치 계산 시스템 구축

PDF 스케일, 스크롤 위치, 페이지 로딩 상태 등이 얽히면서
위치 계산이 계속 흔들리는 문제가 있었습니다.

해결 방법

scaleStore로 전역 스케일 상태 관리
loadedPages + IntersectionObserver로 모든 페이지 준비 완료 시점 보장
마우스 좌표 계산 함수에서 스케일 반영

const getScaledPosition = (pos: { x: number; y: number }, scale: number) => ({
x: pos.x / scale,
y: pos.y / scale,
});

👉 이 과정을 통해 다중 상태(스케일, 스크롤, 로딩) 간 동기화를 경험하며,
UI 아키텍처를 더 단단히 설계하는 방법을 배웠습니다.

마치며

돌이켜보면 이 프로젝트는 기술적인 도전이기도 했지만,
그보다 더 큰 배움은 “실무에서 일한다는 게 어떤 의미인지”를 처음 체감한 경험이었습니다.

라이브러리는 도구일 뿐, 원리를 이해해야 한다는 점
일정이 줄어들면 타협이 아니라 우선순위 조정이라는 점
협업은 완벽한 명세보다 꾸준한 소통이 낫다는 점

이는 제게 큰 자산이 되었고, 이후 프로젝트를 대하는 태도에도 큰 영향을 주었습니다.

16:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$1e"}}],["$","$18",null,{"fallback":null,"children":["$","$L1f",null,{"postId":11,"slug":"전자문서-프로젝트에서의-기술적-도전과-성장기","categorySlug":"회사"}]}],["$","div",null,{"className":"mx-4 max-w-4xl lg:mx-auto","children":[["$","$L20",null,{"href":"/blog/category/회사"}],["$","section",null,{"className":"relative mb-12 mt-0 px-4 py-8 sm:px-6 md:rounded-2xl md:px-8 md:overflow-hidden md:border md:border-[#ff9a3c]/20 md:bg-gradient-to-br md:from-[#2a1545]/90 md:via-[#1c0e38]/85 md:to-[#12082a]/80 md:shadow-[0_0_32px_rgba(255,154,60,0.1)] dark:md:border-[#3de8ff]/[0.15] dark:md:from-[#0a0618]/90 dark:md:via-[#070414]/90 dark:md:to-[#000008]/85 dark:md:shadow-[0_0_32px_rgba(61,232,255,0.08)]","children":[["$","div",null,{"className":"pointer-events-none absolute inset-0 z-0 hidden md:block","children":["$","div",null,{"className":"h-full w-full bg-gradient-to-tr from-[#8a4a68]/15 via-[#1c0e38]/20 to-[#ffc090]/10 blur-[2px] dark:from-cyan-900/20 dark:via-fuchsia-900/10 dark:to-cyan-800/10"}]}],["$","h1",null,{"className":"relative z-10 mb-4 text-3xl font-extrabold md:drop-shadow-sm dark:md:drop-shadow-[0_2px_8px_#7dd3fc55] text-[#ffe8d0] dark:text-[#c8e8ff]","children":"전자문서 프로젝트에서의 기술적 도전과 성장기"}],["$","div",null,{"className":"relative z-10 mb-6 flex items-center gap-3 text-xs text-[#d4a8c0]/85 dark:text-[#7ec8ff]/75","children":[["$","span",null,{"className":"font-mono","children":"성창수"}],["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"children":"2025-09-16"}],[["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"className":"text-[#ffb870] dark:text-[#3de8ff]","children":"회사"}]]]}],false,["$","div",null,{"className":"relative z-10 mb-2 min-h-[88px] p-2","children":["$","$18",null,{"fallback":["$","div",null,{"className":"mb-6 min-h-[88px]","aria-hidden":true}],"children":[["$","$L4",null,{"moduleIds":["3623811150574836874"]}],["$","$L21",null,{"post":{"id":11,"title":"전자문서 프로젝트에서의 기술적 도전과 성장기","content":"$22","updatedAt":"$D2026-08-17T08:22:10.926Z"}}]]}]}],"$L23"]}],"$L24"]}]] 19:null 1d:[["$","title","0",{"children":"전자문서 프로젝트에서의 기술적 도전과 성장기"}],["$","meta","1",{"name":"description","content":"전자문서 프로젝트에서는 단순한 PDF 뷰어를 만드는 수준을 넘어,사용자가 원하는 위치에 컴포넌트를 배치하고 다시 불러올 수 있는 시스템을 구현해야 했습니다.처음에는 단순해 보였지만, 실제로는 비동기 로딩, 좌표계 변환, 렌더링 타이밍 같은 복잡한 문제가 한꺼번에 몰려왔습니다.이번..."}],["$","meta","2",{"name":"author","content":"성창수"}],["$","meta","3",{"name":"creator","content":"3D Blog"}],["$","meta","4",{"name":"publisher","content":"3D Blog"}],["$","meta","5",{"name":"robots","content":"index, follow"}],["$","meta","6",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","7",{"rel":"canonical","href":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/%EC%A0%84%EC%9E%90%EB%AC%B8%EC%84%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%EA%B8%B0%EC%88%A0%EC%A0%81-%EB%8F%84%EC%A0%84%EA%B3%BC-%EC%84%B1%EC%9E%A5%EA%B8%B0"}],["$","meta","8",{"name":"google-site-verification","content":"txYmXq1GLSvBcoTz6-zWwFTe4Wl0bmJ1DYYi97AnAB0"}],["$","meta","9",{"property":"og:title","content":"전자문서 프로젝트에서의 기술적 도전과 성장기"}],["$","meta","10",{"property":"og:description","content":"전자문서 프로젝트에서는 단순한 PDF 뷰어를 만드는 수준을 넘어,사용자가 원하는 위치에 컴포넌트를 배치하고 다시 불러올 수 있는 시스템을 구현해야 했습니다.처음에는 단순해 보였지만, 실제로는 비동기 로딩, 좌표계 변환, 렌더링 타이밍 같은 복잡한 문제가 한꺼번에 몰려왔습니다.이번..."}],["$","meta","11",{"property":"og:url","content":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/%EC%A0%84%EC%9E%90%EB%AC%B8%EC%84%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%EA%B8%B0%EC%88%A0%EC%A0%81-%EB%8F%84%EC%A0%84%EA%B3%BC-%EC%84%B1%EC%9E%A5%EA%B8%B0"}],["$","meta","12",{"property":"og:site_name","content":"3D Blog"}],["$","meta","13",{"property":"og:locale","content":"ko_KR"}],["$","meta","14",{"property":"og:image","content":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/%EC%A0%84%EC%9E%90%EB%AC%B8%EC%84%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%EA%B8%B0%EC%88%A0%EC%A0%81-%EB%8F%84%EC%A0%84%EA%B3%BC-%EC%84%B1%EC%9E%A5%EA%B8%B0/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","15",{"property":"og:image:type","content":"image/png"}],["$","meta","16",{"property":"og:image:width","content":"1200"}],["$","meta","17",{"property":"og:image:height","content":"630"}],["$","meta","18",{"property":"og:image:alt","content":"3D Blog Post"}],["$","meta","19",{"property":"og:type","content":"article"}],["$","meta","20",{"property":"article:published_time","content":"2025-09-16T13:46:03.734Z"}],["$","meta","21",{"property":"article:modified_time","content":"2026-08-17T08:22:10.926Z"}],["$","meta","22",{"property":"article:author","content":"성창수"}],["$","meta","23",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","24",{"name":"twitter:creator","content":"성창수"}],["$","meta","25",{"name":"twitter:title","content":"전자문서 프로젝트에서의 기술적 도전과 성장기"}],["$","meta","26",{"name":"twitter:description","content":"전자문서 프로젝트에서는 단순한 PDF 뷰어를 만드는 수준을 넘어,사용자가 원하는 위치에 컴포넌트를 배치하고 다시 불러올 수 있는 시스템을 구현해야 했습니다.처음에는 단순해 보였지만, 실제로는 비동기 로딩, 좌표계 변환, 렌더링 타이밍 같은 복잡한 문제가 한꺼번에 몰려왔습니다.이번..."}],["$","meta","27",{"name":"twitter:image","content":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/%EC%A0%84%EC%9E%90%EB%AC%B8%EC%84%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%EA%B8%B0%EC%88%A0%EC%A0%81-%EB%8F%84%EC%A0%84%EA%B3%BC-%EC%84%B1%EC%9E%A5%EA%B8%B0/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","28",{"name":"twitter:image:alt","content":"3D Blog Post"}],["$","meta","29",{"name":"twitter:image:type","content":"image/png"}],["$","meta","30",{"name":"twitter:image:width","content":"1200"}],["$","meta","31",{"name":"twitter:image:height","content":"630"}],["$","link","32",{"rel":"icon","href":"/favicon.ico?favicon.43c1ha936bzt6.ico","sizes":"256x256","type":"image/x-icon"}],["$","$L25","33",{}]]

전자문서 프로젝트에서의 기술적 도전과 성장기

댓글