Frontend Engineer

Tech Stack

Frontend

React·Next.js·TypeScript·TanStack Query·Konva·Storybook·Tailwind

UX를 최우선으로 고려한 디자인 시스템을 구축하고, Konva 기반 Canvas 도구형 UI, AsyncBoundary 패턴을 활용한 장애 격리 등을 구현해왔습니다. 다수의 프로젝트에서 다국어(i18n) 대응 및 웹 접근성에 대한 경험이 있으며, Next.js App Router, Server Components, SEO 최적화 등 최신 기술을 직접 서비스에 적용해 운영하고 있습니다.

AI

Codex·Claude code·v0·Cursor·Kiro·RAG

여러 AI 도구를 활용해 하네스 구성, 에이전트 활용, 매뉴얼 및 테스트 자동화 등 다양한 실무 적용 경험이 있습니다. 개인 프로젝트에서는 RAG 서비스AI로 SNS를 관리하는 플랫폼을 만들고 있습니다.

Backend

Node.js·NestJS·PostgreSQL·BullMQ

사이드 프로젝트에서 NestJS 기반 REST API, DB 연동, 외부 API 통합을 구현해 풀스택 서비스를 직접 설계하고 운영하고 있습니다.

Experience

LG전자

2024.01 ~

BS통합관제 프로젝트 (ThinQ Pro)

  • 디자인 시스템을 구축해 B2B 서비스별 중복 구현을 줄이고 storybook 으로 공통 컴포넌트를 관리하고, 탭/스크롤/필터 상태 유지, 스켈레톤 UI 등 UX 디테일을 컴포넌트에 내장해 사용만으로 일정 수준 이상의 UX가 보장되도록 설계했습니다.
  • Konva 기반 Canvas UI를 구현해 건물 도면 위에 디바이스를 드래그앤드롭으로 배치하고, 연결 상태를 오프스크린 Canvas 합성으로 시각화하며, 줌/패닝 상태에서의 좌표 변환과 스케일 보정을 적용했습니다.

교육용 태블릿 관제 프로젝트

  • Suspense + ErrorBoundary를 결합한 AsyncBoundary 패턴을 적용해 컴포넌트 단위로 로딩/에러를 격리하고, 하나의 API 실패가 전체 화면을 멈추지 않는 구조를 구현했습니다.
  • Query(조회) 에러는 상위 Boundary에서 일괄 처리하고, Mutation(변경) 에러는 액션 인접 컴포넌트에서 즉시 피드백하는 전략으로 분리해 전역 에러 UX 일관성과 사용자 복구 가능성을 동시에 확보했습니다.

의료용 모니터 관제 프로젝트

  • Kiro + Playwright(CDP) MCP + Jira MCP를 연동한 AI 기반 사용자 매뉴얼 자동화를 구현해, AI가 주요 페이지를 순회하며 컴포넌트 스크린샷을 수집하고 SRS/TC 문서와 코드를 함께 참조해 60페이지 분량의 제품 매뉴얼 초안을 이틀 만에 완성했습니다.
  • API 호출을 UI에서 분리한 Query 레이어로 일원화해 컴포넌트가 성공 케이스에 집중하도록 구성했고, 동일 엔티티 중복 호출 제거 + TanStack Query 캐싱/공유 + 2분 주기 재호출(revalidate) 정책을 한 곳에서 관리하도록 표준화했습니다.
  • 8개 국어 1,000+ key 다국어 리소스 관리를 자동화해, JSON 파일을 검수용 엑셀로 출력하는 스크립트와 언어 간 누락 key를 자동 검출하는 도구를 구현해 휴먼 에러와 검수 병목을 제거했습니다.

Activities

  • 쉐도우 커미티 상반기·연간 우수 활동자로 선정되었고, MS 본부 내 제품 기획/UX 개선 안건 발굴과 리뷰에 참여했습니다.
  • 서비스플랫폼개발담당 공모전 우수상, 호텔TV 아이디어 공모전 3등을 수상했고, 자사 제품 개선 아이디어를 실행 가능한 안건으로 구체화했습니다.
