오늘의 목표
지금 우리 손에는 작은 자기소개 페이지가 있습니다.
파일은 보통 이렇게 되어 있을 겁니다.
index.html
style.css
script.js아직은 연습용 페이지에 가깝습니다. 하지만 오늘은 이 페이지를 누군가에게 보여 줄 수 있는 미니 포트폴리오로 키웁니다.
완성 화면에는 다음 네 가지가 들어갑니다.
나를 소개하는 첫 화면
프로젝트 카드 3개
연락처 섹션
연락처로 부드럽게 이동하는 버튼
중요한 원칙은 하나입니다.
한 번에 다 바꾸지 않습니다.
섹션 하나씩 추가하고, 확인하고, 다음으로 갑니다.
먼저 클로드에게 현재 파일을 읽게 하기
터미널에서 프로젝트 폴더에 들어간 뒤 Claude Code를 실행합니다.
claude이제 바로 "포트폴리오 만들어줘"라고 하지 않습니다.
먼저 현재 상태를 확인하게 합니다.
지금 프로젝트는 index.html, style.css, script.js로 된 작은 자기소개 페이지야.
이 페이지를 개인 미니 포트폴리오로 확장하고 싶어.
먼저 세 파일을 읽고, 어떤 구조로 바꾸면 좋을지 수정 계획만 짧게 말해줘.
아직 파일은 수정하지 마.여기서 핵심 문장은 이것입니다.
아직 파일은 수정하지 마.초보자에게 가장 안전한 습관입니다.
클로드가 먼저 계획을 말하게 하면, 우리가 방향을 잡을 수 있습니다.
클로드의 계획이 이런 식이면 좋습니다.
- index.html에 소개, 프로젝트, 연락처 섹션을 추가
- style.css에 카드 레이아웃과 반응형 스타일 추가
- script.js에 연락처 이동 기능 추가이 정도면 진행해도 됩니다.
1단계: 소개 섹션을 포트폴리오 첫 화면처럼 바꾸기
첫 화면은 포트폴리오의 표지입니다.
방문자가 들어왔을 때 "이 사람이 누구인지" 바로 보여야 합니다.
클로드에게 이렇게 요청합니다.
index.html만 수정해줘.
현재 자기소개 영역을 포트폴리오 첫 화면처럼 바꾸고 싶어.
다음 내용을 포함해줘.
- 짧은 인사말
- 내 이름이 들어갈 자리
- 내가 하는 일을 설명하는 한 문장
- 연락처 섹션으로 이동하는 버튼
버튼 문구는 "연락하기"로 해줘.
버튼은 나중에 #contact 섹션으로 이동하게 만들 예정이야.
style.css와 script.js는 아직 수정하지 마.이번 요청의 포인트는 수정할 파일을 하나로 제한한 것입니다.
index.html만 수정해줘.이렇게 말하면 클로드가 필요 이상으로 여러 파일을 건드릴 가능성이 줄어듭니다.
변경 제안이 나오면 바로 승인하지 말고 세 가지만 봅니다.
1. index.html만 바뀌는가?
2. 기존 다크모드 버튼이나 연결 코드가 사라지지 않았는가?
3. 연락하기 버튼이 들어갔는가?괜찮다면 승인합니다.
y브라우저에서 index.html을 새로고침합니다.
아직 디자인이 조금 어색해도 괜찮습니다. 지금은 뼈대를 세우는 단계입니다.
2단계: 프로젝트 카드 3개 만들기
포트폴리오에는 프로젝트가 있어야 합니다.
하지만 처음부터 진짜 프로젝트가 없어도 됩니다.
우리는 먼저 더미 데이터로 카드 구조를 만듭니다.
나중에 제목과 설명만 내 내용으로 바꾸면 됩니다.
클로드에게 이렇게 입력합니다.
index.html에 프로젝트 섹션을 추가해줘.
조건은 다음과 같아.
- 섹션 제목은 "Projects"로 해줘.
- 프로젝트 카드 3개를 만들어줘.
- 각 카드에는 프로젝트 제목, 한 줄 설명, 사용 기술 태그, 자세히 보기 링크 자리가 있어야 해.
- 아직 실제 프로젝트가 없으니 더미 데이터로 채워줘.
- 나중에 텍스트만 쉽게 바꿀 수 있도록 HTML 구조를 단순하게 만들어줘.
이번에도 index.html만 수정해줘.
style.css와 script.js는 수정하지 마.더미 데이터는 부끄러운 게 아닙니다.
오히려 초보자에게는 가장 좋은 출발점입니다.
처음에는 이런 식이면 충분합니다.
프로젝트 1: 개인 소개 페이지
설명: HTML과 CSS로 만든 첫 번째 웹페이지
태그: HTML, CSS
프로젝트 2: 다크모드 버튼
설명: 버튼 클릭으로 화면 테마를 바꾸는 기능
태그: JavaScript
프로젝트 3: 미니 포트폴리오
설명: 소개, 프로젝트, 연락처를 담은 한 장짜리 사이트
태그: HTML, CSS, JavaScript클로드가 만든 카드 내용이 마음에 들지 않아도 괜찮습니다.
지금 중요한 것은 문장이 아니라 구조입니다.
승인 전에는 다시 봅니다.
1. 프로젝트 카드가 3개인가?
2. 카드 안에 제목, 설명, 태그, 링크 자리가 있는가?
3. 기존 소개 영역이 사라지지 않았는가?문제가 없으면 승인합니다.
y3단계: 연락처 섹션 추가하기
이제 페이지 끝에 연락처 영역을 만듭니다.
연락처는 거창할 필요 없습니다.
이메일, 깃허브, 블로그, 링크드인 중에서 지금 있는 것만 넣으면 됩니다.
아직 계정이 없다면 자리만 만들어도 됩니다.
index.html에 연락처 섹션을 추가해줘.
조건은 다음과 같아.
- 섹션 id는 contact로 해줘.
- 섹션 제목은 "Contact"로 해줘.
- 이메일, GitHub, 블로그 링크 자리를 만들어줘.
- 아직 실제 주소가 없으니 [email protected], https://github.com/yourname 같은 예시로 넣어줘.
- 나중에 내가 쉽게 바꿀 수 있게 텍스트 구조를 단순하게 유지해줘.
index.html만 수정해줘.여기서 가장 중요한 부분은 이것입니다.
섹션 id는 contact로 해줘.이 contact라는 이름은 나중에 버튼 이동 기능에서 사용합니다.
승인 전에는 연락처 섹션이 페이지 아래쪽에 생겼는지 확인합니다.
<section id="contact">이런 형태가 보이면 좋습니다.
정확히 같지 않아도 id="contact"가 있으면 됩니다.
4단계: 카드가 예쁘게 보이도록 CSS 입히기
이제 구조는 어느 정도 생겼습니다.
하지만 아직은 글자가 위아래로 쌓인 평범한 문서처럼 보일 수 있습니다.
이번에는 style.css만 수정합니다.
style.css만 수정해줘.
현재 index.html에 소개 섹션, 프로젝트 섹션, 연락처 섹션이 있어.
이 페이지가 미니 포트폴리오처럼 보이도록 스타일을 정리해줘.
원하는 느낌은 다음과 같아.
- 전체 화면은 깔끔하고 여백이 넉넉하게
- 소개 섹션은 화면 위쪽에서 시선을 끌게
- 프로젝트 카드 3개는 데스크톱에서 가로로 나란히 배치
- 카드에는 둥근 모서리, 옅은 그림자, 적당한 여백 적용
- 연락처 섹션은 페이지 마지막에 깔끔하게 정리
- 기존 다크모드 스타일이 있다면 지우지 말고 유지
script.js는 수정하지 마.여기서 "예쁘게 해줘"라고만 말하지 않았습니다.
대신 어떤 느낌인지 구체적으로 말했습니다.
둥근 모서리
옅은 그림자
적당한 여백
가로로 나란히 배치이런 표현은 초보자에게 아주 유용합니다.
디자인 전문 용어를 몰라도 클로드가 충분히 이해합니다.
승인 전에는 변경 파일을 확인합니다.
style.css만 바뀌었는가?맞다면 승인합니다.
y브라우저를 새로고침합니다.
이제 페이지가 "연습장"에서 "작은 사이트"처럼 보이기 시작합니다.
5단계: 모바일에서 카드가 한 줄씩 쌓이게 하기
포트폴리오는 컴퓨터 화면에서만 보지 않습니다.
휴대폰에서도 열립니다.
그래서 카드 3개가 작은 화면에서 억지로 붙어 있으면 안 됩니다.
모바일에서는 카드가 한 줄씩 차곡차곡 쌓여야 합니다.
클로드에게 이렇게 요청합니다.
style.css에 반응형 스타일을 추가해줘.
조건은 다음과 같아.
- 화면이 768px보다 좁아지면 프로젝트 카드가 한 줄에 하나씩 보이게 해줘.
- 소개 섹션의 글자 크기와 여백도 모바일에서 너무 크지 않게 조정해줘.
- 연락처 링크도 작은 화면에서 보기 편하게 정리해줘.
- 기존 데스크톱 스타일과 다크모드 스타일은 유지해줘.
style.css만 수정해줘.768px은 태블릿과 모바일을 나누는 기준으로 자주 쓰는 숫자입니다.
외울 필요는 없습니다. 지금은 이렇게 생각하면 됩니다.
화면이 좁아지면 카드가 한 줄씩 내려간다.확인은 간단합니다.
브라우저 창의 오른쪽 끝을 잡고 천천히 줄여 보세요.
카드 3개가 어느 순간 아래처럼 바뀌면 성공입니다.
[프로젝트 카드 1]
[프로젝트 카드 2]
[프로젝트 카드 3]만약 카드가 너무 좁게 찌그러진다면 이렇게 다시 요청합니다.
모바일 화면에서 프로젝트 카드가 너무 좁고 답답해 보여.
카드가 한 줄에 하나씩 자연스럽게 쌓이고, 좌우 여백이 조금 남도록 style.css를 다듬어줘.6단계: 연락하기 버튼을 누르면 아래로 이동하게 만들기
이제 첫 화면의 "연락하기" 버튼을 눌렀을 때 아래쪽 Contact 섹션으로 부드럽게 이동하게 만듭니다.
이번에는 script.js를 사용합니다.
script.js에 기능을 추가해줘.
원하는 기능은 다음과 같아.
- 소개 섹션의 "연락하기" 버튼을 클릭하면
- id가 contact인 연락처 섹션으로 부드럽게 이동하게 해줘.
- scrollIntoView를 사용해도 좋아.
- 기존 다크모드 기능이 있다면 절대 지우지 말고 그대로 유지해줘.
필요하다면 index.html에서 버튼에 id나 class를 추가해도 돼.
하지만 변경 파일과 이유를 먼저 설명해줘.이번 요청은 일부러 조금 조심스럽게 썼습니다.
기존 다크모드 기능이 있다면 절대 지우지 말고 그대로 유지해줘.앞에서 만든 기능을 새 기능이 덮어쓰면 안 되기 때문입니다.
클로드가 script.js만 수정한다고 하면 좋습니다.
만약 버튼을 찾기 어렵다고 하며 index.html도 수정하겠다고 하면, 그 역시 괜찮습니다.
다만 승인 전에는 확인합니다.
1. script.js의 기존 다크모드 코드가 남아 있는가?
2. contact 섹션으로 이동하는 코드가 추가되었는가?
3. index.html을 수정했다면 버튼에 id나 class만 추가했는가?문제가 없다면 승인합니다.
y브라우저에서 테스트합니다.
1. 페이지 맨 위로 이동
2. 연락하기 버튼 클릭
3. Contact 섹션으로 부드럽게 내려가는지 확인
4. 다크모드 버튼도 여전히 작동하는지 확인둘 다 작동하면 성공입니다.
7단계: 더미 데이터를 내 이야기로 바꾸기
이제 껍데기는 완성됐습니다.
하지만 아직 내용은 예시입니다.
포트폴리오가 진짜처럼 보이려면 문장을 내 이야기로 바꿔야 합니다.
한 번에 모든 문장을 직접 고치기 어렵다면 클로드에게 "텍스트만" 바꾸게 합니다.
index.html의 텍스트 내용만 바꿔줘.
HTML 구조와 class 이름은 바꾸지 마.
내 정보는 다음과 같아.
- 이름: 홍길동
- 소개 문장: 웹을 배우며 작은 아이디어를 직접 구현하는 초보 개발자
- 관심 분야: 프론트엔드, 인터랙션, 생산성 도구
- 이메일: [email protected]
- GitHub: https://github.com/yourname
- 블로그: https://yourblog.com
프로젝트 카드 3개는 다음 내용으로 바꿔줘.
1. 개인 소개 페이지
- HTML과 CSS로 만든 첫 자기소개 웹페이지
- 태그: HTML, CSS
2. 다크모드 실험
- 버튼 클릭으로 화면 테마를 바꾸는 작은 기능
- 태그: JavaScript, CSS
3. 미니 포트폴리오
- 소개, 프로젝트, 연락처를 한 페이지에 담은 포트폴리오
- 태그: HTML, CSS, JavaScript
텍스트만 수정하고 레이아웃 구조는 유지해줘.여기서 가장 중요한 문장은 이것입니다.
HTML 구조와 class 이름은 바꾸지 마.구조와 class 이름이 갑자기 바뀌면 CSS가 깨질 수 있습니다.
문장만 바꿀 때는 문장만 바꾸게 해야 합니다.
8단계: 마지막 광택 내기
이제 페이지는 완성에 가깝습니다.
하지만 실제로 보여 주기 전에는 한 번 더 다듬는 시간이 필요합니다.
이 단계를 polish라고 생각하면 됩니다.
새 기능을 넣는 시간이 아니라, 어색한 부분을 매만지는 시간입니다.
클로드에게 이렇게 요청합니다.
현재 페이지를 미니 포트폴리오로 보여 주기 전에 마지막으로 다듬고 싶어.
새 섹션이나 새 기능은 추가하지 마.
현재 구조를 유지한 채로 다음만 정리해줘.
- 문장이 더 자연스럽게 읽히도록 다듬기
- 버튼과 카드의 여백을 조금 더 균형 있게 조정하기
- 색상 조합이 너무 튀지 않게 정리하기
- 모바일 화면에서도 답답하지 않게 여백 확인하기
- 기존 다크모드와 연락처 이동 기능은 유지하기
수정 전에는 어떤 파일을 왜 바꿀지 먼저 짧게 설명해줘.마지막 요청에서는 "더 멋지게"보다 "무엇을 다듬을지"가 중요합니다.
문장
여백
색상
모바일
기존 기능 유지이 다섯 가지만 말해도 결과가 훨씬 안정적입니다.
승인 전에는 이번에도 세 가지를 봅니다.
1. 새 기능을 마음대로 추가하지 않았는가?
2. 기존 기능이 사라지지 않았는가?
3. 너무 많은 파일을 한꺼번에 고치지 않았는가?괜찮다면 승인합니다.
y완성 체크리스트
마지막으로 브라우저에서 직접 확인합니다.
□ 첫 화면에서 내가 누구인지 바로 보인다.
□ 연락하기 버튼이 보인다.
□ 프로젝트 카드가 3개 있다.
□ 카드마다 제목, 설명, 태그가 있다.
□ Contact 섹션이 있다.
□ 연락하기 버튼을 누르면 Contact 섹션으로 이동한다.
□ 다크모드 버튼이 여전히 작동한다.
□ 브라우저 폭을 줄이면 카드가 한 줄씩 쌓인다.
□ 문장이 너무 길거나 어색하지 않다.
□ 여백이 너무 좁거나 답답하지 않다.체크가 8개 이상이면 충분합니다.
완벽하지 않아도 됩니다. 지금 필요한 것은 완벽한 포트폴리오가 아니라 보여 줄 수 있는 첫 결과물입니다.
오늘 만든 것의 의미
처음에는 작은 자기소개 페이지였습니다.
이제는 소개, 프로젝트, 연락처가 있는 미니 포트폴리오가 되었습니다.
대단한 기능을 많이 넣어서가 아닙니다.
작은 단계를 순서대로 쌓았기 때문입니다.
오늘 사용한 흐름은 앞으로도 계속 쓸 수 있습니다.
1. 현재 파일을 읽게 한다.
2. 수정 계획만 먼저 받는다.
3. 한 번에 한 섹션만 추가한다.
4. 파일 범위를 제한한다.
5. 브라우저에서 확인한다.
6. 마지막에 문장, 여백, 색상을 다듬는다.이 방식만 익혀도 클로드 코드가 훨씬 덜 무섭습니다.
검은 화면은 더 이상 막막한 공간이 아닙니다.
내가 부탁한 대로 결과물이 자라는 작업대입니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.