파이Full-stack UX Engineer

INTRODUCE

서비스의 전 생애주기를 — 혼자서도, 조직으로도

처음 프로그래밍에 발을 들인 건 2004년이었습니다.
꾸준히 배우고 상용 서비스를 납품하기 시작한 2015년부터 커리어의 절반 이상을 제품을 만드는 메이커와 기술 조직의 리드로서 일해 온 12년차 엔지니어입니다.

컴퓨터공학·시각디자인 복수전공을 바탕으로 기술과 사용자 경험의 언어를 모두 사용합니다.
작은 외주 프로젝트부터 수천 명이 접속하는 시스템, 전 세계 수백만 명이 사용하는 서비스까지 다양한 규모의 시스템과 함께 성장했으며, 스타트업과 디자인 전문 회사 CTO로서 엔지니어의 채용·평가·프로세스를 만들며 조직을 키웠고, 금융권 대규모 디지털채널 운영과 전사적 앱 UX 전환 프로젝트를 이끌었습니다.
동시에 사이드 프로젝트로 시작한 서비스를 창업과 재도전을 거쳐 양대 스토어 출시까지 직접 끌고 간 현역 개발자로, 기획과 디자인, 설계와 개발, 배포와 운영, 장애 분석 및 해결까지 서비스의 전 생애주기를 손에서 놓지 않았습니다.

구현은 AI와 함께 하는 시대가 왔습니다.
그래서 코드를 짜는 것뿐만 아니라 더 중요해진 것은 프로세스를 구축하고, 방향을 제시하고, 의사결정을 내리고, 구조를 이해하고 관리하는 것이라고 믿습니다.
제품을 만들 줄 아는 리더로서 AI를 실서비스와 팀 워크플로우에 녹여내는 데 깊이 집중하고 있습니다.

ACHIEVEMENT

금융 슈퍼앱 디자인 시스템 — 설계에서 수천 개 화면에 적용까지
공통 컴포넌트 가이드와 디자인 시스템 배포 사이트를 선행 구축한 뒤, 원앱 구축과 금융사 화면 3,000여 개 전환에 전면 적용해 3단계 오픈으로 완주
웹 접근성 — 인증 심사 통과, 그리고 검사 도구 제작
KS X 3253(모바일 앱 접근성 2.0) 인증 심사 대응 통과. WCAG 2.1 판정 규칙 140여 개를 데이터셋으로 설계하고(2021) 위반 지점의 코드 스니펫·화면 캡처를 함께 제시하는 리포트를 구축
중단을 재도전으로 — 커뮤니티 서비스 '쿠랑', 기획부터 운영까지
2026.07 iOS·Android 정식 출시. Next.js 15·MongoDB·Socket.IO 위에 Terraform IaC와 Blue-Green 무중단 배포를 얹고, 테스트를 0에서 600여 개로
신규 SaaS 제품 '뷰저블 애널리틱스' FE 런칭 — 오픈베타에서 정식 출시까지
오픈베타(2020) 빌드·QA를 주도해 2021.03 정식 출시. 수억 행 분석 데이터를 out-of-core 파이프라인(VAEX/HDF5)으로 집계하고 SVG 인터랙션으로 시각화
UX·기술 조직 리드 — 채용부터 온보딩, 그리고 성장까지
대형 금융사 디지털채널 20여 개·화면 5,000여 개, 월 1,000건 이상의 요청을 처리하는 UX 조직을 3년 넘게 리드. 전사 수십 명 대상 인사평가 등급 체계를 설계하고 채용 챌린지·면접·온보딩 전 사이클을 운영. 앞서 니어클에서는 공동 창업자·CTO로 개발팀을 꾸려 웹·iOS·Android 3플랫폼을 동시 런칭
장애는 체계로 막는다 — 원인을 끝까지 추적한 기록
한 달간 91초마다 죽던 서버 · 인증 도입으로 파손된 실시간 채팅 · 주말 아침 앱 메인이 백지가 됐을 때 · WebView 보안 취약점 긴급 차단 — 추적 과정은 경력기술서에서 확인하세요.

EDUCATION, etc.

경희대학교 컴퓨터공학과·시각디자인학과 복수전공 졸업: · 2014.03 ~ 2023.02
한국어(모국어) · 영어: · 기술 문서 독해·작성 가능, 회화 기초

SKILLS

주력경험

LanguageTypeScript/JavaScriptPHPPythonSwiftKotlinJavaC++

Front-endReactNext.jsVueNuxtStorybookHTMLSCSS/SASSAstroThree.js(R3F)jQuery

Back-endNode.jsExpressSocket.IOLaravelMongoDBMySQL/MariaDBFastAPIFlaskSQLiteFirebaseVAEX(HDF5)XEWordPress

Infrastructure · DevOpsAWSGCPTerraform(IaC)Linux(RHEL, CentOS, Amazon Linux, Ubuntu)PM2ApachenginxDockerVercelOpenTelemetryGrafanaGA4재해복구(RTO/RPO) 설계

QC · SecurityJestPlaywrightWeb AccessibilityWeb StandardsOCRPuppeteer/Headless ChromeCVE 분석·대응

Issue Tracking · Documentation · Version ControlConfluenceJiraNotionGitHubGitLabBitbucketarc42SVN

AILLM API 통합(Claude·OpenAI·Gemini)Local LLM 서빙MCPAI 에이전트 워크플로우Vertex AIComfyUIYOLO

UX/UI Design디자인 시스템FigmaSketchZeplinAdobe XDAdobe IllustratorAdobe PhotoshopAdobe LightroomAdobe InDesign

— 새로운 기술에 대한 탐구는 언제나 환영입니다

TIMELINE

2012

수락고등학교 학생자치회장 · 2011 ~ 2012

학생회 홈페이지·온라인 소리함 개발 · 2011

2013

멘사 · 2013 ~

정회원

2014

경희대학교 컴퓨터공학과 동아리 T.G.WinG · 2014 ~

CI 디자인 · 2015
교육부장 · 2015
회장 · 2017

2015

프리랜서 외주 · 2015 ~ 2017

커피 브랜드 쇼핑몰 구축 · 2015
사진 스튜디오 홈페이지 제작 · 2015
기사협동조합 배달 앱 제작 · 2016
경희대 로봇공학연구실 홈페이지 · 2016
사진 스튜디오 홈페이지 유지보수 · 2015 ~ 2017

