나는 수년간 내 포트폴리오를 미뤘다. AI가 2시간 만에 만들었다.

Source: Dev.to

Overview

신발 장인의 역설: 신발 장인은 마을 사람들을 위해 최고의 신발을 만들지만, 자신의 아이들은 맨발이다.

저는 10년 넘게 소프트웨어 엔지니어로 일하며 기업 고객을 위한 고성능 시스템을 설계하고 엔지니어링 팀을 이끌어 왔습니다. 그런데도 10년 동안 포트폴리오 웹사이트가 없었습니다. 시작할 때마다 스택을 과도하게 설계하거나 CSS에 지루함을 느끼거나 긴 업무 주 후에 “대역폭”이 부족해지는 등 잡다한 일에 빠져버렸습니다. 전형적인 완벽주의 함정에 빠졌던 것이죠.

오늘 드디어 그 악순환을 끊었습니다. Claude(AI)를 코드 생성기가 아니라 주니어 개발자로 대하고, 프롬프트 엔지니어링과 아키텍처 설계에만 집중했습니다. 결과는? 빈 화면에서 배포된 인터랙티브 “Dual‑World” 포트폴리오까지 2시간 안에 완성했습니다.

The Biggest Mistake Developers Make with AI

많은 개발자가 범하는 실수는 코드 조각을 요청하는 것입니다(예: “네비게이션 바용 React 컴포넌트를 작성해줘”). 완전한 제품을 만들려면 시니어 엔지니어처럼 시스템을 정의해야 합니다. 문법이 아니라 구조를 생각해야 합니다.

Prompt 1 – Project Setup & Architecture

Goal: Modern, performance‑first tools with no legacy bloat.

Next.js 16+ (App Router)
TypeScript (Strict Mode)
Tailwind CSS v4
Framer Motion (for complex animations)
Biome (for linting)

Action: Create a clean, modular folder structure for a single‑page portfolio application. Ensure the architecture supports a “feature‑sliced” design pattern.

Prompt 2 – Design Concept: “The Dual‑World Interface”

Design Concept: 'The Dual-World Interface'
Layout: Split‑screen desktop view.
- Left Side: Clean, minimalist typography. Timeline of experience and projects.
- Right Side: A 'Sticky Phone Simulator' (3D device frame).

Interaction (Crucial):
- Hero Section → Phone shows my App splash screen.
- Projects Section → Phone simulates an interactive app demo of that project.
- Contact Section → Phone shows a 'Messages' UI.

Vibe: Dark mode, cyan accents, glassmorphism. Make it look premium.

Prompt 3 – Mobile Responsiveness

On mobile devices (phones/tablets), hide the 3D phone simulator entirely (it takes too much space).
Collapse the layout to a clean, single‑column vertical scroll.
Add a hamburger menu with a smooth slide‑out drawer for navigation.

Prompt 4 – Separate Content from Code

src/config/content.ts
- Profile Bio & Titles
- Social Links (GitHub, LinkedIn, StackOverflow)
- Experience Timeline Data
- Projects Data (including links to GitHub/Live Demos)
- SEO Metadata

하드코딩된 텍스트는 기술 부채가 됩니다; 관심사를 분리하면 React 컴포넌트를 건드리지 않고도 나중에 사이트를 업데이트할 수 있습니다.

Prompt 5 – Theme, Navigation, & Animations

Theme: Add a light/dark mode toggle (floating action button).
Smooth Scroll: Ensure clicking nav links scrolls smoothly to the section.
Active State: Nav links should highlight as I scroll past their sections.
Animations: Use Framer Motion to stagger the entry of list items.

Results

• Total time: ~2 hours
• Lines of UI code written manually: 0
• Lines of config edited: ~50 (just pasting my resume)
• Cost: $0 (deployed on Vercel)

저는 애니메이션 타이밍과 카피를 다듬는 데 시간을 썼으며, z‑index 문제를 디버깅하거나 CSS Grid 정렬에 싸우는 일은 없었습니다.

“완벽한 애니메이션 라이브러리를 배울 시간이 있을 때 포트폴리오를 만들겠다”는 생각이 든다면 멈추세요. 모든 “ 를 직접 작성하려는 자부심은 배포를 가로막는 장벽이 될 수 있습니다. 코드를 직접 작성했든 LLM이 작성했든, 여러분의 커리어 이야기는 전할 가치가 있습니다.

Resources

• Live Demo:
• GitHub Repo: (feel free to fork)
• LinkedIn:

Claude를 사용한 AI 전용 지원으로 완전히 구축되었습니다.