“와, 코딩을 하나도 몰라도 웹사이트를 만들 수 있다고?”
저도 처음엔 믿기지 않았어요. 하지만 이제 챗GPT에 이어 Claude Code가 등장하면서, 코딩 지식이 전혀 없는 사람도 나만의 멋진 웹사이트 포트폴리오를 만드는 시대가 열린 거죠! 오늘은 코딩 초보였던 제가 Notion 기반 포트폴리오를 Claude Code를 활용해 어떻게 웹사이트로 옮겼는지, 그 따끈따끈한 경험을 생생하게 들려드릴게요.
📂 귀차니즘 만렙을 위한 Notion → 웹사이트 전환 작전 개시!
솔직히, 개발 언어의 ‘개’자도 모르고, 로컬 호스트가 뭔지도 모르고, 깃허브를 그저 ‘저장소’ 정도로만 알고 있던 저였어요. 그런 제가 말이죠, Claude Code 덕분에 제 경험과 작업물을 담은 나만의 포트폴리오 웹사이트를 뚝딱 만들어냈답니다!
처음에는 제 포트폴리오를 두 가지 형태로 관리하고 있었어요. 하나는 보기 좋게 정리한 PDF 파일, 다른 하나는 제가 공들여 만든 Notion 포트폴리오였죠.
Notion은 코딩과는 거리가 멀어도 제가 유일하게 편하게 다룰 수 있는 플랫폼이었어요. (사실 윅스도 써봤지만, 심각한 버퍼링 때문에 포기했답니다 😅) 그런데 이제 이 Notion 포트폴리오의 내용을 Claude Code로 만든 웹사이트로 옮겨야 하는 숙제가 주어진 거죠.
“아니, 이 많은 데이터를 도대체 어떻게 옮기지?”
당황스러움도 잠시, 머릿속에는 바로 이 생각뿐이었어요.
“Claude야, 제발 이 웹사이트 보고 정보 좀 옮겨줘!”
네, 정말 이렇게 외치며 시작했어요. 너무 귀찮았던 나머지, 일단 Claude에게 제 Notion 포트폴리오 링크를 덜컥 보내줬죠. 그리고 ‘이 틀이라도 좀 따라 해줘!’ 하는 마음으로요. 신기하게도 Claude는 텍스트 정보를 꽤 잘 읽어냈고, 첫 페이지의 기본적인 틀을 만들어주더라고요.
“진짜 이걸로 될까?” 하고 의심하는 분들도 계실 거예요. 솔직히 말씀드리면, 이 방식은 정말 기초 토대만 가져오는 것에 가깝습니다. 이제부터가 진짜 중요한 ‘살 붙이기’ 단계인 거죠!
💡 귀차니즘 강한 분들을 위한 프롬프트 꿀팁:
> “링크 줄게, 이것 보고 그대로 만들어줘. 내용도 그대로.”
라고 간결하게 요청하는 것만으로도 꽤 괜찮은 시작을 할 수 있답니다.
🛠️ 섬세한 손길로 완성하는 나만의 웹사이트
노션에 이미 콘텐츠가 잘 정리되어 있었기 망정이지, 만약 그렇지 않았다면 엄두도 못 냈을 거예요. 그래도 덕분에 대략 4시간 정도 투자해서 기본 틀을 완성할 수 있었어요!
1️⃣ 노션 카드별 항목, 똑똑하게 가져오기
이전에는 Notion 안에 있는 개별 페이지들을 일일이 열어야만 내용을 확인할 수 있었어요. 전체 링크를 넘겨줘도 Claude가 작업을 못 하더라고요. 즉, 하나하나 열어봐야 했다는 뜻이죠. 😱
다행히 Notion을 마크다운(Markdown) 형식으로 내보낼 수 있다는 사실을 알게 되었어요. 바이브 코딩(Vibe Coding)에서는 마크다운 문서가 토큰 소모를 줄여주기 때문에 아주 중요한 개념인데요. 그래서 Notion에 있던 모든 콘텐츠를 마크다운 문서로 내보내기 했답니다!
이후에는 마크다운 문서를 폴더에 정리해서 Claude에게 안내했어요. 그랬더니 놀랍게도, 제가 원하는 형태로 뚝딱 만들어주더라고요. 물론, 디자인 부분은 레퍼런스와 Claude의 코드를 조합해서 섬세하게 다듬는 과정이 필요했답니다.
2️⃣ PDF 자료, 센스 있게 쏙쏙 넣기
예전에는 제 작업물들을 PDF로 꼼꼼하게 정리해 두었었어요. “나만 보기 아까운 학부 UX 프로젝트” 같은 내용도 있었지만, 지금은 추억 속으로… 😅 석사 과정에서는 학위 논문을 제외한 나머지 논문들은 중요도가 떨어진다고 판단했어요.
그래서 학위 논문만 PDF로 첨부하고, 나머지는 관련 링크로 대체했답니다. 여기서 제 UX 직무 역량을 발휘해서 사용성 부분에 디테일을 더하고, 실무 이력서와 경력 기술서까지 추가했어요. 🤓
3️⃣ 디자인, 내 감각을 더하다
이제 거의 다 왔어요! Claude가 만들어준 기본적인 틀에 제 취향과 감각을 더해 디자인을 다듬는 단계만 남은 거죠.
핵심은 ‘자연스러움’과 ‘깊이’를 동시에 잡는 것이었어요.
* 핵심 키워드: AI 웹사이트 제작, Notion 포트폴리오, Claude Code, 바이브 코딩, 웹사이트 만들기, 포트폴리오 전환
* 유사 키워드: 코딩 없이 웹사이트, AI 포트폴리오, 노션에서 웹사이트, AI 개발 도구, 나만의 웹사이트
Claude Code를 활용하면 코딩 지식이 없어도 얼마든지 멋진 웹사이트를 만들 수 있다는 것을 직접 경험하게 되니, 앞으로 AI 기술이 가져올 변화가 더욱 기대됩니다. 여러분도 망설이지 말고 한번 도전해보세요! 코딩의 세계, 생각보다 훨씬 더 가깝게 다가와 있을지도 모릅니다. 😊