Jukrap

Created by Ju-cheol Park

🤖 잠깐! 제가 만든 ai-agent-playbook을 한 번 보고 가실 수 있을까요? 개인적으로 쓰는 AI 에이전트 스킬과 AGENTS.md 템플릿을 모아둔 저장소예요.

Work

웹, 모바일 앱, Android, 개발 도구 중심의 업무 경험을 정리했습니다. 각 항목에서는 맡은 범위와 기술 선택, 확인한 결과를 보실 수 있습니다.

Work Index

Web물류 관리-운영 웹Mobile모바일 라벨 출력 앱Tooling프로젝트 착수 문서화 도구Web차트 편집 웹 도구Web금융 업무 관리 웹Android현장 PDA Android 앱Android레거시 WebView Android 앱Hybrid하이브리드 앱 기능 통합Legacy Web레거시 웹 패널 분리

Case Notes

Web업무 운영 / 성능

물류 관리-운영 웹

2026.04 ~ 2026.06 · 신규 구축

조회, 예약, 엑셀, 출력 흐름을 갖춘 물류 업무 웹을 구축했습니다.

물류 조회, 예약 접수, 현황, 주소록, 엑셀 처리, 라벨 출력까지 이어지는 관리-운영 웹을 처음부터 구축했습니다. 기능 수를 늘리는 것보다 PC와 모바일에서 같은 업무 기준으로 동작하는 흐름을 만드는 데 중점을 뒀습니다.

  • React
  • TypeScript
  • Vite
  • React Router
  • TanStack Query
  • Zustand
  • XLSX
  • Vitest
2,405.50 kB -> 616.59 kB
초기 로드 번들
라우트 단위 코드 분리와 엑셀 처리 라이브러리 지연 로딩 적용
815.10 kB -> 204.38 kB
gzip 기준
동일 기준 약 74.9% 감소
123 files / 657 tests
검증 기록
관련 작업에서 남긴 최대 확인 기록

범위

  • 물류 조회, 예약 접수, 현황, 주소록 화면
  • 반응형 테이블, 중첩 모달, 날짜/드롭다운 UI
  • 엑셀 업로드/다운로드, 미리보기, 전송 데이터 변환
  • PC 출력과 모바일 WebView 출력 경로

맡은 일

  • 초기 진입에 바로 필요하지 않은 화면과 엑셀 처리 코드를 라우트 단위로 분리했습니다.
  • 모의 데이터와 실제 API 어댑터 경계를 나눠 화면 상태와 연동 상태를 따로 확인할 수 있게 했습니다.
  • PC 브라우저, 일반 모바일 브라우저, 모바일 앱 WebView의 출력 분기를 명확히 나눴습니다.

결과

  • 라우트 분리와 엑셀 처리 라이브러리 지연 로딩으로 초기 로드 번들을 2,405.50 kB에서 616.59 kB로 줄였습니다.
  • 가로 넘침, 모달 잘림, 드롭다운 위치 문제를 화면 폭별로 확인했습니다.
  • 조회, 예약, 출력이 이어지는 물류 업무 흐름을 한 화면 체계 안에서 설명할 수 있게 됐습니다.

검증

  • 390px~1366px 주요 화면 반응형 확인
  • 모달, 테이블, 드롭다운 표시 상태 확인
  • 관련 작업 기준 123 files / 657 tests 기록
Mobile물류 관리-운영 웹 WebView / Printer SDK

모바일 라벨 출력 앱

2026.04 ~ 2026.06 · 신규 구축

물류 관리-운영 웹을 모바일 WebView로 열고, 프린터 SDK를 네이티브로 연결했습니다.

물류 관리-운영 웹을 모바일 앱 WebView로 제공하면서, 모바일에서만 필요한 Bluetooth 프린터 SDK 연동을 네이티브 모듈로 연결했습니다. 단독 프린터 앱이라기보다 운영 웹의 모바일 출력 경로를 담당하는 앱에 가깝습니다.

  • Expo
  • React Native
  • Expo Router
  • React Native WebView
  • Android native module
  • TypeScript
  • Zustand