대학 졸업

올바름

2022.02 ~ 2023.02 (대학 재학 중)

조경수 플랫폼 유지보수 및 기능 개선

  • 서비스 중단 없이 기능 개선을 지속해 안정성을 유지했고, 인프라 비용 점검으로 불필요 리소스를 정리했습니다.

퍼널 마케팅 플랫폼 리드

  • 마케팅 퍼널 운영 체계를 구축하기 위해 기획·디자인·개발·지원사업 대응을 단일 오너로 리드했습니다.
  • 캠페인 리드타임을 단축하기 위해 SMS 연동, 랜딩 페이지, 폼 기능을 구현해 반복 업무를 자동화했습니다.

소셜 그라운드

2021.07 ~ 2022.01 (대학 재학 중 / 공동 창업)

초기 스타트업 실무 담당

  • 초기 서비스 운영 체계를 정착시키기 위해 개발팀 운영, 지원사업 대응, 외주 관리, 특허 출원을 주도했습니다.
  • 학생-기업 매칭 서비스 기본 흐름을 구축하기 위해 ESG 매칭 플랫폼 요구사항 정의와 핵심 화면/기능 구현을 담당했습니다.

밀레코리아

2020.12 ~ 2021.06 (대학 재학 중)

사내 업무 자동화 프로그램 개발

  • 정산·최저가 스크래핑·재고 관리를 자동화해 반복 수작업과 오류를 줄이고 운영 흐름을 표준화했습니다.

패밀리몰/CS 시스템 구축

  • 약 3만 명 사용자와 3억 원 이상 매출이 발생하는 온라인 채널을 구축해 패밀리몰 운영 기반을 마련했습니다.
  • 고객 문의를 단일 채널로 통합하기 위해 카카오톡 연계 CS 시스템을 구축했습니다.

Personal Projects

Lemme Blind Date

모바일 우선 UX와 권한 안전성을 검증한 지인 네트워크 기반 매칭 서비스

2026.02 ~
  • Next.js 16 App Router 기능(Server Components + Server Actions)을 적극 활용해 API 레이어를 단순화하고 화면/비즈니스 로직 수정 속도를 높였습니다.
  • 권한 오용을 방지하는 데이터 접근 규칙을 명시해 매칭/등록 플로우의 안전성을 확보했고, Supabase RLS 정책과 방장/등록자 권한 분리로 애플리케이션·DB 이중 검증을 구현했습니다.
  • Next.js 16 기반 i18n/캐싱 기능(next-intl + IP 로케일 감지, React cache() + unstable_cache())을 적극 적용해 다국어 진입을 자동화하고 DB 부하를 줄였습니다.

What's in Whale's Wallet?

SEC 13F 데이터 기반으로 기관 포트폴리오를 탐색하는 FE 중심 분석 서비스

2026.01 ~
  • 백엔드(NestJS)와 프론트엔드(Next.js)를 Turborepo 모노레포로 통합해 API/타입 변경을 공유 패키지로 동기화했고, 타입 불일치와 중복 구현을 줄여 개발 효율성을 높였습니다.
  • 재사용 가능한 프론트엔드 레이어를 정착해 화면 추가 시 중복 구현을 줄였고, FSD 구조(entities/features/widgets), i18n, 공유 패키지(@repo/ui, @repo/api-client)로 API 연동 규칙을 표준화했습니다.

itjustbong 플랫폼

Turborepo 모노레포 기반으로 콘텐츠·이력서·LLM 서비스를 운영하는 개인 플랫폼

2025.12 ~
  • 모노레포 아키텍처: Turborepo + pnpm workspace 기반 apps(blog/resume/llm) + packages(ui/shared/config) 구조를 설계하고, 공유 패키지로 여러 Next.js 앱 간 재사용성과 개발 효율을 높였습니다.
  • blog: MDX 파일 시스템 기반 콘텐츠 관리, sitemap/robots/JSON-LD/동적 OG 이미지SEO 최적화, Mermaid 다이어그램과 관리자 에디터를 지원했습니다.
  • resume: 데이터 기반 이력서 웹앱을 구현하고, @react-pdf/renderer 기반 텍스트 선택형 PDF 다운로드, 다크/라이트 모드, 반응형 레이아웃을 제공했습니다.
  • llm: Gemini + Qdrant 기반 RAG 답변 서비스를 구축해 블로그/이력서 콘텐츠를 벡터 검색하고, 출처가 포함된 스트리밍 답변을 제공했으며 Docker Compose로 배포했습니다.

