[무료 강의] 132~141쪽, 웹 기술로 나만의 글쓰기 앱 만들기, Design.md, Plan 모드 활용

예전에는 6만 원이 넘는 포커스 라이팅 툴을 사서 써야 했지만, 이제는 AI 에이전트와 함께 내 입맛에 맞는 노션 스타일 마크다운 글쓰기 도구를 직접 만들 수 있습니다. 이번 영상에서는 design.md라는 디자인 규격 문서를 활용해 일관된 디자인의 앱을 만들고, 버그를 수정할 때 에이전트에게 스스로 계획을 세우게 유도하는 프롬프팅 기법까지 알려드립니다. [도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330 [도서 구매][교보] : https://product.kyobobook.co.kr/detail/S000219518985 오픈카톡방 : https://open.kakao.com/o/ggK7EAJh 타임라인 0:00 노션 스타일 마크다운 글쓰기 도구 소개 1:40 디자인 일관성 고민과 디자인 엠디의 등장 3:00 디자인 엠디(design.md)란 무엇인가 5:09 Claude 디자인 시스템 선택 및 활용법 5:39 Cursor에서 프로젝트 생성과 프롬프트 작성 7:00 에이전트의 빌드 계획 수립 과정 8:52 design.md 파일의 구조와 역할 9:49 빌드 완료 후 앱 실행 방법 11:17 완성된 마크다운 에디터 시연 12:52 나만의 앱으로 커스터마이징하기 15:22 PDF 내보내기 버그 발견과 수정 16:43 플랜 모드와 웹 서치를 활용한 디버깅 전략 19:57 에이전트에게 스스로 계획을 세우게 하는 팁 22:16 마무리 및 다음 시간 예고 오늘 다룬 내용 - 노션 스타일 마크다운 글쓰기 도구를 Cursor 컴포저로 만드는 과정 - design.md를 활용해 에이전트가 일관된 디자인을 구현하도록 유도하는 방법 - awesome-design-md 컬렉션에서 Claude 디자인 시스템을 가져와 적용하기 - PDF 내보내기 기능 추가와 인라인 코드 밀림·글자 짤림 버그 수정 - 에이전트 모드로 바로 시키지 않고 플랜 모드에서 계획을 세우게 유도하는 프롬프팅 기법 - 웹 서치로 해결 방법을 탐색하게 하고 스스로 명세를 만들게 하는 디버깅 전략 #바이브코딩 #커서 #Cursor #마크다운 #글쓰기도구 #노션스타일 #디자인엠디 #designmd #AI코딩 #프롬프트엔지니어링 #웹개발 #프론트엔드 #초보코딩 #바이브코딩입문 #AI에이전트 #클로드 #Claude #코딩교육 #앱만들기 #PDF내보내기