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

예전에는 6만 원이 넘는 포커스 라이팅 툴을 사서 써야 했지만, 이제는 AI 에이전트와 함께 내 입맛에 맞는 노션 스타일 마크다운 글쓰기 도구를 직접 만들 수 있습니다. 이번 영상에서는 design.md라는 디자인 규격 문서를 활용해 일관된 디자인의 앱을 만들고, 버그를 수정할 때 에이전트에게 스스로 계획을 세우게 유도하는 프롬프팅 기법까지 알려드립니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : 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내보내기