Bluetooth 권한
모바일 출력 준비
최근 Android 런타임 권한 흐름 확인
개발/운영 분리
앱 배포 흐름
URL, 앱 식별자, 설치 파일 기준 정리
실기기 출력
프린터 SDK 검증
에뮬레이터가 아닌 실기기 출력 결과 확인

범위

  • 운영 웹 WebView 진입과 개발/운영 URL 분리
  • JavaScript-to-native 출력 데이터 계약
  • Android 네이티브 Bluetooth 출력 모듈
  • 개발/운영 설치와 업데이트 확인 흐름

맡은 일

  • WebView 브리지 요청과 네이티브 출력 모듈 사이의 요청/응답 계약을 정리했습니다.
  • Bluetooth 장비 탐색, 상태 확인, 출력 명령의 네이티브 흐름을 연결했습니다.
  • Android 실기기에서 로컬 개발 서버와 API 요청이 잘못된 로컬 루프백으로 향하는 문제를 보정했습니다.

결과

  • 웹 전송 데이터와 네이티브 출력 레이아웃을 분리해 이후 라벨 필드 추가 위험을 줄였습니다.
  • 출력 기능을 웹 버튼이 아니라 실제 모바일 장비 연동으로 검증했습니다.
  • 개발/운영 설치 기준을 맞춰 현장 설치 흐름을 설명할 수 있게 했습니다.

검증

  • 실제 Android 기기에서 Bluetooth 출력 확인
  • 최근 Android 권한 흐름 재현 및 수정 확인
  • WebView bridge와 네이티브 출력 요청 흐름 확인
ToolingAI API / 개발 생산성

프로젝트 착수 문서화 도구

2026.04 · 신규 구축

착수 자료와 저장소 근거를 바탕으로 문서 초안을 생성하는 도구를 구축했습니다.

프로젝트 착수 시 전달받는 자료와 로컬 저장소 근거를 바탕으로 요구사항, 기능, 화면 단위의 문서 초안을 만드는 도구를 구축했습니다. AI API는 생성과 일부 재작성 단계에 쓰고, 그 전에 규칙 기반 스캔으로 근거를 먼저 모으는 구조로 잡았습니다.

  • Node.js
  • TypeScript
  • React
  • AI Agent workflow
  • Vite
  • pnpm
  • Vitest
근거 스캔 -> AI 초안
생성 흐름
스캔 근거를 바탕으로 문서 초안 생성
xlsx 워크북
시트형 산출물
요구사항/기능/화면 단위를 표 형태로 검토
AI 기반 셀 재작성
검토 후 수정
선택 시트/셀 기준으로 일부 항목 재생성

범위

  • 로컬 저장소 스캔과 evidence JSON 생성
  • 미리보기, 상세 산출물, 이전 실행 결과 재열기
  • 요구사항 원장, 기능 정의서, 화면 설계서 워크북 편집
  • Markdown, JSON, ZIP, xlsx 내보내기

맡은 일

  • 규칙 기반 스캐너 결과를 생성 단계의 입력으로 사용하도록 흐름을 나눴습니다.
  • 긴 텍스트 문서뿐 아니라 표 기반 검토와 수정이 가능하도록 워크북 편집을 연결했습니다.
  • 사람이 검토한 뒤 특정 셀만 다시 쓰는 흐름을 만들어 수정 단위를 줄였습니다.

결과

  • 착수 자료 분석과 문서 초안 작성을 반복 가능한 실행 단위로 만들었습니다.
  • 생성 결과를 그대로 쓰는 구조가 아니라 근거, 미리보기, 사람 검토, 내보내기가 이어지는 흐름으로 만들었습니다.
  • 신규 프로젝트를 시작할 때 요구사항과 화면 단위를 빠르게 잡기 위한 내부 도구로 정리했습니다.

검증

  • 자료 스캔, AI 초안 생성, 워크북 내보내기 흐름 확인
  • 선택 셀 재작성과 이전 결과 재열기 확인
  • Markdown/JSON/ZIP/xlsx 내보내기 확인
