Vibe Coding으로 진화한 시스템 디자인 MVP: Darwin의 개발 여정

핵심 기술: 본 콘텐츠는 'Vibe Coding'이라는 접근 방식을 통해 초기 MVP에서 발전된 시스템 디자인 도구 'Darwin'의 개발 과정을 상세히 다룹니다. 사용자 피드백을 반영하여 모바일 최적화, 컴포넌트 라이브러리 확장, Undo/Redo 기능, 스마트 크롭 익스포트 등 핵심 기능들을 개선한 사례를 공유합니다.

기술적 세부사항:
* 모바일 최적화: 데스크톱 경험과 달리, 모바일 환경에서는 래디얼 컴포넌트 메뉴와 스티거링 애니메이션을 사용하여 직관적이고 부드러운 인터페이스를 구현했습니다. useMediaQuery 훅을 활용하여 디바이스별 UI를 분기 처리했습니다.
* 컴포넌트 확장: 기존 6개 컴포넌트에서 enum을 활용하여 사용자, API 게이트웨이, 메시지 큐, 데이터베이스 등 다양한 시스템 디자인 요소를 포함하도록 확장했습니다. 각 컴포넌트는 ElementType별로 아이콘, 색상, 설명이 포함된 설정 객체로 관리됩니다.
* Undo/Redo 구현: 상태 관리를 위한 커스텀 useHistory 훅을 개발하여, 과거, 현재, 미래 상태를 관리하고 실행 취소 및 재실행 기능을 구현했습니다.
* 영역 선택 및 삭제: 스페이스바를 누른 상태로 드래그하여 여러 요소를 한 번에 선택하고 삭제하는 기능을 구현했으며, useCallback을 사용하여 함수를 최적화했습니다.
* 스마트 익스포트: html-to-image 라이브러리를 사용하고, 요소의 위치 및 크기 계산을 통해 다이어그램의 실제 경계를 파악하여 불필요한 여백 없이 이미지를 내보내는 기능을 구현했습니다.
* 아키텍처: React 19, TypeScript, Vite를 기반으로 하며, 모든 로직은 프론트엔드에서 처리합니다. 컴포넌트, 커스텀 훅, 타입 정의, 상수 관리 등 모듈화된 구조를 가집니다.

개발 임팩트:
* 사용자 피드백 기반의 신속한 기능 개선 및 사용자 경험 향상을 통해 실제 시스템 디자인 인터뷰에 활용될 수 있는 수준의 도구로 발전시켰습니다.
* 바닐라 React와 DOM 이벤트만으로 캔버스 인터랙션 시스템을 구축하여 경량화 및 성능 최적화를 달성했습니다.
* "Vibe Coding" 철학을 통해 복잡성을 줄이고 핵심 기능에 집중하는 개발 접근 방식을 보여줍니다.

커뮤니티 반응:
* 초기 블로그 포스트에 대한 긍정적인 반응과 함께 다양한 기능 요청이 있었으며, 특히 모바일 지원 및 멀티 셀렉트 기능은 즉시 반영되었습니다.
* 협업 기능 및 버전 관리 기능은 로드맵에 포함되었으나, 도구의 본질적인 단순성을 유지하기 위해 신중하게 접근하고 있습니다.