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 결과가 기대와 다를 때를 참고하세요.

새로고침해도 페이지가 계속 멈춰 있습니다. 워크스페이스 이름, 캔버스 링크, 결과물 유형, 대략적인 제출 시각, 프롬프트 요약, 첨부 파일 종류, 크레딧이 막혔는지 차감됐는지를 적어 고객 지원팀에 문의하세요. 비밀번호, 비공개 인증 정보, 필요 없는 고객 데이터는 보내지 마세요.