재미를 위한 포트폴리오!

Source: Dev.to

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

저는 تقن - Ta9in의 설립자입니다. 요즘은 이 이름으로 활동하고 있습니다. 10년 동안 개발자로 일한 뒤, 저와 우리 고객에게 도움이 되는 실전 업무와 견습 과정을 통해 차세대 문제 해결자를 양성하는 회사를 만들기 위해 Ta9in을 시작했습니다.

Portfolio

앱은 여기에서 확인하실 수 있어요. 더 나은 경험을 제공합니다.

How I Built It

요즘 제가 가장 많이 사용하는 편집기는 Antigravity였습니다. 프로 구독을 해도 금방 한계에 부딪혀서 처음 구상했던 RPG 스타일을 포기했습니다.

제한 없이 AI 어시스턴트를 사용하려면 보통 AI Studio에서 작업합니다. 이 프로젝트도 AI Studio로 만들었습니다. Pinterest에서 게임 UI 영감을 찾아보고 마음에 드는 디자인을 골라 AI Studio에 다음과 같이 프롬프트를 입력했습니다:

“Create a game‑like pixel art card interface for a portfolio showcase. It’s about a developer/artist going on a journey from studying in college to …”

Gemini는 문구를 잘 이해해 즉시 게임 테마 UI를 제공했습니다. 저는 스타일을 다듬고 데이터를 추가하기만 하면 되었죠. 전체 과정은 데이터 업데이트, 버그 수정, 스타일 조정, AI 제안 개선 등을 포함한 22개의 프롬프트로 이루어졌습니다.

가장 인상 깊었던 점은 Gemini가 제 설명을 게임 테마에 맞게 재해석해 준 것이었습니다.

What I’m Most Proud Of

주된 과제는 게임 같은 스타일을 구현하는 것이었습니다. 수작업으로 하면 일주일이 걸릴 작업을 AI 덕분에 하루 만에 여러 스타일을 시험해 보고 목표에 맞는 것을 선택할 수 있었습니다. 가장 큰 결정은 AI와 함께 아이디어를 구상하고 빠르게 시제품을 만드는 것이었으며, 이제는 새로운 직원들에게 AI의 힘을 받아들이고 워크플로에 통합하라는 것을 가르칩니다.

웹사이트 구조는 의도적으로 단순합니다: 초기 웹처럼 정적 페이지 하나에 React가 인터랙션을 담당합니다. 재미로 “Nano Banana Generation” 이스터 에그를 살짝 넣었습니다. 전반적으로 개인 웹사이트는 단순하지만 기능적이어야 한다는 제 생각을 반영합니다. 참고용으로 제 단순 개인 사이트를 보세요: mohessaid.com.

AI Studio를 사용했기 때문에 코드 기본 설정은 React/TypeScript입니다.

Ideas for Future Versions

• 오래된 게임 콘솔 장면을 만들고, 테이블 위에 게임 카드들을 배치하기.
• 사용자가 카드를 슬롯에 끌어다 놓고 콘솔 전원을 켜면 확대된 게임 화면(별도 페이지)으로 전환되도록 하기.
• 각 카드는 제 포트폴리오의 다른 버전을 보여주며, 사용자를 웹사이트 역사의 여정으로 안내하기.

시간이 된다면 이 컨셉을 구현해 볼 계획입니다.