Claude를 활용한 바이브 코딩으로 제작한 파라미터 기반 시계 디자인 도구

커뮤니티 반응

작성자가 공개한 오픈소스 프로젝트의 실용성과 바이브 코딩의 효율성에 대해 긍정적인 반응을 보이고 있습니다.

주요 논점

01찬성다수

바이브 코딩은 명확한 목표가 있을 때 지루한 구현 과정을 자동화하는 데 매우 효율적이다.

합의점 vs 논쟁점

합의점

SVG 기하학 계산과 UI 스타일링은 LLM이 처리하기에 매우 적합한 영역이다.
복잡한 상태 관리 로직에서는 여전히 개발자의 개입과 반복적인 수정이 필요하다.

실용적 조언

SVG 생성 시 opentype.js를 사용하면 폰트 의존성 없는 벡터 파일을 내보낼 수 있어 레이저 커팅용 파일 제작에 유리하다.
복잡한 UI 상태는 로컬 스토리지를 활용하고 useEffect에 디바운스를 적용하여 성능과 데이터 보존을 동시에 챙길 수 있다.

섹션별 상세

복잡한 SVG 기하학 계산을 Claude에게 맡겨 효율적으로 구현했다. 작성자가 시계 눈금 위치, 다각형 회전, 사각형 면의 교차점 등 수학적 모델을 제시하면 Claude가 이를 깨끗한 TypeScript 코드로 변환하여 1~2회 시도 만에 정확한 결과를 도출했다. 이는 명확한 멘탈 모델이 있을 때 LLM이 지루한 구현 작업을 대신하는 데 매우 효과적임을 보여준다.

React 상태 관리와 UI 스타일링에서 바이브 코딩의 강점이 드러났다. 로컬 스토리지를 활용한 자동 저장 기능과 디바운스 구조를 Claude가 제안했으며, Tailwind CSS를 사용한 반응형 사이드바와 토글 UI를 자연어 명령만으로 즉시 완성했다. 특히 UI 구성 요소의 스타일링과 레이아웃 배치에서 개발 시간을 크게 단축했다.

React의 useEffect 내 레이스 컨디션 문제는 Claude도 한 번에 해결하지 못했다. 새 프로젝트 생성 시 기본 설정이 반영되지 않는 버그가 발생했는데, 이는 의존성 배열 내의 클로저 문제로 밝혀졌다. Claude가 콘솔 로그를 분석하여 원인을 진단했으나, 실제 작동하는 수정안을 도출하기까지는 여러 번의 반복적인 대화가 필요했다.

opentype.js를 활용한 텍스트 경로 변환 기능 구현 시 수동 검토가 필수적이었다. 폰트 로딩과 글리프 렌더링, SVG 경로 주입 사이의 조율이 필요했는데, Claude가 작성한 코드의 폰트 서브세팅 폴백 로직 등 세부 사항은 개발자가 직접 검증해야 했다. 이는 외부 라이브러리 통합 시 LLM의 결과물에 대한 인간의 최종 확인이 중요함을 시사한다.

용어 해설

바이브 코딩(Vibe Coding): — 상세한 설계도나 명세서 대신 개발자의 의도와 '느낌(vibe)'을 LLM에게 전달하여 대화형으로 코드를 생성하고 수정해 나가는 개발 방식이다. 엄격한 문법보다 자연어 대화를 통한 반복적 개선에 중점을 둔다.
파라미터 설계(Parametric Design): — 수치(매개변수)를 입력하여 디자인의 형태와 구조를 정의하는 방식이다. 시계의 크기나 눈금 스타일 같은 변수를 바꾸면 전체 디자인이 실시간으로 계산되어 업데이트되는 것이 핵심이다.
텍스트 경로 변환(Text-to-Path): — 폰트 데이터를 벡터 경로(Path) 데이터로 직접 변환하는 기술이다. 이를 통해 결과물 파일에 별도의 폰트 파일이 포함되지 않아도 어떤 환경에서든 동일한 모양의 글자를 출력할 수 있게 한다.
확장 가능한 벡터 그래픽(SVG): — 수학적 수식을 기반으로 이미지를 표현하는 XML 기반의 벡터 파일 형식이다. 해상도 손실 없이 크기 조절이 가능하여 레이저 커팅기나 CNC 장비의 입력 데이터로 널리 사용된다.

언급된 도구

Claude추천

바이브 코딩을 통한 코드 생성 및 로직 구현

opentype.js추천

텍스트를 SVG 경로 데이터로 변환

Tailwind CSS추천

UI 스타일링 및 반응형 디자인

언급된 리소스

DemoClock Face Maker Live App

GitHubClock Face Maker GitHub Repository