휴먼-머신 인터페이스: 지능형 엔지니어링 포트폴리오

Source: Dev.to

새해, 새로운 나 포트폴리오 챌린지 제출

Google AI 제공

나에 대하여

저는 Salwa Khattami이며, 코드를 단순한 명령이 아니라 살아있는 아키텍처로 보는 AI 엔지니어이자 시스템 아키텍트입니다. 제 작업은 엄격한 엔지니어링(수학, 물리, AI 파이프라인)과 몰입형 디지털 경험 사이의 간극을 메웁니다.

저는 RAG 파이프라인부터 컴퓨터 비전 모델까지 지능형 시스템 구축을 전문으로 하며, 포트폴리오에 그 “시스템 수준” 깊이를 반영하고 싶었습니다. 저는 단순히 웹사이트를 만드는 것이 아니라 환경을 구축합니다.

포트폴리오

포트폴리오 링크:
https://portfolio-497550669510.us-central1.run.app/

제작 방법

이 포트폴리오는 **“전술 엔지니어링 환경”**으로 구축되었으며, 고급 기술 시스템의 헤드‑업 디스플레이(HUD)처럼 느껴지도록 설계되었습니다.

기술 스택

• 핵심: React 19, Vite
• 스타일링: Tailwind CSS (맞춤형 “Dark Onyx” 디자인 시스템)
• 3D & 모션: React Three Fiber (Drei), Framer Motion
• 아이콘: Lucide React

Google AI와 함께한 “페어 프로그래밍” 경험

저는 Google의 Advanced Agentic Coding AI(Gemini 모델)와 협업하여 전체 프로젝트를 만들었습니다. AI를 **“시니어 파트너”**로 대우함으로써 다음을 달성했습니다:

• 프로토타이핑 가속화: “시스템 아키텍처” 테마를 빠르게 반복하며 3D 콘셉트와 레이아웃 아이디어를 몇 분 안에 생성했습니다.
• 코드 품질 향상: 복잡한 Framer Motion 애니메이션(예: 무한 스크롤 프로젝트)과 Three.js 씬을 효율적으로 구현했습니다.
• 인프라 문제 해결: Docker 컨테이너 디버깅 및 Cloud Run용 Nginx 포트 설정을 AI가 DevOps 엔지니어 역할을 하며 수행했습니다.

단순히 “코드 생성”이 아니라 **디자인, 구조, “감각”**에 대한 대화였습니다. 그 결과는 AI 효율성으로 강화된, 저만의 독특한 느낌을 지닌 사이트가 되었습니다.

가장 자랑스러운 점

• “실시간 시스템” 미학: 포트폴리오는 정적이지 않습니다. “심장박동”(펄싱 상태 표시기), 연락용 “터미널”, 그리고 “커맨드 센터” 분위기를 가지고 있습니다.
• Git 그래프 타임라인: 일반적인 이력서 목록 대신, 교육, 인턴십, 해커톤 등을 Git 커밋 그래프로 시각화했습니다. 각 노드는 개인 저장소에 대한 “커밋”이며, 성장하면서 브랜치와 병합이 이루어집니다.
• 성능 및 완성도: 유리모피즘, 3D 구체와 같은 무거운 시각 효과에도 불구하고 사이트는 성능과 접근성을 유지합니다—개발 과정에서 크게 조율한 균형입니다.

Status: SYSTEM_ONLINE
Deployed via: Google Cloud Run