Web시각화 / 편집 UI

차트 편집 웹 도구

2026.03 ~ 2026.04 · 신규 구축

차트 미리보기, 옵션 편집, WebGL/GLSL 배경 렌더링을 포함한 편집 도구를 만들었습니다.

데이터 필드 매핑, 차트 미리보기, 옵션 패널, 드래그 앤 드롭, 툴팁 같은 편집 흐름을 구축했습니다. 차트 출력 화면이 아니라 사용자가 차트 구성을 직접 조정하는 편집 도구에 가까운 작업이었습니다.

  • React
  • TypeScript
  • Vite
  • Chart.js
  • WebGL/GLSL (OpenGL 계열)
  • OGL (WebGL 라이브러리)
  • react-chartjs-2
  • TanStack Query
  • Zustand
  • MSW
  • Vitest
6개 탭 설정 패널
설정 구조
차트 설정을 영역별로 분리
Chart.js + WebGL/GLSL
렌더링 기반
차트 미리보기와 OGL(WebGL) 기반 편집 화면 배경
Vitest / MSW
검증 기반
상호작용과 데이터 흐름 확인

범위

  • 필드/값 매핑과 차트 미리보기
  • 옵션 패널, 접힘 패널, 툴팁
  • 드래그 앤 드롭 기반 편집 UX
  • WebGL/GLSL 셰이더 기반 편집 화면 배경 렌더러

맡은 일

  • 차트 렌더링과 설정 패널 상태가 따로 놀지 않도록 옵션 모델을 정리했습니다.
  • 편집 중 사용자가 현재 설정을 이해할 수 있게 미리보기와 옵션 라벨을 맞췄습니다.
  • WebGL/GLSL fragment shader로 여러 배경 모드를 구성하고 pointer/time/resolution uniform을 사용해 편집 화면의 시각 요소를 만들었습니다.

결과

  • 단순 차트 렌더링이 아니라 조작 가능한 편집 도구 경험으로 정리했습니다.
  • 시각화, 상태 관리, 복잡한 설정 UI, WebGL shader 기반 배경 렌더링을 함께 다룬 케이스입니다.
  • 차트 라이브러리 사용을 넘어 옵션 모델과 편집 UX를 연결한 경험을 드러낼 수 있습니다.

검증

  • 미리보기 렌더링, 옵션 변경, 패널 접기 흐름 확인
  • 드래그 앤 드롭, 툴팁, 필드 매핑 동작 확인
  • 모의 데이터 기반 흐름 확인
Web관리 화면 / 마이그레이션

금융 업무 관리 웹

2026.03 · 신규 구축

데이터가 많은 관리 화면을 React 상태 흐름으로 구축했습니다.

테이블, 필터, 모달, 인증 세션 흐름을 중심으로 금융 업무 관리 웹을 구축했습니다. DOM 조작에 의존하던 화면 동작을 React 상태 기반으로 옮기는 방향을 잡았습니다.

  • React
  • TypeScript
  • Vite
  • React Router
  • TanStack Query
  • TanStack Virtual
  • Zustand
4 -> 1
DOM 조작 지점 정리
발표 자료 기준 sidebar 상태 정리 예시
React Router
화면 전환
업무 화면 라우트와 세션 흐름 구성

범위

  • 테이블/필터 UI
  • 도메인 페이지
  • 모달
  • 세션 흐름

맡은 일

  • 공통 table/filter/modal 패턴을 재사용 가능한 흐름으로 정리했습니다.
  • 직접 DOM 조작을 상태 기반 표현으로 줄이는 방향을 잡았습니다.
  • 업무 화면의 라우트와 세션 흐름이 끊기지 않도록 기본 구조를 구성했습니다.

결과

  • 데이터가 많은 관리 화면을 React 코드로 유지보수하기 쉬운 형태로 옮겼습니다.
  • 복잡한 업무 UI를 표, 필터, 모달, 세션 단위로 나누어 설명할 수 있게 됐습니다.

