Website Studio 가이드

01. Website Studio 소개

Website Studio는 웹사이트를 페이지 → 섹션 → 요소 구조로 다룹니다. 화면은 다섯 영역으로 나뉩니다.

Website Studio 전체 화면. 번호는 아래 설명 순서와 같습니다.닫기

1. 1사이트 구조 패널 — 페이지와 섹션 목록, 디자인 시스템, 에셋이 있습니다.
2. 2캔버스 — 실제 사이트가 어떻게 보이는지 바로 확인하고, 섹션이나 텍스트를 눌러 선택합니다.
3. 3속성 패널 — 선택한 페이지·섹션·요소의 속성을 바꿉니다. 아무것도 선택하지 않으면 "편집할 페이지, 섹션 또는 요소를 선택하세요."라고 안내합니다.
4. 4PRIME 입력창 — "PRIME에게 요청하세요 (예: Hero를 더 프리미엄하게)"처럼 원하는 변경을 말로 요청합니다.
5. 5상단 작업 버튼 — 저장 상태, 실행 취소/다시 실행, 빌드·배포·게시, ZIP 다운로드이 모여 있습니다.

02. Website Studio 시작하기

Website Studio는 PRIME 대화에서 시작합니다. 만들고 싶은 사이트를 대화로 설명하면 PRIME이 웹사이트 프로젝트를 준비하고, 대화 안에 Website Studio로 들어가는 버튼을 보여 줍니다.

1. 1PRIME 대화에서 어떤 사이트인지, 주요 방문자, 방문자가 먼저 할 행동을 알려 줍니다. 브랜드 자료나 참고 사이트가 있으면 함께 첨부합니다.
2. 2대화에 나타나는 Website Studio 열기 버튼을 누릅니다.
3. 3Website Studio가 열리면 자동으로 만들어진 페이지와 섹션을 확인하고 편집을 시작합니다.

편집 중 대화로 돌아가려면 상단 왼쪽의 PRIME 대화를 누릅니다. 위치는 화면 구성의 첫 번째 스크린샷에서 볼 수 있습니다.

03. 화면 구성 알아보기

상단 왼쪽 — 작업 모드

상단 왼쪽 영역.닫기

1. 1PRIME 대화 — PRIME 대화 화면으로 돌아갑니다.
2. 2프로젝트 이름 — 눌러서 이름을 바로 고칠 수 있습니다.
3. 3디자인 · 미리보기 · 코드 — 작업 모드를 바꿉니다. 키보드 1·2·3으로도 전환됩니다. 자세한 내용은 미리보기와 코드를 참고하세요.
4. 4구조 · 콘텐츠 · 반응형 · 인터랙션 — 디자인 모드에서 지금 집중할 편집 종류를 고릅니다.

왼쪽 아래 — 디자인 시스템과 에셋

사이트 구조 패널 아래쪽.닫기

1. 1디자인 시스템 — 사이트 전체 색상과 테마를 관리하는 패널을 엽니다. 디자인 시스템에서 설명합니다.
2. 2전체 · 이미지 · 영상 — 프로젝트 에셋 목록을 종류별로 거릅니다.
3. 3에셋 목록 — 프로젝트에 연결된 이미지와 연결된 섹션 이름이 보입니다. 생성에 실패한 항목은 실패로 표시됩니다.
4. 4추천 비주얼 안내 — "추천 비주얼 1개 — 하단 PRIME에서 만들 수 있습니다"처럼 아직 만들지 않은 추천 이미지가 있으면 알려 줍니다.

04. 페이지와 섹션 관리

사이트 구조 패널 위쪽에서 페이지를 추가하고, 각 페이지 아래에 섹션을 쌓습니다.

사이트 구조 패널 위쪽.닫기

1. 1페이지 프리셋 — 여러 섹션이 미리 짜인 페이지 구성을 고릅니다. 프리셋에서 설명합니다.
2. 2페이지 추가 — 빈 새 페이지를 추가합니다.
3. 3레이어 검색 — 섹션이 많을 때 이름으로 찾습니다.
4. 4페이지 행 — 페이지 이름과 주소(예: /ecommerce)가 보입니다. 오른쪽 +(섹션 추가)로 이 페이지에 섹션을 추가하고, ···(더 보기)로 페이지 메뉴를 엽니다.
5. 5눈 아이콘(숨기기) — 섹션을 지우지 않고 사이트에서 잠시 숨깁니다. 다시 누르면 표시됩니다.

섹션 추가하기

페이지 행의 +를 누르면 아래에 섹션 유형 패널이 열립니다.

섹션 추가 패널.닫기

