Projects

프로젝트

무엇을 만들었고, 어떤 문제를 해결하려 했으며, 그 안에서 제가 맡은 일을 정리했습니다.

Main Projects

개인 프로젝트

개인 프로젝트2026.02 - 현재

CodeMate

GitHub PR의 변경 코드를 AI로 분석하고, 팀원들과 같은 코드 줄을 보며 의견을 나눈 뒤 GitHub에 리뷰를 남기는 서비스입니다.

AI 코딩 도구를 구현과 리팩터링에 활용했으며, 기술 선택·성능 측정·검증은 직접 수행했습니다.

회사 프로젝트

팀 프로젝트 / 익명 물류 운영사2026.07 - 2026.08

NP WMS Picking

창고 작업자가 PDA와 물리 스캐너로 위치·상품·수량을 확인하며 피킹을 진행하는 현장 작업 화면입니다.

핵심 문제스캔 입력이 흔들리거나 네트워크가 끊겨도 작업 기록을 잃거나 같은 수량을 중복 반영하지 않아야 했습니다.

내 역할PDA 단계 UI, 바코드 입력 경로 통합, IndexedDB 오프라인 명령 보존과 서버 응답에 따른 작업 상태 표시를 구현했습니다.

기술 선택 이유로컬 저장과 서버 수락을 분리해 네트워크가 끊겨도 작업 사실을 잃지 않기 위해 IndexedDB에 작업을 보관했습니다. 응답 유실 시 재전송으로 같은 수량이 두 번 반영되는 것과 오래된 명령을 막기 위해 clientEventId·version을 검증했습니다.

결과네트워크 요청 전에 작업 명령을 기기에 저장하고, 재연결 시 같은 명령을 순서대로 다시 보내도록 구현했습니다.

사내 코드는 비공개입니다.

팀 프로젝트 / 익명 물류 운영사2026.05 - 2026.07

NP-OIS

물류 운영자가 주문 Excel을 같은 기준으로 변환하고, 오류를 검수해 업무용 파일로 내려받는 웹 도구입니다.

핵심 문제처리 중에 상품·주문 기준이 바뀌거나 변환이 실패하면, 결과가 어떤 원본과 기준으로 만들어졌는지 알기 어려웠습니다.

내 역할기존 MVP를 인수해 Frontend의 진행 상태·검수·다운로드 흐름을 연결했습니다. 서버에서는 변환 기준 고정과 실패 이력 저장 방식을 다뤘습니다.

기술 선택 이유변환 시작 시점의 기준정보 snapshot을 고정해, 처리 중 기준이 바뀌어도 결과에 사용한 기준을 추적할 수 있게 했습니다.

결과업로드 → 변환 → 검수 → 다운로드를 한 화면 흐름으로 연결했습니다. 주문서 양식마다 VBA를 작성·실행하던 변환 과정을 자동화해 반복 작업에 드는 시간을 줄였습니다.

사내 코드는 비공개입니다.

회사 프로젝트 / Windows 현장 프로그램2026.06 - 2026.08

Windows 키오스크 라벨 Agent

웹 화면의 라벨 요청 → ASP.NET Core localhost API → PMS 템플릿 또는 WMS ZPL 처리 → Zebra ZPL·Bixolon ESC/POS 출력 경로를 연결한 Windows Agent입니다.

핵심 문제웹 화면은 Windows 프린터를 직접 다루기 어렵고, PMS·WMS 라벨의 데이터 출처와 Bixolon·Zebra의 출력 형식, 라벨 규격이 달랐습니다.

내 역할WinUI 3·WebView2 키오스크의 로컬 API에서 라벨 요청을 처리하고, PMS 템플릿 조회·WMS ZPL 우선 사용·Zebra/Bixolon 출력 분기와 프린터 선택값 복원 정책을 구현했습니다.

기술 선택 이유WMS가 준비한 ZPL 레이아웃을 우선 보존하고, 장비가 이해하는 출력 형식에 맞춰 전송 경로를 나눴습니다.

결과프린터 유형별 출력 경로를 연결하고, 저장된 프린터 선택값의 복원 정책을 MSTest로 검증했습니다.

사내 코드는 비공개입니다.

Mobile & Realtime Experience

팀 프로젝트 (FE 2 / BE 2 / Design 1)2025.06 - 2025.11

Fly:On

