키트: 둘러보기, 미리보기, 모듈 추가

탐색기는 정확히 세 단계로 구성되며, 각 단계는 컴포넌트 상태가 아니라 페이지 주소 자체에 있습니다. 카테고리 그리드(/projects/kit 또는 /projects/<id>/kit), 하나의 카테고리 모듈 목록(?cat=<key> 추가), 그리고 모듈 하나의 상세 페이지(&module=<id> 추가)입니다. 그래서 브라우저의 뒤로 가기 버튼은 항상 올바르게 작동하며, 특정 모듈의 상세 페이지는 실제로 공유할 수 있는 링크입니다. "견적 또는 견적 요청 양식으로 정확히 무엇을 얻는지"를 설명하는 대신 그 링크를 바로 보내면 됩니다. Escape 키는 Back과 같이 한 번에 한 단계씩 돌아갑니다.

프로젝트 내부(/projects/<id>/kit)에서 열면 페이지가 어떤 프로젝트인지 알기 때문에, 이미 포함된 항목을 보여주고 바로 그 프로젝트에 추가하게 해줍니다. 단독으로 열면(/projects/kit, Kit 탭의 링크에서 오거나 직접 접근) 프로젝트와 무관한 같은 세 단계가 나옵니다. 무엇을 만들지 정하기 전에 둘러보거나, 특정 프로젝트를 열지 않고 카탈로그를 보여줄 때 유용합니다.

카테고리 그리드 맨 위에는 aiKit의 다른 곳과 같은 양방향 전환 버튼이 전체 카탈로그를 나눕니다. 사이트 킷은 웹사이트나 앱 자체의 일부가 되는 섹션과 기능(페이지, 양식, 갤러리, 스토어, 예약, SEO)이고, 비즈니스 도구 킷은 프로젝트 안이 아니라 옆에서 작동하는 도구(마케팅 자동화, 청구서, CRM, 직원 도구, 보고서)입니다. 각 카테고리 타일에는 모듈 개수가 표시되며, 그중 하나라도 "바로 사용 가능" 모듈(아래 참고)이면 "N개 바로 사용 가능" 배지가 나타납니다.

카테고리 위의 검색창은 선택된 전환 버튼과 관계없이 사이트 킷과 비즈니스 도구 킷을 포함한 전체 카탈로그에서 모듈 이름이나 설명으로 검색합니다. 따라서 사이트 킷을 보는 중에도 "invoice"를 검색하면 해당 모듈을 찾을 수 있습니다.

프로젝트 내부에서 열었고 검색 중이 아닐 때, aiKit에 실제 추천 항목이 있으면 카테고리 그리드 위에 "이 프로젝트에 추천" 줄이 나타납니다. 이는 프로젝트 종류에 맞춘 간단한 비AI 규칙으로 정해집니다(웹사이트에는 견적 양식, 문의 양식, 후기 쇼케이스, 지역 SEO, FAQ 페이지가 추천되고, 온라인 스토어에는 장바구니와 결제, 장바구니 이탈 복구, 상품 후기가 추천되며, 랜딩 페이지, 앱, 관리 시스템, 대시보드, 고객 포털, 블로그, 마케팅 자동화 프로젝트도 같은 방식입니다). 여기에 프로젝트 목표 텍스트의 몇 가지 키워드 일치도 더해집니다("quote", "booking", "review", "email", "invoice", "sell online"이라는 단어가 언급되면 해당 모듈과 한 줄 이유가 나타납니다). 프로젝트에 이미 있는 항목은 제외되며, 목록은 최대 여섯 개입니다.

모든 모듈에는 두 가지 상태 표시 중 하나가 붙으며, 문구는 마케팅 용어가 아니라 의도적으로 있는 그대로입니다. "바로 사용 가능"은 모듈이 빌드 엔진의 검증된 모듈 중 하나라는 뜻입니다. 실제 사이트에 쓰이는 것과 똑같은 템플릿으로, 고객님의 정보 대신 샘플 데이터를 넣어 실제 페이지를 렌더링하는 실제 코드입니다. "고객님을 위해 제작"은 카탈로그에 실제로 계획된 부분이지만 아직 렌더링되는 것이 없다는 뜻입니다. 이를 선택하면 계획에 추가되고 실제 작업 항목이 등록되며, 모듈은 다른 AI 편집과 같은 방식으로 사이트 자체 코드에 고객님의 브랜드와 문구로 만들어집니다. 다만 오늘 바로 쓸 수 있는 검증된 템플릿은 아직 없습니다.

두 상태 모두 "실제가 아님" 또는 "가상"을 뜻하지 않습니다. 둘 다 aiKit이 실제로 만들어 줄 수 있는 것입니다. 상태 표시가 알려주는 차이는, 완성된 모습을 지금 바로 볼 수 있는지, 아니면 설명과 도식으로 머릿속에 그려야 하는지뿐입니다.