1. 1프리셋 갤러리에서 고르기 — 디자인이 완성된 섹션 프리셋 중에서 골라 추가합니다.
2. 2섹션 유형 — 헤더 · 히어로 · 기능 소개 · 신뢰 요소 · 가격 · FAQ · CTA · 푸터 · 커스텀 중 하나를 눌러 기본 섹션을 바로 추가합니다.

05. 프리셋으로 빠르게 구성하기

프리셋 갤러리에는 섹션 프리셋과 여러 섹션을 묶은 페이지 프리셋이 들어 있습니다. 현재 화면 상단에는 섹션 169 · 페이지 26로 표시됩니다.

프리셋 갤러리 — 페이지 탭.닫기

1. 1탭 — 섹션 · 페이지 · 업종 스타터 · 즐겨찾기 · 최근 중에서 고릅니다.
2. 2전체 개수 — 지금 사용할 수 있는 섹션·페이지 프리셋 수입니다.
3. 3페이지 프리셋 카드 — 카드 제목(예: SaaS 랜딩)과 들어 있는 섹션 순서를 보여 줍니다. 오른쪽 위에 섹션 개수가 표시됩니다.
4. 4페이지로 추가 — 이 구성을 새 페이지로 추가합니다.

화면에 있는 페이지 프리셋 예시

목록 아래로 내리면 더 많은 페이지 프리셋이 이어집니다.

섹션 프리셋과 다른 스타일로 바꾸기

• 섹션 탭에서는 섹션 하나를 골라 현재 페이지에 추가합니다. 검색(예: hero, fashion, gallery, pricing …)과 카테고리 필터를 함께 쓸 수 있습니다.
• 이미 있는 섹션의 모양만 바꾸려면 섹션의 ··· 메뉴 또는 속성 패널의 다른 스타일로 바꾸기를 사용합니다.
• 업종 스타터는 업종별 추천 색·글꼴·페이지 구성을 한 번에 적용합니다.

06. 섹션 메뉴와 레이어 정리

섹션 행 오른쪽의 ···(더 보기)를 누르면 섹션을 정리하는 메뉴가 열립니다.

섹션 더 보기 메뉴.닫기

1. 1···(더 보기) — 섹션 메뉴를 엽니다.
2. 2이름 변경 · 복제 · 다른 스타일로 바꾸기 · 잠그기 · 위로 이동 · 아래로 이동 · 삭제 — 섹션 이름을 바꾸고, 복사본을 만들고, 모양을 바꾸고, 실수로 바뀌지 않게 잠그고, 순서를 옮기고, 삭제합니다.
3. 3다른 페이지로 이동 — 섹션을 다른 페이지(예: 쇼핑몰, SaaS 랜딩)로 옮깁니다.

• 섹션 이름 옆 회색 글자(헤더, 히어로, 기능 소개 등)는 섹션 유형입니다.
• 행 왼쪽의 >를 누르면 섹션 안의 요소 목록을 펼칠 수 있습니다.
• 잠근 섹션에는 잠김, 숨긴 섹션에는 숨김 표시가 붙습니다.

07. 섹션 선택과 속성 패널

사이트 구조 패널의 섹션 행이나 캔버스의 섹션을 누르면 선택됩니다. 선택하면 속성 패널과 PRIME 입력창이 그 섹션을 기준으로 바뀝니다.

섹션을 선택한 상태.닫기

1. 1선택된 섹션 행 — 사이트 구조 패널에서 강조됩니다.
2. 2캔버스 선택 표시 — 캔버스 왼쪽 위에 선택된 섹션 이름이 표시됩니다.
3. 3속성 탭 — 레이아웃 · 콘텐츠 · 스타일 · 에셋 · 반응형 · 인터랙션 · 데이터 탭으로 속성을 나눠 봅니다.
4. 4다른 스타일로 바꾸기 · 잠그기 — 선택한 섹션의 모양을 다른 프리셋으로 바꾸거나 잠급니다.
5. 5PRIME 선택 대상 — 입력창 위에 "풀스크린 히어로 화보 선택됨"처럼 지금 선택한 섹션이 표시됩니다. 이 상태에서 요청하면 PRIME이 이 섹션을 기준으로 수정합니다.

08. 텍스트 수정하기

캔버스 아래에는 "클릭해 선택하고, 텍스트를 두 번 클릭하면 바로 고칠 수 있습니다. 이미지 영역을 누르면 바꿀 수 있습니다."라는 안내가 표시됩니다. 텍스트 수정은 이 안내대로 진행합니다.

1. 1캔버스에서 바꾸고 싶은 텍스트(예: 메뉴 이름, 제목)를 두 번 클릭합니다.
2. 2텍스트를 바로 고칩니다.
3. 3텍스트 밖을 누르면 수정이 반영되고 상단 저장 상태가 바뀝니다.

