Quickstarters
노크아웃.js를 사용한 기본 CRUD 앱 만드는 방법: 단계별 가이드

39min
개요
이 가이드에서는 Knockout.js를 사용하여 완전한 기능을 갖춘 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 만드는 방법을 배웁니다.
이 튜토리얼은 Back4app을 백엔드 서비스로 활용하면서 웹 앱 내에서 필수 작업을 구현하는 방법을 보여줍니다.
먼저, Basic-CRUD-App-Knockout이라는 제목의 Back4app 프로젝트를 설정하여 애플리케이션을 위한 신뢰할 수 있는 데이터 관리 시스템을 구축합니다.
그 후, Back4app AI 에이전트의 도움을 받아 수동으로 또는 자동으로 컬렉션과 필드를 정의하여 유연한 데이터베이스 스키마를 설계하여 애플리케이션이 모든 CRUD 작업을 효과적으로 처리할 수 있도록 합니다.
다음으로, 사용자 친화적인 드래그 앤 드롭 도구인 Back4app 관리 앱을 사용하여 컬렉션을 쉽게 관리합니다. 이 인터페이스는 CRUD 작업을 실행하는 과정을 간소화합니다.
마지막으로, REST API 호출을 사용하여 Knockout.js 프론트엔드를 Back4app과 통합합니다. 이 통합은 적절한 접근 제어와 함께 안전한 백엔드 관행도 포함합니다.
이 튜토리얼이 끝날 무렵, 기본 CRUD 기능을 지원하고 사용자 인증을 포함하며 강력한 데이터 관리를 특징으로 하는 프로덕션 준비가 완료된 웹 앱을 구축하게 될 것입니다.
주요 내용
Back4app을 사용하여 데이터를 효율적으로 관리하는 CRUD 애플리케이션을 개발하는 방법을 이해합니다.
확장 가능한 백엔드를 설계하고 이를 Knockout.js 프론트엔드와 연결하는 실무 경험을 쌓습니다.
생성, 읽기, 업데이트 및 삭제 작업을 수행하기 위한 코드 없는 관리 도구(Back4app Admin App)를 사용하는 방법을 배웁니다.
웹 앱을 신속하게 배포하기 위한 Docker 컨테이너화 등 배포 전략을 발견합니다.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
Back4app 계정과 활성 프로젝트가 필요합니다.
안내가 필요하면 Back4app 시작하기를 참조하세요.
Knockout.js를 위한 개발 환경이 설정되어 있어야 합니다.
CDN을 통해 라이브러리를 포함하거나 모듈식 설정을 선호하는 경우 npm을 통해 설치하세요.
JavaScript, Knockout.js 및 REST API에 대한 기본 지식이 필요합니다.
소개를 위해 Knockout.js 문서를 참조하세요.
﻿
1단계 – 프로젝트 초기화
Back4app 프로젝트 설정하기
Back4app 계정에 접근하세요.
대시보드에서 “새 앱” 옵션을 선택하세요.
프로젝트 이름을 입력하세요: Basic-CRUD-App-Knockout 및 설정 프로세스를 완료하세요.
새 프로젝트 만들기
﻿
생성된 후, 프로젝트는 대시보드에 표시되어 백엔드 구성의 기반을 형성합니다.
﻿
2단계 – 데이터베이스 스키마 작성하기
데이터 구조 설계
이 CRUD 앱을 위해 여러 컬렉션을 생성할 것입니다. 아래는 데이터베이스 설계를 안내하기 위한 제안된 필드와 데이터 유형이 포함된 샘플 컬렉션입니다. 이 스키마는 기본 CRUD 작업을 지원합니다.
1. 아이템 컬렉션
필드
데이터 유형
세부사항
_id
객체 ID
자동으로 생성된 고유 키.
제목
문자열
항목의 제목.
설명
문자열
항목에 대한 간략한 요약.
생성일
날짜
항목이 생성된 시간.
업데이트됨
날짜
마지막 업데이트의 타임스탬프.
2. 사용자 수집
필드
데이터 유형
세부사항
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
각 사용자에 대한 고유 식별자.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호_해시
문자열
사용자의 비밀번호의 보안 해시.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
마지막 계정 업데이트의 타임스탬프.
이러한 컬렉션은 Back4app 대시보드에서 각 컬렉션에 대한 새 클래스를 추가하고 필드를 정의하여 수동으로 생성할 수 있습니다.
새 클래스 만들기
﻿
데이터 유형을 선택하고, 필드 이름을 지정하고, 기본값을 설정하고, 필수 필드를 표시하여 필드를 정의합니다.
열 만들기
﻿
﻿
스키마 자동화를 위한 Back4app AI 에이전트 사용하기
Back4app AI 에이전트는 대시보드에서 직접 스키마 생성을 간소화합니다. 설명에 따라 컬렉션과 필드를 자동으로 생성할 수 있습니다.
AI 에이전트 사용 단계:
AI 에이전트 시작하기:
Back4app 대시보드 또는 프로젝트 설정을 통해 접근합니다.
데이터 모델 상세화:
필요한 컬렉션과 필드를 나열한 설명 프롬프트를 붙여넣습니다.
검토 및 적용:
에이전트가 스키마를 제안합니다. 제안을 검토하고 확인하여 프로젝트에 통합합니다.
샘플 프롬프트
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
이 과정은 시간을 절약하고 애플리케이션에 일관되고 최적화된 스키마를 보장합니다.
﻿
3단계 – 관리자 앱 활성화 및 CRUD 작업 관리
관리 인터페이스 개요
Back4app 관리 앱은 백엔드 데이터를 관리하기 위한 코드 없는 솔루션을 제공합니다. 직관적인 드래그 앤 드롭 인터페이스를 통해 손쉽게 CRUD 작업을 수행할 수 있습니다.
관리 앱 활성화 방법
“더보기” 메뉴로 이동 Back4app 대시보드에서.
“관리 앱” 선택을 클릭하고 “관리 앱 활성화.”
관리 자격 증명 설정 첫 번째 관리 사용자를 생성하여 B4aAdminUser와 같은 역할 및 필수 시스템 컬렉션을 구성합니다.
관리 앱 활성화
﻿
활성화 후, 데이터 관리를 시작하기 위해 관리 앱에 로그인하세요.
관리 앱 대시보드
﻿
CRUD를 위한 관리 인터페이스 사용
관리 앱 내에서 다음을 수행할 수 있습니다:
레코드 추가: 컬렉션(예: 항목)에서 “레코드 추가” 버튼을 클릭하여 새 항목을 생성합니다.
레코드 보기/수정: 레코드를 선택하여 세부 정보를 확인하거나 필드를 업데이트합니다.
레코드 제거: 더 이상 필요하지 않은 항목을 삭제합니다.
이 간소화된 인터페이스는 사용성을 향상시키고 데이터 관리 속도를 높입니다.
﻿
4단계 – Knockout.js와 Back4app 연결
백엔드가 준비되었으니, REST API 호출을 사용하여 Knockout.js 프론트엔드를 통합할 시간입니다.
CRUD 작업을 위한 REST API 사용
Parse SDK는 일반적으로 Knockout.js와 함께 사용되지 않으므로, API 호출을 직접 수행합니다. 아래는 CRUD 작업을 처리하는 방법의 예입니다.
항목 가져오기 예제
JS
// Example REST call to retrieve items
function fetchItems() {
  fetch('https://parseapi.back4app.com/classes/Items', {
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    }
  })
    .then(response => response.json())
    .then(data => {
      viewModel.items(data.results);
    })
    .catch(error => console.error('Error retrieving items:', error));
}

