🤖 제가 만든 AI Agent Playbook도 둘러보세요. AI 코딩 도구에서 프로젝트 기록과 스킬을 관리하는 도구예요.

Work

React와 TypeScript로 만든 업무 화면과 개선 사례입니다. 화면 상태와 데이터 흐름, 성능을 다루고 필요한 API와 모바일 기능까지 연결했습니다.

01신규 개발Web / AI2026.09 ~ 2026.10

AI 기반 문서·데이터 분석 플랫폼

문서의 내용을 검색하고 질문에 답하는 AI 플랫폼을 풀스택으로 개발했습니다. Gemma 4를 연동하고, 답변에 필요한 근거를 찾는 과정과 답변 품질을 평가하는 기능을 개선했습니다.

풀스택 개발

검색·답변 품질 및 처리 속도 개선

  • React
  • TypeScript
  • Tailwind CSS
  • Vite
  • TanStack Query
  • Zustand
  • Python
  • Django
  • MariaDB
  • SQLGlot
  • Gemma 4
  • Ragas
  • tokenizers
  • Vitest

문서에서 근거를 찾아 답하는 AI 기능에서는 답변뿐 아니라 평가 결과도 믿을 수 있어야 한다고 보았습니다. 긴 답변은 평가 입력 한도를 넘었고, 평가 모델이 문장을 다시 쓰면서 검증 대상의 의미도 달라졌습니다.

  1. 평가 대상은 고정하고, 모델의 판정 결과를 검증
    설계 이유
    Ragas로 평가할 문장을 서버에서 고정한 뒤 모델이 반환한 결과를 문장 ID로 대조하고, 긴 입력은 여러 묶음으로 나눴습니다. 원문 인용 / 근거 일치 / 답변의 설명 범위를 각각 확인하는 방식입니다.
    확인
    실제 문서 답변에서 추출한 25개 주장을 5개 묶음으로 나누어 끝까지 평가했습니다. ID 누락·중복과 잘못된 응답 형식을 검사해, 형식이 깨진 판정이 정상 결과로 저장되지 않도록 확인했습니다.
  2. 모델 대기와 애플리케이션 병목을 분리해서 개선
    설계 이유
    응답이 느린 원인을 구분하려고 모델 응답을 고정한 상태에서 내부 처리를 측정했습니다. 반복되는 토큰 수 계산을 줄였고, 같은 요청에서 이미 처리한 문서 페이지는 다시 활용합니다.
    확인
    워밍업 후 개선 전후 각각 20회를 측정한 결과, 내부 처리 중앙값이 2,969ms에서 672ms로 줄었습니다. 모델 호출 횟수는 유지했습니다.

긴 답변의 평가를 끝까지 처리하고 반복 계산으로 발생하던 내부 지연을 줄였습니다. 답변은 먼저 보여 주고 Ragas 평가는 비동기로 이어가므로, 사용자는 평가가 끝나기 전에 답변을 확인할 수 있습니다.

애플리케이션 내부 처리 시간의 중앙값
2,969ms → 672ms
같은 모델 응답을 사용하는 시험에서 애플리케이션 처리 시간을 비교했습니다. 준비 실행 후 전후 각 20회 측정했으며, 모델·네트워크 대기 시간은 제외했습니다.
입력 한도를 넘던 긴 답변 평가 개선
25개 항목 평가 완료
실제 문서에 대한 Gemma 4 답변에서 검증할 내용을 추출해 5개 묶음으로 평가했습니다. 가장 긴 요청도 8,164토큰으로, 8,192토큰의 입력 한도를 넘지 않았습니다.
품질 평가를 기다리지 않는 답변 제공
답변을 먼저 제공하고 평가는 별도로 실행
Ragas 평가가 끝나기 전에 생성된 답변을 보여 줍니다. 사용자의 새 질문을 처리하는 동안에는 다음 평가 요청을 잠시 미룹니다.

