Changhoon JungResume

단일 viewStore 기반 Infinite Canvas 좌표계 설계

• 옛 모드의 분산 상태(zoomControl.scale + pinchZoom.currentScale + viewport scroll left/top)를 단일 viewStore (translate(x,y) + scale + rotation)로 통합, 페이지 wrapper 에 CSS transform 한 번으로 적용
• Paper.js 캔버스의 view.viewSize 를 PDF pt 단위 native 로 고정하여, 마크업 좌표가 줌·회전과 무관하게 항상 PDF pt 로 저장 → 줌 인/아웃, 회전 후에도 마크업 정렬 어긋남 0
• isAnimating 토글로 transition 적용 여부 제어 — 페이지 전환 등 *수동 변경* 시에만 240ms 보간, 핀치·드래그 등 *능동 변환* 중에는 즉시 반응
• Boundary 클램프 (MIN_VISIBLE_PX 80px) 로 페이지가 viewport 밖으로 완전히 사라지지 않도록 pan/zoom 결과 자동 보정

페이지 가상화 + 압축 캐시 — 1000+ 페이지 PDF 대응

• PdfPageViewer 가 visibility window 를 계산하여 현재 보이는 페이지 ± buffer 만 렌더링, 페이지 전환 시 PageCanvasManager 가 마운트/언마운트되어 Paper.js scope 도 함께 정리
• CompressedMap(hot LRU 100 슬롯 + cold lz-string compressToUTF16) 으로 페이지별 paper.js JSON 보관 — 압축 비율 8~12배 (1000 페이지 × 50KB = 50MB → 5MB cold + 5MB hot)
• Adaptive DPI 렌더링(adaptiveDpi.ts) 으로 화면 폭에 따라 페이지 해상도 자동 조절, DPR-aware 렌더로 레티나·고배율 디스플레이 선명도 확보

PathKit (Skia WASM) 기반 robust 지우개 재설계

• paper.js 내장 boolean 연산의 fragile 함(centerline split·legacySubtract 등) 으로 인한 잔여 path / 깨진 도형 문제를 Skia 의 PathOps subtract 로 교체
• 드래그 중에는 시각 path(blendMode: destination-out) 로 GPU 합성 즉시 시각 erase, pointerup 시 PathKit subtract 로 실제 데이터 갱신하는 2단계 모델
• 공간 인덱스(grid hash) 도입(CELL_SIZE 64px, GRID_THRESHOLD 50) — O(N) layer scan 을 eraser bounds 가 겹치는 cell 의 item 만 검사하는 O(local) 로 단축, 100+ stroke 페이지 에서도 지우개 stutter 0

시그니처 UI — 액체 모핑 도구 탭 인디케이터

상단 도구 버튼 *바로 아래* 로 슬라이드 다운하는 colored 탭(현재 색·두께/fontSize 숫자 표시) → 탭을 누르면 동일 DOM 박스가 풀 도구설정 팝오버로 *액체처럼* 부풀어 변형. 6개 속성(width / height / left / top / 4개 border-radius) 을 동시에 transition 하여 탭 ↔ 팝오버를 단일 컨테이너 모핑으로 표현.

