bendd.A PERSONAL WORKSPACE
이재민의 프로필 사진

이재민

JAEMIN LEESoftware Engineer

인터페이스는 당신의 의도를 이해했다는 신호를 보냅니다.

사용자의 의도에 자연스럽게 반응하는 인터페이스를 만듭니다. 부터 화면 전환의 흐름까지, 복잡한 사용자 인터페이스도 쉽게 이해하고 사용할 수 있도록 인터랙션을 설계하고 구현합니다.

보이는 모습만큼 사용할 때의 감각을 중요하게 생각합니다. 반응의 속도와 을 실험하고, 접근성과 성능을 함께 살핍니다. 이해를 돕는 움직임은 정교하게 다듬고, 사용을 방해하는 움직임은 덜어냅니다.

아이디어를 직접 구현하고 반복해서 사용해 보며, 작은 어색함까지 다듬는 데 기꺼이 시간을 씁니다. 그렇게 쌓인 디테일이 제품 고유의 사용감을 만들고, 사용자가 그 제품을 다시 선택하는 이유가 된다고 믿습니다.

Projects

직접 쓰기 위해 만든 도구

Synchronize Tab Scrolling

원문과 번역문, 두 탭의 읽는 위치를 함께 맞춥니다.

BROWSER EXTENSION
SCROLL IN SYNC
ORIGINAL
A little less friction.

Good tools begin with the things we do every day.

Two pages. One place.

Read the original and its translation together, without losing your place.

Small details help us stay focused on what matters.

Built for everyday use.

Keep your reading flow, from one paragraph to the next.

TRANSLATION
불편함을 조금 덜어내는 일.

좋은 도구는 매일 반복하는 작은 일에서 시작됩니다.

두 페이지. 같은 위치.

읽던 곳을 놓치지 않고 원문과 번역문을 함께 읽습니다.

작은 디테일이 중요한 내용에 집중하도록 돕습니다.

일상에서 쓰는 도구.

문장에서 다음 문장으로, 읽기의 흐름을 이어갑니다.

20%
만든 과정
Source

Craft

작은 움직임을 직접 만져보세요

DOCK / HOVER & RESIZE
위아래로 끌어 크기를 조절합니다. 우클릭이나 Enter로 설정을 엽니다.

구분선을 위아래로 끌어 크기 조절 · 우클릭으로 세부 설정

이 데모만 변경 · 40px

직접 크기를 조절하는 Dock

구분선으로 크기를 조절하고, 아이콘에 올리면 크기와 간격이 반응합니다.

macOS Dock에서 영감을 받은 인터랙션 · 이 사이트의 탐색에도 적용

CODE / WALKTHROUGH
01클릭에서 시작동작에 이름을 붙입니다

저장 버튼이 할 일을 하나의 함수로 묶습니다. 이름만으로도 어떤 동작인지 알 수 있습니다.

코드 1행
function saveNote() {
  save();
}

스크롤로 한 부분씩 읽기방향키로 설명을 이동하고, Tab 키로 이 영역을 나갈 수 있습니다.

1 / 8

단계별 코드 설명

한 번에 한 부분씩, 설명과 코드의 초점을 맞춥니다.

Shiki Magic Move 기반 · 설명 흐름과 접근성 개선

TEXT / UNICODE올리거나 눌러 보세요

문자별 텍스트 셔플

한글·영문·숫자·기호를 각자의 문자 안에서 섞습니다.

Rauno에서 영감을 받아 문자별 처리로 확장

Writing

모든 글

Tech Stack

만들고, 다듬고, 검증하는 도구

Web & Interface

화면의 구조와 스타일

  • TypeScript
  • React
  • Next.js
  • Svelte
  • Tailwind CSS
  • Emotion
  • Radix UI

Design & Motion

시각 설계와 인터랙션

  • Figma
  • Zeplin
  • Motion
  • GSAP

Data & Backend

API, 실행 환경, 데이터 저장

  • Node.js
  • Bun
  • Python
  • Hono
  • GraphQL
  • Apollo Client
  • Drizzle
  • PostgreSQL
  • MongoDB
  • DuckDB

State & Validation

상태 관리와 데이터 검증

  • TanStack
  • Zustand
  • Zod
  • ArkType

Testing & UI Review

동작 검증과 컴포넌트 리뷰

  • Vitest
  • Playwright
  • MSW
  • Storybook
  • Chromatic

Build & Monorepo

빌드와 패키지 구성

  • Vite
  • esbuild
  • webpack
  • SWC
  • Babel
  • Turborepo
  • Lerna
  • Nx

Delivery & Monitoring

변경 이력, 배포, 서비스 관측

  • Git
  • GitHub Actions
  • Vercel
  • Argo CD
  • Sentry
  • Umami
  • Datadog

Workflow & AI

탐색, 사고, 구현을 돕는 도구

  • ChatGPT
  • Claude
  • Cursor
  • Gemini
  • Grok

Collaboration

기록과 팀 커뮤니케이션

  • Slack
  • Jira
  • Confluence
  • Notion
  • Obsidian

작게 보태는 오픈 소스

Nextra 검색 메모리 누수 수정Merged · #2746

검색어에 공백이 연속으로 들어가면 검색 결과를 강조하는 처리가 무한 반복되며 메모리가 증가하는 문제를 발견했습니다. 공백 처리와 반복문의 종료 조건을 고쳐, 검색이 정상적으로 끝나도록 기여했습니다.