검색된 문장만 모델에 전달하면 앞뒤 문단에 있는 조건이나 예외가 빠졌습니다. 여러 내용을 한꺼번에 묻는 질문에서는 답할 수 있는 내용이 있어도 설명 대신 원문만 표시되는 문제가 있었습니다. 긴 답변을 평가할 때는 모델의 입력 한도를 넘었고, 같은 텍스트의 길이를 반복해서 계산하는 작업도 문서 분석을 지연시켰습니다.

  • 검색어가 들어 있는 문장뿐 아니라 그 내용을 이해하는 데 필요한 앞뒤 문단과 참조된 표도 함께 전달하기로 했습니다. 여러 문서를 분석할 때도 각 근거가 어느 문서에서 나왔는지 추적할 수 있도록 했습니다.
  • 원문을 정확히 인용했는지, 답변이 문서에 근거하고 있는지, 질문의 각 항목에 답했는지는 서로 다른 문제였습니다. 한 가지 점수로 판단하지 않고 각각 확인하도록 검증 과정을 나눴습니다.
  • 평가 모델이 검증 대상 문장을 다시 쓰는 과정에서 내용을 바꾸는 문제가 있었습니다. 각 항목에 ID를 붙여 평가 대상 문장을 고정하고, 반환된 평가 결과를 원문 항목과 대조하도록 구성했습니다.
  • 모델의 응답 속도와 애플리케이션 내부의 처리 시간을 구분해야 병목을 찾을 수 있었습니다. 같은 모델 응답을 사용하는 시험을 구성해 반복 계산에 걸리는 시간을 비교했습니다.
  • 사용자가 이미 생성된 답변을 보기 위해 품질 평가까지 기다릴 필요는 없었습니다. 답변을 먼저 보여 주고 평가는 별도로 실행하되, 새 질문이 들어오면 다음 평가 요청을 잠시 미루도록 했습니다.
  • AI가 SQL 오류를 고치면서 조회 / 집계 조건까지 바꾸는 사례를 확인했습니다. SQLGlot으로 수정 전후 조건을 대조하고, 조건이 달라지거나 유지 여부를 확인할 수 없으면 실행 전에 중단하도록 보완했습니다.
  • 검색된 문장의 앞뒤 문단과 문서에서 참조한 절·표를 함께 찾도록 검색 범위를 보완했습니다. 근거가 부족한 부분은 추가로 검토하고, 최종 답변을 만들 때도 원문과 출처를 전달해 문맥이 빠지지 않도록 했습니다.
  • Ragas로 답변이 문서에 근거하고 있는지 평가하는 과정에서, 긴 답변이 모델의 입력 한도를 넘는 문제가 있었습니다. 검증할 내용을 여러 묶음으로 나누고, 평가 결과의 ID를 원래 항목과 대조해 누락·중복을 확인한 뒤 점수를 계산했습니다.
  • 설명을 요청한 질문을 표 생성 요청으로 잘못 분류하던 조건을 수정했습니다. 질문의 각 항목에 대한 답과 근거 번호를 따로 받고, 인용문은 그 번호에 해당하는 원문에서 직접 가져오도록 했습니다. 답할 수 있는 내용은 유지하고, 근거를 찾지 못한 항목만 구분해 표시했습니다.
  • 문서의 여러 표를 합치는 과정에서 같은 텍스트의 토큰 수를 반복 계산하던 코드를 수정했습니다. 같은 요청 안에서는 이미 분석한 페이지의 결과도 재사용했습니다. 답변은 먼저 저장해 보여 주고 Ragas 평가는 별도 작업으로 실행해, 사용자가 평가 완료까지 기다리지 않도록 했습니다.
  • 미디어 자료를 분석할 때는 앞뒤 대사를 함께 전달해 주어가 빠지거나 답변을 지나치게 유보하는 문제를 보완했습니다. 사용자가 답변의 근거를 직접 확인할 수 있도록 문서의 해당 페이지나 미디어 재생 구간으로 이동하는 기능도 개발했습니다.
  • React·TypeScript로 화면을 만들고 Django API, MariaDB 저장·조회 기능, 문서 처리와 Gemma 4 연동을 개발했습니다. 모델이 만든 SQL이 사용자가 선택한 데이터 범위를 벗어나지 않는지 확인하고, 표에 나온 수치·단위와 각 행의 출처도 검증했습니다.
  • 모델에 맞는 토크나이저를 연결해 실제 요청에 포함되는 텍스트와 출력 형식 정보의 토큰 수를 계산했습니다. 긴 문서는 문장 중간이 끊기지 않도록 나누고, 최종 답변에 사용할 근거에서 빠진 부분은 검토하지 못한 범위로 남겼습니다.
  • Ragas Faithfulness를 사용해 답변에서 검증할 내용을 추출하고, 문서의 근거로 뒷받침되는 항목의 비율을 계산했습니다. 평가 프로그램은 별도 프로세스에서 실행하고, 답변·근거·설정이 바뀌면 이전 평가 결과를 다시 사용하지 않도록 했습니다.
  • 실제 모델을 호출하는 검증과 저장해 둔 오류 응답을 재생하는 검증을 함께 사용했습니다. 응답을 고정한 자동 테스트도 별도로 실행해 수정 후 같은 문제가 다시 발생하는지 확인했고, 일반 문서와 미디어 자료의 처리 결과를 각각 점검했습니다.
  • 같은 모델 응답을 사용하고 준비 실행 후 변경 전후를 각 20회 측정했습니다. 애플리케이션 처리 시간의 중앙값은 문서 분석에서 2,969ms → 672ms, 지정 문서 검색에서 485ms → 312ms로 줄었습니다. 정상 처리 과정의 모델 호출 횟수는 유지했습니다.
  • 실제 긴 답변에서 검증할 내용 25개를 추출하고 5개 묶음으로 나누어 평가를 완료했습니다. 가장 긴 입력은 8,164토큰이었고, 내용을 추출하는 요청을 포함해 총 6회 호출했습니다. 자동 테스트에서는 ID가 빠지거나 중복된 결과, 잘못된 자료형의 판정을 거부하는지도 확인했습니다.
  • 실제 실행에서 평가가 끝나기 전에 답변이 표시되는 것을 확인했습니다. 새 질문을 처리하는 동안 다음 평가 요청이 보류되는지, 이미 끝난 평가 단계의 결과를 다시 사용할 수 있는지도 점검했습니다.
  • 실제 질문의 답변을 원문과 대조하고, 인용문이나 단위가 달라진 경우와 문서에 근거가 없는 질문을 테스트했습니다. 브라우저에서는 출처 페이지로 이동하고 미디어를 재생한 뒤에도 입력 내용과 선택 상태가 유지되는지 확인했습니다.
02신규 개발·기능 연계Web / API / Android2026.07 ~ 2026.09

업무 정산 ERP·모바일 앱

차량·기사 정보와 정산을 관리하는 ERP를 개발하고, 업무 알림·문서·문의를 모바일 앱에 연결했습니다.

풀스택 개발

ERP 웹·서버와 모바일 업무 기능 개발(채팅 시스템 제외)

Web / API

  • React
  • TypeScript
  • Tailwind CSS
  • Vite
  • React Router
  • Zustand
  • Spring Boot
  • MyBatis
  • MariaDB
  • Vitest

Web / API / Android

  • React
  • TypeScript
  • TanStack Query
  • TanStack Router
  • Spring Boot
  • MariaDB
  • Flutter
  • Dart
  • Firebase Cloud Messaging

Web / API · 2026.07 ~ 2026.09

업무 정산 ERP 플랫폼

여러 담당자가 같은 정산 자료를 수정할 때, 늦게 저장한 내용이 다른 사람의 변경을 덮어쓰면 안 됩니다. 동시에 저장을 거절했다는 이유로 사용자가 작성한 내용까지 잃어서는 안 된다고 판단했습니다.

  1. 충돌은 서버에서 막고, 어떤 값을 살릴지는 사용자가 결정
    설계 이유
    오래된 수정 버전의 저장은 거절하되 입력값은 화면에 남기도록 구현했습니다. 사용자는 수정 전 값 / 서버의 최신 값 / 현재 입력값을 비교해 선택한 뒤 별도 저장으로 변경을 확정합니다.
    확인
    개발 환경에서 별도 API 요청으로 먼저 값을 변경한 후, 브라우저의 저장 요청이 409 응답을 받아도 입력값과 DB의 최신 값이 유지되는지 확인했습니다. 이후 선택한 값을 다시 저장하고 DB와 변경 이력을 대조했습니다.
  2. Excel 검증 결과를 저장 시점까지 유지
    설계 이유
    검증한 데이터는 서버에 보관하며 저장 직전에 권한과 참조 데이터를 다시 확인합니다. 중간 오류가 나면 전체 트랜잭션을 되돌리고, 같은 저장 요청을 다시 보내면 기존 처리 결과를 반환합니다.
    확인
    격리한 MariaDB 환경에서 중간 실패 / 재요청 / 동시 요청을 재현해 부분 저장과 중복 반영이 발생하지 않는지 확인했습니다.

현재 배차 자료와 확정된 정산 이력을 구분하고, 수정 충돌과 일괄 저장 실패를 복구할 수 있습니다. 검증에서는 저장 성공 여부와 함께 사용자의 입력과 변경 이력이 유지되는지 확인했습니다.

Web / API / Android · 2026.07 ~ 2026.09

ERP 연계 모바일 업무 앱