같은 작업을 PRIME에게 요청할 수도 있습니다. 텍스트가 있는 섹션을 선택한 뒤 PRIME 입력창에 바꿀 문구를 정확히 적어 요청하세요. 예: “상단 메뉴의 룩북을 컬렉션으로 바꿔줘”.

09. 레이아웃과 배치 편집하기

섹션을 선택하면 속성 패널 위쪽에 배치, 아래쪽에 레이아웃 도구가 나옵니다.

배치

배치 영역.닫기

1. 1배치 방식 — 배경 · 전체폭 · 분할 · 일반 중에서 이미지와 글의 기본 배치를 고릅니다.
2. 2글씨 위치 — 9칸 중 하나를 눌러 글씨가 놓일 위치를 정합니다.
3. 3오버레이 · 어둡기 — 배경 이미지 위 글씨가 잘 읽히도록 덮개 종류와 어둡기를 조절합니다.
4. 4높이 — 섹션 높이를 자동·보통·높게·화면 가득 중에서 고릅니다.
5. 5모바일 — 모바일에서 이미지 숨기기, 기본 · 이미지 먼저 · 글 먼저로 모바일 순서를 정합니다.

레이아웃 도구

레이아웃 도구.닫기

1. 1간격(gap) — 섹션 안 요소 사이 간격을 고릅니다.
2. 2정렬 — 가로(왼쪽·가운데·오른쪽)와 세로(위·가운데·아래) 정렬을 정합니다.
3. 3분배 — 요소를 가로·세로로 고르게 나누거나 같은 폭으로 맞춥니다.
4. 4컨테이너 · 최대 폭(px) — 내용이 차지할 폭을 정합니다.
5. 5위치 · 최소 높이 — 위치 방식과 섹션의 최소 높이를 정합니다.

10. 스타일 편집하기

섹션의 색과 표면 느낌은 속성 패널의 섹션 설정에서 바꿉니다. 현재 화면에는 다음 항목이 있습니다.

11. 디자인 시스템 사용하기

디자인 시스템은 사이트 전체에 쓰이는 테마와 색을 한곳에서 관리합니다. 왼쪽 아래 또는 속성 패널의 디자인 시스템 버튼으로 엽니다.

디자인 시스템 패널.닫기

1. 1테마 — 라이트 · 다크 중에서 사이트 기본 테마를 고릅니다.
2. 2디자인 방향 — 사이트 유형, 구성, 피할 요소처럼 이 사이트의 디자인 방향이 요약되어 있습니다.
3. 3색상 — 배경, 표면, 카드 표면, 본문 글자, 보조 글자, 테두리, 주 버튼 등 색을 색상 칩이나 HEX 값으로 바꿉니다.

개별 스타일과 디자인 시스템의 차이

12. 반응형 확인하기

상단 오른쪽의 데스크톱 · 태블릿 · 모바일 버튼으로 캔버스를 화면 크기별로 확인합니다. 위치는 저장·실행 취소 스크린샷의 5번입니다.

• 상단의 반응형 모드와 속성 패널의 반응형 탭에서 화면 크기별 설정을 확인합니다.
• 이미지가 있는 섹션은 배치의 모바일 항목에서 모바일에서 이미지 숨기기와 모바일 순서(이미지 먼저 / 글 먼저)를 바로 정할 수 있습니다.

13. 컴포넌트로 섹션 재사용하기

같은 섹션(예: 공통 헤더, 공통 푸터)을 여러 페이지에서 쓰려면 컴포넌트로 저장합니다. 섹션을 선택한 뒤 속성 패널 아래쪽으로 내려가면 나옵니다.

속성 패널 아래쪽.닫기

1. 1레이어 — Z-INDEX와 맨 앞 · 앞으로 · 뒤로 · 맨 뒤로 겹치는 순서를 정합니다.
2. 2컴포넌트 · 공통 섹션 — 컴포넌트로 저장를 누르면 이 섹션이 재사용 컴포넌트가 됩니다. 화면 안내대로 다른 페이지에 같은 컴포넌트를 넣고, 원본(master)을 바꿔 모든 사용처에 반영할 수 있습니다.

14. 이미지 바꾸기

이미지가 있는 섹션을 선택하면 속성 패널 맨 위에 비주얼 영역이 나옵니다. 캔버스에서 이미지 영역을 눌러도 같은 곳으로 이동합니다.

비주얼 영역.닫기

