←사이트로 돌아가기
포트폴리오2026

웹/모바일 프론트엔드 엔지니어

박주철

Jukrap

웹과 모바일이 한 흐름으로 이어지는 업무 도구를 개발해 왔습니다.
직무
웹/모바일 프론트엔드 엔지니어
주요 경험
웹, 하이브리드 앱, Android 연동

네 가지 업무와 다섯 프로젝트에서 문제를 어떻게 파악했고 무엇을 구현했는지, 결과를 어디까지 직접 확인했는지 담았습니다.

  • 이메일jukrap628@gmail.com
  • 보조 이메일valurauta628@gmail.com
  • GitHub (새 탭에서 열림)github.com/jukrap
  • Blog (새 탭에서 열림)valur.tistory.com/
  • LinkedIn (새 탭에서 열림)www.linkedin.com/in/jukrap/
  • 개인 사이트 (새 탭에서 열림)jukrap.vercel.app
박주철 포트폴리오경력

경력

트리포스에서 맡은 일

신규 업무 웹을 구축하고 모바일 출력 앱을 연결했습니다. 차트 편집 도구와 AI 문서화 도구를 만들었고, 레거시 웹과 Android 앱의 오류를 고쳐 운영에 반영했습니다.

회사와 기간
트리포스㈜ 2026.02 ~ 현재
직무
웹/모바일 프론트엔드 엔지니어

주요 경험

  • 물류 운영 웹과 모바일 출력

    조회, 예약, Excel, 출력 요청을 웹에 구현하고 WebView 요청 뒤의 권한, Bluetooth, 라벨 출력은 Android 앱에서 처리했습니다.

  • 차트 편집 도구

    차트마다 쓸 수 있는 옵션을 나누고 데이터 필드, 미리보기, 설정 화면이 같은 편집 상태를 보도록 만들었습니다.

  • AI 문서화 도구

    저장소를 먼저 읽고 초안을 만든 뒤 검수용 워크북에서 필요한 부분만 다시 고치는 흐름을 구현했습니다.

  • 생활정보 서비스 유지보수

    첫 화면의 로딩과 캐시를 고치고, 바뀐 파일만 배포한 뒤 해시와 주요 화면을 다시 실행했습니다.

추가 업무

Android 호환성, 금융 업무 웹, 하이브리드 보안, 현장 단말, 레거시 웹 패널 작업은 8쪽에 짧게 정리했습니다.

jukrap.vercel.app02
박주철 포트폴리오주요 업무 01 웹

주요 업무 01 웹

물류 운영 웹

조회부터 예약, Excel, 출력 요청까지 이어지는 운영 화면을 만들고 첫 화면에 함께 실리던 무거운 코드를 덜어냈습니다.

기간
2026.04 ~ 2026.06
담당
업무 운영 / 성능
직무
신규 구축/안정화

사용 기술

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

문제

예약과 다건 처리, 주소록, Excel 미리보기, 출력 요청이 한 화면 흐름으로 이어졌습니다. 여기에 스프레드시트 코드까지 첫 진입에 포함돼 업무를 시작하기 전부터 내려받아야 할 JavaScript가 컸습니다.

구현과 판단

  • 운영 흐름 구현

    공통 화면 틀과 표, 모달, 폼 위에 조회, 예약, 다건 처리, 주소 선택, Excel 미리보기와 출력 요청 변환을 연결했습니다.

  • 측정 뒤 지연 로딩 적용

    번들 분석 결과를 보고 페이지 라우트와 스프레드시트 라이브러리를 첫 진입에서 뺐습니다. 인증과 API 초기화까지 더 나누는 안은 첫 클릭 부담이 커 적용하지 않았습니다.

결과

초기 진입에 필요하지 않은 화면과 Excel 코드를 옮긴 뒤 같은 빌드 산출물에서 초기 JavaScript와 gzip 크기를 다시 비교했습니다.

초기 JavaScript

2,405.50 → 616.59 kB

약 74% 감소. 페이지와 스프레드시트 코드 지연 로딩 결과

gzip 압축 기준

815.10 → 204.38 kB

약 75% 감소. 같은 초기 진입 파일 비교

jukrap.vercel.app03
박주철 포트폴리오주요 업무 01 모바일

