5년 차 프론트엔드 개발자로서, React/TypeScript 기반의 대규모 서비스 개발 및 리딩 경험이 풍부합니다. 사용자 중심의 UI/UX 개선과 특히, 모노레포 구축, 결제 시스템 연동, 키오스크 개발 등 비즈니스 성과에 직결되는 기능을 주도적으로 해결하며 코드 효율과 팀 협업 개선에 기여했습니다.
| 설명 | - 뷰티 성형수술 피부시술 정보 앱
React (CSR) : 컴포넌트 기반 아키텍쳐를 통한 재사용성 극대화 및 풍부한 생태계를 활용한 효율적인 UI 개발TypeScript : 정적 타이핑을 통한 런타임 에러 사전 방지 및 대규모 코드베이스에서의 유지보수 안정성 확보Zustand : Redux 대비 현저히 낮은 보일러플레이트와 직관적인 상태 관리로 개발 생산성 향상Tailwind CSS : 빠른 스타일링 및 CSS in JS 대비 가벼운 번들 크기 유지TanStack Query : 서버 상태의 캐싱 및 동기화를 자동화하여 복잡한 데이터 페칭 로직 단순화Framer Motion : 선언적 API를 활용한 애니메이션 구현하여 사용자 경험(UX) 강화Zod : 런타임 데이터 검증을 통해 API 응답의 타입 안정성을 보장하고 공통 폼 스키마를 정의하여 재사용성 극대화Vite : 빠른 HMR(Hot Module Replacement)을 통해 쾌적한 개발 경험 제공Pnpm : 디스크 공간 절약 및 의존성 관리Turborepo : 빌드 캐싱과 병렬 실행을 통한 모노레포 빌드 시스템 최적화 및 개발 워크플로우 효율화 |
| 이슈 | - 하나의 서비스 내에서 여러 프로젝트를 구성해야 했습니다. 멀티 레포 환경에서는 각 프로젝트 간 컨텍스트, 유틸리티 함수, 컴포넌트 등을 공유하기 어려울 것으로 판단하여 Turborepo를 활용한 모노레포 환경을 구축하였습니다. 이를 통해 여러 프로젝트에서 공통 모듈을 효율적으로 공유하고 관리할 수 있었습니다. || 설명 | - 몽골 채팅 앱 |
|---|---|
| 기간 | 2025년 3월 ~ 2025년 11월 |
| 주요 업무(기여도) | - 사용자 인증 WebView SPA 앱 구성 (100%) |
사용자 인증 UI 및 기능 개발 (100%)
커뮤니티 UI 및 기능 개발 (100%) |
| 기술 스택 | - React (CSR) : 컴포넌트 기반 아키텍쳐를 통한 재사용성 극대화 및 풍부한 생태계를 활용한 효율적인 UI 개발
TypeScript : 정적 타이핑을 통한 런타임 에러 사전 방지 및 대규모 코드베이스에서의 유지보수 안정성 확보
Tailwind CSS (v4) : 빠른 스타일링 및 CSS in JS 대비 가벼운 번들 크기 유지
Zod : 런타임 데이터 검증을 통해 API 응답의 타입 안정성을 보장하고 공통 폼 스키마를 정의하여 재사용성 극대화
Vite : 빠른 HMR(Hot Module Replacement)을 통해 쾌적한 개발 경험 제공
Pnpm : 디스크 공간 절약 및 의존성 관리
Sendbird : 채팅 기능을 가진 MVP 서비스를 구현하기 위한 다양한 채팅 API 제공 |
| 이슈 | - 빠른 개발/운영 환경 프로토타이핑과 CI/CD를 위해 AWS Amplify 서비스를 사용하여 프론트엔드 배포 자동화를 설정했습니다.
API 서버 인증을 위한 액세스 토큰을 네이티브 앱과 웹에서 각각 별도로 관리하다 보니, 한쪽에서 토큰이 만료되어 갱신되더라도 다른 쪽에서는 여전히 이전 토큰을 사용하게 되는 문제가 발생했습니다. 이로 인해 두 환경 간 토큰이 동기화되지 않아, 사용자에게 반복적으로 인증 권한 관련 경고 알림이 표시되는 이슈가 있었습니다. 이러한 이슈를 개선하기 위해 액세스 토큰의 관리 주체를 네이티브 앱으로 통합하였습니다. 웹에서는 API 호출 전에 네이티브 앱에 토큰을 요청하고, 토큰이 유효한 경우 기존 토큰을 그대로 전달하며, 만료된 경우에는 네이티브에서 새로운 토큰을 갱신한 뒤 웹에 전달하도록 처리했습니다. 이를 통해 두 환경 간 토큰 동기화 문제를 해결하고, 사용자에게 불필요한 인증 경고 알림이 반복적으로 표시되는 불편을 줄여 사용자 경험을 크게 향상시킬 수 있었습니다. |
| 설명 | - 골프장 무인 키오스크 체크인/체크아웃 시스템 개발
초기 기획 단계부터 참여하여 키오스크 시스템 개발 완료 주도 | | --- | --- | | 기간 | 2024년 11월 ~ 2025년 1월 | | 주요 업무(기여도) | - 키오스크 체크인 기능 개발 (100%)
키오스크 체크아웃 기능 개발 (100%)
키오스크 락커 발급 기능 개발 (100%)
키오스크 Smartro 연동 및 결제 기능 개발 (100%)
키오스크 프린터 연동 및 개발 (50%)
UI 퍼블리싱 및 사용자 인터페이스 구현 (100%) |
| 기술 스택 | - Vue.js 3 : 컴포넌트 기반 아키텍쳐를 통한 재사용성 극대화 및 풍부한 생태계를 활용한 효율적인 UI 개발
TypeScript : 정적 타이핑을 통한 런타임 에러 사전 방지 및 대규모 코드베이스에서의 유지보수 안정성 확보
Pinia : Vuex 대비 높은 TypeSciprt 친화적인 API 제공 및 직관적인 상태 관리로 개발 생산성 향상
Tailwind CSS : 빠른 스타일링 및 CSS in JS 대비 가벼운 번들 크기 유지
TanStack Query : 서버 상태의 캐싱 및 동기화를 자동화하여 복잡한 데이터 페칭 로직 단순화
Electron : 키오스크 데스크톱 응용 프로그램 실행을 위한 프레임워크
Serialport : 프린트 하드웨어 간 인터페이싱
Web Socket : Smartro 결제 모듈 간 실시간 인터페이싱
Vite : 빠른 HMR(Hot Module Replacement)을 통해 쾌적한 개발 경험 제공
Pnpm : 디스크 공간 절약 및 의존성 관리 |
| 이슈 | - 팀원의 일정 파악을 위해 매번 물어봐가며 확인해야 했던 비효율적인 경험을 해결하기 위해 스크럼 형식으로 매일 오전 본인의 업무 작성을 Slack API 를 통해 요청하여 팀원의 업무 현황을 비동기적으로 파악 할 수 있도록 개선했습니다.
주로 사용하는 기술 스택은 React 였으나, 개인적으로는 키오스크 개발 경험이 없었고, 사내에서든 이미 Vue 로 개발된 소스가 있는 상황이었습니다. 또한 주어진 개발 기간을 고려했을 때, 기술 스택을 Vue로 가져가는게 좋을 것 같다는 판단에 과감히 Vue 로 개발을 진행했고, 초기 개발 시간이 발생하긴 했으나, 중복되는 코드는 모두 모듈화하여, 개발 시간을 단축했으며, 이런 과정들을 통해 모든 요구사항 기능들을 큰 문제 없이 구현할 수 있었습니다.
해당 프로젝트의 경우 우리 팀은 프론트엔드 개발만을 담당했습니다. 백엔드의 경우 다른 회사에서 개발을 진행하는 방식이었는데, 하나의 기획서를 보고 진행하지만, 프론트와 백엔드 개발자의 컨텍스트가 다르다보니, 오버페칭 상황이 발생했습니다. 이 문제를 해결하기 위해, 백엔드 개발자와 긴밀하게 협업을 진행할 수 있도록 주도적으로 노력했고, 해당 문제를 해결할 수 있었습니다. |
| 설명 | - 삼성물산 리조트 골프장 운영 관리를 위한 통계 데이터 시각화 시스템 개발
React (CSR) TypeScript Tailwind CSS Highcharts TanStack Query Zod Zustand Vite Framer Motion |
| 이슈 | - 초기 설계 단계부터 참여하지 않았고, 때문에 요구사항 이해도가 낮은 상태로 개발을 시작할 수 밖에 없었습니다. 이 때 각 화면에 대한 기능 리뷰를 요청하기에는 개발 기간이 촉박한 상황이었고, 그 상태로 각 화면의 역할 및 목표가 무엇인지 모르고 개발하다보니, 기능 개선 요청을 받았을 때 어느 범위까지 예외를 처리해야되는지 가늠이 되지 않았습니다. 이 문제는 개발 도중 추가적인 변경점이 발생했을 때 개발 소요 시간을 크게 증가시켰으며, 이 문제를 해결하기 위해 많은 고민을 했지만, 결국엔 질문을 통한 해소밖에는 답이 없었습니다. 이후 시간을 쪼개어 기획자와의 꾸준한 커뮤니케이션을 진행했고, 결국 성공적으로 프로젝트를 끝마칠 수 있었습니다. || 설명 | - VC 다양한 서비스 웹 애플리케이션의 유지보수 및 신규 기능 개발
팀 리더 부재로 인한 개발자 겸 팀 리더 역할 수행 | | --- | --- | | 기간 | 2022년 05월 ~ 2025년 04월 | | 주요 업무(기여도) | - 클라이언트와 직접 소통하며 팀 리딩 및 프로젝트 관리 그리고 개발 업무를 병행 (100%)
실내 골프장 매장 관리 웹 애플리케이션 유지보수 및 기능 고도화 (100%)
VC 디바이스 관리 데스크톱 애플리케이션 유지보수 (100%)
VC 오토핀 관리 웹 애플리케이션 유지보수 (100%)
VC 공통 서비스 관리 웹 애플리케이션 유지보수 (100%) |
| 기술 스택 | Vue.js 2 JavaScript Vuex Cypress Electron Express.js NestJS |
| 이슈 | - 팀 리딩을 처음 경험하며, 다수 인원(모바일/백엔드 개발 팀, 클라이언트)과의 협업과 프로젝트 관리에 어려움이 있었습니다. 이를 해결하고자 노션(테이블/타임라인 뷰) 도입과 개인 업무 관리 웹 애플리케이션을 활용했습니다. 결과적으로 개발 현황 및 이슈를 체계적으로 기록하여 관리 부담을 크게 줄일 수 있었습니다.
프로젝트를 진행하면서 가장 힘든 일은 협업이라 생각합니다. 개개인의 상황, 컨텍스트, 관점이 다르다보니 그 부분을 하나의 목표로 설득시키는 것은 쉽지 않았습니다. 저는 이 부분을 개선하기 위해 각 개인의 니즈와 컨텍스트를 면밀히 파악하기 시작했습니다. 그리고 팀원들에겐 최대한 업무에 몰입할 수 있는 환경을 만들어 주기 위해 노력했고, 클라이언트의 경우 빠른 이슈 대응과 주도적인 요구사항 정리를 통해 협업의 효율을 높였습니다. 그러다 보니, 협업이 한층 더 쾌적해졌음을 느낄 수 있었습니다. |