내가 Antigravity에서 Claude Opus 4.5로 8비트 포트폴리오를 만든 방법

I’m happy to translate the article for you, but I’ll need the full text of the post (the paragraphs, headings, etc.) in order to do so. Could you please paste the article’s content here? I’ll keep the source line unchanged and translate everything else into Korean while preserving the original formatting.

비전: 사이버펑크와 향수의 만남

오래전부터 구식 비디오 게임의 미학과 네온으로 물든 사이버펑크 소설의 시각적 요소에 대한 매료는 자연스럽게 나의 비전을 이끌었습니다. 포트폴리오를 재구성하면서 나는 마치 미래형 아케이드에 들어선 듯한 디지털 경험을 만들고자 했습니다—픽셀화된 글꼴, 빛나는 터미널, 그리고 향수를 불러일으키는 스캔라인이 가득한 공간이죠.

도전은 이것을 단순한 장식이 아니라는 것을 증명하는 것이었습니다. 포트폴리오는 우선 기능적이어야 합니다: 실제 작업을 보여주고, 접근성이 보장되며, 잠재적인 협업자와 고용주와 연결되는 데 실질적인 도움이 되어야 합니다. 8비트 미학은 경험을 향상시켜야 하며, 방해가 되어서는 안 됩니다.

디자인부터 시작, 코드가 아니라

코드를 한 줄도 작성하기 전에 Figma에서 경험을 설계하는 데 시간을 투자했습니다. 코딩에 바로 뛰어들면 나중에 끝없는 리팩터링을 하게 된다는 믿음이 강합니다. 시각적인 레퍼런스를 가지고 있으면 구현 압박 없이 디자인 결정을 내릴 수 있었습니다.

디자인 과정에서 색상 팔레트를 확정했습니다—다크 배경 위에 전기 시안, 네온 그린, 석양 오렌지, 그리고 심우주 퍼플을 사용했습니다. 섹션을 다음과 같이 구상했습니다:

• Hero – 픽셀화된 나의 이름
• About – 스토리 중심의 바이오
• Skills – 애니메이션 진행 바
• Projects – 터미널 창 형태로 표시
• Contact – 커맨드 라인 스타일 폼

Claude를 소개합니다: 나의 AI 페어 프로그래머

여기서 상황이 흥미로워졌습니다. 저는 AI 코딩 어시스턴트를 실험해 왔지만, Claude Opus 4.5를 Antigravity라는 에이전트형 코딩 플랫폼을 통해 사용한 경험은 이전에 시도한 것과는 달랐습니다.

AI를 화려한 자동완성으로만 여기지 않고 진정한 협업 파트너로 접근했습니다. 제가 만들고자 하는 것을 설명하고 디자인 파일을 공유했으며, Claude가 전체 React 프로젝트 구조를 골격화하는 것을 지켜보았습니다. Claude는 컴포넌트 아키텍처를 제안하고, GSAP 애니메이션 설정을 도와주었으며, 제가 놓쳤을 접근성 문제까지 잡아냈습니다.

마법은 단순히 코드 생성에만 있던 것이 아니라, 앞뒤로 오가는 대화에 있었습니다. 무언가가 이상해 보일 때, 저는 문제를 평범한 영어로 설명할 수 있었습니다. 태그라인에 타이핑 애니메이션 같은 기능을 추가하고 싶을 때, Claude는 단순히 코드를 작성하는 것이 아니라 접근 방식을 설명하고 제가 생각하지 못한 대안을 제시했습니다.

애니메이션으로 살아 숨 쉬게 만들기

정적인 포트폴리오는 특히 레트로 게임 분위기를 추구할 때 생기가 없습니다. 저는 GSAP와 ScrollTrigger를 활용해 즐거운 순간들을 만들었습니다:

• 드라마틱한 공개 효과가 있는 히어로 섹션
• 스크롤을 지나갈 때 채워지는 스킬 바
• 순차적으로 떠오르는 프로젝트 카드

제가 가장 좋아하는 요소 중 하나는 취미 섹션에 있는 홀로그램 프로젝터입니다. 취미 카테고리에 마우스를 올리면 CRT 모니터가 깜빡이며 해당 관심사에 대한 상세 정보가 나타납니다. 이런 작은 인터랙션이 포트폴리오를 정적인 이력서에서 실제로 탐험하고 싶어지는 경험으로 바꿔줍니다.

기술 스택

저는 의도적으로 스택을 단순하게 유지했습니다. 멋진 프레임워크도 좋지만, 개인 포트폴리오에서는 오랫동안 유지·업데이트하기 쉬운 기술을 원했습니다. React와 CSS는 사라지지 않을 기술이니까요.

프로세스에서 얻은 교훈

1. AI‑지원 개발은 협업으로 다룰 때 빛을 발한다, 위임이 아니라. 나는 여전히 모든 디자인 결정을 내리고 직접 많은 코드를 작성했지만, 아이디어를 주고받을 수 있는 지능형 어시스턴트가 있어 전체 과정이 가속화되었다.
2. 제약은 창의성을 낳는다. 8‑비트 테마는 제한적일 수 있었지만 실제로는 결정을 더 쉽게 만들었다. 모든 컴포넌트는 “이게 레트로‑퓨처리즘 느낌인가?” 테스트를 통과해야 했으며, 기능 과잉을 방지하고 디자인을 일관되게 유지했다.
3. 접근성은 여전히 중요하다, 심지어 기발한 미학에서도. 포트폴리오는 스크린 리더와 호환되고, 감소된 움직임 선호도를 존중하며, 네온이 강한 디자인임에도 적절한 색 대비를 유지한다.

이 포트폴리오를 구축하는 것은 향수, 최신 툴링, AI 파트너십이 어우러진 보람 있는 경험이었다—개발의 미래가 레트로 영감과 최첨단을 동시에 가질 수 있음을 증명한다.

# Write all the neon. Good design is inclusive design.

다음 단계

포트폴리오는 결코 완전히 끝나는 것이 없습니다—당신과 함께 진화합니다. 저는 이미 더 깊은 기술 글쓰기를 위한 블로그 섹션을 추가하고, 라이브 프로젝트 데모를 통합하며, 피드백을 바탕으로 애니메이션을 지속적으로 다듬을 계획입니다.

자신만의 포트폴리오를 만들 생각이라면, 제 조언은 간단합니다: 즐기면서 만들라는 것이죠. 이 웹사이트는 여러분이 완전히 자신이 될 수 있는 유일한 공간입니다. 독특하게, 개인적으로, 자랑스러워 할 수 있게 만들세요. 그리고 AI 어시스턴트가 준비돼 있다면, 주저하지 말고 활용하세요. 개발의 미래는 협업입니다—협업자가 대형 언어 모델일지라도 말이죠.

제 개인 포트폴리오 https://portfolio.jeffdev.studio/ 를 확인하셔서 저에 대한 더 많은 정보와 블로그 포스트를 보세요.