AI Studio로 웹페이지 만들기

문서는 랜딩 페이지를 설명할 수 있습니다. 이미지는 그중 한 장면을 보여줄 수 있습니다. 하지만 둘 다 페이지를 열었을 때 실제로 무슨 일이 일어나는지, 휴대폰에서 위계가 어떻게 느껴지는지, 첫 스크롤 뒤에도 행동 유도가 분명한지는 알려주지 못합니다.

경험 자체가 초안이어야 한다면 웹페이지를 선택하세요. AI Studio는 캔버스에 라이브 미리보기 요소를 만들어서, 페이지를 열어보고 테스트하고 소스 자료 옆에서 검토하고, 준비되면 독립된 미리보기로 공유할 수 있게 합니다.

요약

편집 가능한 캔버스를 열고 웹페이지를 선택한 뒤, 페이지가 사용할 소스 요소를 선택합니다. 스타일을 고르고, 프롬프트에 독자, 목적, 섹션, 주요 행동을 쓴 뒤 제출을 선택합니다. 미리보기를 열어 데스크톱과 모바일 화면을 테스트하고 모든 주장과 링크를 검토합니다. 캔버스 밖의 사람도 열어봐야 한다면 페이지 소유자가 미리보기 공유를 열고 공개 링크를 켠 뒤 링크 복사를 선택할 수 있습니다.

검토할 수 있는 경험이 필요하면 웹페이지를 고르세요

AI Studio의 웹페이지는 프로토타입, 클라이언트 검토, 캠페인 콘셉트, 대화형 원페이지처럼 설명만으로는 부족하고 직접 열어봐야 하는 작업을 위한 것입니다.

생성된 페이지는 미리보기용 결과물이지, 실제 운영 중인 웹사이트 호스트나 콘텐츠 관리 시스템이 아닙니다. 페이지의 방향을 정하고 검토 의견을 모으는 데 사용하세요. 승인된 카피, 미디어, 트래킹, 폼, 법적 문구, 운영 연동은 최종 사이트를 관리하는 시스템으로 옮기세요.

시작하기 전에 권한을 확인하세요

비회원, 외부 협업자, 보기 전용이나 댓글 전용 권한만 있는 사람은 새 페이지를 생성할 수 없습니다. 캔버스 접근 권한이 허용하는 범위에서 완성된 요소는 검토할 수 있습니다.

캔버스에서 페이지 만들기

1. 브리프, 참고 자료, 생성된 페이지가 있어야 할 캔버스를 엽니다.
2. 페이지의 근거가 될 노트, 이미지, 파일, 표, 이전 결과물을 선택합니다.
3. AI Studio에서 웹페이지를 선택합니다.
4. 스타일을 고릅니다.
5. 프롬프트를 씁니다. 독자, 페이지 목표, 주요 행동, 필요한 섹션, 소스 제약, 기기나 플랫폼 우선순위를 명시합니다.
6. 소스가 아직 캔버스에 없다면 파일을 첨부하거나 HTTPS 링크를 붙여넣습니다. 업로드가 끝날 때까지 기다립니다.
7. 제출을 선택합니다. AI Studio가 페이지를 조사하고 설계하고 만드는 동안 웹페이지 요소가 생성 상태를 보여줍니다.
8. 요소가 준비되면 미리보기를 엽니다.

이 영상은 선택한 캔버스 자료가 웹페이지로 만들어지고, 완성된 결과를 검토와 공유를 위해 여는 과정을 보여줍니다.

결과물은 제목, 설명, 썸네일, 미리보기 링크를 갖춘 카드로 캔버스에 남습니다. 검토하는 동안 브리프와 참고 자료 옆에 두세요. 그러면 미리보기 링크가 근거 없이 따로 떠도는 대신, 페이지의 근거가 눈에 보이게 됩니다.

페이지 목적에 맞게 스타일 고르기

프롬프트에 특정 소셜 플랫폼을 명시하면 소셜 프리뷰는 그 플랫폼에만 집중합니다. 여러 플랫폼용 시안을 한 결과에 정말로 담고 싶을 때만 플랫폼 간 비교를 요청하세요.