경희대학교 중앙IT동아리 KHLUG(쿠러그) · 2015 ~

CI 디자인·홍보물 디자인 · 2015 ~
전산시스템 구축 · 2015
회장 · 2015
경희대 해커톤 khuthon 전산 구축 · 2016
UX/디자인 파트장 · 2016 ~ 2017
홍보·전산 담당자 · 2017 ~ 2022
경희대 SW페스티벌 사이트 구축 · 2020

경희대 봄 프로그래밍 경시대회 · 경기남부 4개 대학 연합 프로그래밍 경시대회 · 2015

경희대 1위

2017

경희대학교 중앙동아리연합회 · 2017

서버·전산 시스템 구축 (12,000여 명 대상)

2018

(주)대학라이프 → (주)오드포인트 / 개발·디자인 팀장 · 2018.01 ~ 2019.06, 이후 종종 협업

대학 시절 사이드 프로젝트였던 '쿠랑'에서 출발해 법인 설립과 함께 합류한 창업 여정입니다.
'쿠랑'은 재직 종료 후에도 서비스를 놓지 않고 완전 재개발과 2026년 앱 정식 출시까지 이어 왔습니다.

쿠랑 커뮤니티 서비스 기획·디자인·풀스택 개발 총괄
정부·공공 프로젝트: 국립재활병원 근접오류 전산보고 시스템(기획·디자인·개발·서버 운영 전 과정 단독), 아시안게임 선수단 결단식(국무조정실)·바다의 날 기념식(해양수산부) 디자인 등
기업 홈페이지·전산 외주 개발(PHP Laravel, MySQL, CentOS): 특허법인·사진 스튜디오 등
디자인: 대학병원·카메라 브랜드 클래스, 러닝 행사 부스·포스터, 명함 제작 등
브랜드 아이덴티티 개발: 대학라이프·픽스도(PIXDO)·오드포인트 CI, 쿠랑 BI 등 / 회사 인프라(GCP·도메인·메일) 직접 구축

2019

(주)포그리트 / 소프트웨어 엔지니어 · 2019.07 ~ 2021.12 · 2022.05 ~ 09

UX 히트맵 분석 툴 '뷰저블'과 고객 여정 애널리틱스 '뷰저블 애널리틱스' 개발사입니다.
재직 당시 글로벌 전자 기업·카드사 등이 도입했고, 일본·싱가포르 등 해외 진출을 이루어냈습니다.

신규 제품 '뷰저블 애널리틱스(BA)' FE 런칭 총괄, BE 보조: 오픈베타 빌드·QA(2020) 주도를 거쳐 2021.03 정식 출시 (결제·PV 과금·다국어·차트 등)
웹 접근성 검사 도구 리아키텍처 주도: 렌더러 재설계, 이미지 렌더링 큐 분리·S3 전환, 엑셀 파싱 모듈화, WCAG 2.1 체계 반영·OCR 도입, 리뷰 시스템 분리
뷰저블 FE 개선 및 엔터프라이즈 전용 뷰저블 FE·API 구축: 인증·회원/페이지 관리·IP 차단·국가코드/타임존·메일러·퍼널 등
BA 서베이 도구 FE 전담: 설문 생성/결과(엑셀·PDF 추출), 마케팅 세그먼트 리포트, 다국어
신규 어드민 도구 API·FE·문서화 구축 / 뷰저블 다국어 공식 홈 제작·오픈 / 웹 접근성 개선 및 검수 지원 다수

쿠랑 · 2018 ~

과거 오픈했던 경희대학교 커뮤니티 서비스를 완전히 새로 개발해 2026.07 iOS·Android 재오픈했습니다.

재학생 34,000여 명 규모를 대상으로 Next.js+MongoDB+Socket.IO 기반의 실시간 채팅 서비스와 iOS/Android 앱 구축
AI 기능 실서비스 적용: LLM 기반 콘텐츠 자동 생성(게시글 작성, 공지 요약) 기능, 콘텐츠 모더레이션 파이프라인
GCP 인프라 Terraform 코드화(IaC), Blue-Green 무중단 배포 자동 롤백, OpenTelemetry·Grafana·GA4 관측성, 아키텍처·런북·재해복구 계획(RTO/RPO) 문서화
테스트 600여 개(단위→컴포넌트→통합) + Playwright E2E, PII 필드 암호화, CVE 실효 위험 기반 대응
광고 슬롯 시스템 기획·설계: 노출 정책, 타겟팅 통계, CPM/CPC 과금, 표시광고법 라벨 대응

2022

(주)니어클 / CTO · 개발 총괄 · 2022.05 ~ 2023.03

2020.12 사이드 프로젝트 시기부터 참여해 설계·인프라·협업 체계를 셋업했고, 2022.05 창업 시 정식 합류했습니다.
번역 기능을 갖춘 소셜 커뮤니티 서비스 스타트업으로, 서비스는 이후 종료되었습니다.

개발팀 3명(FE·BE·풀스택)을 CTO로서 총괄하며 웹·모바일 앱(React FE·Node.js API·iOS/Android) 서비스 런칭: Google Play 출시(2022.01)·App Store 출시(2022.07)
연예인 팬덤 기반 커뮤니티에서 2023년 '도슨트'(지도 기반 관광 안내)로 서비스 피벗 - 지도·결제 기능 개발 리드
AWS EC2 기반 6개 서버(서비스·어드민·번역·스케줄러) 실서버/스테이징 분리 운영 인프라 설계·구축
개발 프로세스 정립: Git 브랜치 전략, PR 리뷰, Jira 이슈 관리, 코드 컨벤션, 주간 스크럼, 채용·온보딩 체계

2023

(주)리즌디자인 / CTO(비등기이사) · PM · 2022.12 ~ 2023.01 · 2023.03 ~

기술 자문으로 시작해, 2023.03부터 정규 임원으로 합류했습니다.
앱·웹·금융 UX 전문 디자인 회사에서 대형 금융사 디지털채널 운영과 금융 슈퍼앱 전환 프로젝트의 관리를 총괄했으며 기술 조직을 운영하고 있습니다.

