이승민
Frontend Engineer.
Overview
Social Links
GitHub Contributions
안녕하세요
좋은 기본값은 배려를 노력에서 구조로 바꾼다 — 이 문장을 믿는 프론트엔드 엔지니어예요. 버튼의 크기, 색의 이름, 에러 문구가 놓이는 자리 같은 작은 결정들이 결국 쓰는 사람의 경험을 정한다고 생각해서, 그 결정들을 한 번 잘 내려두는 일 — 디자인 시스템과 컴포넌트 라이브러리 만드는 일을 좋아해요.
공공 프로젝트마다 같은 화면을 처음부터 다시 만드는 게 아까워서, KRDS(대한민국 정부 디자인 시스템) 컴포넌트 라이브러리 krdscn/ui를 만들어 공개했어요. (주)그리드원에서는 사내 디자인 시스템을 구축하며 '한 번 잘 만들어두면 모두가 빨라진다'는 재미를 알게 됐고, 지금은 AI 에이전트 솔루션의 프론트엔드를 만들고 있어요.
회사에 디자이너가 따로 없어서 오랫동안 디자이너 겸 프론트엔드 개발자로 일했어요. Figma와 Photoshop으로 직접 그린 화면을 코드로 그대로 옮기다 보니, 픽셀이 어긋난 화면을 그냥 넘기지 못하는 성격이 됐죠. Node.js 백엔드와 Docker·Kubernetes 인프라까지 다뤄본 경험은 화면 뒤에서 무슨 일이 일어나는지 이해하는 데 큰 힘이 돼요.
Components(8)
블로그(6)
krdscn/ui #5
마우스 없이 쓰는 사람들
키보드와 화면낭독기로 웹을 쓰는 사용자들이 있어요. 화면은 빨간데 낭독기는 조용한 폼을 구조적으로 불가능하게 만든 이야기, krdscn/ui 시리즈의 마지막 글이에요.
- 웹접근성
- 폼
- KRDS
- Radix UI
- Published on
krdscn/ui #4
"같다"는 말을 증명하기
공식과 똑같이 만들었다는 걸 어떻게 보여줄까요? 기계에게 판정을 맡기려다 막히고, 기계와 사람의 역할을 다시 나눈 이야기예요.
- Playwright
- 시각 검증
- 문서화
- KRDS
- Published on
krdscn/ui #3
정부의 파랑은 몇 번일까
색에 이름을 붙이는 일, 디자인 토큰 이야기예요. KRDS 공식 토큰 이름을 지킬 것인가 버릴 것인가 — 표준을 구현하며 가장 오래 고민한 결정 중 하나였어요.
- 디자인 토큰
- KRDS
- Tailwind CSS
- 다크 모드
- Published on
krdscn/ui #2
만들지 않기로 했어요
41개 컴포넌트를 전부 직접 만들 것인가, 검증된 것 위에 얹을 것인가. krdscn/ui의 방향을 가른 첫 번째 고민이에요.
- shadcn/ui
- 아키텍처
- 디자인 시스템
- Radix UI
- Published on
krdscn/ui #1
가이드는 있는데 코드가 없다 — krdscn/ui를 만든 이유New
공공 프로젝트마다 같은 화면을 처음부터 다시 만들던 반복이 아까워서, 직접 만들어 공개했어요. KRDS 컴포넌트 라이브러리 krdscn/ui 이야기의 시작이에요.
- KRDS
- 디자인 시스템
- 공공 웹
- shadcn/ui
- Published on
smlee.info #1
새 포트폴리오를 열었습니다
smlee.info 포트폴리오 사이트를 새로 만들었습니다. 기술 스택과 구조를 소개합니다.
- Next.js
- 포트폴리오
- MDX
- Published on
기술 스택
경력
프론트엔드와 디자인 시스템을 중심으로 솔루션 개발을 담당하고 있어요. 지금은 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 - 진행 중)
- 회사 홈페이지 개발
- React
- Next.js
- TypeScript
- Design System
- Node.js
- Fastify
- AI Agent
학력
프로젝트(2)
KRDS(대한민국 정부 디자인 시스템)는 가이드는 자세한데 가져다 쓸 코드가 없어서, 공공 프로젝트마다 같은 화면을 처음부터 다시 만들어야 했어요. 그 반복을 끝내려고 shadcn/ui + Radix + Tailwind CSS v4 위에 KRDS 컴포넌트 41개를 구현해 공개했어요. 접근성은 컴포넌트의 기본값으로 넣었고, 199개 예제 문서는 코드와 어긋나면 빌드가 깨지게, 공식 KRDS Storybook과는 Playwright로 나란히 비교해 검증해요.
- Next.js
- React
- TypeScript
- Tailwind CSS
- Radix UI
- shadcn/ui
- Playwright
지금 보고 계신 포트폴리오예요. 소개 페이지 하나로 끝내지 않고 하나의 제품처럼 만들었어요 — 만든 컴포넌트를 남이 가져다 쓸 수 있는 레지스트리, 글을 쓰는 MDX 블로그, 링크를 공유하면 미리보기 이미지가 자동으로 만들어지는 것까지 직접 구현했어요.
- Next.js
- React
- Tailwind CSS
- shadcn/ui
- MDX
사내 프로젝트(6)
여러 AI 서비스를 한곳에 모으는 생성형 AI 플랫폼의 프론트엔드를 개발하고 있어요. 20여 개의 Next.js 앱을 공유 디자인 시스템과 함께 모노레포로 운영하는 마이크로 프론트엔드 구조로, RAG 챗봇·AI 회의록·비주얼 에이전트 빌더 같은 서비스의 화면과 SSE 토큰 스트리밍 채팅 UI를 만들고 있어요.
서비스 홈 
에이전트 팜 
시스템 대시보드 
지식 DB 관리
- Next.js
- React
- TypeScript
- Tailwind CSS
- shadcn/ui
- assistant-ui
- Vercel AI SDK
- Turborepo
자격증(1)
웹디자인개발기능사
- Issued by
- 한국산업인력공단
- Issued on