나만의 블로그 만들기

01 개발을 시작하지 전에는 먼저 계획을 세웁니다. Sequential Thinking을 활성화하여 생각하게 만들어보겠습니다. 새 폴더를 열고 준비합니다. 만약 Sequential Thinking이 제대로 동작하지 않으면 다시 요청하거나 커서 설정을 확인해보는 것도 좋습니다.

정적 페이지 빌드가 되는 프로그램을 만들어서 깃허브 페이지에 블로그를 호스팅하려고 해. 내가 원하는 필수 기능은 다음과 같아. 1. 정적 페이지로 빌드를 할 수 있어야 해. 빌드한 결과물을 깃허브 페이지에 호스팅할 거야. 2. 마크다운으로 글을 작성할 수 있어야 하고, 마크다운으로 작성한 파일을 멋지게 렌더링해야 해. 3. 메뉴는 Home, About, Blog가 있고, 파일은 월별로 관리할 수 있어야 해. 4. 마크다운 파일에 태그와 카테고리를 분류하면 이를 사이트에서 분류하여 볼 수 있어야 해. 5. 블로그가 아름답게 보이도록 디자인도 해줘. 이것을 sequential thinking으로 5단계만 고민해줘.

 

02 커서가 단계별로 보여준 계획을 살펴보면 요청한 사항을 잘 들어준 것을 알 수 있습니다. 이제 커서에게 바로 단계별로 개발을 진행해달라고 합니다. 이때 터미널에서 'Would you like to use App Router?'와 같은 질문이 나올 때까지 Enter를 계속 누르면서 진행합니다.

1단계부터 개발을 바로 진행해줄래?

 

03 어느 정도 기본적인 개발을 진행한 후, 커서는 자동으로 마크다운 폴더 구조 및 월별로 파일을 관리하는 방식을 제안할 것입니다. 커서가 그렇게 하고자 하면 그대로 개발을 이어서 진행합니다.

그렇게 해줘.

 

이 단계에서 posts 또는 content와 같은 이름의 폴더 하위에 연-월 기준으로 폴더가 생성되어 있고 그 안에 OOO.md라는 파일이 들어 있으면 성공입니다. 만약 연-월 기준으로 폴더가 생성되어 있지 않으면 '연-월 형식으로 폴더를 만들고 글을 정리해줘'라고 추가 프롬프팅을 하며 진행합니다. 또 블로그 디자인도 살펴보고 문제가 있다면 디자인 관련 추가 프롬프팅을 해서 문제를 해결하고 다음 단계를 진행합니다.

 

04 계속해서 다음 단계를 진행합니다. 커서는 앞서 계획한 기능을 구현하면서 잘 실행되는지 테스트나 추가 기능에 대한 질문을 하며 수행해나갈 것입니다. 만약 '블로그 테스트를 해보시겠어요?' 또는 '배포를 하겠습니다' 또는 '다 했는데 OOO을 더 할까요?'와 같은 메시지가 보인다면 개발이 거의 완료 단게에 접어들었다는 뜻입니다. 이때는 '그래' 또는 '그렇게 해줘'라고 지시하면서 진행을 계속합니다. 커서의 반응을 보면서 구체적인 실행 지시를 요구하면 해당 내용을 읽어보고 그대로 수행하라고 하면 됩니다. 다만 커서가 배포에 대한 이야기를 할 때 잠시 멈추세요. 그 시점은 블로그 완성 이후의 중요한 전환점이기 때문에, 다음 단계로 넘어가지 전에 확인이 필요합니다.

 

05 이 단계에서 블로그가 제대로 작동하는지 확인해야 합니다. 커서에게 간단한 블로그 글을 2025년 7월 16일 날짜로 생성해달라고 요청합니다. OOO.md 파일이 무엇인지, 어떻게 작성하는지는 중요하지 않습니다. 

2025년 7월 16일 날짜로 간단한 블로그 글을 하나 생성해줘. 글 내용도 입력해줘.

 

06 글이 추가된 것을 확인했으면 이제 커서에게 서버를 실행해서 확인해보고 싶다고 요청합니다. 커서는 서버를 실행한 뒤, 실제 블로그 화면이 어떻게 나타나는지 보여줄 것입니다. 이때 화면이 잘 열리고 블로그 기능이 잘 동작하는지 확인합니다.

서버를 실행해서 확인해보고 싶어.

 

07 블로그가 동작하는 것을 확인했다면 이제 이 블로그의 동작 방식을 이해하면서 마크다운 문서를 직접 작성해볼 차례입니다. 이 블로그는 content 폴너 내에 2025-07과 같은 연-월 폴더를 만들어 월별로 파일을 관리합니다. 여기에 OOO.md라는 파일을 새로 만들면, 커서가 블로그 사이트에 이 파일을 웹사이트 형태로 빌드해서 보여주는 거죠.

 

08 정말 그런지 직접 확인해봅니다. 2025-07 폴더 아래에 today-think.md 파일을 하나 만듭니다.

 