fetchItems();
// Example REST call to retrieve items
function fetchItems() {
  fetch('https://parseapi.back4app.com/classes/Items', {
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    }
  })
    .then(response => response.json())
    .then(data => {
      viewModel.items(data.results);
    })
    .catch(error => console.error('Error retrieving items:', error));
}

fetchItems();
﻿
Knockout.js ViewModel 예제
아래는 항목을 관리하기 위한 ViewModel의 예입니다:
JS
function AppViewModel() {
  var self = this;
  self.items = ko.observableArray([]);
  self.newTitle = ko.observable("");
  self.newDescription = ko.observable("");

  self.addItem = function() {
    var newItem = {
      title: self.newTitle(),
      description: self.newDescription()
    };

    fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify(newItem)
    })
      .then(response => response.json())
      .then(data => {
        self.items.push(data);
        self.newTitle("");
        self.newDescription("");
      })
      .catch(error => console.error('Error adding item:', error));
  };

  self.deleteItem = function(item) {
    fetch('https://parseapi.back4app.com/classes/Items/' + item.objectId, {
      method: 'DELETE',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    })
      .then(() => {
        self.items.remove(item);
      })
      .catch(error => console.error('Error deleting item:', error));
  };

  // Additional methods for update and read operations can be added similarly.
}

