API Doc 포트폴리오

I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (excluding the source line you already provided) here? Once I have it, I’ll keep the source link unchanged and translate the rest into Korean while preserving all formatting, markdown, and technical terms.

개요

My hack‑athon goal was to craft a portfolio that stands out while remaining approachable.
I chose an API‑documentation aesthetic (think Swagger / Postman) to reflect my developer identity, yet I kept the experience friendly for non‑technical visitors.

• Single‑source data: All personal information lives in one data.json file, making updates painless.
• Tech stack: React + TypeScript for scalability & type safety, Tailwind CSS for rapid, consistent UI design.
• Tools used:
  • Gemini – creative prompt‑engineering assistant.
  • Antigravity IDE (Gemini 3 Pro) – senior‑frontend reviewer, refactoring, bug‑fixing, UI/UX feedback.
  • Google Cloud Run – deployment platform.

I followed Google scientists’ prompt‑engineering guide, applying one‑shot, step‑back, and tree‑of‑thought techniques. Selected prompts are included below.

프롬프트 1 – JSON에서 데이터를 가져오도록 이력서 페이지 리팩터링

컨텍스트:
우리는 데이터‑드리븐 아키텍처로 전환하고 있습니다. 모든 콘텐츠는 이제 data.json에 저장됩니다.

작업:
“Resume/IDE Viewer” 페이지(HTML/JS)를 리팩터링하여 data.json에서 동적으로 콘텐츠를 로드하도록 합니다.

요구사항

1. JSON 구조 (정확한 형태)

   {
     "resume": {
       "pdf_path": "/assets/cv.pdf",
       "filename": "cv_xxx_backend.pdf",
       "last_updated": "2026-01-12",
       "raw_data": {
         "name": "XXX",
         "role": "Junior Backend Developer",
         "stack": ["Python", "Django", "Docker"]
       }
     }
   }

2. TypeScript 로직 (Fetch 및 DOM 조작)

   • 페이지 로드 시: fetch('./data.json').
   • PDF 업데이트: 해당 요소를 찾아 src를 resume.pdf_path로 설정합니다.
   • “Raw” 뷰 업데이트: “Raw (JSON)” 탭의 코드 블록에 resume.raw_data를 깔끔하게 포맷한 내용을 채웁니다.
   • UI 라벨 업데이트: breadcrumb/file‑path 라벨을 resume.filename으로 변경합니다.

3. HTML 변경 사항

   • PDF 컨테이너에서 하드코딩된 src를 제거합니다(비워두거나 로딩 스피너 표시).
   • JS 타깃팅을 위한 고유 ID를 추가합니다, 예:
     • id="pdf-viewer"
     • id="json-code-block"
     • id="file-name-label"

전달물

아래는 위 요구사항을 만족하는 최소 HTML 스니펫과 업데이트된 JavaScript(TypeScript‑호환)입니다.

HTML (발췌)

  /
  
    
  

  
  

  Preview
  Raw (JSON)

  

JavaScript / TypeScript (ES6)

// src/utils/loadResume.ts
interface ResumeRaw {
  name: string;
  role: string;
  stack: string[];
}

interface ResumeData {
  pdf_path: string;
  filename: string;
  last_updated: string;
  raw_data: ResumeRaw;
}

interface PortfolioJSON {
  resume: ResumeData;
}

/**
 * Fetches `data.json`, updates the DOM, and handles errors.
 */
async function initResumeViewer(): Promise {
  try {
    const response = await fetch('./data.json');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);

    const data: PortfolioJSON = await response.json();
    const { pdf_path, filename, raw_data } = data.resume;

    // ---- Update PDF viewer ----
    const pdfViewer = document.getElementById('pdf-viewer') as HTMLIFrameElement;
    if (pdfViewer) pdfViewer.src = pdf_path;

    // ---- Update filename breadcrumb ----
    const fileLabel = document.getElementById('file-name-label');
    if (fileLabel) fileLabel.textContent = filename;

    // ---- Populate Raw JSON view ----
    const jsonBlock = document.getElementById('json-code-block');
    if (jsonBlock) {
      const pretty = JSON.stringify(raw_data, null, 2);
      jsonBlock.textContent = pretty;
    }
  } catch (err) {
    console.error('Failed to load resume data:', err);
    // Optional: display a user‑friendly fallback UI
  }
}

// Run on DOM ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initResumeViewer);
} else {
  initResumeViewer();
}

Prompt 2 – 비기술 사용자용 UX 감사 (채용 담당자 페르소나)

Role: 시니어 UX 리서처와 비기술 기술 채용 담당자 (HR 매니저)와 협업.

Context:
포트폴리오가 무거운 API‑Documentation / CLI 테마를 사용합니다: dark mode, monospaced fonts, terminal‑style inputs, JSON code blocks, sidebar navigation (Stripe‑Docs style), and a command palette.

Problem:
디자인이 과도하게 엔지니어링되어 코딩 경험이 없는 채용 담당자를 혼란스럽게 만들 수 있으며, 인지 부하와 네비게이션 마찰을 증가시킵니다.

Heuristic Evaluation

옵션 토글 뒤에 숨겨져 있어 기본 흐름을 간단하게 유지합니다.

이러한 브리지를 구현하면 채용 담당자가 6‑second scan window 안에 필수 정보(이름, 역할, 기술 스택, 이력서)를 찾을 수 있으며, 포트폴리오 고유의 API‑문서 스타일을 유지할 수 있습니다.

e a blocker?

I'm proud of how this project turned the portfolio itself into an experiment. Instead of focusing only on visuals, I treated it as a system: maintainable, extensible, and driven by data. Designing the entire site around a single JSON source allowed me to iterate quickly and keep the structure clean throughout the hackathon.

I'm also especially proud of how I used AI as a collaborator rather than just a code generator. By refining prompts and applying techniques, I was able to use Gemini and Antigravity Agents as creative and technical reviewers, helping me improve architecture decisions, UI/UX, and overall clarity.