단순 전시를 넘어: 접근성 높은 AI 기반 포트폴리오

Source: Dev.to

소개

안녕하세요! 저는 화려함이 접근성 부족을 의미하지 않아야 한다고 믿는 풀스택 개발자 Safvan입니다. 이번 챌린지를 위해 아이디어를 탐색하던 중, 놀라운 3D 세계와 게임 같은 포트폴리오들을 많이 보았습니다. 멋지긴 하지만 저는 다른 접근 방식을 시도하고 싶었습니다.

프리미엄 미학과 엄격한 웹 표준을 결합한 포트폴리오를 만들었습니다—Lighthouse 점수 100/100, 완전한 키보드 접근성, 그리고 매끄러운 모바일‑퍼스트 경험을 목표로 했습니다. 또한 Google Gemini AI를 통합해 방문자가 자연스럽게 제 작업을 탐색할 수 있도록 도와주는 진정한 어시스턴트를 구현했습니다.

포트폴리오

시도해 보기:

소스 코드 보기:

구현 방법

현대 웹 생태계의 전체 힘을 Google의 Antigravity 환경을 통해 활용했습니다. Antigravity는 저의 기술 공동 창업자 역할을 하며, Gemini 3 Pro와 Claude Opus 4.5 같은 고급 모델을 사용해 최적의 기술 스택 선택부터 프로덕션‑레디 Cloud Run 배포 스크립트 작성까지 전체 아키텍처 과정을 담당했습니다.

기술 스택

• 핵심: Astro – 정적 콘텐츠 + API용 SSR
• 스타일링: Tailwind CSS v4 – 유틸리티‑퍼스트, 프리미엄 글래스모피즘 디자인
• 배포: Google Cloud Run (Docker 컨테이너)
• AI: Node.js 어댑터를 통한 Google Gemini API

AI 구현

일반적인 챗봇을 원하지 않았습니다. 맥락 인식 AI 가이드를 직접 만들었습니다.

Intent Engine

AI는 사용자 질의(예: “React 작업을 보여줘”)를 분석하고, 해당 섹션으로 결정적으로 이동시켜 특정 기술 스택을 강조합니다. 말만 하는 것이 아니라 실제로 행동합니다.

Voice Interaction

Web Speech API를 활용한 완전한 음성 입력을 구현해 손을 쓰지 않고도 탐색할 수 있습니다. (Chrome, Edge, Safari 지원)

Safety

프롬프트 엔지니어링을 통해 AI가 제가 실제로 가지고 있지 않은 경험을 떠올리지 않도록 보장합니다. 포트폴리오에 제공된 구조화된 데이터에만 엄격히 제한됩니다.

프롬프트가 궁금하신가요? Notion 문서에서 확인하세요: Notion에서 프롬프트 보기

가장 자랑스러운 점

1. 접근성 & 표준 (‘보이지 않는’ 작업)

• 시맨틱 HTML: 올바른 헤딩 계층 구조와 랜드마크 적용.
• 키보드 내비게이션: AI 어시스턴트를 포함한 전체 사이트가 완전한 포커스 관리 가능.
• Reduced Motion: prefers-reduced-motion 미디어 쿼리를 통해 애니메이션이 사용자 선호를 존중.
• SEO: 사이트맵, OpenGraph 태그, 구조화된 데이터 최적화.

2. “새해, 새로운 나” AI 경험

2026년 최고의 포트폴리오는 정적인 페이지가 아니라 인터랙티브해야 합니다. Gemini 통합을 통해 포트폴리오가 대화형으로 변합니다:

맥락 인식 Q&A

사용자: “Vue.js 경험이 있나요?”
포트폴리오: “네, Muhammed Safvan은 Vue.js 경험이 있습니다. 현재 Armino Technologies에서 Vue.js와 TailwindCSS를 사용해 복잡한 UI 컴포넌트를 구축하고 있습니다.”

스마트 내비게이션 & 액션

사용자: “그에게 어떻게 연락할 수 있나요?”
포트폴리오:

📧 safvanmanikulath@gmail.com
📍 Kozhikode, India
✅ 작업 가능

2초 안에 연락처 페이지로 이동합니다... [취소]

이 프로젝트는 개발자로서의 “새로운 나”를 보여줍니다: 모두를 위해 작동하는 아름다운 것을 만들고, 차세대 AI 도구로 구동되는 포트폴리오.