오피스 포트폴리오

Source: Dev.to

개요

이 제출물은 Google AI가 주관한 새해, 새로운 당신 포트폴리오 챌린지를 위한 것입니다. 목표는 방문자가 다양한 “방”을 탐험하며 나의 배경, 프로젝트, 취미, 연락처 정보를 알아볼 수 있는 인터랙티브한 사무실 테마 포트폴리오를 만드는 것이었습니다.

프로젝트 링크

인터랙티브 사무실 포트폴리오 방문하기
팁: 좌측 상단을 눌러 해상도를 높일 수 있습니다.

전체 제작 과정

컨셉 & 기획

• 초기 아이디어는 사용자가 가상 사무실을 투어할 수 있는 게임 스타일 포트폴리오를 만드는 것이었습니다.
• Gemini 3 Pro에 피드백과 제안을 요청했습니다. Gemini이 권장한 내용:
  • 저사양 하드웨어용 저해상도 모드.
  • 터치 디바이스용 모바일 조이스틱.
  • 구체적인 기술 스택(세부 내용은 생략).

Gemini에 사용한 프롬프트

I want to create a portfolio website for a hackathon that visualizes the best portfolio as an office‑like game environment. The visitor should be able to:
- Walk around using arrow keys or on‑screen controls.
- Interact with characters:
  * Manager in a cabin → pop‑up with project details.
  * Co‑worker near the coffee machine → pop‑up with hobbies.
  * HR in the hallway → pop‑up with personal details.
- Approach a notice board at spawn → pop‑up with resume (downloadable).
- Approach a telephone → pop‑up with contact details (clickable links for GitHub, LinkedIn, email).
Provide a feasible implementation plan and suggestions for smooth gameplay.

Google AI Studio에서 개발

1. 첫 번째 버전은 모든 캐릭터가 배치된 기본 사무실 레이아웃을 생성했습니다.
2. 위치를 수동으로 다듬었습니다.
3. 반복적인 조정을 통해 다음을 개선했습니다:
   • 캐빈 제작(반복적인 오류로 최종 빌드에서는 제외).
   • 모바일 화면 적용.
   • 스폰 포인트 배치(초기에는 소파 중앙에 있었으며, 이후 [0,2,4] → [0,2,10]와 같은 좌표로 공지판 근처로 수정).

도구 & 워크플로우

• 스크린샷 첨부 기능이 시각적 피드백(“이걸 저걸로 바꿔”)에 큰 도움이 되었습니다.
• 대부분의 컴포넌트는 한두 번의 반복만으로 완성되었습니다.
• 총 개발 시간: 약 2일, 실제 코딩 시간은 약 6시간.

직면한 도전 과제

향후 개선 사항

• 전체 작업 맥락: 과거 프로젝트와 역할에 대한 상세 설명 추가.
• 음성 에이전트: 캐릭터와의 음성 상호작용을 활성화해 몰입감 향상.
• 모바일 컨트롤 강화: 터치 디바이스에서 부드러운 탐색을 위한 조이스틱 구현.