GEON
CAREER
프론트엔드 개발자
2025.07 - 현재
Purple Young
성형 정보 플랫폼(2026.01 런칭, 누적 회원 15,000). 서비스 본체는 앱이며, 병원(파트너) 웹·자사 어드민·랜딩 웹 등 웹 전반을 1인으로 초기 구축부터 런칭까지 주도.
🏆 입사 6개월 만에 사원 → 대리 조기 진급
KEY ACHIEVEMENTS
협업 · 운영 자율화
- •약관 페이지 내재화 — Notion API + Next.js ISR 기반 정적 렌더링으로 Lighthouse 57 → 88점, LCP 80% 단축(11.5s → 2.3s). 운영팀은 Notion에서 그대로 작성, 약관 수정 시 개발 배포 0회.
- •GTM 이벤트 추적 관리 시스템 — data-track 선언적 부착 + 도메인별 TS 레지스트리로 이벤트 중앙화, GTM API 서버 액션 호출 관리 페이지 구현. 비개발자가 배포 없이 이벤트 ON/OFF.
- •운영자용 앱 온보딩 가이드 관리 기능 개발 — 기존 어드민 컴포넌트를 재활용해 디자인 리소스 없이 구현.
AI 활용
- •AI 개발 워크플로우 구축 및 사내 전파 — 사내 컨벤션 맞춤 Claude Skill 자체 구축, figma-design-validator → figma-to-purple-ui → figma-visual-diff 검증 파이프라인 설계. UI·디자인 반영 수일 → 수시간 단축.
- •디자이너용 Figma 사내 AI 플러그인 — 별도 IDE·MCP 설정 없이 Figma 안에서 디자인 검토·UI 구현 요청 수행. Gemini PoC → Codex CLI + 로컬 브릿지 연동으로 전환.
기술 · 시스템 설계
- •디자인 시스템 모노레포 — Turborepo + pnpm workspace에 21종 공통 컴포넌트(CSS Modules)·Storybook 카탈로그 구축. Style Dictionary로 Figma 토큰 JSON → CSS Variables·JS 상수 자동 변환, GitHub Packages 자동 배포. 공통 UI 수정 포인트 3곳 → 1곳.
- •병원 파트너 정보 변경 승인 검수 화면 개발 — 의료진·라이선스·영업시간 등 다중 필드의 변경 전/후 비교 UI 구현.
리딩 · 프로덕트 오너십
- •신규 채용 웹 프로젝트 TF 리딩 — 신입 기획자·디자이너와 3인 TF 구성, 기획~임직원 인터뷰~프론트엔드 개발 총괄. AI로 약 9종 웹 프로토타입 제작, 자체 채용 파이프라인 MVP 완성.
- •B2B 파트너 웹·사내 매니저 어드민·공식 웹사이트 단독 런칭 — 초기 세팅부터 오픈까지 주도, AI 기본법·워터마크 API 등 정책·보안 요구 신속 반영.
- •모바일 앱 핵심 화면 개발 — 플랜 생성 가이드·마이페이지·본인 인증 등 웹/어드민 외 앱까지 출시 범위 확장.
프론트엔드 개발
2023.04 - 2024.09
Playdonut
PC방 런처 기반 e스포츠 토너먼트 플랫폼. 서비스 프론트엔드 개발과 레거시 어드민 마이그레이션 담당.
KEY ACHIEVEMENTS
레거시 어드민 모던 프론트엔드 현대화
- •레거시 템플릿 엔진(Trimou)을 Next.js 12(Page Router)로 전면 재구축.
- •TanStack Query(서버 상태)와 Zustand(클라이언트 상태)로 데이터 관심사 분리 및 패턴 일관화.
- •신규 기능 배포 주기 단축, SPA 라우팅·상태 캐싱으로 어드민 체감 로딩(LCP) 및 사용 부서 업무 효율 개선.
주요 수행 업무
- •e스포츠 관련 토너먼트 플랫폼 개발
- •PC방 사용자의 활동을 추적하는 웹 MVP 개발
- •PC방 런처 어드민 페이지 신규 개발 및 유지보수
- •포트폴리오 웹 퍼블리싱 및 유지보수 전담
프로젝트 매니저
2021.05 - 2022.04
IGS
넷마블 게임을 주축으로 다양한 게임사의 운영, CS, QA 서비스를 제공하는 게임 서비스 전문 기업
KEY ACHIEVEMENTS
주요 수행 업무
- •프로젝트 일정 및 담당자 업무 관리
- •데이터 및 VOC 기반 이벤트 / 콘텐츠 기획 및 제안
- •웹 콘텐츠 기획 및 관리
- •커뮤니티 및 인게임 데이터, 유저 지표 분석을 통한 인사이트 도출
- •데이터 지표 기반 게임 내/외 개선 및 전략 수립
PROJECTS
Technologies
Work
- •웹 전반 Full-Cycle 주도 백엔드·인프라·기획과 일정을 조율해 파트너 웹·매니저 어드민·공식 웹사이트를 초기 세팅부터 오픈까지 주도, AI 기본법·워터마크 API 등 정책·보안 요구 신속 반영
- •약관 페이지 내재화 — Lighthouse 57 → 88점 Notion API + Next.js ISR 기반 정적 렌더링으로 약관을 서비스 내부에 통합. 운영팀은 Notion에서 그대로 작성, 약관 수정 시 개발 배포 0회
- •GTM 이벤트 추적 관리 시스템 data-track 선언적 부착 + 도메인별 TS 레지스트리로 이벤트 중앙화, GTM API 서버 액션 호출 관리 페이지 구현. 비개발자가 배포 없이 이벤트 ON/OFF
- •운영자용 관리 화면 구현 병원 파트너 정보 변경 승인 검수(다중 필드 전/후 비교 UI)와 앱 온보딩 가이드 관리 기능을, 기존 어드민 컴포넌트를 재활용해 디자인 리소스 없이 구현
- •모바일 앱 핵심 화면 개발 플랜 생성 가이드·마이페이지(개인정보 조회/수정)·본인 인증 등, 웹/어드민 외 앱까지 출시 범위 확장
약관 페이지 외부 Notion 이탈 및 성능 저하
고객·고객사 약관이 외부 Notion 페이지로 운영돼 서비스 밖으로 퍼널 이탈하고, Notion 특유의 느린 초기 로딩으로 UX 저하
UI 변경에 따른 잦은 API 수정 및 배포 병목 현상
기존 API 응답 구조에 UI가 강하게 결합되어 있어, 화면 변경 시 서버 배포가 동반되어야 하는 비효율 발생
미디어 로딩 병목 및 모바일 iOS 동영상 이슈
랜딩의 고용량 GIF(100MB 이상)로 인한 LCP 렌더링 저하 및 iOS Safari 영상 자동 재생 차단 현상
Technologies
Work
- •TF 리더로서 기획~런칭 A to Z 총괄 신입 기획자·디자이너와 3인 TF를 구성하여, 프로젝트 기획·임직원 인터뷰·콘텐츠 구조화부터 프론트엔드 개발까지 총괄
- •AI 프로토타이핑을 통한 의사결정 가속화 AI로 약 9종 웹 프로토타입을 제작하여, 추상적인 브랜딩 논의를 빠르게 수렴시키는 의사결정 기준 제시
- •지원자 웹 및 관리자 웹 단독 구축 직군별 공고 필터·다단계 지원 폼을 갖춘 지원자 웹과, 공고 CRUD·지원자 관리 기능의 관리자 웹을 단독 개발
- •히어로 영상 AI 제작 채용 페이지 히어로 영상을 AI(veo3.1)로 직접 제작하여 디자인 리소스 절감
채용 브랜딩 부재 및 외부 플랫폼 의존 탈피
자체 채용 브랜딩 경험과 공고/지원 시스템이 부재하여 외부 채용 플랫폼에 의존 중이었음
- 기획·디자인 경험이 적은 신입 멤버와 약결합 TF로 신규 시스템을 구축해야 하는 상황
Technologies
Work
- •Turborepo + pnpm workspace 모노레포 구축 21종 공통 컴포넌트(CSS Modules)와 Storybook 카탈로그 구축
- •Figma 토큰 자동 변환 파이프라인 Style Dictionary로 Figma 토큰 JSON → CSS Variables·JS 상수 자동 변환, main 머지 시 GitHub Packages 자동 배포(CI/CD)
- •AI 에이전트 연동 자동화 파이프라인 구축 사내 컨벤션 맞춤 Claude Skill 자체 구축, figma-design-validator → figma-to-purple-ui → figma-visual-diff 검증 파이프라인 설계
- •디자이너용 Figma 사내 AI 플러그인 별도 IDE·MCP 설정 없이 Figma 안에서 디자인 검토·UI 구현 요청 수행. Gemini PoC → Codex CLI + 로컬 브릿지 연동으로 전환
- •점진적 레거시 마이그레이션 전략 적용 '2개 프로젝트에서 반복될 때만 공용 승격' 거버넌스로 조기 추상화 방지, Strangler Fig 패턴 도입
3개 프로덕트 간 공통 컴포넌트·토큰 중복 정의
서비스·파트너·어드민 3개 프로젝트에 공통 컴포넌트·디자인 토큰이 중복 정의돼, 디자인 변경 시 3곳을 각각 수정해야 하고 Figma→코드 핸드오프에서 토큰 불일치가 잦음
디자인-개발 간 싱크로율 저하 및 반복 구현의 비효율
다수의 웹/어드민 프로젝트를 1인이 병행하며 UI 구현·디자인 검수·기획 변경 대응에 반복적인 수작업 비용이 큼
레거시 시스템의 급격한 디자인 전환 리스크
기존 운영 중인 프로덕트에 신규 디자인 시스템을 일괄 적용 시 발생할 수 있는 런타임 에러 우려
Technologies
Work
- •이틀 만에 기획 → 설계 → 배포 완주 PRD·도메인 용어집·ADR 10건으로 설계 근거를 먼저 세운 뒤, 이슈 기반 PR 워크플로로 MVP 완성
- •지원 파이프라인 칸반 드래그앤드롭으로 단계를 옮기고, 단계 전환 로그를 근거로 체류 일수와 팔로업 필요 배지를 자동 계산
- •지원 시점 기록 보존 마감되면 사라지는 공고 원문을 스냅샷으로 남기고, 이력서 버전과 면접 질문을 지원 건에 연결해 다음 면접 자산으로 축적
- •전환율 대시보드 + ICS 캘린더 피드 단계별 전환율·체류 일수를 시각화, 다음 액션을 HMAC 토큰 인증 ICS 피드로 캘린더에 구독
탈락을 칸반 컬럼으로 두면 '어디서 떨어졌는지'가 소실된다
탈락을 진행 단계의 하나로 모델링하면 구현은 단순하지만, 어느 단계에서 종료됐는지가 사라져 병목 분석 자체가 성립하지 않음
개인 도구를 공개 가입 오픈 서비스로 전환
'회원가입 없음'이 의도된 설계였던 탓에 소유자 컬럼도 유저 필터도 전무한 상태에서 공개 전환이 필요했음 — 핵심은 가입 폼이 아니라 데이터 소유권 모델 도입
Technologies
Work
- •초대 기반 공유 캘린더·기록 구현 관계 단위로 초대한 구성원이 같은 캘린더에 일정과 기록을 남기고, 활동이 서로에게 전파되는 구조 설계
- •크로스 플랫폼 모바일 앱 개발 Flutter로 단일 코드베이스 모바일 앱 개발
- •RTR(Refresh Token Rotation) 구현 RT 탈취 시 장기간 악용에 대한 보안 강화
Technologies
Work
- •레거시 대회 어드민 Next.js 전면 재구축 Trimou 템플릿 엔진 기반 어드민을 Next.js 12로 재구축, TanStack Query(서버 상태)와 Zustand(클라이언트 상태)로 관심사 분리
- •토너먼트 서비스 웹 개발 카카오·로컬 소셜 로그인(Passport)과 RSO(Riot Sign On) 연동으로 게임 계정 인증, 기브어웨이 즉시추첨·PC방 전광판 구현
- •PC방 런처 어드민 신규 구축 Next.js 14·Valtio 기반으로 신규 런처 관리 웹을 개발, NextAuth 인증과 Zeplin 시안 반응형 퍼블리싱 담당
- •QA 이슈 관리 프로세스 운영 JIRA 기반으로 QA 이슈를 체계화해 버그 해결 프로세스 효율화
프론트엔드 현대화: Trimou에서 Next.js 기반 아키텍처로 전환
기존 Trimou 시스템의 구조적 한계로 인한 유지보수성 및 확장성 저하, 개발 속도 지연 발생
Valtio를 활용한 전역 상태 관리 시스템 구축 및 아키텍처 최적화
컴포넌트 계층 구조가 깊어짐에 따라 상태를 전달하는 prop drilling이 빈번히 발생
- 컴포넌트 간 의존성↑ 유지보수와 재사용성↓
SKILLS
Front-End
COREState & Data
COREDesign System
Purple UI — 사내 디자인 시스템 모노레포Backend & Infra
JobLog · DayShare — 개인 프로젝트에서 직접 구축AI & DX
사내 AI 개발 워크플로우 구축 및 전파ABOUT
Phantom Fear
“공포의 허상”
삶을 대하는 태도가 무거워질 때면, 보이지 않는 저편에서 '두려움'이라는 이름의 파도가 우리를 덮칠 듯 다가옵니다. 여유가 부족한 순간에는 스스로 만들어낸 공포에 휘둘리며 멈춰 서기도 하지요.
저 또한 두려움과 후회의 늪에 빠져, 아무것도 할 수 없다는 주문을 스스로에게 걸며 한동안 주저앉아 있었습니다.
그러다 문득 '두려움은 허상일 뿐'이고, 우리는 그저 찰나의 순간을 지나가고 있다는 사실을 깨달았습니다. 그 순간 저는 자유로움을 느꼈습니다.
Awareness
“알아차림”
심리학자들은 우리가 현재를 겨우 2~3초만 인지할 수 있다고 말합니다. 그 짧고도 짧은 시간이 지나면 심리적으로는 과거가 되어버리는 것이지요. 테세우스의 배처럼 우리 몸을 이루는 세포도 끊임없이 교체되기에, '지난 나'가 진정한 '나'인지도 확신할 수 없습니다. 결국 확신할 수 있는 것은 이 순간, 이 찰나뿐 일지도 모르겠습니다.
그래서 저는 이 찰나를, 아주 잠깐의 현재를 온전히 살아가는 데에 집중하고자 노력했습니다. 매일 절반 이상을 보내는 직장을 단순한 수입수단으로만 여기지 않고, 진심으로 좋아하는 일을 하기로 결심했습니다.
독서와 글쓰기를 즐기며, 눈에 보이는 기록과 성과에서 만족을 얻는 제게 개발은 아주 자연스러운 선택이었습니다. 독학으로 시작해 회사에서 실제 프로젝트를 경험하며 개발자로서 성장할 수 있었고, 이직을 한 후에는 저의 인사이트를 팀원들과 나누며 자연스럽게 빠른 진급도 할 수 있었습니다.
개발은 더 이상 단순 수입수단이 아니라, 저의 세계를 펼칠 수 있는 팔레트이며 세상과 연결될 수 있는 창구가 되었습니다.
Breakthrough
“도약”
지난 3년, 스타트업의 웹 전반을 혼자 맡아 초기 구축부터 런칭까지 끌고 왔습니다. 그 과정에서 가장 몰두한 일은 화려한 화면이 아니라, 운영하는 사람들의 반복 업무를 코드 밖으로 빼내는 일이었습니다. 매번 개발자를 거쳐야 하던 것들이 배포 없이 스스로 굴러가게 될 때, 개발이 비즈니스에 닿는다고 느낍니다.
요즘은 AI와 함께 일하는 방식을 만들어 팀에 심고, 퇴근 후에는 의류 브랜드의 커머스를 도메인 설계부터 결제까지 직접 만들고 있습니다. 화면 너머의 도메인을 이해하는 개발자가 되고 싶어서입니다.
끊임없이 배우고 유연한 자세로 수용하며, 팀과 사용자에게 편안함을 주는 제품을 손수 만들어가겠습니다. 적응과 알아차림을 딛고, 이제는 도약의 과정에서 함께하고 싶습니다.