🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

챗GPT Work와 Site 스킬을 활용하면 허용한 로컬 폴더에서 랜딩 페이지를 제작·검수하고, 별도 CLI 없이 비공개 배포한 뒤 누구나 접속하도록 전환할 수 있다.

📌 핵심 요점

1. Chat 모드와 달리 Work 모드는 사용자가 허용한 로컬 폴더의 파일을 직접 읽고 편집하므로, 프로젝트 폴더가 에이전트의 실질적인 작업 경계가 된다.
2. 새 빈 폴더와 Site 스킬을 선택하면 코드와 리소스가 한곳에 생성되며, 상위 모델과 높은 추론 강도는 품질 향상 가능성과 토큰 소모 증가를 함께 가져온다.
3. 레퍼런스의 구조·인터랙션과 브랜드명, 상품 특성, 배송 조건, 판매 원칙을 요구사항으로 제공하면 랜딩 페이지를 생성하고 반복 수정할 수 있다.
4. Site 스킬은 로컬 사이트 제작뿐 아니라 공개 주소 생성까지 처리하며, Vercel·GitHub 계정 연동이나 별도 CLI 설치 없이 배포 준비를 진행한다.
5. 공개 전에는 로컬호스트에서 데스크톱·모바일 화면을 검수해야 하며, 명시적으로 배포한 다음 Sites 설정에서 ‘Only me’를 모든 사용자 공개로 바꿔야 한다.

🧩 배경과 문제 정의

브라우저의 Chat 모드는 활동 범위가 채팅창에 제한되지만, Work 모드는 사용자가 허용한 로컬 폴더의 파일을 직접 읽고 편집할 수 있다.

랜딩 페이지를 만드는 일보다 로컬 결과물을 외부 사용자가 접속할 수 있는 주소로 배포하는 과정에서 도메인, 호스팅, CLI 설정 부담이 커질 수 있다. Site 스킬은 빈 폴더에서 사이트를 제작하고 무료 공개 주소로 배포해 초기 브랜드 페이지나 반응 검증용 MVP를 빠르게 준비하도록 돕는다.

다만 프로젝트 폴더의 접근 범위를 신중하게 정해야 하며, 최초 배포 결과는 비공개이므로 Sites 설정에서 별도로 공유 범위를 전환해야 한다.

🕒 시간순 섹션별 상세정리

1. 데스크톱 앱과 Work 모드 준비

• 실습을 위해 ChatGPT 데스크톱 앱의 Mac 또는 Windows 버전을 설치하며, Windows는 버그와 환경 차이 때문에 문제 해결이 어려울 수 있다. [00:42]
• GPT 모드에서 Work를 선택하고 허용할 폴더를 추가하면, 선택한 로컬 파일과 폴더가 실제 작업 대상으로 열린다. [02:04]

2. 모델 설정과 작업 경계 확인

• 상위 모델과 높은 추론 강도는 품질을 높일 가능성이 있지만 토큰을 더 소비하며, 일상 작업에는 ‘높음’ 수준이 충분하다고 안내한다. [03:09]
• 간단한 확인 요청만으로도 지정한 데스크톱 폴더를 검사하므로, 프로젝트에 추가한 폴더가 에이전트의 파일 작업 경계가 된다. [03:35]

3. 빈 프로젝트와 Site 스킬 구성

• 사이트 파일이 다른 자료와 섞이지 않도록 새 빈 폴더를 만들고 Work 프로젝트의 소스 폴더로 지정한다. [04:29]
• $ 메뉴에서 제작과 배포를 함께 처리하는 Site 스킬을 선택하고, 게시판이나 회원가입이 없는 사업장 소개용 랜딩 페이지로 범위를 정한다. [05:21]

4. 레퍼런스와 과일가게 요구사항 입력

• ChatGPT Overview 사이트의 전체 구조와 스크롤 인터랙션을 참고해 과일 판매업체에 맞는 분위기로 변환하도록 요청한다. [05:55]
• ‘애플 스토어’라는 이름과 제철 프리미엄 과일, 1~3일 배송, 낮은 당도 상품을 판매하지 않는다는 원칙을 요구사항에 넣는다. [06:43]
• 프롬프트 실행 후 여러 사이트 파일이 지정 폴더에 생성되며, 결과를 확인하고 문제가 있으면 코드를 다시 수정한다. [07:28]

5. Site 스킬로 외부 배포 연결

• 로컬에서만 보이는 일반적인 생성 결과와 달리 Site 스킬은 다른 사람이 접속할 수 있는 웹 주소를 만드는 단계까지 처리한다. [07:43]
• 주소는 다소 임의적이지만 현재 정책상 별도 만료 기한 없이 유지할 수 있어 초기 공개와 사용자 반응 테스트에 활용할 수 있다. [08:21]
• Vercel·GitHub 계정 연동이나 별도 CLI 설치 없이 배포 명령만으로 공개 준비를 진행해 개발 도구 설정 절차를 줄인다. [08:43]

6. Sites 목록과 공개 범위 관리