검증

  • 테이블, 필터, 모달, 세션 흐름을 화면 단위로 확인
Android빌드 복구 / 현장 입력

현장 PDA Android 앱

2026.03 ~ 2026.04 · 유지보수/기능 추가

운영 서명과 최근 빌드 환경을 분리해 현장 앱을 다시 확인 가능한 상태로 만들었습니다.

현장 단말에서 쓰이는 Android 앱의 빌드와 런타임 흐름을 복구했습니다. Gradle/JDK 충돌, 운영 서명 유무, 스캔/입력 흐름, 초기 데이터 동기화처럼 현장에서 바로 막히는 지점을 좁혔습니다.

  • Android Java
  • Gradle/AGP
  • Scanner SDK
빌드 복구
Gradle/JDK 정리
운영 서명 유무와 개발 빌드 경로 분리
현장 입력
스캔/장비 입력
로그인, 초기 동기화, 입력 흐름을 나눠 확인
개발/배포
빌드 흐름 복구
운영 서명 대체 경로를 포함한 빌드 확인

범위

  • Gradle, AGP, JDK, Kotlin dependency 충돌 정리
  • 운영 서명 유무에 따른 개발/배포 빌드
  • 스캐너 호출, 장비 입력, 로그인/초기 동기화 흐름
  • 현장 단말 기준의 런타임 호환성

맡은 일

  • 운영 서명이 없어도 개발 빌드가 막히지 않도록 서명 조건을 분리했습니다.
  • 로그인 실패와 초기 데이터 동기화 실패를 나눠 원인을 확인할 수 있게 했습니다.
  • 현장 단말 입력과 스캔 흐름에서 앱이 멈추는 지점을 우선 확인했습니다.

결과

  • 개발자가 다시 빌드하고 확인할 수 있는 상태로 프로젝트를 복구했습니다.
  • 운영 호환성을 유지하면서 빌드 도구만 올리는 식의 위험한 변경을 피했습니다.
  • 현장 단말 앱 유지보수에서 필요한 보수적인 변경 기준을 세웠습니다.

검증

  • 개발/운영 빌드 경로 확인
  • 로그인, 초기 데이터, 스캔/입력 흐름 중심 확인
  • Android 빌드와 주요 현장 입력 흐름 확인

Additional Work

Android

2026.03 ~ 2026.04

유지보수/기능 추가

정적 웹 / OS 호환성

레거시 WebView Android 앱

오래된 WebView 앱을 최근 Android 빌드 환경에서 다시 확인했습니다.

정적 웹 기반 Android 앱의 빌드, WebView, 파일 처리, 뒤로가기, OS 호환성을 점검했습니다. 오래된 라이브러리와 최근 빌드 도구 사이에서 최소 변경으로 확인 가능한 상태를 만드는 작업이었습니다.

  • Android Java
  • WebView
  • Gradle/AGP
  • OkHttp
  • RxJava2
Hybrid

2026.06

유지보수/기능 추가

WebView / Spring MVC / Android QA

하이브리드 앱 기능 통합

WebView 앱과 레거시 웹 서버 사이의 기능, 라우팅, 파일 선택 흐름을 정리했습니다.

메일 확인, 이미지 판독, 하단 탭 라우트, WebView bridge, 파일 선택, 실기기 QA를 함께 다뤘습니다. 외부 API 키는 서버 프록시 뒤에 두고, 앱은 WebView 라우트와 네이티브 동작 검증에 집중하도록 나눴습니다.

  • Android WebView
  • Cordova
  • Spring MVC
  • jQuery
  • Java
Legacy Web

2026.06

유지보수/기능 추가

JSP / jQuery

레거시 웹 패널 분리

문서/게시판형 패널의 회귀 기준선을 정리했습니다.

JSP/jQuery 기반 웹 패널에서 문서, 게시판형 목록, 메뉴 라우팅, 페이지 로더를 분리해 변경 영향 범위를 확인했습니다.

  • JSP
  • jQuery
  • Server-rendered web