Antigravity AI와 함께 내 포트폴리오 만들기

발행: 4일 전 (2026년 1월 16일 오전 06:25 GMT+9)

9 min read

Source: Dev.to

위의 링크에 포함된 전체 텍스트를 제공해 주시면, 해당 내용을 한국어로 번역해 드리겠습니다. (코드 블록, URL 및 마크다운 형식은 그대로 유지됩니다.)

The Sequence

아이디어
접근 방식 / 전략
AI 선택
프런트‑엔드 앱을 위한 핵심 개념 및 선택
경험 / 여정
AI 워크플로우
결과
최종 생각

아이디어

WeAreDevelopers 이벤트(참석하고 싶은 이벤트)에 대한 의견을 검색하던 중, dev.to에서 흥미로운 게시물을 발견했습니다. 해당 게시물에는 AI를 활용한 프론트엔드 챌린지 를 홍보하는 팝업이 포함되어 있었습니다.

저는 이미 포트폴리오를 만들고 AI에 대해 더 배우고 싶었기 때문에, 이것은 일석이조의 완벽한 기회처럼 느껴졌습니다.

접근법

제 전략은 **“실천을 통해 배우기”**였습니다.
AI에 대해 여러 시간을 읽는 대신, 제가 선택한 AI가 얼마나 직관적인지, 그리고 과도하게 기술적인 프롬프트를 작성하지 않고도 얼마나 멀리 갈 수 있는지를 확인하고 싶었습니다.

AI 선택

이 챌린지는 구글이 제공하는 세 가지 AI를 제시했으며, 저는 Antigravity를 선택했습니다—주로 이름이 마음에 들어서였어요 (판단은 하지 말아 주세요, 맞죠?).

**Antigravity 웹사이트**의 소개 영상을 본 후, 그 워크플로우가 다음과 같이 나뉘어 있다는 것을 알게 되었습니다:

구현 계획
전제 조건
제안된 아키텍처
구현 단계
검증 계획

핵심 개념 및 프론트‑엔드 앱 선택

프론트엔드 스택

Next.js – 더 익숙해지고 싶어서 의도적으로 선택했습니다.
TypeScript

핵심 개념

쉽게 변경 가능
관심사의 분리
MVC 아키텍처
매력적인 UI
기능 기반 레이아웃 (Atomic Design)

경험 / 여정

아래는 제가 다양한 AI 접근 방식에 대해 생각하게 만든 몇 가지 순간들입니다.

Node 버전 다운그레이드

Next.js가 제가 설치한 것보다 최신 Node 버전을 요구했습니다. 업그레이드를 제안하는 대신, AI는 Next.js를 다운그레이드하려고 시도했습니다(제가 중단함).
왜 Node 업그레이드를 제안하지 않았을까?

웹 페이지 접근

AI에게 제 GitHub와 LinkedIn 공개 링크를 제공했습니다. AI는 브라우저를 열어 정보를 가져와 생성된 코드에 활용했습니다. 그 과정을 보는 것이 인상적이었습니다.

모든 엔티티를 하나의 파일에

AI의 첫 번째 솔루션은 모든 엔티티를 하나의 파일에 배치했습니다. 이 “저렴하고” “컴팩트한” 접근 방식은 모델에게 흔하지만, 규모가 큰 코드베이스에는 적합하지 않습니다. 기억하세요: AI는 전체 레포를 즉시 읽을 수 있지만, 우리는 그렇지 못합니다.

Atomic Design… 문자 그대로

전제 조건에 Atomic Design을 언급했지만, AI는 용어를 그대로 반영한 폴더 구조를 만들었습니다:

저는 문자 그대로의 폴더 이름 없이 Atomic Design의 장점을 원했으며, 보다 유기적인 구분이 더 좋다고 느꼈습니다.

컴포넌트 위임

제가 아직 Next.js를 배우는 중이라 컴포넌트를 어떻게 조직해야 할지 확신이 없었습니다. 여러 차례 반복 후, AI는 컴포넌트‑위임 패턴을 제안했으며, 이는 제가 정말 마음에 들어한 깔끔한 해결책이었습니다.

AI 워크플로우

Antigravity의 워크플로우는 두세 단계로 구성되며, 각 단계는 내 승인이 필요한 마크다운 파일로 표시됩니다.

제안 – AI가 아이디어, 옵션 및 각 선택에 대한 장단점 목록이 포함된 마크다운 파일을 제시합니다.
구현 계획 – 코드를 작성하기 전에 AI가 상세한 계획을 보여줍니다: 수행할 단계와 각 행동의 목표.
이러한 가시성을 통해 AI가 무엇을 생각하고 있는지에 대한 확신을 얻을 수 있었습니다.
실행 과정 – 내가 계획을 승인한 후 AI가 이를 실행하고, 나는 구현된 코드와 최종 결과를 검토할 수 있습니다.

전반적으로, 이 단계적 접근 방식은 “블랙 박스” 생성 후 마지막에 한 번 검토하는 방식보다 훨씬 안전하게 느껴집니다.

결과

아래는 완성된 애플리케이션의 스크린샷입니다:

아키텍처 개요

app/ – 페이지를 포함합니다 (Next.js 라우팅).
components/ – 기능별로 구성된 UI 조각들 (feature‑based/Atomic Design 접근 방식).
models/ – 도메인 엔티티 (예: Resume, Experience).
services/ 및 data/ – 모의 JSON 파일에 이력서 데이터가 저장됩니다:

Resume
 ├─ Basic info
 ├─ Experiences
 ├─ Education
 └─ Extras

현재는 데이터를 로컬에 두었지만, 구조가 API로 교체하고 프로필을 자동으로 생성하는 작업을 매우 쉽게 만들어 줍니다.

최종 생각

결국, 이 경험은 재미있고 교육적이었습니다. 나는 다음에 대해 많이 배웠습니다:

Antigravity AI의 구조화된 워크플로우
Next.js (TypeScript 포함)
Google Cloud Run에 배포

우리가 도전에 자신을 노출할수록, 마음과 기술을 더 갈고닦게 됩니다. Antigravity가 나를 놀라게 했습니다; 구현‑계획 단계가 특히 멋진 아이디어였습니다.

Google Cloud를 사용해 도메인을 구입하고 포트폴리오에 연결했는데—꽤 쉬웠습니다. 또한 Rust로 작성된 빠른 컴파일러인 TurboPack을 조금 살펴보았습니다.

비록 도전에 많은 시간을 투자하지는 않았지만, 재미있게 즐겼고 오랫동안 할 일 목록에 있던 포트폴리오를 마침내 만들었습니다.

아이디어를 적어두기에 강력히 추천하는 방해 없는 텍스트 편집기도 찾았습니다.

My repo: https://github.com/raffaeleloi/portfolio-antigravity