[프롬프트] GitHub Copilot과 함께하는 데이터 중심 포트폴리오 설계: Vite + Tailwind v4 구축기

단순히 "예쁜" 포트폴리오가 아니라, 데이터의 흐름을 이해하고 시스템의 무결성을 고민하는 엔지니어로서의 정체성을 보여주고 싶었습니다. 이를 위해 GitHub Copilot을 단순한 코드 생성기가 아닌 '아키텍트 파트너'로 활용하여 프로젝트를 설계했습니다. 제가 사용한 단계별 프롬프트와 전략을 공유합니다.

---

🛠 Tech Stack

• Frontend: Vite, React, TypeScript
• Styling: Tailwind CSS v4 (Alpha/Latest), Framer Motion
• Focus: Data-Centric Design, Scalability, System Architecture

---

🚀 Step-by-Step Prompt Roadmap

Step 1. 아키텍처 및 데이터 중심 디자인 시스템

기초 설정 단계부터 확장성을 고려한 폴더 구조와 엔지니어링 감성을 담은 테마를 정의합니다.

Prompt 1: Project Architecture & Theme "너는 세계 최고의 프론트엔드 아키텍트이자 UI/UX 디자이너야. 프로젝트 이름은 **'sjdev-portfolio'**이며, Vite + React + TypeScript + Tailwind v4 환경을 기반으로 함.

[지침]

1. 폴더 구조 설계: components, hooks, types, constants, features를 포함한 대규모 확장 가능 구조로 초기화.
2. Tailwind v4 테마: index.css의 @theme을 활용해 깊은 네이비(#020617)와 에메랄드/블루 포인트의 '엔지니어링 다크 모드' 적용.
3. 메인 엔트리: 전체 레이아웃과 데이터 흐름을 제어할 수 있는 App.tsx의 인터페이스 구성."

Step 2. 신뢰감을 주는 Hero & Navbar (System Identity)

첫인상에서 '화면'이 아닌 '시스템'을 만드는 사람임을 명시합니다.

Prompt 2: Hero Section with Backend Context "사용자 경험(UX)을 넘어 데이터의 흐름과 시스템의 안정성을 설계하는 개발자'라는 메시지를 담은 Navbar와 Hero 섹션을 구현함.

[지침]

1. 핵심 메시지: '박성진: System & Data Architect' 강조.
2. 기술 스택 시각화: 'Core Architecture: Spring Boot / MySQL / React'와 함께 'RESTful API 설계 및 Swagger 기반 문서화 가능' 텍스트를 세련된 배지 형태로 삽입.
3. 인터랙션: framer-motion을 활용해 데이터 스트림을 형상화한 은은한 배경 애니메이션 추가."

Step 3. 기술적 성과 중심의 Projects (Bento Grid)

단순 나열이 아닌, 성능 최적화와 DB 설계 역량을 증명하는 공간입니다.

Prompt 3: Project Section with Performance Metrics "나의 기술적 깊이를 증명할 수 있는 Projects섹션을 Bento Grid 스타일로 구축함.

[지침]

1. 성능 수치 명시: 각 카드에 'MySQL 인덱스 최적화(0.5s → 0.1s)', 'JPA 기반 확장성 아키텍처' 등 실측 성과 필드 포함.
2. 데이터 설계 시각화: 'Database Schema' 캡션과 함께 ERD가 들어갈 정갈한 플레이스홀더 영역 생성.
3. 솔루션 오버레이: 호버 시 기술적 난관과 해결 과정을 요약해서 보여주는 인터랙션 구현."

Step 4. 도메인별 역량 시각화 (Skills & Contact)

협업하기 좋은 풀스택 엔지니어의 이미지를 굳힙니다.

Prompt 4: Skills Grouping & Optimization "도메인별 전문성을 강조하는 Skills와 Contact 섹션을 완성함.

[지침]

1. Backend: Spring Boot, Java, MySQL (JPA 및 스키마 설계 역량 포함).
2. Frontend: React, TypeScript, Tailwind v4.
3. Tools: Swagger, Postman, Git (API 명세 및 협업 중심).
4. 최종 최적화: 모든 컴포넌트에 모바일 퍼스트 반응형 디자인과 스무스 스크롤 적용."

---

💡 Copilot 활용 팁

1. Context가 전부다: 관련 파일(예: index.css, types.ts)을 열어둔 상태에서 프롬프트를 입력하면 훨씬 정확한 코드가 생성됩니다.
2. 명령형 동사 사용: "보여줘" 대신 "설계해", "구현해"와 같은 실행형 동사를 사용하여 Copilot이 즉시 코드를 작성하게 유도하세요.
3. 단계별 빌드: 한 번에 전체 사이트를 만들기보다, 위 단계처럼 섹션별로 끊어서 진행하는 것이 코드 퀄리티가 훨씬 높습니다.