화면에 빈 공간이 보이면 불안했던 시절이 있었어요. 여백을 '구분선 없는 구분선'으로 바라보게 된 과정을 공유합니다.
허정연 · Heo JeongYeon
디자인과 코드를 잇는 프론트엔드 개발자
ABOUT
안녕하세요, 허정연입니다.
디자인을 전공하고, 직접 만들어보고 싶어서 개발을 시작했습니다.
React와 TypeScript 기반으로 웹 프론트엔드를 개발합니다.
2000.01.28
qazseeszaq3219@gmail.com
서울, 대한민국
SKILLS
Vue 3
React
TypeScript
JavaScript
Nuxt 3
Next.js
Electron
Redux
Styled-Components
Tailwind CSS
Ant Design
Storybook
Sass
Spring Boot / Java
Node.js
NestJS
PostgreSQL
WebSocket
Figma
Illustrator
Photoshop
Git
Docker / Nginx
AWS (S3, EC2)
Vite
Webpack
pnpm Workspaces
Vercel
Swagger / Postman
Jira / Notion / Slack
기술 스택
Vue 3ReactTypeScriptJavaScriptNuxt 3Next.jsElectronReduxStyled-ComponentsTailwind CSSAnt DesignStorybookSassSpring Boot / JavaNode.jsNestJSPostgreSQLWebSocketFigmaIllustratorPhotoshopGitDocker / NginxAWS (S3, EC2)ViteWebpackpnpm WorkspacesVercelSwagger / PostmanJira / Notion / SlackCLIENTS
함께한 기업
프리랜서로 직접 설계하고 만들어 실제 서비스에 올린 제품들입니다.
WinnTicket
공연·레저 티켓 예매
SnapClub
호주 포토부스 키오스크
통인익스프레스
태블릿 계약 관리
경력
윈앤티켓 (WinnTicket)
풀스택 엔지니어 (프리랜서)
공연·레저·숙박 등 다양한 티켓 상품을 판매·관리하는 올인원 티켓 커머스 플랫폼의 풀스택 개발을 담당했습니다. 쇼핑몰(고객용), 관리자 대시보드, 현장 관리자 시스템까지 3개 시스템을 단일 React 앱으로 설계·구현했습니다.
- 풀스택 개발 (팀 3명: 풀스택 1, 백엔드 2) — 쇼핑몰 + 관리자 + 현장관리자 3개 시스템을 단일 React 앱으로 설계·구현
- React.lazy + Suspense 코드 스플리팅 → 초기 번들 사이즈 42% 감소 (580KB → 336KB gzip)
- KCP PG 결제 연동 + 전액 포인트 결제 → 주문 완료 전환율 개선
- QR/바코드 기반 실시간 티켓 검증 — 현장 입장 처리 3초 이내
- RBAC 3단계 권한 분리 (관리자/현장관리자/파트너) + 라우트·API 이중 가드
- Spring Boot + MyBatis + PostgreSQL RESTful API 50+ 엔드포인트 설계·구현
SnapClub (호주)
풀스택 엔지니어 (프리랜서)
호주 멜버른 포토부스 브랜드의 레거시 WPF 시스템을 Electron + React + NestJS 기반으로 전면 리빌드했습니다. 부스 키오스크 앱, 관리자 대시보드, 백엔드 서버까지 pnpm 모노레포로 개발했습니다.
- 레거시 WPF 시스템 리버스 엔지니어링 → Electron + React + NestJS 풀 리빌드
- Canvas 기반 1200×1800px 인쇄 품질 사진 합성 엔진 — 10+ cutType 지원
- Canon EDSDK 카메라 + Nayax 결제기 + Sinfonia 프린터 하드웨어 연동 (C# 데몬 IPC)
- 15단계 세션 플로우 (대기→결제→촬영→편집→꾸미기→QR 다운로드)
- 17페이지 관리자 대시보드 — 매출 분석, 장치 원격 관리, 프레임 에디터, CMS
- pnpm 모노레포 + 공유 타입 패키지 → 프론트/백엔드 타입 안정성 확보
- 66개 테스트 케이스 (Vitest + Jest + Supertest)
통인익스프레스
프론트엔드 개발자 (프리랜서)
기존 오프라인 종이 계약 프로세스를 아이패드·태블릿 전용 웹앱으로 디지털 전환하는 프로젝트를 단독으로 개발했습니다. 계약 등록부터 전자서명, 진행 관리까지 전 과정을 실시간으로 연동했습니다.
- 프론트엔드 단독 개발 (팀: 백엔드 1, 프론트 1, 기획 1) — 오프라인 종이 계약 → 태블릿 웹앱 디지털 전환
- 전자서명 프로세스: SMS 계약서 링크 발송 → WebSocket 실시간 상태 업데이트
- 계약 CRUD + 실시간 상태 머신 (대기 → 서명중 → 완료 → 취소)
- 관리자 대시보드: 계약 현황 통계, 일별/월별 추이 차트, 서명 로그 추적
- 현장 계약 처리 시간 25분 → 10분 (60% 단축)
- 전자서명 완료율 52% → 87% (35%p 향상)
동훈아이텍 (Keyrke)
프론트엔드 개발자
보안 자산관리 솔루션 Keyrke의 프론트엔드를 혼자 맡아 개발하고 있습니다. 현대모비스, 현대오토에버, 현대케피코 등에 납품되어 실제 운영 중인 제품입니다.
- 프론트엔드 1인 전담 (팀: 백엔드 3, 프론트 1, PM 1) — 전체 UI 설계·구현·유지보수 책임
- 공통 컴포넌트 62종 + composable 시스템 구축 → 코드 재사용률 200% 향상, 신규 모듈 개발 속도 2배 단축
- 다중 조건 검색 + 태그 필터 엔진 구현 → 검색 응답 속도 30% 개선
- 수천 건 로그·인증 기록 대시보드 — lazy-load + 가상 스크롤 최적화로 60fps 유지
- 트리 구조 조직도 UI — 재귀 탐색·드래그앤드롭·다중 선택, 500+ 노드 안정 처리
- 현대모비스·현대오토에버·현대케피코 등 대기업 3곳+ 프로덕션 배포 운영 중
통인익스프레스
프론트엔드 개발자 (사내 근무 / 프리랜서)
처음에는 사내 웹 퍼블리셔로 근무하였고, 이후 외주 프리랜서로 전환하여 계약관리 시스템과 물류 서비스 웹 페이지 개발을 지속적으로 담당했습니다.
- 프론트엔드 단독 개발 (팀: 백엔드 1, 프론트 1, 기획 1) — 오프라인 종이 계약 → 태블릿 웹앱 디지털 전환 주도
- 아이패드 Pro 11" 기준 터치 중심 UX — 버튼 최소 44px, 스와이프 네비게이션, 반응형 레이아웃
- 전자서명 프로세스: SMS 계약서 링크 → WebSocket 실시간 상태 업데이트
- 현장 계약 처리 시간 평균 25분 → 10분 (60% 단축)
- 전자서명 완료율 기존 52% → 87% (35%p 향상)
- React + TypeScript 기반 상태 흐름 설계 및 API 모듈화
학력
한양여자대학교
2019.03 - 2021.02학사 · 시각미디어디자인과
시각디자인과 웹디자인을 배우면서 UI 감각을 익혔고, 졸업 후 프론트엔드 개발로 전향했습니다.
CLIENT WORK
외주 프로젝트
호주 포토부스 브랜드의 레거시 WPF 시스템을 Electron + React + NestJS로 풀 리빌드한 풀스택 키오스크 관리 시스템
SnapClub - 포토부스 키오스크 시스템
2026 · 풀스택 (프론트 + 서버 전담) — 2인 개발팀티켓·바우처 판매부터 현장 검증까지, 멀티채널 기반의 올인원 티켓 커머스 플랫폼
WinnTicket - 티켓 커머스 플랫폼
2026 · 풀스택 개발 - 3인 개발아이패드·태블릿 환경에 최적화된 계약 등록·전자서명·진행 관리 솔루션
통인익스프레스 계약 관리 시스템
2024 · 프론트엔드 단독 개발 (팀 3명: BE 1, FE 1, PM 1)보안 자산관리 솔루션의 프론트엔드 개발 전반을 담당
보안 자산관리 플랫폼 Keyrke
2023–2026 · 프론트엔드 1인 전담 (팀 5명: BE 3, FE 1, PM 1)PERSONAL
개인 프로젝트
React + Supabase 기반 포트폴리오. 관리자 페이지에서 모든 콘텐츠를 CRUD할 수 있는 미니 CMS로 발전했어요.
개인 포트폴리오 & CMS
2026 · 기획 · 디자인 · 개발 · 배포매일의 루틴을 관리하고 달성률을 추적하는 모바일 앱
데일리루틴 - 할일, 루틴 관리
2026 · Flutter 앱 개발 (개인 프로젝트)별도 앱 설치 없이 브라우저에서 바로 사진을 찍고 프레임을 입혀 저장할 수 있는 웹 포토부스
Boothly — 웹 포토부스 서비스
2026 · 1인 풀스택 개발 (기획 · 디자인 · 개발 · 배포)말 한마디로 청년 지원금·정책·훈련·임대공고를 찾아주는 카카오톡 AI(MCP) 서버
청년줍줍 - 청년 정책 카카오톡 AI 검색 MCP 서버
2026 · Developer (Solo)링크 하나로 친구를 초대해 실시간으로 타이핑 속도를 겨루는 멀티플레이 레트로 타자 대결 게임
Typing Battle - 실시간 타자 대결 게임
2026 · 1인 풀스택 (프론트 + 백엔드 + AWS 배포)방 코드로 친구를 초대해 상대방의 비밀 숫자를 추리하는 실시간 멀티플레이 숫자야구 웹 게임
숫자야구 - 실시간 2인 대전 숫자 추리 게임
2026 · 1인 풀스택 (프론트 + 백엔드 + AWS 배포)BLOG
블로그
매번 눈으로 보면서 색을 고르다가 화면마다 미묘하게 다른 회색이 쓰이게 됐어요. 색상을 시스템으로 전환한 경험을 공유합니다.
색을 고르는 건 감각이 아니라 시스템이에요
디자인 · 2026-05-15포트폴리오 히어로 파티클 애니메이션을 만들면서 고민한 인터랙션 철학과 기능적/표현적 애니메이션의 차이를 정리했어요.
애니메이션을 넣기 전에 물어봐야 할 한 가지 — '이걸 빼면 뭘 잃는가'
디자인 · 2026-05-10디자인을 하던 시절의 감각과 개발자로서의 구조적 사고가 만났을 때, UI를 만드는 방식이 어떻게 달라졌는지를 이야기합니다.
디자이너에서 개발자로 — UI를 바라보는 시선이 달라진 순간
디자인 · 2026-05-05시각적으로 만족스러운 상품 페이지에서 구매 버튼을 못 찾는 문제를 겪고 나서, 화면 설계의 첫 질문을 바꾼 경험을 공유합니다.
사용자는 '예쁜 화면'이 아니라 '다음에 뭘 해야 하는지'를 원해요
디자인 · 2026-04-28정적 파일로 시작한 포트폴리오가 Supabase + 관리자 페이지까지 갖추게 된 과정을 기록했어요.
포트폴리오를 만들다 어드민 페이지까지 만들게 된 이유
개발 일지 · 2026-04-1773개의 페이지 파일이 뒤섞인 구조를 도메인 기반으로 재편하고, React.lazy + Suspense로 초기 번들을 79% 줄인 경험을 공유합니다.
React 페이지 구조 리팩토링과 코드 스플리팅 적용 경험
개발 · 2026-04-07여러 독립 모듈이 공존하는 대시보드를 메타 데이터 기반 동적 렌더링과 공통 상태 관리로 구조화한 경험을 공유합니다.
모듈형 대시보드 위젯 시스템
개발 · 2026-01-15API가 배열을 바로 반환하는데 response.data.content로 접근하면 undefined가 됩니다. 그 undefined가 useMemo까지 전파되어 크래시를 일으킨 과정을 기록했습니다.
API 응답 형식 불일치와 useMemo 크래시 — undefined는 조용히 퍼져요
개발 · 2025-12-10OPEN SOURCE
컴포넌트 라이브러리
개발자를 위한 아름답고 접근성 높은 React 컴포넌트 라이브러리
Awesome UI Kit
UI 컴포넌트 - - 1
8가지 핵심 데이터 컴포넌트를 제공하는 전문 React 라이브러리
Data UI Kit
데이터 시각화 - - 1
연락하기
무엇이 궁금하신가요?
안녕하세요! 궁금한 것을 선택해주세요 😊