카테고리를 열면 그 안의 모든 모듈이 카드로 표시됩니다. 카드에는 썸네일, 모듈 이름, 상태 표시, 한 줄 설명, "잘 맞는 용도" 칩 줄(최대 세 개), 그리고 이미 추가된 경우 "이 프로젝트에 있음"(프로젝트 안에서 둘러볼 때)이 나타납니다. 바로 사용 가능 모듈의 썸네일은 실제 페이지의 작은 라이브 미리보기이며, 화면에 들어올 때 비로소 불러와지고, 화면에 동시에 여섯 개까지만 표시되어 긴 카테고리도 페이지가 느려지지 않습니다. 그 이상은 실제로 보이기 전까지 기본 로딩 자리표시자가 나타납니다. 고객님을 위해 제작 모듈의 썸네일은 아래 설명하는 것과 같은 그림 도식이지만 더 작습니다. 다만 작동하는 미리보기가 있는 모듈(아래 참고)은 예외로, 카드에 축소된 실제 샘플 사이트, "작동 미리보기 · N개 변형" 배지, 그리고 "상세 보기" 대신 "작동 보기" 버튼이 나타납니다. "상세 보기"를 누르면 모듈 자체 페이지가 열립니다.

'지금 바로 사용' 모듈의 미리보기는 실제로 테스트된 페이지를 전체 크기로 보여 주는 실제 iframe입니다. 작은 브라우저 창처럼 테두리가 있으며, 데스크톱/휴대폰 전환 버튼으로 프레임 크기를 실제로 바꿔 휴대폰에서 어떻게 보이는지 확인할 수 있습니다(실제 휴대폰에서는 전환 버튼 대신 "휴대폰 미리보기" 라벨이 표시되고, 프레임은 히어로 영역이 아닌 양식이 보이도록 폼 위치로 스크롤된 상태로 열립니다). 프레임 하단은 서서히 사라지며, 그 아래의 "전체 미리보기 열기"를 누르면 전체 페이지가 새 탭에서 열립니다. 그 아래 설명에는 대신 사용된 샘플 업체 이름이 표시됩니다. 프로젝트 안에서 열면 "이 사이트의 색상으로 보기" 전환 버튼이 있어, 브리프의 브랜드 메모에 입력된 #hex 코드에서 색상을 읽어 프로젝트 자체 브랜드 색상과 프로젝트 이름으로 같은 미리보기를 다시 불러옵니다. 일반 샘플이 아니라 실제 사이트에 가까운 모습을 볼 수 있습니다.

'맞춤 제작' 모듈에는 실시간 iframe이 없습니다. 대신 카테고리 목록과 같은 설명용 와이어프레임을 더 크게 보여 줍니다. 레이아웃 형태를 나타내는 단순한 단선 SVG 도식으로, 양식의 입력란, 달력의 격자, 대시보드의 타일 등 해당 모듈에 맞는 화면이 그려지며, 모듈의 미리보기 데이터에서 가져온 짧은 라벨 몇 개가 함께 표시됩니다. 그 아래 설명은 모든 항목에 필수이며 절대 제거되지 않습니다: "레이아웃 일러스트입니다. 귀하의 버전은 사이트에 맞게 디자인됩니다." 이는 형태 스케치를 완성된 브랜드 맞춤 미리보기로 오해하지 않도록 하기 위한 것입니다.

실제 작동하는 미리보기(2026-10-04): 일부 '맞춤 제작' 모듈은 스케치 대신 전체 기능을 갖춘 클릭 가능한 샘플 사이트를 열며, 세부 정보 위에 전체 너비로 표시됩니다. 'E-커머스 / 온라인 스토어' 모듈 12개는 모두 같은 샘플 도자기 상점 Juniper Kiln을 열고, 각 모듈의 핵심 기능을 보여 줍니다. 상품 목록(필터, 정렬, 검색, 상품 열기, 유약과 크기 선택 시 사진과 가격이 바뀜), 장바구니와 결제(수량 변경, 상품 삭제, WELCOME10, FREESHIP 또는 GIFT-2580 입력, 우편번호로 배송 예상일 확인, 주문 확인 페이지까지 결제), 결제 옵션(카드, Pay in 4, 간편결제 버튼), 배송 요금, 할인 코드와 기프트 카드, 상품 리뷰(별점이나 사진으로 필터, 도움됨 표시, 리뷰 작성), 묶음 상품과 추가 옵션, 판매세(배송 주를 바꾸면 세금 항목이 바뀜), 고객 계정(로그인, 재구매, 택배 추적, 반품 시작), 주문 이메일(주문 확인, 발송, 배송 완료 이메일과 작동하는 추적 페이지), 반품 및 교환(주문 찾기, 상품과 사유 선택, 반품 라벨 받기), 재고(재고를 바꾸면 고객에게 보이는 내용이 바뀌는 소유자 보기). '온라인 강좌 및 디지털 상품' 모듈 10개는 샘플 빵 학교 Rise & Crumb을 엽니다. 강의 재생(속도, 자막), 완료 표시, 진행률 원이 채워지는 모습 보기, 퀴즈 응하기, 무료 미리보기에서 등록, 수료증 보기, 강의 아래 질문하기, 디지털 다운로드 구매, 강좌 묶음 선택이나 결제 추가 옵션 체크, 그리고 소유자 보기로 전환해 강의 이름 변경, 순서 변경, 추가, 비공개 전환 및 매주 공개 시점 설정이 가능합니다. 공개 일정 모듈에는 프레임 위에 "미리보기 시간" 행이 있으며, 한 주 건너뛰기(및 오늘로 돌아가기)가 있어 잠긴 강의가 공개 날짜에 열리는 모습을 볼 수 있습니다.