주요 업무 01 모바일

모바일 출력 브릿지 앱

웹의 출력 요청을 Android 앱으로 받아 권한, Bluetooth 연결, 프린터 명령을 거쳐 실제 라벨이 나오는 데까지 구현했습니다.

기간
2026.04 ~ 2026.06
담당
WebView / Android 네이티브 모듈
직무
신규 구축/출력 연동

사용 기술

  • Expo,
  • React Native,
  • Expo Router,
  • WebView,
  • Android 네이티브 모듈,
  • TypeScript,
  • Bluetooth

문제

웹에서 출력 버튼이 동작해도 장비가 라벨을 출력했다는 뜻은 아닙니다. 웹과 앱의 메시지, Android 권한, Bluetooth 연결, 프린터 SDK 가운데 어디서 멈췄는지 알 수 있어야 했습니다.

구현과 판단

  • 웹과 앱의 역할 구분

    업무 화면은 WebView에 두고 출력 데이터 변환, 장비 상태, 프린터 명령은 Android 네이티브 모듈이 맡도록 구현했습니다.

  • 실기기 출력 점검

    Android 16/API 36에서 장비 탐색 호출을 추적하고 취소 처리와 Bluetooth 권한을 보완한 뒤 실물 라벨을 출력했습니다.

  • 실행 환경 구분

    개발·운영 URL과 앱 식별자, 설치 산출물을 나눠 테스트용 설치와 운영 설치가 섞이지 않게 했습니다.

결과

요청 수신과 장비 출력을 따로 점검해 웹 요청 성공이 물리 출력 성공으로 잘못 기록되지 않게 했습니다.

모바일 출력 검증

Android 16 / API 36

권한·Bluetooth 연결·실물 라벨 출력 흐름 확인

jukrap.vercel.app04
박주철 포트폴리오주요 업무 02 웹 도구

주요 업무 02 웹 도구

구조화된 차트 편집 UI

데이터 역할과 설정 화면이 실제 미리보기와 어긋나지 않는 편집 흐름을 설계했습니다.

기간
2026.03 ~ 2026.04
담당
시각화 / 편집 UI
직무
편집 파트 구축

사용 기술

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

문제

모든 차트에 같은 옵션을 강제하면 설정 화면이 복잡해집니다. 미리보기와 편집 상태가 따로 움직이면 사용자가 현재 결과를 믿기도 어렵습니다.

구현과 판단

모든 차트에 같은 옵션을 붙이는 대신 차트 종류에 따라 필요한 설정을 고르고, 데이터가 바뀔 때 미리보기와 설정 화면이 함께 갱신되게 만들었습니다.

  • 차트에 맞는 설정만 노출

    현재 차트에서 쓸 수 있는 옵션만 보여주고 여섯 영역의 설정 패널과 미리보기를 연결했습니다.

  • 편집 상태를 역할별로 구성

    데이터 필드, 미리보기 렌더링, 설정 상태가 서로 덮어쓰지 않도록 나누고 하나의 편집 모델을 바라보게 했습니다.

  • 편집 화면 배경 렌더링

    WebGL/GLSL 프래그먼트 셰이더와 OGL로 포인터, 시간, 해상도 값에 반응하는 배경 모드를 구성했습니다.

결과

옵션 변경, 패널 접기, 드래그 앤 드롭, 툴팁까지 같은 편집 흐름에서 점검했습니다.

데이터·미리보기·설정

상태 동기화

사용자가 고른 데이터 역할과 설정이 실제 렌더 결과에 이어지도록 정렬

혼합 차트 미리보기

다시 그리는 범위 축소

불필요한 화면 재생성과 스크롤 흔들림을 줄인 범위로 한정

jukrap.vercel.app05
박주철 포트폴리오주요 업무 03 사내 도구

주요 업무 03 사내 도구

AI 보조 프로젝트 문서화 도구

AI가 문서를 대신 쓰는 구조가 아니라, 근거 수집과 사람 검수를 통제 가능한 흐름으로 만들었습니다.

기간
2026.04
담당
AI API / 문서 도구
직무
내부 도구 구축