다듬어진 페이지라고 무조건 랜딩 페이지를 고르지 마세요. 다섯 섹션으로 된 이사회 업데이트는 대개 원페이지입니다. 갤러리, 옵션, 배송, 구매 증거가 있는 제품 출시는 상세페이지입니다. 이 구분을 지키면 애초에 필요 없던 섹션을 나중에 지우는 수고를 덜 수 있습니다.

페이지에 진짜 브리프 주기

페이지 빌더는 선택한 캔버스 이미지, 업로드한 이미지, 파일, PDF, 오디오나 비디오 맥락, 표와 텍스트 요소, 접근 가능한 웹 링크를 활용할 수 있습니다. 이미지는 시각적 참고 자료가 되고, 문서, 전사문, 표, 페이지 텍스트는 기획과 카피의 소스 자료가 됩니다.

좋은 프롬프트는 작은 크리에이티브 브리프처럼 읽힙니다.

선택한 스킨케어 콘셉트로 제품 상세 페이지를 만들어 주세요. 선택한 제품 이미지를 주요 비주얼로 사용해 주세요. 독자는 민감성 피부를 가진 첫 구매 고객입니다. 효능, 성분, 사용법, 배송과 반품, 리뷰 자리 세 개, 장바구니 담기 행동 하나를 포함해 주세요. 제공된 가격과 주장은 그대로 유지하고, 인증은 지어내지 마세요.

이 프롬프트는 레이아웃 결정과 근거로 삼을 수 있는 범위를 분리합니다. 페이지는 제공한 근거 안에 머물면서도 과감한 시각적 선택을 할 수 있습니다.

라이브 미리보기 요소 이해하기

생성된 요소는 그냥 붙여넣은 일반 웹사이트 링크가 아닙니다. 미리보기 작업은 생성된 페이지를 전용 뷰어로 엽니다. 이 뷰어는 생성된 각 버전을 계속 확인할 수 있게 하고, 검사를 위한 데스크톱, 모바일, 코드 화면을 제공합니다.

미리보기에서 다음 네 가지를 확인하세요.

1. 옆의 브리프에 기대지 않고도 첫 화면만으로 페이지를 이해할 수 있는지
2. 첫 스크롤 뒤에도 주요 행동이 분명하게 남아 있는지
3. 모바일 화면이 단순히 축소되는 것이 아니라 위계를 그대로 지키는지
4. 링크, 컨트롤, 미디어, 상호작용 섹션이 카피가 약속한 대로 작동하는지

페이지는 외부 이미지, 폰트, 스크립트, 비디오 등 다른 HTTPS 자원을 불러올 수 있습니다. 이런 자원은 소유자에 의해 차단되거나 삭제되거나 바뀔 수 있습니다. 이런 자원에 의존하는 미리보기는 클라이언트 검토 전에 다시 한번 테스트해야 합니다. 실제 구현에서는 불안정한 외부 자원을 교체하세요.

링크를 보내기 전에 페이지를 검토하세요

직접 페이지를 열어 다음을 확인하세요.

사람이 내려야 할 결정에는 캔버스 요소의 댓글을 사용하세요. 범위를 좁힌 수정이나 비평에는 페이지의 AI 기능을 사용하세요. 완성된 것처럼 보이는 생성된 미리보기라도 주장을 승인할 책임자는 여전히 필요합니다.

알맞은 대상에게 미리보기 공유하기

공개 미리보기 링크는 페이지 소유자만 제어할 수 있습니다.

1. 생성된 페이지의 미리보기를 엽니다.
2. 미리보기 공유를 선택합니다.
3. 링크가 있는 누구나 미리보기를 열 수 있어야 한다면 공개 링크를 켭니다.
4. 링크 복사를 선택하고, 페이지가 검토를 통과한 뒤에만 전송합니다.

