바로바로 바이브 코딩 with 커서 AI · 04장 바이브 코딩의 핵심, 웹 기술 · 04.2 웹 기술로 다양한 웹사이트 만들어보기
바로 16 노션 스타일의 마크다운 글쓰기 도구 만들기
이번에는 더 의미 있는 프로그램을 만들겠습니다. 마크다운 문서를 작성하고 커서에서 프리뷰로 보는 것도 괜찮지만 더 멋지게 볼 수 있는 방법이 있으면 어떨까요? 예를 들어 노션 스타일의 마크다운 글쓰기 도구가 있다면 어떨까요? 실제로 마크다운 문서를 멋지게 렌더링하고 실시간 편집 상태를 볼 수 있게 하는 글 작성을 위한 유료 프로그램이 엄청나게 많습니다. 다음은 대표적인 글쓰기 프로그램인 iA Writer입니다. 프로그램 하나에 66,000원이네요. 이렇게 비싼 프로그램이면 기능이 많을 겁 니다.
기능을 살펴보니 마크다운을 지원해서 예쁘게 볼 수 있고 글을 정리해서 왼쪽 탭에 보여주는 기능까지 있습니다. 우리 역시 이러한 기능을 충분히 만들 수 있습니다.
그럼 지금부터 저와 함께 마크다운 글쓰기 도구를 만들어봅시다.
먼저 커서와 프로그램 설계에 대한 고민부터 시작합시다. 우리가 원하는 기능을 최대한 구체적으로 표현해서 대화를 시작하면 됩니다.
프롬프트
마크다운으로 문서를 작성하고 실시간으로 멋지게 프리뷰하는 웹 프로그램을 만들고 싶어. 프리뷰 스타일은 notion.so와 같은 형태면 좋겠어. 프리뷰로 내용을 확인할 때는 스크롤바를 내릴 때 정확하게 내가 쓰고 있는 위치에 맞도록 함께 스크롤바가 움직여야 하고, 글을 저장하면 왼쪽 파일 창에 글이 저장된 것이 보이는 등의 기능이 동작하면 좋겠어. 나 혼자 쓸 프로그램이라서 배포를 하거나 호스팅을 할 필요는 없어. 계획부터 함께 세워보자.
그러면 커서가 Questions로 질문을 할 텐데 ‘React’라는 키워드가 있는 항목과 ‘실제 파일시스템’이라는 키워드가 있는 항목을 선택해서 진행하면 됩니다. 만약 이 질문을 하지 않는다면 처음부터 ‘리액트 기반으로 만들고 싶어’라는 말과 ‘실제 내 컴퓨터의 파일시스템에 마크다운 파일을 저장하고 싶어’라고 이야기하면 됩니다.
수정하고 싶은 것이 있다면 [Plan] 모드에서 수정하기 바랍니다. 확신이 생겼다면 [Build]를 눌러 진행하세요.
프로그램 작성이 완료되면 커서가 ‘서버가 실행되었다’라고 하거나 ‘서버를 실행하라’고 할 겁니다.
AI 답변
구현된 기능
파일 탐색기 - 왼쪽 사이드바에 저장된 .md 파일 목록 표시, 파일 생성/삭제 지원
마크다운 에디터 - 모노스페이스 폰트로 마크다운 원본 편집
실시간 프리뷰 - Notion 스타일로 렌더링 (제목, 볼드, 리스트, 코드블록, 테이블, 인용문 등)
동기화 스크롤 - 에디터/프리뷰 스크롤 비율 동기화
파일 저장 - Ctrl/Cmd+S 단축키 또는 저장 버튼 지원
백엔드 API - 파일 CRUD 작업을 위한 REST API 실행 방법
1. 백엔드 서버 시작 (이미 실행 중)
cd server && node index.js
# http://localhost:3001프롬프트
2. 프런트엔드 개발 서버 (이미 실행 중)
cd client && npm run dev
# http://localhost:5173프롬프트
브라우저에서 http://localhost:5173으로 접속하면 됩니다!
서버의 주소를 localhost:5173, localhost:3000과 같은 숫자로 알려줄 텐데 아직 여러분은 서버에 대한 지식이 없으므로 이마저도 물어보면 알아서 실행해줄 겁니다.
프롬프트
서버가 잘 실행되고 있어? 어떻게 해야 접속할 수 있어?
완성된 앱을 사용하려면 localhost:5173으로 웹브라우저에 접속하라고 합니다. 접속해보세요. 어떤 화면이 보이나요?
화면을 보면 마크다운 파일이 왼쪽 탭에 보이고, 탭의 파일(미리 작성된 파일이 있을 수도 있습니다)을 누르면 왼쪽 화면에서 수정한 내용이 오른쪽에 바로 렌더링되어 보입니다. 스크롤바를 내리면 스크롤바를 따라다니면서 수정한 내용을 보여주기도 하네요. 아주 멋진 마크다운 에디터를 만들었습니다.
마크다운 문서를 만들어 방금 만든 에디터에 붙여넣으면 커서의 프리뷰보다 훨씬 멋진 에디터를 만들었음을 알 수 있습니다. 심지어 여러분이 만든 에디터 프로그램은 커서에서 조작할 수 있는 상태입니다. 그래서 커서에게 글을 생성해서 바로 앱에 반영해달라고 해도 됩니다. 저는 커서에게 마이크로소프트의 역사를 간단하게 적어달라고 했습니다.
프롬프트
마이크로소프트의 역사를 적어서 마크다운 문서를 만들어줄래?
AI 답변
...생략... 마이크로소프트의 역사 문서가 생성되었습니다! 왼쪽 파일 목록에 새 문서가 추가되었고, Notion 스타일로 깔끔하게 프리뷰되고 있습니다.
미리 보기 결과물을 더 멋진 스타일로 변경하겠습니다. 디자인을 변경할 때는 디자인 시스템을 참고할 만한 사이트 주소를 알려주면 더 잘해줍니다. 만약 사이트 주소를 조사하기 귀찮다면 [Plan] 모드를 사용하면 됩니다. 스스로 광범위한 조사를 할 수 있도록 다음과 같이 유도하세요.
프롬프트
마크다운 에디터의 미리 보기의 디자인 시스템을 현대적으로 개선하고 싶어, 인터넷을 뒤져서 가장 멋진 블로그 스타일을 찾아보고 어떻게 개선할지 방법을 생각해보자.
AI 답변
현대적인 블로그 디자인 트렌드를 검색하겠습니다.
프롬프트
...생략...
그러면 커서가 디자인 트렌드를 스스로 조사해서 미리 보기를 개선할 방법을 찾아옵니다. 이 과정은 매우 큰 의미가 있습니다. 단순히 사람이 조사할 때는 조사 후에 사이트의 특징이 어떤지, 어떻게 우리 프로그램에 적용할지 고민해야 합니다. 하지만 커서는 여러분의 프로젝트 상태를 알고 있고, 조사한 결과 중 어떤 것이 유효한지도 알고 있습니다. 그래서 검색 시간과 적용 시간이 획기적으로 줄어듭니다.
커서가 세워준 계획을 확인하고 크게 문제가 없다면 [Build]를 누르고 개발을 유도하면 됩니다. 만약 계획이 화면에 바로 보이지 않으면 [View Plan]을 눌러 확인하세요.
대대적인 수정을 하느라 수정 작업에만 5분이 걸렸습니다. 수정 후 다시 브라우저에 접속하면 다음과 같이 수정한 결과물이 보입니다. 전반적으로 디자인을 크게 수정하진 않았지만 아주 디테일한 항목이 변경되었습니다. 오른쪽 위의 [다크 - 라이트] 모드 변경 버튼이 생겼네요. 화면을 단순히 밝고 어둡게 바꾸는 작업이라 생각하기 쉽지만 인테리어로 생각하면 할 일이 많습니다. 아마도 이 작업이 길었던 것 같습니다.
이제 남은 것은 여러분의 창의력을 발휘하여 추가로 수정해보는 겁니다! 다음 도전 항목을 추천합니다. 하나씩 수정하면서 프로그램을 발전시켜 보기 바랍니다.
- 에디터 자체의 디자인 시스템을 변경하기
- 파일 탭에서 파일 이름 수정, 삭제 기능 추가하기
- 마크다운 편집기 또는 프리뷰에 접었다 폈다 하는 기능 추가하기
- 완성한 프리뷰를 PDF로 내보내는 기능 추가하기
바로 핵심 요약
- 말로 설명하기보다 캡처한 이미지를 컨텍스트로 제공하면 커서가 문제 상황을 훨씬 더 정확하게 인식하고 수정해줍니다.
- 프런트엔드와 백엔드가 모두 필요한 복잡한 프로그램도 [Plan] 모드를 통해 만들고 싶은 기능을 설명하면, 커서가 적합한 기술을 제안하고 구축해줍니다.
- 디자인이 밋밋하다고 느껴질 때 커서에게 ‘최신 트렌드를 찾아서 개선해줘’라고 요청하면, 커서가 스스로 웹 검색을 통해 트렌드를 조사하고 프로그램에 세련된 디자인을 적용해줍니다.