사용 기술

  • Node.js,
  • TypeScript,
  • React,
  • AI API,
  • 검수용 워크북 UI,
  • xlsx,
  • Vitest

문제

비정형 자료를 모델에 바로 넘기면 근거와 추측이 섞이기 쉽고, 일부 문서만 보강하고 싶을 때도 전체 산출물이 흔들릴 수 있었습니다.

구현과 판단

  • 저장소를 읽고 먼저 미리보기

    규칙으로 모은 파일과 구조 정보를 AI에 보내기 전에 사용자가 확인하도록 했습니다.

  • 검수용 워크북에서 부분 수정

    확인한 자료로 요구사항, 기능, 화면 초안을 만들고 선택한 시트와 셀만 다시 작성하도록 구현했습니다.

  • 부분 실패 기록

    생성에 실패한 항목은 현재 결과와 실행 이력에서 구분했고, 근거가 부족한 내용은 사람이 결정할 항목으로 남겼습니다.

결과

자료 수집부터 초안, 워크북 검수, 부분 수정까지 각 단계를 따로 실행해 볼 수 있게 했습니다. 지원하지 않는 항목은 임의로 채우지 않고 사람이 결정할 내용으로 남겼습니다.

자료 수집 → 미리보기

근거 우선

규칙 기반 수집 결과를 먼저 확인한 뒤 AI 초안에 사용

사람 중심 산출물

검수용 워크북

요구사항·기능·화면 단위를 표로 검토하고 export

sheet / cell revision

선택 범위 수정

전체 재생성 대신 수정 대상과 보존 문맥을 함께 전달

jukrap.vercel.app06
박주철 포트폴리오주요 업무 04 하이브리드 서비스

주요 업무 04 하이브리드 서비스

생활정보 하이브리드 서비스

레거시 웹과 Android WebView를 유지보수하며 외부 API 응답, 캐시, 위치 처리와 운영 배포를 고쳤습니다.

기간
2026.06 ~ 2026.07
담당
레거시 웹 / Android WebView / 운영
직무
유지보수/운영 반영

사용 기술

  • Spring MVC,
  • JSP,
  • jQuery,
  • Java,
  • Android,
  • 공공 API 연동,
  • SHA-256

문제

여러 외부 API와 기준 데이터 조회가 한 요청 안에 묶이면 일부 지연이 전체 화면 지연으로 번질 수 있었습니다. 운영 반영도 파일 단위로 이뤄져 누락과 설정 노출 위험을 함께 관리해야 했습니다.

구현과 판단

  • 필수 정보부터 표시

    첫 화면에 필요한 정보와 뒤에 불러올 정보를 나누고 최신 캐시, 만료 캐시, 기준 데이터를 각각 다뤘습니다.

  • 바뀐 파일만 운영 반영

    전체 파일을 덮어쓰지 않고 배포 목록과 SHA-256 해시로 대상을 좁힌 뒤 주요 화면을 다시 실행했습니다.

  • WebView 위치 처리

    Android 앱에서는 네이티브 위치를 먼저 사용하고 저장된 위치와 브라우저 경로를 대체 수단으로 뒀습니다.

결과

서로 다른 날 진행한 두 배포를 합산하지 않았습니다. 각 작업의 파일 수와 해시 결과를 따로 기록했고, 운영 스모크 테스트와 최종 테스트도 별도로 남겼습니다.

기본 정보 운영 점검

약 2.85초 → 0.11초

2026-07-08 당시 첫 요청과 캐시 응답 비교

대기질 운영 점검

약 2.02초 → 0.07초

2026-07-08 당시 첫 요청과 캐시 응답 비교

최종 회귀

131 tests / skipped 1

최종 mvn test로 확인하고 운영 반영 후에는 hash와 smoke를 별도로 확인

jukrap.vercel.app07
박주철 포트폴리오업무 경험

업무 경험

추가 업무