정산 ERP와 연결되는 모바일 앱은 늦게 도착한 알림이나 반복 요청에도 최신 상태를 유지해야 했습니다. 웹의 PDF 다운로드 방식도 모바일 실행 환경에 맞게 바꿀 필요가 있었습니다.

  1. 알림 내용과 읽음 상태를 분리해 동시 요청에 대응
    설계 이유
    알림 버전과 삭제 상태를 비교해 늦은 생성 알림이 삭제된 항목을 되살리지 못하게 합니다. 읽음 정보는 별도로 관리하며, 먼저 갱신한 뒤 없으면 등록하던 처리를 한 번의 UPSERT로 바꿔 최초 확인 시각을 유지했습니다.
    확인
    격리한 MariaDB에서 읽음 처리의 데드락을 재현한 뒤 동시 요청을 다시 실행했습니다. 알림 순서를 뒤집거나 같은 알림을 반복해서 보내도 최신 내용과 읽음 정보가 유지되는지 확인했습니다.
  2. 파일 다운로드 권한을 모바일에 맞게 전달
    설계 이유
    브라우저 안에서만 유효한 blob URL 대신 다운로드 시점에 짧게 유효한 서명 URL을 발급합니다. 발급과 실제 다운로드 때 접근 권한을 확인하며, 로그인 토큰은 파일 주소에 넣지 않습니다.
    확인
    Chrome에서 내려받은 PDF와 원본의 해시를 비교하고 네이티브 브리지에 전달되는 값을 확인했습니다. Android 에뮬레이터에서는 알림을 누른 뒤 공지 목록을 거쳐 공지 본문을 여는 흐름을 점검했습니다.

문의 처리 / 알림 / PDF 다운로드를 ERP와 연결하고, 알림의 최신 상태와 다운로드 권한을 모바일에서도 확인하도록 구성했습니다.

Web / API

업무 정산 ERP 플랫폼
2026.07 ~ 2026.09ERP 웹 전반과 주요 서버 API·데이터 저장 기능 개발

담당자가 표나 Excel에서 입력한 내용을 저장할 때 일부 행만 등록되거나 같은 자료가 두 번 들어가는 일을 막아야 했습니다. 다른 사람이 먼저 수정한 내용을 오래된 화면에서 덮어쓰지 않으면서, 사용자가 입력한 내용도 보존해야 했습니다. 차량·기사 배정이나 청구 원본이 바뀐 뒤에도 과거 정산을 그대로 조회할 수 있어야 했습니다.

  • Excel 미리보기에서 검사한 전체 자료를 서버에 보관하고, 최종 저장 직전에 권한과 연결 자료의 변경 여부를 다시 확인하도록 했습니다. 저장 도중 오류가 나면 전체를 취소하고, 같은 요청이 다시 도착하면 기존 결과를 반환하도록 했습니다.
  • 다른 사용자가 먼저 저장한 자료는 조회 당시 버전과 현재 버전을 비교해 오래된 요청을 거절했습니다. 화면에는 입력값을 남기고, 처음 읽은 값과 최신 값, 입력값을 비교해 반영할 내용을 선택한 뒤 별도로 저장하게 했습니다.
  • 현재 배정 정보와 거래 당시의 대상·금액을 나눠 저장했습니다. 대출·보험 원본을 고치면 작성 중이거나 반려된 청구에 변경을 반영하고, 이미 승인했거나 정산에 반영한 금액은 다음 내역에서 조정하도록 했습니다.
  • 키보드 셀 이동과 선택창 입력을 지원하는 공통 편집표를 만들고, 저장에 실패한 행의 입력값을 보존했습니다.
  • Excel 미리보기에서 오류 행과 셀을 찾아 수정하고 서버 검사를 다시 받을 수 있도록 했습니다. 최종 저장은 한 트랜잭션으로 처리해 부분 저장을 막고, 같은 요청을 다시 받으면 기존 결과를 반환하도록 했습니다.
  • 동시 수정으로 저장이 거절되면 최신 자료와 입력값을 비교할 수 있도록 했습니다. 비교 결과를 선택하는 것과 실제 저장을 분리해 사용자의 확인 없이 자료가 바뀌지 않도록 했습니다.
  • 차량·기사의 현재 배정 정보와 거래 당시 정보를 분리하고, 원본 정정이 확정된 정산 금액을 덮어쓰지 않도록 처리했습니다.
  • 관리자가 작업 대상과 변경 내용, 저장 실패 원인을 확인할 수 있도록 로그 화면을 정리했습니다.
  • 동일한 자료에 별도 요청으로 먼저 변경을 저장한 뒤, 오래된 화면의 저장이 거절되는 상황을 재현했습니다. 서버의 버전 검사와 화면의 입력 보존을 함께 보완하고, 비교하는 동안 추가 변경이 생겼을 때도 다시 충돌을 확인하도록 했습니다.
  • 격리된 MariaDB에서 일괄 저장 실패와 같은 요청의 재전송을 검사했습니다. 대표 업무는 브라우저 조작 결과를 API 응답, DB의 저장값, 작업 로그와 함께 대조했습니다.
  • 대출 분류처럼 계산 조건을 바꾸지 않는 항목을 수정할 때는 기존 상환표를 유지하도록 했습니다. 불필요한 조회와 재계산을 줄인 뒤 같은 초기 데이터로 변경 전후의 동작과 처리 시간을 비교했습니다.
  • 격리된 MariaDB에서 저장 중 실패하면 전체가 취소되고, 동시에 확정하거나 같은 요청을 반복해도 중복 등록되지 않는지 확인했습니다.
  • 개발 환경에서 다른 사용자가 먼저 수정한 뒤 오래된 화면의 저장이 거절되는지 확인했습니다. 입력값이 남아 있는 상태에서 최신 내용과 비교하고 다시 저장한 결과를 브라우저·API·DB로 대조했습니다.
  • 개발 DB에서 배정 관계가 바뀐 뒤에도 과거 정산 금액이 유지되는지 확인했습니다. 정산 저장 기능은 개발 환경에 반영했으며, 개편한 작업 로그 화면은 관리자가 사용하고 있습니다.

Web / API / Android

ERP 연계 모바일 업무 앱
2026.07 ~ 2026.09채팅 시스템을 제외한 업무 화면·서버 API·Flutter Android 연계 기능 개발

