1. 작업 설명하기
Claude의 비전(새 탭에서 열림) 능력과 코딩 능력이 결합되어 여러분의 설명과 이미지를 실제로 작동하는 웹 인터페이스로 변환합니다. 이력서와 과거 프로젝트와 함께 사용하면, Claude는 여러분의 전문적인 이야기와 선호하는 디자인 스타일을 모두 반영한 포트폴리오를 만들 수 있습니다.
업로드한 이력서와 프로젝트 파일을 사용해 포트폴리오 사이트를 만들어 달라고 Claude에게 요청하세요. 디자인 선호도를 구체적으로 명시하고, 나중에 배포하는 방법에 대한 안내가 필요하다고 알려주세요.
제 전문적인 커리어와 성과를 소개할 전문적인 포트폴리오 HTML 페이지를 만드는 것을 도와주세요. 이력서, 프로젝트 설명, 그리고 디자인 영감을 줄 파일들을 업로드했습니다. 이를 활용해서 제 배경과 미적 취향을 파악해 주세요.
디자인 방향은 세련되고 에디토리얼한 느낌—고급 크리에이티브 에이전시 같은 느낌을 원하며, 기업용 템플릿 같은 느낌은 피해주세요. 일반적인 레이아웃, AI스러운 그라데이션, 지나친 대칭은 피해주세요. 제가 좋아하는 사이트들(업로드한 파일 속)은 유기적이고 수작업 느낌이 나며 예상치 못한 디테일이 있습니다.
만든 후에는 이를 인터넷에 실제로 게시하는 방법을 안내해 주세요. 저는 웹사이트를 배포해 본 적이 없다고 가정하고, 코딩 지식이 전혀 필요 없는 정확한 단계를 알려주세요.
2. Claude에게 맥락 제공하기
Claude에게 여러분의 전문적인 배경과 디자인 선호도에 대한 정보를 제공하여 여러분의 작업을 진정성 있게 대변하는 사이트를 만들어 보세요.
필수 맥락
이력서, 과거 프로젝트, 그리고 강조하고 싶은 다른 성과 등 여러분의 전문적인 이야기를 담은 파일을 업로드하세요.
또한 여러분의 미적 취향을 전달하는 파일도 포함하세요. 마음에 드는 포트폴리오의 스크린샷이나 좋아하는 디자인의 UI 코드 스니펫은 Claude가 여러분의 미적 방향을 이해하는 데 도움이 됩니다.
3. Claude가 만드는 것
Claude는 완전한 포트폴리오 페이지를 HTML 아티팩트로 만듭니다. 이 아티팩트에는 여러분의 전문적인 정보, 프로젝트 소개, 그리고 여러분의 미적 취향에 맞춘 디자인 선택이 포함됩니다.
포트폴리오 사이트를 만들었습니다. 디자인은 여러분이 제공한 영감 파일 속의 에디토리얼하고 수작업 느낌의 미학에서 가져왔습니다—대칭적인 레이아웃과 기업용 템플릿은 피하고, 좀 더 유기적인 느낌을 주는 방향을 선택했습니다. 말씀하신 테이프 효과는 프로젝트 카드에 적용했고, 페이지를 스크롤할 때 활성화되는 은은한 스크롤 애니메이션도 추가했습니다.
이력서 정보는 About 섹션의 구조를 이루고, 각 프로젝트 설명은 이미지와 세부 정보를 위한 공간이 있는 별도의 소개 영역을 갖습니다. 타이포그래피는 원하셨던 세련된 톤에 맞는 세리프-산세리프 조합을 사용했고, 색상 팔레트는 여러분의 디자인 참고 자료를 분석해서 만들었습니다. 포트폴리오 웹페이지 보기(새 탭에서 열림)
어떤 브라우저에서든 열어서 어떻게 보이는지 확인하실 수 있습니다. 색상을 조정하거나, 프로젝트 순서를 바꾸거나, 텍스트를 수정하고 싶으시면 원하시는 변경 사항을 알려주세요.
4. 후속 프롬프트
Claude와의 대화를 이어가며 더 다듬고, 확장하고, 더 깊이 탐구해 보세요.
사이트를 실제로 배포하기
Claude는 Netlify(새 탭에서 열림)에 연결하여 여러분의 아티팩트 코드를 가져와 실제 웹사이트로 배포할 수 있습니다—여러분이 직접 코딩할 필요가 없습니다. 아티팩트의 HTML 코드를 바탕으로, Claude는 기술적인 배포 과정을 처리하는 방법을 알려줄 수 있습니다.
제 포트폴리오 아티팩트의 코드를 사용해서 실제 사이트를 만들고 싶습니다. 제 Netlify 커넥터를 사용해서 Netlify에 새 사이트 프로젝트를 직접 만들고, 이를 실제로 배포하는 과정을 안내해 주세요. 포트폴리오 아티팩트의 코드를 공유하겠습니다. 제 Netlify 커넥터를 사용해서 새 사이트 프로젝트를 만들고 이를 실제 웹사이트로 배포해 주세요. 배포가 완료되면 URL을 알려주시고, 나중에 변경하고 싶을 때 사이트를 업데이트하는 방법도 설명해 주세요.
인터랙티브 효과 만들기
코드로 구현한 애니메이션과 인터랙션으로 완성도를 높여보세요. Claude는 HTML, CSS, JavaScript를 작성해서 사이트에 기능적인 동작을 추가할 수 있습니다—호버 효과, 스크롤 애니메이션, 또는 사용자 동작에 반응하는 인터랙티브 요소 등입니다.
프로젝트 카드에 호버 효과를 추가해 주세요—은은한 이동이나 테두리 변화 같은 것이요. 섹션으로 스크롤할 때 제목이 살짝 페이드인되도록 해주세요. 화려할 필요는 없고, 디테일에 신경 쓴 세련된 인터랙션이면 됩니다.
프로젝트 하나를 상세한 사례 연구로 확장하기
가장 중요한 작업을 전체 디자인 과정과 함께 깊이 있게 다뤄보세요.
Infrastructure Monitoring Dashboard 프로젝트를 가져와서 전체 사례 연구 페이지로 확장해 주세요. 문제, 리서치 단계, 디자인 과정, 반복 작업, 직면했던 어려움, 그것을 어떻게 해결했는지, 그리고 측정 가능한 성과를 포함해 주세요. 와이어프레임, 사용자 피드백, 배운 점을 위한 섹션도 추가해 주세요.
5. 요령, 팁, 문제 해결
결과물의 디자인 개선하기
Claude는 때때로 표준 폰트, 기본 색상, 적당한 여백 등 더 기능적인 디자인 선택을 할 수 있습니다. 더 다양한 결과물을 얻으려면 다른 프롬프트 기법을 시도해 보세요. 품질 기준을 참조하거나("최고 수준의 컨설팅 보고서", "프리미엄 SaaS 제품"), Claude를 해당 분야의 전문가로 설정하거나("시니어 디자이너처럼 접근해 주세요"), Claude에게 자신의 결과물을 높은 품질 기준에 맞춰 평가하고 개선하도록 요청해 보세요. 또한 Claude에게 하지 말아야 할 것을 알려줄 수도 있습니다("일반적인 기업용 파란색은 피해주세요", "기본 타이포그래피는 사용하지 마세요"). 최종 결과물에 도달하기까지는 반복 작업이 필요할 수 있습니다—첫 결과물이 나온 후 무엇이 부족한지 평가하고 개선을 요청하세요.
일관된 디자인 기준을 위해 스킬 사용하기
시각적 참고 자료, 성공적인 예시, 구체적인 디자인 선호도를 하나로 묶은 스킬(새 탭에서 열림)을 만들어서, 매번 선호도를 다시 설명하지 않고도 Claude가 여러분이 정한 기준을 적용할 수 있도록 하세요. Claude에게 서식 선호도, 미적 방향, 품질 기준을 재사용 가능한 워크플로로 묶은 콘텐츠 디자인 스킬을 만들어 달라고 요청해 보세요. 스킬 만들기(새 탭에서 열림)에 대해 더 알아보세요.
6. 직접 시도해 볼 준비가 되셨나요?
Claude와 함께 여러분의 작업을 대변하는 포트폴리오 페이지를 만들고, 코드를 작성하지 않고도 이를 실제로 배포하는 방법을 배워보세요.