프레임 위에는 모듈이 제공하는 각 변형에 대한 선택 행이 있습니다(예: 매장 레이아웃: 그리드, 목록 또는 추천; 장바구니: 슬라이드 장바구니 또는 장바구니 페이지, 그리고 결제: 한 페이지 또는 단계별; 공개 규칙: 지정 날짜, 가입 후 일수 또는 마지막 강의 완료 후). 하나를 선택하면 샘플 사이트가 즉시 해당 변형으로 다시 그려지며, 페이지 주소(?v=…)에 저장되어 특정 변형 링크를 공유할 수 있습니다. 데스크톱과 휴대폰 전환은 프레임 크기를 바꿔 샘플 사이트가 휴대폰에서처럼 다시 배치되게 합니다(실제 휴대폰에서는 "휴대폰 보기" 라벨로 표시됩니다). 초기화는 샘플 사이트를 처음 상태로 되돌립니다. "해볼 일" 행에는 먼저 클릭할 것들이 짧게 나열되며, 선택한 각 변형의 설명은 프레임 아래에 표시됩니다. 브리프에 브랜드 색상이 있는 프로젝트 안에서는 "이 사이트의 색상으로 보기"를 통해 샘플 사이트의 주 색상을 프로젝트 색상으로 바꿀 수 있습니다(흰색 버튼 글자가 읽힐 만큼 색이 충분히 어두운 경우에만).

작동하는 미리보기의 어떤 내용도 서버로 전송되지 않습니다. 결제 연결은 없으며, 결제 화면에는 "미리보기 — 아무것도 청구되지 않고 주문이 전송되지 않습니다"라고 표시됩니다. 카드 번호는 고정된 읽기 전용 샘플이고, 간편결제 버튼(Apple Pay, Google Pay, PayPal)은 안내 문구만 보여 줍니다. 이메일은 전송되지 않고, 리뷰도 게시되지 않으며, 아무것도 저장되지 않습니다. 페이지를 떠나면 모든 내용이 사라집니다. 샘플 업체, 상품, 사람, 가격은 모두 가상입니다. 프레임 아래 설명에 이를 밝힙니다: "가상의 업체를 위한 샘플 데이터가 포함된 작동 미리보기. 귀하의 버전은 자신의 상품, 가격, 문구, 브랜드를 사용합니다. 여기서는 아무것도 청구되거나, 저장되거나, 전송되지 않습니다." 다른 '맞춤 제작' 모듈은 여전히 레이아웃 일러스트를 보여 줍니다.

• 방문자가 보는 화면 — 모듈을 사용하는 사람이 실제로 겪는 과정을 번호가 매겨진 쉬운 설명으로 단계별로 보여 줍니다.
• 제공되는 것 — 모듈이 프로젝트 소유자에게 제공하는 것(실제 위치에 기록되는 고객 문의, 업데이트할 수 있는 상태 등).
• 기능, 그리고 카탈로그에 정의된 실제 명명된 변형이 있는 모듈에 한해 "변형 선택" 카드 세트가 이 섹션에 바로 표시됩니다(첫 번째 항목이 기본 선택되며 작은 체크 표시가 붙습니다). 직접 입력하는 자유 형식 맞춤 설정이 아니라, 실제 양자택일 선택을 손으로 입력하지 않고 여기서 고를 수 있습니다.
• 중요한 이유 — 기업이 이것을 원하는 이유에 대한 솔직한 설명.
• 맞춤 설정 방식(지금 바로 사용) 또는 선택할 수 있는 변형(맞춤 제작) — 실제로 무엇을 다르게 만들 수 있는지.
• 가장 잘 맞는 업종 — 카드와 같은 업종 칩을 전체 목록으로 표시합니다.
• 만들어지는 방식 — 이 모듈이 어떻게 만들어지는지 한 문장으로 정확히 설명합니다. 엔진이 지금 렌더링하는 검증된 페이지인지, 아니면 빌드 중 AI가 사이트에 직접 만들어 넣는지 밝히고, 결제나 지도 같은 외부 서비스 계정이 필요하면 그 내용도 함께 적습니다.