기술 조직 리드: 인사평가 체계(A~F 등급·리더 평가) 수립, 연봉 협상·1:1 면담, 퍼블리셔·개발자 채용의 공고·챌린지·면접·온보딩 전 사이클 운영
사내 기술 문화: 신입이 채용 챌린지로 들어와 팀 스터디에서 성장하고, 전체개발자회의에서 라이트닝 토크로 발표하고, 그 자료가 교육 자료로 자산화되는 성장 루프 설계·운영
대형 금융사 디지털채널 운영: 20여 개 채널·5,000여 개 화면을 대상으로 월 1,000건 이상의 요청을 처리하는 조직을 3년 이상 연속 리드 - 업무 프로세스·리포팅·긴급 대응 체계를 설계하고 기획·디자인·퍼블리싱 파트 총괄 및 산출물 품질 관리 프로세스 구축
금융 슈퍼앱 전환 3부작 지원: 원앱 UX 선행(공통 컴포넌트 20여 종·인터랙션·접근성 디자인 가이드라인 + PHP 기반 디자인 시스템 배포 사이트 구축) 후, 원앱 구축(선행 가이드 전체 적용)과 금융사 화면 3천여 개 전면 개편(JSP→Vue)을 병행 수행
운영 배포·장애 대응: WCMS/개발자 반영 이중 배포 트랙(테스트→검증→운영 3단계) 관리, 대형 오픈 새벽 배포 지휘, 사고 이력화·연휴 배포 리스크 관리·정기 보안 점검 프로세스 운영
클라이언트 커뮤니케이션: 보고 리드, 수주 제안서 제작 리드 및 제안발표회 발표, 제품 품질 개선 전략 수립·발표
생성형 AI 도입 리드: 사내 세미나 주최를 시작으로 상용 AI 도입 적극 추진, 로컬 LLM을 활용한 사내 서비스 개발, 외주 AI PoC 등 프로젝트 기술 검토 및 협업 진행, 보안망 환경의 AI 활용 방안 수립

경희대학교 컴퓨터공학과 졸업 · 2023.02

졸업 논문: YOLOv5 실시간 객체 검출 최적화 연구 - 한국소프트웨어종합학술대회(KSC2022) 포스터 발표

경희대학교 시각디자인학과 졸업 · 2023.02

졸업 전시: 당근피크닉, 팬덤 - 전시 홈페이지 제작

현재

— 아래 경력기술서에서 더 자세히 살펴보실 수 있습니다

MORE PROJECTS

The Bakery (manapie.me) · 2026
React Three Fiber를 활용한 인터랙티브 3D 포트폴리오
PIElog (pielog.me) · 2026
Astro와 Vercel로 배포한 기술 블로그
다양한 경험에 대한 기록과 교육 시리즈(접근성·OWASP·테스트·아키텍처·기술문서·디자인 패턴·화면설계서·마케팅 지표 등) 백여 편 공개
MANAPIE box (box.manapie.me) · 2026
빌드 도구·의존성 없이 CSS 3D와 자체 물리로 구현한 토이 프로젝트 진열장 – 상자를 던지고 집어 드는 인터랙션
PIEmuvi (piemuvi.manapie.me) · 2026
Apple Music·Spotify·YouTube Music 재생목록을 YouTube 공식 MV 목록으로 매칭하는 웹 서비스 (FastAPI, yt-dlp, Docker)
단일 워커 큐·곡 단위 캐시·일일 검색 예산으로 외부 호출을 통제하고, 확신도가 낮은 후보만 Gemini로 재판정
PIEmgmaker · 2026
로컬/원격 LLM(프롬프트 표준화·확장)과 로컬/원격 이미지 생성(스타일 사전 학습)을 결합한 디자인 머티리얼 생성기 – 시안 도출 기간 단축 (Qwen 3.5, ComfyUI/FLUX)
PIEcoviewer (piecoviewer.manapie.me) · 2025
AI 기반 GitHub PR 코드 리뷰 도구 – Claude/GPT/Gemini 멀티 모델, MCP 지원, 라인별 리뷰 코멘트 자동 제출 (Next.js)
PIEping · 2025
백그라운드에서 URL을 주기적으로 호출하는 macOS 앱 (Swift)
PIEeker · 2024 ~ 2026
웹사이트 전 페이지를 스냅샷해 이전 회차와 DOM/CSS를 대조하고, 변경 영역을 주석한 스크린샷과 코드 diff를 메일로 보고하는 CLI (TypeScript, Playwright)
PIEporter · 2024 ~ 2026
검색엔진 결과 중 신규 항목만 추려 CSV와 함께 메일 리포트로 발송 (Python, 오픈소스 GPL-3.0)
ccwhere · 2026
Claude Code 세션 현황을 보는 터미널 모니터 – 프로세스 대신 세션 로그(JSONL) 파싱, 오픈소스(MIT)
bakeware · 2018 ~ 2023
직접 참여한 내부·외주 프로젝트를 위한 CMS 구축 (Laravel, 온프레미스 및 GCP App Engine 지원)
경희대학교 해커톤 khuthon 개최·운영 · 2016 ~ 2022
신청·발표·투표 전산 시스템 직접 개발, Naver D2 스폰서십 수주
동아리 교육·강의 · 2015 ~ 2022
경희대학교 컴퓨터공학과 학술 동아리 T.G.WinG, 중앙동아리 KHLUG(쿠러그) 교육 커리큘럼(C++·Python·Git·웹·IoT·UI디자인 등) 설계·강의

CERTIFICATES

컴퓨터그래픽스운용기능사 / 한국산업인력공단 · 2013.10
웹디자인기능사 / 한국산업인력공단 · 2013.10
정보처리기능사 / 한국기술자격검정원 · 2013.08
ITQ 인터넷 A등급 / 한국생산성본부 · 2013.08
ITQ 한글액세스 A등급 / 한국생산성본부 · 2013.08
ITQ MS워드 A등급 / 한국생산성본부 · 2013.08
GTQ 1급 / 한국생산성본부 · 2013.07
ITQ 한글파워포인트(한쇼) A등급 / 한국생산성본부 · 2013.06
ITQ 한글엑셀(한셀) A등급 / 한국생산성본부 · 2013.06
ITQ 아래한글 A등급 / 한국생산성본부 · 2013.06

경력기술서

1대형 금융사 디지털채널 운영 – 프로젝트 매니저(PM)

