로컬에서 이어서 작업하기

Piko에서 만든 앱은 유료 플랜에서 GitHub와 동기화한 뒤 내 컴퓨터에서 열어 직접 수정할 수 있습니다. VS Code, Cursor, Claude Code, Codex 같은 도구를 함께 써도 됩니다.

이 문서는 특정 도구의 버튼 위치나 로그인 절차를 자세히 설명하지 않습니다. 각 도구의 화면과 설치 방식은 자주 바뀌기 때문입니다. 대신 대부분의 코드 편집기와 AI 코딩 도구에 공통으로 적용되는 흐름을 정리합니다.

전체 흐름

Piko에서 앱을 만든 뒤 GitHub 동기화를 진행합니다.
생성된 GitHub 리포지토리를 내 컴퓨터로 복제합니다.
프로젝트 폴더에서 의존성을 설치하고 로컬 개발 서버를 실행합니다.
원하는 코드 편집기나 AI 코딩 도구에서 같은 폴더를 엽니다.
수정 후 로컬에서 확인하고, 필요하면 GitHub에 다시 올립니다.
Piko로 다시 가져오거나, GitHub 리포지토리 기준으로 직접 배포합니다.

무료 플랜은 만들기·보기·공개까지 사용할 수 있지만, 소스 복제와 GitHub 동기화는 제공하지 않습니다.

로컬 실행

Piko가 생성한 기본 앱은 React, TypeScript, Tailwind 기반입니다. 보통 아래 흐름으로 실행할 수 있습니다.

git clone <GitHub 리포지토리 주소>
cd <프로젝트 폴더>
bun install
bun run dev

프로젝트나 환경에 따라 npm을 써도 됩니다.

npm install
npm run dev

AI 코딩 도구 연결

도구마다 이름은 다르지만 기본 원리는 같습니다.

도구를 설치하고 로그인합니다.
Piko에서 내려받은 프로젝트 폴더를 엽니다.
도구가 터미널 실행이나 파일 수정 권한을 요청하면 범위를 확인한 뒤 허용합니다.
수정 요청은 한 번에 작게 나누고, 마지막에는 build 또는 lint 같은 검증 명령을 실행해 달라고 요청합니다.

예를 들면 다음처럼 요청할 수 있습니다.

문의 폼의 전화번호 검증을 추가하고, 수정 후 빌드가 통과하는지 확인해줘.

모바일에서 첫 화면 CTA가 접히지 않도록 레이아웃을 조정하고, 변경 파일을 요약해줘.

Docker가 필요한가요

일반적인 생성 앱을 로컬에서 수정하고 실행하는 데 Docker는 필요하지 않습니다. Bun 또는 Node.js 계열 실행 환경이면 충분한 경우가 대부분입니다.

다만 앱에 별도 데이터베이스, Redis, 검색 서버 같은 외부 서비스를 직접 붙인 경우에는 프로젝트에 따라 Docker Compose 같은 선택지가 추가될 수 있습니다. 이 경우에는 해당 프로젝트의 README, package.json, 환경변수 예시를 먼저 확인하세요.

주의할 점

로컬에서 수정한 내용은 자동으로 Piko 편집 화면에 반영되지 않습니다. GitHub로 올린 뒤 Piko의 가져오기 기능을 사용하거나, 리포지토리 기준으로 직접 배포하세요.
Piko 편집 화면과 로컬 리포지토리를 동시에 많이 수정하면 어느 쪽이 최신인지 헷갈릴 수 있습니다. 작업 기준을 하나로 정해두는 편이 안전합니다.
.env, .env.local, .dev.vars 같은 파일에는 API 키와 비밀값이 들어갈 수 있습니다. 공개 리포지토리에 올리지 말고 배포 환경의 시크릿 설정을 사용하세요.
AI 코딩 도구에 비밀키를 그대로 붙여 넣지 마세요. 필요한 경우 변수 이름과 사용 위치만 설명하고 실제 값은 로컬이나 배포 환경에 따로 설정합니다.

다시 Piko와 맞추기

Piko에서 계속 관리하려면 GitHub에 푸시한 뒤 GitHub 동기화 문서의 가져오기 흐름을 사용합니다.

PR/branch 중심 협업이나 자동 백그라운드 동기화가 필요한 경우에는 현재 기능 범위를 먼저 확인하세요. 지금은 동기화와 가져오기를 사용자가 직접 실행하는 방식입니다.