공개 링크가 꺼져 있으면 캔버스 접근 권한이 있는 사람만 미리보기를 열 수 있습니다. 켜져 있으면 링크가 있는 누구나 최신 공개 미리보기를 열 수 있습니다. 공개 접근을 끄면 이후의 공개 열람은 막히지만, 누군가 이미 받은 사본, 스크린샷, 정보까지 지워지지는 않습니다.

소스 맥락까지 필요한 검토자에게는 미리보기만 보내지 말고 캔버스를 공유하세요. 공개 미리보기는 결과물을 보여주고, 캔버스는 그것이 왜 존재하는지를 보여줍니다.

다시 시도하기 전에 빌드가 끝나게 두기

웹페이지 생성은 소스를 준비하고, 경험을 기획하고, 시각 소재를 만들거나 고르고, 페이지를 빌드하고, 미리보기를 저장해야 하므로 짧은 문서보다 오래 걸립니다. 처리 중인 요소가 작업의 실시간 상태입니다.

요청이 접수된 뒤에는 캔버스를 나가도 됩니다. 중복 요청을 제출하지 말고 같은 요소로 돌아오세요. 처리 중인 요소를 삭제하면 캔버스의 작업이 취소되지만, 이미 수행된 작업의 비용이 청구되지 않는다는 보장은 아닙니다. 완료된 페이지를 삭제해도 크레딧은 절대 돌아오지 않습니다.

웹페이지 비용은 스타일이 보여주는 고정된 숫자가 아닙니다. 크레딧 사용량은 소스 자료와 결과를 만들기 위해 수행된 작업을 반영합니다. 실행 후에는 AI 크레딧 이해하기를 확인하고, 카피를 조금 바꾸겠다고 다시 빌드하는 대신 거의 맞는 페이지는 수정하세요.

미리보기가 예상과 다르게 동작할 때

카드가 계속 처리 중입니다. 원본 요소를 그대로 두고 나중에 돌아오세요. 멈췄다고 판단하기 전에 캔버스를 한 번 새로고침하세요.

미리보기가 없습니다. 생성이 아직 대기 중이거나, 실패했거나, 삭제됐거나, 미리볼 수 있는 결과로 끝나지 않은 것입니다. 원본 요소와 크레딧 상태를 확인하기 전까지는 중복으로 다시 만들지 마세요.

미리보기는 작동하는데 카드의 제목이나 썸네일이 기본값입니다. 캔버스를 새로고침하세요. 제목, 설명, 썸네일이 계속 잘못돼 있다면 캔버스 링크, 출력 형식, 대략적인 완료 시각을 담아 고객 지원팀에 문의하세요.

링크, 이미지, 폰트, 상호작용 섹션이 작동하지 않습니다. 외부 소스가 직접 접속했을 때도 로드되는지, 로그인이 필요한지 테스트하세요. 비공개거나 불안정한 자원은 교체한 뒤 새 버전을 저장하거나 접근 가능한 소스 자료로 다시 생성하세요.

페이지가 잘못된 형식처럼 보입니다. 정확한 스타일을 고르고 필요한 구성 요소를 프롬프트에 명시하세요. 예를 들어 제품 상세 페이지라면 갤러리, 옵션, 가격, 배송, 증거, 구매 행동을 명시해야 합니다.

캔버스 밖의 누군가에게 공개 링크가 열리지 않습니다. 페이지 소유자가 공개 링크를 켜야 합니다. URL을 복사한다고 접근 정책이 바뀌지는 않습니다.

페이지가 근거 없는 주장을 합니다. 소스와 프롬프트를 고친 뒤 한 번 수정하거나 다시 생성하세요. 유창한 미리보기를 그대로 근거로 삼지 마세요. AI 결과가 정확하지 않을 때를 참고하세요.

새로고침 후에도 페이지가 그대로 멈춰 있습니다. 워크스페이스 이름, 캔버스 링크, 출력 형식, 대략적인 제출 시각, 프롬프트 요약, 첨부 파일 종류, 크레딧이 차단됐는지 소비됐는지를 담아 고객 지원팀에 문의하세요. 비밀번호, 비공개 자격 증명, 불필요한 고객 데이터는 보내지 마세요.