(주)리즌디자인 · 2022.12 ~ 2023.01 · 2023.03 ~ 현재 (CTO/비등기이사)

Problem

금융권 보안망 내부에서 파트너사와 공동 수행하는 대규모 운영 프로젝트 – 품질·일정·인력 관리와 클라이언트 신뢰가 동시에 요구됨

Action

인사평가 등급 체계와 리더(PL/PM) 평가 항목을 직접 설계, 연봉 협상·채용 면접 체계 운영
WCMS/개발자 반영의 이중 배포 트랙 운영과 배포 사고 실시간 대응 프로세스 관리 – 사고 이력화·연휴 배포 리스크 공지·정기 보안 점검 루틴화
주간보고(클라이언트 대상)·통합업무내역서·제안서·품질 개선 전략 발표 등 커뮤니케이션 총괄
보안망 환경의 AI 활용 제약 하에서 AI PoC 등 신규 과제 기술 검토 수행

Result

20여 개 채널·5,000여 개 화면에서 월 1,000건 이상 요청을 안정적으로 처리하여 지속적인 계약 갱신, 3년 연속 운영

SkillsVue 2/3FigmaSketchZeplinWeb AccessibilityStorybookConfluenceJira금융권 보안망 환경

1-1주말 아침, 앱 메인이 백지가 됐을 때 – 비상 대응 체계의 증명

Problem: 주말 아침, 수백만 사용자가 이용하는 금융 앱의 메인 화면이 백지로 노출 – 고객 접점 전체가 막히는 최고 수위 장애가 비업무 시간에 발생
Analyze: 연락을 받은 즉시 출근해 원인 추적 – 아침 자동 배치로 배포된 콘텐츠 관리 시스템(WCMS) 설정 문자열을 개발 측에서 유니코드 디코딩하는 과정의 오류로 메인 렌더링 전체가 중단된 것을 특정
Action: 개발 측 수정 배포를 기다리지 않고 콘텐츠 레이어에서 우회 – WCMS 설정을 즉시 수정 배포해 서비스 정상화
Result: 주말·담당자 부재 상황에서도 단시간 복구 대응이 가능했던 것은 사전에 설계해 둔 상시 비상 연락망과 상호 대무(백업 담당) 체계로, 장애는 우연히 막는 것이 아니라 체계로 막는다는 원칙을 증명.
그 외 대형 오픈(금융 슈퍼앱 마이그레이션 2차·원앱 오픈)의 새벽 배포·모니터링도 이슈 없이 수행

SkillsWCMS운영 배포 체계비상 대응 프로세스

1-2보안 위협 대응 – CVE 4시간 조치와 상시 보안 체계

Problem: 운영 채널이 사용하는 WordPress(PHP) 스택에 CVE 공개 – IT 보안팀으로부터 긴급 조치 요청 접수
Action: 4시간 내 해결을 목표로 운영 담당자와 즉시 협력 – 수정 방향을 합의해 패치를 적용하고, 동일 유형 공격을 차단하는 예방책을 추가 구현
Result: 요청 당일 신속 조치 완료.
평소에도 IT 보안팀의 보안 점검 체크리스트 정기 수행, 데이터 암호화, 인프라 하드닝을 진행하며 상시 보안 체계 유지

SkillsPHPWordPress보안 점검·인프라 하드닝

1-3디자인 품질 개선 전략

Problem: 산출물 퀄리티 편차·가이드 기준 변동으로 리스크 격상
Action: 3층 개선 구조 설계 - 디자인 파트 3단계 품질 게이트(방향·완성도·최종QC), PM 브리프 표준화, 전사 거버넌스·플레이북 운영
Result: 디자인·퍼블리싱 시안 품질 및 산출량 증가, 클라이언트 만족도 상승

1-4로컬 LLM 기반 디자인 머티리얼 생성 사내 서비스

Problem: 디자인 시안 아이데이션에 상용 생성형 AI를 쓰기에는 토큰 비용 제약이 크고, 브랜드마다 표준화된 프롬프트와 스타일 맞춤 학습이 필요했음
Analyze: 상용 API 대신 로컬 LLM + 로컬 이미지 생성 조합을 선택 – 비용 제약 없이 무제한 시도가 가능하고, 서비스 로고·오브젝트 스타일을 사전 학습시켜 브랜드 일관성을 확보할 수 있다고 판단
Action: 로컬 LLM(Qwen 3.5)이 입력 프롬프트를 표준화·확장하고, ComfyUI/FLUX가 사전 학습된 브랜드 스타일(로고·오브젝트)로 디자인 머티리얼을 생성하는 사내 웹서비스 구축
Result: 생성 속도가 다소 느리고 결과물에 일부 리터칭이 필요했지만, 토큰 비용 제약이 사라지자 아이데이션의 폭이 크게 확장되고 디자인 시안 도출 기간이 절반으로 단축

SkillsQwen 3.5ComfyUI(FLUX)브랜드 스타일 맞춤 학습

2금융 슈퍼앱 전환 3부작 – 디자인 가이드라인에서 원앱 구축, 화면 전면 마이그레이션까지

(주)리즌디자인 · 원앱 UX 선행 → 원앱 구축·카드 마이그레이션 병행 (2024.01 ~ 2025.12) · UX 파트 관리 (제안·공수 산정·투입·오픈·인수인계 지원 풀사이클)

금융그룹 통합앱의 원앱 전환이라는 전사적 변화에 대응한 대형 프로젝트군으로, 디자인 가이드를 선행 구축하고, 원앱 구축과 금융사 화면 전면 전환을 병행 수행해 완주

2-1원앱 UX 선행 – 디자인 가이드라인 구축

2024.01 ~ 2024.03, 약 3개월

Problem: 원앱 시대의 화면 체계에는 일관된 디자인 기준이 필요 - 파편화된 화면·컴포넌트·인터랙션의 표준화
Action: 공통 컴포넌트 20여 종(버튼·입력·팝업·바텀시트·캘린더·차트·테이블·탭·슬라이더 포함) 디자인 가이드 구축 – 터치 영역·배치·인터랙션·사용 예시 정의, 접근성 기준 수립, PHP 기반 디자인 시스템 배포 사이트 구축 및 보안 감사 대응
Result: 이후 원앱 구축·마이그레이션의 공통 기준으로 전면 적용 – 디자인 시스템 배포 사이트는 현재까지 운영 지원 지속

