I turned a mockup into a real app with Claude Code + bkend MCP. - 자유게시판

김명일_c0d11a · 2025-12-23T08:10:27.210787Z

One of the ZERO100 teams was developing a facilities management app. **When our project PO taught us how to use Claude Code, we had already created a web front-end mockup based on the plan.** ## 🎬 Watch the previous video There were some parts that were difficult to explain in words, so I recorded a video. (Click here~~) You can see the entire process, from mockup to the actual app. [![Work Standards in the AI Era, AI Driven Work](https://img.youtube.com/vi/F_faeYortNA/maxresdefault.jpg)](

ZERO100 참가팀 중 하나가 시설관리 앱을 만들고 있었다.

우리 프로젝트 PO가 Claude Code 사용법 강의할 때 기획서 기반으로 웹 프론트엔드 목업을 만들어둔 상태였다.

🎬 지난 영상으로 보기

글로 다 설명하기 어려운 부분이 있어서 영상으로 남겨봤다. (클릭 하시오~~)

목업에서 실제 앱까지 전체 과정을 볼 수 있음.

아무튼 UI는 다 만들어져 있는데, 데이터는 전부 하드코딩. 버튼 눌러도 아무 일도 안 일어나는 그런 상태.

이걸 진짜 데이터가 저장되는 앱으로 만들어주기로 했다.

bkend는 MCP 서버를 제공해서 Claude Code랑 바로 연동된다. 문서대로 따라해봤다.

시작: MCP 설정

