Pancake Stack › Pancake Stack 매뉴얼

Pancake 안에서 사이트의 파일을 탐색하고 편집하며, 휴대폰, 태블릿, 데스크톱 너비로 미리 보고, 어시스턴트와 함께 페이지를 디자인합니다.

5.1파일 윈도우

사이트 카드의 파일을 클릭하십시오. 윈도우는 세 부분으로 나뉩니다. 왼쪽에 폴더 트리, 가운데에 편집기, 오른쪽에 미리 보기가 있습니다.

• 트리. 폴더는 그 자리에서 펼쳐집니다. Finder에서 파일을 목록으로 끌어 오면 추가됩니다. 파일을 오른쪽 클릭하면 이름 변경…, 복제, Finder에서 보기, 휴지통으로 이동을 쓸 수 있습니다. 숨김 파일과 백업은 흐리게 표시됩니다.
• 민감한 파일(.env 파일, .sql 덤프, 키, .htpasswd)에는 자물쇠가 표시됩니다. 이 파일들은 브라우저에 절대 제공되지 않으며, Pancake는 이곳에서 편집하지 않습니다.
• 새로 만들기는 파일(이름을 정하지 않으면 page.html)이나 폴더를 만듭니다.

5.2편집기

편집기는 줄 번호를 표시하고 HTML, CSS, JavaScript, PHP, Python을 색으로 구분합니다. ⌘F로 찾기, ⌥⌘F로 찾기와 바꾸기, ⌘S로 저장합니다. 스마트 따옴표와 자동 수정은 꺼져 있으므로 코드가 바뀌지 않습니다.

• 이미지, PDF 등 텍스트가 아닌 파일은 Quick Look으로 열립니다.
• 2MB가 넘는 파일은 읽기 전용으로 열리며, 파일의 끝부분이 표시됩니다(로그를 볼 때 유용합니다).
• 내 편집기에서 열기는 파일을 내 편집기로 보냅니다.

5.3실시간 미리 보기

도구 막대에서 미리 보기를 켜고 너비를 고르십시오. 휴대폰, 태블릿, 데스크톱 중 하나입니다. 미리 보기는 저장할 때마다 다시 불러옵니다. 편집 중인 파일이 사이트 안의 HTML이나 PHP 페이지이면 그 페이지를, 그렇지 않으면 홈페이지를 보여 줍니다.

미리 보기에는 서버가 필요합니다. 서버가 중지되어 있으면 파일 윈도우의 모두 시작 버튼을 쓰십시오.

5.4HTML 정리

HTML 파일에서는 HTML 정리가 HTML Tidy로 페이지를 들여쓰고, 태그를 닫고, 중첩을 바로잡습니다. 자동으로 저장하지는 않으므로 결과를 확인한 다음 ⌘S를 누르십시오.

5.5어시스턴트에게 요청

1. 바꾸고 싶은 코드를 선택하십시오. 파일 전체를 대상으로 하려면 아무것도 선택하지 마십시오.
2. 어시스턴트에게 요청을 클릭하고 변경 내용("머리글을 상단에 고정해 줘")을 설명한 다음 요청을 클릭하십시오.
3. 현재와 제안을 나란히 비교하십시오. 마음에 들면 변경 적용을 클릭한 뒤 저장하십시오.

적용하고 저장하기 전까지는 아무것도 바뀌지 않습니다. 어시스턴트는 클라우드 AI 제공업체를 켜 두었으면 그것을, 그렇지 않으면 Private Cloud Compute나 이 Mac의 Apple Intelligence를 사용합니다(어시스턴트와 MCP 참조). 코드를 클라우드 제공업체로 보낼 때는 암호와 키를 먼저 제거합니다.

5.6어시스턴트와 디자인

원하는 사이트를 설명하면 Pancake가 홈페이지를 디자인합니다. 사이트 폴더에 반응형 페이지가 완성된 형태로 만들어지며, 바로 편집하고 테스트하고 배포할 수 있습니다.

1. 새 사이트 ▸ 어시스턴트와 디자인을 선택하고 사이트 이름을 정하십시오. (기존 사이트라면 파일을 열고 디자인…을 클릭하십시오.)
2. 스타일 고르기: 블랙 & 비즈니스, 발랄하게, 우아하게, 미니멀, 따뜻하고 친근하게, 또는 놀라게 해 줘.
3. 사이트 설명하기: 예를 들어 "교토의 빵집: 우리 빵, 영업시간, 찾아오는 길, 문의 양식"처럼 입력하십시오.
4. 필요하면 더 많은 선택을 열어 레이아웃(랜딩 페이지, 포트폴리오, 레스토랑 또는 쇼핑몰, 문서)과 색상을 고르십시오.
5. 디자인하기를 클릭하고 휴대폰, 태블릿, 데스크톱 너비로 미리 보기를 확인하십시오.
6. 마음에 들 때까지 변경 요청에서 변경을 요청하거나("머리글을 더 어둡게", "가격 섹션 추가"), 처음부터를 클릭하십시오.
7. 이 디자인 사용을 클릭하십시오. Pancake가 먼저 저장 지점을 만들고, 이전 페이지는 .pancake-bak으로 보관합니다.

페이지를 만드는 방식은 사용할 수 있는 AI에 따라 다릅니다.

• Private Cloud Compute 또는 내 AI 키: 어시스턴트가 페이지 전체를 작성합니다. Claude 키를 쓰면 Pancake가 요청마다 Anthropic의 프런트엔드 디자인 가이드를 함께 보내며, 다른 모델에는 Pancake 자체 디자인 가이드를 보냅니다.
• 이 Mac의 Apple Intelligence: 어시스턴트가 페이지를 구성하고 Pancake의 템플릿이 그립니다. 무료이며 개인정보가 보호되고 오프라인에서도 동작합니다.
• 사용할 수 있는 AI가 없을 때: 고른 스타일로 페이지를 만들고, 설명의 첫 줄을 제목으로 씁니다.

페이지는 독립적으로 동작합니다. 방문자의 기기에 이미 있는 글꼴을 사용하며, 외부 파일이나 스크립트가 필요 없습니다.