본문으로 건너뛰기

© 2026 Molayo

Zenn헤드라인2026. 05. 21. 10:41

포트폴리오에 '나의 분신 AI'를 배치하여 면접 전 자기소개를 생략할 수 있을지 시도해 보았다

요약

프리랜서 엔지니어가 면접 시 반복되는 자기소개 과정을 효율화하기 위해 포트폴리오 사이트에 '프로필 AI'를 구현한 사례를 소개합니다. Gemini API를 활용하여 정적인 프로필 페이지가 전달하지 못하는 상세 정보를 자연스러운 대화로 보완하도록 설계되었습니다.

핵심 포인트

  • 시스템 프롬프트에 프로필 데이터를 주입하여 답변 범위를 제한하는 방식 채택
  • 비용 효율성을 위해 Gemini API의 무료 할당량을 활용
  • 보안을 위해 Next.js Route Handler를 사용하여 API 키를 서버 측에 은닉
  • 사용자 경험을 고려하여 플로팅 패널(FAB) 형태의 채팅 UI 구현

시작하며: 면접, 솔직히 조금 힘들다

프리랜서 엔지니어로서 일하다 보면 영업 단계에서 피할 수 없는 것이 바로 첫 면접이다.

"원격 근무가 가능한가요?" "가동 일수는 어느 정도인가요?" "개발 스타일을 알려주세요"——

이런 질문들에 매번 똑같은 내용을 정중하게 대답하고 있는 자신을 발견하고, 문득 이런 생각이 들었다.

이거, AI에게 맡기면 좋지 않을까?

마침 '면접관 AI' 같은 것들이 서서히 유행하기 시작하는 것을 보며 일종의 대칭성을 느꼈다. 면접을 보는 측이 AI를 사용한다면, 면접을 받는 측도 분신 AI를 준비해도 된다. 오히려 그쪽이 먼저 나와도 괜찮겠다는 생각이 든다.

그래서 나의 포트폴리오 사이트에 **"프로필 AI"**를 구현해 보았다. 도움이 될지는 아직 모르겠지만, 일단 작동하는 것을 만들었기에 소개한다.

로고 옆의 🤖 버튼을 누르면 채팅이 열림

어떤 AI인가

심플하게 말하자면, 포트폴리오 사이트에 다 적지 못한 정보를 자연스러운 대화로 보완해 주는 녀석이다.

예를 들어, 다음과 같은 질문에 답할 수 있다:

  • "일주일에 며칠 가동 가능한가요?"
  • "풀 리모트(Full Remote)가 가능한가요?"
  • "DDD(도메인 주도 설계)를 실무에서 어느 정도 사용하시나요?"
  • "개발에 대한 스탠스를 알려주세요"

정적인 프로필 페이지로는 전달하기 어려운, 온도감이 있는 정보를 전달하는 것이 목적이다.

기술 구성

레이어채택 기술
프론트엔드Next.js (App Router) + React
...

구현 포인트

1. 프로필 데이터 정의

먼저 '나의 정보'를 상수로 정의했다.

