Claude Code로 일주일만에 AI Portfolio 완성 - 기획부터 배포까지!

🔗 시리즈 링크  

- 1편: Portfolio 초안 기획 (https://doyiya24.tistory.com/124)                                         
- 2편: 3D 모션그래픽 Blender & 전반적인 수정 (https://doyiya24.tistory.com/125)
- 3편: 완성

---

역시 AI 코딩이 너무나도 발전해서 포트폴리오 구현 하나는 정말 빠르네요...

기획이 제일 오래걸리는것같아요 (추가하고싶은게 너무 많아요..ㅎㅎ)

 

1. 기획 요약 

 

  - 컨셉: (Claude Code 사용) 풀스택 개발자 포트폴리오
  - 디자인: Figma로 UI 프로토타입 설계                                      
  - 컬러 시스템: Primary #61BA91 / Secondary #EFF1C5                        
  - 폰트: Orbitron (Google Fonts)                                           
                                  
    

 2. 3D 제작 과정 요약 

  - VARCO3D → TRIPO3D 시도 → 실패 (메쉬 합쳐짐, 텍스처 문제)
  - 나노바나나AI + Blender 직접 제작                                        
  - 최종: 3D 캐릭터 → 3D 랜딩페이지로 방향 전환  

 

 

 

 

 3. 개발 과정 (Claude Code 활용)

  - 기술 스택: React 19, Vite, TypeScript, Tailwind CSS 4, Zustand, Framer Motion                                                                    
  - 특이사항: React Router 없이 Zustand로 페이지 전환
  - 다크/라이트 + 3가지 컬러 테마 구현                                      
  - 반응형: 모바일 ~ 데스크탑   

포트폴리오는 URL 라우팅보다 부드러운 페이지 전환 애니메이션이 더 중요했기 때문에,
React Router 대신 Zustand + Framer Motion 조합을 선택했다

 

4. 결과물

0123

 

기술 스택 정리

언어	TypeScript
프레임워크	React 19
빌드 도구	Vite
스타일링	Tailwind CSS 4 (@tailwindcss/vite)
상태 관리	Zustand
애니메이션	Framer Motion
배포	Vercel
버전 관리	Git / GitHub

 

 

 5. 회고

  - 잘된 점 / 아쉬운 점

• Claude Code로 빠른 개발                                                   
    기획과 디자인을 미리 잡아두고 Claude Code로 개발에 들어갔더니 생각보다 훨씬 빠르게 완성됐다. 컴포넌트 구조, 상태 관리, 반응형 처리까지 방향만 잡아주면 알아서 구현해줘서 혼자 처음부터 작성하는 것보다 시간을 크게 단축할 수 있었다. 
• 다크/라이트 + 3가지 테마 모드                                             
    처음엔 단순히 다크모드만 생각했는데, 여기서 더 나아가 Green / Blue / Warm 3가지 컬러 테마까지 추가했다. 결과물이 훨씬 풍성해 보여서 만족스럽다.     

BUT,

•   3D 캐릭터를 넣지 못한 것
    가장 아쉬운 부분. VARCO3D → TRIPO3D → Blender 직접 제작까지 시도했지만 단기간에 완성도 있는 결과물을 만들기 어려웠다. 결국 3D 랜딩페이지로 방향을 틀었는데, 나중에 꼭 다시 도전하고 싶다. 
• URL 공유가 안 되는 구조                                                   
    React Router 없이 Zustand로 페이지 전환을 구현하다 보니 특정 페이지를 URL로 공유하거나 직접 접근할 수 없다. 포트폴리오 특성상 큰 문제는 아니지만 많은 사용자가 공유되는 웹사이트일 경우 개선 여지가 있다.

 

 - AI 도구 활용 후기 (Claude Code, 나노바나나, VARCO3D 등)

Claude Code	전체 개발	방향만 명확히 잡아주면 구현까지 빠르게 이어지는 점이 인상적이었다. 처음 사용하는 AI 코딩 도구였지만, 반복 작업과 초기 구조 설계 속도에서 확실한 생산성 향상을 체감했다.
나노바나나	3D 도면 / 이미지 생성	참고 이미지 생성 용도로 활용했다. 결과물의 완성도는 중간 수준이었지만, Blender 작업을 위한 베이스 자료로는 충분히 활용 가능했다.
VARCO3D	캐릭터 스케치 생성	프롬프트 기반 이미지 생성 단계까지는 만족스러웠으나, 3D 변환 과정에서 디테일 유지에 한계가 있었다.
TRIPO3D	3D 모델 변환	메쉬가 하나로 병합되거나 텍스처가 정상적으로 적용되지 않는 문제가 있었다. 아직 실무에 바로 적용하기에는 완성도가 부족하다고 느꼈다.

* ChatGPT와 Gemini는 사용할때마다 유연하게 사용함.

 

 전반적으로 AI 도구들이 아이디어를 빠르게 시각화하거나 반복 작업을 줄이는 데는 확실히 도움이 됐다. 다만 3D 결과물처럼 정밀도가 필요한 작업은 아직 사람 손이 많이 가야 한다는 걸 느꼈다.

 

 - 다음 목표 (3D 캐릭터 재도전 )  

•   Blender 3D 캐릭터 재도전
    이번엔 시간 부족으로 포기했지만 Blender는 계속 공부할 예정이다. 단축키와 모델링 기초부터 차근차근 익혀서 다음 포트폴리오 업데이트 때는 직접 만든 3D 캐릭터를 꼭 넣고 싶다. 추후에 3D 캐릭터가 들어간 AI 서비스 개인 프로젝트를 고려 중이다.

 

깃허브 : https://github.com/ggomiyyomi/Portfolio_withAI

GitHub - ggomiyyomi/Portfolio_withAI: HeeJeong's 2026 Portfolio

 

개발자라는 직업이 AI가 대체될 수는 없다고 생각한다.

AI는 상황에 맞게 코드를 작업할 뿐 입력값이 있어야 출력값을 나타낸다. 그 입력값을 넣어주는 것은 개발자이다.

개발자가 가진 지식의 응용력은 AI는 따라가지 못한다. 더 나은 방법은 개발자의 머리에서 항상 나온다. 

개발을 할 줄 아는 기획자는 더 훌륭한 AI 활용을 할 것이라 생각한다.

 

나는 AI 활용을 즐겨하고 잘 만들어내는 사람으로써 항상 더 나은 방법을 찾는다. 찾으면 찾을 수록 AI도 새로운 방법을 찾아낸다. 

AI조차 최고와 최선의 방법을 한번에 찾아내진 못한다. 사람이 유도하고 연구하고 개발하며 찾아낼 수 있는것이다.

이런식으로의 프롬프트를 작성하면 더 깊은 생각을 하며 단순한 개발이 아닌 밀도있는 개발이 가능하다.

나의 개인적인 생각과 내가 AI 활용시 이러한 관점으로 진행하고있다.