[Claude Design] 피그마 + 클로드로 나만의 포트폴리오 사이트 만들기

코딩 없이 이런 게 가능하다고?

솔직히 처음에는 반신반의했는데 직접 써보고 나서 생각이 바뀌었다.

 

피그마에서 원하는 라이브러리를 다운받아도 되지만, 

Claude Design을 활용해서  타로 카드컨셉으로

타로카드를 클릭하면 개발 경력이 소개되는 포트폴리오 샘플을 만들어봤는데,

생각보다 완성도가 꽤 됨.

전체 제작 과정을 정리해봄.

---

1. Figma 템플릿이랑 에셋 준비

Figma Community에서 마음에 드는 웹사이트 템플릿을 골라 .fig 파일로 로컬에 저장해둠.

그리고 타로카드 컨셉에 맞는 앞/뒷면 이미지도 미리 준비해놓는 게 좋음.

나중에 "이런 이미지로 해줘" 하고 넣어야 하니까 이 단계에서 리소스 정리를 먼저 해두면 편함.

---

2. Claude Design 세팅 및 파일 업로드

Claude의 Design 메뉴에서 Prototype 프로젝트 생성.

여기에 아까 저장해둔 .fig 템플릿 파일, 이력서 텍스트(기술 스택이나 경력 내용), 준비한 타로카드 이미지를 모두 올려주면 됨.

한 번에 다 올려두고 시작하는 게 흐름이 끊기지 않아서 좋음.

 

 

---

3. 프롬프트 입력 및 초안 생성

구현하고 싶은 동작을 최대한 명확하게 적어주면 됨.

내가 넣은 프롬프트 예시:

"이곳은 나라는 사람을 브랜딩하고 특색있게 소개하는 공간이 될 예정입니다. 1. 전면에 들어왔을 때 타로카드처럼 카드가 펼쳐져있습니다. 2.사용자에게 카드를 클릭하라고 지시합니다. 3. 카드의 내용은 '이력서' , '내 강점' , ' 내 소개', ' 내 일상' 등의 내용이 나올 수 있습니다. 4. 해당 카드를 뽑으면 관련 페이지로 넘어갑니다. 랜딩 페이지에서는 이전으로 돌아가 새로운 카드를 뽑을 수 있는 '다시뽑기' 가 나오게 해주세요. 5. 전반적으로 신비롭고 차분한 이미지로 해주세요.
 카드를 클릭하면 카드가 뒤집히면서 나의 개발 경력이 나타나는 인터랙션 효과를 추가해. 제작 전 꼼꼼한 검토를 위해 확인이 필요한 사항을 먼저 질문해 줘.
"

마지막에 "먼저 질문해줘"를 붙여두면 클로드가 무드랑 테마 제안을 먼저 하는데, 이 단계에서 방향을 잡아주면 초안 품질이 올라감.

---

4. 디테일 수정 (Tweak / Edit)

초안이 나오면 세부 조정은 두 가지 방법으로 함.

Tweak : 우측 상단 메뉴에서 전체 테마나 강조 색상을 한 번에 변경. 전체적인 분위기 조정할 때 씀.

Comment & Edit : 카드 뒤집히는 애니메이션 속도가 어색하거나, 텍스트 배치가 이상한 부분은 직접 클릭해서 수정 요청. 영역을 지정해서 "여기 이 부분만 바꿔줘" 식으로 요청하면 됨.

---

5. Netlify로 무료 배포

완성됐으면 배포 단계.

https://www.netlify.com/

• 우측 상단 Share 메뉴에서 ZIP으로 다운로드
• 압축 풀고, 메인 페이지 파일명을 index.html로 변경 후 다시 압축
• Netlify 접속해서 해당 ZIP 파일 드래그 앤 드롭

끝. 나만의 URL 생성됨.

---

 

타로카드 컨셉의 사이트 생성

결과물 짜잔 -

선택한 카드가 강조 확대 되고, 나머지 카드들은 디졸브 되는 등 인터렉션이 잘 들어가 있고 

카드 선택 시 내가 요구한 '다시 뽑기'도 잘 구현이 되어있음.

 

무엇보다 나는 색상이나 테마 샘플을 주지않았는데도 자기가 알아서 이렇게 만들어냄..

훌-륭

 

무료에 코딩 없이 이 정도 완성도면 진입 장벽이 거의 없다고 봐도 됨.

아이디어가 있는데 구현이 막막했던 사람이라면 한 번쯤 시도해볼 만함.

 

기획이랑 텍스트만 있어도 충분히 돌아감.

 

어떤 느낌으로 만들어갈ㅈ ㅣ... 

AI만 있으면 뭐든 해낼 수 있을 것 같은 자신감이 생긴다.

 

내가 만든 샘플 사이트는 여기~~ 데이터는 다시 가짜로 갈아끼움 ㅎ

 

https://rainbow-smakager-b117b8.netlify.app/

대략단감 · Daeryak Dangam — A Reading

 

---

참고 영상

Claude Design 전반적인 활용법은 아래 영상을 보고 따라 했음.

PPT·캔바, 이제 클로드가 다 한다 | 즉시 업무 적용 실전 예제 7가지 (오빠두엑셀)

 https://www.youtube.com/watch?v=VnMAgSd0BUg&t=1373s