클로드로 마케팅 포트폴리오 제작하기
포트폴리오 웹페이지를 만들려고 해. 주요 기능은 채용 담당자가 30초 안에 내 역량을 파악할 수 있는 임팩트 있는 구성이야. 프리랜서 전환을 준비하는 마케터를 위한 것이고, 경쟁력 있는 지원자로 보이기 위해 필요해. 어떻게 구현하면 좋을 지 기술적인 방향과 함께 구체적인 PRD를 작성해줘.
이 PRD대로 진행할 거야. 먼저 PRD를 기반으로 HTML 문서를 작성해 줘. 섹션을 나누고, 수정을 대비해 각 섹션에 고유한 이름을 붙여 줘. 아직 기능은 구현하지 말고, 전체 구조만 보여 줘.
결국 유료결제를 해서 사용중인데 Sonnet 4.5를 사용하니 강의 샘플에 비해서 세련됨이 떨어집니다.
따라서 강사님이 사용하시 Opus 4.5로 다시 실행해 봤습니다.
갑자기 웹페이지 분위기가 확 달라졌습니다.
그냥 블랙바탕이 더 나을 것 같아서 수정해 달라고 할까 고민했지만, 또 금새 토큰이 바닥날 것 같아서 무섭네요.
그냥 진행하기로 하고 프롬프트에 경력사항을 넣어서 업데이트를 진행합니다.
워드프레스 테마 중에서 이 포트폴리오와 가장 잘 어울리는 것을 하나 선택해서 디자인을 수정해 줘. 섹션별로 색상 톤을 달리 해서 구분이 잘 되게 해 줘.
https://claude.ai/public/artifacts/648090b2-60a8-4628-a1b3-5bcb6d3a3d92
포트폴리오 웹페이지의 모든 부분이 잘 만들어졌는지 검토해 줘. PRD대로 제작되었는지, 각 링크가 문제없이 작동하는지 확인해.
발견된 개선점 5가지를 보완 및 수정하고, 완벽한 프리랜서 전환용 포트폴리오를 완성해.
4단계 개발 전략
PRD를 통째로 전달해 “이대로 만들어달라”고 요청하면 코드가 한 번에 섞여 생성되어, 이후 수정과 유지보수가 매우 어려워집니다. 이를 방지하기 위해 단계별로 나누어 진행하는 전략이 필요합니다.
1단계 – 뼈대
기본 HTML 구조를 먼저 구성하고, 섹션별로 고유한 이름을 부여합니다. 이 단계에서는 동작보다는 전체 구조와 흐름에 집중합니다.
2단계 – 기능
실제 데이터를 연결하고, 필요한 로직을 구현합니다. 기능 단위로 나누어 하나씩 추가하며 정상 동작 여부를 확인합니다.
3단계 – 디자인
UI/UX를 적용하고 레퍼런스를 참고해 화면을 다듬습니다. 이 단계에서는 사용성, 가독성, 인터랙션을 중심으로 개선합니다.
4단계 – 점검
테스트를 통해 오류를 확인하고, 전반적인 품질을 검수합니다. 예외 상황과 사용 시나리오를 점검하며 완성도를 높입니다.
각 단계는 요청 → 생성 → 확인 → 수정의 사이클을 반복하며 진행하는 것이 핵심입니다.
핵심 키워드
- 바이브 코딩 : AI와 대화하며 프로그램을 만드는 개발 방식
- 아티팩트 : 클로드가 결과물을 생성하고 미리보기를 제공하는 작업 공간
- 프롬프트 : AI에게 전달하는 요청, 명확성, 구체성, 맥락 제공
- 5W1H : Why, Who, What, When, Where, How 체계적 사고의 틀
- PRD : 제품 기획서, 바이브 코딩의 효과적인 프롬프트
- 4단계 전략 : 뼈대 → 기능 → 디자인 → 점검
🚶기본 미션(필수)
- PROJECT 2. 마케팅 포트폴리오 웹페이지 만들고 캡처하기
- p.66, p.80-81 확인 문제 풀고 인증하기
🏃추가 미션(선택)
- AI에게 디자인 수정 요청 1회 이상하고 캡처하기
- 내가 이해한 웹페이지의 구조를 한 문단으로 정리하기
웹페이지는 먼저 전체 골격을 담당하는 HTML 구조로 화면의 영역과 섹션을 나누고, 그 위에 실제 데이터와 동작을 처리하는 로직이 기능 단위로 얹히며, 이후 사용성과 가독성을 높이기 위한 디자인과 UI/UX가 적용되고, 마지막으로 테스트와 검수를 통해 오류를 제거하고 완성도를 높이는 단계적 구조로 이해할 수 있습니다.
