AI 모의 면접관 및 자소서 컨설팅
프롬프트 소개
모의 면접 및 자기소개서 컨설팅을 위한 JSX 앱의 프롬프트 입니다.
프롬프트 실행환경
Claude
프롬프트
import { useState, useEffect, useRef } from "react";
const STEPS = {
WELCOME: 0,
PURPOSE: 1,
COMPANY: 2,
EXPERIENCE: 3,
RESUME: 4,
QUESTION_COUNT: 5,
STYLE: 6,
CONFIRM: 7,
SESSION: 8,
};
const PURPOSE_OPTIONS = [
{ id: 1, emoji: "📝", label: "자기소개서 첨삭 및 피드백", desc: "가독성, 직무 적합성 평가" },
{ id: 2, emoji: "🔥", label: "자소서 기반 꼬리물기 압박 면접", desc: "실전 압박 면접 연습" },
{ id: 3, emoji: "💼", label: "직무 역량 및 인성 면접 대비", desc: "CS·직무 면접 실전 연습" },
{ id: 4, emoji: "🌍", label: "영어(외국어) 면접 연습", desc: "외국어 면접 실전 대비" },
{ id: 5, emoji: "🎤", label: "1분 자기소개 스크립트 작성", desc: "면접 자기소개 교정" },
{ id: 6, emoji: "✨", label: "기타 (직접 입력)", desc: "원하는 목적을 자유롭게" },
];
const STYLE_OPTIONS = [
{ id: 1, emoji: "⚡", label: "실전 압박 면접관", desc: "매우 엄격하고 날카로운 스타일" },
{ id: 2, emoji: "🤗", label: "따뜻한 멘토", desc: "자신감을 불어넣어 주는 스타일" },
{ id: 3, emoji: "✍️", label: "문맥 다듬기", desc: "비즈니스 어휘로 전문적 수정" },
{ id: 4, emoji: "🎲", label: "돌발 질문 포함", desc: "예상치 못한 창의성 질문 추가" },
{ id: 5, emoji: "📋", label: "모범 답안 제시", desc: "개선 방향과 예시를 함께 제공" },
];
const fonts = `
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&family=Playfair+Display:wght@700;900&display=swap');
`;
export default function AIInterviewConsultant() {
const [step, setStep] = useState(STEPS.WELCOME);
const [fadeIn, setFadeIn] = useState(true);
const [data, setData] = useState({
purpose: null,
purposeCustom: "",
company: "",
experience: "",
resume: "",
questionCount: 5,
styles: [],
styleCustom: "",
});
const [sessionMessages, setSessionMessages] = useState([]);
const [userInput, setUserInput] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [questionIndex, setQuestionIndex] = useState(0);
const [sessionComplete, setSessionComplete] = useState(false);
const messagesEndRef = useRef(null);
const textareaRef = useRef(null);
useEffect(() => {
setFadeIn(false);
const t = setTimeout(() => setFadeIn(true), 50);
return () => clearTimeout(t);
}, [step]);
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [sessionMessages]);
const transition = (nextStep) => {
setFadeIn(false);
setTimeout(() => setStep(nextStep), 200);
};
const needsResume = [1, 2, 5].includes(data.purpose);
const needsQuestionCount = [2, 3, 4].includes(data.purpose);
const getNextStep = (currentStep) => {
if (currentStep === STEPS.EXPERIENCE) {
return needsResume ? STEPS.RESUME : needsQuestionCount ? STEPS.QUESTION_COUNT : STEPS.STYLE;
}
if (currentStep === STEPS.RESUME) {
return needsQuestionCount ? STEPS.QUESTION_COUNT : STEPS.STYLE;
}
return currentStep + 1;
};
const getPrevStep = (currentStep) => {
if (currentStep === STEPS.STYLE && !needsQuestionCount && !needsResume) return STEPS.EXPERIENCE;
if (currentStep === STEPS.STYLE && !needsQuestionCount && needsResume) return STEPS.RESUME;
if (currentStep === STEPS.QUESTION_COUNT && !needsResume) return STEPS.EXPERIENCE;
return currentStep - 1;
};
const totalSteps = 7;
const currentVisualStep = (() => {
const map = { 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7 };
return map[step] ?? step;
})();
const buildSystemPrompt = () => {
const purposeLabel = data.purpose === 6 ? data.purposeCustom : PURPOSE_OPTIONS.find(p => p.id === data.purpose)?.label;
const styleLabels = data.styles.map(id => STYLE_OPTIONS.find(s => s.id === id)?.label).filter(Boolean);
let prompt = `당신은 전문 AI 모의 면접관이자 자소서 컨설턴트입니다.
## 사용자 정보
- 작업 목적: ${purposeLabel}
- 지원 기업/직무: ${data.company}
- 경력/경험: ${data.experience}
${data.resume ? `- 자기소개서:\n${data.resume}` : ""}
${needsQuestionCount ? `- 요청 질문 수: ${data.questionCount}개` : ""}
- 피드백 스타일: ${styleLabels.length > 0 ? styleLabels.join(", ") : "기본 스타일"}
${data.styleCustom ? `- 추가 요청: ${data.styleCustom}` : ""}
## 핵심 규칙
1. 한 번에 하나의 질문만 던지세요.
2. 사용자가 답변하면, 해당 답변에 대해 구체적으로 피드백하세요.
3. 피드백 후 다음 질문으로 넘어가세요.
4. ${needsQuestionCount ? `총 ${data.questionCount}개의 질문을 모두 마치면` : "모든 과정을 마치면"} 반드시 "===SESSION_COMPLETE===" 를 응답 맨 끝에 추가하고, 종합 평가를 아래 양식으로 출력하세요:
### 종합 평가 양식
1) 종합 평가 요약
2) 핵심 역량 어필 포인트 (2~3가지)
3) 보완이 필요한 부분 및 개선책
4) 예상 추가 꼬리 질문 3가지
5) 최종 응원 코멘트
## 스타일 지시
`;
if (data.styles.includes(1)) prompt += "- 엄격하고 날카롭게 질문하고 약점을 정확히 짚으세요.\n";
if (data.styles.includes(2)) prompt += "- 따뜻하고 격려하는 톤으로 진행하세요.\n";
if (data.styles.includes(3)) prompt += "- 전문적인 비즈니스 어휘를 사용하세요.\n";
if (data.styles.includes(4)) prompt += "- 중간에 예상치 못한 돌발/창의성 질문을 섞으세요.\n";
if (data.styles.includes(5)) prompt += "- 매 피드백마다 모범 답안 예시를 함께 제시하세요.\n";
if (data.purpose === 1) {
prompt += "\n자기소개서를 항목별로 하나씩 첨삭해주세요. 각 항목에 대해 강점, 약점, 수정 제안을 구체적으로 제시하세요.";
} else if (data.purpose === 5) {
prompt += "\n1분 자기소개 스크립트를 작성/교정해주세요. 먼저 현재 자기소개의 구조를 분석하고, 개선안을 제시하세요.";
}
prompt += "\n\n첫 번째 질문 또는 첫 번째 피드백으로 시작하세요. 인사말은 짧게 하세요.";
return prompt;
};
const callAPI = async (messages) => {
try {
const response = await fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
model: "claude-sonnet-4-20250514",
max_tokens: 1000,
system: buildSystemPrompt(),
messages,
}),
});
const result = await response.json();
const text = result.content?.map(c => c.text || "").join("\n") || "응답을 받지 못했습니다.";
return text;
} catch (err) {
return "API 호출 중 오류가 발생했습니다. 다시 시도해 주세요.";
}
};
const startSession = async () => {
transition(STEPS.SESSION);
setIsLoading(true);
const initMessages = [{ role: "user", content: "시작해 주세요." }];
const reply = await callAPI(initMessages);
const isComplete = reply.includes("===SESSION_COMPLETE===");
const cleanReply = reply.replace("===SESSION_COMPLETE===", "").trim();
setSessionMessages([
{ role: "assistant", content: cleanReply },
]);
if (isComplete) setSessionComplete(true);
setIsLoading(false);
};
const sendMessage = async () => {
if (!userInput.trim() || isLoading) return;
const newUserMsg = { role: "user", content: userInput.trim() };
const updated = [...sessionMessages, newUserMsg];
setSessionMessages(updated);
setUserInput("");
setIsLoading(true);
const apiMessages = updated.map(m => ({ role: m.role, content: m.content }));
const reply = await callAPI(apiMessages);
const isComplete = reply.includes("===SESSION_COMPLETE===");
const cleanReply = reply.replace("===SESSION_COMPLETE===", "").trim();
setSessionMessages(prev => [...prev, { role: "assistant", content: cleanReply }]);
if (isComplete) setSessionComplete(true);
setQuestionIndex(prev => prev + 1);
setIsLoading(false);
};
const handleKeyDown = (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
};
const toggleStyle = (id) => {
setData(prev => ({
...prev,
styles: prev.styles.includes(id) ? prev.styles.filter(s => s !== id) : [...prev.styles, id],
}));
};
const renderProgressBar = () => {
if (step === STEPS.SESSION) return null;
const progress = step === STEPS.WELCOME ? 0 : Math.min((step / totalSteps) * 100, 100);
return (
);
};
const renderStep = () => {
switch (step) {
case STEPS.WELCOME:
return (
);
case STEPS.PURPOSE:
return (
{PURPOSE_OPTIONS.map(opt => (
key={opt.id}
style={{
...styles.optionCard,
...(data.purpose === opt.id ? styles.optionCardActive : {}),
}}
onClick={() => setData(prev => ({ ...prev, purpose: opt.id }))}
>
{opt.emoji}
{opt.label}
{opt.desc}
))}
{data.purpose === 6 && (
style={styles.textInput}
placeholder="원하시는 목적을 자유롭게 입력해 주세요"
value={data.purposeCustom}
onChange={e => setData(prev => ({ ...prev, purposeCustom: e.target.value }))}
/>
)}
onNext={() => transition(STEPS.COMPANY)}
canNext={data.purpose && (data.purpose !== 6 || data.purposeCustom.trim())}
/>
);
case STEPS.COMPANY:
return (
style={styles.textInput}
placeholder="예: 삼성전자 반도체 공정설계, 네이버 백엔드 개발자"
value={data.company}
onChange={e => setData(prev => ({ ...prev, company: e.target.value }))}
autoFocus
/>
onBack={() => transition(STEPS.PURPOSE)}
onNext={() => transition(STEPS.EXPERIENCE)}
canNext={data.company.trim().length > 0}
/>
);
case STEPS.EXPERIENCE:
return (
style={{ ...styles.textInput, ...styles.textarea }}
placeholder="예: 관련 인턴 6개월, 공모전 대상 수상, 신입 등"
value={data.experience}
onChange={e => setData(prev => ({ ...prev, experience: e.target.value }))}
rows={3}
autoFocus
/>
onBack={() => transition(STEPS.COMPANY)}
onNext={() => transition(getNextStep(STEPS.EXPERIENCE))}
canNext={data.experience.trim().length > 0}
/>
);
case STEPS.RESUME:
return (
style={{ ...styles.textInput, ...styles.textareaLarge }}
placeholder="자기소개서 내용을 여기에 붙여넣기 해주세요..."
value={data.resume}
onChange={e => setData(prev => ({ ...prev, resume: e.target.value }))}
rows={8}
autoFocus
/>
onBack={() => transition(STEPS.EXPERIENCE)}
onNext={() => transition(getNextStep(STEPS.RESUME))}
canNext={data.resume.trim().length > 0}
/>
);
case STEPS.QUESTION_COUNT:
return (
style={styles.counterBtn}
onClick={() => setData(prev => ({ ...prev, questionCount: Math.max(1, prev.questionCount - 1) }))}
>−
{data.questionCount}
style={styles.counterBtn}
onClick={() => setData(prev => ({ ...prev, questionCount: Math.min(15, prev.questionCount + 1) }))}
>+
onBack={() => transition(getPrevStep(STEPS.QUESTION_COUNT))}
onNext={() => transition(STEPS.STYLE)}
canNext={true}
/>
);
case STEPS.STYLE:
return (
{STYLE_OPTIONS.map(opt => (
key={opt.id}
style={{
...styles.styleCard,
...(data.styles.includes(opt.id) ? styles.styleCardActive : {}),
}}
onClick={() => toggleStyle(opt.id)}
>
{opt.emoji}
{opt.label}
{opt.desc}
))}
style={{ ...styles.textInput, ...styles.textarea, marginTop: 12 }}
placeholder="추가로 원하는 조건이 있으면 자유롭게 입력하세요 (선택사항)"
value={data.styleCustom}
onChange={e => setData(prev => ({ ...prev, styleCustom: e.target.value }))}
rows={2}
/>
onBack={() => transition(getPrevStep(STEPS.STYLE))}
onNext={() => transition(STEPS.CONFIRM)}
canNext={true}
/>
);
case STEPS.CONFIRM:
return (
p.id === data.purpose)?.label} />
{data.resume &&
{needsQuestionCount &&
label="피드백 스타일"
value={data.styles.length > 0
? data.styles.map(id => STYLE_OPTIONS.find(s => s.id === id)?.label).join(", ")
: "기본 스타일"}
/>
);
case STEPS.SESSION:
return (
♠️ AI 면접 세션
{data.company}
{sessionMessages.map((msg, i) => (
{msg.role === "assistant" &&
))}
{isLoading && (
●
●
●
)}
{sessionComplete ? (
✅ 세션이 완료되었습니다. 위 종합 평가를 확인해 주세요!
) : (
ref={textareaRef}
style={styles.chatInput}
placeholder="답변을 입력하세요... (Enter로 전송, Shift+Enter로 줄바꿈)"
value={userInput}
onChange={e => setUserInput(e.target.value)}
onKeyDown={handleKeyDown}
rows={2}
disabled={isLoading}
/>
style={{ ...styles.sendBtn, opacity: userInput.trim() && !isLoading ? 1 : 0.4 }}
onClick={sendMessage}
disabled={!userInput.trim() || isLoading}
>
전송
)}
);
default:
return null;
}
};
return (
{renderProgressBar()}
{renderStep()}
);
}
function StepHeader({ num, title }) {
return (
{num}
);
}
function NavButtons({ onBack, onNext, canNext }) {
return (
{onBack && }
{onNext && (
style={{ ...styles.primaryBtn, opacity: canNext ? 1 : 0.4, pointerEvents: canNext ? "auto" : "none" }}
onClick={onNext}
>
다음 →
)}
);
}
function SummaryRow({ label, value }) {
return (
{label}
{value}
);
}
const C = {
bg: "#0B0E11",
card: "#141820",
cardHover: "#1A2030",
accent: "#C8A24E",
accentDim: "rgba(200,162,78,0.15)",
text: "#E8E4DD",
textDim: "#8A8680",
border: "#2A2E38",
userBubble: "#1E293B",
aiBubble: "#1A1F2A",
};
const styles = {
root: {
fontFamily: "'Noto Sans KR', sans-serif",
background: C.bg,
color: C.text,
minHeight: "100vh",
display: "flex",
flexDirection: "column",
position: "relative",
},
progressContainer: {
position: "fixed",
top: 0,
left: 0,
right: 0,
height: 3,
background: C.border,
zIndex: 100,
},
progressBar: {
height: "100%",
background: `linear-gradient(90deg, ${C.accent}, #E8D48A)`,
transition: "width 0.5s ease",
borderRadius: "0 2px 2px 0",
},
fadeWrapper: {
flex: 1,
display: "flex",
flexDirection: "column",
transition: "opacity 0.25s ease, transform 0.25s ease",
},
centerContent: {
flex: 1,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
padding: "40px 24px",
textAlign: "center",
gap: 16,
},
logoMark: {
fontSize: 56,
marginBottom: 8,
},
heroTitle: {
fontFamily: "'Playfair Display', serif",
fontSize: 36,
fontWeight: 900,
color: C.accent,
margin: 0,
letterSpacing: "-0.02em",
},
heroSub: {
fontSize: 15,
color: C.textDim,
lineHeight: 1.7,
margin: 0,
},
credit: {
fontSize: 11,
color: C.textDim,
marginTop: 24,
opacity: 0.5,
},
stepContent: {
flex: 1,
display: "flex",
flexDirection: "column",
padding: "48px 24px 24px",
maxWidth: 600,
margin: "0 auto",
width: "100%",
boxSizing: "border-box",
},
stepHeader: {
display: "flex",
alignItems: "center",
gap: 12,
marginBottom: 24,
},
stepNum: {
fontFamily: "'Playfair Display', serif",
fontSize: 28,
fontWeight: 900,
color: C.accent,
opacity: 0.5,
},
stepTitle: {
fontSize: 20,
fontWeight: 700,
margin: 0,
},
hint: {
fontSize: 13,
color: C.textDim,
marginBottom: 16,
marginTop: -8,
},
optionGrid: {
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: 10,
marginBottom: 16,
},
optionCard: {
background: C.card,
border: `1px solid ${C.border}`,
borderRadius: 12,
padding: "16px 14px",
cursor: "pointer",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
gap: 6,
transition: "all 0.15s ease",
textAlign: "left",
color: C.text,
fontFamily: "'Noto Sans KR', sans-serif",
},
optionCardActive: {
borderColor: C.accent,
background: C.accentDim,
boxShadow: `0 0 0 1px ${C.accent}`,
},
optionEmoji: { fontSize: 22 },
optionLabel: { fontSize: 14, fontWeight: 600 },
optionDesc: { fontSize: 11, color: C.textDim, lineHeight: 1.4 },
styleGrid: {
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: 10,
marginBottom: 8,
},
styleCard: {
background: C.card,
border: `1px solid ${C.border}`,
borderRadius: 12,
padding: "14px 12px",
cursor: "pointer",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
gap: 4,
transition: "all 0.15s ease",
textAlign: "left",
color: C.text,
fontFamily: "'Noto Sans KR', sans-serif",
},
styleCardActive: {
borderColor: C.accent,
background: C.accentDim,
boxShadow: `0 0 0 1px ${C.accent}`,
},
textInput: {
background: C.card,
border: `1px solid ${C.border}`,
borderRadius: 10,
padding: "14px 16px",
fontSize: 14,
color: C.text,
outline: "none",
fontFamily: "'Noto Sans KR', sans-serif",
width: "100%",
boxSizing: "border-box",
marginBottom: 12,
transition: "border-color 0.15s",
},
textarea: { resize: "vertical", lineHeight: 1.6 },
textareaLarge: { resize: "vertical", lineHeight: 1.6, minHeight: 180 },
counterRow: {
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 32,
margin: "24px 0",
},
counterBtn: {
width: 48,
height: 48,
borderRadius: "50%",
background: C.card,
border: `1px solid ${C.border}`,
color: C.accent,
fontSize: 24,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
counterValue: {
fontFamily: "'Playfair Display', serif",
fontSize: 48,
fontWeight: 900,
color: C.accent,
},
navRow: {
display: "flex",
gap: 12,
marginTop: "auto",
paddingTop: 24,
justifyContent: "flex-end",
},
primaryBtn: {
background: `linear-gradient(135deg, ${C.accent}, #B8922E)`,
color: "#0B0E11",
border: "none",
borderRadius: 10,
padding: "14px 32px",
fontSize: 15,
fontWeight: 700,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
transition: "opacity 0.15s",
},
secondaryBtn: {
background: "transparent",
color: C.textDim,
border: `1px solid ${C.border}`,
borderRadius: 10,
padding: "14px 24px",
fontSize: 14,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
},
summaryBox: {
background: C.card,
borderRadius: 14,
border: `1px solid ${C.border}`,
padding: 20,
display: "flex",
flexDirection: "column",
gap: 14,
},
summaryRow: {
display: "flex",
gap: 12,
alignItems: "flex-start",
},
summaryLabel: {
fontSize: 12,
fontWeight: 600,
color: C.accent,
minWidth: 90,
flexShrink: 0,
},
summaryValue: {
fontSize: 13,
color: C.text,
lineHeight: 1.5,
wordBreak: "break-word",
},
sessionContainer: {
flex: 1,
display: "flex",
flexDirection: "column",
height: "100vh",
},
sessionHeader: {
padding: "14px 20px",
borderBottom: `1px solid ${C.border}`,
display: "flex",
alignItems: "center",
gap: 12,
background: C.card,
},
sessionTitle: {
fontSize: 16,
fontWeight: 700,
},
sessionBadge: {
fontSize: 11,
padding: "4px 10px",
borderRadius: 20,
background: C.accentDim,
color: C.accent,
fontWeight: 600,
},
chatArea: {
flex: 1,
overflowY: "auto",
padding: "20px 16px",
display: "flex",
flexDirection: "column",
gap: 16,
},
aiBubbleRow: {
display: "flex",
alignItems: "flex-start",
gap: 10,
},
userBubbleRow: {
display: "flex",
justifyContent: "flex-end",
},
aiAvatar: {
width: 32,
height: 32,
borderRadius: "50%",
background: C.accentDim,
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: 16,
flexShrink: 0,
},
aiBubble: {
background: C.aiBubble,
borderRadius: "4px 16px 16px 16px",
padding: "14px 18px",
maxWidth: "85%",
border: `1px solid ${C.border}`,
},
userBubble: {
background: C.userBubble,
borderRadius: "16px 4px 16px 16px",
padding: "14px 18px",
maxWidth: "80%",
border: `1px solid ${C.border}`,
},
msgText: {
fontSize: 14,
lineHeight: 1.75,
whiteSpace: "pre-wrap",
wordBreak: "break-word",
},
typingDots: {
display: "flex",
gap: 6,
padding: "4px 0",
},
dot: {
fontSize: 10,
color: C.accent,
animation: "dotPulse 1s infinite",
},
inputBar: {
padding: "12px 16px",
borderTop: `1px solid ${C.border}`,
background: C.card,
display: "flex",
gap: 10,
alignItems: "flex-end",
},
chatInput: {
flex: 1,
background: C.bg,
border: `1px solid ${C.border}`,
borderRadius: 10,
padding: "12px 14px",
fontSize: 14,
color: C.text,
outline: "none",
fontFamily: "'Noto Sans KR', sans-serif",
resize: "none",
lineHeight: 1.5,
},
sendBtn: {
background: C.accent,
color: "#0B0E11",
border: "none",
borderRadius: 10,
padding: "12px 20px",
fontSize: 14,
fontWeight: 700,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
flexShrink: 0,
transition: "opacity 0.15s",
},
completeBar: {
padding: "16px 20px",
borderTop: `1px solid ${C.border}`,
background: C.card,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 12,
fontSize: 14,
},
restartBtn: {
background: C.accentDim,
color: C.accent,
border: `1px solid ${C.accent}`,
borderRadius: 8,
padding: "10px 20px",
fontSize: 13,
fontWeight: 600,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
flexShrink: 0,
},
};
const STEPS = {
WELCOME: 0,
PURPOSE: 1,
COMPANY: 2,
EXPERIENCE: 3,
RESUME: 4,
QUESTION_COUNT: 5,
STYLE: 6,
CONFIRM: 7,
SESSION: 8,
};
const PURPOSE_OPTIONS = [
{ id: 1, emoji: "📝", label: "자기소개서 첨삭 및 피드백", desc: "가독성, 직무 적합성 평가" },
{ id: 2, emoji: "🔥", label: "자소서 기반 꼬리물기 압박 면접", desc: "실전 압박 면접 연습" },
{ id: 3, emoji: "💼", label: "직무 역량 및 인성 면접 대비", desc: "CS·직무 면접 실전 연습" },
{ id: 4, emoji: "🌍", label: "영어(외국어) 면접 연습", desc: "외국어 면접 실전 대비" },
{ id: 5, emoji: "🎤", label: "1분 자기소개 스크립트 작성", desc: "면접 자기소개 교정" },
{ id: 6, emoji: "✨", label: "기타 (직접 입력)", desc: "원하는 목적을 자유롭게" },
];
const STYLE_OPTIONS = [
{ id: 1, emoji: "⚡", label: "실전 압박 면접관", desc: "매우 엄격하고 날카로운 스타일" },
{ id: 2, emoji: "🤗", label: "따뜻한 멘토", desc: "자신감을 불어넣어 주는 스타일" },
{ id: 3, emoji: "✍️", label: "문맥 다듬기", desc: "비즈니스 어휘로 전문적 수정" },
{ id: 4, emoji: "🎲", label: "돌발 질문 포함", desc: "예상치 못한 창의성 질문 추가" },
{ id: 5, emoji: "📋", label: "모범 답안 제시", desc: "개선 방향과 예시를 함께 제공" },
];
const fonts = `
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&family=Playfair+Display:wght@700;900&display=swap');
`;
export default function AIInterviewConsultant() {
const [step, setStep] = useState(STEPS.WELCOME);
const [fadeIn, setFadeIn] = useState(true);
const [data, setData] = useState({
purpose: null,
purposeCustom: "",
company: "",
experience: "",
resume: "",
questionCount: 5,
styles: [],
styleCustom: "",
});
const [sessionMessages, setSessionMessages] = useState([]);
const [userInput, setUserInput] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [questionIndex, setQuestionIndex] = useState(0);
const [sessionComplete, setSessionComplete] = useState(false);
const messagesEndRef = useRef(null);
const textareaRef = useRef(null);
useEffect(() => {
setFadeIn(false);
const t = setTimeout(() => setFadeIn(true), 50);
return () => clearTimeout(t);
}, [step]);
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [sessionMessages]);
const transition = (nextStep) => {
setFadeIn(false);
setTimeout(() => setStep(nextStep), 200);
};
const needsResume = [1, 2, 5].includes(data.purpose);
const needsQuestionCount = [2, 3, 4].includes(data.purpose);
const getNextStep = (currentStep) => {
if (currentStep === STEPS.EXPERIENCE) {
return needsResume ? STEPS.RESUME : needsQuestionCount ? STEPS.QUESTION_COUNT : STEPS.STYLE;
}
if (currentStep === STEPS.RESUME) {
return needsQuestionCount ? STEPS.QUESTION_COUNT : STEPS.STYLE;
}
return currentStep + 1;
};
const getPrevStep = (currentStep) => {
if (currentStep === STEPS.STYLE && !needsQuestionCount && !needsResume) return STEPS.EXPERIENCE;
if (currentStep === STEPS.STYLE && !needsQuestionCount && needsResume) return STEPS.RESUME;
if (currentStep === STEPS.QUESTION_COUNT && !needsResume) return STEPS.EXPERIENCE;
return currentStep - 1;
};
const totalSteps = 7;
const currentVisualStep = (() => {
const map = { 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7 };
return map[step] ?? step;
})();
const buildSystemPrompt = () => {
const purposeLabel = data.purpose === 6 ? data.purposeCustom : PURPOSE_OPTIONS.find(p => p.id === data.purpose)?.label;
const styleLabels = data.styles.map(id => STYLE_OPTIONS.find(s => s.id === id)?.label).filter(Boolean);
let prompt = `당신은 전문 AI 모의 면접관이자 자소서 컨설턴트입니다.
## 사용자 정보
- 작업 목적: ${purposeLabel}
- 지원 기업/직무: ${data.company}
- 경력/경험: ${data.experience}
${data.resume ? `- 자기소개서:\n${data.resume}` : ""}
${needsQuestionCount ? `- 요청 질문 수: ${data.questionCount}개` : ""}
- 피드백 스타일: ${styleLabels.length > 0 ? styleLabels.join(", ") : "기본 스타일"}
${data.styleCustom ? `- 추가 요청: ${data.styleCustom}` : ""}
## 핵심 규칙
1. 한 번에 하나의 질문만 던지세요.
2. 사용자가 답변하면, 해당 답변에 대해 구체적으로 피드백하세요.
3. 피드백 후 다음 질문으로 넘어가세요.
4. ${needsQuestionCount ? `총 ${data.questionCount}개의 질문을 모두 마치면` : "모든 과정을 마치면"} 반드시 "===SESSION_COMPLETE===" 를 응답 맨 끝에 추가하고, 종합 평가를 아래 양식으로 출력하세요:
### 종합 평가 양식
1) 종합 평가 요약
2) 핵심 역량 어필 포인트 (2~3가지)
3) 보완이 필요한 부분 및 개선책
4) 예상 추가 꼬리 질문 3가지
5) 최종 응원 코멘트
## 스타일 지시
`;
if (data.styles.includes(1)) prompt += "- 엄격하고 날카롭게 질문하고 약점을 정확히 짚으세요.\n";
if (data.styles.includes(2)) prompt += "- 따뜻하고 격려하는 톤으로 진행하세요.\n";
if (data.styles.includes(3)) prompt += "- 전문적인 비즈니스 어휘를 사용하세요.\n";
if (data.styles.includes(4)) prompt += "- 중간에 예상치 못한 돌발/창의성 질문을 섞으세요.\n";
if (data.styles.includes(5)) prompt += "- 매 피드백마다 모범 답안 예시를 함께 제시하세요.\n";
if (data.purpose === 1) {
prompt += "\n자기소개서를 항목별로 하나씩 첨삭해주세요. 각 항목에 대해 강점, 약점, 수정 제안을 구체적으로 제시하세요.";
} else if (data.purpose === 5) {
prompt += "\n1분 자기소개 스크립트를 작성/교정해주세요. 먼저 현재 자기소개의 구조를 분석하고, 개선안을 제시하세요.";
}
prompt += "\n\n첫 번째 질문 또는 첫 번째 피드백으로 시작하세요. 인사말은 짧게 하세요.";
return prompt;
};
const callAPI = async (messages) => {
try {
const response = await fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
model: "claude-sonnet-4-20250514",
max_tokens: 1000,
system: buildSystemPrompt(),
messages,
}),
});
const result = await response.json();
const text = result.content?.map(c => c.text || "").join("\n") || "응답을 받지 못했습니다.";
return text;
} catch (err) {
return "API 호출 중 오류가 발생했습니다. 다시 시도해 주세요.";
}
};
const startSession = async () => {
transition(STEPS.SESSION);
setIsLoading(true);
const initMessages = [{ role: "user", content: "시작해 주세요." }];
const reply = await callAPI(initMessages);
const isComplete = reply.includes("===SESSION_COMPLETE===");
const cleanReply = reply.replace("===SESSION_COMPLETE===", "").trim();
setSessionMessages([
{ role: "assistant", content: cleanReply },
]);
if (isComplete) setSessionComplete(true);
setIsLoading(false);
};
const sendMessage = async () => {
if (!userInput.trim() || isLoading) return;
const newUserMsg = { role: "user", content: userInput.trim() };
const updated = [...sessionMessages, newUserMsg];
setSessionMessages(updated);
setUserInput("");
setIsLoading(true);
const apiMessages = updated.map(m => ({ role: m.role, content: m.content }));
const reply = await callAPI(apiMessages);
const isComplete = reply.includes("===SESSION_COMPLETE===");
const cleanReply = reply.replace("===SESSION_COMPLETE===", "").trim();
setSessionMessages(prev => [...prev, { role: "assistant", content: cleanReply }]);
if (isComplete) setSessionComplete(true);
setQuestionIndex(prev => prev + 1);
setIsLoading(false);
};
const handleKeyDown = (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
};
const toggleStyle = (id) => {
setData(prev => ({
...prev,
styles: prev.styles.includes(id) ? prev.styles.filter(s => s !== id) : [...prev.styles, id],
}));
};
const renderProgressBar = () => {
if (step === STEPS.SESSION) return null;
const progress = step === STEPS.WELCOME ? 0 : Math.min((step / totalSteps) * 100, 100);
return (
);
};
const renderStep = () => {
switch (step) {
case STEPS.WELCOME:
return (
♠️
AI 면접 컨설턴트
맞춤형 자소서 컨설팅부터 실전 모의 면접까지,
당신의 성공적인 취업을 함께 준비합니다.
Designed by New Era Systems
);
case STEPS.PURPOSE:
return (
{PURPOSE_OPTIONS.map(opt => (
style={{
...styles.optionCard,
...(data.purpose === opt.id ? styles.optionCardActive : {}),
}}
onClick={() => setData(prev => ({ ...prev, purpose: opt.id }))}
>
{opt.emoji}
{opt.label}
{opt.desc}
))}
{data.purpose === 6 && (
placeholder="원하시는 목적을 자유롭게 입력해 주세요"
value={data.purposeCustom}
onChange={e => setData(prev => ({ ...prev, purposeCustom: e.target.value }))}
/>
)}
canNext={data.purpose && (data.purpose !== 6 || data.purposeCustom.trim())}
/>
);
case STEPS.COMPANY:
return (
placeholder="예: 삼성전자 반도체 공정설계, 네이버 백엔드 개발자"
value={data.company}
onChange={e => setData(prev => ({ ...prev, company: e.target.value }))}
autoFocus
/>
onNext={() => transition(STEPS.EXPERIENCE)}
canNext={data.company.trim().length > 0}
/>
);
case STEPS.EXPERIENCE:
return (
placeholder="예: 관련 인턴 6개월, 공모전 대상 수상, 신입 등"
value={data.experience}
onChange={e => setData(prev => ({ ...prev, experience: e.target.value }))}
rows={3}
autoFocus
/>
onNext={() => transition(getNextStep(STEPS.EXPERIENCE))}
canNext={data.experience.trim().length > 0}
/>
);
case STEPS.RESUME:
return (
작성하신 자기소개서 전문을 아래에 복사해서 붙여넣어 주세요.
placeholder="자기소개서 내용을 여기에 붙여넣기 해주세요..."
value={data.resume}
onChange={e => setData(prev => ({ ...prev, resume: e.target.value }))}
rows={8}
autoFocus
/>
onNext={() => transition(getNextStep(STEPS.RESUME))}
canNext={data.resume.trim().length > 0}
/>
);
case STEPS.QUESTION_COUNT:
return (
onClick={() => setData(prev => ({ ...prev, questionCount: Math.max(1, prev.questionCount - 1) }))}
>−
{data.questionCount}
onClick={() => setData(prev => ({ ...prev, questionCount: Math.min(15, prev.questionCount + 1) }))}
>+
추천: 3~7개 (연습 목적에 따라 조절하세요)
onNext={() => transition(STEPS.STYLE)}
canNext={true}
/>
);
case STEPS.STYLE:
return (
복수 선택 가능합니다. 선택하지 않으면 기본 스타일로 진행됩니다.
{STYLE_OPTIONS.map(opt => (
style={{
...styles.styleCard,
...(data.styles.includes(opt.id) ? styles.styleCardActive : {}),
}}
onClick={() => toggleStyle(opt.id)}
>
{opt.emoji}
{opt.label}
{opt.desc}
))}
placeholder="추가로 원하는 조건이 있으면 자유롭게 입력하세요 (선택사항)"
value={data.styleCustom}
onChange={e => setData(prev => ({ ...prev, styleCustom: e.target.value }))}
rows={2}
/>
onNext={() => transition(STEPS.CONFIRM)}
canNext={true}
/>
);
case STEPS.CONFIRM:
return (
{data.resume &&
{needsQuestionCount &&
value={data.styles.length > 0
? data.styles.map(id => STYLE_OPTIONS.find(s => s.id === id)?.label).join(", ")
: "기본 스타일"}
/>
);
case STEPS.SESSION:
return (
♠️ AI 면접 세션
{data.company}
{sessionMessages.map((msg, i) => (
{msg.role === "assistant" &&
♠️
}{msg.content}
))}
{isLoading && (
♠️
●
●
●
)}
{sessionComplete ? (
✅ 세션이 완료되었습니다. 위 종합 평가를 확인해 주세요!
) : (
style={styles.chatInput}
placeholder="답변을 입력하세요... (Enter로 전송, Shift+Enter로 줄바꿈)"
value={userInput}
onChange={e => setUserInput(e.target.value)}
onKeyDown={handleKeyDown}
rows={2}
disabled={isLoading}
/>
onClick={sendMessage}
disabled={!userInput.trim() || isLoading}
>
전송
)}
);
default:
return null;
}
};
return (
{renderProgressBar()}
{renderStep()}
);
}
function StepHeader({ num, title }) {
return (
{num}
{title}
);
}
function NavButtons({ onBack, onNext, canNext }) {
return (
{onBack && }
{onNext && (
onClick={onNext}
>
다음 →
)}
);
}
function SummaryRow({ label, value }) {
return (
{label}
{value}
);
}
const C = {
bg: "#0B0E11",
card: "#141820",
cardHover: "#1A2030",
accent: "#C8A24E",
accentDim: "rgba(200,162,78,0.15)",
text: "#E8E4DD",
textDim: "#8A8680",
border: "#2A2E38",
userBubble: "#1E293B",
aiBubble: "#1A1F2A",
};
const styles = {
root: {
fontFamily: "'Noto Sans KR', sans-serif",
background: C.bg,
color: C.text,
minHeight: "100vh",
display: "flex",
flexDirection: "column",
position: "relative",
},
progressContainer: {
position: "fixed",
top: 0,
left: 0,
right: 0,
height: 3,
background: C.border,
zIndex: 100,
},
progressBar: {
height: "100%",
background: `linear-gradient(90deg, ${C.accent}, #E8D48A)`,
transition: "width 0.5s ease",
borderRadius: "0 2px 2px 0",
},
fadeWrapper: {
flex: 1,
display: "flex",
flexDirection: "column",
transition: "opacity 0.25s ease, transform 0.25s ease",
},
centerContent: {
flex: 1,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
padding: "40px 24px",
textAlign: "center",
gap: 16,
},
logoMark: {
fontSize: 56,
marginBottom: 8,
},
heroTitle: {
fontFamily: "'Playfair Display', serif",
fontSize: 36,
fontWeight: 900,
color: C.accent,
margin: 0,
letterSpacing: "-0.02em",
},
heroSub: {
fontSize: 15,
color: C.textDim,
lineHeight: 1.7,
margin: 0,
},
credit: {
fontSize: 11,
color: C.textDim,
marginTop: 24,
opacity: 0.5,
},
stepContent: {
flex: 1,
display: "flex",
flexDirection: "column",
padding: "48px 24px 24px",
maxWidth: 600,
margin: "0 auto",
width: "100%",
boxSizing: "border-box",
},
stepHeader: {
display: "flex",
alignItems: "center",
gap: 12,
marginBottom: 24,
},
stepNum: {
fontFamily: "'Playfair Display', serif",
fontSize: 28,
fontWeight: 900,
color: C.accent,
opacity: 0.5,
},
stepTitle: {
fontSize: 20,
fontWeight: 700,
margin: 0,
},
hint: {
fontSize: 13,
color: C.textDim,
marginBottom: 16,
marginTop: -8,
},
optionGrid: {
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: 10,
marginBottom: 16,
},
optionCard: {
background: C.card,
border: `1px solid ${C.border}`,
borderRadius: 12,
padding: "16px 14px",
cursor: "pointer",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
gap: 6,
transition: "all 0.15s ease",
textAlign: "left",
color: C.text,
fontFamily: "'Noto Sans KR', sans-serif",
},
optionCardActive: {
borderColor: C.accent,
background: C.accentDim,
boxShadow: `0 0 0 1px ${C.accent}`,
},
optionEmoji: { fontSize: 22 },
optionLabel: { fontSize: 14, fontWeight: 600 },
optionDesc: { fontSize: 11, color: C.textDim, lineHeight: 1.4 },
styleGrid: {
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: 10,
marginBottom: 8,
},
styleCard: {
background: C.card,
border: `1px solid ${C.border}`,
borderRadius: 12,
padding: "14px 12px",
cursor: "pointer",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
gap: 4,
transition: "all 0.15s ease",
textAlign: "left",
color: C.text,
fontFamily: "'Noto Sans KR', sans-serif",
},
styleCardActive: {
borderColor: C.accent,
background: C.accentDim,
boxShadow: `0 0 0 1px ${C.accent}`,
},
textInput: {
background: C.card,
border: `1px solid ${C.border}`,
borderRadius: 10,
padding: "14px 16px",
fontSize: 14,
color: C.text,
outline: "none",
fontFamily: "'Noto Sans KR', sans-serif",
width: "100%",
boxSizing: "border-box",
marginBottom: 12,
transition: "border-color 0.15s",
},
textarea: { resize: "vertical", lineHeight: 1.6 },
textareaLarge: { resize: "vertical", lineHeight: 1.6, minHeight: 180 },
counterRow: {
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 32,
margin: "24px 0",
},
counterBtn: {
width: 48,
height: 48,
borderRadius: "50%",
background: C.card,
border: `1px solid ${C.border}`,
color: C.accent,
fontSize: 24,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
counterValue: {
fontFamily: "'Playfair Display', serif",
fontSize: 48,
fontWeight: 900,
color: C.accent,
},
navRow: {
display: "flex",
gap: 12,
marginTop: "auto",
paddingTop: 24,
justifyContent: "flex-end",
},
primaryBtn: {
background: `linear-gradient(135deg, ${C.accent}, #B8922E)`,
color: "#0B0E11",
border: "none",
borderRadius: 10,
padding: "14px 32px",
fontSize: 15,
fontWeight: 700,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
transition: "opacity 0.15s",
},
secondaryBtn: {
background: "transparent",
color: C.textDim,
border: `1px solid ${C.border}`,
borderRadius: 10,
padding: "14px 24px",
fontSize: 14,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
},
summaryBox: {
background: C.card,
borderRadius: 14,
border: `1px solid ${C.border}`,
padding: 20,
display: "flex",
flexDirection: "column",
gap: 14,
},
summaryRow: {
display: "flex",
gap: 12,
alignItems: "flex-start",
},
summaryLabel: {
fontSize: 12,
fontWeight: 600,
color: C.accent,
minWidth: 90,
flexShrink: 0,
},
summaryValue: {
fontSize: 13,
color: C.text,
lineHeight: 1.5,
wordBreak: "break-word",
},
sessionContainer: {
flex: 1,
display: "flex",
flexDirection: "column",
height: "100vh",
},
sessionHeader: {
padding: "14px 20px",
borderBottom: `1px solid ${C.border}`,
display: "flex",
alignItems: "center",
gap: 12,
background: C.card,
},
sessionTitle: {
fontSize: 16,
fontWeight: 700,
},
sessionBadge: {
fontSize: 11,
padding: "4px 10px",
borderRadius: 20,
background: C.accentDim,
color: C.accent,
fontWeight: 600,
},
chatArea: {
flex: 1,
overflowY: "auto",
padding: "20px 16px",
display: "flex",
flexDirection: "column",
gap: 16,
},
aiBubbleRow: {
display: "flex",
alignItems: "flex-start",
gap: 10,
},
userBubbleRow: {
display: "flex",
justifyContent: "flex-end",
},
aiAvatar: {
width: 32,
height: 32,
borderRadius: "50%",
background: C.accentDim,
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: 16,
flexShrink: 0,
},
aiBubble: {
background: C.aiBubble,
borderRadius: "4px 16px 16px 16px",
padding: "14px 18px",
maxWidth: "85%",
border: `1px solid ${C.border}`,
},
userBubble: {
background: C.userBubble,
borderRadius: "16px 4px 16px 16px",
padding: "14px 18px",
maxWidth: "80%",
border: `1px solid ${C.border}`,
},
msgText: {
fontSize: 14,
lineHeight: 1.75,
whiteSpace: "pre-wrap",
wordBreak: "break-word",
},
typingDots: {
display: "flex",
gap: 6,
padding: "4px 0",
},
dot: {
fontSize: 10,
color: C.accent,
animation: "dotPulse 1s infinite",
},
inputBar: {
padding: "12px 16px",
borderTop: `1px solid ${C.border}`,
background: C.card,
display: "flex",
gap: 10,
alignItems: "flex-end",
},
chatInput: {
flex: 1,
background: C.bg,
border: `1px solid ${C.border}`,
borderRadius: 10,
padding: "12px 14px",
fontSize: 14,
color: C.text,
outline: "none",
fontFamily: "'Noto Sans KR', sans-serif",
resize: "none",
lineHeight: 1.5,
},
sendBtn: {
background: C.accent,
color: "#0B0E11",
border: "none",
borderRadius: 10,
padding: "12px 20px",
fontSize: 14,
fontWeight: 700,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
flexShrink: 0,
transition: "opacity 0.15s",
},
completeBar: {
padding: "16px 20px",
borderTop: `1px solid ${C.border}`,
background: C.card,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 12,
fontSize: 14,
},
restartBtn: {
background: C.accentDim,
color: C.accent,
border: `1px solid ${C.accent}`,
borderRadius: 8,
padding: "10px 20px",
fontSize: 13,
fontWeight: 600,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
flexShrink: 0,
},
};
Result
https://claude.ai/public/artifacts/86e450af-d76b-4706-aa61-3b5cffce3874
위의 링크를 브라우저게 복붙하여 사용하세요
위의 링크를 브라우저게 복붙하여 사용하세요
🤖GPT 자동 코드 리뷰
🐘내몸에 맞는 최적의 다이어트 프로그램 생성 요청 프롬프트
주린이를 위한 '오늘의 종목 브리핑' 작성 프롬프트💰💵
ChatGPT가 GPT 프롬프트를 생성해주는 ChatGPT 프롬프트
논문 분석(요약) 프롬프트
쉽고 빠르게! ChatGPT로 만드는 개인 포트폴리오 웹페이지💼
RPG 게임의 세계관, 캐릭터, 도구, 퀘스트 아이디어를 제안해주는 프롬프트
쇼츠 대본
이 프롬프트가 마음에 드시나요?
감사인사를 남겨보세요!
댓글
0 왜 오픈프롬프트인가?
오픈 커뮤니티
오픈프롬프트에서는 누구나 자유롭게
프롬프트를 만들고 함께 나눌 수 있습니다.
나의 아이디어를 자랑하고,
다른 사람의 창의적인 아이디어도 만나보세요.밀도있는 AI 아카이브
최신 AI 이슈를 빠짐없이 전합니다.
새로운 기술과 트렌드, 유용한 도구 및
서비스에 대한 소식까지.
오픈프롬프트에서 필요한 정보를 확인하세요!원클릭 공유
내가 만든 프롬프트,
나만 알고 있기 아까운 창의적인 노하우를
마음껏 뽐내보세요.