export const profile = {
name: "Hidetoshi Shimizu",
skills: [
...

이를 시스템 프롬프트(System Prompt)에 주입하여 "이 프로필의 범위 내에서만 대답해 줘"라고 제약을 걸었다.

function buildSystemPrompt(): string {
return `당신은 이 프리랜서 엔지니어의 프로필 설명 AI입니다.
다음 정보를 바탕으로 답변해 주세요:
...

2. Gemini API를 선택한 이유와 조금 헤맸던 점

무료 할당량이 넉넉하다. 이것이 전부다.

개인 포트폴리오 사이트의 트래픽을 위해 굳이 비용을 쓰는 것도 애매하기 때문에, Gemini의 무료 할당량은 매우 고마웠다.

다만, v1beta 엔드포인트는 사용 가능한 모델이 생각보다 제한적이었다. 처음에 시도한 모델을 사용할 수 없어 조금 막혔기에, 아래 엔드포인트로 먼저 모델 목록을 확인했다.

GET https://generativelanguage.googleapis.com/v1beta/models

참고로, Gemini의 API 키는 Route Handler (서버 사이드)에서만 사용하고 있다. 프론트엔드에서 직접 Gemini API를 호출하는 구성으로 만들면 API 키가 브라우저에 노출된다. Next.js의 Route Handler를 경유함으로써 키를 서버 측에 가두고, 클라이언트에는 전혀 전달되지 않는 구성으로 만들었다.

실제 API 호출은 다음과 같은 심플한 구성이다:

type ChatRole = "user" | "model"; // Gemini에 맞춰 처음부터 "model"로 정의
const payload = {
systemInstruction: {
...

3. 채팅 UI는 플로팅 패널로

채팅 UI는 우측 하단에 떠 있는 FAB(Floating Action Button) 버튼으로 여는 패널 방식으로 했다. 포트폴리오 사이트의 콘텐츠를 방해하지 않으면서, "궁금하면 물어볼 수 있는" 정도의 거리감을 의식했다.

입력은 ⌘+Enter / Ctrl+Enter로 전송할 수 있게 했고, AI의 답변은 Markdown 렌더링을 지원한다 (글머리 기호나 강조를 사용할 수 있어 스킬 목록을 대답할 때 등이 읽기 편하다).

실제로 만들어 본 소감

"Gemini에게 나를 말하게 하는 것"은, 직접 만들어 보니 생각보다 자연스러웠다.

프로필 객체 (Profile Object)를 제대로 작성하고, 시스템 프롬프트 (System Prompt)로 "이 데이터의 범위 내에서 답변하라"고 제약을 거는 것만으로도, 꽤 괜찮은 대리인 (Agent)으로서 기능해 준다. 면접에서 자주 듣는 질문 내용을 미리 프로필에 담아두면, 그것이 그대로 답변 소스 (Source)가 된다.

조금 더 앞선 망상

지금은 어디까지나 "텍스트로 질문에 대답할 뿐"이지만, 이것을 확장해 나가면 흥미로운 미래가 보인다.

엔지니어가 자신의 데이터 (기술, 경력, 사상, 개발 스탠스, 좋아하는 음식까지)를 입력해 둠으로써, 1차 면접이 자동으로 완결되는 세계——그렇게 멀지 않았다고 생각한다.

더 나아가, "면접관 AI vs 후보자 AI"라는 대화가 발생하는 미래도 있을 수 있다. 인간이 개입하는 것은 "양측의 AI가 합의한 이후"뿐인 식이다. 그것도 나름대로 약간 SF 같아서 웃음이 나지만, 효율화의 방향성으로서는 틀리지 않았다는 느낌이 든다.

여담: "분신 AI를 정의하는" 작업의 부산물

자신의 분신 AI를 키우는 것은 의외로 자기 분석의 강제력이 된다. "이 AI에게 무엇을 말하게 할 것인가"를 고민하다 보면, 자신이 어떤 일을 하고 싶은지, 어떤 엔지니어가 되고 싶은지가 자연스럽게 정리된다. 부수적인 효과로서 꽤 좋았다.

요약

구현 자체는 심플하며, 프로필을 객체 (Object)에 작성하여 시스템 프롬프트 (System Prompt)에 흘려넣는 것뿐이다. "실제로 도움이 될지"는 아직 알 수 없지만, "자신의 분신 AI에게 무엇을 말하게 할 것인가"를 생각하는 과정이 생각보다 자기 정리(Self-organization)에 도움이 되었다는 것이 솔직한 감상이다.

면접관 AI가 당연해진다면, 후보자 측도 분신을 준비하는 시대가 머지않았을지도 모른다.

Discussion

AI 자동 생성 콘텐츠

본 콘텐츠는 Zenn AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.

원문 바로가기
0

댓글

0