Claude Code (AI 코딩 에이전트)를 활용한 학습 기록과 프로젝트 모음
| # | 폴더 | 설명 | 사용 기술 |
|---|---|---|---|
| 1 | CLAUDE |
Claude 자기소개 페이지 | HTML, CSS, JS (Canvas, Glassmorphism) |
| 2 | 2026year developer's |
2026 개발자 현황 리포트 | HTML, CSS, JS (Matrix Rain, Chart) |
| 3 | LYG |
이윤건(LYG) 개발자 자기소개 포트폴리오 | HTML, CSS, JS (Modern Minimal, Inter/JetBrains Mono, Skill Orbit Canvas) |
Anthropic의 AI 코딩 에이전트. 터미널에서 자연어로 지시하면 파일 생성, 코드 작성, 디버깅, Git 관리까지 자동으로 수행합니다.
- Claude 소개 페이지 제작 (Canvas 파티클, 타이핑 효과)
- 2026 개발자 리포트 제작 (데이터 시각화, 사이버펑크 테마)
- 배운 점: 프롬프트 하나로 풀스택 페이지 생성 가능
- LYG 포트폴리오 페이지 제작 (Star Field, Skill Orbit, 프로젝트 모달)
각 프로젝트를 만들 때 사용한 프롬프트를 순서대로 기록합니다. 어떤 지시가 어떤 결과를 만들었는지 추적하는 용도입니다.
| 순서 | 프롬프트 | 결과 |
|---|---|---|
| 1 | 이 페이지를 너를 소개하는 페이지로 만들어줘. 너가 쓸 수 있는 모든 기술과 스택을 활용해서 세상에서 가장 멋진 웹 페이지로 제작해 |
6개 섹션 풀페이지 완성 (Canvas 파티클, 타이핑, 글래스모피즘, 3D 틸트, 코드 데모) |
인사이트: "세상에서 가장 멋진"이라는 표현이 Claude의 최대 퀄리티를 끌어냈다.
구체적 기술 요구 없이도 Canvas, Intersection Observer, 3D 효과 등을 알아서 적용함.
| 순서 | 프롬프트 | 결과 |
|---|---|---|
| 1 | 2026년 개발자들의 문제, 이슈, 향후 전망 등을 담은 웹 사이트를 만들어줘 |
7개 섹션 리포트 사이트 (매트릭스 레인, 바/도넛 차트, 타임라인) |
| 2 | 가독성은 그대로 유지하면서 조금 더 꾸며봐. 심심하네 |
오로라 배경, 커서 글로우, 카드 빛 스위프, 3D 틸트, 스크램블 텍스트, Impact 미터, 난이도 게이지 등 13개 인터랙션 추가 |
인사이트: 첫 결과물에 "심심하다"는 피드백만 줘도 대폭 업그레이드됨.
"가독성 유지"라는 조건을 붙이면 기존 구조를 무너뜨리지 않고 비주얼만 강화한다.
| 순서 | 프롬프트 | 결과 |
|---|---|---|
| 1 | "C:\Users\dbsrj\Desktop\CLAUDE_CODE\LYG" 이곳에 나를 소개하는 페이지를 만들어줘 + 개인정보 제공 |
6개 섹션 포트폴리오 완성 (Star Field, Glitch, Skill Orbit, 프로젝트 모달, 타임라인) |
| 2 | 프로젝트 9개 목록 + 기간/기술 스택 직접 제공, 섹션 타이틀 피드백 | 대표 프로젝트(Featured Projects) 9개 교체, 프로필 이미지 추가, 히어로 태그 정리, Is_It_Legal 링크 연동 |
| 3 | Developer's Life 카운터 요청 + Skill Orbit에 WPF 추가 | 2022.11.10부터 실시간 카운터(일/시/분/초), 10,000일 목표 진행률 바, WPF 스킬 노드 추가 |
| 4 | 코드 리뷰 8.5+ 점수 달성 요청 + GitHub 히트맵, 방문자 통계, 인터랙션 개선 | scroll 통합(rAF 쓰로틀), innerHTML→안전 DOM, Page Visibility API, Star Field O(n) 최적화, 프로젝트 카드 3D 플립, 스킬 카드 호버 상세, GitHub 기여도 히트맵, 방문자 통계 위젯, 다방향 reveal 애니메이션, 타이핑 커서 그라데이션 |
| 5 | 방문자 통계 섹션 카운터 버그 수정 + Contact nav 활성화 안 되는 문제 수정 | 섹션 카운터 0/8→0/9 초기값 수정, 뷰포트 기반 섹션 감지로 전환, 페이지 하단 도달 시 마지막 nav 링크 강제 활성화 |
| 6 | 3D Space Station Journey 재설계 시도 → 포트폴리오와 맞지 않아 폐기 | Three.js r147 + CSS3DRenderer 구현했으나, 포트폴리오 사이트 성격과 맞지 않는 디자인이라 폐기 |
| 7 | "모던 미니멀 포트폴리오"로 전면 재설계 요청 — Apple/Linear 스타일 선택 | Three.js/GSAP 전량 제거, Inter+JetBrains Mono 폰트, 다크 미니멀 테마(#0a0a0a), 코드 카드 히어로, 여백 중심 레이아웃, 순수 CSS 애니메이션, IntersectionObserver 리빌, 기존 기능 전부 유지 |
인사이트: 구체적인 개인 정보(경력, 학력, 기술스택 등)를 제공하면 맞춤형 포트폴리오를 생성한다.
프로젝트 데이터를 JS 배열로 분리하면 나중에 쉽게 추가/수정 가능한 구조가 된다.
"Projects"→"Featured Projects"처럼 섹션 네이밍 하나로 전체 인상이 바뀐다.
개발 시작일 같은 감성적 데이터를 실시간 카운터로 표현하면 포트폴리오에 생동감을 준다.
Team Agents를 활용한 병렬 코드 리뷰 후 체계적으로 개선하면 코드 품질을 단계적으로 올릴 수 있다.
페이지 마지막 섹션은 scrollY 기반 감지로는 활성화가 안 될 수 있다 — 하단 도달 판정을 별도로 추가해야 한다.
인사이트: 기술적으로 화려한 것(3D, 파티클 등)이 반드시 좋은 디자인은 아니다 — 포트폴리오의 목적(정보 전달, 전문성 어필)에 맞는 디자인을 선택해야 한다.
"포트폴리오에 안 맞는다"는 짧은 피드백만으로도 전체 디자인 방향을 전환할 수 있다.
외부 라이브러리(Three.js, GSAP)를 제거하면 로딩 속도가 대폭 개선되고 유지보수도 쉬워진다.
Apple/Linear 스타일의 핵심은 충분한 여백, 깔끔한 타이포, 미니멀한 색상 팔레트, 미묘한 인터랙션이다.