• chatgpt.com/sites 또는 ChatGPT의 Sites 메뉴에서 로그인한 계정으로 배포한 사이트 목록을 확인한다. [08:57]
• 사이트 설정에서 이름과 주소 앞부분 일부를 조정하고 공유 대상을 ‘나만 보기’ 또는 ‘누구나 보기’로 바꿀 수 있다. [09:23]
• 완성된 사이트는 먼저 ‘나만 보기’ 상태로 등록되며, 같은 화면에서 공개 범위를 바꾸거나 불필요한 사이트를 삭제한다. [10:01]

7. 로컬 검수와 명시적 배포

• 생성된 과일가게 사이트는 로컬호스트에서 실행되므로 공개 전에 화면 구성과 콘텐츠 완성도를 작업자 컴퓨터에서 점검한다. [10:45]
• 구간별로 한쪽 영역이 움직이거나 좌우 방향이 전환되는 스크롤 인터랙션을 통해 레퍼런스의 동작과 프리미엄 브랜드 분위기를 반영한다. [10:56]
• 제작 완료만으로 자동 공개되지는 않으며, “이제 배포해”라고 명령하면 테스트 후 본인만 볼 수 있는 상태로 배포된다. [11:50]

8. 반응형 확인과 전체 공개 전환

• 데스크톱과 별도로 모바일 화면 구성이 적용됐는지 확인하고, 스티커 형태처럼 아쉬운 그래픽은 후속 수정 대상으로 남긴다. [12:16]
• 사이트 버전 저장이 끝나면 Sites 목록의 ‘Only me’ 항목 설정에서 공유 대상을 모든 사용자로 전환할 수 있다. [12:50]
• 설정 화면이 계속 로딩되면 잠시 기다린 뒤 인터넷 사용 권한을 ‘누구나’로 바꾸고 게시하며, 맞춤 도메인은 후속 설정으로 남긴다. [14:30]

9. 실습 종료

• 챗GPT Work를 이용한 랜딩 페이지 제작과 배포 실습이 마무리된다. [15:00]
• 종료 발화 이후에는 결과 확인, 추가 절차 또는 새로운 주의사항이 제시되지 않는다. [15:15]

🧾 결론

• 이 실습의 핵심은 랜딩 페이지 생성과 외부 배포를 하나의 Work 작업 흐름으로 연결하는 데 있다.
• 프로젝트 폴더 접근 권한, 로컬 결과 검수, 비공개 배포, 전체 공개 전환은 각각 생략할 수 없는 별도 단계다.
• Site 스킬은 초기 브랜드 페이지나 사용자 반응 검증용 MVP에 적합하지만, 맞춤 도메인 연결은 별도의 후속 작업으로 남는다.
• 생성 결과가 기대와 다르면 같은 로컬 프로젝트의 코드와 그래픽을 다시 수정한 뒤 새 버전을 저장할 수 있다.

📈 투자·시사 포인트

• 웹 개발 도구와 배포 계정 설정 부담이 줄어들면 소규모 팀도 브랜드 가설이나 사용자 반응을 더 빠르게 시험할 수 있다.
• 무료 공개 주소와 간소화된 배포 과정은 초기 검증 비용을 낮추지만, 임의적인 주소와 별도 맞춤 도메인 설정은 정식 브랜드 운영 단계의 과제로 남는다.
• 로컬 파일 접근 범위와 공개 권한 전환이 같은 작업 흐름에 포함되므로, 생성 성능뿐 아니라 권한 경계와 공개 상태 관리가 도입 판단의 핵심 요소가 된다.
• 높은 추론 강도가 잠재적으로 결과물 품질을 높이는 대신 토큰을 더 소비하므로, 일상 제작과 복잡한 작업을 구분해 모델 자원을 배분필요가 있다.

⚠️ 불확실하거나 확인이 필요한 부분

• Windows 버전은 버그와 환경별 차이가 많다고 설명되지만, 구체적인 오류 유형이나 해결 절차는 제시되지 않는다.
• 생성된 공개 주소는 현재 정책상 별도 만료 기한 없이 유지할 수 있다고 설명되므로, 향후 정책 변화까지 보장하는 내용은 아니다.
• 배포 직후 설정 화면이 계속 로딩될 수 있고 일부 그래픽이 미흡할 수 있지만, 재시도 기준이나 자동 품질 검증 방법은 다뤄지지 않는다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• Mac 또는 Windows용 ChatGPT 데스크톱 앱을 설치하고 Work 모드를 선택한다.
• 다른 자료와 분리된 빈 프로젝트 폴더를 만든 뒤 필요한 범위에만 읽기·편집 권한을 부여한다.
• Site 스킬에 레퍼런스, 브랜드명, 상품 특성, 배송 조건, 판매 원칙을 구체적으로 입력한다.
• 로컬호스트에서 콘텐츠, 스크롤 인터랙션, 데스크톱 화면과 모바일 화면을 모두 점검한다.

❓ 열린 질문

• Windows 환경에서 반복적으로 발생하는 버그와 환경 차이를 어떤 사전 점검 항목으로 관리해야 하는가?
• 맞춤 도메인을 연결하려면 어떤 추가 설정과 외부 서비스가 필요한가?
• 배포된 사이트를 수정할 때 기존 버전의 보존, 복구 또는 변경 이력 관리는 어떻게 이루어지는가?