개발자로서 기술보다 사용자에게 전달되는 경험의 완성도를 중요하게 생각합니다.
복잡한 요구사항을 구조화해 책임 있는 선택으로 더 나은 서비스를 만들고,
팀과 함께 성장하는 개발자가 되고자 합니다.
Work Experience.
EAN 테크놀로지
프론트엔드 개발자
제로에너지 건축 솔루션을 제공하는 B2B 서비스 개발과 아키텍처 설계를 리드했습니다.
Reable Homepage
공식 홈페이지와 블로그 기능을 개발하며, 콘텐츠 작성 경험을 위한 Tiptap 기반 에디터 기능을 확장했습니다. NestJS 기반 백엔드까지 포함해 기능 단위로 구현했으며, 운영 과정에서 발생하는 리소스 누수 문제를 정리하고 자동화로 관리 비용을 줄였습니다.
- NodeView update로 발생하던 불필요한 리렌더링을 줄이기 위해, 변경 영향이 있는 경우에만 DOM 업데이트가 발생하도록 개선했습니다.
- 드래그 영역이 아닌 한 줄 전체에 스타일이 적용되던 문제를 해결하기 위해, selection 범위를 계산해 선택 영역에만 스타일이 적용되도록 구현했습니다.
- 이미지 노드 스키마를 커스터마이징해 href 등 확장 속성을 지원하고, 콘텐츠 작성 흐름에 맞게 에디터 기능을 확장했습니다.
- 게시글 수정 시 기존 이미지가 S3에 잔존하는 문제를 파악하고, 게시글-이미지 관계를 기준으로 미사용 이미지를 판별·정리하는 로직을 구현했습니다.
- Lambda 스케줄러로 월 1회 미사용 이미지를 자동 삭제하도록 구성해 스토리지 누적을 예방했습니다.
TypeScript
Next.js
NestJS
Zustand
Radix UI
Tailwind CSS
RestAPI
Axios
AWS EC2
AWS S3
AWS Lambda
Nx Monorepo
pnpm
i18next
SAVEE
건물 단위 에너지 사용량을 모니터링하고 전기·EHP 설비를 제어할 수 있는 에너지 운영 서비스(SAVEE)를 개발했습니다. 콘텐츠 운영 과정에서 데이터 정합성과 관리 편의성을 높이기 위해, 수정·삭제 흐름의 예외 케이스를 정리하고 운영 이슈가 재발하지 않도록 개선했습니다.
- 콘텐츠 수정·삭제 과정에서 발생하는 엣지 케이스를 정리해, 운영 과정에서도 일관된 상태가 유지되도록 처리 흐름을 개선했습니다.
- 사용자 입력과 서버 상태 간 불일치가 발생하지 않도록 저장/반영 타이밍을 정리하고 예외 처리를 보강했습니다.
TypeScript
Next.js
Zustand
Styled-Components
RestAPI
Axios
AWS EC2
HighCharts
i18next
NZT
건물의 탄소 배출량을 모니터링하고 감축량 산정 및 리포팅을 지원하는 탄소관리 서비스(NZT)를 개발했습니다. 복잡한 연산과 다수의 그래프로 초기 로딩이 길었던 레거시 서비스를 분석하고, Next.js 기반 SSR 전환과 성능 개선을 담당했습니다.
- CSR 구조를 SSR로 전환해 서버에서 데이터를 사전 계산·렌더링하도록 개선하고, LCP 3.5s → 1.8s, CLS 0.10 → 0.06으로 지표를 개선했습니다.
- React Query prefetch를 적용해 리포트 다운로드 시간을 2,000ms → 900ms로 단축했습니다.
- 200개 이상 문항 관리 요구에 Compound Components 패턴을 적용하고, 문항 속성을 JSON 스키마로 분리해 변경 대응이 빠른 구조를 구성했습니다.
- 하이드레이션 불일치를 예방하기 위해 서버 값을 props로 주입하고, Context 초기값 동기화 및 참조 안정화로 안정성과 성능을 확보했습니다.
TypeScript
Next.js
Zustand
Emotion
RestAPI
Axios
AWS EC2
HighCharts
i18next
jest
(주) 딩코
프론트엔드 개발자
실시간 코드 편집과 화상 소통이 결합된 학습 플랫폼의 프론트엔드 전반을 담당했습니다.
실시간 협업 코딩 에디터
수강생과 멘토가 함께 코드를 작성할 수 있는 실시간 협업 코드 에디터를 개발했습니다. 핵심 기능 설계부터 구현까지 전반을 담당했으며, 결과물은 구름 에듀에 소스 코드 형태로 판매되었습니다.
- Socket.IO 기반 동시 편집 기능을 구현해 코드 공유 및 피드백 지연 문제를 해결했습니다.
- AgoraRTC를 연동해 음성·화상 통신을 지원하고 실시간 소통 환경을 구현했습니다.
- 알고리즘 해설 영상을 에디터 내부에서 바로 확인할 수 있도록 구성해 학습 흐름이 끊기지 않도록 개선했습니다.
- Micro Frontend 구조로 서비스를 분리해 트래픽 증가 상황에서도 독립적으로 확장 가능한 구조를 구성했습니다.
- 실행 결과를 실시간으로 확인할 수 있는 콘솔 기능을 추가해 디버깅 경험을 개선했습니다.
TypeScript
Next.js
Emotion
RestAPI
Axios
AWS EC2
Monaco Editor
Socket IO
AgoraRTC
Vimeo
온라인 동영상 강의 플랫폼
오프라인 강의를 온라인에서도 수강할 수 있도록 동영상 강의 플랫폼을 개발했습니다. 결제·시청 사용자 페이지와 영상·수강생 관리 어드민 페이지를 중심으로 구현했습니다.
- Toast UI Editor로 강의별 노트 기능을 제공해 수강생이 학습 내용을 정리하고 복습할 수 있도록 구성했습니다.
- Vimeo API와 Hook으로 진도율을 추적해 학습 현황을 명확히 파악할 수 있도록 개선했습니다.
- Lazy Loading을 적용해 상세 페이지 초기 로딩을 개선하고 대용량 이미지로 인한 성능 저하를 줄였습니다.
- 결제 상태 기반 Auth Guard를 구현해 비인가 접근을 차단했습니다.
- 페이지 단위 코드 스플리팅을 적용해 초기 진입 시 체감 성능을 개선했습니다.
TypeScript
Next.js
Recoil
Emotion
Antd
Material UI
GraphQL
Apollo Client
AWS EC2
AWS S3
Toast UI Editor
Vimeo
(주) 뉴비즈스타트
프론트엔드 개발자
오프라인 중심 교육 서비스를 온라인 플랫폼으로 확장하는 프론트엔드 개발을 담당했습니다.
온라인 부트캠프 플랫폼
오프라인 코딩 부트캠프 운영을 지원하며, 온라인 부트캠프 플랫폼으로 확장하는 과정의 프론트엔드 개발을 담당했습니다. 운영 환경에서 발생하는 문제를 빠르게 정리하고 개선으로 연결했습니다.
- 수강생의 에러 상황을 재현·정리해 원인을 파악하고 해결 방법을 공유해 동일 이슈의 반복 발생을 줄였습니다.
- 학습 흐름을 방해하는 UI·UX 문제를 정리해 개선하며 온라인 학습 경험을 안정화했습니다.
- 오프라인 중심 운영 흐름을 온라인 서비스로 전환하는 과정에서 강의 콘텐츠와 학습 도구가 자연스럽게 연결되도록 화면과 기능을 구성했습니다.
TypeScript
Next.js
React Context
Emotion
Antd
GraphQL
Apollo Client
AWS EC2
AWS S3
Toast UI Editor
Vimeo
Skills.
Overall
- 사용자 경험은 디테일에서 완성된다고 생각하며, 기능이 복잡할수록 명확한 인터페이스와 즉각적인 피드백을 중요하게 봅니다.
- 경험이 없는 영역이라도 문제 해결에 필요하다면 빠르게 학습하고 실험하며, 상황에 가장 적합한 결과를 만드는 데 집중해 왔습니다.
- 항상 최신 기술을 선택하기보다는 서비스 규모, 팀 숙련도, 유지보수 비용을 함께 고려해 합리적인 기술 결정을 내리려 노력합니다.
- 개인의 생산성뿐 아니라 팀 전체의 효율을 높이기 위해 개발 프로세스와 공통 규칙, 협업 방식 개선을 지속적으로 시도해 왔습니다.
JavaScript / TypeScript
- JavaScript와 TypeScript를 단순한 문법 도구가 아닌, 복잡한 로직을 안전하게 표현하기 위한 설계 수단으로 사용해 왔습니다.
- 런타임 오류를 줄이기 위해 타입을 맞추는 것보다 의도와 책임이 드러나는 타입 설계에 더 많은 시간을 투자합니다.
- 비동기 로직과 실시간 데이터 흐름, 상태 변화가 얽힌 코드에서도 타입을 기준으로 경계와 역할을 나누는 방식을 선호합니다.
- Node.js 생태계의 다양한 툴링을 활용해 개발 과정에서 반복되거나 비효율적인 작업을 줄이는 데 관심이 많습니다.
Web
- 의미 있는 시맨틱 마크업과 접근성을 고려해 UI를 구성하며, 공통 컴포넌트 기준을 정리해 일관된 사용자 경험을 유지했습니다.
- Safari와 모바일 브라우저 등 다양한 환경에서 발생하는 이슈를 직접 디버깅하며, 실사용 환경 중심의 트러블 슈팅 경험을 쌓았습니다.
- SEO를 고려한 구조 설계로 검색 엔진 노출을 개선하고, 서비스 유입에 기여했습니다.
- Styled-components, Emotion, Tailwind CSS 등 여러 스타일링 방식을 프로젝트 성격에 맞게 선택해 사용해 왔습니다.
React / Next.js
- 함수 컴포넌트와 Hooks를 기반으로 컴포넌트를 설계하며, 비즈니스 로직을 재사용 가능한 Hook으로 분리하는 것을 선호합니다.
- Context와 React Query를 도메인 단위로 설계해 확장성과 유지보수성을 고려한 상태 관리를 경험했습니다.
- Next.js 환경에서 요구사항에 따라 CSR, SSR, SSG, ISR 중 적절한 렌더링 전략을 선택해 왔습니다.
- SSR 마이그레이션 과정에서 하이드레이션 불일치 문제를 직접 해결하며 렌더링 전략에 대한 실전 경험을 쌓았습니다.
Architecture
- 여러 서비스에서 공통으로 사용하는 UI와 로직을 분리하기 위해 pnpm 기반 모노레포를 설계하고, 신규 화면 구축 시간을 평균 50% 단축했습니다.
- 서비스 성격과 배포 주기를 고려해 Micro Frontend 구조를 도입하고, 기능 단위로 독립적인 개발·배포 흐름을 구성했습니다.
- 변경 범위를 최소화하기 위해 프로젝트 단위 개별 배포가 가능하도록 CI/CD 파이프라인을 설계했습니다.
- 실시간 협업 에디터를 포함한 서비스를 동시 접속 환경에서도 안정적으로 운영했습니다.
Testing
- Jest를 활용해 주요 비즈니스 로직과 유틸 함수에 대한 단위 테스트를 작성하며 변경에 대한 안정성을 확보해 왔습니다.
- 리팩토링과 기능 확장 시 회귀 버그를 줄이기 위해 테스트 대상을 우선순위 기반으로 선정하는 방식을 선호합니다.
- 테스트는 커버리지 수치보다 개발자가 안심하고 코드를 수정할 수 있는 환경을 만드는 수단이라고 생각합니다.
DevOps
- GitHub Actions 기반의 CI/CD 파이프라인을 구성·운영하며 배포 안정성과 개발 흐름을 유지해 왔습니다.
- 모노레포 환경에서 변경된 프로젝트만 개별 배포하도록 구성해 빌드 및 배포 효율을 개선했습니다.
- AWS S3, CloudFront, EC2 등을 활용한 프론트엔드 서비스 운영 경험을 보유하고 있으며, 반복 작업을 자동화하는 도구를 직접 작성해 왔습니다.
Communication
- 소통에서는 부드러움보다 명확함을 우선하며, 애매한 합의보다는 근거 있는 의견 제시를 선호합니다.
- 의견 자체보다 왜 그렇게 생각하는지를 공유하는 것이 중요하다고 믿습니다.
- 모르는 부분이 생기면 추측으로 넘기지 않고, 솔직하게 공유하고 함께 확인하는 방식을 선택해 왔습니다.
- 개발팀 리드 경험을 통해 좋은 결과는 개인의 역량보다 의사소통 구조와 타이밍에서 나온다는 것을 배웠습니다.
Education.
한국방송통신대학교
컴퓨터과학과
코드캠프
프론트엔드 2기
웹 디자인 기능사
한국 산업인력 공단
우송대학교
국제경영학부 전략경영전공