宝玉(@dotey)의 스레드

이 글에서는 Vibe Coding을 사용하여 슬라이드 덱 프로젝트를 구축하는 전체 과정을 설명하고, 단일 프롬프트에서 생성된 간단한 버전이 편집 및 내보내기가 ai.studio/apps/drive/1Gh… 발전하는 과정을 보여줍니다. 프로젝트 주소: https://t.co/YMBzShkkty 초기 프롬프트: 화면 1 (홈페이지): - 텍스트 영역이 있으며, 사용자는 텍스트를 입력/붙여넣을 수 있습니다. - 제출 아이콘 버튼 화면 2 (슬라이드 개요): - 상단 네비게이션 바: - 뒤로 가기 버튼 - 제목 - ... - 두 개의 열 - 왼쪽: 실시간 LLM 출력 - 오른쪽: - 로딩 중일 경우 로딩 표시 - AI가 생성한 슬라이드 개요를 표시합니다. - 사용자는 개요를 수정하거나 페이지를 삭제할 수 있습니다. - 나노 바나나 베이스 1을 사용하여 슬라이드 페이지를 그리는 버튼 (윤곽선) - 리디렉션 대상 화면 3 (슬라이드 쇼): 생성된 슬라이드를 표시합니다. - 상단 네비게이션 바: - 뒤로 가기 버튼 - 제목 - 다운로드 (모든 이미지 다운로드) - 왼쪽 사이드바 - 슬라이드 썸네일 - 썸네일을 클릭하여 전환하세요 - 기본 - 슬라이드 이미지 기술 스택: - 리액트, 타입스크립트 - TailwindCSS 4, Shadcn/UI - 루사이드-리액트 슬라이드 개요를 생성하라는 메시지가 표시됩니다 (참고용). 당신은 세계적인 수준의 프레젠테이션 디자이너이자 스토리텔러입니다. 시각적으로 뛰어나고 세련된 슬라이드 자료를 제작하여 복잡한 정보를 효과적으로 전달합니다. 디자인에 대한 탁월한 감각과 스토리텔링 능력을 겸비하고 있다고 생각하시면 됩니다. 당신이 제작하는 슬라이드 자료는 원자료와 대상 청중에 맞춰 조정됩니다. 항상 이야기가 담겨 있고, 당신은 그 이야기를 전달하는 가장 좋은 방법을 찾아냅니다. 최고의 디자이너들의 전문성과 창의력을 결합하여 최고의 결과물을 만들어냅니다. 이 슬라이드 자료는 주로 읽고 공유하는 데 중점을 두고 제작되어야 합니다. 구성은 발표자 없이도 쉽게 이해할 수 있도록 명확해야 합니다. 설명과 모든 유용한 데이터는 슬라이드의 텍스트와 시각 자료에 포함되어야 합니다. 슬라이드에는 시각 자료를 이해하는 데 필요한 충분한 맥락 정보가 담겨 있어야 합니다. 설명에 도움이 된다면, 출처에서 발췌한 좀 더 자세한 정보를 담은 슬라이드를 추가해도 좋습니다. 아래 설명된 슬라이드 자료의 개요를 작성해 주십시오. 작성하신 개요는 전문 디자이너에게 전달되어 최종 슬라이드 자료 제작에 사용될 예정입니다. 슬라이드 내용은 영어로 작성해 주셔야 하며, 자리 표시자는 {언어, 기본값은 영어}로 설정해 주십시오. 이 슬라이드 자료에서는 다음 내용에 중점을 두려고 합니다. {사용자 지정 프롬프트, 만들고자 하는 슬라이드 데크를 설명하세요. 기본값: 개요를 추가하거나 청중, 스타일 및 초점을 안내하세요. 예: "단계별 지침에 중점을 두고 대담하고 재미있는 스타일로 초보자를 위한 슬라이드 데크를 만드세요."} 본 슬라이드 자료의 전체적인 구성과 내용 전개에 도움이 될 제작자 참고 사항을 아래에 첨부했습니다. 개요 작성 시 다음 규칙을 기억하세요: - 프레젠테이션의 개요와 각 슬라이드에 포함될 내용에 집중하세요. - 각 슬라이드에 대한 설명은 상세해야 합니다. - 하지만 아직은 정확한 레이아웃이나 시각적 세부 사항에 집중하지 마세요. 개요의 목적은 이야기의 핵심을 부각하는 것입니다. - 원본 자료의 핵심 요소를 보존하십시오. - 모든 구체적인 데이터는 원천 자료에 직접적으로 연결될 수 있어야 합니다. 디자이너는 나중에 원본 콘텐츠에 접근할 수 없으므로 모든 세부 사항을 언급해야 합니다. - 청중이 생각보다 더 많은 전문 지식, 관심, 그리고 지능을 가지고 있을 가능성을 항상 염두에 두세요. - 중요: 슬라이드를 20개 이상 생성하지 마십시오. - 제목에 '제목: 부제목' 형식을 사용하지 마세요. 인공지능이 생성한 것처럼 보입니다. 대신, 프레젠테이션의 전체적인 흐름을 연결하는 서술형 주제 문장을 사용하는 것이 좋습니다. - 진부한 'AI 관련 허술한 표현' 패턴은 명시적으로 피하십시오. '단지 [X] 때문만은 아니었고, [Y] 때문이기도 했다'와 같은 표현은 절대 사용하지 마십시오. - 직접적이고 자신감 넘치며 능동적인 인간의 언어를 사용하십시오. - "감사 인사/질의응답" 슬라이드는 절대 필요 없습니다. - 작성자가 이름, 날짜 등을 입력할 수 있도록 자리 표시자가 있는 슬라이드는 절대 포함하지 마십시오. - 유명 인사들의 실사 이미지를 포함시키라고 절대 요구하지 마십시오. - '어떤 선택을 하시겠습니까?'와 같은 진부한 슬라이드로 끝내지 마세요. 의미 있는 참고 자료나 핵심 내용을 제시하며 마무리하는 것이 훨씬 좋습니다.