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
React
Frontend
02
TypeScript
Frontend
03
Next.js
Frontend
04
Tailwind
Frontend
05
Framer Motion
Frontend
06
Zustand
Frontend
07
Jotai
Frontend
08
Node.js
Backend
09
Spring Boot
Backend
10
Java 21
Backend
11
Supabase
Backend
12
PostgreSQL
Backend
13
Turborepo
Tool
14
Vite
Tool
15
Vitest
Tool
16
Figma
Tool
신기술을 배우는 것을 좋아합니다. 요즘은 하네스 엔지니어링에 관심이 많습니다.