프론트엔드 샘플 확인하기

API를 배포할 때 클라이언트 배포 경로를 지정하면 그 폴더에 샘플 프론트엔드 파일이 만들어집니다. 생성된 화면을 그대로 쓰거나 AI로 다듬어 사용할 수 있습니다.

프론트엔드 샘플 폴더

index.html — 초기 화면

목록 조회, 상세 보기, 생성, 수정, 삭제를 한 화면에서 처리하는 기본 CRUD 화면입니다. style.css가 적용되어 있어 바로 사용할 수 있습니다.

워크스페이스에서 스크립트가 차단되면 이 파일은 항상 허용을 선택해 스크립트를 실행할 수 있습니다.

test.html — API 테스트 화면

자동 생성된 API를 호출하고 응답을 확인하는 테스트 화면입니다. Swagger, Postman, Insomnia와 비슷한 용도로 사용합니다.

style.css / README.md

index.html과 style.css를 수정해 팀에 맞는 화면으로 바꿀 수 있습니다.

index.html을 AI로 다듬기

README.md에는 테이블 구조와 API 명세가 정리되어 있습니다. 이 파일을 AI(Claude, ChatGPT 등)에게 전달하면 따로 설명하지 않아도 index.html의 기능이나 디자인 수정을 요청할 수 있습니다.

1. README.md 내용을 복사해 AI에게 전달합니다.
2. 원하는 화면 구성이나 디자인을 함께 설명합니다. (예: "목록을 카드 형태로 보여주고, 상태값에 따라 색을 다르게 표시해줘")
3. AI가 수정해 준 index.html을 같은 폴더에 덮어씁니다.
4. test.html로 API 동작을 다시 확인합니다.

완성한 화면 활용하기

완성한 화면은 다음 두 가지 방식으로 사용할 수 있습니다.

관련 문서

• 스키마 파일(.sfn) 만들기
• API 빌드 및 데이터베이스 배포하기
• 팀 내부용 웹서비스 만들기
• 외부 공개용 웹서비스 만들기