Skills디자인 가이드PHPMySQL

2-2원앱 구축 – 선행 가이드 전체 적용

2024.04 ~ 2025.12, 약 21개월

Problem: 원앱 통합 메인·GNB부터 신규 서비스 이관까지 선행 가이드를 전 화면에 일관 적용하고, 접근성 인증 심사까지 통과해야 하는 대규모 구축
Action: UX 파트 조직(14명) 지원 – 통합 메인·GNB, PI 과제 1·2차, 신규 서비스 이관, 리브랜딩, KS X 3253(모바일 앱 접근성 지침 2.0) 기반 인증 심사 대응 통과, 통합테스트·CBT·안정화.
Vue 3 + Storybook 컴포넌트 기반 화면 설계
Result: 원앱 오픈 완수 – 오픈 새벽 대응(2025.11), 금융사 화면 마이그레이션 배포 수시 대응 → 금융사 앱 종료하여 디지털채널의 슈퍼앱 완전 통합

SkillsVueJSPWCMSStorybook금융권 검증 프로세스

2-3금융사 → 슈퍼앱 마이그레이션 – 화면 전면 개편

2024.04 ~ 2025.12, 약 21개월

Problem: 슈퍼앱 내부에 들어가는 금융사 화면 3천여 개를 운영 중단 없이 전면 개편·이관(JSP→Vue)해야 하는 제약
Action: 요건설명회 참여부터 전환 공수 산정, UX 인력 편성(자사 15명 규모) – 3단계 오픈(2024.12 슈퍼앱 이관 → 2025.1 웹 전환 → 2025.7 통합앱 이관), 오픈 시 새벽 배포·모니터링 지휘, 공식 인수인계
Result: 화면 3천여 개 규모 전환 완주, 이관 메뉴 백여 개(3단계 분할)

SkillsVueJSPWCMS금융권 검증 프로세스

3쿠랑 - 커뮤니티 서비스 풀스택 개발·운영 (창업 → 재도전 → 재오픈)

(주)오드포인트 · 2018 ~ 현재 · 기획·디자인·개발·인프라·운영 전 영역 · 2026.07 양대 스토어 재오픈

사용자 웹앱 · 관리자 콘솔 · 학사공지 크롤러 · 운영 봇 · iOS/Android 앱 · 인프라 IaC·모니터링 · 운영 문서 체계 – 전 컴포넌트 개발·운영

3-1한 달간 91초마다 죽던 서버의 근본 원인 분석

Problem: 운영 전 라이브 테스트 중 산발적 503 발생.
5분 간격 외부 모니터링에는 한 번도 잡히지 않아 원인 특정이 어려웠음
Analyze: DB 커넥션 끊김 가설 → 지표 정상으로 폐기.
OOM 가설 → dmesg(부팅 메시지) 흔적 없음으로 폐기.
PM2 로그 타임스탬프가 정확히 91초 간격임을 발견 → "앱이 아니라 PM2 데몬 자체가 죽는다"로 프레임 전환
Action: journalctl로 systemd가 PID 파일을 읽지 못해 90초 타임아웃 후 SIGKILL을 반복함을 확인, ausearch로 SELinux AVC 거부가 원인임을 확정.
SELinux 정책 완화 대신 unit에서 PIDFile 의존을 제거하고 GuessMainPID로 전환
Result: 재시작 28,163회 → 0회.
AVC denial 0건.
이후 재발 없음.
전 과정을 블로그에 공개 기록

SkillsLinux(CentOS)SELinuxsystemdPM2GCE

3-2인증 도입으로 파손된 실시간 채팅 복구

Problem: 보안 감사 후 socket.io 미들웨어에 NextAuth 인증을 추가하자 채팅 조인 실패·메시지 미수신·DB 중복 저장이 동시 발생
Analyze: CORS·credentials 수정으로 해결되지 않음 → 진단 로그로 쿠키는 도착하는데 토큰 추출이 안 됨을 확인 → NextAuth 소스 분석으로 SessionStore가 req.cookies만 읽는데 socket.io의 req는 raw IncomingMessage임을 규명
Action: 쿠키 헤더를 직접 파싱해 프록시 객체로 주입, 중복 emit은 in-flight 가드로 차단
Result: 채팅 기능 3종 복구, 인증 유지.
전 과정을 블로그에 공개 기록

SkillsNext.js 15 커스텀 서버socket.io v4NextAuthTypeScript

3-3인프라 코드화(IaC)와 무중단 운영 체계

Problem: 수동 구성된 GCP 인프라는 재현 불가능했고, 단일 VM 배포는 중단·롤백 위험이 있었음
Action: GCE·GCS·Cloud Run Job·Scheduler·Monitoring을 Terraform으로 코드화, 헬스체크 자동 롤백 포함 Blue-Green 배포 구축, OpenTelemetry+Cloud Trace 관측성, 빌드 시 임시 스왑 자동화(OOM 방지), 런북·재해복구 계획(RTO/RPO) 문서화
Result: 재현 가능한 인프라와 무중단 배포 정착

SkillsTerraformGCPOpenTelemetryGrafanaPM2Apache

3-4테스트 부재 레포에 600여 개 테스트 도입

Problem: 운영 중인 자매 레포 2개에 테스트가 전무해 회귀 검증이 수동에 의존
Action: 순수 로직→컴포넌트→DB 통합→Socket.IO 4단계 도입, 기술 함정(fake timer×mongoose, jsdom×bson 충돌 등) 해결 + Playwright E2E 구축
Result: 테스트 0 → 600여 개, 전체 실행 수십 초 이내 유지

SkillsJestSWCTesting Librarymongodb-memory-serverPlaywright

3-5AI·보안 – 실서비스 적용

LLM 기반 콘텐츠 자동 생성(게시글 작성, 공지 요약) 기능과 모더레이션 파이프라인 설계·운영
PII 필드 AES-256-GCM 결정론적 암호화(등호 쿼리·유니크 인덱스 유지), Swiper critical CVE의 실효 위험 기반 대응(제거 vs 업그레이드), React/Next.js CVE 18건 분석·공개 문서화

4니어클 – 소셜 서비스 런칭

(주)니어클 · 2022.05 ~ 2023.03 · CTO - 개발팀 3명(FE·BE·풀스택) 총괄, 2020.12 사이드 프로젝트 시기부터 참여