피키버스

이상형 월드컵 제작/공유 서비스에서 성능·비용·다국어 UX를 검증한 크로스 플랫폼

2025.01 ~
  • 월 이미지 비용을 $32+에서 $5 수준으로 절감해 트래픽 증가 구간의 운영 부담을 낮췄고, AWS S3Cloudflare Images로 전환하며 10MB 업로드 제한과 image variant를 적용했습니다.
  • 초기 렌더링 체감 속도와 다국어 진입 경험을 개선해 이탈 구간을 줄였고, Next.js SSR + 스켈레톤 로딩locale middleware 기반 자동 리다이렉션을 구현했습니다.
  • 전체 인프라 비용을 10% 이상 절감해 서비스 지속 운영 여력을 확보했고, Vercel(프론트엔드) + Supabase(DB) 구조에서 백엔드 ARM 전환과 certbot/nginx HTTPS 구성으로 ALB 비용을 제거했습니다.

Education

숭실대학교

2017.03 ~ 2024.02

AI융합학부

GPA: 4.17창업, 성적, 비전 장학금 및 수상

Community

Google Developer Group

2022.09 ~ 2024.02

프론트엔드 실험과 프로젝트 협업을 통해 기술 선택 근거를 축적한 대학 개발자 커뮤니티

  • 여러 FE 스택 비교 기준을 정리해 기술 선택 근거를 만들었고, 프레임워크 유무별 투두앱 구현과 세미나/코드잼을 운영했습니다.
  • 팀 프로젝트 협업 경험을 구조화하기 위해 구글 솔루션 챌린지 SSUNG DELIVERY와 GDSC 페스티벌 WOW meet에서 역할 분담과 결과 공유를 진행했습니다.

GDXC

2024.06 ~ 진행 중

재학생-졸업생 연결을 통해 실무 지식 전파 구조를 만든 개발자 커뮤니티 창립 멤버

  • 네트워킹 접점을 정례화해 재학생과 졸업생 간 정보 교류 채널을 운영했습니다.
  • 기술 Q&A 기반 지식 순환 구조를 운영해 실무 이슈 해결 사례를 커뮤니티에 확산했습니다.

Awards

2026
  • LG전자 호텔TV 아이디어 공모전 3등
2025
  • LG전자 SI 공모전 우수상 수상
  • 쉐도우 커미티 우수 활동자 2회 선정
2023
  • 숭실대학교 소프트웨어공모전 총장상
  • Pre 스타트업 선정 (Sendee)
  • 카카오 관광데이터 활용 공모전 장려상
  • 창업유망팀 300 경진대회 성장트랙 선정
2022
  • 숭실대학교 Pre 스타트업 선정 (플로지다)
2021
  • 두드림 프로그램 우수상
  • 캠퍼스 CEO 캡스톤 어워즈 종합대상
  • 예비창업패키지 선정
  • 숭실대학교 Pre스타트업 선정 (매에컴퍼니)
  • 스타트업 in 동작 선정
2018
  • 메이커톤 위드캠프 1위
  • 메이커페어 전시회 참여
  • 교내 경진대회 장려상

Articles & Media

2021.07캠퍼스 CEO 육성사업 제2회 캡스톤어워즈
2021.12한큐플랜트 플랫폼 런칭
2022.11GDSC LMS 개선 프로젝트 세미나 발표
2022.12ESG 관련 역량과 실무 ... 스타트업 '소셜그라운드'

Patents

Method For Providing Local Advertisement Including Advertiser Business Place
Mixed Beverage Manufacturing and Ordering Service Delivery System
Beverage Dispensing System