이승민
Frontend Engineer
디자인 시스템과 컴포넌트 라이브러리로 제품의 완성도를 끌어올리는 프론트엔드 엔지니어예요.
- smlee98@kakao.com
- +82 10 9405 8375
- smlee.info
- 서울, 대한민국
소개
좋은 기본값은 배려를 노력에서 구조로 바꾼다 — 이 문장을 믿는 프론트엔드 엔지니어예요. 버튼의 크기, 색의 이름, 에러 문구가 놓이는 자리 같은 작은 결정들이 결국 쓰는 사람의 경험을 정한다고 생각해서, 그 결정들을 한 번 잘 내려두는 일 — 디자인 시스템과 컴포넌트 라이브러리 만드는 일을 좋아해요.
공공 프로젝트마다 같은 화면을 처음부터 다시 만드는 게 아까워서, KRDS(대한민국 정부 디자인 시스템) 컴포넌트 라이브러리 krdscn/ui를 만들어 공개했어요. (주)그리드원에서는 사내 디자인 시스템을 구축하며 '한 번 잘 만들어두면 모두가 빨라진다'는 재미를 알게 됐고, 지금은 AI 에이전트 솔루션의 프론트엔드를 만들고 있어요.
회사에 디자이너가 따로 없어서 오랫동안 디자이너 겸 프론트엔드 개발자로 일했어요. Figma와 Photoshop으로 직접 그린 화면을 코드로 그대로 옮기다 보니, 픽셀이 어긋난 화면을 그냥 넘기지 못하는 성격이 됐죠. Node.js 백엔드와 Docker·Kubernetes 인프라까지 다뤄본 경험은 화면 뒤에서 무슨 일이 일어나는지 이해하는 데 큰 힘이 돼요.
보유 기술
- Language
- TypeScript
- JavaScript
- Frontend
- React
- Next.js
- Tailwind CSS
- shadcn/ui
- Radix UI
- Base UI
- Framer Motion
- GSAP
- TanStack
- Backend & Database
- Node.js
- Fastify
- Prisma
- PostgreSQL
- MongoDB
- Redis
- nginx
- Workflow & AI
- Docker
- Git
- GitHub
- Claude
- DevOps
- Linux
- Kubernetes
- Design
- Figma
- Photoshop
경력
대리 / Frontend Engineer
(주)그리드원 · 서울
- React
- Next.js
- TypeScript
- Design System
- Node.js
- Fastify
- AI Agent
프론트엔드와 디자인 시스템을 중심으로 솔루션 개발을 담당하고 있어요. 지금은 AI 에이전트 솔루션을 만들고 있고, 대기업/공공기관 SI 프로젝트에도 다수 투입됐어요.
- 사내 디자인 시스템 구축 - 공통 컴포넌트와 디자인 토큰 설계
- AI 에이전트 솔루션 설계 및 개발 (진행 중)
- N은행 - 퍼블리싱 (2021.09 - 2022.01)
- K생명 - 퍼블리싱 (2022.07 - 2022.09)
- W공사 - 프론트엔드 개발 (2024.07 - 2025.02)
- D공사 - 프론트엔드 개발 (2025.05 - 2025.11)
- G공사 - 프론트엔드 개발 (2026.06 - 진행 중)
- 회사 홈페이지 개발
학력
고려사이버대학교
학사 · 소프트웨어공학과
한국폴리텍대학교 청주캠퍼스
정보통신시스템과
자격증
웹디자인개발기능사
한국산업인력공단
경력기술서
krdscn/ui
- Next.js
- React
- TypeScript
- Tailwind CSS
- Radix UI
- shadcn/ui
- Playwright
KRDS(대한민국 정부 디자인 시스템)는 가이드는 자세한데 가져다 쓸 코드가 없어서, 공공 프로젝트마다 같은 화면을 처음부터 다시 만들어야 했어요. 그 반복을 끝내려고 shadcn/ui + Radix + Tailwind CSS v4 위에 KRDS 컴포넌트 41개를 구현해 공개했어요. 접근성은 컴포넌트의 기본값으로 넣었고, 199개 예제 문서는 코드와 어긋나면 빌드가 깨지게, 공식 KRDS Storybook과는 Playwright로 나란히 비교해 검증해요.
smlee.info
- Next.js
- React
- Tailwind CSS
- shadcn/ui
- MDX
지금 보고 계신 포트폴리오예요. 소개 페이지 하나로 끝내지 않고 하나의 제품처럼 만들었어요 — 만든 컴포넌트를 남이 가져다 쓸 수 있는 레지스트리, 글을 쓰는 MDX 블로그, 링크를 공유하면 미리보기 이미지가 자동으로 만들어지는 것까지 직접 구현했어요.
G공사 생성형 AI 플랫폼 구축
- Next.js
- React
- TypeScript
- Tailwind CSS
- shadcn/ui
- assistant-ui
- Vercel AI SDK
- Turborepo
여러 AI 서비스를 한곳에 모으는 생성형 AI 플랫폼의 프론트엔드를 개발하고 있어요. 20여 개의 Next.js 앱을 공유 디자인 시스템과 함께 모노레포로 운영하는 마이크로 프론트엔드 구조로, RAG 챗봇·AI 회의록·비주얼 에이전트 빌더 같은 서비스의 화면과 SSE 토큰 스트리밍 채팅 UI를 만들고 있어요.
D공사 맞춤형 생성형 AI 구축
- Next.js
- React
- TypeScript
- Tailwind CSS
- shadcn/ui
- assistant-ui
- Vercel AI SDK
사내 맞춤형 생성형 AI 서비스의 프론트엔드를 개발했어요. RAG 챗봇과 문서 분석·보고서 생성 같은 AI 도구, 지식 DB·프롬프트·통계를 다루는 관리자 콘솔을 구현했고, 백엔드 SSE 스트림을 채팅 UI로 이어 붙이는 스트리밍 파이프라인을 만들었어요. 하나의 코드베이스를 내부망/외부망 두 타겟으로 나눠 배포하는 구조가 특징이에요.
W공사 업무용 생성형 AI RAG 서비스 구축
- Next.js
- React
- TypeScript
- Tailwind CSS
- shadcn/ui
- Vercel AI SDK
- Turborepo
업무 문서를 근거로 답하는 기업용 생성형 AI RAG 서비스의 프론트엔드를 개발했어요. 모노레포에서 챗봇·관리·커뮤니티 앱을 나눠 구성했고, 업무 도메인별 RAG 백엔드를 Vercel AI SDK 커스텀 프로바이더로 추상화해 스트리밍 채팅 UI에 연결했어요. HWP·PDF 뷰어와 문서 전처리 관리 화면 등 문서 중심 기능을 폭넓게 다뤘어요.
그리드원 홈페이지 개발
- Next.js
- React
- TypeScript
- Tailwind CSS
- Prisma
- Framer Motion
그리드원 공식 홈페이지를 개발하고 운영하고 있어요. AI 에이전트·솔루션 소개부터 회사 소개·자료실·문의까지 이어지는 사이트를 Next.js로 만들었고, 콘텐츠를 직접 관리하는 관리자 화면(에디터·게시판)도 함께 구현했어요.
K생명 RPA 포털 시스템 구축
- Pug
- SCSS
- Bootstrap
- Parcel
- jQuery
- Chart.js
RPA 운영 포털 100여 개 화면의 퍼블리싱을 담당했어요. Pug 템플릿의 믹스인과 상속으로 화면을 컴포넌트화하고, Bootstrap 5를 SCSS로 커스터마이즈해 공통 UI 킷을 만들었어요. 라이트/다크/자동 3단 다크 모드와 차트·간트·캘린더 같은 대시보드형 컴포넌트까지 마크업 단계에서 구현했어요.
N은행 RPA 솔루션 추가 개발
- HTML
- CSS
- jQuery
- Bootstrap
- Chart.js
RPA 관리 포털 88개 화면의 퍼블리싱을 담당했어요. Bootstrap 4와 jQuery 기반으로 대시보드·모니터링·스케줄 간트·게시판 화면을 마크업했고, 공통 내비게이션과 데이터 테이블처럼 반복되는 패턴을 공통 스크립트·스타일로 정리해 화면 간 일관성을 유지했어요.