728x90
v0로 UI를 생성한후 UI 코드를 실제 프로젝트에서 사용하는 방법입니다. 인터페이스 우측 상단을 보면, 코드를 가져갈 수 있는 여러 옵션을 제공하는 다운로드 아이콘 버튼이 있습니다. 보통 이 버튼을 클릭하면 "Add to Codebase" (CLI 명령어 제공) 또는 "Download ZIP" 같은 메뉴가 나타납니다. 또한 코드 보기 영역 자체에도 복사를 도와주는 아이콘이 있습니다.
다음 세 가지 방법 중 가장 편리한 것을 선택하여 코드를 여러분의 프로젝트로 가져옵니다. 어떤 방법을 선택하시든 괜찮습니다!
방법 ❶: 직접 복사 및 붙여넣기 (복사 버튼 활용)
- 인터페이스의 코드 (Code) 탭을 클릭합니다.
- 코드 영역 상단 오른쪽에 복사(Copy) 아이콘 버튼이 있는지 찾아보세요. 있다면 클릭하여 코드를 클립보드에 복사합니다. (가장 간편!)
- 만약 복사 버튼이 잘 보이지 않는다면, 코드 전체를 직접 마우스로 드래그하여 선택한 후 복사합니다 ([Ctrl/Cmd + C]).
- 커서 편집기에서 src/components/chat-interface.tsx (또는 원하는 이름의 파일)를 열거나 생성하여, 복사한 코드를 붙여넣습니다 ([Ctrl/Cmd + V]).
- 파일을 저장합니다 ([Ctrl/Cmd + S]).
방법 ❷: "Add to Codebase" (CLI 명령어 사용 - 권장)
- 인터페이스 우측 상단의 다운로드 코드 아이콘을 클릭하고, 나타나는 메뉴에서 [Add to Codebase] 옵션을 선택합니다.
- 화면에 npx shadcn add "https://..." 와 유사한 명령어가 나타나면, 이 명령어를 복사합니다.
- 여러분의 코드 편집기나 시스템 터미널을 열고, 현재 프로젝트의 루트 디렉토리로 이동합니다.
- 복사한 명령어를 터미널에 붙여넣고 실행합니다 ([Enter]). 주의할 점은 shadcn@2.3.0 처럼 @다음에 버전이 추가되어 붙여넣어 질수 있는데 이를 latest로 변경하고 실행합니다.
- 실행 중 몇 가지 질문이 나올 수 있는데, 대부분 기본값으로 진행해도 무방합니다.
- 명령어가 성공적으로 완료되면, v0 코드가 여러분의 프로젝트 내 적절한 위치에 파일을 변경하거나 추가합니다. 커서 편집기의 파일 탐색기에서 확인해보세요.
방법 ❸: "Download ZIP" 사용하기
- 인터페이스 우측 상단의 다운로드 코드 아이콘을 클릭하고, 나타나는 메뉴에서 [Download ZIP] 옵션을 선택합니다.
- ZIP 파일을 컴퓨터의 적당한 위치에 저장합니다.
- 다운로드한 ZIP 파일의 압축을 풉니다.
- 압축 해제된 폴더 안에서 필요한 컴포넌트 코드 파일(예: .tsx 파일)을 찾습니다.
- 해당 파일을 여러분의 프로젝트 내의 v0와 동일한 디렉토리로 직접 복사하거나 이동시킵니다.
- 파일을 저장합니다.
"Download ZIP" 방법은 간단하지만, 프로젝트 설정이나 필요한 다른 파일(예: 유틸리티 함수)이 누락될 수 있어 CLI 방법보다 조금 더 손이 갈 수 있습니다. 처음에는 CLI 방법을 시도해보시는 것을 추천합니다.
728x90
'Cook V0' 카테고리의 다른 글
| 프론트엔드 첫걸음 - v0 사용해보기 (4) | 2025.05.05 |
|---|---|
| V0 사용법 - 가장 빠른 UI 생성 워크플로우 (0) | 2025.04.15 |