사이트 만들기

먼저 ChatGPT 또는 Codex에 어떤 사이트를 만들고 싶은지 설명하세요. 첫 버전을 확인한 다음 필요한 부분을 다듬어 가세요.

Sites 시작하기

웹이나 데스크톱 앱에서 ChatGPT를 여세요. 프롬프트에 ‘website’라는 단어를 넣거나 @Sites를 멘션하면 Sites 워크플로우가 시작됩니다. 예를 들어 운영팀에서 프로젝트 요청을 관리할 대시보드를 다음과 같이 요청할 수 있습니다.

대시보드는 하나의 예입니다. 만들고 싶은 사이트에 맞게 다음 단계를 활용하세요.

기록과 진행 상황 저장하기

사이트 버전을 저장하면 콘텐츠, 디자인, 동작 방식이 보존됩니다. 방문자가 제출한 요청, 상태 변경 사항, 업로드한 파일, 개인별 진행 상황에는 별도의 저장 공간이 필요합니다. 무엇을 저장할지, 누가 그 정보를 읽거나 변경할 수 있어야 하는지 ChatGPT 또는 Codex에 알려 주세요.

공유 기록이나 개인 기록의 접근 규칙은 서버에서 적용하도록 요청하세요. 페이지를 새로고침해도 변경 사항이 유지되는지 확인하고, 서로 다른 계정으로 각 사용자의 접근 권한을 확인하세요. 버튼을 숨겨도 기록 자체가 보호되지는 않습니다.

파일을 제공할 때는 사이트에서 복사본을 사용할지, 원본에서 최신 내용을 가져올지 지정하세요. 정보가 마지막으로 업데이트된 시점도 확인하세요.

저장 및 로그인 옵션은 데이터 및 연결을 참고하세요.

사이트 제작 팁

• 원본 자료를 활용하세요. 사이트에서 사용할 파일, 링크, 정의, 수식을 첨부하세요. 정보가 빠져 있으면 임의로 채우지 말고 어디가 누락되었는지 표시해 달라고 ChatGPT 또는 Codex에 요청하세요.
• 결과가 없거나 오류가 발생했을 때의 화면을 설명하세요. 검색 결과가 없거나, 양식을 다 작성하지 않았거나, 연결된 앱을 사용할 수 없을 때 방문자에게 무엇을 보여 줄지 알려 주세요. 방문자가 다시 시도하거나 문제를 바로잡을 방법도 마련하세요.
• 디자인 참고 자료를 공유하세요. 스크린샷이나 페이지 링크를 첨부하고, 작은 카드나 검색창 위치처럼 반영하고 싶은 요소를 짚어 주세요. 브랜드 색상, 글꼴, 글쓰기 지침이 있다면 함께 제공하세요.
• 휴대폰 화면을 고려하세요. 좁은 화면에서 카드, 표, 양식을 어떻게 배치할지 설명하세요. 가로로 스크롤하지 않아도 탐색 메뉴, 필터, 양식의 입력 요소를 사용할 수 있는지 확인하세요.
• 샘플 데이터에는 예시라고 표시하세요. 최종 콘텐츠가 아직 준비되지 않았다면 예시라고 표시한 샘플 기록을 요청하세요. 사이트를 공유하기 전에 실제 콘텐츠로 교체하세요.
• 한 번에 한 가지씩 변경하세요. 변경할 사항을 하나씩 요청하고 무엇을 유지할지도 알려 주세요. 예를 들어 필터 위치를 옮길 때 저장된 기록, 접근 규칙, 기존 기능은 그대로 유지하도록 요청하세요. 변경할 때마다 영향을 받는 기능을 직접 사용해 보세요.

Sites 쇼케이스에서 Sites로 만들 수 있는 웹 앱의 예를 살펴보세요.

프롬프트 예시

자료 허브를 만들려면 다음과 같은 짧은 프롬프트로 시작하세요.

방문자가 할 수 있는 작업, 검색 규칙, 원하는 디자인을 덧붙여 요청을 구체화할 수 있습니다.

기존 프로젝트라면 ChatGPT에 호환성을 확인하고 게시할 수 있도록 준비해 달라고 요청하세요.

사이트에서 기록이나 업로드한 파일을 보관해야 한다면 요청에 명시하세요.