TL;DR

  • Timeful은 Vue와 Tailwind 프로젝트를 시각적으로 편집하고 변경 사항을 로컬 코드에 즉시 반영하는 편집기로, AI 없이도 실제 코드를 직접 다루며 개발자가 변경 사항을 검토하고 저장소에 병합할 수 있음.
  • 디자인과 코드는 같은 프로젝트 파일을 기반으로 양방향 동기화되며, 서버에 코드를 맡기거나 별도로 내보내는 단계가 없음.
  • 색상·간격·레이아웃·디자인 토큰·자유형 도형·자동 레이아웃·반응형 브레이크포인트와 상태를 편집할 수 있음.
  • AI 에이전트는 기기의 프로젝트 폴더에서 표준 Vue와 Tailwind 코드에 접근하며, 코드 변경 사항은 Timeful 디자인에도 반영됨.
  • Vue 3 구성 API, Tailwind CSS 3, Vite, Nuxt를 지원하고 Mac 다운로드와 신용카드가 필요 없는 무료 체험을 제공함.

시각 편집기

  • Timeful은 개발자도 선호하는 시각 편집기를 표방하며, 편집 내용을 실제 코드로 변환하고 AI를 요구하지 않음.
  • 개발자는 코드 변경 사항을 검토해 자신의 저장소에 병합할 수 있음.
  • 예시 화면은 Vue와 Tailwind 기반의 핀보드 인터페이스로, 탐색 메뉴, 스크롤 영역, 탭, 검색창, 이미지 타일로 구성됨.
  • 예시 코드에서는 스크롤 위치를 감지해 상단 탭 영역의 좌우 패딩을 바꾸고, Featured·Nature·People 탭과 Masonry 이미지 레이아웃을 표시함.
  • 화면은 모바일과 데스크톱 미리보기를 나란히 보여주며, 이미지 항목에는 소스와 종횡비, 대체 텍스트, 프레임 위치·크기, 여백, 모서리, 채우기, 테두리, 효과, 타이포그래피 등의 설정이 포함됨.

디자인과 코드 동기화

  • 디자인은 중간 내보내기 절차 없이 프로덕션 준비 코드로 저장되며, 동기화는 백그라운드에서 진행됨.
  • 디자이너와 개발자는 같은 Vue 파일을 열어 사용하며, 디자이너는 시각적 레이아웃을 편집하고 개발자는 로직을 작성함. 모든 변경 사항은 코드에 저장됨.
  • 캔버스에 보이는 결과가 프로덕션에 게시되는 결과와 동일하다고 설명함.
  • 프로젝트는 사용자가 제어하지 않는 서버에 잠기지 않고 기기의 폴더에 저장됨.
  • 디자인은 예측 가능한 알고리즘으로 코드에서 불러오고 코드에 저장되며, 디자인과 코드가 서로 변경 사항을 반영함. 코드가 데이터 형식이므로 내보내기 단계나 AI 크레딧이 필요하지 않음.
  • 프로젝트는 팀과 공유할 수 있는 일반 Git 저장소이며, 프로덕션의 최신 코드 변경 사항을 가져오면 디자인에도 즉시 반영됨.
  • 컴포넌트, 디자인 토큰, 색 공간을 포함한 작업 요소가 디자이너와 개발자에게 동일한 코드로 제공됨.

디자인 편집

  • 기존에 익숙한 캔버스, 작업 흐름, 도구를 사용하면서 디자인의 자유도를 유지함.
  • 색상, 간격, 레이아웃 등 각 스타일을 세밀하게 조정할 수 있으며, 예시 속 설정에는 채우기 Indigo 500, 너비 135px, 높이 Fit, 정렬, 불투명도 100, 블렌드 Overlay, 그림자 Large, 패딩 5, 간격 Wide, 크기 xl, 실선 테두리와 Round 모서리가 포함됨.
  • Indigo 100부터 Indigo 900까지의 색상 단계와 36·32·28·24·20·16·14·12 크기 값이 표시됨.
  • Tailwind 디자인 토큰을 사용하거나 임의 스타일을 선택할 수 있음.
  • 캔버스에서 자유형 도형을 끌어 이동하고 크기를 조정할 수 있음.
  • 자동 레이아웃 프레임은 콘텐츠에 맞춰 크기와 배치를 조정하며 정렬과 간격을 세밀하게 제어함.
  • 브레이크포인트와 상태를 나란히 확인하고 각각 별도로 편집할 수 있음.

