Step 5. 데이터로 증명하는 성능 (Engineering Metrics)
성능 최적화 경험을 단순 텍스트가 아닌 '지표'로 시각화하여 신뢰도를 극대화합니다.
Prompt 5: Visualization of Optimization Results "나의 최적화 성과를 시각적으로 증명할 수 있는 'Engineering Metrics' 섹션을 구현함.
[지침]
- 시각화: recharts 혹은 CSS를 활용해 MySQL 인덱스 적용 전/후 응답 속도(0.5s → 0.1s) 비교 차트 생성.
- 지표 대시보드: Lighthouse 점수, API 성공률, 테스트 커버리지 등의 핵심 지표를 담은 카드 배치.
- 디자인: 테마 컬러(에메랄드)를 활용하고 유리창 효과(Glassmorphism)를 적용해 고급스러운 느낌 부여."
Step 6. 개발자 아이덴티티를 담은 인터랙션 (System Terminal)
뻔한 '자기소개' 섹션을 터미널 인터페이스로 교체하여 공학적 감성과 재미를 동시에 잡습니다.
Prompt 6: Interactive Terminal for Identity "일반적인 자기소개 대신, 인터랙티브한 'System Terminal' 섹션을 구현함.
[지침]
- UI 구현: VS Code 스타일의 터미널 레이아웃과 상단 타이핑 애니메이션(whoami, fetch skills 등) 추가.
- 콘텐츠: 학력(홍익대 소프트웨어융합), 가치관, 그리고 '데이터 무결성 우선' 로그 메시지 출력.
- 디테일: 명령어 끝에 깜빡이는 커서(_)와 작업 성공 시 초록색 [SUCCESS] 로그 출력 효과 구현."
Step 7. 백엔드 설계 역량 노출 (API Specification)
프론트엔드 포트폴리오에서 보기 힘든 'API 명세서'를 노출하여 풀스택 엔지니어로서의 깊이를 보여줍니다.
Prompt 7: API Spec Preview for Full-Stack Depth "백엔드 설계 역량을 보여주기 위해 현대적인 'API Specification' 섹션을 설계함.
[지침]
- UI 구성: Swagger UI를 현대적으로 재해석한 API 명세 뷰어 구현.
- 데이터: GET /api/v1/projects 등의 엔드포인트와 이에 따른 JSON 응답 예시를 코드 하이라이팅으로 노출.
- 태그 전략: 각 API 옆에 'JPA Optimized', 'Index Tuned' 태그를 붙여 백엔드 지식을 시각적으로 강조."
💡 AI 협업 포인트: "Why"를 설명하라
Copilot에게 코드를 짤 때 단순히 "만들어줘"라고 하기보다, **"나는 데이터의 무결성을 중요하게 생각하니까, 이 부분을 강조할 수 있는 UI를 짜줘"**라고 의도를 설명해 보세요. AI는 단순한 코드 복사기가 아니라, 여러분의 철학을 코드로 번역해 주는 도구가 됩니다.
'Project' 카테고리의 다른 글
| [GitHub Pages] 리액트 사이트 GitHub Pages 배포, 404 에러 해결까지 완벽 가이드 (0) | 2026.01.19 |
|---|---|
| [GitHub Pages] 커스텀 도메인 연결 및 www 설정 완벽 가이드 (0) | 2026.01.19 |
| [프롬프트] GitHub Copilot과 함께하는 데이터 중심 포트폴리오 설계: Vite + Tailwind v4 구축기 (0) | 2026.01.14 |
| [프로젝트] React 를 이용한 프로젝트 만들기 (4) | 2025.08.18 |
| [프로젝트] Figma - 배달앱 만들기 (0) | 2025.07.29 |