사이트 만들기

ChatGPT 또는 Codex에서 만들고 싶은 것을 설명하는 것으로 시작하세요. 그런 다음 첫 번째 버전을 검토하고 작업을 진행하면서 개선하세요.

sites 시작하기

웹이나 데스크톱 앱에서 ChatGPT를 여세요. 프롬프트에 "웹사이트"라는 단어를 포함하거나 @Sites를 언급하면 sites 워크플로가 시작됩니다. 예를 들어 운영팀을 위한 프로젝트 요청 대시보드를 만들어 달라고 할 수 있습니다.

프롬프트:

Build a project request dashboard website for my operations team. Let team members submit requests, see who owns each one, update the status, and filter the list. Require people to sign in with their workspace account, and keep the request data saved between visits.

대시보드는 하나의 예입니다. 다음 흐름을 만들려는 사이트에 맞게 적용할 수 있습니다.

1. 사이트 설명하기

   사이트의 대상 사용자와 사용자가 수행하기를 원하는 작업을 ChatGPT에 알려 주세요. 필요한 문서나 데이터를 공유하세요. 요청 대시보드라면 요청 예시, 담당자, 상태 레이블 등을 포함할 수 있습니다.

2. 사이트 검토하기

   요청한 기능을 직접 사용해 보고 콘텐츠와 결과를 원본 자료와 비교하세요. 대시보드라면 요청을 제출하거나 상태를 변경하거나 담당자별로 필터링해 볼 수 있습니다. 사이트가 정보를 어떻게 사용하고 저장하는지 확인하세요.

3. 사이트 개선하기

   변경하고 싶은 내용을 ChatGPT에 알려 주고, 도움이 된다면 스크린샷이나 참고 사이트를 공유하세요. 대시보드라면 “담당자 및 상태 필터를 요청 목록 위에 배치해 주세요.”라고 요청할 수 있습니다.

4. 사이트 관리 및 공유하기

   sites 로 돌아가 사이트를 다시 열거나 편집하세요. 게시하기 전에 검토 및 공유 확인 사항을 따르세요. 방문할 수 있는 사용자를 선택하고, 대상 방문자의 입장에서 게시된 링크를 확인하세요.

기록과 진행 상황 저장하기

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

공유 기록이나 개인 기록의 경우 서버에서 적용되는 접근 규칙을 요청하세요. 새로고침한 후에도 업데이트가 저장되어 있는지 확인하고, 별도의 계정으로 각 사용자의 접근 권한을 확인하세요. 버튼을 숨기는 것만으로는 해당 기록이 보호되지 않습니다.

제공한 파일의 경우 사이트에서 사본을 사용할지, 원본에서 새로고침할지 지정하세요. 정보가 마지막으로 업데이트된 시점을 확인하세요.

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

사이트 제작 팁

• 원본 자료를 사용하세요. 사이트에서 사용해야 하는 파일, 링크, 정의, 수식을 첨부하세요. 누락된 정보를 임의로 채우지 말고 표시해 달라고 ChatGPT 또는 Codex에 요청하세요.
• 빈 상태와 오류 상태를 설명하세요. 검색 결과가 없거나, 양식이 미완성이거나, 연결된 앱을 사용할 수 없을 때 방문자에게 무엇을 보여 줄지 설명하세요. 다시 시도하거나 문제를 수정할 방법도 포함하세요.
• 시각적 참고 자료를 공유하세요. 스크린샷이나 페이지 링크를 첨부하고 작은 카드나 검색창 위치 등 적용하고 싶은 세부 사항을 알려 주세요. 브랜드 색상, 글꼴, 작성 지침도 포함하세요.
• 휴대전화 화면을 고려하세요. 카드, 표, 양식이 좁은 화면에 어떻게 맞아야 하는지 설명하세요. 가로로 스크롤하지 않고도 탐색 메뉴, 필터, 양식 컨트롤을 사용할 수 있는지 확인하세요.
• 샘플 데이터를 표시하세요. 최종 콘텐츠가 준비되지 않았다면 예시임을 표시한 샘플 기록을 요청하세요. 사이트를 공유하기 전에 실제 기록으로 교체하세요.
• 변경 범위를 좁히세요. 한 번에 하나의 변경을 요청하고 유지할 내용을 알려 주세요. 예를 들어 저장된 기록, 접근 규칙, 기존 동작을 바꾸지 않고 필터를 이동해 달라고 요청하세요. 변경할 때마다 영향을 받는 상호작용을 테스트하세요.

Sites 쇼케이스에서 Sites로 만들 수 있는 웹 앱 예시를 확인할 수 있습니다.

프롬프트 예시

리소스 허브를 만들려면 짧은 프롬프트로 시작하세요.

프롬프트:

Build a resource hub website where project leads can search our kickoff resources by task. Use the resource list I attach. Save a version without deploying it so I can review it.

방문자의 동작, 검색 규칙, 디자인 선호도를 추가하여 요청을 구체화할 수 있습니다.

프롬프트:

Build a resource hub website for project leads preparing a kickoff. Use the resource list I attach, with its titles, descriptions, task labels, and source links.

Visitor actions:

- Choose a task, such as preparing an agenda.
- Search within that task's resources.
- Select a result to open its source link.

Search rules:

- When the search is empty, show all resources for the selected task.
- If no task is selected, show the full list.
- If there are no matches, offer a way to clear the filters and show the help contact from my list.
- Flag entries with missing titles or links for my review.
- Search filters can reset when the visitor returns.

Design preferences:

- Use a white background and dark text. Keep descriptions to one sentence, with a layout that works on a phone.
- If I provide a reference screenshot, use it for the search placement and compact resource cards.
- If I provide a brand guide, use its accent color.

Save a version without deploying it so I can review the layout and try the search.

기존 프로젝트의 경우 ChatGPT에 호환성을 확인하고 게시할 준비를 해 달라고 요청하세요.

프롬프트:

Deploy this project with sites. Check whether it is compatible, make any required changes, and give me the deployment URL.

사이트에서 기록이나 업로드한 파일을 기억해야 한다면 요청에 해당 내용을 포함하세요.

프롬프트:

Add player scores and avatar uploads to this game. Keep the scores and uploaded avatars between visits.