43. [MISSION 5] 클로드 코드로 나만의 프로필 웹사이트 만들기

미션 목표

클로드 코드의 Plan Mode와 이미지 분석 기능을 활용하여 반복적인 개선 프로세스를 통해 나만의 멋진 프로필 웹사이트를 완성합니다.

미션 내용

1단계: 프로젝트 폴더 생성하기

터미널을 열고 새 프로젝트 폴더를 생성합니다:

Windows (PowerShell):

cd ~\workspace
mkdir my-profile-site
cd my-profile-site

PowerShell

복사

macOS (터미널):

cd ~/workspace
mkdir my-profile-site
cd my-profile-site

Bash

복사

2단계: 클로드 코드 실행 및 Plan Mode로 계획 세우기

클로드 코드를 실행합니다:

Windows (PowerShell):

claude

PowerShell

복사

macOS (터미널):

claude

Bash

복사

클로드에게 프로필 사이트 제작을 요청합니다:

나만의 프로필 웹사이트를 만들고 싶어. 다음 정보를 포함해줘:
- 이름: 이선영
- 직업/역할: 풀스택 개발자
- 소개: 안녕하세요. 성장하는 개발자 이선영 입니다.
- 기술 스택: HTML, CSS, JavaScript, React.js, JQuery, Java, Python, Spring, PostgreSQL, Oracle
- 프로젝트/포트폴리오 섹션
- 연락처: (이메일)dev.sylee95@gmail.com / (Github) https://github.com/Young-27

HTML, CSS, JavaScript로 만들고 Tailwind CSS CDN을 사용해줘.
모던하고 깔끔한 디자인으로 만들어줘.

먼저 어떻게 만들 건지 계획을 보여줘.

Markdown

복사

 Plan Mode의 핵심: 클로드가 코드를 작성하기 전에 어떤 구조로, 어떤 섹션을, 어떤 스타일로 만들 건지 계획을 먼저 제시합니다. 이 계획이 마음에 들 때까지 수정을 요청하세요!

3단계: 계획 검토 및 수정 요청하기

클로드가 제시한 계획을 검토합니다. 마음에 들지 않는 부분이 있다면 수정을 요청합니다:

계획은 좋은데, 다음을 수정해줘:
- 색상 테마를 보라색 계열로 바꿔줘
- 프로젝트 섹션을 카드 형태로 3개 배치해줘
- 헤더에 네비게이션 메뉴를 추가해줘

Markdown

복사

계획이 마음에 들 때까지 반복적으로 수정을 요청합니다.

 실전 팁: 구현 전에 계획을 확정하면 시행착오를 줄일 수 있습니다. 실제 프로젝트에서도 기획 단계가 가장 중요합니다!

4단계: 계획 확정 및 구현 요청하기

계획이 마음에 들면 구현을 요청합니다:

좋아! 이 계획대로 구현해줘.

Plain Text

복사

클로드가 index.html 파일을 생성합니다.

5단계: Cursor AI로 프로젝트 열고 Live Server 실행하기

Cursor AI를 실행하고 File → Open Folder로 ~/workspace/my-profile-site 폴더를 엽니다.

index.html 파일을 우클릭하고 Open with Live Server를 선택합니다.

 Live Server 설치: 없다면 Extensions에서 Live Server 검색 후 설치하세요.

브라우저에서 생성된 프로필 사이트를 확인합니다.

6단계: 스크린샷으로 구체적인 수정 요청하기 (1차)

브라우저에서 현재 사이트의 전체 화면 스크린샷을 캡처합니다.

Windows:Win + Shift + S로 캡처

macOS:Cmd + Shift + 4로 캡처

클로드 코드로 돌아가서 캡처한 이미지를 첨부하고 특정 부분을 지목하여 개선을 요청합니다:

[스크린샷 첨부]

이 스크린샷을 보고 다음 부분을 수정해줘:
1. 맨 위 헤더 영역 - 폰트 크기를 더 크게
2. 가운데 소개 섹션 - 배경색을 조금 더 밝게
3. 하단 연락처 버튼 - 간격을 더 넓게

Markdown

복사

 스크린샷 활용법 1 - 구체적 수정 요청: 스크린샷을 첨부하면 "이 부분", "여기"처럼 구체적인 위치를 지목할 수 있습니다. 말로만 설명하기 어려운 부분을 시각적으로 명확하게 전달할 수 있습니다!

클로드가 제안한 변경사항을 적용하고 Live Server에서 자동 새로고침된 결과를 확인합니다.

7단계: 참고 디자인으로 벤치마킹하기 (2차)

마음에 드는 웹사이트나 디자인을 찾아 스크린샷을 캡처합니다.

예를 들어, 다른 프로필 사이트나 포트폴리오 사이트의 마음에 드는 부분을 캡처합니다.

클로드 코드에 참고 이미지를 첨부하고 벤치마킹을 요청합니다:

[참고 디자인 스크린샷 첨부]

이 스크린샷처럼 예쁘게 해줘. 특히:
1. 이 색상 조합을 참고해서 적용
2. 카드 스타일과 그림자 효과를 비슷하게
3. 전체적인 레이아웃 구조를 참고

Markdown

복사

 스크린샷 활용법 2 - 벤치마킹: 마음에 드는 디자인의 스크린샷을 첨부하면 "이것처럼", "이 스타일로"라고 요청할 수 있습니다. 막연한 요청보다 훨씬 정확한 결과를 얻을 수 있습니다!

변경사항을 적용하고 결과를 확인합니다.

8단계: 내 사이트 개선 및 최종 완성하기 (3차)

개선된 내 사이트의 스크린샷을 다시 캡처합니다.

클로드 코드에 새 스크린샷을 첨부하고 최종 디테일을 다듬습니다:

[내 사이트 스크린샷 첨부]

거의 완벽해! 이 스크린샷에서 마지막으로 다음을 조정해줘:
1. 상단의 이 네비게이션 메뉴 - 위치를 오른쪽으로
2. 중간의 이 프로젝트 카드들 - 호버 효과 추가
3. 하단의 이 푸터 영역 - 여백을 더 넓게

Markdown

복사

 핵심 정리:

•

스크린샷 활용법 1: 내 사이트를 캡처해서 "이 부분을 수정해줘" (구체적 지목)

•

스크린샷 활용법 2: 참고 디자인을 캡처해서 "이것처럼 해줘" (벤치마킹)

최종 결과물을 확인하고 만족스러운 프로필 사이트가 완성됩니다.

트러블슈팅

문제 1: 클로드가 스크린샷에서 특정 부분을 이해하지 못해요

"상단 왼쪽의 헤더", "가운데 파란색 버튼" 같이 더 구체적으로 위치와 색상을 함께 설명하세요. 필요하다면 화살표나 표시를 추가한 스크린샷을 사용할 수 있습니다.

문제 2: 벤치마킹 스크린샷을 첨부했는데 완전히 똑같이 만들어요

"이 디자인을 참고해서 내 콘텐츠에 맞게 적용해줘" 또는 "색상과 레이아웃 스타일만 참고해줘"처럼 어느 부분을 참고할지 명확히 하세요.

문제 3: Live Server가 자동 새로고침되지 않아요

파일을 수정한 후 반드시 저장(Ctrl/Cmd + S)해야 합니다. 또는 브라우저를 수동으로 새로고침(F5)하세요.

제출하기

다음 내용을 제출하세요:

최종 완성된 프로필 웹사이트 스크린샷: Plan Mode로 계획을 확정하고, 스크린샷 기반의 구체적 수정과 벤치마킹을 통해 완성된 나만의 프로필 사이트 전체 화면