Problem: 연예인 팬덤 기반·번역 기능을 갖춘 소셜 서비스를 웹·iOS·Android로 동시 런칭해야 하는 초기 스타트업 – 인프라·프로세스·팀이 모두 0에서 시작
Action: AWS EC2 6개 서버 인프라 설계(실서버/스테이징 분리), React FE·Node.js API 개발 리드, Firebase 푸시·Google Cloud Translation 연동, Git 전략·PR 리뷰·코드 컨벤션·Jira 운영 정립, 채용·온보딩 문서화 – Google Play(2022.01)·App Store(2022.07) 출시, 2023년 '도슨트'(지도 기반 관광 안내)·결제로 피벗
Result: 웹·iOS·Android 3플랫폼 런칭, 신규 개발자 온보딩 체계 확립

SkillsReactNode.jsMongoDB AtlasAWSFirebasenginxPM2

4-1환경 분기 사고 – 프로덕션 앱이 테스트 서버로 연결되던 문제

Problem: 서비스 피벗·스토어 재등록 시기, 앱 언어를 영어로 설정하면 프로덕션 앱이 테스트 서버에 연결되는 문제 발견.
사용자에게 테스트 데이터가 노출되고 실제 데이터가 테스트 환경에 기록될 수 있는(데이터 오염·유실 위험) 환경설정 사고
Analyze: 언어 설정에 따라서만 달라지는 경로를 역추적 – 피벗 과정의 언어 리소스 교체 작업에서 서버 엔드포인트 설정이 언어별 리소스에 함께 묶여 있던 구성을 특정
Action: 환경(서버) 설정을 언어 리소스에서 분리하고 프로덕션/스테이징 분기를 단일 소스로 정리, 배포 전 환경 연결 확인을 점검 항목에 추가
Result: 실사용 피해가 발생하기 전에 데이터 오염 경로 차단

SkillsReacti18n환경 구성 관리

4-2출시 직후 실시간 채팅 일괄 안정화

Problem: Google Play 출시 직후 실시간 채팅에 이슈 집중.
알림으로 채팅방 진입 시 앱 크래시, 1:1 대화 중 타 채팅방 메시지 수신 시 튕김, 그룹↔1:1 전환 버그, 폭파된 방의 알림 잔존
Analyze: 증상은 제각각이지만 원인을 추적하니 세 갈래로 수렴 – 정리되지 않은 미등록/만료 FCM 토큰, 방 생성 로직의 상태 정합성 결함, mongoose 캐시 동작
Action: 만료 FCM 토큰 정리, 방 생성 로직 재설계, 캐시 이슈 수정, 채팅 진입·스크롤 동작 보정 – 하루 집중 대응으로 일괄 처리
Result: 출시 직후의 채팅 크래시·알림 정합성 이슈를 근본 원인 단위로 해소, 이후 iOS 출시 준비에 집중할 수 있는 기반 확보

SkillsNode.jsMongoDB(mongoose)FCMSocket 기반 채팅

4-3WebView 보안 취약점 긴급 차단

Problem: 알림·링크 기능을 확장하던 중 WebView 기반 앱의 cross-app scripting 취약점과 FCM 페이로드 XSS 가능성 발견.
외부 입력이 앱 컨텍스트에서 실행될 수 있는 보안 위험
Action: 심야 연속 대응으로 Android WebView의 cross-app scripting을 1·2차 핫픽스로 차단하고, API 측 FCM 페이로드에 XSS 방어 처리 적용
Result: 실사용 피해 전 차단 – 인력 3명의 초기 스타트업에서도 보안 이슈는 발견 즉시 최우선으로 처리하는 원칙 실행

SkillsAndroid WebViewFCMXSS

5뷰저블·뷰저블 애널리틱스·웹 접근성 검사 도구 – SaaS 제품 개발

(주)포그리트 · 2019.07 ~ 2021.12 · 소프트웨어 엔지니어

신규 제품 '뷰저블 애널리틱스(BA)'의 FE 런칭 총괄, BE 보조: 뷰저블(페이지 단위 히트맵)과 별개 제품인 고객 여정(세션·PV·퍼널) 분석 서비스.
오픈베타 빌드·QA(2020)를 거쳐 2021.03 정식 출시, 이후 상용 과금(PV 플랜) 전환기의 결제·플랜 이슈 안정화까지 리드.
대시보드·랭킹 리포트·UTM 세그멘팅·플랜 관리, 다국어(한/영/일)
대용량 데이터 시각화 최적화: 수억 행 규모의 분석 데이터를 out-of-core 파이프라인(VAEX/HDF5)으로 집계하고 PV 샘플링을 도입, 차트 라이브러리와 SVG 인터랙션 모션으로 구현 (스크롤 프레임·중복 요청 최적화).
히트맵 드로잉의 하드웨어 가속 이슈를 검증해 브라우저 지원 범위를 전략적으로 조정 (미지원 감지 팝업·다운로드 분기·SVG 폴백)
뷰저블 본 제품(재직 당시 글로벌 전자 기업·카드사 등 도입, 일본 진출기) FE 담당·BE 보조, 다국어 공식 홈 제작·오픈(2019.09) – 스크린샷 자동화를 PhantomJS에서 Puppeteer로 전환
웹 접근성 검사 도구 리아키텍처 주도(2021): 렌더러 재설계·이미지 렌더링 큐 분리·S3 전환·엑셀 파싱 모듈화·WCAG 2.1 체계 반영·OCR 도입, 글로벌 전자 기업·대형 광고사 사용
엔터프라이즈 전용 뷰저블 FE·API 구축(2020), 신규 어드민 도구 API·FE·문서화(2021), 어드민(Shadow Login·플랜 관리), 대형 통신사 뷰저블 대응

SkillsVueJavaScript(jQuery)Chart.jsNode.jsMongoDBVAEX(HDF5)PuppeteerJiraConfluence

5-1접근성 자동 검사 도구 – "자동화가 어렵다"는 영역의 자동화

