본문으로 바로가기

Step 5. 데이터로 증명하는 성능 (Engineering Metrics)

성능 최적화 경험을 단순 텍스트가 아닌 '지표'로 시각화하여 신뢰도를 극대화합니다.

Prompt 5: Visualization of Optimization Results "나의 최적화 성과를 시각적으로 증명할 수 있는 'Engineering Metrics' 섹션을 구현함.

[지침]

  1. 시각화: recharts 혹은 CSS를 활용해 MySQL 인덱스 적용 전/후 응답 속도(0.5s → 0.1s) 비교 차트 생성.
  2. 지표 대시보드: Lighthouse 점수, API 성공률, 테스트 커버리지 등의 핵심 지표를 담은 카드 배치.
  3. 디자인: 테마 컬러(에메랄드)를 활용하고 유리창 효과(Glassmorphism)를 적용해 고급스러운 느낌 부여."

Step 6. 개발자 아이덴티티를 담은 인터랙션 (System Terminal)

뻔한 '자기소개' 섹션을 터미널 인터페이스로 교체하여 공학적 감성과 재미를 동시에 잡습니다.

Prompt 6: Interactive Terminal for Identity "일반적인 자기소개 대신, 인터랙티브한 'System Terminal' 섹션을 구현함.

[지침]

  1. UI 구현: VS Code 스타일의 터미널 레이아웃과 상단 타이핑 애니메이션(whoami, fetch skills 등) 추가.
  2. 콘텐츠: 학력(홍익대 소프트웨어융합), 가치관, 그리고 '데이터 무결성 우선' 로그 메시지 출력.
  3. 디테일: 명령어 끝에 깜빡이는 커서(_)와 작업 성공 시 초록색 [SUCCESS] 로그 출력 효과 구현."

Step 7. 백엔드 설계 역량 노출 (API Specification)

프론트엔드 포트폴리오에서 보기 힘든 'API 명세서'를 노출하여 풀스택 엔지니어로서의 깊이를 보여줍니다.

Prompt 7: API Spec Preview for Full-Stack Depth "백엔드 설계 역량을 보여주기 위해 현대적인 'API Specification' 섹션을 설계함.

[지침]

  1. UI 구성: Swagger UI를 현대적으로 재해석한 API 명세 뷰어 구현.
  2. 데이터: GET /api/v1/projects 등의 엔드포인트와 이에 따른 JSON 응답 예시를 코드 하이라이팅으로 노출.
  3. 태그 전략: 각 API 옆에 'JPA Optimized', 'Index Tuned' 태그를 붙여 백엔드 지식을 시각적으로 강조."

💡 AI 협업 포인트: "Why"를 설명하라

Copilot에게 코드를 짤 때 단순히 "만들어줘"라고 하기보다, **"나는 데이터의 무결성을 중요하게 생각하니까, 이 부분을 강조할 수 있는 UI를 짜줘"**라고 의도를 설명해 보세요. AI는 단순한 코드 복사기가 아니라, 여러분의 철학을 코드로 번역해 주는 도구가 됩니다.