ERP에서 내용을 수정하거나 삭제한 뒤에도 모바일에 예전 알림이 남을 수 있었습니다. 동시에 들어오는 읽음 저장 요청은 DB 잠금 충돌로 실패했고, 웹에서 만든 파일 주소는 Android 다운로드 기능에서 그대로 사용할 수 없었습니다. 이미 완료한 문의를 뒤늦게 도착한 요청이 덮어쓰는 문제도 막아야 했습니다.

  • 알림의 업무 내용과 사용자의 읽음 상태를 별도로 관리했습니다. 원본 버전과 삭제 여부를 확인해 최신 변경만 반영하고, 내용을 수정해도 읽음 기록은 유지하도록 했습니다.
  • 읽음 기록을 먼저 갱신한 뒤 없으면 등록하던 처리를 단일 UPSERT로 바꿨습니다. 같은 요청이 반복돼도 최초 표시 시각과 읽은 시각은 바뀌지 않도록 했습니다.
  • PDF 다운로드에는 짧은 시간 동안 유효한 파일 전용 서명 주소를 사용했습니다. 주소를 발급할 때뿐 아니라 파일을 내려받을 때도 현재 계정과 문서의 접근 권한을 확인하도록 했습니다.
  • 문의 완료 요청은 조회 당시 버전과 현재 처리 상태를 확인하도록 했습니다. 이미 처리된 문의는 구체적인 사유로 거절하고, 화면에는 저장하지 못한 입력을 남겼습니다.
  • 알림의 버전과 삭제 상태를 확인해 최신 수정만 반영하고, 삭제된 알림이 늦은 요청으로 다시 나타나는 경우를 막았습니다. 기존 읽음 상태를 유지하면서 목록과 열린 상세 화면을 갱신했습니다.
  • 표시·읽음 기록을 단일 UPSERT로 저장하도록 바꿔 동시 요청의 잠금 충돌을 해결했습니다. 계정과 알림별로 기록을 구분하고 최초 시각을 보존했습니다.
  • 파일 전용 서명 주소로 PDF 다운로드를 연결하고, 실제 요청에서 서명·만료 시간·현재 접근 권한을 다시 검사했습니다. 이미지는 미리보기로 제공했습니다.
  • 문의의 버전과 완료 상태를 검사해 중복 완료를 거절했습니다. 접수·완료 이력을 ERP에 전달할 때도 같은 이벤트가 중복 기록되지 않도록 했습니다.
  • Flutter의 알림 수신과 WebView 화면 이동을 연결해, 시스템 알림을 누르면 해당 업무 내용을 확인할 수 있도록 했습니다.
  • 알림 변경이 역순으로 도착하거나 같은 요청이 재전송되는 경우를 검사했습니다. 삭제 후 예전 생성 요청이 도착해도 알림이 다시 생기지 않고, 열려 있는 상세 화면에도 변경이 반영되는지 확인했습니다.
  • 격리된 MariaDB에서 읽음 저장의 기존 잠금 충돌을 재현했습니다. 등록과 갱신을 하나의 DB 연산으로 바꾼 뒤 동시 요청의 저장 결과와 최초 시각 보존을 다시 검사했습니다.
  • 브라우저에서 내려받은 PDF를 원본 파일과 대조하고, Android 다운로드로 전달하는 주소와 요청값을 검사했습니다.
  • 로컬 화면에서 모바일 문의 접수, 관리자 완료, 모바일의 처리 결과 확인을 이어서 검수했습니다. Android 에뮬레이터에서는 시스템 알림 수신과 알림을 눌렀을 때의 화면 이동을 확인했습니다.
  • 격리된 MariaDB에서 기존 읽음 저장 실패를 재현한 뒤, 동시에 들어오는 표시·읽음 요청이 저장되고 최초 시각이 유지되는지 확인했습니다. 알림 수정·삭제의 역순 전달과 재전송도 검사했습니다.
  • Chrome에서 내려받은 PDF가 원본과 같은 파일인지 해시로 대조하고, Android 다운로드 요청으로 전달되는 주소와 값을 검사했습니다.
  • 로컬 브라우저에서 문의 접수부터 관리자 완료와 모바일 상태 확인까지 검수했습니다. 뒤늦은 완료 요청은 기존 결과를 바꾸지 않았고, 같은 이력을 다시 보내도 ERP에 중복 기록되지 않았습니다.
  • 관련 기능을 개발 환경에 반영했습니다. Android 에뮬레이터에서는 실제 시스템 알림을 받고, 알림을 눌러 관련 목록과 본문으로 이동하는 동작을 확인했습니다.
03신규 개발Web / Android2026.04 ~ 2026.06

물류 운영 웹·출력 앱

조회·예약·Excel 등록부터 PC·Android 라벨 출력까지 이어지는 물류 업무 웹과 출력 앱을 개발했습니다.

물류 업무 웹과 출력 앱 개발

프론트엔드 전체 개발·Android 출력 앱 개발

Web

  • React
  • TypeScript
  • Vite
  • React Router
  • TanStack Query
  • Zustand
  • XLSX
  • Vitest

Android

  • Expo
  • React Native
  • Expo Router
  • WebView
  • Android native module
  • TypeScript
  • Bluetooth

Web · 2026.04 ~ 2026.06

물류 운영 웹

운영 웹은 시작할 때 당장 필요하지 않은 화면과 Excel 코드까지 함께 불러왔습니다. 첫 화면에 필요한 코드와 사용자가 기능을 실행할 때 필요한 코드를 구분해 초기 다운로드 크기를 줄이고자 했습니다.

  1. 번들 분석으로 불필요한 초기 코드를 찾아 분리
    설계 이유
    번들 분석으로 첫 화면에서 쓰지 않는 코드의 비중을 확인했습니다. 페이지 코드는 해당 화면에 들어갈 때, Excel 라이브러리는 업로드 / 다운로드를 실행할 때 불러옵니다.
    확인
    일반 프로덕션 빌드에서 초기 JavaScript가 2,405.50kB에서 616.60kB로, gzip 기준 815.10kB에서 204.38kB로 줄어든 것을 확인했습니다. 변경 후에도 페이지 이동·데이터 조회·Excel 처리·PC 라벨 출력이 이어지는지 확인했습니다.
  2. 미리보기와 실제 출력 결과를 따로 확인
    설계 이유
    화면에서 보이는 배치만으로 인쇄 품질을 판단하지 않았습니다. 긴 주소를 실제 폭에 맞춰 나누고 글자 크기와 간격을 조절했습니다.
    확인
    실제 용지에 출력해 긴 주소가 잘리거나 다른 항목과 겹치는 부분을 확인하고 보정했습니다.

첫 진입에 필요한 코드의 크기를 줄이고, 운영 화면에서 선택한 데이터를 실제 라벨로 출력하는 흐름을 정비했습니다.

Android · 2026.04 ~ 2026.06

모바일 출력 브릿지 앱

Android에서 프린터를 선택할 수 있는데도 연결이 실패했습니다. 또 SDK가 출력 요청을 받았다는 사실만으로 실제 인쇄가 끝났다고 표시하면 사용자에게 잘못된 상태를 전달하게 됩니다.

  1. 연결 실패를 SDK 내부 동작까지 추적
    설계 이유
    실기기 로그를 따라가 연결 과정에서 SDK가 기기 검색을 중단하는 동작을 확인했습니다. 이 동작에도 검색 권한이 필요해, 연결 권한뿐 아니라 검색 권한까지 점검하도록 수정했습니다.
    확인
    Android 16 실기기에서 권한 요청, 프린터 연결, 실제 라벨 출력을 차례로 확인했습니다.
  2. 출력 요청 전송 상태 안내
    설계 이유
    SDK가 출력 요청을 접수하면 화면에 ‘출력 요청 전송’으로 표시하도록 맞췄습니다.
    확인
    SDK 응답과 실물 출력 결과를 각각 확인해 앱이 표시하는 상태의 의미를 맞췄습니다.

React Native 화면에서 Android 네이티브 SDK를 호출해 라벨을 출력하며, 권한 문제와 연결 실패를 구분해 처리합니다.

초기 JavaScript 파일 크기
2,405.50 → 616.60 kB
2026.05 빌드 산출물 기준 약 74% 감소
gzip 압축 크기
815.10 → 204.38 kB
초기 JavaScript 파일의 압축 크기 약 75% 감소

