브라우저에서 문서 다루기 #6: react-pdf를 11.0.0으로 올리기만 하니 Chromium 140과 143에서 PDF가 열리지 않았어요. README대로 워커만 legacy로 바꿔도 그대로였고, next.config.ts에서 pdf.js 경로 세 개를 모두 legacy로 바꾸니 열렸어요. 기본으로 켜진 Suspense는 4편의 「보이는 쪽만」 뷰어를 스크롤할 때마다 맨 위로 되돌렸어요.지난 글에서 react-pdf 11로 올리면 Chromium 140에서 「This page couldn't load」 화면이 뜬다고 짧게 적었어요. 그 이야기를 풀어 보려고 이번에는 4편의 「보이는 쪽만」 뷰어를 11.0.0으로 옮겨 봤는데요, 브라우저 하한 말고도 화면에서 바로 드러나는 변화가 하나 더 있었어요. ..
에이전트와 일하는 프런트엔드 #7: 「LLM은 중요한 GMP 용도에 쓰지 말라」던 Annex 22 초안은 의견 약 1,300건을 받고, 모델 종류 대신 위험으로 선을 다시 그을지 검토하고 있어요. 최종본은 내년 초로 밀렸는데요, 그사이 미국 FDA는 AI 에이전트가 만든 문서를 사람이 검토하지 않은 것을 경고장에서 위반으로 짚었어요.2편에서 유럽의 의약품 제조 기준 부속서 초안이 「중요한 결정에는 정적이고 결정론적인 모델만 쓴다」는 선을 그었다고 썼어요. 그 초안의 의견 수렴이 끝난 지 곧 1년인데요, 최종본은 아직 없고 선을 어디에 그을지부터 다시 논의하고 있어요. 이 글에서는 Annex 22 초안이 어떤 의견을 받았고 지금 규제기관이 무엇을 다시 묻고 있는지, 그사이 미국과 영국에서 나온 신호까지 정..
브라우저에서 문서 다루기 #5: 보이는 쪽만 그리는 뷰어에 getTextContent()로 300쪽 색인을 붙이는 데는 1초 안팎이면 충분했어요. 어려운 건 줄 끝에서 잘린 단어와 텍스트 조각의 경계였어요. 두 번 나오는 「임상시험」을 pdf.js 기본 뷰어는 한 번만 찾았고, react-pdf 10.5.0에서 조각마다 를 씌우는 방식은 두 곳 모두 칠하지 못했어요.지난 글에서는 300쪽 PDF를 화면 근처 쪽만 그리게 바꿨어요. 그 대신 브라우저 찾기(Ctrl+F)로는 멀리 있는 쪽을 찾을 수 없게 됐는데요, 이 글에서는 텍스트 레이어에 기대지 않고 문서 전체에서 찾고, 찾은 자리를 칠하는 기능을 만들어 볼게요. 색인은 금방 붙었고, 오래 붙잡은 건 줄 바꿈과 조각 경계였어요.확인에는 PDF 두 개와 ..
에이전트와 일하는 프런트엔드 #6: 커밋의 작성자와 날짜는 제가 쓰고 싶은 대로 쓸 수 있어서, 판정과 측정이 나중에 증거가 되려면 누가·언제는 시스템이 적고 왜는 시스템이 묻게 해야 해요.지난 글에서 속도를 재기 전에 성공 기준부터 적어 두자고 했어요. 그런데 그 기준을 어디에 적었는지가 또 문제인데요, 나중에 누가 "그 기준, 결과 보고 고친 거 아니에요?"라고 물을 때 git log를 보여 주는 걸로 답이 될까요? 이 글에서는 에이전트와 일하며 남는 기록이 증거가 되려면 무엇이 필요한지, 임상시험 규정이 기록에 요구하는 조건에 대 보며 정리해 볼게요.먼저 정정할 게 하나 있어요. 2편에서 누가 언제 무엇을 승인했는지가 PR·커밋·CI 기록으로 남아 있으면 그건 감사 추적이라고 썼는데요, 이번에 규정..
브라우저에서 문서 다루기 #4: 300쪽 PDF를 한꺼번에 그려도 첫 쪽은 1초 안에 떠서, 비용을 늦게 알아채요. 그사이 캔버스 300장이 2.2GB를 잡고 1쪽 글자는 6~9초 뒤에야 생겨요. 화면 근처 쪽만 그리면 캔버스 5장, 37MB로 충분해요.지난 글에서는 형광펜을 좌표와 인용문으로 같이 저장했어요. 그런데 형광펜을 칠할 문서가 수백 쪽이면 다른 문제가 먼저 나오는데요, 모든 쪽을 한꺼번에 그리는 pages.map() 한 줄에서 시작하는 문제예요. 이 글에서는 300쪽 PDF를 전부 그릴 때와 화면 근처 쪽만 그릴 때를 재 보고, 보이는 쪽만 그릴 때 챙길 것을 정리해 볼게요.확인하려고 300쪽짜리 PDF를 하나 만들었어요.문서 — Letter 크기(612×792pt) 300쪽. 쪽마다 쪽 번..
브라우저에서 문서 다루기 #3: 드래그한 글자 범위를 PDF 좌표로만 저장하면, 앞쪽에 한 줄이 늘어나는 순간 형광펜이 윗줄을 칠해요. 인용문과 앞뒤 문맥을 같이 저장하면 제자리를 다시 찾아요.지난 글에서 PDF 위 박스는 PDF 좌표로 저장해야 배율과 회전을 견딘다는 데까지 봤어요. 그런데 형광펜은 박스와 조금 다른데요, 사용자가 사각형을 그리는 게 아니라 글자를 골라서 생기는 표시거든요. 이 글에서는 텍스트 레이어에서 드래그한 범위를 무엇으로 저장해야 문서가 바뀌어도 제자리를 찾는지 정리해 볼게요.확인하려고 개정 전과 후 문서를 한 벌씩 만들었어요. 선택할 문구는 두 줄에 걸친 「within 24 hours of / the site becoming aware」예요.v1 — 제목과 본문 여섯 줄. 본문..
브라우저에서 문서 다루기 #6: react-pdf를 11.0.0으로 올리기만 하니 Chromium 140과 143에서 PDF가 열리지 않았어요. README대로 워커만 legacy로 바꿔도 그대로였고, next.config.ts에서 pdf.js 경로 세 개를 모두 legacy로 바꾸니 열렸어요. 기본으로 켜진 Suspense는 4편의 「보이는 쪽만」 뷰어를 스크롤할 때마다 맨 위로 되돌렸어요.지난 글에서 react-pdf 11로 올리면 Chromium 140에서 「This page couldn't load」 화면이 뜬다고 짧게 적었어요. 그 이야기를 풀어 보려고 이번에는 4편의 「보이는 쪽만」 뷰어를 11.0.0으로 옮겨 봤는데요, 브라우저 하한 말고도 화면에서 바로 드러나는 변화가 하나 더 있었어요. ..
에이전트와 일하는 프런트엔드 #7: 「LLM은 중요한 GMP 용도에 쓰지 말라」던 Annex 22 초안은 의견 약 1,300건을 받고, 모델 종류 대신 위험으로 선을 다시 그을지 검토하고 있어요. 최종본은 내년 초로 밀렸는데요, 그사이 미국 FDA는 AI 에이전트가 만든 문서를 사람이 검토하지 않은 것을 경고장에서 위반으로 짚었어요.2편에서 유럽의 의약품 제조 기준 부속서 초안이 「중요한 결정에는 정적이고 결정론적인 모델만 쓴다」는 선을 그었다고 썼어요. 그 초안의 의견 수렴이 끝난 지 곧 1년인데요, 최종본은 아직 없고 선을 어디에 그을지부터 다시 논의하고 있어요. 이 글에서는 Annex 22 초안이 어떤 의견을 받았고 지금 규제기관이 무엇을 다시 묻고 있는지, 그사이 미국과 영국에서 나온 신호까지 정..
브라우저에서 문서 다루기 #5: 보이는 쪽만 그리는 뷰어에 getTextContent()로 300쪽 색인을 붙이는 데는 1초 안팎이면 충분했어요. 어려운 건 줄 끝에서 잘린 단어와 텍스트 조각의 경계였어요. 두 번 나오는 「임상시험」을 pdf.js 기본 뷰어는 한 번만 찾았고, react-pdf 10.5.0에서 조각마다 를 씌우는 방식은 두 곳 모두 칠하지 못했어요.지난 글에서는 300쪽 PDF를 화면 근처 쪽만 그리게 바꿨어요. 그 대신 브라우저 찾기(Ctrl+F)로는 멀리 있는 쪽을 찾을 수 없게 됐는데요, 이 글에서는 텍스트 레이어에 기대지 않고 문서 전체에서 찾고, 찾은 자리를 칠하는 기능을 만들어 볼게요. 색인은 금방 붙었고, 오래 붙잡은 건 줄 바꿈과 조각 경계였어요.확인에는 PDF 두 개와 ..
에이전트와 일하는 프런트엔드 #6: 커밋의 작성자와 날짜는 제가 쓰고 싶은 대로 쓸 수 있어서, 판정과 측정이 나중에 증거가 되려면 누가·언제는 시스템이 적고 왜는 시스템이 묻게 해야 해요.지난 글에서 속도를 재기 전에 성공 기준부터 적어 두자고 했어요. 그런데 그 기준을 어디에 적었는지가 또 문제인데요, 나중에 누가 "그 기준, 결과 보고 고친 거 아니에요?"라고 물을 때 git log를 보여 주는 걸로 답이 될까요? 이 글에서는 에이전트와 일하며 남는 기록이 증거가 되려면 무엇이 필요한지, 임상시험 규정이 기록에 요구하는 조건에 대 보며 정리해 볼게요.먼저 정정할 게 하나 있어요. 2편에서 누가 언제 무엇을 승인했는지가 PR·커밋·CI 기록으로 남아 있으면 그건 감사 추적이라고 썼는데요, 이번에 규정..
브라우저에서 문서 다루기 #4: 300쪽 PDF를 한꺼번에 그려도 첫 쪽은 1초 안에 떠서, 비용을 늦게 알아채요. 그사이 캔버스 300장이 2.2GB를 잡고 1쪽 글자는 6~9초 뒤에야 생겨요. 화면 근처 쪽만 그리면 캔버스 5장, 37MB로 충분해요.지난 글에서는 형광펜을 좌표와 인용문으로 같이 저장했어요. 그런데 형광펜을 칠할 문서가 수백 쪽이면 다른 문제가 먼저 나오는데요, 모든 쪽을 한꺼번에 그리는 pages.map() 한 줄에서 시작하는 문제예요. 이 글에서는 300쪽 PDF를 전부 그릴 때와 화면 근처 쪽만 그릴 때를 재 보고, 보이는 쪽만 그릴 때 챙길 것을 정리해 볼게요.확인하려고 300쪽짜리 PDF를 하나 만들었어요.문서 — Letter 크기(612×792pt) 300쪽. 쪽마다 쪽 번..
브라우저에서 문서 다루기 #3: 드래그한 글자 범위를 PDF 좌표로만 저장하면, 앞쪽에 한 줄이 늘어나는 순간 형광펜이 윗줄을 칠해요. 인용문과 앞뒤 문맥을 같이 저장하면 제자리를 다시 찾아요.지난 글에서 PDF 위 박스는 PDF 좌표로 저장해야 배율과 회전을 견딘다는 데까지 봤어요. 그런데 형광펜은 박스와 조금 다른데요, 사용자가 사각형을 그리는 게 아니라 글자를 골라서 생기는 표시거든요. 이 글에서는 텍스트 레이어에서 드래그한 범위를 무엇으로 저장해야 문서가 바뀌어도 제자리를 찾는지 정리해 볼게요.확인하려고 개정 전과 후 문서를 한 벌씩 만들었어요. 선택할 문구는 두 줄에 걸친 「within 24 hours of / the site becoming aware」예요.v1 — 제목과 본문 여섯 줄. 본문..