금융 업무 웹은 React로 새로 만들었습니다. Android 호환성, 하이브리드 보안, 현장 단말과 레거시 패널 작업은 기존 환경에서 필요한 범위를 고쳤습니다.

  • 01

    레거시 모바일 앱 호환성

    업무 성격
    유지보수
    기간
    2026.03
    플랫폼
    Android / Hybrid

    핵심 구현

    Gradle·AGP·JDK·SDK 조건을 맞춰 빌드 기준선을 복구했습니다. 권한·파일 URI·back API·service 호출은 OS별 helper로 분리해 구형 런타임의 회귀 범위를 좁혔습니다.

    기술

    • Android Java,
    • Gradle/AGP,
    • RxJava,
    • FileProvider
  • 02

    주식 업무 관리 웹

    업무 성격
    React 신규 재구축
    기간
    2026.03
    플랫폼
    Web

    핵심 구현

    목록·검색 모달·상세·등록·수정·상태 변경을 React의 공통 table·filter·modal 구조로 새로 만들었습니다. 서버 조회와 갱신은 React Query로 모으고 화면 상태는 별도로 관리했습니다.

    기술

    • React,
    • TypeScript,
    • Vite,
    • React Router,
    • TanStack Query,
    • Zustand
  • 03

    하이브리드 외부 연동 기능 확장

    업무 성격
    기능 확장
    기간
    2026.06
    플랫폼
    Hybrid

    핵심 구현

    외부 인증 정보와 조회 책임을 서버 프록시로 옮기고, 클라이언트에는 화면에 필요한 결과만 전달했습니다. WebView의 파일 선택·route·tab·bridge 흐름은 emulator와 실기기에서 나눠 확인했습니다.

    기술

    • Android,
    • Cordova,
    • Spring MVC,
    • jQuery,
    • Java
  • 04

    현장 단말 Android 앱

    업무 성격
    유지보수
    기간
    2026.03 ~ 2026.04
    플랫폼
    Android

    핵심 구현

    운영 서명과 로컬 개발 빌드 조건을 분리하고 Gradle·JDK·SDK 기준을 맞춰 개발 빌드를 복구했습니다. 로그인·초기 데이터·스캔 입력은 단계별로 확인해 실제 단말에서 볼 항목을 따로 남겼습니다.

    기술

    • Android Java,
    • Gradle/AGP,
    • Scanner SDK
  • 05

    레거시 웹 패널 분리 기준선

    업무 성격
    영향 분석
    기간
    2026.06
    플랫폼
    Legacy Web

    핵심 구현

    레거시 화면을 바로 나누기 전에 공유 popup·selector·page loader와 API 규약의 영향 지점을 지도화했습니다. 기존 동작을 기준으로 수동 확인 절차와 중단 조건을 정리했습니다.

    기술

    • JSP,
    • jQuery,
    • 서버 렌더링 웹
jukrap.vercel.app08
박주철 포트폴리오프로젝트 01 웹

프로젝트 01 웹

C. Donghae

72시간 동안 동해선 이용객이 열차와 주변 정보를 한 지도에서 볼 수 있는 웹 서비스를 만들었습니다.

기간
2024.10.04 ~ 2024.10.06
팀
3명
결과
DIVE 2024 부산테크노파크원장상

사용 기술

  • TypeScript,
  • React,
  • Next.js,
  • Tailwind CSS,
  • Google Maps,
  • Storybook,
  • AWS,
  • GitHub Actions,
  • Docker
동해선장 지도 중심 메인 화면
동해선장 지도와 바텀 시트 정보 화면

문제

72시간 안에 열차, 날씨, 주변 장소처럼 출처가 다른 정보를 지도 한 화면에 모아야 했습니다. 제한 시간 안에 API 선택, 연동과 모바일 상호작용도 함께 결정해야 했습니다.

구현과 판단

  • 지도와 외부 데이터 연결

    Google Maps의 지도, 장소 검색, 대중교통 경로, 주소 변환과 날씨, 역 정보, 주변 장소 데이터를 한 화면에 연결했습니다.

  • 모바일 지도 화면 구현

    지도 정보를 가리지 않도록 드래그 거리와 속도에 따라 높이가 바뀌는 바텀 시트를 구현했습니다.

  • 제한 시간 안의 협업

    웹 지원 기능을 비교해 지도 API를 정하고 Swagger 문서를 보며 백엔드 API와 주요 화면을 연결했습니다.

결과

지도 중심 화면과 드래그형 바텀 시트를 완성해 DIVE 2024 부산테크노파크원장상을 받았습니다.