Web

물류 운영 웹
2026.04 ~ 2026.06프론트엔드 전체 개발

여러 업무 화면에 표·입력 폼·모달이 반복돼 함께 사용할 구조가 필요했습니다. 첫 화면에서 쓰지 않는 페이지와 Excel 라이브러리까지 한 번에 불러와 초기 JavaScript 파일이 커졌고, 화면 미리보기가 정상이어도 실제 라벨에서는 긴 주소가 잘리거나 겹쳤습니다.

  • 조회 데이터, 입력 상태, 출력 요청을 분리하고 표·폼·모달은 공통 컴포넌트로 구성했습니다.
  • 번들 분석으로 첫 화면에서 필요하지 않은 코드의 비중을 확인하고, 페이지 진입과 Excel 기능 실행 시점에 맞춰 나눠 불러오도록 했습니다.
  • 웹에서 보내는 출력 데이터는 통일하고, PC의 로컬 프린터 프로그램과 Android 앱의 Bluetooth 출력은 각각의 연결 방식에 맞춰 처리했습니다.
  • 공통 표·입력 폼·모달을 사용해 예약 접수, 다건 처리, 주소록 선택과 Excel 미리보기를 구현했습니다.
  • React.lazy로 페이지 코드를 분리하고, Excel 라이브러리는 업로드·다운로드를 실행할 때 불러오도록 변경했습니다.
  • 예약 식별자와 여러 라벨의 API 응답을 PC·Android 출력용 데이터로 변환하고, 출력할 항목과 프린터 연결 상태를 확인하도록 했습니다.
  • PC 라벨의 긴 주소는 글자 폭에 맞춰 줄바꿈하고 글자 크기와 줄 간격을 조정했습니다. 화면에 표시하는 운송장 번호의 형식을 바꿔도 바코드 데이터는 원래 값을 유지했습니다.
  • 모의 데이터와 실제 API 연결을 분리해 로딩·빈 결과·오류 상태를 구현했습니다.
  • 예약 한 건에 여러 라벨 번호가 배정되는 응답을 목록과 모달에 표시하고, 미리보기와 출력 요청에 사용할 데이터로 변환했습니다.
  • 실물 라벨에서 주소가 잘리거나 겹치는 위치를 확인한 뒤 줄바꿈, 글자 크기와 줄 간격을 조정했습니다.
  • 2026.05 빌드 산출물에서 초기 JavaScript 파일과 gzip 압축 파일의 크기를 비교했습니다.
  • 페이지 이동, 데이터 조회, Excel 처리와 PC 라벨 출력이 지연 로딩 이후에도 이어지는지 확인했습니다.

Android

모바일 출력 브릿지 앱
2026.04 ~ 2026.06Android 앱 개발

웹의 출력 요청을 Android 프린터 SDK에 전달하고, 사용자가 프린터를 선택한 뒤 권한 요청·연결·출력을 진행할 수 있어야 했습니다. 실제 기기에서는 프린터가 목록에 표시되고 선택도 되지만 연결 단계에서 실패하는 문제가 있었습니다.

  • 업무 화면은 웹에 두고 장비와 직접 연결하는 출력 기능은 네이티브 모듈로 분리했습니다.
  • 웹 요청, 앱 권한, SDK 연결, 실제 출력 단계를 나눠 오류가 발생한 위치를 확인했습니다.
  • SDK가 명령을 받았다는 응답과 종이에 인쇄가 끝났다는 의미가 섞이지 않도록 완료 안내를 출력 요청 전송으로 정리했습니다.
  • WebView 브리지와 Android 네이티브 모듈 사이의 출력 요청·응답 처리를 구현했습니다.
  • 출력할 항목과 프린터를 앱에서 확인하고, 권한 요청·장비 연결·출력 중 발생한 오류를 안내하도록 했습니다.
  • 진단 화면에서 권한, 페어링된 장비, SDK 초기화와 연결 상태, 테스트 출력을 각각 확인할 수 있도록 구성했습니다.
  • 웹에서 받은 라벨 데이터를 네이티브 모듈의 출력 형식으로 변환하고, 운송장 번호가 없는 항목은 출력 대상에서 제외했습니다.
  • Android 16 실기기 로그를 따라가 SDK가 연결 직전에 장비 탐색을 취소하는 API를 호출한다는 점을 확인했습니다. 이 호출에도 탐색 권한이 필요해 BLUETOOTH_SCAN과 BLUETOOTH_CONNECT를 함께 요청하도록 수정했습니다.
  • 권한과 Bluetooth 연결을 확인한 뒤 실제 라벨을 출력해 수정 결과를 점검했습니다.
  • Android 16 / API 36 실기기에서 권한 요청, Bluetooth 연결과 실물 라벨 출력을 확인했습니다.

함께 정리한 업무

회원·문의 관리, AI 도구, 외부 API 연동과 기존 웹·앱의 개선 경험입니다.

04

솔루션 기능 확장·개선Web / Android2026.09

회원·문의 관리 웹 및 앱 솔루션

  • Spring MVC
  • Java
  • MyBatis
  • Vue 2
  • MariaDB
  • Android
  • Kotlin

회원 검색·수정·중복 통합과 문의·첨부 기능을 개발했습니다. 회원 역할과 작성자를 서버에서 확인해 접근을 제한하고, Android 앱의 파일 선택과 이미지 미리보기를 연결했습니다.

역할이 다른 회원이 같은 식별값을 가질 수 있어 회원 검색·수정 시 역할을 구분해야 했습니다. 웹에 파일 입력이 있어도 앱에 선택기가 연결되어 있지 않으면 문의에 파일을 첨부할 수 없었습니다.

  • 사용자 역할과 자료 소유권을 서버에서 확인하고, 문의·답변·첨부에 같은 접근 조건을 적용했습니다.
  • 공통 팝업 코드를 바꾸면 다른 화면에도 영향을 줄 수 있어, 회원 수정창 안에서 로딩·실패·닫기를 처리했습니다. 닫힌 창의 응답이 늦게 도착해도 새로 연 창의 내용을 바꾸지 않도록 구분했습니다.
  • 본인 정보에서 허용된 항목만 수정할 수 있도록 했습니다. 중복 회원을 통합할 때는 남길 정보와 연결된 계정·이력을 서버에서 다시 확인했습니다.
  • 문의와 답변에 첨부된 이미지를 미리 볼 때도 해당 자료를 조회할 권한이 있는지 확인했습니다.
  • Android 파일 선택 결과를 WebView에 연결하고, 선택 취소·재선택과 첨부 목록 복귀를 처리했습니다.
  • 저장 성공과 부모 화면 갱신을 분리해 알림을 빨리 닫거나 응답이 늦어도 이전 값이 남지 않도록 했습니다.
  • Android 파일 선택의 취소·재선택과 작성 중 뒤로가기 처리를 연결했습니다.
  • 격리 MariaDB에서 회원 통합의 정보 보존, 실패 시 되돌림과 동시 요청을 확인했습니다.
  • 문의·첨부 동작은 브라우저와 Android 실기기에서 확인했습니다.