// Activate Knockout.js
ko.applyBindings(new AppViewModel());
function AppViewModel() {
  var self = this;
  self.items = ko.observableArray([]);
  self.newTitle = ko.observable("");
  self.newDescription = ko.observable("");

  self.addItem = function() {
    var newItem = {
      title: self.newTitle(),
      description: self.newDescription()
    };

    fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify(newItem)
    })
      .then(response => response.json())
      .then(data => {
        self.items.push(data);
        self.newTitle("");
        self.newDescription("");
      })
      .catch(error => console.error('Error adding item:', error));
  };

  self.deleteItem = function(item) {
    fetch('https://parseapi.back4app.com/classes/Items/' + item.objectId, {
      method: 'DELETE',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    })
      .then(() => {
        self.items.remove(item);
      })
      .catch(error => console.error('Error deleting item:', error));
  };

  // Additional methods for update and read operations can be added similarly.
}

// Activate Knockout.js
ko.applyBindings(new AppViewModel());
﻿
이 ViewModel은 Knockout.js 옵저버블을 사용하여 상태를 관리하면서 항목을 생성하고 삭제하기 위한 API 호출을 통합합니다.
﻿
5단계 – 백엔드 보안
액세스 제어 목록 (ACLs)
각 객체에 ACL을 할당하여 데이터를 보호하십시오. 예를 들어, 항목을 생성자만 접근할 수 있도록 하려면:
JS
function createSecureItem(itemData, ownerUserId) {
  var newItem = {
    title: itemData.title,
    description: itemData.description,
    ACL: {
      "*": { "read": false, "write": false },
      [ownerUserId]: { "read": true, "write": true }
    }
  };

  fetch('https://parseapi.back4app.com/classes/Items', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    body: JSON.stringify(newItem)
  })
    .then(response => response.json())
    .then(data => console.log('Secure item created:', data))
    .catch(error => console.error('Error creating item:', error));
}
function createSecureItem(itemData, ownerUserId) {
  var newItem = {
    title: itemData.title,
    description: itemData.description,
    ACL: {
      "*": { "read": false, "write": false },
      [ownerUserId]: { "read": true, "write": true }
    }
  };

  fetch('https://parseapi.back4app.com/classes/Items', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    body: JSON.stringify(newItem)
  })
    .then(response => response.json())
    .then(data => console.log('Secure item created:', data))
    .catch(error => console.error('Error creating item:', error));
}
﻿
클래스 수준 권한 (CLPs)
Back4app 대시보드 내에서 각 컬렉션에 대해 CLPs를 설정하여 인증된 사용자 또는 권한이 있는 사용자만 민감한 정보에 접근할 수 있도록 합니다.
﻿
6단계 – 사용자 인증 구현
사용자 계정 구성
Back4app은 인증 관리를 위해 사용자 클래스를 사용합니다. Knockout.js 앱에서 REST API 호출을 사용하여 사용자 등록 및 로그인을 처리합니다.
예: 사용자 등록
JS
function registerUser(username, password, email) {
  var user = {
    username: username,
    password: password,
    email: email
  };

  fetch('https://parseapi.back4app.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    body: JSON.stringify(user)
  })
    .then(response => response.json())
    .then(data => alert('Registration successful!'))
    .catch(error => alert('Registration error: ' + error.message));
}
function registerUser(username, password, email) {
  var user = {
    username: username,
    password: password,
    email: email
  };

  fetch('https://parseapi.back4app.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    body: JSON.stringify(user)
  })
    .then(response => response.json())
    .then(data => alert('Registration successful!'))
    .catch(error => alert('Registration error: ' + error.message));
}
﻿
사용자 로그인 및 세션 관리에 대해서도 유사한 접근 방식을 따를 수 있습니다. 이메일 확인 및 비밀번호 재설정과 같은 추가 기능은 Back4app을 통해 구성할 수 있습니다.
﻿
7단계 – 웹 배포를 사용하여 Knockout.js 프론트엔드 배포
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리를 연결하여 Knockout.js 프론트엔드를 손쉽게 호스팅할 수 있습니다. 다음 단계를 따르세요:
7.1 프로덕션 파일 빌드하기
터미널에서 프로젝트 디렉토리를 엽니다.
빌드 프로세스를 실행합니다:
Webpack과 같은 빌드 도구를 사용하는 경우, 적절한 명령어를 실행합니다 (예: npm run build) 자산을 컴파일합니다.
빌드를 확인합니다:
빌드 폴더에 index.html 및 모든 필수 정적 자산이 포함되어 있는지 확인합니다.
7.2 코드를 정리하고 GitHub에 커밋하기
저장소에는 Knockout.js 프론트엔드의 모든 소스 파일이 포함되어야 합니다. 예시 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Knockout-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   ├── appViewModel.js
│   └── styles.css
├── package.json
└── README.md
Basic-CRUD-App-Knockout-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   ├── appViewModel.js
│   └── styles.css
├── package.json
└── README.md
﻿
샘플 파일: src/appViewModel.js
JS
function AppViewModel() {
  var self = this;
  self.items = ko.observableArray([]);
  self.newTitle = ko.observable("");
  self.newDescription = ko.observable("");

  self.addItem = function() {
    var itemData = {
      title: self.newTitle(),
      description: self.newDescription()
    };

    fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify(itemData)
    })
      .then(response => response.json())
      .then(data => {
        self.items.push(data);
        self.newTitle("");
        self.newDescription("");
      })
      .catch(error => console.error('Error adding item:', error));
  };

  // Additional CRUD methods (update, delete) can be defined similarly.
}

// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
function AppViewModel() {
  var self = this;
  self.items = ko.observableArray([]);
  self.newTitle = ko.observable("");
  self.newDescription = ko.observable("");

  self.addItem = function() {
    var itemData = {
      title: self.newTitle(),
      description: self.newDescription()
    };

    fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify(itemData)
    })
      .then(response => response.json())
      .then(data => {
        self.items.push(data);
        self.newTitle("");
        self.newDescription("");
      })
      .catch(error => console.error('Error adding item:', error));
  };

  // Additional CRUD methods (update, delete) can be defined similarly.
}

// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
﻿
코드를 GitHub에 커밋하고 푸시하기
Git 초기화 (아직 하지 않았다면):
Bash
git init
git init
﻿
파일 스테이징:
Bash
git add .
git add .
﻿
변경 사항 커밋:
Bash
git commit -m "Knockout.js 프론트엔드 초기 커밋"
git commit -m "Knockout.js 프론트엔드 초기 커밋"
﻿
GitHub 리포지토리 생성 (예: Basic-CRUD-App-Knockout-Frontend)입니다.
코드 푸시:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Knockout-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Knockout-Frontend.git
git push -u origin main
﻿
7.3 GitHub 리포지토리와 웹 배포 연결하기
웹 배포 기능 접근:
Back4app 대시보드에서 프로젝트 (Basic-CRUD-App-Knockout)를 선택하고 웹 배포를 클릭합니다.
GitHub에 연결:
프롬프트에 따라 GitHub 계정을 통합합니다.
리포지토리 및 브랜치 선택:
리포지토리 (예: Basic-CRUD-App-Knockout-Frontend)와 코드가 포함된 브랜치 (예: main)를 선택합니다.
7.4 배포 설정
빌드 명령어:
저장소에 미리 빌드된 폴더가 포함되어 있지 않다면, 빌드 명령어를 지정하세요 (예: npm run build).
출력 디렉토리:
정적 파일이 포함된 폴더로 설정하세요 (예: build 또는 public).
환경 변수:
API 키와 같은 필수 환경 변수를 추가하세요.
7.5 Docker를 사용한 애플리케이션 컨테이너화 (선택 사항)
Docker를 사용하려면, 저장소에 Dockerfile을 포함하세요:
Dockerfile
# Use an official Node image for building
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy source code and build the app
COPY . .
RUN npm run build