jukrap.vercel.app09
박주철 포트폴리오프로젝트 02 모바일

프로젝트 02 모바일

ShareBBy

취미 활동을 올리고 함께할 사람을 찾는 React Native 앱에서 Android 대응과 커뮤니티 기능을 맡았습니다.

기간
2024.04 ~ 2024.06
팀
5명
배포
2024년 App Store 배포 이력

사용 기술

  • JavaScript,
  • React Native,
  • Firebase,
  • Faster Image
ShareBBy 모바일 앱 화면
ShareBBy 커뮤니티 화면

문제

iOS 기준으로 먼저 만든 화면을 Android에서도 동작하게 고쳐야 했고, 게시글 이미지가 갱신되지 않는 캐시 문제도 있었습니다.

구현과 판단

  • 게시글과 댓글 흐름

    게시글과 댓글 작성·수정·삭제, 위치 필터, 정렬, 당겨서 새로고침, 무한 스크롤을 구현했습니다.

  • Firebase 데이터 연결

    데이터 관계를 ERD로 정리하고 댓글, 좋아요, 여러 이미지가 연결되는 흐름을 만들었습니다.

  • 이미지 캐시 교체

    기본 이미지 컴포넌트의 캐시 문제를 재현하고 업데이트가 중단된 라이브러리 대신 유지되는 대안을 적용했습니다.

결과

Android 화면과 커뮤니티 기능을 구현하고 이미지 캐시 문제를 고쳤습니다. 팀 앱은 2024년 App Store에 배포됐습니다.

  • GitHub (새 탭에서 열림)github.com/jukrap/archived-rn-ShareBBy
jukrap.vercel.app10
박주철 포트폴리오프로젝트 03 개발 도구

프로젝트 03 개발 도구

AI Agent Playbook

프로젝트 규칙과 이전 작업을 이어서 사용할 수 있도록 CLI, 스킬, 문서 틀과 점검 명령을 묶은 개인용 AI 에이전트 하네스입니다.

기간
2026.06 ~ 현재
개발
1인 개발
배포
npm 패키지와 GitHub 저장소

사용 기술

  • JavaScript,
  • Node.js,
  • GitHub Actions
npm에 공개된 AI Agent Playbook 패키지 페이지
npm 패키지 페이지
AI Agent Playbook 설치와 시작 명령 안내
설치와 초기 설정

문제

프로젝트마다 작업 규칙과 이전 기록이 흩어져 있으면 에이전트가 같은 내용을 다시 찾고, 파일을 바꾸는 명령의 영향도 실행 전에 알기 어렵습니다.

구현과 판단

  • 규칙과 프로젝트 메모리 분리

    반복해서 쓰는 작업 규칙은 스킬과 템플릿으로, 프로젝트에만 필요한 내용은 저장소 안의 메모리로 나눴습니다.

  • 실행 전 결과를 볼 수 있게 구성

    CLI 명령과 읽기 전용 MCP 도구를 만들고 파일을 바꾸는 명령에는 실행 전 결과를 보여주는 dry-run을 두었습니다.

결과

CLI와 읽기 전용 MCP 도구를 npm 패키지와 GitHub 저장소로 공개했습니다. 파일을 바꾸는 명령은 dry-run 결과를 먼저 보여줍니다.

  • GitHub (새 탭에서 열림)github.com/jukrap/ai-agent-playbook
  • Website (새 탭에서 열림)www.npmjs.com/package/ai-agent-playbook
jukrap.vercel.app11
박주철 포트폴리오프로젝트 04 웹

프로젝트 04 웹

Itzip

15명 팀에서 블로그와 Markdown 편집 화면을 만들고, 테스트와 오류 관측 도구를 프론트엔드 개발 흐름에 더했습니다.

기간
2024.07 ~ 2025.06
팀
15명
역할
프론트엔드 팀장 / DevOps

사용 기술

  • TypeScript,
  • React,
  • Next.js,
  • Jest,
  • Storybook,
  • Sentry,
  • Jenkins,
  • Docker
Itzip Markdown 편집 화면
Markdown 편집과 미리보기

문제

블로그 목록과 편집 화면을 함께 만들면서 컴포넌트 동작과 배포 뒤 오류를 팀이 같은 방식으로 살펴볼 수 있어야 했습니다.

