3일 동안 claude Code를 활용해서 나만의 포트폴리오 사이트를 만들었다.
만들게 된 계기와 아이디에이션
퇴사 후 수많은 채용공고들을 보면서 내가 한 일을 이쁘게 보여주면 좋을 것 같다.
그리고 한 번 만들어두면 두고두고 쓸수도 있지 않을까?
문제는 지금까지 한번도 포트폴리오를 만들어본 적이 없었다. 그래서 다른 사람들이 어떻게 만들었는지 찾아봤다.
https://www.webportfolios.dev/
Build, Share, and Explore Developer Portfolios
Discover real developer portfolios, showcase your work, and get inspired. webportfolios.dev helps you create a standout web developer portfolio.
www.webportfolios.dev
개발자들이 자신들의 포트폴리오를 올리는 사이트를 찾았다.
주로 FE 개발자들이 많았는데, 확실히 신기한게 많았다.
하지만, 보면볼수록 딱맞게 참고할만 것은 없었다. 그래서 내가 필요한 내용부터 정리했다.
- 프로젝트 경험
- 업무 경험
- 내 연락처
- 내 생각
이정도면 되지 않을까 싶었다.
만든 과정
처음에는 회사에서 했던 것처럼 문서들을 다 만들고 개발 과정들을 다 AI가 기록할 수 있게 프로젝트 구조를 짜려고 했다.
그런데 작업을 진행하면 진행할수록 내가 뭘했는지 까먹고 AI도 자신이 뭘했는지 까먹었다. 이문제를 해결하기 위해서 AI한테 내용을 기억하고 쓰라고 명령했다. 당연히 말을 듣지 않았다. 일단 만들기부터하자고 생각해서 최대한 빨리 사용가능한 형태로 만들었다.
클로드 코드를 켜고 이형태를 만들기까지 한 8시간 정도 걸렸던 것 같다. 랜딩 페이지를 구성하는 것보다 어드민 페이지를 만드는 데에 시간이 더 많이 들었다.
처음에 랜딩 페이지를 하드코딩 형식으로 콘텐츠를 보여줬었는데 내용을 바꾸려고 할 때마다 재배포 해야했다. 그래서 배포하지 않아도 콘텐츠만 바꿀 수 있게끔 어드민 페이지를 만들었다.
그리고 이때부터 헬게이트가 열리기 시작했다.
문제1: 프리티어는 돈이 무료지 시간이 무료는 아니다 -> 그럼 발로 뛰자
나는 무료 배포와 함께 내가 쓴 콘텐츠를 저장, 표시를 할 수 있게 Vercel과 Vercel Store를 사용했다. 프리티이어기도 했고 AWS한테 지금은 돈내고 싶지 않았기 때문이다.
저기 저 Blob라는 친구는 Binary Large Object(이진 대형 객체)의 약자인데 쉽게 말하면 이미지 파일, 영상 파일 등과 같은 애들이다. 즉, 내가 텍스트를 저장! 하고 누르면 저 액션이 카운트가 된다. 난 2000횟수면 개발은 물론 운영에도 충분하다고 생각했는데 충분하지가 않았다.
그리고 개발 진행 중에 막히게 되었다.
그렇다고 프로젝트를 포기할 수는 없으니 다른 방법을 찾아봤다.
그리고 깃헙 리포에서도 읽기/쓰기 가능하다는 것을 알게 되었다.
콘텐츠라는 브랜치를 파서 거기에 업로드를 하면 AI가 짜준 코드에 의해 읽기/쓰기가 된다고 클로드가 알려줬다.
결국 문제를 해결했다! 서비스가 깃허브를 보게하고 어드민 페이지에서 콘텐츠 숨김, 편집을 쓰게 되면 한 5초에서 10초 뒤에 포트폴리오 사이트가 업데이트 된다.
지연이 오래 걸리는게 좀 아쉽긴 한데 우선 AI를 활용한 제작이라는 프로젝트라는 것, 사용자는 읽기만 할 뿐, 쓰기 기능은 나만 쓰는 거라 가만히 두기로 했다.
문제2: 눈이 심심했다. -> 효과를 좀 넣자.
처음 화면처럼 내 포트폴리오 사이트는 너무 심심했다. 그래서 보다가 지루해할 것 같았다.
재밌는게 뭐가 있을까 생각하다가 최근에 본 헤일메리가 생각났다.
헤일 메리 -> 우주 -> 테크.
이런 관계가 있으면 좋지 않을까?
그래서 우주를 한 스쿱 넣었다.
지구를 띄우고 화면을 줄이면 이동하는 방향을 생각했다.
나쁘지는 않았는데 글씨를 가렸다.
그래서 뺐다.
그래도 별을 좀 넣으니까 우주스런 느낌이 났다.
우주 배경을 더 잘 느끼기 위해 스크롤 다운하면 달이 보이게 했다.
프론트 개선 작업을 하는데 한 6시간 정도 걸렸던 같다. 별 효과, 달의 크기 조정, 마음에 안 들면 빼기 등 시도와 확인에 꽤 많은 시간을 썼다. 하면서 프론트가 얼마나 어려운지 알게 되었다. 역시 구현은 뭐든지 품이 들어가는 것 같다.
배운 점: AI로 개발하기
나는 2023년 하반기에 개발에 입문하고 2024년에 개발자 부트캠프., 2025년에는 PM으로 일했다. 내가 시작했을 당시에는 AI 서비스가 불타오르기 시작한 때이고 2026년 현재는 이제 업무에서 뗄 수 없는 도구가 되어버렸다. 문서 작업은 물론 개발도 AI가 주는 이점이 비용대비 엄청나다.
AI가 나오면서 개발도 많이 편해졌다. 문법 오류는 고려하지 않아도 된다. AI가 나보다 더 잘한다. Iteration(반복)에 의한 제품 개발도 훨씬 수월했다. 그리고 아이디어도 중간중간 피드백을 할 수 있어서 좋았다.
다만 조심해야할 것은 있었다. 데드라인 정하기다. AI로 계속 개발하다보면 시간 가는 줄 모르고 하게 되고 디테일을 계속 붙잡게 되면서 전체 틀보다 세부사항에 집착을 하기도 했다.
기획과 설계도 더 중요해질 것 같았다. 하지만 그것을 하기 위해서는 만들어본 경험이 무엇보다도 중요하다. 기획과 설계는 경험에서 나오는건데 이건 해보기 전까지는 모른다. 말로 표현하기 어렵지만 그렇다. 하지만 실천하려면 방법이 있는데 문제를 정의하고 푸는 것이다. 결국 문제정의가 핵심인 것 같다.
다음 순서: Agent 시스템 만들어보기
이번에는 Agent 시스템을 만들어볼 생각이다. 내가 가는 헬스장의 트레이너가 쇼핑몰을 운영하고 싶다는데 어떻게 세울 지 고민이라고 한다. 트레이너가 비 개발자이다보니 자연어로 상담하면서 쇼핑몰을 운영할 수 있는 시스템을 만들어보면 좋지 않을까? 이건 다음 프로젝트로 정하기로 했다.