09 파일을 만들었다면 빈 화면에서 마우스 오른쪽 버튼을 한 다음 [Add Symbol to New Chat]을 누릅니다. 그러먼 커서 채팅방에 today-think.md가 @Active Tab이라는 이름으로 @콘텍스트에 추가됩니다. 이제 커서가 이 문서를 인식하고 그 내용을 기반으로 작업을 도와줄 겁니다.

 

10 이 상태에서 커서에게 오늘의 일기 내용을 하나 작성해달라고 요청합니다. 이떄 마크다운 프론트매터를 추가해달라고 합니다. 마크다운 프런트매터는 글의 제목, 날짜, 카테고리, 태그와 같은 정보를 담는 역할을 합니다. 블로그에 자동읋 뷴류해주는 프런트매터의 기능을 활용하기 위해 추가하겠습니다.

 

이 상태에서 마음껏 글을 작성하면 됩니다. 참고로 마크다운 기초 문법을 모른다면 챗GPT 등 도구를 활용해서 참고한 다음 형식에 맞게 글을 씁니다.

 

11 만약 글 수정이 귀찮다면 해당 줄을 드래그하고 마우스 오른쪽 클릭을 한 다음 [Quick Edit]을 선택하고 프롬프팅하여 문장을 수정해도 됩니다.

 

12 글을 다 작성하고 나서 커서에 새 글을 만들었으니 새로 빌드해달라고 합니다. 그런 다음 사이트를 확인하면 새롭게 작성한 블로그 글 내용이 적용되어 있을 것입니다.

새 글을 추가했어. 빌드하고 서버에서 볼 수 있게 해줘.

 

13 이제 이 상태에서 블로그의 스타일을 다듬습니다. 블로그 특유의 깔끔한 스타일을 선호하는 사람도 있겠지만 나만의 블로그 만들기라면 아이콘 하나 정도는 추가하여 개성을 살리는 것도 좋을 것 같습니다. 이번에는 프로젝트 폴더 안에 이미지를 하나 넣고, 커서에 이미지를 하나 넣고, 커서에 이미지를 @콘텍스트로 추가하면서 아이콘으로 넣어 달라고 합니다.

 

블로그 아이콘 이미지 파일: bit.ly/3UvTRxf

@blogfavicon.png 은 블로그의 파비콘으로 사용햐줘,

 

커서가 아이콘을 브라우저 탭의 파비콘으로 등록해주었네요.

 

14 동일한 아이콘이 블로그 메인 페이지에도 보인다면 같은 블로드라는 느낌을 주어 좋겠죠? 커서에게 메인 페이지에도 아이콘을 추가하라고 한 번 더 수정을 요청합니다.

@blogicon.png 는 블로그의 대표 아이콘으로 적절히 배치해서 만들어줘.

 

화면을 다시 실행해보면 블로그 메인 페이지 가운데에 대표 아이콘이 자리잡은 것을 확인할 수 있습니다.

 

대표 아이콘을 추가해줌으로써 조금 더 완성도 있는 블로그로 바뀌었습니다. 본인이 원하는 스타일이 나올 때까지 다양한 수

정을 합니다.

 

15 이제 남은 것은 배포입니다. 배포를 위해 이전에 만들었던 깃허브 저장소를 초기화합니다.  깃허브에서 오른쪽 위 프로필 아이콘의 [Your respositories]를 눌러 Repositories 목록에서 깃허브 저장소를 찾습니다.

 

16 기존의 내용이 들어 있는 저장소를 지우고 새로운 내용을 업데이트하기 위해 만들어야 하므로 저장소에 들어간 다음 [Settings]을 누르고 스크롤바를 내려 [Delete thie repository]를 누른 다음 삭제하기 위한 과정을 실행합니다. 그리고 같은 이름으로 다시 저장소를 만들기 위해 [New]를 누릅니다.

 

17 저장소를 새로 만들었다면 이제 주소를 복사합니다. 그런 다음 커서에게 다음과 같이 부탁합니다.

이제 정적 페이지로 발드한 블로그를 @https://github.com/Jangchaeyun/chaeyun-github.io.git에 깃허브 페이지로 배포해줘.

 

18 배포까지 완료되었습니다. 실습에서 여러분이 설정한 chaeyun.github.io와 같이 커서가 안내한 페이지에 접속해보면 여러분의 블로그가 보일 것입니다.

 

19 만약 새로운 글을 작성해서 블로그 사이트에 추가로 적용하고 싶다면 다음과 같이 진행하면 됩니다.

1. 커서에게 content 폴더 하위의 2025-07 폴더에 md 파일 생성 후 마크다운 글 작성

2. 커서에게 빌드해달라고 하기

3. 커서에게 빌드한 정적 페이지를 깃허브 페이지에 배포해달라고 하기

 

20 배포 후 다시 접속하면 블로그에 글이 추가되어 있을 것입니다.