1. 1미리보기 — 현재 이미지와 상태가 보입니다. 생성에 실패한 경우 안내 문구와 함께 다시 만들기 버튼이 나옵니다.
2. 2AI로 교체 — AI로 새 이미지를 만들어 이 자리에 넣습니다. 크레딧이 사용됩니다.
3. 3내 이미지로 교체 — 가지고 있는 이미지 파일을 올려 교체합니다.
4. 4기존 이미지 선택 — 이 프로젝트에 이미 있는 이미지 중에서 고릅니다.
5. 5배치 — 이미지와 글의 배치를 바꿉니다. 레이아웃과 배치를 참고하세요.

15. PRIME에게 자연어로 수정 요청하기

직접 속성을 바꾸는 대신 PRIME에게 말로 요청할 수 있습니다. 화면 아래 PRIME 입력창을 사용합니다.

1. 1수정할 섹션을 사이트 구조 패널이나 캔버스에서 선택합니다. 선택하지 않으면 사이트 전체를 기준으로 요청합니다.
2. 2입력창 위에 "(섹션 이름) 선택됨"이 표시되는지 확인합니다(섹션 선택 스크린샷 5번).
3. 3원하는 변경을 문장으로 적고 보내기를 누릅니다.
4. 4캔버스에서 결과를 확인합니다. 마음에 들지 않으면 실행 취소로 되돌리거나 다시 요청합니다.

요청 예시

• 입력창 기본 예시: "PRIME에게 요청하세요 (예: Hero를 더 프리미엄하게)"
• 섹션을 선택했을 때 예시: "풀스크린 히어로 화보을(를) 어떻게 바꿀까요? 예: 여성 모델 이미지를 넣어줘"
• “이 섹션을 3열 카드로 바꿔줘”, “모바일에서는 1열로 바꿔줘”, “이 버튼을 검정색으로 바꿔줘”처럼 대상과 결과를 함께 적습니다.

16. 저장 · 실행 취소 · 다시 실행

편집 내용은 자동으로 저장됩니다. 상단 오른쪽에서 저장 상태와 되돌리기 버튼을 확인합니다.

상단 오른쪽 영역.닫기

1. 1저장 상태 — 저장됨, 저장 중, 저장 실패, 충돌 중 현재 상태가 표시됩니다.
2. 2실행 취소 · 다시 실행 — 직전 변경을 되돌리거나 다시 적용합니다. 단축키는 Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z입니다. 버튼에 마우스를 올리면 되돌릴 작업 이름이 보입니다.
3. 3빌드 · 배포 · 게시 — 현재 준비 중인 버튼입니다. 빌드 · 배포 · 게시를 참고하세요.
4. 4ZIP 다운로드 — 사이트 코드를 ZIP 파일로 내려받습니다. ZIP 다운로드에서 설명합니다.
5. 5데스크톱 · 태블릿 · 모바일 · 편집 표시 — 캔버스 화면 크기를 바꾸고, 편집 가능한 영역 표시를 켜고 끕니다.

17. 미리보기와 코드

모드 전환 버튼 위치는 화면 구성 첫 번째 스크린샷의 3번입니다.

18. 빌드 · 배포 · 게시

상단의 빌드 · 배포 · 게시 버튼은 현재 비활성 상태이며, 마우스를 올리면 준비 중으로 표시됩니다. 지금은 이 버튼으로 사이트를 배포할 수 없습니다.

완성한 사이트를 직접 호스팅하려면 ZIP 다운로드로 코드를 받아 사용하세요.

19. ZIP 다운로드

상단 오른쪽 파란 버튼으로 사이트를 ZIP 파일로 내려받습니다. 버튼에는 현재 선택된 출력 형식이 함께 표시됩니다.

ZIP 다운로드와 출력 형식.닫기

1. 1ZIP 다운로드 — 표시된 형식(예: HTML 웹사이트)으로 바로 내려받습니다.
2. 2⌄(다른 형식으로 다운로드) — 출력 형식 목록을 엽니다.
3. 3출력 형식 — Next.js(SEO·여러 페이지에 적합 · Next.js App Router(정적 export)), React(인터랙티브 앱형 화면 · React + Vite), HTML 웹사이트(설치 없이 바로 여는 HTML/CSS/JavaScript) 중에서 고릅니다.
4. 4준비 상태 안내 — 예: "아직 준비되지 않은 이미지 4개가 있습니다." 아직 만들어지지 않은 이미지가 있으면 내려받기 전에 알려 줍니다.

• React는 "정적 호스팅 시 모든 경로를 index.html로 연결해야 합니다.", "서버 렌더링이 없어 페이지별 검색 정보가 제한됩니다."라는 주의 사항이 함께 표시됩니다.
• HTML 웹사이트는 설치 없이 바로 열 수 있는 형식입니다.

20. 문제 해결