# APIFrame 키

APIFrame은 이미지와 영상, 음악을 만드는 모델을 **코드에서 부를 수 있게** 해 주는 서비스입니다. 사람이 웹사이트에서 버튼을 누르는 대신, 실습 웹이 대신 요청을 보내고 결과를 받아 옵니다. 이게 되면 "내 작품이 스스로 이미지를 만드는" 구조를 짤 수 있습니다.

키는 그 요청이 내 계정에서 나갔다는 것을 알려 주는 표입니다. 크레딧이 이 계정에서 빠져나가므로 남에게 보여 주지 않습니다.

## 1. 키를 복사합니다

[apiframe.ai](https://apiframe.ai) 에 로그인합니다. 수업 전에 Basic 요금제로 결제한 그 계정입니다. 왼쪽 차례에서 **API 키** 를 누릅니다.

![APIFrame 대시보드의 API 키 화면. 왼쪽 차례에 「API 키」가 있고, 오른쪽 위에 검은색 「API 키 생성」 단추가 있다.](/wiki/tools/apiframe-keys.webp)

오른쪽 위 **API 키 생성** 을 누릅니다. 이름을 물어보면 나중에 알아볼 수 있게 아무렇게나 적으면 됩니다.

![API 키 생성 창. 「나중에 식별할 수 있도록 키 이름을 입력하세요」 아래 칸에 OpenCircuit 이라고 적혀 있다.](/wiki/tools/apiframe-new.webp)

만들어진 키가 한 번만 보입니다. **복사** 를 누릅니다.

![API 키 생성됨 창. 「지금 이 키를 복사하세요. 다시 표시되지 않습니다」 아래에 가려진 키와 복사 단추가 있다.](/wiki/tools/apiframe-copy.webp)

> [!WARNING]
> 이 창을 닫으면 키를 다시 볼 수 없습니다. 닫기 전에 아래 2번까지 끝내는 것이 가장 편합니다. 놓쳤으면 처음부터 새로 만들면 됩니다. 이전 키는 **폐기** 를 눌러 지웁니다.

## 2. 실습 웹에 붙여 넣습니다

실습 웹(`http://127.0.0.1:1234`)을 띄웁니다. 띄우는 법은 [다시 열기](https://opencircuit.club/wiki/start/reopen) 에 있습니다.

화면 가운데 **API 키** 칸이 있습니다. 여기에 붙여 넣고 **이 컴퓨터에 저장** 을 누릅니다.

![실습 웹의 API 키 칸. 「afk_ 로 시작하는 키」라고 쓰인 입력 칸 오른쪽에 검은색 「이 컴퓨터에 저장」 단추가 있다.](/wiki/tools/apiframe-paste.webp)

> [!TIP]
> 한 번만 하면 됩니다. 다음에 실습 웹을 다시 띄우면 키 칸 대신 「키 저장됨」이라고 나옵니다. 바꾸고 싶으면 그 옆의 **바꾸기** 를 누릅니다.

키는 내 컴퓨터의 홈 폴더 안(`.opencircuit/apiframe-key`)에 저장됩니다. 저장소 폴더 안이 아니므로 GitHub에 올라가지 않습니다.

> [!WARNING]
> 키를 코드나 문서에 직접 적지 마세요. 캡처를 보낼 때도 키 칸이 찍히지 않게 합니다. 새어 나가면 남이 내 크레딧을 씁니다. 새 나간 것 같으면 apiframe.ai 대시보드에서 키를 다시 발급하고 실습 웹에서 **바꾸기** 로 새 키를 넣습니다.

## 3. 만들어 봅니다

키가 저장되면 **만들기** 칸이 살아납니다.

1. 작업 이름을 정합니다. 결과가 이 이름의 폴더로 모입니다.
2. 이미지·영상·음악 중 하나를 고르고 모델을 고릅니다.
3. **만들기** 를 누릅니다.

버튼 옆에 크레딧이 얼마나 드는지 미리 나옵니다. 이미지는 보통 1분 안, 영상은 2분에서 4분, 음악은 1분에서 2분 걸립니다. 만들어진 것은 화면 아래 **결과** 에 쌓이고, 컴퓨터의 문서 폴더 안 `OpenCircuit/작업이름/media` 에도 그대로 저장됩니다.

## 안 될 때

| 이런 일이 생기면 | 이렇게 합니다 |
| --- | --- |
| 저장을 눌렀는데 빨간 글씨가 나온다 | 키 앞뒤에 빈칸이나 줄바꿈이 딸려 왔을 수 있습니다. 다시 복사해서 붙여 넣습니다 |
| 「키 저장됨」인데 만들기가 실패한다 | 크레딧이 떨어졌을 수 있습니다. apiframe.ai 대시보드에서 잔액을 봅니다 |
| 결과가 계속 안 온다 | 영상은 4분까지 걸립니다. 그 이상이면 창을 새로고침하고 다시 눌러 봅니다 |

## 왜 API인가

- 같은 요청을 **수백 번** 반복할 수 있습니다. 센서 값에 따라, 시간에 따라, 관객 반응에 따라.
- 결과를 **다른 코드로 넘길** 수 있습니다. 손이 움직이면 이미지가 바뀌는 식으로 이어 붙일 수 있습니다.

실습 웹을 거치지 않고 직접 코드에서 부르고 싶다면 Cursor 채팅에 이렇게 시킵니다.

```text
APIFrame API로 이미지를 생성하는 Node.js 스크립트를 만들어 줘.
키는 홈 폴더의 .opencircuit/apiframe-key 에서 읽어.
생성이 끝날 때까지 기다렸다가 결과 이미지를 out/ 폴더에 저장해 줘.
APIFrame 공식 문서 https://apiframe.ai/docs 를 참고해.
```