구현과 판단

  • Markdown 편집 화면

    본문을 쓰는 동안 결과를 바로 볼 수 있는 미리보기와 프로젝트 전용 Markdown 문법을 구현했습니다.

  • 테스트와 오류 관측

    Jest로 주요 동작을 점검하고 Storybook에 컴포넌트를 모았습니다. 배포 뒤 오류는 Sentry에서 볼 수 있게 구성했습니다.

  • 필요한 시점에 화면 코드 로드

    게시글 안의 무거운 컴포넌트는 Next.js dynamic import로 필요한 시점에 불러오도록 바꿨습니다.

결과

블로그와 Markdown 편집 화면을 구현했고, 단위 테스트와 컴포넌트 문서, 배포 뒤 오류 관측 경로를 팀 프로젝트에 적용했습니다.

  • GitHub (새 탭에서 열림)github.com/ITZipProject/itzip_front
jukrap.vercel.app12
박주철 포트폴리오프로젝트 05 Android

프로젝트 05 Android

Posture Teacher

카메라 프레임에서 신체 지점을 읽어 앉은 자세와 플랭크 자세를 판별하고 측정 기록을 남기는 Android 앱을 만들었습니다.

기간
2022.07 ~ 2023.05
팀
2명
역할
팀장 / Android 개발

사용 기술

  • Java,
  • Android,
  • Jetpack,
  • MediaPipe,
  • SQLite
Posture Teacher 자세 분석 결과 화면
자세 분석 결과와 측정 기록

문제

카메라 프레임을 계속 분석하면서도 화면이 멈추지 않아야 했고, MediaPipe를 Android 프로젝트에서 쓸 수 있는 형태로 직접 빌드해야 했습니다.

구현과 판단

  • MediaPipe Android 통합

    Docker와 MSYS2에서 이어가지 못한 빌드를 Ubuntu에서 다시 진행해 MediaPipe AAR를 만들고 앱에 넣었습니다.

  • 자세 판별과 타이머

    신체 지점의 각도와 길이로 앉은 자세와 플랭크 자세를 판별하고, 유지 시간과 어긋난 시간을 각각 기록했습니다.

  • 프레임 처리 분리

    분석 작업을 별도 스레드에서 실행해 구형 기기에서도 화면 입력과 프레임 처리가 서로 막지 않도록 했습니다.

결과

프로젝트 당시 OpenCV 구현보다 프레임 처리 FPS가 5~10배 높았습니다. 자세 판별 정확도와는 별개로 측정했습니다.

  • GitHub (새 탭에서 열림)github.com/jukrap/archived-Posture-Teacher
jukrap.vercel.app13
박주철 포트폴리오프로필

프로필

기술, 교육과 수상

앞선 사례에서 사용한 기술과 교육, 수상 이력을 한곳에 모았습니다.

기술

  • 언어

    TypeScript, JavaScript, Java

  • 웹

    React, Next.js, Vite, TanStack Query, Zustand

  • 모바일·하이브리드

    React Native, Expo, Android, Gradle

  • 테스트·관측

    Vitest, Jest, MSW, Storybook, Sentry

  • 빌드·배포

    GitHub Actions, Jenkins, Docker

  • 서버·클라우드

    Node.js, Firebase, Spring MVC, AWS

교육

  • 경상국립대학교 컴퓨터과학과

    2023.02 졸업

    학점 3.64 / 4.5

  • 프로그래머스 데브코스

    2023.12 ~ 2024.05

    Cloud Application Engineering 과정 수료

수상

  • DIVE 2024 글로벌 데이터 해커톤

    2024.10

    부산테크노파크원장상 수상

  • 경남소프트웨어 경진대회

    2021.10

    최우수상 수상

더 보기

개인 사이트의 Work에는 업무별 구현과 점검 기록을, Projects에는 프로젝트 화면과 세부 작업을 남겼습니다.

  • Work (새 탭에서 열림)jukrap.vercel.app/ko/work
  • Projects (새 탭에서 열림)jukrap.vercel.app/ko/projects
  • 개인 사이트 (새 탭에서 열림)jukrap.vercel.app
jukrap.vercel.app14