패러글라이딩 비행·관광 일정을 만들고 카드 순서를 편집하는 모바일 앱입니다.

핵심 문제일정 카드를 드래그할 때 목록 전체가 다시 렌더링돼 카드 이동이 늦어지는 문제가 있었습니다.

내 역할FE 2명·BE 2명·디자이너 1명 팀에서 모바일 일정 편집과 인증 상태 복원을 구현하고 EAS 배포·원스토어 출시를 진행했습니다.

기술 선택 이유드래그 중 상태 변경이 전체 트리로 퍼지는 것을 줄이기 위해 React.memo와 컴포넌트 분리를 적용했습니다.

결과같은 로컬 일정 Drag & Drop 동작의 React Profiler total commit duration이 211.5ms에서 72.9ms로 약 66% 감소했습니다.

졸업작품 (FE 1 / BE 2)2025.02 - 2025.07

Runner's High

러너가 지도로 코스를 고르고 GPS로 달리기를 기록하며 다른 참가자와 위치를 공유하는 모바일 앱입니다.

핵심 문제달리는 중 모바일 네트워크가 끊겼다가 돌아와도 현재 러닝 모드에 필요한 위치 공유가 자동으로 다시 이어져야 했습니다.

내 역할졸업작품 팀에서 모바일 프론트엔드를 전담해 코스 탐색, 모드별 화면·상태와 실시간 위치 연결·재구독 경로를 구현했습니다.

기술 선택 이유네트워크 연결 복구와 러닝 화면의 구독 복구를 별개로 다뤘습니다. 연결은 STOMP client가 복구하고, 활성 러닝 모드가 자신에게 필요한 위치 전송·구독 경로를 다시 설정하게 했습니다.

결과실시간 경쟁 러닝에서 STOMP 연결이 끊겨도 위치 전송이 이어지도록 heartbeat·reconnectDelay·재구독을 적용했습니다. 프론트엔드를 전담했습니다.

Ongoing Personal Platform

phnml1 Portfolio & Tech Blog.

Built & Maintained

개인 프로젝트 · 설계, 개발, 콘텐츠 운영 및 배포

Browse Articles View Source

Next.js App Router 기반으로 프로젝트 Case Study와 MDX 기술 글을 한 곳에서 관리하고, 정적 export로 GitHub Pages에 배포하는 개인 포트폴리오·기술 블로그입니다.

Markdown과 MDX 기반 프로젝트·기술 글 콘텐츠 관리
프로젝트와 기술 글의 정적 상세 라우트 생성
검색·카테고리·태그를 통한 콘텐츠 탐색
canonical·Open Graph·sitemap·robots와 정적 배포 구성

Next.js App RouterTypeScriptTailwind CSSMarkdown / MDXGitHub Pages

More Projects / Archive

Project Archive.

2026

More Projects · PWA · Workflow

Career Hub

2025.11 - 2026.02

팀 프로젝트 · Frontend (FE 2 / BE 2)

채용 공고, 지원 단계, 일정과 알림을 하나의 PWA 흐름으로 묶고 서버 상태 캐시와 화면 상태의 갱신 규칙을 설계한 프로젝트입니다.

Next.js App RouterTypeScriptTanStack QueryZustandPWA / FCMCase Detail →

2024

Next.js · Authentication · Location

아모르각코

2024.07 - 2024.12

팀 프로젝트 · Frontend 1 / Backend 1

Next.js middleware 기반 인증과 쿠키·토큰 관리, Kakao 지도와 Geolocation을 활용한 위치 탐색, PWA·FCM 알림을 경험한 모각코 모집 플랫폼입니다.

Next.js App RouterTypeScriptReact QueryKakao MapsPWA / FCM

2023

React · Team Collaboration

CMAP

2023.07

팀 프로젝트 · Frontend (3인)

지도 기반 장소 콘텐츠를 작성·공유하는 React 웹 프로젝트입니다.

Reactstyled-componentsCSS ModulesNaver MapsReact-Quill

Hey Apple

2023.01 - 2023.02

팀 프로젝트 · FE Lead (FE 3 / BE 3 / AI 1)

이미지를 업로드하고 분석 결과를 시각화하는 웹 서비스의 프론트엔드 개발 및 FE 리드를 맡았습니다.

ReactJavaScriptAxiosFramer MotionNivo