# Use Nginx to serve the static files
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image for building
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy source code and build the app
COPY . .
RUN npm run build

# Use Nginx to serve the static files
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
7.6 애플리케이션 배포
배포 버튼 클릭:
설정을 구성한 후 배포를 시작합니다.
프로세스 모니터링:
Back4app이 코드를 가져오고, 필요시 빌드한 후 컨테이너화된 앱을 배포합니다.
앱 접근:
완료되면 Back4app이 Knockout.js 앱에 접근할 수 있는 URL을 제공합니다.
7.7 배포 테스트
제공된 URL 열기:
앱이 제대로 로드되는지 확인합니다.
테스트 실행:
모든 경로와 자산(CSS, JS, 이미지)이 작동하는지 확인합니다.
필요시 디버깅:
개발자 도구를 사용하여 오류를 검사하고 Back4app 배포 로그를 참조합니다.
﻿
8단계 – 결론 및 향후 방향
잘 했어요! Knockout.js와 Back4app을 사용하여 기본 CRUD 애플리케이션을 성공적으로 구축했습니다.
“Basic-CRUD-App-Knockout”이라는 이름의 프로젝트를 설정하고, 항목 및 사용자에 대한 자세한 컬렉션을 작성했으며, 관리 앱을 통해 데이터를 관리했습니다.
또한, REST API 호출을 사용하여 Knockout.js 프론트엔드를 백엔드와 통합하고 안전한 접근 제어를 구현했습니다.
다음 단계:
프론트엔드 확장:
상세 항목 보기, 검색 기능 또는 실시간 업데이트와 같은 기능으로 앱을 향상시키세요.
고급 백엔드 로직 추가:
클라우드 기능을 사용하거나 타사 서비스를 통합하는 것을 탐색하세요.
더 깊이 파고들기:
추가 최적화 및 고급 통합을 위해 Back4app 문서를 참조하세요.
이 튜토리얼을 따라 하면서 이제 Back4app을 사용하여 Knockout.js로 강력하고 확장 가능한 CRUD 앱을 구축할 수 있는 지식을 갖추게 되었습니다. 즐거운 코딩 되세요!
필드	데이터 유형	세부사항
_id	객체 ID	자동으로 생성된 고유 키.
제목	문자열	항목의 제목.
설명	문자열	항목에 대한 간략한 요약.
생성일	날짜	항목이 생성된 시간.
업데이트됨	날짜	마지막 업데이트의 타임스탬프.
필드	데이터 유형	세부사항
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	각 사용자에 대한 고유 식별자.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호_해시	문자열	사용자의 비밀번호의 보안 해시.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트의 타임스탬프.
업데이트됨 26 Feb 2025
이 페이지가 도움이 되었습니까?
Ractive.js로 기본 CRUD 앱 만드는 방법: 단계별 안내
라이엇.js로 기본 CRUD 앱 만들기: 단계별 가이드