Problem: 웹 접근성 자동 판정은 지금도 판정률이 낮은 영역으로, 당시 접근성 검수팀이 항목 하나하나를 수동 점검하며 야근이 일상화된 상태
Analyze: 완전 자동 판정을 목표로 하는 대신 "사람의 판단을 빠르게 만드는 자동화"에 집중.
도구가 후보를 찾고 근거를 제시하면, 사람은 판단만 하면 되는 구조로 설계 (2019년 제품 페이지 수기 접근성 진단을 대량 수행한 도메인 경험 활용)
Action: WCAG 각 항목별로 Puppeteer 기반 자동 점검을 구현 – 판정 규칙 140여 개를 데이터셋으로 설계(자동 판정/수동 확인 안내 구분 포함), 준수 여부를 A/AA/AAA 기준으로 표시하고, 위반 지점의 코드 스니펫과 화면 캡처를 잘라 함께 제시하는 리포트 구축
Result: 수동 전수 점검에 의존하던 접근성 검수팀의 야근을 거의 제거 – 자동화 도구와 사람의 역할을 나누는 워크플로우로 전환

SkillsPuppeteerNode.jsWCAG 2.1OCR

6교육·리더십

한 사람을 뽑는 것에서 끝내지 않고, 들어온 사람이 성장해 다시 조직의 지식이 되게 하는 루프를 만드는 데 공을 들여옴.
채용 챌린지로 들어와, 팀 스터디에서 배우고, 라이트닝 토크에서 발표하고, 그 자료가 교육 자료와 공개 블로그가 되는 구조를 설계.
대학 동아리 교육자로 시작해 스타트업 온보딩 문서화, 디자인 회사의 기술자 성장 체계 설계까지 10년 넘게 이어 온 일관된 관심사

리즌디자인: 채용 연계 온보딩 챌린지 설계·운영, 팀 스터디(Three.js·React) 리드, 라이트닝 토크 운영·발표("개발자가 챙기는 접근성", "OWASP Top 10:2025 훑어보기" 등), 사내 교육 자료 제작, 전체개발자회의(월간) 운영
니어클: 개발자 채용 면접 설계, 신규 입사자 온보딩 문서 체계 구축
경희대학교 쿠러그: 교육 커리큘럼 6종(C++·Python·Git·웹·IoT·디자인) 설계·강의(2015~2022), khuthon 해커톤 2016~2022 개최·운영(전산 시스템 직접 개발)
기술 블로그 PIElog: 교육 시리즈 백여 편 공개

카탈로그

3D 가게의 진열대(프로젝트)·팬트리(기술) 콘텐츠 전체를 텍스트로도 볼 수 있습니다.

레시피 노트 85종 / 전체 프로젝트 펼치기

리즌디자인 · 2022–

대학라이프 · 오드포인트 · 2018–

니어클 · 2020–2023

니어클 · 2020.12 — 2023.03
사이드 프로젝트부터 시작한 번역 기능을 갖춘 소셜 커뮤니티 — CTO로 웹·iOS·Android 3플랫폼 동시 런칭
재료: React, Node.js, MongoDB, AWS, Firebase, nginx, PM2 · 역할: 리드·기획·프론트엔드·백엔드·인프라·운영

포그리트 · 2019–2022

뷰저블 애널리틱스 · 2020 — 2021
고객 여정 애널리틱스 신규 제품 — FE 런칭 총괄, 오픈베타에서 정식 출시까지
재료: Vue, Node.js, MongoDB, AWS · 역할: 프론트엔드·백엔드·리드
웹 접근성 자동 검사 도구 · 2021
"자동화가 어렵다"는 접근성 검수의 자동화 — 판정 규칙 140여 개, 리아키텍처 주도
재료: Node.js, Puppeteer, WCAG 2.1, OCR, S3 · 역할: 리드·백엔드·리서치
뷰저블 · 2019 — 2021
UX 히트맵 SaaS FE 개선·대용량 시각화 — out-of-core 집계·PV 샘플링·크로스 브라우저 전략
재료: Vue, VAEX(HDF5), SVG/Canvas, AWS · 역할: 프론트엔드·백엔드
뷰저블 공식 홈 · 2019
다국어(영/한/일) 공식 홈 제작·오픈
재료: EJS, Puppeteer · 역할: 프론트엔드
엔터프라이즈 커스텀 뷰저블 · 2020
엔터프라이즈 커스텀 뷰저블 FE·API — 인증·회원/페이지 관리·IP 차단·타임존·메일러·퍼널
재료: Vue, Node.js, MongoDB, AWS · 역할: 프론트엔드·백엔드
웹 접근성 리뷰 시스템 · 2020 — 2021
접근성 검수·리뷰 워크플로우 분리 구축 — DB 설계·검수 프로세스, 스크린샷 자동화 PhantomJS→Puppeteer 전환
재료: Vue, Node.js, AWS, Puppeteer · 역할: 기획·백엔드
차세대 어드민 도구 · 2021
결제·유저·플랜 API + FE 공통 컴포넌트 시스템 + 위키 문서화
재료: Vue, Node.js, AWS · 역할: 프론트엔드·백엔드
엔터프라이즈 접근성 검수 시스템 · 2021
접근성 검수 시스템 온프레미스 설치·실서버 배포, 대형 고객사 대응
재료: Vue, Node.js · 역할: 운영
뷰저블 애널리틱스 서베이 도구 · 2022
설문 생성/결과 FE 전담 — 엑셀·PDF 추출, 마케팅 세그먼트 리포트, 다국어, IE 대응
재료: Vue · 역할: 프론트엔드

프리랜서 외주 · 2015–2017

커피 브랜드 쇼핑몰 · 2015
기획·UI/UX·개발 — 첫 프리랜서 쇼핑몰
재료: WordPress, PHP, MySQL · 역할: 기획·디자인·프론트엔드·백엔드
기사협동조합 플랫폼 · 2016
CI + 웹 + Android 앱 — 협동조합 플랫폼 통째로
재료: Laravel, Java, CentOS · 역할: 아이덴티티·프론트엔드·백엔드·앱
경희대 로봇공학연구실 홈페이지 · 2016
연구실 홈페이지 제작
재료: XE · 역할: 프론트엔드·백엔드
사진 스튜디오 홈페이지 제작 · 2015
스튜디오 홈페이지 제작
재료: XE, CentOS · 역할: 프론트엔드·백엔드
사진 스튜디오 홈페이지 보수 · 2015 — 2017
스튜디오 홈페이지 보수·운영
재료: XE · 역할: 운영·프론트엔드