AI와 함께 작업

  • 프로젝트 전체가 기기의 로컬 환경에서 AI 에이전트에 제공되며, 표준 Vue와 Tailwind 코드로 편집 가능함.
  • 예시에서는 에이전트가 ~/projects/pinboard 프로젝트에서 src/components/Nav.vue와 src/components/NavItem.vue를 읽고 Nav.vue를 수정함.
  • 화면이 좁을 때 가로 메뉴 링크가 맞지 않는다는 요청에 따라, 예시 변경 사항은 작은 화면에서 메뉴 버튼과 열림 상태에 따라 표시되는 메뉴를 추가하고 중간 크기 화면부터 가로 메뉴를 표시하는 구성임.
  • 에이전트는 약 380px보다 좁은 화면에서 탐색 메뉴를 왼쪽 사이드바로 접고, 어두운 배경 위에 겹쳐 표시한다고 설명하며, 페이지 콘텐츠를 밀어낼지 현재처럼 겹칠지 질문함.
  • 기기의 프로젝트 폴더를 어떤 AI 에이전트에 연결해도 변경 사항이 발생할 때마다 Timeful 디자인이 자동으로 갱신됨.
  • Timeful은 일반적인 Vue와 Tailwind 코드베이스에서 작동하므로 별도의 독점 형식, 프레임워크, 서버가 없으며 프로젝트 내용 전체를 맥락으로 활용할 수 있음.

코드

  • Timeful은 기기의 폴더에 일반 코드를 저장하며, 내보내기나 서버에 종속되지 않음.
  • 디자인 코드는 일반 Vue 컴포넌트로 기기에 저장되고 어디서든 게시하거나 공유할 수 있음.
  • 사용자 지정 코드나 종속을 유발하는 독점 파일 형식이 없음.
  • 스타일을 바꾸면 가능한 한 최소한으로 수정하며, 스타일 변경은 코드 한 줄만 바뀌는 방식임. 기존 코드 서식도 유지됨.
  • Git으로 변경 사항을 푸시하고 가져와 협업하거나 이전 버전으로 되돌릴 수 있음.

자주 묻는 질문

  • 지원하는 Vue와 Tailwind 버전은 무엇인가? Vue 3의 구성 API와 단일 파일 컴포넌트(SFC), Tailwind CSS 3을 지원함.
  • Vite 같은 빌드 도구와 함께 작동하는가? 모든 Vite 설정과 플러그인을 사용할 수 있음.
  • Nuxt 같은 프레임워크와 함께 작동하는가? Nuxt와 함께 사용할 수 있음.
  • 어떤 Vue 코드를 생성하는가? Tailwind 유틸리티 클래스를 사용하는 깔끔하게 서식화된 Vue 코드를 생성함. 템플릿 블록만 수정하고 스크립트 블록과 로직은 그대로 둠. 기존 코드 서식은 유지하며 수정된 요소만 다시 서식화함.
  • React를 지원하는가? 아직 지원하지 않으며, 현재 버전은 Vue와 Tailwind에서 작동함.
  • Git 양방향 동기화는 어떻게 작동하는가? Timeful은 로컬 시각 통합 개발 환경(IDE)처럼 작동함. 캔버스에서 변경하면 로컬 파일에 직접 기록되며, 사용자는 기존 작업 흐름으로 변경 사항을 Git 저장소에 커밋하고 푸시함.
  • 소스 코드를 Timeful 서버에 저장하는가? 저장하지 않음. 코드는 로컬 저장소와 버전 관리 시스템에 남으며 Timeful은 로컬에서 실행됨. 제품 설명에 따르면 이를 통해 지식 재산과 소스 코드가 완전히 안전하게 유지됨.
  • Figma 디자인을 직접 가져올 수 있는가? 가져올 수 없음. Figma와 유사한 인터페이스로 학습 부담을 낮추지만, 정적인 디자인 레이어를 가져오는 대신 Vue 파일을 직접 다룸. Figma 플러그인으로 디자인을 Vue 코드로 내보내거나 Figma 파일을 참고해 컴포넌트를 다시 만들 수 있음.
  • 사용자 지정 Tailwind 설정과 플러그인을 지원하는가? 아직 지원하지 않으며 기본 Tailwind 설정을 사용함.

다운로드 및 체험

  • Timeful은 Mac용 다운로드를 제공하며 무료 체험에는 신용카드가 필요하지 않음.