05

유지보수Web / Android2026.08

택배 업무 앱

  • React
  • TypeScript
  • React Native
  • Expo
  • Spring Boot
  • SQLite

지도 마커 선택·현재 위치 조회·업무 처리 후 지도 복귀 동작을 수정했습니다. 오프라인에서 배달 완료 내용을 저장하고, 앱 재실행 후 요청을 복원해 통신이 연결되면 다시 전송하도록 했습니다.

통신이 끊기거나 앱을 다시 실행하면 입력한 처리 내용과 전송 대기 요청을 잃을 수 있었습니다. 다른 계정으로 로그인했을 때 이전 사용자의 요청이 전송되는 경우도 막아야 했습니다.

  • 사용자가 확정한 처리 내용을 앱 저장소에 먼저 기록한 뒤 전송하도록 했습니다.
  • 대기 요청이 현재 로그인한 사용자의 것인지 확인하고, 이미 서버에 반영된 결과를 확인한 뒤 재전송하도록 했습니다.
  • 지도에서 업무를 선택했을 때와 처리를 마치고 돌아왔을 때의 상태를 나눴습니다. 새 위치 기능은 설치된 앱이 지원하는지 먼저 확인한 뒤 호출했습니다.
  • 오프라인에서도 업무에 필요한 목록을 사용할 수 있도록 앱 저장소에 보관했습니다. 배달 완료 요청과 선택한 사진은 순서대로 저장하고, 저장이 끝난 뒤 서버로 전송했습니다.
  • 재전송 전에 서버의 완료 내역과 대기 요청을 대조했습니다. 처리 결과가 충돌하거나 업무 오류가 있는 요청, 사진을 복원하지 못한 요청은 사용자가 확인하도록 남겼습니다.
  • 업무 처리 후 이전 지도 위치로 돌아가도록 하고, 앱의 위치 기능 지원 여부를 확인하도록 했습니다. 수령인과 선택 첨부파일의 입력 규칙도 웹과 서버에서 맞췄습니다.
  • 필터가 바뀌어도 지도 그룹 번호를 유지하고 선택한 업무 처리 뒤 기존 지도 위치로 돌아오도록 연결했습니다.
  • 현재 위치를 찾지 못했을 때는 권한 거부, 위치 서비스 비활성, 시간 초과를 구분했습니다. 새 위치 기능을 지원하지 않는 앱은 기존 웹 위치 조회 방식을 사용했습니다.
  • 앱을 다시 실행하면 로그인 사용자와 전송 대기 요청을 복원한 뒤 전송을 시작했습니다. 기존 로그인 세션에서도 요청의 소유자를 확인할 수 있도록 사용자 정보 복원을 보완했습니다.
  • Android 실기기에서 통신 차단 중 저장, 앱 재실행 후 복원과 연결 복구 뒤 서버 반영을 확인했습니다.

06

유지보수Web2026.08

물류 고객지원 레거시 웹

  • Java
  • Spring MVC
  • JSP
  • MyBatis
  • jQuery
  • Apache POI

Excel 업로드 중 파일 분석·입력 검증·통신 오류를 구분해 안내하도록 했습니다. 대량 등록에서 반복되는 DB 조회 비용을 조사하고 개선안을 제안했습니다.

모든 Ajax 실패가 같은 문구로 표시돼 입력 오류와 통신 장애를 구분하기 어려웠습니다. 대량 입력은 행별 DB 조회와 응답 크기가 늘어나 작은 파일의 성공만으로 안전성을 판단할 수 없었습니다.

  • 파싱 성공, HTTP 성공, 업무상 등록 가능을 각각 확인했습니다.
  • 오류 정보는 다음 조사에 필요한 항목만 보여 주고 내부 HTML과 예외 원문은 노출하지 않았습니다.
  • 입력 행 수에 따라 DB 호출과 메모리가 늘어나는 지점을 조사했습니다.
  • 파일 분석과 등록 요청에서 통신 오류·입력 검증 실패·시간 초과·취소·응답 해석 오류를 구분했습니다. 오류가 발생한 단계와 경과 시간도 함께 표시했습니다.
  • 서버 응답 중 사용자에게 보여도 되는 메시지만 선택해 안내했습니다. 내부 오류 페이지와 예외 정보는 제외하고, 동적인 문구가 HTML로 해석되지 않도록 처리했습니다.
  • 행마다 반복되는 중복 검사 쿼리와 인덱스 전체 스캔을 확인했습니다. 입력 제한과 일괄 조회를 개선안으로 제안했습니다.
  • 오류 안내는 로컬 화면과 빌드까지 확인한 배포 전 변경입니다.
  • 행 수에 따른 중복 검사 쿼리 증가를 확인했으며, 일괄 조회는 분석과 개선안 제안 범위입니다.

07

기능 확장Android2026.06 ~ 2026.07

생활정보 앱

  • Spring MVC
  • JSP
  • jQuery
  • Java
  • Android

공공 데이터 API를 연동해 날씨·대기질·기상특보 기능을 확장했습니다. 핵심 정보를 먼저 표시하고 지역과 정보 종류별로 응답을 캐시했습니다. 같은 정보를 동시에 요청하면 진행 중인 조회 결과를 함께 사용하도록 했습니다.

날씨 정보를 제공하려면 여러 공공 데이터 API에 나뉜 데이터를 모아야 했습니다. 화면을 조회할 때마다 같은 데이터를 반복 요청하면 호출이 과도해질 수 있었고, 일부 API의 지연이 전체 화면 표시를 늦출 수 있었습니다.

  • 여러 공공 데이터 API의 응답을 서버에 캐시해 같은 데이터를 반복해서 요청하지 않도록 했습니다.
  • 먼저 보여야 하는 핵심 정보와 늦게 채워져도 되는 보조 정보를 분리했습니다.
  • 외부 API가 실패하면 허용한 범위에서 이전 값을 사용했습니다. 만료된 특보의 ‘없음’은 ‘확인 불가’로 구분하고, 이전 특보를 표시할 때는 최근 조회 기준임을 안내했습니다.
  • 대기질·중기예보·기상특보 API를 연동하고, 특보 내용을 확인하는 모달을 구현했습니다.
  • 기준 데이터를 서버에 캐시했습니다. 갱신한 자료는 임시로 보관하며 필수값을 검사한 뒤 기존 캐시와 교체했습니다.
  • Android WebView에서 앱의 위치 조회 기능을 사용할 수 있도록 연결했습니다. 조회에 실패하면 저장된 위치나 브라우저 위치 조회를 사용했습니다.
  • 일기 에디터와 Android 카메라·앨범 선택 동작을 수정하고, 생활동선 지도의 거리·마커 표시를 보완했습니다.
  • 현재 날씨와 핵심 예보를 먼저 표시하고, 대기질·특보·일별 예보는 별도로 불러오도록 나눴습니다.
  • 정보별 갱신 주기에 맞춰 캐시 유효 시간을 나누고, 같은 데이터의 동시 요청은 하나의 외부 조회 결과를 공유하도록 했습니다.
  • 기준 데이터는 임시 저장과 필수값 검증을 거친 뒤 캐시를 교체했습니다.
  • 캐시는 단일 Tomcat의 JVM 메모리 범위에 적용했습니다.
  • 최초 조회, 캐시 재사용과 외부 API 실패 시 이전 값 표시를 확인하고 운영 환경에 반영했습니다.