개인 프로젝트 · 오픈소스 · 2018–

학생 · 교내 활동 · 2011–2022

팬트리 재료 57종 / 기술 상세 펼치기

손 닿는 선반 — 매일 쓰는 재료

TypeScript · 2018년부터
이제 이것 없이는 반죽이 손에 붙는다.
React · 2020년부터
스타트업부터 이 가게까지 — 매일 여는 병.
Next.js · 2022년부터
오븐 예열부터 서빙까지 한 통에.
Vue · Nuxt · 2019년부터
SaaS부터 금융 채널까지 — 가장 오래 쓴 프레임워크 병.
Node.js · Express · 2018년부터
주방 어디에나 조금씩 들어간다.
MongoDB · 2019년부터
쿠랑도 니어클도 뷰저블도 — 장부는 다 여기에.
MySQL · MariaDB · 2015년부터
첫 외주부터 함께한 오래된 장부.
GCP · 2018년부터
가게 지하 배관 전부 이 브랜드.
AWS · 2019년부터
옆 동네 배관도 다룰 줄 안다.
nginx · PM2 · Apache · 2018년부터
서버 앞단의 오랜 삼총사.
Terraform · 2024년부터
가게 도면을 코드로 — 증축이 두렵지 않다.
Figma · 2020년부터
쇼윈도 디스플레이는 항상 여기서 먼저.
LLM API 통합 · 2023년부터
점원 채용부터 모더레이션까지 — 이미 주방의 일부.
SCSS · HTML · 2011년부터
밀가루와 물 — 모든 반죽의 시작.
GitHub · GitLab · Bitbucket · 2015년부터
장부는 세 곳 모두 살림해 봤다 — 지금은 GitHub가 본가.

한 칸 위 — 손을 뻗으면 닿는 재료

Python · 2015년부터
실험 주방 전용 — 본 주방엔 가끔 나온다.
FastAPI · 2026년부터
작게 열고 빠르게 내는 화구 — 혼자 여는 가게엔 이만한 게 없다.
PHP · Laravel · 2013년부터
첫 서버는 이걸로 구웠다 — 아직도 잘 든다.
Socket.IO · 2021년부터
홀과 주방을 잇는 인터폰 — 실시간 채팅을 두 번 지었다.
웹 접근성 · 웹 표준 · 2019년부터
모든 손님이 문을 열 수 있게 — 검사 도구까지 만들었다.
Jest · Playwright · 2024년부터
굽기 전 맛보기 필수.
Storybook · 2021년부터
진열 전 쇼케이스 리허설.
Linux 운영 · 2015년부터
91초마다 죽던 서버를 살려낸 곳도 여기.
Swift · Kotlin · 2022년부터
포장 판매용 — 양대 스토어에 올려 봤다.
Astro · 2026년부터
블로그 전용 화덕 — 백여 편을 구웠다.
Puppeteer · OCR · 2019년부터
접근성 검사 도구의 심장 — 스크린샷 자동화까지.
OpenTelemetry · Grafana · GA4 · 2024년부터
가게 계기판 — 오븐 온도를 실시간으로.
Jira · Confluence · Notion · 2019년부터
여러 주방을 거친 협업 장부.
Vercel · 2026년부터
블로그와 이 가게가 올라간 선반.
Docker · 2021년부터
주방을 통째로 포장해 옮기는 컨테이너.
재해복구(RTO/RPO) 설계 · 2024년부터
가게가 태풍에 무너져도 다시 열어야 한다.
arc42 · 2026년부터
아키텍처 문서의 뼈대 — 정의서가 화석이 되지 않게.
CVE 분석·대응 · 2022년부터
위협은 실효 위험으로 판단해 움직인다.
Adobe Illustrator · 2013년부터
간판 시절의 동반자.
Sketch · Zeplin · 2019년부터
Figma에게 자리를 내준 착한 도구.
Firebase · 2019년부터
쿠랑과 니어클 푸시가 여기서 나간다.
SQLite · 2017년부터
WAL 하나 걸어 두면 작은 가게 장부로는 충분하다.

숙성실 — 지금 배우는 중

Three.js (R3F) · 2025년부터
이 가게의 밀가루. 지금 보고 있는 모든 것.
MCP · 멀티 에이전트 · 2025년부터
점원을 한 명이 아니라 한 팀으로.
AX · AI 전환 · 2026년부터
주방 전체를 AI로 다시 짜는 일 — 도구 몇 개가 아니라 레시피 체계를 바꾼다.
로컬 LLM · 이미지 생성 · 2025년부터
전기값만 내면 무한 리필 — 시안 도출이 절반으로.
Vertex AI 자동화 · 2025년부터
운영 봇이 새벽 근무를 대신 선다.
3D 에셋 파이프라인 · 2026년부터
소품을 굽는 또 다른 오븐 — 이 가게의 소품들이 실습작.
WebGPU · TSL · 2026년부터
다음 세대 오븐 — 아직 예열 중.
RAG · 임베딩 검색 · 2026년부터
점원이 가게 밖 지식까지 찾아오게 하는 레시피.

서랍 — 여전히 잘 드는 옛 칼

Adobe Photoshop · 2004년부터
모든 게 여기서 시작됐다. 지금도 가끔 꺼낸다.
Adobe XD · 2004년부터
이걸로도 고명을 올리곤 했는데.
jQuery · 2012년부터
$(마음).fadeIn() 하던 시절.
XE · WordPress · 2011년부터
첫 실서비스와 첫 쇼핑몰을 구운 옛 오븐.
SVN · 2015년부터
Git 이전의 장부 — 로그가 세로로 쌓이던 시절.
Java · 2014년부터
전공 시절의 무쇠칼 — 무겁지만 기본기.
C++ · 2014년부터
전공 시절의 무쇠칼 — 까다롭지만 기본기.
Adobe Lightroom · 2015년부터
셔터를 누른 날 밤의 후반 작업대.
VAEX (HDF5) · 2019년부터
수억 행을 다루던 시절의 특수 오븐.
Flask · 2017년부터
실험용 미니 오븐 — 작게 구울 때 꺼낸다.
YOLO · 2022년부터
졸업 연구의 눈 — 실시간으로 세상을 알아봤다.
Adobe InDesign · 2016년부터
지면은 여기서 — 복수전공 시절부터.