01
Design Systems
디자인 토큰부터 컴포넌트 라이브러리까지 — 디자이너와 함께 만들고, 코드와 Figma가 어긋나지 않도록 설계합니다.
Frontend Architecture
Design Systems
Type-Safe by Default
Pixel Perfect
Built for Humans
Seoul · Remote
Frontend Architecture
Design Systems
Type-Safe by Default
Pixel Perfect
Built for Humans
Seoul · Remote
01 — About
프론트엔드 개발자, OKOJIN
안녕하세요. 신입 프론트엔드 개발자로, 디자인 시스템과 성능 최적화를 양 축으로 인터페이스를 짓고 있습니다.
눈에 보이지 않는 코드의 구조와, 눈에 너무 잘 보이는 1px의 정렬을 동시에 신경 씁니다. 잘 짜여진 시스템은 결국 사용자가 망설이지 않게 만들고, 그게 좋은 제품의 조용한 기초라고 믿어요.
현재는 Next.js · Spring Boot 기반의 개인 아카이브 블로그를 개발 및 운영하며, 알고리즘 풀이와 학습, 트러블슈팅 기록을 함께 남기고 있습니다.
0
Articles published
0
Problems solved
0
Total visitors
02 — Core
핵심 역량, 네 가지
02
Performance
LCP / INP를 숫자로 다룹니다. 번들 분석, RSC 경계 설계, 이미지 / 폰트 로딩 최적화로 체감 속도를 끌어올립니다.
03
Type-Safe Arch.
런타임 에러를 컴파일 타임으로 가져옵니다. discriminated union, zod, satisfies를 일상처럼 씁니다.
04
Motion & Detail
인터랙션의 80%는 잘 짜인 트랜지션입니다. 16ms를 신경 쓰고, 사용자가 흐름을 잃지 않도록 마이크로 모션을 설계합니다.
03 — Tech Stack
주로 쓰는 Tech
01
JavaScript
Frontend
02
TypeScript
Frontend
03
Java
Backend
04
React.js
Frontend
05
Next.js
Frontend
06
Vite
Tool
07
TanStack Query
Frontend
08
Zustand
Frontend
09
Jotai
Frontend
10
Framer Motion
Frontend
11
Turborepo
Tool
12
Tailwind
Frontend
13
Emotion
Frontend
14
SCSS
Frontend
15
Playwright
Tool
16
Storybook
Tool
17
Jest
Tool
18
Spring Boot
Backend
19
PostgreSQL
Backend
20
Supabase
Backend
21
GitHub Actions
Tool
22
Vercel
Tool
신기술을 배우는 것을 좋아합니다. 요즘은 하네스 엔지니어링에 관심이 많습니다.