08

기능 확장Android2026.06

개인정보 보호 앱

  • Android
  • Cordova
  • Spring MVC
  • jQuery
  • Java

외부 API를 이용한 이메일 유출 조회와 딥페이크 이미지 검사 기능을 개발했습니다. 이메일·이미지 입력부터 검사 요청과 결과 표시까지 구현하고, Android 앱의 이미지·파일 선택을 연결했습니다.

기존 앱에 이메일 유출 여부와 딥페이크 이미지를 검사하는 기능이 필요했습니다. 사용자 입력을 외부 검사 API에 전달하면서도 API 인증 정보가 앱이나 브라우저에 노출되지 않도록 해야 했습니다.

  • 외부 API 조회는 서버 프록시에서 처리하도록 했습니다.
  • 클라이언트에는 화면에 필요한 결과와 상태만 전달하도록 응답을 구성했습니다.
  • 이메일 유출 조회와 딥페이크 이미지 검사 API를 연동하고, 사용자 입력부터 검사 요청과 결과 표시까지 구현했습니다.
  • 이미지의 파일 형식·용량·해상도를 검사한 뒤 서버로 전송하고, 외부 API의 결과와 오류를 화면에 맞게 표시했습니다.
  • Android의 이미지·파일 선택 결과를 WebView에 전달해 앱 안에서 검사를 진행할 수 있도록 했습니다.
  • 파일을 읽는 중 다른 이미지를 선택하면 이전 작업이 더 늦게 끝날 수 있었습니다. 완료된 작업이 현재 선택한 파일의 것인지 확인해, 이전 이미지가 새 미리보기를 덮지 않도록 했습니다.
  • 클라이언트 입력부터 서버 프록시 호출, 외부 응답, 화면 표시까지 단계별로 나눠 처리했습니다.
  • WebView의 파일 선택은 입력 경로별로 에뮬레이터와 실기기에서 확인했습니다.
  • 문서와 예시 설정에 실제 인증 정보가 포함되지 않았는지 확인했습니다.
  • 에뮬레이터와 실기기에서 화면 이동, 파일 선택, 탭 동기화와 브리지 동작을 확인했습니다.

09

내부 도구 개발Tooling2026.04

AI 보조 프로젝트 문서화 웹

  • Node.js
  • TypeScript
  • React
  • AI API
  • xlsx
  • Vitest

저장소와 프로젝트 착수 자료를 바탕으로 문서 초안을 만들고 검토하는 사내 웹 도구를 개발했습니다. 요구사항 검토·표 편집·선택한 부분의 AI 수정과 결과 저장·내보내기를 구현했습니다.

정리하지 않은 자료를 모델에 바로 전달하면 근거가 있는 내용과 추측이 섞일 수 있었습니다. 일부 문서만 수정할 때 관련 없는 내용까지 바뀌는 문제도 막아야 했습니다.

  • 정해진 규칙에 따라 저장소 자료를 수집한 뒤 AI 초안 생성에 사용했습니다.
  • 표의 JSON 데이터를 원본으로 관리하고, Markdown과 내보내기 파일은 이 데이터에서 생성했습니다.
  • 자동화는 초안 생성까지 맡기고 최종 검토와 보강은 사람이 확인할 수 있는 표 구조로 남겼습니다.
  • 저장소와 업로드 자료의 수집부터 생성 미리보기, 표 편집과 내보내기까지 이어지는 화면과 서버 API를 개발했습니다.
  • 요구사항·기능 정의서·화면 설계서를 시트별 표에서 검토하고 수정할 수 있도록 했습니다. 내보내기 파일에도 수정한 내용을 반영했습니다.
  • 수정할 시트·셀과 주변 내용을 AI에 함께 전달했습니다. 수정할 범위와 유지할 내용을 구분해 문서 전체를 다시 생성하지 않고 선택한 부분을 고칠 수 있도록 했습니다.
  • 수집한 자료와 요구사항 후보를 먼저 확인하도록 했습니다. 선행 문서가 준비된 뒤 기능·화면 문서를 생성하도록 화면의 진입 조건을 구분했습니다.
  • 생성한 문서를 시트별로 나눠 표에서 검토할 수 있게 했습니다.
  • 선택한 시트와 셀, 주변 내용을 함께 전달해 필요한 부분만 다시 작성하도록 했습니다.
  • AI가 정리할 항목과 사용자가 결정할 항목을 구분하고, 근거 없이 임시 내용을 채워 넣지 않도록 했습니다.
  • 선택한 시트·셀을 다시 작성할 때 다른 내용이 유지되고 일부 생성 실패 뒤에도 성공한 문서를 사용할 수 있는지 확인했습니다.

10

기능 개발Web2026.03 ~ 2026.04

차트 미리보기 페이지

  • React
  • TypeScript
  • Vite
  • Chart.js
  • WebGL/GLSL (OpenGL 계열)
  • OGL (WebGL 라이브러리)
  • MSW
  • Vitest

개발 중이던 사이트에서 차트에 사용할 데이터와 표시 방식을 설정하는 페이지를 맡았습니다. 차트 종류에 맞는 설정을 보여 주고, 선택한 데이터와 옵션을 Chart.js 미리보기에 반영했습니다.

모든 차트에 같은 설정을 보여 주면 유효하지 않은 옵션까지 노출됐습니다. 설정과 미리보기 상태가 따로 움직이거나 변경 때마다 차트를 다시 만들면 편집 결과를 확인하기 어려웠습니다.

  • 차트 종류에 맞는 설정만 보여 주고, 각 데이터 필드를 어느 축과 값에 연결할지 선택하도록 했습니다.
  • 설정값을 바꿀 때마다 차트 전체를 새로 만들지 않도록, 편집한 값을 관리하는 부분과 차트를 갱신하는 조건을 분리했습니다.
  • 6개 영역의 설정 패널을 Chart.js 미리보기와 연결하고, 데이터 필드를 끌어다 놓아 차트의 축과 값에 연결할 수 있도록 했습니다.
  • 혼합 차트가 불필요하게 다시 생성되는 조건을 줄여 미리보기의 깜빡임과 스크롤 흔들림을 완화했습니다.
  • 데이터 선택, 필드 연결, 차트 선택과 설정 패널을 하나의 편집 화면으로 구성했습니다.
  • 차트 방향과 표시 밀도를 바꿀 수 있게 하고 데이터가 많을 때 스크롤과 한 화면 맞춤을 선택하도록 했습니다.
  • 도움말과 드래그 중 표시를 별도 레이어에 두고 로딩·빈 상태·오류를 구분했습니다.
  • WebGL/GLSL 프래그먼트 셰이더와 OGL로 편집 화면의 배경 모드를 구현했습니다.
  • 차트 종류·옵션 변경, 패널 접기, 필드 드래그와 도움말 표시를 확인했습니다.

