The Jungle Protocol: 내 전문적인 여정을 적응형 퀘스트로 바꾸다
Source: Dev.to
이것은 Google AI가 제시한 새해, 새로운 당신 포트폴리오 챌린지에 대한 제출물입니다.
나에 대해
저는 Hrishikesh Dalal이며, Sardar Patel Institute of Technology (SPIT), Mumbai에서 컴퓨터 공학을 전공하고 있습니다. 저는 단순히 코드를 작성하는 것이 아니라 경험을 만듭니다. 현재 저는 표준 이력서를 모험으로 바꾸는 Jumanji‑테마의 게임화된 포트폴리오를 개발하고 있습니다.
- 관심 분야: 풀스택 개발 (Next.js, React) 및 개발자 도구.
- 오픈소스 작업: **
envalyze**와 **env‑fault**를 npm에 공개했으며, Drupal과 MDN Web Docs에 기여했습니다. - 부수적 관심사: VerdictAI와 같은 프로젝트를 통해 AI와 법률의 교차점을 탐구하고 있습니다.
저는 시스템 설계, 오픈소스, 그리고 소프트웨어를 구축하는 현실에 대해 글을 씁니다.
포트폴리오
링크:
어떻게 만들었는가
내 기술 스택
| Layer | Technology |
|---|---|
| 프론트엔드 | Next.js & Tailwind CSS |
| 애니메이션 | GSAP (시네마틱 느낌) |
| 3D 요소 | Three.js (인터랙티브 지구본 및 히어로 패턴) |
| AI | Gemini API (NPC 스타일 챗봇 구동) |
프로세스: 혼돈에서 명료함으로
포트폴리오를 만드는 것은 함정입니다. 모든 것을 보여주고 싶지만, 조심하지 않으면 부풀어 오른 혼란스러운 결과가 됩니다.
1. 친화도 매핑 단계
UI/UX 강의에서 나온 아이디어에 휩싸여 있었습니다: 전체 3D 세계, 터미널, 숨겨진 이스터 에그, 비즈니스 중심의 프로젝트 통계, 그리고 주만지 테마 게임 등. 저는 Affinity Mapping을 사용해 모든 “멋진” 아이디어를 보드에 쏟아붓고, 그 후 가차 없이 구분했습니다.
2. “현실 점검”
핵심 질문: 왜 누군가 여기 있나요?
채용 담당자는 바쁩니다. 일부는 기술에 능숙하고, 일부는 그렇지 않습니다. 어떤 사람은 게임을 하고 싶어 할 수도 있고, 다른 사람은 30 seconds 안에 이력서를 훑어보고 싶어 합니다.
결정: 정의된 **Call‑to‑Action (CTA)**가 포함된 “Clean & Clear” 랜딩 페이지는 절대 타협할 수 없습니다. “와우” 요소는 정보를 강화해야 하며, 숨겨서는 안 됩니다.
Source:
디자인 분석: 섹션별
히어로 (첫 5초)
나는 히어로 섹션을 영화 오프닝처럼 다루었다. 시네마틱 전환이 포함된 프리‑로더가 인터랙티브한 점 패턴으로 사용자를 끌어들여 즉시 주목을 받는다.
임팩트 (큰 숫자 & 오픈소스)
단순히 “도구를 만든다”라고 말하는 대신, npm 통계를 굵은 타이포그래피로 강조해 envalyze와 env‑fault의 실질적인 영향을 피할 수 없게 만들었다. 또한 Hacktoberfest 배지와 프로젝트 관리자로서의 역할을 통해 오픈소스 여정을 부각시켰다.
경험 타임라인
GSAP 마이크로 인터랙션이 적용된 스크롤‑트리거 타임라인. 항목에 마우스를 올리면 미묘한 움직임이 추가돼 살아있는 느낌을 주지만 방해는 되지 않는다.
터미널 (깃털을 위한)
내 프로젝트용으로 완전한 기능을 갖춘 터미널. 테마를 바꾸거나 echo를 실행하거나 애니메이션을 감상할 수 있다.
- 프로 팁:
sudo를 입력해 보라. 경고는 이미 받았다. - 접근성 전환: 터미널을 선호하지 않는다면 표준 그리드로 전환할 수 있다—아무도 소외되지 않는다.
“정글” 경험
가장 완성하기 어려운 부분. 첫 버전은 단순히 게임 모음에 불과했으며, 친구들은 “연결이 안 돼. 여기서 너를 못 찾겠어.”라고 말했다.
다시 설계판으로 돌아가 내러티브를 추가했고, 다음을 포함시켰다:
- 프롤로그 & 에필로그: 퀘스트에 목적 부여.
- 레벨 2 (점프어): 플레이하면서 캐릭터가 내 기술 스택과 경험 여정을 내레이션한다.
- 시크릿 치트 코드: 게임에 치트 코드가 없을 수 없잖아?
AI로 구현하기
- 메인 챗봇: 다양한 질문에 답변; 샘플 질문을 제공해 응답을 개선한다.
- 게임 챗봇: 모험 중에 NPC 역할을 수행하며 캐릭터에 맞게 반응한다.
Source:
Architecture
아래 다이어그램은 게임 챗봇이 컨텍스트‑인식 쿼리를 처리하도록 통합되는 방식을 보여줍니다. 이를 통해 챗봇은 현재 게임 내 위치와 개발자로서의 나를 인식합니다.
사용자 상호작용 레이어
- 사용자가 메시지를 보냄 – 인터페이스에 사용자가 입력하면서 상호작용이 시작됩니다.
- 프론트엔드 앱 (Next.js) – React로 구축된 핵심 UI이며, React Markdown Renderer를 포함하고 있어 AI 응답(코드 스니펫이나 포맷된 텍스트 포함)이 깔끔하고 전문적으로 표시됩니다.
보안 및 트래픽 관리
Backend API Gateway & Security Layer – 프론트엔드에서 Gemini API를 직접 호출하면 API 키가 노출될 수 있기 때문에, 앱은 보안 백엔드 게이트웨이를 호출합니다. 이 레이어는 인증을 처리하고 자격 증명을 보호합니다.
Load Balancer – 단일 서버가 과부하되는 것을 방지하기 위해 로드 밸런서가 중간에 배치됩니다. 이는 들어오는 요청을 분석하고 여러 활성 인스턴스에 효율적으로 라우팅합니다.
The Processing Core
- Chat Model Instances – 시스템은 요청을 처리하기 위해 여러 병렬 인스턴스(인스턴스 1, 2, 및 3)를 사용합니다.
- Least‑Used Routing – 로드 밸런서는 현재 “가장 사용량이 적은” 인스턴스 1에 요청을 라우팅하여 최적의 성능과 낮은 지연 시간을 보장합니다.
- Google’s Gemini API – 이러한 인스턴스는 Google 인프라와 연결되는 다리 역할을 합니다. 사용자의 프롬프트를 처리한 뒤 Gemini API에 전송하고, 그 결과로 원시 AI 생성물을 받아옵니다.
응답 루프
- 응답 전달 – 채팅 인스턴스가 Google에서 데이터를 받으면, 해당 응답을 보안 백엔드를 통해 다시 전달합니다.
- 최종 표시 – 메시지가 Next JS 앱으로 다시 전송되어 Markdown으로 렌더링되고, 루프가 완료되어 사용자 화면에 표시됩니다.
이스터 에그
시작 화면에 사용자가 “?” 버튼을 눌러 간단히 플레이할 수 있는 게임이 있습니다.
“Stay Hungry, Stay Foolish.”
제 포트폴리오는 이 인용구로 마무리됩니다. 왜냐하면 이 말이 제가 엔지니어링에 접근하는 방식을 잘 요약해 주기 때문입니다. Drupal 소스 코드를 깊이 파고들든, 터미널을 처음부터 만들든, 언제나 약간은 불가능해 보이는 다음 목표를 찾고 있습니다.
Source:
내가 가장 자랑스러워하는 것
개발자라면 이런 느낌을 알 거예요: 눈에 보이는 기능에 10 %만 투자하고, 90 %는 여러분을 마법사처럼 느끼게 하는 “과도하게 설계된” 시스템에 쏟아요. 이 포트폴리오의 핵심 요소들을 제가 집착해서 만든 이유입니다.
1. 터미널 (진짜 개발자는 CLI를 사용한다)
- 경험: 프로젝트를 탐색하고, 테마를 바꾸거나, 애니메이션을 트리거할 수 있는 작동 중인 CLI.
- “Sudo” 함정: 주변을 살피는 사람들을 위한 숨은 이스터 에그—
sudo를 입력해 보세요. - 하이브리드 UI: 채용 담당자는 항상 명령어를 입력하지는 않으니, 터미널을 즉시 일반 프로젝트 그리드로 전환하는 “안전망” 토글을 만들었습니다.
2. “비즈니스 우선” 로직을 가진 프로젝트
- 코드 그 이상: 프로젝트를 클릭하면 기술 스택뿐 아니라 비즈니스 관점, 영향, 통계도 보여줍니다.
- “왜?” 요소: 비기술 이해관계자도 내가 만든 가치를 이해할 수 있도록 아키텍처 선택 이유를 설명합니다.
- 깊이 있는 탐구: 각 프로젝트 페이지는 문제점에서 확장 가능한 솔루션까지의 여정을 단계별로 안내합니다.
3. 주만지 게임 엔진
- 내러티브: 완전한 프롤로그와 에필로그가 있어 무작위 미니게임이 아니라 실제 퀘스트처럼 느껴집니다.
- 커리어 점프퍼: 레벨 2에서는 캐릭터가 플레이하면서 내 기술 스택과 커리어 여정을 내레이션합니다.
- 리크루터 모드: 채용 담당자가 직무 설명을 업로드하면, 게임이 강조 정보를 해당 역할 요구에 맞게 자동으로 조정합니다.
4. 챗봇 아키텍처
(필요에 따라 추가 다이어그램이나 이미지를 여기 삽입할 수 있습니다.)
모든 이미지는 Dev.to CDN에 호스팅되어 최적의 로딩을 위해 직접 링크되었습니다.
I’m most proud of what’s happening **under the hood** here. I built a production‑ready pipeline for the Gemini‑powered chatbot.
### The Load Balancer
My system uses three different chat‑model instances. I implemented a load balancer that routes traffic to the **least‑used** instance to keep things snappy, no matter the traffic.
### Security & Scalability
I kept the logic on the backend. The React frontend talks to a secure API Gateway, which handles the Gemini API calls to keep my keys safe.
### The NPC Persona
I used the **Gemini API** to give the bot a specific “In‑game NPC” persona—it knows it’s in the Jungle, but it also knows my GitHub stats.