Claude 코드와 포트폴리오 사이트 만든 이야기

AI와 포트폴리오 사이트 만든 이야기

#소개

시도하고자 했던 것과 그 이유

미술 작가인 아들이 해외 국제 공모전에 작품을 제출하려고 하는데, 심사위원들에게 보낼 포트폴리오 웹사이트가 필요했고 만들이후 작품을 추가할 때마다 또 비용이 발생하는 데 Claude Code를 써서 직접 만들어보기로 했습니다.

목표

• 해외 심사위원을 위한 한국어/영어 전환 기능

• 고급 갤러리처럼 작품이 주인공인 다크 럭셔리 디자인으로 제작

• 제가 직접 작품을 추가할 수 있는 간단한 운영 방법

실제 도메인(minjunjeong.com)까지 연결된 사이트 만듦

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

사용 도구

1단계 — PRD 문서를 Claude에게 주고 시작

PRD에는 이런 내용이 담았음

- 도메인: minjunjeong.com
- 기술: Next.js 14, Tailwind CSS, Notion API
- 색상: bg #0a0a0a, text #f5f0e8, accent #b8963e
- 폰트: Cormorant Garamond (영문), Noto Serif KR (한국어)
- 페이지: /, /works, /works/[slug], /about, /press, /contact
- 기능: 한/영 토글, NEW 뱃지 자동화, Notion CMS 연동

Claude는 PRD를 읽고 자동으로 파악해서 완성해줬습니다.

2단계 — 언어 버그 수정 및 구조 개선

처음 코드에는 페이지를 이동할 때마다 한국어/영어 선택이 초기화되는 버그가 있었고 캡처로 보여주니 Claude가 직접 원인을 찾아 수정했습니다.

// 수정 전: 각 페이지마다 LangProvider가 있어서 이동 시 초기화됨
export default function HomeClient({ works }) {
  return (
    <LangProvider>   ← 문제의 원인
      <HomeContent works={works} />
    </LangProvider>
  );
}

// 수정 후: root layout에서 한 번만 감싸고 localStorage에 저장
export function LangProvider({ children }) {
  const [lang, setLangState] = useState("kr");
  
  useEffect(() => {
    const saved = localStorage.getItem("lang");
    if (saved) setLangState(saved);  // 새로고침해도 유지
  }, []);
  
  const setLang = (l) => {
    setLangState(l);
    localStorage.setItem("lang", l);  // 저장
  };
}

3단계 — Vercel 배포 + 도메인 연결

Claude가 GitHub 저장소 생성부터 Vercel 배포, Namecheap DNS 설정까지 단계별로 안내해줬습니다. 제가 한 건 스크린샷을 보내주며 확인

Namecheap Advanced DNS에 추가한 레코드:

4단계 — 작품 추가 워크플로우

저는 코딩을 모르기 때문에, 앞으로 작품을 추가할 때마다 개발자가 필요한 구조는 안 된다고 했습니다. Claude와 함께 만든 해결책은 이것입니다.

작품 추가할 때 저는 이것만 합니다:

1. 작품 사진 첨부

2. 한국어 제목 + 설명 입력

Claude가 해주는 것:

• 영문 제목 + 영문 설명 작성 (작가 세계관에 맞게)

• Instagram 캡션 + 해시태그 생성

• 이미지 사이트에 추가

• GitHub push → Vercel 자동 배포

실제로 사용한 프롬프트 (《기억의 숲》 추가 시):

"작품 사진 첨부. 작품 제목: 《기억의 숲》. 작품 설명: 작가의 기억 속에 남아 있는 자연의 풍경과 감정의 흔적을 담아낸 작품이다. 민준 작가는 스위스에서 생활하던 시절... (한국어 설명 전문). 재료: 혼합재료, 아크릴. 크기: 45.5 × 53.0 cm. 연도: 2025. 홈페이지 메인 등록: 예"

한글 입력 시 Claude가 작성해준 영문 설명:

A forest that exists not in geography but in feeling —
the interior landscape where memory and emotion
have grown together over time.

During his years in Switzerland, Minjun found
particular peace walking quiet forest paths and
open meadows...

소

결과와 배운 점

결과

• ✅ minjunjeong.com 실제 도메인으로 서비스 런칭

• ✅ 한국어/영어 전환 — 언어 유지됨

• ✅ 작품 우선 7개 등록 (영문 설명 변환 )

• ✅ 수상 이력 추가 반영 (BIKAF 기관장상, 서울아트페어 등)

• ✅ 월 유지비 $1 (도메인)

배운 점

1. PRD 문서가 자세하면 Claude가 훨씬 잘 이해 "그냥 포트폴리오 사이트 만들어줘"보다 훨씬 좋은 결과가 나왔다

2. 스크린샷을 보여주면 Claude가 상황을 정확히 파악 Vercel 설정 화면, DNS 오류 화면 등을 그냥 스크린샷으로 찍어서 보여줬더니 "이 버튼 누르면 됩니다"처럼 정확하게 안내해줬습니다.

3. 코딩을 모르면 "왜"를 물어보는 게 중요합니다 "Private 저장소도 사이트는 공개로 접속 가능한가요?" 같은 질문을 했을 때 Claude가 개념을 쉽게 설명해줬다.

시행착오

• 도메인 "TAKEN" 오류: minjunjeong.com이 이미 제 소유인데 검색하니 TAKEN으로 나와서 당황 → 이미 구매한 도메인이라 그런 것 설명해줌

• 환경변수 입력 실수: Vercel에서 Key 칸에 "Key", Value 칸에 "Value"를 그대로 입력하는 실수 → Claude가 스크린샷 보고 바로 잡아줌

• npm 경로 문제: Windows에서 npm 명령어가 안 됨 → Claude가 Node.js 경로를 직접 찾아서 해결

앞으로의 계획

1. Notion 연결 — 직접 Notion에서 작품 관리하기

2. Make.com 연동 — Notion에 작품 등록하면 Instagram 자동 포스팅하고

   베니스 라구나 국제미술 공모전 진행하면 소개란에 웹사이트 안내