Claude Code로 저널 페이지(하루 일기) 만들고 로컬 서버에 띄워본 후기

소개

시도하고자 했던 것과VS Code + Claude Code로 레포 가져와 하루 일기 만들기 ✨

소개

22기 스터디 2주차에서 VS Code와 Claude Code를 활용해 레포를 가져오고, 하루 일기를 작성한 뒤 배포까지 이어지는 실습을 진행했습니다 😊

처음 시작할 때는 “AI 코딩 도구를 내가 실제로 따라갈 수 있을까?” 하는 마음이 있었는데, 스터디장님이 미리 개념 정리를 정말 이해하기 쉽게 강의 자료로 준비해주셔서 큰 도움이 됐습니다.

막연하게 따라가는 느낌이 아니라,

• 왜 이 과정을 하는지

• 지금 어떤 흐름으로 진행되는지

• 다음 단계에서 어떤 결과가 나오는지

이 전체 얼개를 먼저 알고 시작할 수 있어서 훨씬 편안하게 실습할 수 있었습니다 🙌

진행 방법

1. VS Code에서 Claude Code로 레포 가져오기

이번 실습은 VS Code와 Claude Code를 연결해 레포를 가져오는 것부터 시작했습니다.

사용 도구

• urlVisual Studio Codehttps://code.visualstudio.com

• urlClaude Codehttps://claude.ai/download

• 브라우저

레포를 연결한 뒤 Claude에게 하루 일기 형태의 저널 페이지를 만들도록 요청했습니다.

예시 프롬프트

오늘 있었던 일을 하루 일기 형태로 정리해줘.
웹에서 볼 수 있도록 링크 가능한 형태로 만들어줘.

2. 예상한 문제 발생 → 바로 Plan B 진행

실습 중간에 블로그 배포를 위한 Vercel 미설치 때문에 바로 배포가 되지 않는 상황이 있었습니다.

하지만 당황하지 않았던 이유는,
스터디장님이 미리 Plan B(로컬 서버로 올려보기)까지 준비해주셨기 때문입니다 😊

“안 되면 여기서 바로 다른 방법으로 이어가면 됩니다.”

이 흐름으로 안내해주셔서 실습 분위기가 끊기지 않았고,
개인적으로도 마음이 굉장히 편했습니다.

3. Claude에게 직접 문제 설명하기

중간에 안 되는 부분을 Claude에게 그대로 설명했습니다.

Vercel이 설치되지 않았어요.
대신 로컬 서버에서 확인할 수 있게 바꿔줄 수 있을까요?

그러자 Claude가 바로 로컬 서버 기준으로 방향을 바꿔서
저널 링크 파일을 만들어줬습니다.

그 순간 정말 신기했습니다 😄

“내가 개발을 잘 몰라도,
상황을 설명하면 Claude가 여기까지 도와줄 수 있구나?”

라는 생각이 들었습니다.

결과와 배운 점

브라우저에 로컬 서버 링크를 입력했을 때,
제가 작성한 하루 일기가 화면에 딱 나타났습니다.

그 순간이 가장 기억에 남았습니다 ✨

배운 점

• 개념을 먼저 이해하고 실습하면 훨씬 덜 막힌다

• AI 코딩 도구는 생각보다 자연스럽게 협업할 수 있다

• 막히는 부분을 그대로 질문하는 것도 중요한 기술이다

• 완벽히 알아야 시작할 수 있는 건 아니다

그리고 가장 크게 남은 건,

“일단 혼자 이것저것 응용해보고,
모르는 게 나오면 Claude에게 물어보면 되겠다.”

라는 자신감이었습니다 😊

아직 익숙하진 않지만,
이번 경험 덕분에 AI를 ‘어려운 기술’보다
함께 작업할 수 있는 도구처럼 느끼게 됐습니다.

앞으로는 이번에 배운 흐름을 바탕으로

• 저널 페이지 조금 더 꾸며보기

• 블로그 배포 다시 도전해보기

• Claude와 작은 자동화 실습 이어가기

이런 식으로 하나씩 응용해볼 예정입니다 🚀

도움 받은 글 / 참고

• 22기 스터디 2주차 강의 자료

• 스터디 실습 진행 가이드

• urlClaude Code 공식 안내https://docs.anthropic.com/en/docs/claude-code/overview

• urlVercelhttps://vercel.com 그 이유를 알려주세요.