11

유지보수·기능 추가Android2026.03 ~ 2026.04

물류 입출고 PDA 앱

  • Android Java
  • Gradle/AGP
  • Scanner SDK

기존 PDA 앱의 빌드 환경과 저장소·업데이트 처리를 정비했습니다. 입고 조회 조건과 수량 입력, QR·바코드 스캔 기능을 개발했습니다.

운영 서명이나 오래된 빌드 설정이 맞지 않으면 개발 환경에서 기능을 확인하기 어려웠습니다. 에뮬레이터에서 동작한 기능도 실제 단말에서는 입력 시점에 따라 실패할 수 있어 실기기 확인이 필요했습니다.

  • 운영 배포 조건과 로컬 개발 빌드 가능 여부를 분리했습니다.
  • 빌드 도구 최신화와 런타임 동작 변경을 같은 문제로 묶지 않았습니다.
  • 운영 배포용 서명이 없어도 개발 빌드를 실행할 수 있도록 서명 조건을 분리했습니다.
  • 업데이트 파일을 앱 전용 저장소에 보관하고, 버전 확인부터 다운로드·설치까지의 처리를 정비했습니다.
  • 입고 조회 조건과 수량 입력 모달을 추가하고 QR·바코드 스캔 결과를 연결했습니다. 기존 업무와 새 모드의 코드 검사·중복 허용·수량 계산 규칙을 나눠 기존 스캔 처리를 유지했습니다.
  • 외부 검증에 실패한 스캔은 오류를 바로 표시하고, 빈 응답 때문에 후속 처리에서 앱 오류가 생기지 않도록 했습니다.
  • Gradle, JDK, SDK, 서명 조건을 나눠 빌드 실패 원인을 좁혔습니다.
  • 로그인, 초기 데이터, 스캔 입력 흐름을 별도 단계로 확인했습니다.
  • 개발/운영 빌드 경로와 주요 진입 흐름을 확인했습니다.
  • PDA 실기기의 스캔 입력과 로그를 확인해 외부 검증 실패와 앱 내부 오류를 구분했습니다. 스캔 규칙과 오류 처리에 대한 단위 테스트와 빌드를 확인했습니다.

12

유지보수Android2026.03

출고·재고 관리 레거시 앱

  • Android Java
  • Gradle/AGP
  • RxJava
  • FileProvider

WebView 기반 Android 앱의 빌드 환경을 업데이트했습니다. OS별 권한·파일 접근·뒤로가기 처리를 수정하고 로그인·초기 동기화 문제를 보완했습니다.

구형 Gradle·AGP가 최신 개발 환경과 맞지 않았습니다. SDK를 변경할 때는 파일 접근, 권한, 서비스 호출과 뒤로가기 처리 때문에 구형 OS나 WebView에서 기존 기능이 깨질 수 있었습니다.

  • 빌드 성공과 런타임 호환성을 같은 완료 조건으로 취급하지 않았습니다.
  • 최신 API 참조와 OS별 권한·파일 처리를 공통 호환성 헬퍼로 분리했습니다.
  • 로그인, 초기 동기화, WebView 화면 이동과 브리지 오류를 구분해 처리했습니다.
  • 기존 support 라이브러리를 유지하면서도 앱을 컴파일할 수 있도록 빌드 오류를 수정했습니다.
  • 최신 Android API를 직접 참조해 구형 OS에서 앱이 시작되지 않을 수 있는 부분을 분리했습니다. 파일 접근과 권한 확인도 공통 함수로 모아 화면마다 같은 버전 검사를 반복하지 않도록 했습니다.
  • 웹 화면과 Android 사이에 주고받는 응답과 비동기 오류의 형식을 맞췄습니다. 장비나 외부 기능의 실패가 앱 전체 종료로 이어지지 않도록 대체 처리를 구현했습니다.
  • Gradle, AGP, JDK, compile SDK의 호환 버전과 모듈 namespace 설정을 맞췄습니다.
  • content URI, FileProvider, Bluetooth 권한과 스캐너·서비스 실행 조건을 OS 정책에 맞춰 점검했습니다.
  • 브리지의 빈 응답과 오류, 비동기 작업 종료, 로그인·초기 동기화 실패를 나눠 원인을 찾았습니다.
  • 빌드와 권한·파일·브리지 처리를 점검하고, 여러 구형 OS 실기기에서도 동작을 확인했습니다.

13

프론트엔드 신규 구축Web2026.02 ~ 2026.03

주식 업무 관리 웹

  • React
  • TypeScript
  • Vite
  • React Router
  • TanStack Query
  • Zustand
  • MSW

계좌·종목·주문 정보를 조회하고 등록·수정하는 화면을 개발했습니다. MSW로 API 응답을 구성하고, 여러 화면에서 사용할 테이블·필터·모달을 공통 컴포넌트로 만들었습니다. 테이블에는 열 고정·너비 조절·재정렬과 행 선택 기능을 구현했습니다.

목록·검색·상세·등록·수정 화면을 새로 만들어야 했습니다. 실제 백엔드에 연결하지 않은 상태에서 MSW로 응답을 구성하고, 여러 화면의 테이블과 모달을 공통으로 사용할 수 있게 만들었습니다.

  • 컬럼 조작·필터·모달은 공통 컴포넌트로 만들고, 화면마다 필요한 컬럼과 동작을 따로 정의했습니다.
  • MSW의 모의 응답을 TanStack Query로 다루고, 선택한 항목과 모달의 열림 상태는 별도로 관리했습니다.
  • React·TypeScript로 프론트엔드 전체를 구축했습니다. 계좌·종목·주문 화면에서 같은 방식으로 열을 고정하고 너비와 순서를 바꿀 수 있도록 공통 테이블을 만들었습니다.
  • MSW 모의 API를 사용해 조회와 입력 동작을 구현했습니다. 선택 중인 필터와 조회에 적용한 조건을 분리하고, 조회 버튼을 눌렀을 때 TanStack Query로 데이터를 갱신하도록 했습니다.
  • 컬럼 재정렬·고정·리사이즈와 행 선택 기능을 공통 테이블에 구현했습니다.
  • MSW로 목록과 상세 응답을 구성하며 로딩·빈 결과 등 화면 상태를 확인했습니다.
  • 종목 검색 모달과 주문 목록에 다음 결과를 이어서 표시하는 화면을 구현했습니다.
  • 주문내역에서는 선택 중인 필터와 조회에 적용한 조건을 분리했습니다. 같은 조건으로 다시 조회하면 첫 페이지부터 불러오고, 더보기 요청이 진행 중일 때는 중복 요청을 막았습니다.
  • MSW 모의 응답을 사용하는 로컬 환경에서 컬럼 조작, 스크롤, 검색 모달과 화면 상태를 확인했습니다.