공식 문서(https://slashpage.com/bkend/36nj8v2wq4zyz25ykq9z) 보고 따라했다.

프로젝트 루트에 .mcp.json 파일 만들고:

json
{
  "mcpServers": {
    "mcp-bkend": {
      "type": "http",
      "url": "https://api-xxxxx.bkend.ai/mcp",
      "headers": {
        "X-Organization-Id": "여기에_Organization_ID_붙여넣기",
        "X-Api-Key": "여기에_API_키_붙여넣기"
      }
    }
  }
}

여기서 첫 번째 삽질. 파일 추가하고 바로 되는 줄 알았는데 안 됨. Claude Code를 재시작해야 MCP가 연결된다. 문서에 있긴 한데 놓치기 쉬운 부분.

DB 설계: 말로 하니까 알아서 해줌

Claude한테 그냥 말했다.

"bkend-mcp를 활용하고 싶어."

그랬더니 목업 프로젝트 코드를 분석해서 필요한 기능들을 정리해줌. 그 다음에 bkend 컨텍스트 확인하고, 기존 프로젝트 없으니까 새로 만들겠다고 함.

분석 결과로 이런 엔티티가 필요하다고 정리해줌:

엔티티	설명
Contract	계약 관리
Staff	직원 (청소원/경비원)
Attendance	근태 기록
Site	현장 (아파트)
Settlement	정산/청구
Alert	알림

프로젝트 생성 → dev 환경 생성 → 6개 테이블 생성까지 쭉 진행함. 스키마도 알아서 설계해줌.

뚝딱거리더니 다 해버림. 샘플 데이터까지 등록해줌.

API 연동: 여기서 삽질 시작

테이블 만들면 CRUD API가 자동 생성된다. 바로 호출해봤는데... 안 됨.

삽질 1: CORS

로컬에서 bkend API 직접 호출하면 CORS 에러. Vite 프록시 설정으로 해결:

javascript
// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: 'https://api-enduser-dev.bkend.ai',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

삽질 2: 필수 헤더

API 호출할 때 헤더 3개가 필수다:

javascript
const headers = {
  'Content-Type': 'application/json',
  'X-Project-Id': 'your-project-id',
  'X-Environment': 'dev',
  'Authorization': 'Bearer {token}'
};

하나라도 빠지면 에러남. 문서에 있는데 처음엔 놓침.

삽질 3: 권한 설정

403 Forbidden 에러. 확인해보니 테이블 생성할 때 user 롤에 create 권한이 false로 되어 있었음.

Claude한테 말하니까 모든 테이블 권한 한번에 수정해줌:

user 롤에 create: false로 되어 있어서 그래요. 권한을 확인하고 수정할게요.

삽질 4: 인증 필드명

로그인이 안 됐다. 원인은 기존 목업 코드가 token 필드를 쓰고 있었는데, bkend API는 access_token을 반환함.

이것도 Claude가 찾아서 수정해줌.

삽질 5: 응답 구조

데이터 목록 조회할 때 response.data.data.items로 접근했는데 안 됨. 실제로는 response.data.items임.

프론트엔드 연동

API 동작 확인하고, 페이지별로 연동 시작.

Claude가 물어봄:

"나머지 페이지들도 API 연동할까요? (계약, 직원, 근태 등)"

"다 해."

그랬더니 모든 페이지 순회하면서 mockData를 실제 API 호출로 교체함. 에러 처리, 로딩 상태까지 추가.

결과

목업이 진짜 앱이 됐다. 하루도 안 걸림. 2~3시간 정도?

솔직히 백엔드 직접 만들었으면:

DB 설계
API 엔드포인트 구현
인증 처리
배포

이거 다 하려면 며칠은 걸렸을 듯.

MCP 연동하니까 대화로 다 됨. "테이블 만들어줘" 하면 만들어주고, "권한 수정해줘" 하면 수정해주고.

삽질 정리

다음에 또 쓸 때 참고하려고 정리:

MCP 재시작 필수 - .mcp.json 추가 후 Claude Code 재시작
필수 헤더 3개 - Authorization, X-Project-Id, X-Environment
CORS 프록시 - 로컬 개발 시 Vite/Next.js 프록시 설정 필요
테이블 권한 - user 롤에 CRUD 권한 확인
인증 필드 - access_token, refresh_token 사용
응답 구조 - response.data.items (목록), response.data (단건)

삽질 포인트 미리 알고 가면 훨씬 빠르게 끝낼 수 있을 듯.

ZERO100 참가팀 중 하나가 시설관리 앱을 만들고 있었다.

우리 프로젝트 PO가 Claude Code 사용법 강의할 때 기획서 기반으로 웹 프론트엔드 목업을 만들어둔 상태였다.

🎬 지난 영상으로 보기

글로 다 설명하기 어려운 부분이 있어서 영상으로 남겨봤다. (클릭 하시오~~)

목업에서 실제 앱까지 전체 과정을 볼 수 있음.

아무튼 UI는 다 만들어져 있는데, 데이터는 전부 하드코딩. 버튼 눌러도 아무 일도 안 일어나는 그런 상태.

이걸 진짜 데이터가 저장되는 앱으로 만들어주기로 했다.

bkend는 MCP 서버를 제공해서 Claude Code랑 바로 연동된다. 문서대로 따라해봤다.

시작: MCP 설정

공식 문서(https://slashpage.com/bkend/36nj8v2wq4zyz25ykq9z) 보고 따라했다.

프로젝트 루트에 .mcp.json 파일 만들고:

json
{
  "mcpServers": {
    "mcp-bkend": {
      "type": "http",
      "url": "https://api-xxxxx.bkend.ai/mcp",
      "headers": {
        "X-Organization-Id": "여기에_Organization_ID_붙여넣기",
        "X-Api-Key": "여기에_API_키_붙여넣기"
      }
    }
  }
}

여기서 첫 번째 삽질. 파일 추가하고 바로 되는 줄 알았는데 안 됨. Claude Code를 재시작해야 MCP가 연결된다. 문서에 있긴 한데 놓치기 쉬운 부분.

DB 설계: 말로 하니까 알아서 해줌

Claude한테 그냥 말했다.

"bkend-mcp를 활용하고 싶어."

분석 결과로 이런 엔티티가 필요하다고 정리해줌:

엔티티	설명
Contract	계약 관리
Staff	직원 (청소원/경비원)
Attendance	근태 기록
Site	현장 (아파트)
Settlement	정산/청구
Alert	알림

프로젝트 생성 → dev 환경 생성 → 6개 테이블 생성까지 쭉 진행함. 스키마도 알아서 설계해줌.

뚝딱거리더니 다 해버림. 샘플 데이터까지 등록해줌.

API 연동: 여기서 삽질 시작

테이블 만들면 CRUD API가 자동 생성된다. 바로 호출해봤는데... 안 됨.

삽질 1: CORS

로컬에서 bkend API 직접 호출하면 CORS 에러. Vite 프록시 설정으로 해결:

javascript
// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: 'https://api-enduser-dev.bkend.ai',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

삽질 2: 필수 헤더

API 호출할 때 헤더 3개가 필수다:

javascript
const headers = {
  'Content-Type': 'application/json',
  'X-Project-Id': 'your-project-id',
  'X-Environment': 'dev',
  'Authorization': 'Bearer {token}'
};

하나라도 빠지면 에러남. 문서에 있는데 처음엔 놓침.

삽질 3: 권한 설정

403 Forbidden 에러. 확인해보니 테이블 생성할 때 user 롤에 create 권한이 false로 되어 있었음.

Claude한테 말하니까 모든 테이블 권한 한번에 수정해줌:

user 롤에 create: false로 되어 있어서 그래요. 권한을 확인하고 수정할게요.

삽질 4: 인증 필드명

로그인이 안 됐다. 원인은 기존 목업 코드가 token 필드를 쓰고 있었는데, bkend API는 access_token을 반환함.

이것도 Claude가 찾아서 수정해줌.

삽질 5: 응답 구조

데이터 목록 조회할 때 response.data.data.items로 접근했는데 안 됨. 실제로는 response.data.items임.

프론트엔드 연동

API 동작 확인하고, 페이지별로 연동 시작.

Claude가 물어봄:

"나머지 페이지들도 API 연동할까요? (계약, 직원, 근태 등)"

"다 해."

그랬더니 모든 페이지 순회하면서 mockData를 실제 API 호출로 교체함. 에러 처리, 로딩 상태까지 추가.

결과

목업이 진짜 앱이 됐다. 하루도 안 걸림. 2~3시간 정도?

솔직히 백엔드 직접 만들었으면:

DB 설계
API 엔드포인트 구현
인증 처리
배포

이거 다 하려면 며칠은 걸렸을 듯.

MCP 연동하니까 대화로 다 됨. "테이블 만들어줘" 하면 만들어주고, "권한 수정해줘" 하면 수정해주고.

삽질 정리

다음에 또 쓸 때 참고하려고 정리:

MCP 재시작 필수 - .mcp.json 추가 후 Claude Code 재시작
필수 헤더 3개 - Authorization, X-Project-Id, X-Environment
CORS 프록시 - 로컬 개발 시 Vite/Next.js 프록시 설정 필요
테이블 권한 - user 롤에 CRUD 권한 확인
인증 필드 - access_token, refresh_token 사용
응답 구조 - response.data.items (목록), response.data (단건)

삽질 포인트 미리 알고 가면 훨씬 빠르게 끝낼 수 있을 듯.

ZERO100 참가팀 중 하나가 시설관리 앱을 만들고 있었다.

우리 프로젝트 PO가 Claude Code 사용법 강의할 때 기획서 기반으로 웹 프론트엔드 목업을 만들어둔 상태였다.

🎬 지난 영상으로 보기

글로 다 설명하기 어려운 부분이 있어서 영상으로 남겨봤다. (클릭 하시오~~)

목업에서 실제 앱까지 전체 과정을 볼 수 있음.

아무튼 UI는 다 만들어져 있는데, 데이터는 전부 하드코딩. 버튼 눌러도 아무 일도 안 일어나는 그런 상태.

이걸 진짜 데이터가 저장되는 앱으로 만들어주기로 했다.

bkend는 MCP 서버를 제공해서 Claude Code랑 바로 연동된다. 문서대로 따라해봤다.

시작: MCP 설정

공식 문서(https://slashpage.com/bkend/36nj8v2wq4zyz25ykq9z) 보고 따라했다.

프로젝트 루트에 .mcp.json 파일 만들고:

json
{
  "mcpServers": {
    "mcp-bkend": {
      "type": "http",
      "url": "https://api-xxxxx.bkend.ai/mcp",
      "headers": {
        "X-Organization-Id": "여기에_Organization_ID_붙여넣기",
        "X-Api-Key": "여기에_API_키_붙여넣기"
      }
    }
  }
}

여기서 첫 번째 삽질. 파일 추가하고 바로 되는 줄 알았는데 안 됨. Claude Code를 재시작해야 MCP가 연결된다. 문서에 있긴 한데 놓치기 쉬운 부분.

DB 설계: 말로 하니까 알아서 해줌

Claude한테 그냥 말했다.

"bkend-mcp를 활용하고 싶어."

분석 결과로 이런 엔티티가 필요하다고 정리해줌:

엔티티	설명
Contract	계약 관리
Staff	직원 (청소원/경비원)
Attendance	근태 기록
Site	현장 (아파트)
Settlement	정산/청구
Alert	알림

프로젝트 생성 → dev 환경 생성 → 6개 테이블 생성까지 쭉 진행함. 스키마도 알아서 설계해줌.

뚝딱거리더니 다 해버림. 샘플 데이터까지 등록해줌.

API 연동: 여기서 삽질 시작

테이블 만들면 CRUD API가 자동 생성된다. 바로 호출해봤는데... 안 됨.

삽질 1: CORS

로컬에서 bkend API 직접 호출하면 CORS 에러. Vite 프록시 설정으로 해결:

javascript
// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: 'https://api-enduser-dev.bkend.ai',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

삽질 2: 필수 헤더

API 호출할 때 헤더 3개가 필수다:

javascript
const headers = {
  'Content-Type': 'application/json',
  'X-Project-Id': 'your-project-id',
  'X-Environment': 'dev',
  'Authorization': 'Bearer {token}'
};

하나라도 빠지면 에러남. 문서에 있는데 처음엔 놓침.

삽질 3: 권한 설정

403 Forbidden 에러. 확인해보니 테이블 생성할 때 user 롤에 create 권한이 false로 되어 있었음.

Claude한테 말하니까 모든 테이블 권한 한번에 수정해줌:

user 롤에 create: false로 되어 있어서 그래요. 권한을 확인하고 수정할게요.

삽질 4: 인증 필드명

로그인이 안 됐다. 원인은 기존 목업 코드가 token 필드를 쓰고 있었는데, bkend API는 access_token을 반환함.

이것도 Claude가 찾아서 수정해줌.

삽질 5: 응답 구조

데이터 목록 조회할 때 response.data.data.items로 접근했는데 안 됨. 실제로는 response.data.items임.

프론트엔드 연동

API 동작 확인하고, 페이지별로 연동 시작.

Claude가 물어봄:

"나머지 페이지들도 API 연동할까요? (계약, 직원, 근태 등)"

"다 해."

그랬더니 모든 페이지 순회하면서 mockData를 실제 API 호출로 교체함. 에러 처리, 로딩 상태까지 추가.

결과

목업이 진짜 앱이 됐다. 하루도 안 걸림. 2~3시간 정도?

솔직히 백엔드 직접 만들었으면:

DB 설계
API 엔드포인트 구현
인증 처리
배포

이거 다 하려면 며칠은 걸렸을 듯.

MCP 연동하니까 대화로 다 됨. "테이블 만들어줘" 하면 만들어주고, "권한 수정해줘" 하면 수정해주고.

삽질 정리

다음에 또 쓸 때 참고하려고 정리:

MCP 재시작 필수 - .mcp.json 추가 후 Claude Code 재시작
필수 헤더 3개 - Authorization, X-Project-Id, X-Environment
CORS 프록시 - 로컬 개발 시 Vite/Next.js 프록시 설정 필요
테이블 권한 - user 롤에 CRUD 권한 확인
인증 필드 - access_token, refresh_token 사용
응답 구조 - response.data.items (목록), response.data (단건)

삽질 포인트 미리 알고 가면 훨씬 빠르게 끝낼 수 있을 듯.

ZERO100 참가팀 중 하나가 시설관리 앱을 만들고 있었다.

우리 프로젝트 PO가 Claude Code 사용법 강의할 때 기획서 기반으로 웹 프론트엔드 목업을 만들어둔 상태였다.

🎬 지난 영상으로 보기

글로 다 설명하기 어려운 부분이 있어서 영상으로 남겨봤다. (클릭 하시오~~)

목업에서 실제 앱까지 전체 과정을 볼 수 있음.

아무튼 UI는 다 만들어져 있는데, 데이터는 전부 하드코딩. 버튼 눌러도 아무 일도 안 일어나는 그런 상태.

이걸 진짜 데이터가 저장되는 앱으로 만들어주기로 했다.

bkend는 MCP 서버를 제공해서 Claude Code랑 바로 연동된다. 문서대로 따라해봤다.

시작: MCP 설정

공식 문서(https://slashpage.com/bkend/36nj8v2wq4zyz25ykq9z) 보고 따라했다.

프로젝트 루트에 .mcp.json 파일 만들고:

json
{
  "mcpServers": {
    "mcp-bkend": {
      "type": "http",
      "url": "https://api-xxxxx.bkend.ai/mcp",
      "headers": {
        "X-Organization-Id": "여기에_Organization_ID_붙여넣기",
        "X-Api-Key": "여기에_API_키_붙여넣기"
      }
    }
  }
}

여기서 첫 번째 삽질. 파일 추가하고 바로 되는 줄 알았는데 안 됨. Claude Code를 재시작해야 MCP가 연결된다. 문서에 있긴 한데 놓치기 쉬운 부분.

DB 설계: 말로 하니까 알아서 해줌

Claude한테 그냥 말했다.

"bkend-mcp를 활용하고 싶어."

분석 결과로 이런 엔티티가 필요하다고 정리해줌:

엔티티	설명
Contract	계약 관리
Staff	직원 (청소원/경비원)
Attendance	근태 기록
Site	현장 (아파트)
Settlement	정산/청구
Alert	알림

프로젝트 생성 → dev 환경 생성 → 6개 테이블 생성까지 쭉 진행함. 스키마도 알아서 설계해줌.

뚝딱거리더니 다 해버림. 샘플 데이터까지 등록해줌.

API 연동: 여기서 삽질 시작

테이블 만들면 CRUD API가 자동 생성된다. 바로 호출해봤는데... 안 됨.

삽질 1: CORS

로컬에서 bkend API 직접 호출하면 CORS 에러. Vite 프록시 설정으로 해결:

javascript
// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: 'https://api-enduser-dev.bkend.ai',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

삽질 2: 필수 헤더

API 호출할 때 헤더 3개가 필수다:

javascript
const headers = {
  'Content-Type': 'application/json',
  'X-Project-Id': 'your-project-id',
  'X-Environment': 'dev',
  'Authorization': 'Bearer {token}'
};

하나라도 빠지면 에러남. 문서에 있는데 처음엔 놓침.

삽질 3: 권한 설정

403 Forbidden 에러. 확인해보니 테이블 생성할 때 user 롤에 create 권한이 false로 되어 있었음.

Claude한테 말하니까 모든 테이블 권한 한번에 수정해줌:

user 롤에 create: false로 되어 있어서 그래요. 권한을 확인하고 수정할게요.

삽질 4: 인증 필드명

로그인이 안 됐다. 원인은 기존 목업 코드가 token 필드를 쓰고 있었는데, bkend API는 access_token을 반환함.

이것도 Claude가 찾아서 수정해줌.

삽질 5: 응답 구조

데이터 목록 조회할 때 response.data.data.items로 접근했는데 안 됨. 실제로는 response.data.items임.

프론트엔드 연동

API 동작 확인하고, 페이지별로 연동 시작.

Claude가 물어봄:

"나머지 페이지들도 API 연동할까요? (계약, 직원, 근태 등)"

"다 해."

그랬더니 모든 페이지 순회하면서 mockData를 실제 API 호출로 교체함. 에러 처리, 로딩 상태까지 추가.

결과

목업이 진짜 앱이 됐다. 하루도 안 걸림. 2~3시간 정도?

솔직히 백엔드 직접 만들었으면:

DB 설계
API 엔드포인트 구현
인증 처리
배포

이거 다 하려면 며칠은 걸렸을 듯.

MCP 연동하니까 대화로 다 됨. "테이블 만들어줘" 하면 만들어주고, "권한 수정해줘" 하면 수정해주고.

삽질 정리

다음에 또 쓸 때 참고하려고 정리:

MCP 재시작 필수 - .mcp.json 추가 후 Claude Code 재시작
필수 헤더 3개 - Authorization, X-Project-Id, X-Environment
CORS 프록시 - 로컬 개발 시 Vite/Next.js 프록시 설정 필요
테이블 권한 - user 롤에 CRUD 권한 확인
인증 필드 - access_token, refresh_token 사용
응답 구조 - response.data.items (목록), response.data (단건)

삽질 포인트 미리 알고 가면 훨씬 빠르게 끝낼 수 있을 듯.

Claude Code + bkend MCP로 목업을 실제 앱으로 만들어봤다

🎬 지난 영상으로 보기

시작: MCP 설정

DB 설계: 말로 하니까 알아서 해줌

API 연동: 여기서 삽질 시작

삽질 1: CORS

삽질 2: 필수 헤더

삽질 3: 권한 설정

삽질 4: 인증 필드명

삽질 5: 응답 구조

프론트엔드 연동

결과

삽질 정리

답변 6개

Claude Code + bkend MCP로 목업을 실제 앱으로 만들어봤다

🎬 지난 영상으로 보기

시작: MCP 설정

DB 설계: 말로 하니까 알아서 해줌

API 연동: 여기서 삽질 시작

삽질 1: CORS

삽질 2: 필수 헤더

삽질 3: 권한 설정

삽질 4: 인증 필드명

삽질 5: 응답 구조

프론트엔드 연동

결과

삽질 정리

답변 6개

Claude Code + bkend MCP로 목업을 실제 앱으로 만들어봤다

🎬 지난 영상으로 보기

시작: MCP 설정

DB 설계: 말로 하니까 알아서 해줌

API 연동: 여기서 삽질 시작

삽질 1: CORS

삽질 2: 필수 헤더

삽질 3: 권한 설정

삽질 4: 인증 필드명

삽질 5: 응답 구조

프론트엔드 연동

결과

삽질 정리

답변 6개

Claude Code + bkend MCP로 목업을 실제 앱으로 만들어봤다

🎬 지난 영상으로 보기

시작: MCP 설정

DB 설계: 말로 하니까 알아서 해줌

API 연동: 여기서 삽질 시작

삽질 1: CORS

삽질 2: 필수 헤더

삽질 3: 권한 설정

삽질 4: 인증 필드명

삽질 5: 응답 구조

프론트엔드 연동

결과

삽질 정리

답변 6개