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