맞춤형 웹페이지 생성
코드를 한 줄도 작성하지 않고도 작업을 선보이는 포트폴리오 사이트를 구축하고, 이를 라이브 배포하는 방법까지 배워보세요.
- 작성자Anthropic
- 카테고리개인
- 모델Sonnet 4.5
- 기능
- 공유링크 복사
1
작업 설명
Claude의 비전과 코딩 능력은 함께 작동하며, 사용자의 설명과 이미지를 실제 웹 인터페이스로 전환합니다. Claude는 이력서 및 과거 프로젝트와 결합하여, 커리어 스토리와 선호하는 디자인 스타일을 모두 반영하는 포트폴리오를 생성할 수 있습니다.
Claude에게 업로드한 이력서와 프로젝트 파일을 활용해 포트폴리오 사이트를 구축하도록 요청하세요. 또한 디자인 선호도와 마지막에 배포 방법에 대한 지침이 필요하다는 것을 명시하세요.
전문 포트폴리오 HTML 페이지를 생성해서 내 전문 경력과 성과를 보여주도록 도와줘. 이력서, 프로젝트 설명, 디자인 영감 파일을 업로드했어. 이걸로 내 배경과 미적 선호도를 파악해 줘.
디자인 방향으로는 기업 템플릿이 아니라 하이엔드 크리에이티브 에이전시처럼, 잡지나 책 같은 편집미가 살아 있는 고급스러운 구성을 원해. 일반 레이아웃, AI처럼 보이는 그라데이션, 지나친 대칭은 피해 줘. 내가 좋아하는 사이트들(업로드에 있음)은 유기적이면서도 수작업 품질을 갖추고 있고 예상치 못한 디테일이 있어.
페이지를 만든 다음에는, 인터넷에 라이브로 게시하는 방법을 알려줘. 웹사이트를 배포해 본 적이 없다고 가정하고, 코딩 지식이 없어도 따라할 수 있는 정확한 단계가 필요해.
2
Claude에게 컨텍스트 제공
Claude에 커리어 배경과 디자인 선호도에 대한 정보를 제공해서, 당신의 작업을 진정성 있게 반영하는 사이트를 만들어 보세요.
필수 컨텍스트
이력서, 과거 프로젝트, 강조하고 싶은 다른 업적 등 커리어 스토리를 담은 파일을 업로드하세요.
또한 미적 선호도를 전달하는 파일도 포함하세요. 참고하는 포트폴리오의 스크린샷이나 디자인 UI 코드 스니펫은 Claude가 미적 방향을 이해하는 데 도움이 됩니다.
No items found.
이력서
PDF
프로젝트 설명 (최고 성과를 보여주는 3~5개의 상세 사례)
PDF
이력서
PDF
선택적 컨텍스트
Claude가 고품질 결과물을 생성하는 데 더 많은 시간을 할애할 수 있도록 확장된 사고를 켜세요.
확장된 사고
3
Claude가 생성하는 것
Claude는 완전한 포트폴리오 페이지를 HTML 아티팩트로 구축합니다. 아티팩트에는 커리어 정보, 프로젝트 쇼케이스, 사용자의 미적 선호도에 맞는 디자인 선택이 포함됩니다.
Claude에서 가져옴
포트폴리오 사이트를 생성했습니다. 이 디자인은 레퍼런스 파일의 에디토리얼 스타일과 수작업 분위기의 미학을 반영했습니다. 대칭적인 레이아웃과 기업형 템플릿을 피하고, 더 유기적인 느낌을 선택했습니다. 언급한 테이프 효과는 프로젝트 카드에 적용했고, 페이지 간 이동할 때 활성화되는 은은한 스크롤 애니메이션을 추가했습니다.
About 섹션은 이력서 정보를 기반으로 구성하고, 프로젝트 설명은 이미지와 세부 내용을 담을 수 있는 개별 쇼케이스 영역에 배치됩니다. 타이포그래피는 원하는 정교한 톤과 일치하는 serif-sans 조합을 사용하고, 디자인 참조 사항을 분석하여 색상 팔레트를 만들었습니다.
포트폴리오 웹페이지 보기
어떤 브라우저에서든 열고 구현된 형태를 확인할 수 있습니다. 색상 조정, 프로젝트 순서 변경, 텍스트 수정이 필요하다면, 원하는 부분을 알려주세요.
4
후속 프롬프트
Claude와 계속 대화를 나누어 다듬고 확장하며 더 많은 것을 탐색하세요.
라이브 사이트 배포
Claude는 Netlify에 연결해 아티팩트 코드를 가져오고, 라이브 웹사이트로 배포할 수 있습니다. 이 작업에 코딩은 필요하지 않습니다. Claude는 아티팩트의 HTML 코드를 기반으로, 기술 배포 프로세스를 처리하는 방법을 알려줄 수 있습니다.
포트폴리오 아티팩트의 코드를 활용해 실제 사이트를 만들고 싶어. Netlify 커넥터를 사용해 Netlify에서 직접 새 사이트 프로젝트를 생성하고, 라이브로 배포하는 과정을 단계별로 설명해 줘. 내 포트폴리오 아티팩트의 코드를 공유할게. Netlify 커넥터를 사용해 새 사이트 프로젝트를 생성하고, 이를 라이브 웹사이트로 배포해 줘. 라이브 상태가 되면 URL을 알려주고, 나중에 변경하려면 어떻게 해야 하는지 설명해 줘.
인터랙티브 효과 구축
코딩된 애니메이션과 상호작용을 통해 더욱 세심하게 다듬으세요. Claude는 HTML, CSS, JavaScript를 작성해 호버 효과, 스크롤 애니메이션, 사용자 작업에 반응하는 인터랙티브 요소와 같은 기능적 동작을 사이트에 추가할 수 있습니다.
프로젝트 카드에 호버 효과를 추가해 줘. 미묘한 변화나 테두리 변경도 괜찮아. 섹션으로 스크롤해 들어갈 때 제목이 살짝 페이드인되도록 해 줘. 눈에 띄는 것보다는, 디테일에 신경 쓴 게 느껴지는 정제된 인터랙션이면 좋겠어.
프로젝트 하나를 상세한 사례 연구로 확장
가장 중요한 업무를 전체 디자인 프로세스까지 포함해 심층적으로 파악하세요.
인프라 모니터링 대시보드 프로젝트를 전체 사례 연구 페이지로 확장해 줘. 문제, 리서치 단계, 디자인 프로세스, 반복 개선, 당면한 과제, 해결 방법, 그리고 측정 가능한 영향을 포함해. 또한 와이어프레임, 사용자 피드백, 교훈 섹션을 추가해 줘.
5
팁, 팁, 문제 해결
출력 디자인 개선
Claude는 때때로 표준 글꼴, 기본 색상, 적절한 간격과 같은 더 기능적인 디자인을 선택할 수 있습니다. 더 다양한 결과물을 얻으려면, 다른 프롬프팅 기법을 사용하세요. 품질 벤치마크("최상위 컨설팅 보고서", "프리미엄 SaaS 제품")를 참조하고, Claude를 도메인 전문가로 설정하며("시니어 디자이너처럼 접근"), 높은 품질 기준에 따라 스스로 결과물을 평가하고 수정하도록 Claude에 요청하세요. 또한 Claude에 무엇을 하지 말아야 하는지를 지시할 수 있습니다(예: "흔한 기업용 파란색 색상 피하기", "기본 타이포그래피는 사용 금지"). 최종 결과를 얻으려면 반복 개선이 필요합니다. 첫 번째 결과물 이후, 부족한 부분을 평가하고 개선을 요청하세요.
일관된 디자인 표준을 위해 Skill 사용
Claude가 매번 선호도를 다시 설명하지 않아도 설정된 표준을 적용할 수 있도록 시각적 참조, 성공 사례, 구체적인 디자인 선호도를 패키지로 제공하는 Skill을 생성하세요. 서식 선호도, 미적 방향성, 품질 표준을 재사용 가능한 워크플로우로 묶는 콘텐츠 디자인 Skill을 생성하도록 요청하세요. Skill 생성에 관해 자세히 알아보세요.
직접 시도해 볼 준비가 되셨나요?
코드를 작성하지 않고도 Claude와 함께 작업을 보여주는 포트폴리오 페이지를 구축하고, 이를 라이브로 배포하는 방법까지 배워보세요.
