- 프론트엔드: HTML/CSS, JavaScript, TypeScript, React, Next.js, Vue.js, Sass, styled-components, Tailwind CSS
- 라이브러리: React Query, React Hook Form
- 협업 도구: Git, GitHub, Jira
- 디자인: Figma, Illustrator, Photoshop
- 배포: Vercel
- 기간: 2025.07 ~ 2026.02 (8개월)
- 직무: 프론트엔드 개발자 & UI/UX 디자이너
- 주요 성과:
- 키오스크 앱, 어드민 웹, 홈페이지 등 자사 서비스 전반의 UI/UX 디자인, 프론트엔드 개발 및 유지보수 담당
- 비활동 감지 스플래시 화면 기획·디자인·구현으로 주간 평균 거래 건수 50.8% 상승 기여
- 어드민 웹 대형 UI 라이브러리 제거 및 캐시 전략 개선으로 번들 크기 34% 감소 (2,751KB → 1,818KB), 로드 시간 32% 단축 (518ms → 352ms)
- NFC/바코드 리더기·카드 방출기·지폐 투입기 로직을 모듈화하고 주요 프로세스별 에러 처리 및 로그 컨텍스트를 세분화해 현장 원인 추적 속도 개선
- 기간: 2025.07 ~ 2026.02 (상시 업무)
- 설명: Vue 2.6 기반 키오스크 앱 프론트엔드 개발 및 유지보수
- 기술: JavaScript, Vue.js, Sass, Axios, Electron, Babel
- 주요 내용:
- 선불교통카드 발급·충전·환불·픽업 등 핵심 비즈니스 기능 구현
- NFC/바코드 리더기, 카드 방출기, 지폐 투입기 등 주요 하드웨어 로직 모듈화
- 빌드 크기 12% 감소 (81MB → 71MB)
- 폰트 프리로드 적용으로 구형 키오스크 메모리 피크 문제 해결
- 기간: 2026.02
- 설명: 비활동 상태 스플래시 화면 디자인·구현
- 주요 내용:
- 현장 직원 관찰 보고를 바탕으로, 키오스크 존재와 서비스를 인지하지 못해 그냥 지나치는 이용객이 많다는 원인을 파악
- 추가 비용 없이 가장 빠르게 적용 가능한 방향으로 스플래시 화면을 직접 기획·디자인·구현. 3m 밖에서도 인지 가능한 고채도·고대비 이미지와 서비스 소개 텍스트, 타 키오스크 서비스 벤치마킹 반영
- 비활동 감지 자동 표시, 5개 언어 선택, 이미지 슬라이드 구현
- 주간 평균 거래 건수 50.8% 상승
- 기간: 2026.01 ~ 2026.02
- 설명: Vue 3 + TypeScript + Vite 마이그레이션 및 리팩터링
- 기술: TypeScript, Vue.js, Tailwind CSS, Pinia, Vite, Electron
- 주요 내용:
- JavaScript → TypeScript 완전 전환으로 런타임 오류 예방 및 IDE 자동완성 지원
- FSD 아키텍처 도입으로 모놀리식 전역 로직을 도메인별로 분리, 모듈간 의존성 최소화
- Electron IPC 타입 안전 브리지 구현, 폴더 구조 기반 자동 라우팅 도입
- 웹소켓, 하드웨어, 로깅, API 등 주요 비즈니스 로직 모듈 리팩터링
- 기간: 2025.08 ~ 2026.02 (상시 업무)
- 설명: Vue 2.6 기반 어드민 웹페이지 디자인, 개발 및 유지보수
- 기술: JavaScript, Vue.js, Sass, Axios
- 주요 내용:
- 웹페이지 전체 리디자인
- Vuetify 등 대용량 라이브러리 제거로 번들 크기 34% 감소 (2,751KB → 1,818KB)
- 콘텐츠 해시 기반 캐시 전략 적용으로 로드 시간 32% 단축 (518ms → 352ms)
- 대규모 데이터(1,000건+) 필터링을 서버 측으로 전환해 클라이언트 부하 개선
- 기간: 2025.09 ~ 2026.02
- 설명: Next.js 15 기반 트립머니 홈페이지 디자인, 프론트엔드 개발 및 유지보수
- 기술: TypeScript, Next.js, Tailwind CSS, SWR, Zustand, Motion, Webpack
- 주요 내용:
- 카카오 맵 API 연동 키오스크 위치 찾기, 실시간 환율 계산기 구현
- 5개 언어 지원 (한국어·영어·일본어·중국어 간체·번체) 및 언어별 사이트맵 자동 생성
- SSR 및 서버-클라이언트 캐시 공유로 데이터 일관성 확보 및 초기 로드 속도 향상
- 라이트/다크 모드 지원
- 기간: 2025.11 ~ 진행 중
- 설명: Next.js 16 기반 개인 포트폴리오 & 블로그 웹사이트
- 기술: Next.js, TypeScript, Tailwind CSS, Zustand, Vitest, Turborepo
- 링크:
- 주요 내용:
- Turborepo 모노레포 구조 설계, 기능별 패키지 분리 (웹, MDX 처리, 타입 안전 라우트, 썸네일 생성, 공유 타입)
- 빌드 타임 콘텐츠 생성 및 SSG 렌더링으로 빠른 로딩 속도 확보
- Vitest + GitHub Actions 테스트 CI 구축, Codecov 연동으로 PR마다 커버리지 1% 이내 유지 강제 (커버리지 95%+)
- RSS 피드, 사이트맵, JSON-LD, 오픈그래프 제공
- 기간: 2025.07
- 설명: 키오스크 앱 UI/UX 전면 리디자인 및 디자인 시스템 구축
- 기술: Figma, Illustrator
- 주요 내용:
- 기존 다크 테마를 밝고 친화적인 색상 체계로 전면 리디자인, 5개 언어 전용 폰트 적용
- 컬러·폰트 디자인 토큰 정의, 컴포넌트 단위 디자인 시스템 구축
- 27인치 디스플레이 기준 최소 폰트 크기 24px, 주요 UI 명도 대비 3:1 준수해 접근성 확보
- 기간: 2024.05 ~ 2024.06
- 설명: 여행 계획을 쉽고 편하게 작성하고 공유할 수 있는 웹 플랫폼 (코드잇 부트캠프 팀 프로젝트)
- 기술: Next.js, TypeScript, Tailwind CSS, React Query, Google Maps
- 주요 내용:
- 핵심 기능을 포함해 전체 작업량 30% 이상 담당
- Next.js App Router SSR, React Query, TailwindCSS 등 핵심 기술 선행 학습 후 팀원 교육
- Jira Automation 도입으로 이슈 티켓 분류 자동화, 불필요한 진행도 확인 커뮤니케이션 제거
- 디자이너와 함께 개발자 친화적 디자인 구조 설계, 주요 컴포넌트 UI/UX 디자인 참여
- 기간: 2024.07 ~ 2025.02
- 설명: 기존 Trablock 프로젝트 리팩토링
- 기술: Next.js, TypeScript, Tailwind CSS, React Query, Google Maps
- 링크: GitHub
- 주요 내용:
- 백엔드 Redis 캐시에 맞춰 도메인별 데이터 캐시 시간 분리 (실시간·10분·1시간·백엔드 Redis 캐시 연동)
- SSR 전환으로 초기 렌더링 속도 개선, 레이아웃 시프트 최소화
- 반응형 레이아웃 및 모바일 터치 동작 호환성 개선
- 기간: 2023.12 ~ 2024.06 (수료)
- 기간: 2017.03 ~ 2024.02 (졸업)
- 전공: 디자인이노베이션, 소프트웨어
- 기간: 2012.03 ~ 2015.02 (졸업)
- 연도: 2023
- 내용: 평균의 함정을 경고하는 컨퍼런스 브랜딩 작품 및 소통의 암호와 해독을 주제로 한 미디어 작품 전시
- 연도: 2017
- 내용: 친환경과 재활용을 주제로 한 작품 전시 (2인 팀 참여)
- 전화번호: 010-8975-9268
- 이메일: jinhok96a@gmail.com