나는 'One-Click' AI 빌더들을 해고했다: React를 모른 채 Gemini로 React 포트폴리오를 만든 방법

발행: 3주 전 (2026년 1월 13일 오후 01:23 GMT+9)

6 분 소요

Source: Dev.to

The “One-Click” Trap

우리는 모두 그 흐름을 보아 왔습니다. LinkedIn 프로필을 PDF로 내보내고, Gamma 같은 도구나 일반적인 GPT 래퍼에 넣으면 뚝—웹사이트가 만들어집니다.

저도 해봤습니다. 작동했죠. 그런데 정말 싫었습니다.

기술적으로는 사이트가 기능을 했습니다. 하지만 미학적으로는? 포트폴리오인 척하는 기업용 파워포인트 슬라이드였습니다. 영혼이 없었죠. AI 엔지니어이자 창작자로서, 나는 일반 템플릿으로는 나를 표현할 수 없다는 것을 깨달았습니다. 그래서 삭제했습니다.

난 더 어려운 길을 택했습니다. Google AI Studio를 열고 최신 Gemini 모델을 가동한 뒤, 맞춤형 무언가를 만들기로 했습니다. 나는 특정한 분위기—뭔가 독특한 것을 원했습니다.

하지만 현실이 닥쳤습니다. 나는 완벽주의 함정에 빠졌습니다.

몇 주 동안 AI 미리보기 창에서 픽셀을 조정하느라 시간을 보냈습니다. 채팅 인터페이스에서는 멋져 보였지만, 코드를 VS Code에 복사해 GitHub에 푸시하려고 했을 때는 개발자들이 흔히 겪는 악몽을 마주했습니다:

“It works on the AI’s preview.” (하지만 다른 곳에서는 모두 충돌합니다).

대부분의 사람들은 여기서 포기하고 템플릿으로 돌아갔을 것입니다.

나는 포기하지 않았습니다. 새로운 규칙을 세웠습니다: Zero부터 다시 시작. 깨진 코드베이스를 전부 버렸습니다. 하지만 이번에는 AI와 함께 만들려면 코더가 아니라 아키텍트처럼 행동해야 한다는 것을 깨달았습니다.

나는 React나 HTML을 깊게 알지는 못합니다. 화이트보드에 복잡한 훅을 처음부터 쓰라고 하면 실패할 겁니다. 하지만 AI는 문법을 완벽히 알고 있습니다. 내 역할은 타이핑이 아니라 아키텍처를 설명하는 것입니다.

이전 프롬프트: “버튼을 파란색으로 만들어 주세요.”
새 프롬프트: “Tailwind CSS를 사용해 스타일링하고, hover 시 빛나도록 ‘variant’ prop을 받는 재사용 가능한 버튼 컴포넌트를 만들어 주세요.”

AI가 오류를 내보냈을 때, 나는 언어의 미묘한 차이를 알면서 고치지 않았습니다. 데이터 흐름을 이해하면서 고쳤습니다.

페이지가 크래시가 나면, 나는 세미콜론이 빠졌는지 찾지 않았습니다. 대신 논리를 살폈습니다:

나는 AI에게 자체 로직을 질문함으로써 디버깅했으며, 문서를 읽는 것이 아니라 AI의 사고 과정을 파악했습니다.

나는 며칠 동안 오류와 싸웠습니다. 구조화된 프레임워크를 활용해 프롬프트를 다듬었습니다. 그리고 오늘, 버전 1이 라이브되었습니다.

완벽한 코드는 아닙니다. 시니어 React 개발자가 보면 비효율적인 부분을 찾을 수도 있겠지만, 작동합니다. 배포도 됩니다. 그리고 가장 중요한 것은, 이것이 내 것이었다는 점입니다.

이것이 우리 많은 사람들에게 다가올 개발의 미래입니다. 소설을 쓰기 위해 사전을 외울 필요는 없습니다. 이야기가 있고, 그것을 쓰고자 하는 의지만 있으면 됩니다.

“언어를 모른다”는 이유로 무언가를 만들기를 망설이고 있다면, 멈추세요. 당신 손끝에 세계에서 가장 강력한 엔지니어가 있습니다. 그들을 이끄는 방법만 배우면 됩니다.