'/%3e%3cpath%20id='cross_2'%20data-name='cross%202'%20class='cls-2'%20d='M20.612,30.43h0a5.361,5.361,0,1,0-10.723,0H0A33.709,33.709,0,0,1,30.569,0V9.75a5.361,5.361,0,1,1,0,10.723V30.43Z'%20transform='translate(67.193%200.007)%20rotate(90)'/%3e%3cpath%20id='cross_3'%20data-name='cross%203'%20class='cls-3'%20d='M20.612,30.43h0a5.361,5.361,0,1,0-10.723,0H0A33.709,33.709,0,0,1,30.569,0V9.75a5.361,5.361,0,1,1,0,10.723V30.43Z'%20transform='translate(67.186%2067.041)%20rotate(180)'/%3e%3cpath%20id='cross_4'%20data-name='cross%204'%20class='cls-4'%20d='M20.6,30.5h0a5.361,5.361,0,1,0-10.723,0H0A33.71,33.71,0,0,1,30.56,0V9.818a5.361,5.361,0,1,1,0,10.723V30.5Z'%20transform='translate(0%2067.041)%20rotate(-90)'/%3e%3c/svg%3e)
프론트엔드 샘플 확인하기
API를 빌드하면 워크스페이스에서 샘플 프론트엔드 폴더와 파일이 자동으로 생성됩니다. 이 결과물을 그대로 쓰거나, AI의 도움을 받아 팀에 맞는 화면으로 다듬어 완성할 수 있습니다.
프론트엔드 샘플 폴더
index.html — 초기 화면
목록 조회, 상세 보기, 생성, 수정, 삭제를 한 화면에서 처리하는 기본 CRUD 화면입니다. style.css가 함께 적용되어 있어 바로 쓸 수 있는 완성된 형태로 제공됩니다.
워크스페이스에서 스크립트를 블록하는 경우,
**이 파일은 항상 허용**을 눌러 스크립트를 활성화시킬 수 있습니다.
test.html — API 테스트 화면
Swagger, Postman, Insomnia처럼, 자동 생성된 API를 화면에서 바로 호출하고 응답을 확인할 수 있는 테스트용 화면입니다.
style.css / README.md
| 파일 | 용도 |
|---|---|
style.css | 샘플 화면 공통 스타일입니다. |
README.md | API를 어떻게 쓰는지 설명하는 문서입니다. 기본 엔드포인트, 리스트·입력 폼 컬럼 구성, 각 API의 요청/응답 필드와 레코드 스키마까지 정리되어 있습니다. |
index.html과style.css를 원하는 대로 고치면, 자동 생성된 기본 화면을 팀에 맞는 웹사이트로 만들 수 있습니다.
index.html을 AI로 다듬기
README.md에 테이블 구조와 API 스펙이 상세히 정리되어 있어서, 이 파일을 그대로 AI(Claude, ChatGPT 등)에게 전달하면 별도 설명 없이도 index.html의 로직이나 디자인 수정을 바로 요청할 수 있습니다.
README.md내용을 복사해 AI에게 전달합니다.- 원하는 화면 구성이나 디자인을 함께 설명합니다. (예: "목록을 카드 형태로 보여주고, 상태값에 따라 색을 다르게 표시해줘")
- AI가 수정해 준
index.html을 같은 폴더에 덮어씁니다. test.html로 API 동작을 다시 확인합니다.
완성한 화면 활용하기
index.html을 다듬어 팀만의 시스템을 완성했다면, 두 가지 방식으로 사용할 수 있습니다.
| 방식 | 설명 |
|---|---|
| 팀 내부용 | 워크스페이스 폴더 안에서 폴더 웹 보기로 열어, 팀원들과 내부 데이터 관리 화면으로 사용합니다. → 팀 내부용 웹서비스 만들기 |
| 외부 공개용 | Webspace로 배포해서, 외부에 공개하는 서비스 화면으로 사용합니다. → 외부 웹서비스 만들기 |