다른 모든 항목 아래에는 "{프로젝트 이름}에 추가"(프로젝트를 아직 선택하지 않았다면 "내 프로젝트에 추가")가 있습니다. 모듈에 저장된 맞춤 아이디어가 있으면 먼저 체크리스트로 보입니다. 준비된 모듈에는 "추천 맞춤 설정", 맞춤 제작 모듈에는 "원하는 변형 선택"이라는 제목이 붙습니다. 항목을 체크하면 그 줄이 단순한 체크 표시가 아니라 전송 내용에 그대로 포함됩니다.

미리 보기가 있는 모듈은 패널이 미리 보기 아래 왼쪽 열에 놓이며, "내 변형"으로 시작합니다. 미리 보기의 선택 항목에서 고른 변형이 표시됩니다(예: "장바구니: 장바구니 페이지 · 결제: 단계별"). 추가를 누를 때 미리 보기에 보이는 내용이 그대로 기록됩니다. 이 내용은 해당 모듈과 함께 프로젝트 브리프에 저장되고, 작업 항목에는 "변형: …"으로 표시되어 작업자가 그 레이아웃대로 만들 수 있습니다. 기능 섹션에 이름 붙은 옵션이 있는 모듈은 "무엇이 가장 중요한가요?"를 따로 묻기 때문에 두 선택이 섞이지 않습니다.

"고객님에게 다르게 필요한 것은 무엇인가요?"는 aiKit의 다른 곳과 같은 음성 입력 버튼이 있는 자유 입력 메모입니다. 로고, 참고 사진, 사양서를 위한 "사진 또는 PDF 첨부" 버튼도 있으며, 이미지와 PDF만 각각 최대 2.5MB까지 첨부할 수 있습니다. 첨부된 파일은 그 자리에서 삭제 가능한 칩으로 표시됩니다. 모듈을 제대로 만들기 위해 꼭 답해야 할 구체적인 질문이 있으면 "저희가 물어볼 내용" 아래에 각각 선택 입력란과 함께 나타나므로, 나중에 질문을 기다리지 않고 미리 답할 수 있습니다.

실제 프로젝트에 들어가면 "플랜에 추가"를 언제나 사용할 수 있습니다. 이 버튼은 선택 내용을 프로젝트 브리프에 기록하고(사이트 플랜 화면과 프로젝트 페이지가 읽는 것과 같은 플랜), 피드백 탭에 "저희 확인 대기 중"으로 표시된 실제 작업 항목을 만들어 직원이 볼 수 있게 합니다. 다른 요청과 똑같이 처리됩니다. "추가하고 지금 빌드"는 프로젝트에 편집할 실제 파일이 이미 있을 때만 옆에 나타납니다. 첫 빌드가 끝났거나 이미 공개된 상태여야 합니다. 이 버튼도 같은 두 가지 작업을 한 뒤, 그 작업 항목을 'AI로 수정'과 같은 AI 편집기로 바로 실행합니다. 별도의 대기열은 없습니다. 프로젝트에 이미 있는 모듈을 추가하려고 하면 중복을 만들지 않고 "이미 이 프로젝트에 있습니다"라는 간단한 메시지와 함께 바로 거절됩니다.

전송되면 버튼 대신 실제로 일어난 일을 알려주는 확인 메시지가 나타납니다. 일반 요청이라면 "작업 항목으로 플랜에 추가되었습니다"라고 표시되고, 바로 빌드 요청이라면 실제 상태(시작됨, 또는 검토 우선 승인 때문에 보류 중인 것처럼 구체적인 이유)를 보여줍니다. 또한 "플랜 열기"와 "요청 보기" 링크 두 개가 함께 나타나므로 요청이 어디로 갔는지 헷갈리지 않습니다.

/projects/kit에서는 호스팅 프로젝트 대시보드의 다른 부분과 같은 실제 로그인을 사용하며 프로젝트가 필요 없습니다. 무언가를 추가하려고 할 때까지 모든 것이 똑같이 작동합니다. 프로젝트가 없을 때는 "플랜에 추가" 대신 "프로젝트에 추가" 버튼이 표시되며, 누르면 "어느 프로젝트에 추가할까요?" 선택창이 열립니다. 계정의 모든 프로젝트가 목록으로 나옵니다. 하나를 고르면 같은 모듈이 열린 상태로 그 프로젝트의 키트 탐색기로 바로 이동하므로 추가를 마무리할 수 있습니다. 아직 프로젝트가 없다면 선택창에서 분명하게 알려 주고, 막히지 않도록 "프로젝트 시작 →" 링크를 제공합니다.