• cubic-bezier(.3, 1.4, .5, 1) 380ms 탄성 over-shoot easing 으로 시그니처 모션 구현
• ::before(solid tab 색 base) + ::after(글래스 overlay) cross-fade 로 배경 색이 회색 깜빡임 없이 자연스럽게 전환
• WCAG relative luminance 계산으로 탭 배경색 명도 기준 흑/백 텍스트 자동 분기 — 사용자가 어떤 색을 골라도 두께 숫자 가독성 보장
• {#key currentTool} 로 도구 전환 시 컴포넌트 재마운트 → Svelte transition:fly 가 *옛 탭 슬라이드 업* + *새 탭 슬라이드 다운* 동시 처리

도구별 메모리 + 도구별 맞춤 팔레트

• brushSettings 가 도구별 마지막 색·두께·fontSize 를 colorByTool / widthByTool / fontSizeByTool Map 으로 보존, 도구 전환 시 applyToolDefault() 로 마지막 값 자동 복원
• 도구 성격에 맞는 차등 팔레트 설계 — pen=풀 팔레트(rainbow 7×6 + grayscale 1열 = 49색), highlighter/사각형/원/선=simplifiedPalette 5색(Tailwind 400~500 채도), text=textPalette 6색(검정+5색), eraser=색 섹션 없음
• 정합 정책 — 각 도구의 기본색은 *그 도구의 팝오버 팔레트* 안에 반드시 존재해야 함 (초기 active 표시 보장)

페이지별 Undo/Redo 히스토리 매니저

• 페이지별 snapshot 스택(페이지당 200, 전체 1000 cap) 으로 형광펜·펜 100+ stroke 도 끝까지 undo 가능
• 300ms debounce 로 연속 입력을 단일 스냅샷으로 압축, 마지막 스냅샷 중복 방지 Map 으로 동일 상태 push 차단
• 활성 페이지가 바뀌면 canUndo/canRedo 가 해당 페이지 스택을 derived 로 자동 반영

이중 호스트 브리지 — Android WebView / iframe postMessage

• window.pdfv.* (호스트 → 뷰어 API) — loadPdf / loadPdfStreamUrl / loadPdfBase64, setVisibility(patch), setSaveIntent, setCustomButtons, setSideToolbarPosition, restoreEditCanvas, showFatalError, registerConfirmHandler / registerToastHandler
• window.conn.* (뷰어 → Android JsInterface) — onSaveComplete(json, deletedIds), closeViewer, retryPdfLoad, requestPageImage(pageNum, dpi, reqId)
• iframe `postMessage` 채널로 Spring Boot 임베드 환경에서도 동일 API 사용 가능 — 호스트별 분기 코드 제거
• Visibility 패치는 키 기반 다단계 patch (`overlay.popover.history` / `toolbar.side.rotate` 등) 로 UI 요소 단위 표시/숨김 호스트 위임

Svelte 5 runes + Factory Function 패턴 일관 적용

• 옛 `$:` reactive 구문 / writable store 폐기, $state / $derived / $effect 일관 사용으로 반응성 추적이 컴포넌트와 lib 모듈을 동일 모델로 관통
• 모든 lib 모듈을 class 대신 `createXxx()` factory function 으로 노출 — `$state` 를 함수 내부에 자연스럽게 캡슐화, 인스턴스화 비용 낮음, 의존성을 명시적 인자(DI)로 받음
• 20+ factory (pdfLoader / pdfRenderer / imageLoader / pageNavigation / viewStore / viewPinchZoom / viewWheelZoom / paperCanvas / pageCanvasManager / canvasState / brushSettings / drawingMode / highlighterMode / eraserMode / shapeTools / textMode / selectionMode / lassoMode / historyManager / lowResPreview / userOverlay …) 를 PdfViewer.svelte 가 단일 오케스트레이터로 조립
• tsc --noEmit + svelte-check 통과 필수 컨벤션, 주석은 *왜(Why)* 중심 — *무엇(What)* 은 코드로 자명하면 생략

글래스모픽 chrome 통일 디자인 시스템

• 상단 PdfToolbar / 사이드 toolbar / Popover / ConfirmDialog / SaveFab / ToolTabIndicator 모두 동일 글래스 패턴 — linear-gradient(135deg) 3-stop white α + backdrop-filter blur(10px) saturate(140%) + slate-tone shadow
• `@supports not (backdrop-filter: blur())` 폴백 분기로 미지원 브라우저에서도 시각 일관성 확보
• tab(solid 도구 색) ↔ popover(글래스) 전환을 ::before / ::after 두 layer 의 opacity cross-fade 로 처리, 단일 컨테이너에서 두 상태 시각이 자연스럽게 morph

마크업 도구 8종 + 텍스트 inline 편집

• 선택 / 영역선택(lasso) / 펜 / 하이라이터 / 지우개 / 사각형 / 원 / 직선 / 텍스트 9개 도구, 각각 createXxx 모드 모듈로 분리
• 펜 — Paper.js Path 에 Galaxy S Pen 압력 반영 (pressure 0~1 → strokeWidth × (0.3 + p × 1.4))
• 하이라이터 — 반투명 stroke + butt linecap 으로 형광펜 메타포 재현
• 텍스트 — Paper.js PointText + inline 편집기 + TextEditMiniToolbar (색·폰트 크기 mini 툴바) 로 캔버스 위에서 바로 편집
• 선택 — selectionBox + 8-방향 selectionResize 핸들로 객체 이동·리사이즈, lasso 는 marquee 영역 선택

저장 파이프라인 — chunked save + lz-string 압축

• FAB Speed Dial 클릭 → 페이지별 canvasState.exportJSON() → lz-string 압축 → window.conn.notifySaveChunk(pageNum, chunk) chunked 전송 → 전체 페이지 완료 시 notifySaveCommit()
• SaveProgressDialog 로 진행률을 실시간 시각화하고, 미저장 상태에서 닫기 시도 시 ConfirmDialog 로 사용자 의도 확인
• 호스트가 등록한 registerConfirmHandler / registerToastHandler 로 확인 UI 를 호스트 네이티브 UI 로 가로채기 가능 — Android 다이얼로그 / iframe parent toast 와 시각 통일

양손 핀치 줌 + 휠 줌 + 회전

• viewPinchZoom — 두 손가락 핀치 시 viewStore.zoomAtPoint(scale, focal) 직접 호출하는 DOM 직접 조작 없는 새 모드, 검지+중지 *완전히 붙인* 채로 핀치인 시작 케이스도 정상 인식하도록 MIN_PINCH_DISTANCE_PX=0 + 거리 임계 100px 팜리젝션
• viewWheelZoom — Ctrl + 휠 줌, 휠만 사용 시는 네이티브 스크롤로 위임
• 페이지별 회전(0/90/180/270°) — rotations Record<pageNum, deg> 로 *현재 보고 있는 페이지만* 적용, 회전된 4 모서리의 외접 사각형 계산으로 viewport bounding box 정확히 추적

호스트 UI 위임 + Visibility 패치

• 사이드 툴바 위치를 호스트가 `right' | 'bottom'` 으로 선택 가능 — 같은 뷰어가 데스크탑(오른쪽)·태블릿 가로(아래) 두 레이아웃으로 적응
• registerConfirmHandler / registerToastHandler 로 호스트가 자체 UI 로 가로채기 — Android 네이티브 다이얼로그, Spring 모달 등과 시각 통일
• setSaveIntent('save' | 'mail' | 'approval' | 'custom') 로 FAB 라벨·아이콘을 호스트 워크플로우에 맞춰 동적 변경
• setCustomButtons(json) 로 Save FAB Speed Dial 에 호스트별 sub-action 주입

하이브리드 온/오프라인 아키텍처 설계

• 내장 LocalWebServer에 Spring-style 어노테이션 프레임워크(@RestController, @PostMapping 등) 자체 구현, 웹 서비스 레이어 80% 재사용
• Gradle 플러그인으로 Controller/Service 보일러플레이트 자동 생성, 150+ REST API 엔드포인트를 앱 내부에서 서빙

온오프라인 모드 전환 및 네트워크 처리

• NetworkManager로 VPN 연결 상태를 실시간 감지하고, 연결 끊김 시 커스텀 에러 페이지에서 자동 재연결 시도(10초 카운트다운) + 3회 실패 시 오프라인 모드 전환 버튼 노출
• 오프라인 모드 진입 시 로컬 저장된 자격증명으로 인증 처리하고, 온라인 복귀 시 쿠키 초기화 후 서버 재접속 + 대기 데이터 자동 업로드
• 네이티브 2단계 로그인(VPN→OTP)을 WebView 단일 화면으로 통합, VPN 터널 타이밍 레이스컨디션을 폴링+재시도 패턴으로 해결 (WebViewCookieJar로 OkHttp↔WebView 세션 자동 공유)

WebView ↔ Native 브릿지 성능 최적화

• @JavascriptInterface의 동기 호출이 SQLite 쓰기 잠금과 충돌하여 수 초간 UI 프리징이 발생하는 문제를 근본 원인까지 추적, 비동기 디스패치 패턴으로 전환하여 UI 응답성 확보
• 다운로드 병렬 처리 시 스레딩 모델과 DB 잠금 경합 문제를 분석하여, @JavascriptInterface 메서드 전체를 I/O-free 원칙으로 재설계

오프라인 데이터 동기화 엔진

• OfflineDataSyncManager로 18+ 동기 서비스를 관리하고, SyncQueueHelper로 검사결과 저장과 업로드 큐 등록을 하나의 트랜잭션으로 처리
• 온라인 전환 시 SYNC_QUEUE → Canvas → PDF 순서로 대기 항목을 자동 업로드하고, 실패 시 지수 백오프로 재시도
• 증분 동기화로 변경분만 다운로드하고, 시설 단위로 50+ 테이블의 연관 데이터를 일괄 포함하여 오프라인 현장 조회 지원
• 모바일 네트워크 불안정성을 고려하여 일괄(Atomic) 대신 테이블 단위 부분 실패 허용 다운로드 전략을 채택, 중간 실패 시에도 완료된 데이터는 보존하고 실패 테이블만 재시도

Oracle→SQLite 자동 변환 레이어

• MyBatis 스타일 커스텀 SqlMapper ORM (Spring 미의존), 동적 SQL 빌딩 + 파라미터 바인딩
• NVL→COALESCE, DECODE→CASE WHEN, ROW_NUMBER, MERGE 등 함수 자동 변환, 128개 테이블 DDL 기반 SQLite 스키마 자동 생성

오프라인 PDF 마크업 편집 및 동기화

• 오프라인에서 PDF에 서명·주석을 편집하면 편집여부와 동기화 상태를 추적하고, 온라인 복귀 시 서버에 자동 반영
• Canvas JSON과 마크업 PDF를 각각 동기화하는 이중 업로드 파이프라인 구성, 이미지 압축으로 업로드 트래픽 절감
• PDF·스캔이미지 다운로드 이력을 로컬 DB에 기록하여, 앱 재시작 후에도 다운로드 상태를 복원

초기 로드 성능 최적화 (Gzip + Lazy Load + Splash)

• 초기 로드 분석 결과 109개 리퀘스트 / 9.9MB / 15초 빈 화면 문제를 식별, Gzip 압축 + OpenLayers(747KB) 지연 로딩 + 미사용 라이브러리 Defer 전략으로 전송량 ~2.5MB로 약 75% 경량화
• WebView 로딩 중 인라인 스플래시 화면을 적용하여 체감 대기시간을 제거하고, ScriptLoader를 확장(loadCssOnce, loadOpenLayers)하여 메뉴 최초 진입 시 동적 번들 로딩 구현

오프라인 UX 피드백 시스템

• 온/오프라인 상태를 현장 작업자가 즉각 인지할 수 있도록 Body 배경색·뱃지·SpeedDial·메뉴 비활성화 4계층 시각 피드백 설계
• 다운로드·동기화 11가지 상태를 순수 SVG + CSS 애니메이션으로 시각화 (stroke-dasharray 원형 프로그레스, 체크마크 드로잉, 시머 리플)
• Normal→Warning→Critical 3-상태 머신 기반 플로팅 세션 타이머 구현, 터치 임계값으로 드래그/탭 분리 및 보안 요구사항에 맞춘 갱신 로직 설계

팀 AI 협업 체계 구축

• CLAUDE.md·아키텍처·포팅 가이드 등 30개 AI 컨텍스트 문서를 구축하여 팀원 전원이 Claude Code로 일관된 컨텍스트 위에서 개발 가능한 환경 설계
• 커스텀 스킬(front-sync, scm, svn-commit-msg) 등록으로 반복 작업을 자동화하고, MCP 서버 연동으로 AI 에이전트의 작업 범위 확장

AI 기반 개발 프로세스

• Claude Code + MCP 활용하여 Oracle→SQLite 쿼리 포팅·스키마 변환 작업을 AI로 자동화, 128개 테이블 포팅 생산성 극대화
• 오프라인 앱 구조 설계 후 팀원에게 도메인별 업무를 분배하고, 코드 리뷰를 통해 품질 관리. 150+ API·8개 비즈니스 도메인 커버
• 자체 MCP 서버 개발 (`mcp-servers/db-schema/`) — Oracle 4개 스키마(CMORA01·HRORA01·SAORA01·SMART) DDL 파일을 파싱하여 5종 도구 (`get_table_schema`·`search_tables`·`search_columns`·`list_schema_tables`·`get_table_for_query`) 노출, Claude 가 SQL 작성 시 Oracle 원본 컬럼·타입을 정확히 조회하도록 도구화 — "DDL.sql 만 보고 추측" 회귀 사전 차단
• Gradle 플러그인 `ControllerRegistryPlugin` 자체 구현 — `@RestController` Java 소스 정규식 스캔, 다중 파라미터 생성자 + 동명 Service 패키지 alias 자동 생성, `ServiceContainer` Reflection 기반 DI ([Context, SqlMapper] 우선 · [SqlMapper] fallback) 로 Spring 스타일 컨벤션을 NanoHTTPD 위에 재현
• 7 Phase 오프라인 포팅 방법론 정립 (`docs/25_OfflinePorting/OFFLINE_PORTING_METHODOLOGY.md`) — "Oracle NULL → SmartHashMap → SQLite 빈문자열" 호환성 함정, `COALESCE/IFNULL` 빈 문자열 통과 함정, `INSERT OR REPLACE` vs `MERGE INTO` 동작 차이 등 실패 사례 + 예방 체크리스트 문서화

PdfViewer 멀티프로세스 격리 + Overlay WebView 풀링

PDF 뷰어를 별도 프로세스로 격리하여 OOM 사고가 메인 앱을 끌고 가지 않도록 분리. 그러나 격리는 새로운 문제를 만들었다 — 메인 프로세스의 PrimeVue UI(Drawer·SpeedDial)가 PdfViewer 위에 얹히지 못함. 정공법으로 우회 아키텍처를 설계.

• `AndroidManifest.xml` 에 `android:process=":pdfviewer"` 별도 프로세스 분리 → A0 도면 줌 OOM 이 메인 앱 + VPN 동반 사망으로 전파되던 회귀 차단
• 풀스크린 투명 WebView OverlayActivity + 위젯별 HTML 분리 (`widget-drawer.html` / `widget-speeddial.html`) 로 메인 프로세스 UI 차폐 문제 우회 — PrimeVue 컴포넌트를 별도 Activity 로 PdfViewer 위에 얹음
• `OverlayWebViewPool` 정적 풀 — WebView 인스턴스 + 페이지 로드 200~400 ms 를 mainPage 로드 직후 preload, 첫 클릭 비용 0 달성. close 시 자동 재부팅 사이클로 풀 유지

대용량 PDF 청크 저장 + 탭 라이프사이클 복원

• 1000+ 페이지 PDF 마크업 저장 시 메모리·Intent 1 MB 한계를 회피하는 청크 누적 패턴 — `onSaveChunk(seqId, pageNum, json)` 호출마다 `Map<String, TreeMap<Integer, String>>` 에 페이지별 JSON 누적, `onSaveCommit(seqId, totalPages, partialUpdate)` 시 단일 객체로 합쳐 기존 저장 경로 재사용
• 저장 직전 `/cmm/session/keepAlive.do` 호출로 세션 검증 → 만료 시 `anonymousUser` 로 저장되던 회귀 차단, 만료 감지 시 Svelte `window.pdfv.showAlert` + Activity finish 로 강제 재로그인 유도 (Native AlertDialog 폐기, Svelte 다이얼로그로 통일)
• 탭 비활성화로 finish 된 PdfViewerActivity 를 사용자가 탭 복귀 시 캐시된 unsaved canvas 로 자동 재 launch — `EXTRA_RESTORE_FROM_STATE` Intent extras 통한 1회성 복원, mainPage 탭 시스템과 별도 프로세스 PdfViewer 인스턴스 라이프사이클 연동

서버사이드 PDF Flatten 전환 + 분산 동시성 가드

• 로컬 PDF flatten + 멀티파트 업로드 경로 폐기 — `MarkupPdfFlattenManager` + `PdfUploadManager` 를 서버사이드 PDFBox flatten 호출 (`/cmm/pdfviewer/reflattenOnServer.do`) 로 이관, APP 디스크·대역폭 부담 해소 + `pdf_upload_queue` 테이블 제거
• 동일 (`ATCH_FILE_NO`, `SN`) 에 대해 PdfViewerActivity 즉시 reflatten 과 UploadManager 배치 reflatten 이 동시 발화하는 케이스를 30초 ConcurrentHashMap 디바운스 (`RECENT_FLATTEN`) 로 차단
• 동시성 락 격상 — `GLOBAL_UPLOADING` AtomicBoolean 을 인스턴스 단위에서 JVM 전역 락으로 격상, Scheduler / MainActivity / NetworkManager 다중 트리거 중복 동시 진입 차단
• `callReflattenOnServer(serverUrl, maxVersion)` — 저장 직후 `BAKED_MAX_VERSION` 전달로 STALE 분기 회피 (낙관적 버전 전달)

오프라인 동기화 자동화 — 3중 트리거 + 실패 사유 분기

• 3중 트리거 보장 — (1) 5분 주기 `ScheduledExecutorService` (`CanvasAutoSyncScheduler`, INITIAL_DELAY 2분→10초 단축) (2) `NetworkCallback` 회복 시 5초 디바운스 자동 발사 (`NetworkManager.scheduleSyncTriggerOnReconnect`) (3) VPN+OTP 성공 직후 즉시 발사 (`MainActivity.checkAndStartPendingUpload`)
• `UploadOutcome` enum 3분기 (SUCCESS / FAILED_RETRY / FAILED_AUTH_SKIP) — 401·403 인증 만료는 retry_count 미증가로 사용자 재로그인 후 자연 복구, 일반 일시 오류만 max_retry 카운트
• 회복성 — max_retry 5 → 20 상향, 24시간 경과 FAILED 자동 NOT_SYNCED 복구 (`recoverStaleFailedCanvas`), JVM 전역 `GLOBAL_UPLOADING` 으로 다중 트리거 중복 차단

사용자별 PDF 격리 + 매직바이트 진단

• 공용 태블릿 순차 로그인(검사관 A→B) 시 검사관 A의 PDF 가 B 에게 노출되는 보안 이슈를 PK 확장 (`atch_file_no`, `sn`, `user_id`) + 사용자별 디렉토리 분리 `pdfDirectory/{userId}/` 로 완전 격리
• SQLite PK 마이그레이션 — 임시 테이블 + INSERT + DROP + RENAME 트랜잭션 패턴 + 백업으로 무손실 마이그레이션
• "표시명은 `.pdf` 인데 매직바이트가 HWP (`D0 CF 11 E0`)" 디스크 파일 진단 → 가스안전공사 PDF 변환 솔루션 (`TRANS_*.pdf` / `PDF_CHG_SCS_YN`) 우회 경로를 신규 전용 엔드포인트 `/offline/getInspectionPdfFile.do` 로 분리 (옵션 C — 기존 `getPdfFile.do` 회귀 0건)

WebView 보안 감사 — 10건 조치 + 위험도·사이드이펙트 평가

WebView 기반 하이브리드 앱의 보안 취약점을 단순 나열이 아닌 위험도(높음/중간/낮음) + 사이드이펙트 + 선행조건까지 명시한 감사 보고서로 정리. 즉시 조치 10건 + 향후 검토 4건 (`docs/51_Security/SECURITY_AUDIT_REPORT.md`).

• VPN 비밀번호 평문 → AndroidX `EncryptedSharedPreferences` AES256-GCM + 평문 자동 마이그레이션 (`LoginPreferences.kt`)
• WebView 정책 강화 — `setAllowUniversalAccessFromFileURLs` / `setAllowFileAccessFromFileURLs` / `setAllowFileAccess` 3종 false, `MIXED_CONTENT_ALWAYS_ALLOW` → `COMPATIBILITY_MODE`, DevTools 조건부 활성화
• JS Injection 방지 — `callJavaScriptCameraCallback` · `onReturnDate` · `notifyNetworkStateChanged` 콜백에 `'`, `"` 이스케이프
• 경로 순회 방지 — `showPdfFromBase64` · `showPdfOnline` · `showEtcUrlPOP` URL 스킴 화이트리스트 + `File.getName()` + 특수문자 치환
• 민감정보 로깅 (쿠키·응답 body·POST body·GET params) 을 `BuildConfig.DEBUG` 조건부로 변경 — Release 빌드에서 로그캣 노출 차단
• 향후 검토 4건 (HTTP 평문·임시 PDF 잔류·FileProvider 경로 개방·콜백명 미검증) 은 *알면서 미루는* 의식적 판단으로 별도 우선순위 기록

GPS 듀얼 모드 + 실내 한계 기술 보고서

• `GpsManager` 3개 독립 모드 동시 운영 — 단발 조회 (`requestCurrentLocation`, 60초 타임아웃·5분 캐시), 연속 추적 (`startLocationTracking`, idempotent · `onPause/onResume` 자동 일시중지 · accuracy 30 m 필터), fresh 단발 (`requestFreshLocation`, 추적과 동시 진행 · requestTime - 1500 ms 이전 fix 거부 · 15초·100 m)
• "실내에서 GPS 안 됨" 사용자 문의를 위성 신호 감쇠율 (콘크리트 99%+) + VPN 의 Google 위치 서버 차단 라우팅까지 분석한 기술 보고서로 응답, VPN 화이트리스트 / 사내 WiFi DB / BLE 비콘 / 수동 입력 4가지 대안 검토안 제시
• `ConnectivityManager.NetworkCallback` 으로 VPN/WIFI/MOBILE/ETHERNET 트랜스포트 + validated capability 실시간 감지, 회복 시 5초 디바운스 후 미동기화 데이터 자동 업로드 발사

폐쇄망 프론트엔드 아키텍처 설계

• Node.js·npm·Webpack/Vite 사용이 불가한 폐쇄망에서 IIFE 패턴 기반 모듈 시스템을 설계하여 private 스코프 확보 및 전역 오염 방지
• 라이브러리를 UMD 빌드로 반입하고 의존성 그래프를 설계하여 로딩 순서 관리
• Promise 기반 ScriptLoader로 필요 시점에만 JS 파일을 동적 로드하여 초기 로딩 시간 50% 단축

메타데이터 기반 자동 라우팅 메뉴 시스템

• 서버에서 메뉴 메타데이터(menuId, compName, script 경로 등)를 수신하여 MenuRegistry가 캐싱하고, ScriptLoader가 동적 로드 후 ContentPanel이 Vue 컴포넌트를 자동 마운트하는 구조 설계
• 새 메뉴 추가 시 프론트엔드 코드 수정 제로, 개발 시간 80% 감소

인라인 편집 그리드(P-Edit-DataTable) 독자 설계

• PrimeVue DataTable 기반으로, 유료 솔루션(AG Grid 등) 없이 자체 설계한 3계층 아키텍처
• useEditGridFactory: 행 상태 머신 + 셀 단위 Dirty Tracking + 필수값·중복값 검증 + 일괄 저장 페이로드 자동 분류
• p-edit-datatable: VNode 변환 + 상태별 시각 피드백 + 변경 내역 팝오버
• p-edit-column: 선언적 required/unique/disabled prop
• 데이터 편집 워크플로우 4단계→1단계 단순화, 업무 개발자 CRUD 구현 코드량 80% 감소

디자인 시스템 및 PrimeBridge 모듈

• PrimeVue 4.x의 definePreset API로 커스텀 프리셋(smartonPreset)을 구성하고, colorScheme: { light, dark } 구조로 라이트/다크 모드의 semantic 토큰을 분리 정의
• darkModeSelector 설정으로 CSS 클래스 토글만으로 26개 컴포넌트가 일괄 테마 전환, 컴포넌트 설정 코드 95% 감소

Stateful App Shell 탭 시스템

• 단순 내비게이션을 넘어 시스템 전체의 골격(App Shell)으로 동작하는 Workspace Navigator 설계
• 탭별 독립 Vue 앱 인스턴스 생성으로 상태 격리, 이벤트 버스 기반 PopupService로 부모 탭 닫힘 시 자식 팝업 자동 정리
• WeakMap 활용 참조 순환 방지, 100개 탭 스트레스 테스트 메모리 누수 0건 통과

Tab Edit Mode UX 혁신 — iOS 홈 화면 앱 정리 UX 착안, 4단계 점진적 발전

검사원 1인당 5~10개 이상 탭을 동시 유지하는 환경에서, X 버튼 오터치·되돌리기 불가·일괄 정리 부재 문제를 해결하기 위해 고정형 탭 바를 In-place Edit Layout으로 혁신.

• X 버튼을 제거하고 Trash Zone 드래그 삭제를 도입, SortableJS delay:500 + onChoose/onUnchoose/onStart 콜백 조합으로 빠른 탭(<500ms→전환) / 롱프레스+드래그(→정렬) / 롱프레스+릴리스(→편집모드 진입) 3가지 터치 제스처를 정밀 분기. 고객 요구 이전에 자발적으로 제안·구현.
• "다수 탭 일괄 삭제 시 개별 드래그는 피로도가 높다"는 현장 피드백을 반영하여 iOS 위글 애니메이션, ⊖ 버튼 삭제 마킹(Set 토글 + 롤백), 블러 오버레이, ConfirmPopup 저장/취소(스냅샷 롤백) 설계.
• 개별 삭제 API N회 호출을 deleteBatchUserOpenMenu 단일 배치로 최적화.
• driver.js 코치마크 온보딩 도입, 스텝 전환 시 DOM 재생성으로 인한 체크 상태 소실을 클로저 변수로 해결.

태블릿 UX 최적화

• Hammer.js — 스와이프 패널 열기/닫기·롱프레스 제스처
• OverlayScrollbars — 네이티브 대비 공간 절약 커스텀 스크롤, v-os-scroll 디렉티브 간편 적용
• Sortable.js·Swiper.js는 Tab Edit Mode에서 심층 활용

외부 Svelte 5 PDF 뷰어 풀스택 통합 — 자사 시스템 표면으로 흡수

자사 솔루션으로 개발 중인 Svelte 5 PDF 뷰어(10,500줄)를 가스피아 SFTP·DRM·내부망 구버전 Chrome·멀티탭·앱·웹 전 표면에 통합. 외부 데모 라이브러리 도입을 넘어 데이터 모델 합의 → 외부 시스템 SQL 약속 충족 → 좌표 규범 통일까지 풀스택 책임.

• `MARKUP2_TRANS_*.pdf` 파일명 분리로 SmartOn 1.0 자산 보존, Append-only `PDF_CANVAS_DATA` 테이블 + 4단 폴백 체인 (`MARKUP2_TRANS → MARKUP_TRANS → TRANS → 원본`) 으로 단일 진실의 원천 확보
• 가스피아(KGSC) `STA00101MServiceImpl.getPdfDownload()` 표준 약속을 위해 `/techdocu/...` 경로 일관화, 외부 시스템과의 SQL 약속을 코드 변경 없이 충족
• Paper.js exportJSON 배열 형식(`["Path", {segments:[[100,200]], strokeColor:[0,0,0]}]`) 을 객체 형식으로 재귀 정규화 (`normalizeRawItem` + `normalizeSegment` + `normalizeColor`) 하여 "에러 없이 조용히 안 그려지는" 3중 silent failure 진단·수정
• `__DocumentViewer.openPDF` 단일 진입점 + `customButtons` 콜백 레지스트리 패턴으로 직렬화 불가 JS 함수의 Activity 전달 문제 해결

PDF 메타데이터 응답 50초+ → 100 ms — 서버 캐시 3계층 + prewarm

• 948페이지 PDF 첫 응답 50초+ (readTimeout) → 100 ms 내. 서버 메타 응답이 36 DPI 로 전 페이지를 실제 렌더링하던 사고를 `PDPage.getCropBox()` + `getRotation()` 메타 추출로 교체
• `PdfFileCache` 3계층 캐시 — PDF LRU+TTL(20분) / JPEG 디스크 캐시(500 MB LRU+TTL 60분) / 페이지 메타(20분) + 임시 PDF 토큰(30분 TTL), key 별 lock 으로 동시 요청 직렬화
• DPI 별 차등 JPEG 품질 (`PdfImageService.qualityForDpi()` — 썸네일 0.60 / 저해상도 0.75 / 본문 0.85) + 첫 페이지 백그라운드 prewarm + `getInitialBundle.do` 로 메타+첫 페이지 1 round-trip 통합
• Base64 인코딩 33% 오버헤드 제거 — `pageImage.jpg` 바이너리 직접 응답 + Blob URL 수명 관리 (`URL.revokeObjectURL`) 로 브라우저 HTTP 캐시 활용

오프라인 마크업 동기화 정합성 — 11개 빈틈 1Cycle 보강

검사원 제보 "동기화 안 됨" 의 실제 원인이 `pdf_file.sync_status` 미갱신으로 인한 UI 표시 결함임을 진단. P0/P1/P2/P3 11개 빈틈 전수 점검 후 한 야간 배포로 일괄 보강 (APP r1577/r1578 + Web 7e8f349).

• VPN+OTP 직후 `uploadPending(SYNC_QUEUE only)` 호출 빈틈을 `uploadAllPending(SYNC_QUEUE + Canvas + reflatten)` 통합으로 교체, max_retry 5 → 20 상향 + 24h 경과 시 자동 NOT_SYNCED 복구 (`recoverStaleFailedCanvas`)
• 오프라인 삭제·부분 업데이트 의도가 서버 미전달되어 reflatten 시 옛 마크업이 부활하던 회귀를 발견, `PDF_CANVAS_DELETE_QUEUE` / `PDF_CANVAS_UPDATE_QUEUE` 별도 큐 테이블 2개 신설
• `UploadOutcome` enum 3분기 (SUCCESS / FAILED_AUTH_SKIP / FAILED_RETRY) 로 401·네트워크·5xx 실패 사유 구분 — 인증 만료 시 retry 카운트 미증가로 자연 복구 보장
• 동시 발화 차단 — `AtomicBoolean static` 화로 Scheduler/MainActivity 동시 발화 전역 락, `requestServerFlatten` 30초 디바운스로 PdfViewerActivity 즉시 호출 + UploadManager 배치 호출 중복 제거

Oracle 오프라인 다운로드 최적화 — 풀스캔 제거 + 의존성 체인 + COUNT(*) 해시

• JENNIFER APM "TOO MANY FETCH" 워닝 진단 결과, `getRelatedMasterDataTable.do`(6,099 ms / 9회 호출) / `getGlobalReferenceCodes.do`(1,704 ms / 14개 테이블 풀스캔) 발견
• Phase 1 — 서버 캐싱 — `OfflineDownloadService.getCachedOrLoad()` TTL 60분 ConcurrentHashMap (13개 참조 테이블), 배정건 단독 다운로드 시 SKB0101MV_01 사전 체크
• Phase 2 — 의존성 체인 IN절 필터 — `배정건(LAW_TC/STIC_LAG_TC/ROLE_TC/INSP_KIND_TC) → inspTableSns → inspItemLrclCds → inspItemSmclCds → msrmtItemMdclSns` 5단 도출 후 6개 풀스캔 쿼리에 IN절 주입
• Phase 3 — 해시 변경 감지 — 13 테이블 행 수를 단일 DUAL select 로 한 번에 조회 + 카테고리 해시 비교, APP `SYNC_STATUS.table_hash` 컬럼 마이그레이션 (`COALESCE` 후방 호환), 2회차+ 변경 없는 카테고리 스킵
• SQLite WAL 동시 쓰기 미허용 특성에 따라 `isBasicDownloading ↔ isInspectionDownloading` computed 로 UI 레벨 상호 배타 잠금 — 네이티브 락 없이 SQLITE_BUSY 원천 차단

검색조건 자동 영속화 — 컨벤션 기반 프레임워크 레벨 자동 적용

• 43개 메뉴 중 39개(91%) 자동 적용 — `document` capture 단계 click 리스너 + `e.target.closest('.searchBtn')` + `contentPanel.getComponentInstance(tabId).vm.searchConditions` 딥 클론 + `setTimeout 50ms` 비블로킹 저장
• 백엔드 — `MenuController.updateUserOpenMenuProps.do` + `USER_MENU_INFO.MENU_PROPS` JSON 컬럼, 탭 복원 시 setup() 후 `Object.assign(vm.searchConditions, saved)` 로 Vue reactive 자동 갱신
• 개별 메뉴 JS 파일 수정 0건 — 단일 핸들러 + `.searchBtn` 컨벤션만 지키면 자동 적용

세션 통합 관리 + GPS Pub/Sub 인프라

• VPN(~3시간) + Web 세션(180분) 통합 `SessionManager` — 단일 카운트다운, API 호출 성공 시에만 자동 reset (DOM 이벤트 reset 정책 폐기), 낙관적 업데이트 + 실패 시 롤백, `NetworkCallback` 토스트 알림, 오프라인 환경(localhost:8080 + `conn.getConnectionStatus`) 자동 감지로 무동작
• 플로팅 세션 타이머 4상태 머신 (normal/warning/critical/extended) + 드래그 + localStorage 위치 저장 + `font-variant-numeric: tabular-nums`
• `GpsTrackerService` 싱글톤 Pub/Sub — 여러 탭/팝업이 구독해도 네이티브 GPS 리스너 1개만 유지, 100 ms 디바운스 리컨실리에이션 + `desiredState ↔ nativeState` 분리 + `onPause/onResume` 양방향 브로드캐스트
• `INativeAdapter` / `AndroidAdapter` / `DevAdapter` / `MockAdapter` 어댑터 패턴, Vworld 지오코딩 positive + negative caching 으로 API 호출 ~100배 절감

정적 리소스 차등 캐시 + 서버사이드 PDF Flatten

• Servlet Filter 차등 캐시 — `/js/vendor/**` 7일·`/js/app/**` `no-cache`(304 검증), Gzip(min-response-size 2048, ~75% 감소), HTTP/2(h2c), preload 4개 핵심, `<script defer>` (nfilter 1.1 MB + driver.js)
• 초기 로드 109 요청 9.9 MB ~15s → 2.5 MB ~5–8s 경량화, 재로그인 캐시 활용 시 500 KB
• 클라이언트 pdf-lib flatten (brittle Paper.js JSON 의존 + WebView OOM 부담) 을 서버 PDFBox `PdfMarkupFlattenService` 로 이관 — 회전 페이지(90/180/270) `Matrix` 행렬 정합, CJK fallback `FontMappers` 전역 등록
• 외부 PDF Gateway (`PdfGatewayRestfullApiUtil.jobConv`) 를 `ensureAttachmentConverted.do` 단일 엔드포인트로 통합 — Lazy On-Demand 변환 + DB 영속 캐시 + 행 lock 동시성 가드 + 30초 timeout 폴링

합성 컴포넌트 패턴으로 선언적 차트 구조 설계

• Band > Band.Header / Band.Body / Band.Arrow 계층 구조로 컴포넌트 간 결합도 최소화
• Band.Body 내부에 BunBae·JuPaSu·YongDo·EYong 4행을 선언적으로 배치하여 협업 효율과 인수인계 용이성 확보

서버-클라이언트 상태 이원화 — useReducer 상태 머신

• React-Query(staleTime: Infinity)로 서버 상태를 캐싱
• Context API + useReducer로 클라이언트 상태(배율 0.3~1.75x, 실제 스케일 토글, 호버 하이라이팅)를 4가지 액션 디스패치 기반 상태 머신으로 관리
• MyBatis 계층적 ResultMap(ReleaseSectionDTO → BandDTO → BandDetailDTO 3단계 중첩 collection)으로 단일 API 호출에 전체 트리 데이터 반환

주파수 좌표 계산 엔진 독자 설계

• 주파수 범위를 픽셀 너비로 변환하는 좌표 매핑 엔진 구현
• 밴드별 가상 전체 너비(VIRTUAL_TOTAL_WIDTH)와 확대 계수(MAGNIFICATION_FACTOR) 상수 맵 6종으로 실제/기본 스케일 이중 모드 정밀 제어
• 제너레이터 함수(mergeSortedArraysLazy)로 정렬된 배열 병합, 이벤트 기반 구간 분할 알고리즘으로 분배→주파수 구간 자동 매핑
• 레이블 겹침 감지 + 적응형 폰트 사이즈 자동 축소

React Portal + Framer Motion

• Toolbar를 Portal로 분리하여 차트 스케일 변경에 영향받지 않는 독립 렌더링 확보
• Framer Motion 스프링 물리(stiffness:300, damping:30)로 실제 스케일 토글 애니메이션 구현
• Tippy.js Portal로 Tooltip 위치 정밀 제어

Contextual UI + 스크롤 음영 + 호버 하이라이팅

• 마우스 오버 시에만 액션 버튼을 표시하는 사용자 행동 기반 UI로 화면 복잡도 감소
• 가로 스크롤 밴드에 ScrollShadow를 적용하여 좌/우 끝 도달 여부를 그라데이션 음영으로 시각 힌트 제공
• 이용(EYong) 요소 호버 시 Context 전파로 차트 전체에 걸쳐 연관 요소 하이라이팅

Context API + useReducer 기반 전역 상태 관리 체계 자체 설계

• 이미 개발이 진행 중이라 Redux 등 라이브러리 도입이 불가능한 상황에서, Context API + useReducer로 체계적 상태 관리 적용
• 도메인별로 4개 독립 Context를 분리 설계하고, State/Dispatch 분리 커스텀 훅으로 Props Drilling 해소

공통 컴포넌트 4종 자체 발굴·단독 개발 → 코드 리뷰·팀 전파

• 공통팀이 아닌 업무(협약) 파트 소속이면서, 팀 전체에 반복되는 UI 패턴(목록·검색·팝업·탭 등)을 직접 식별하여 재사용 가능한 공통 컴포넌트로 설계·개발
• 선언적 설정만으로 화면을 구성할 수 있도록 만들어, 새로운 화면 개발 시 빠르게 적용 가능한 온보딩 환경 조성
• 코드 리뷰와 사용법 안내를 통해 팀 내 코드 일관성 확보

협약변경 — 변경 시각화 UX 독자 설계

• 변경된 셀에 연노랑 배경 강조 + 입력 포커스 시 원본값 팝오버를 띄워 공간 효율적 전후 비교
• ChangePopover·ChangeCheckText 컴포넌트로 읽기/입력 모드 모두 변경 여부 즉시 파악
• 공급기업 대표기관 추가/삭제 시 자동 선택 + 왕관 아이콘(파란색=변경후, 회색=변경전) 시각화
• 사업비 S1↔S2 연차별·항목별 합계 자동 검증

Django + Flask 이중 구조 플랫폼 설계

• Django(메인 웹 + 사용자 관리)와 Flask(분석 모듈 API)를 분리한 이중 구조 설계
• SMILES 구조 입력 → 15개 이상의 AI 분석 모듈 실행 → 결과 시각화 + PDF/CSV 다운로드까지 전체 파이프라인을 단독 구현

Python multiprocessing 기반 병렬 분석

• 기존 단일 모듈 순차 실행 구조를 Pool 기반 병렬 처리로 전환
• 12개 모듈 동시 실행 시에도 모듈별 독립 프로세스로 안정적 처리, 분석 시간 대폭 단축 및 모듈 추가 시 확장성 확보

실시간 Job 모니터링 UX

• Axios polling 방식으로 모듈별 진행 상태(대기/실행중/완료)를 실시간 시각화
• SMILES 분자 구조 이미지와 함께 Job Status를 한 눈에 확인 가능, 일시정지(Pause)/재개 기능으로 사용자 제어권 확보

Crontab 배치 자동화 + SMILES Editor 통합

• "Waiting" 상태의 Job을 주기적으로 자동 실행하는 배치 스케줄러 구성
• 분자 구조 편집기(SMILES Editor)를 작업 등록 화면에 통합하여, 시각적으로 분자를 그리고 SMILES 코드로 변환하는 직관적 입력 UX 제공

6단계 품질 진단 워크플로우 전체 설계·구현 (프론트엔드 + 백엔드)

• 품질지표 정의 → 데이터 프로파일링 → 데이터 적재 → 품질 검수 → 결과 보고서까지, 새로고침 없는 단일 화면 비동기 UX 구현
• 백엔드에서는 6단계 x 7상태 x 2역할(Auditor/Collector) 검토·승인 워크플로우를 2계층 상태 모델로 설계하여 다중 검토자 병렬 승인 지원

대용량 비정형 데이터 적재·분석 알고리즘 직접 고안

• 무한 깊이 JSON 축약·재귀 탐색 알고리즘 설계
• JSON/CSV/XML/Excel 4개 포맷 자동 감지·변환 파이프라인 구축
• 청크 단위 병행 처리를 결합하여 적재·분석 시간을 1/6 ~ 1/10으로 단축, 컬럼별 자동 프로파일링 산출

사내 최초 Elasticsearch 도입 주도

• 용도별 인덱스 분리 설계(원본 데이터/검수 결과/배치 분석)
• search_after 딥 페이징, ES CRUD 전 과정 구현으로 데이터 조회 속도 10배 이상 개선
• django-crontab 기반 배치 분석 자동화에서도 ES 파이프라인 활용

대용량 미디어 파일 육안 검수 도구 설계

• ES 연계 아이디어를 직접 건의하여 채택 — Zip 내부 미디어 메타데이터를 ES에 인덱싱하여 빠른 조회·추출
• Zip 대량 추출에서 3가지 방식(병렬처리/일괄추출/멀티프로세싱)을 시도·비교하여 최적 방식 확정
• 검수 진행률을 ES aggregation으로 실시간 집계

JS·Django 대량 중복 코드 리팩토링 건의·실행

• 팀장에게 직접 건의하여 양 레이어의 중복 코드를 체계적으로 모듈화
• JS에서는 중첩 모달 z-index 충돌 문제를 스택 카운터 기반 공식으로 해결, 검수 결과를 A4 규격 인쇄 최적화 보고서로 동적 생성

입사 첫 프로젝트 — 사수의 가이드 아래 7개 관리 모듈 개발

• UI 설계부터 백엔드 API까지 대부분의 개발을 담당하며 6개월 내 완성
• 회원·프로젝트·데이터셋·어노테이터·리뷰어 작업 관리 등 핵심 CRUD 모듈 구현

신입 개발자로서 자발적으로 UX 개선 — 새로고침 없는 화면 전환 구현

• SSR 환경에서 페이지 전환마다 새로고침이 발생하는 것에 의문을 품고, AJAX 개념을 스스로 학습하여 Django SSR 부분 갱신 패턴을 적용
• 요구사항에 없었지만, 수십만 건 테이블의 검색·페이징·필터링을 새로고침 없이 처리하는 UX를 스스로 제안하고 구현

DB 기반 동적 메뉴 + 역할별 접근 제어

• Menu·MenuPermission 모델로 메뉴 구조를 DB에서 관리하고, 관리자 역할(Role)에 따라 접근 가능한 메뉴를 동적 생성
• OTP 2차 인증·SMS 발송·주소 검색 API 등 보안·부가 기능 구현