피트Product Engineer (Frontend)
2.9 (9)피트
경력근거: PDF, PPT, 디자인 문서가 링크 기반으로 작동하는 사용자 경험을 설계
11일 전 확인채용 공고 보기
※ 실제 산출물이 아닌 AI 예측 시안입니다.
피트는 PDF·PPT·디자인 문서를 링크 기반 인터랙티브 문서로 바꾸는 B2B SaaS라, 대용량·미리보기 실패·다국어 같은 뷰어의 경계 상태가 피트의 문서 형식 구성과 글로벌 사용자 환경에서만 현실적으로 나옵니다. 이 포트폴리오는 React·디자인 시스템으로 문서 뷰어의 화면 상태를 일관되게 렌더하고 스냅샷으로 검증하는 프론트엔드 기술을 보여주며, 문서 처리 엔진이나 렌더링 내부 도메인 전문성은 주장하지 않습니다. 모르는 깊이는 면접에서 모른다고 말하는 편이 낫습니다.
PDF·PPT·디자인 문서를 링크 기반으로 받아, 형식이 달라도 같은 뷰어 컴포넌트가 정해진 화면 상태로 렌더합니다.
대용량 문서·미리보기 실패·미지원 포맷·다국어 같은 경우를 데이터에서 규칙으로 판정해 정해진 화면 상태로만 렌더합니다.
컴포넌트가 만든 화면 상태를 규칙 정답과 대조하고 시각 스냅샷 회귀로 디자인 의도와 어긋난 렌더를 자동으로 잡습니다.
피트가 만드는 링크 기반 문서 경험의 뷰어를 디자인 시스템 컴포넌트와 상태 규칙으로 조립하는 프론트엔드입니다. PDF·PPT·디자인 문서를 링크로 받아, 로딩 중·대용량·미리보기 실패·미지원 포맷·다국어 같은 경우마다 정해진 화면 상태로 일관되게 렌더하고, 그 렌더가 규칙·디자인 의도와 맞는지 스냅샷으로 확인합니다. 문서 메타는 사내 API 대신 더미를 가정합니다.
여러 형식의 문서를 링크 뷰어로 띄우다 보니 대용량 문서나 미리보기 실패 화면이 문서마다 제각각이고, 디자이너가 의도한 상태를 일일이 눈으로 확인하느라 지치던 프론트엔드 개발자가, 한 컴포넌트와 상태 규칙으로 일관성을 잡고 어긋난 화면만 자동으로 받아보고 싶은 사람입니다.
문서 메타에서 화면 상태로 가는 판정을 규칙으로 고정하고 디자인 시스템 뷰어가 그 상태만 렌더하게 하면, 형식과 언어가 늘어도 UI 일관성이 유지되고 디자인 의도와 어긋난 렌더를 스냅샷 검사로 미리 잡을 수 있다는 가정입니다.
문서 메타 더미(형식·페이지 수·썸네일·언어·용량, 결측과 실패 포함)를 넣으면 뷰어 컴포넌트가 로딩 중·대용량·미리보기 실패·미지원 포맷·다국어 같은 정해진 상태로 렌더하는 스토리북과, 데이터에서 상태로 가는 규칙을 정답으로 둔 상태 스냅샷 자동 검사가 도는 완결품입니다. 문서 메타는 사내 API 대신 더미를 가정합니다.
1주차 뷰어에 대용량 문서 가상 스크롤·페이지 지연 로딩을 붙이고 시각 스냅샷 회귀를 더해, 규칙 정답 대비 화면 상태 일치율과 디자이너가 스팟체크한 표본과의 일치도를 함께 보여줍니다.
다국어 문서에서 폰트·방향이 깨지지 않는지와 구형 iOS Safari·삼성 브라우저에서 같은 화면 상태가 유지되는지 측정하고, 고객사 맞춤 기능을 끼울 수 있는 플러그인 슬롯을 뷰어에 냅니다.
결측·실패를 섞은 문서 메타 더미를 넣으면 로딩·대용량·미리보기 실패·미지원 포맷 같은 정해진 화면 상태로 렌더되는 과정을 시연합니다.
문서 메타에서 상태로 가는 규칙으로 만든 정답과 컴포넌트가 만든 상태의 일치율을 보여주며, 단 정답과 데이터를 작성자가 만든 합성 기준이라 성능 검증이 아니라 데모 조건 동작입니다.
일부러 만든 결측·대용량·미리보기 실패·표기 흔들림 30종을 넣어도 뷰어가 빈 화면이나 깨진 레이아웃 없이 정해진 상태로만 렌더되는 강건성을 보여줍니다.
위 수치는 더미데이터 자가채점이며, 실제 화면 상태 일치율은 피트 실 문서 데이터와 디자이너 검수자가 있어야 측정 가능합니다. 이 포트폴리오는 그 검증을 바로 돌릴 수 있는 상태까지 만듭니다.
수치는 합성 데이터 자가채점이라 성능 증명이 아니므로, 면접에서는 데모 동작과 실검증 준비 상태로 솔직히 설명합니다.
정답을 작성자가 만들었으니 잘 맞는 게 당연하므로, 결측·대용량·미리보기 실패·표기 흔들림 같은 경계 케이스를 더미에 일부러 섞어 쉬운 문제만 푸는 함정을 피합니다.
이 포트폴리오는 문서 뷰어의 프론트엔드 렌더 일관성 기술을 보여주며, 문서 처리 엔진 도메인 전문성은 주장하지 않습니다. 화면 상태는 규칙으로 채점하고 LLM 은 요약 문구 보조만 맡습니다.
실제 도입 때는 사내 디자인 시스템과 실 문서 형식 분포, 디자이너 검수 기준으로 상태 규칙과 스냅샷 기준이 달라지므로, 규칙 테이블 교체를 도입 단계 과제로 둡니다.
① 인라인 샘플 · ② seed.json 다운로드 · ③ 증강 프롬프트. 세 층 모두 동일한 schema 에서 파생.
PDF·PPT·디자인 문서의 메타 데이터로, 페이지 수 결측·대용량·미리보기 실패·다국어 같은 하드 케이스를 일부러 섞어 뷰어가 정해진 화면 상태로만 렌더되는지 확인합니다.
| doc_id | format | page_count | size_mb | thumbnail_url | lang | preview_status |
|---|---|---|---|---|---|---|
| D-5001 | 12 | 2.4 | https://img/d5001.png | ko | ready | |
| D-5002 | ppt | 45 | 88 | https://img/d5002.png | en | ready |
| D-5003 | — | 5.1 | — | ko | processing | |
| D-5004 | design | 8 | 12 | https://img/d5004.png | — | failed |
| D-5005 | unknown | 3 | 0.4 | — | ja | failed |
다음 JSON Schema 에 맞는 문서 메타 행을 더 생성하세요: {"type":"object","properties":{"doc_id":{"type":"string"},"format":{"type":"string","enum":["pdf","ppt","design","unknown"]},"page_count":{"type":["integer","null"]},"size_mb":{"type":["number","null"]},"thumbnail_url":{"type":["string","null"]},"lang":{"type":["string","null"]},"preview_status":{"type":"string","enum":["ready","failed","processing"]}},"required":["doc_id","format","preview_status"]} 쉬운 데이터만 만들지 말 것 — 다음 하드 케이스를 의도적으로 섞어라: page_count 를 null 로 둔 페이지 수 결측, size_mb 가 200 이상인 대용량, thumbnail_url 이 null 이고 preview_status 가 failed 인 미리보기 실패, format 이 unknown 인 미지원 포맷, lang 이 ar·ja 처럼 우측 정렬·비라틴 문자인 다국어, page_count 0 과 size_mb 0 의 경계값. 각 형식마다 정상 1건과 하드 케이스 1건 이상이 섞이게 하고, 형식 깨뜨리기 시도(스키마 타입 위반) 3건은 데이터가 아니라 별도 목록으로 표시하세요.{"type":"object","properties":{"doc_id":{"type":"string"},"format":{"type":"string","enum":["pdf","ppt","design","unknown"]},"page_count":{"type":["integer","null"]},"size_mb":{"type":["number","null"]},"thumbnail_url":{"type":["string","null"]},"lang":{"type":["string","null"]},"preview_status":{"type":"string","enum":["ready","failed","processing"]}},"required":["doc_id","format","preview_status"]}| React | 문서 뷰어와 페이지 리스트를 화면 상태별로 렌더하는 디자인 시스템 컴포넌트를 구현합니다. |
| TypeScript | 문서 메타와 화면 상태 enum 을 타입으로 묶어, 상태 분기 누락을 컴파일 단계에서 막습니다. |
| 디자인 시스템/UI 컴포넌트 | 색·간격·타이포를 토큰으로 정의해 문서 형식이 늘어도 같은 시각 언어로 렌더되게 합니다. |
| Storybook | 정상·대용량·미리보기 실패·미지원 포맷 같은 각 상태를 스토리로 고정해 사람이 한눈에 비교하고 회귀를 잡습니다. |
| 시각 스냅샷 회귀 테스트 | 컴포넌트가 만든 화면을 기준 스냅샷과 대조해 디자인 의도와 어긋난 렌더를 자동으로 표시합니다. |
| 가상 스크롤·지연 로딩 | 대용량 문서의 페이지를 화면에 들어올 때만 그려 렌더 성능을 지킵니다. |
| Claude Sonnet | 문서 원문에서 미리보기 카드에 들어갈 한 줄 요약만 생성하고, 화면 상태 판정은 규칙이 결정합니다. |
✓ pass → 그대로 멈춰도 완결입니다. 더 키우려면 2주차에서 대용량 렌더 성능과 시각 스냅샷 회귀를 다룹니다.
✓ pass → 여기서 멈춰도 검증된 완결입니다. 더 키우려면 3주차에서 다국어·멀티 브라우저 일관성과 맞춤 플러그인 슬롯을 다룹니다.
문서 한 건을 받아 어떤 화면 상태로 렌더할지와 그 판정의 근거가 된 메타 필드를 함께 내보내, 뷰어 출력을 규칙 정답과 자동으로 대조할 수 있게 합니다.
{"type":"object","properties":{"doc_id":{"type":"string"},"state":{"type":"string","enum":["정상","로딩중","대용량_경고","미리보기_실패","미지원_포맷","다국어_정렬"]},"evidence":{"type":"array","items":{"type":"object","properties":{"field":{"type":"string"},"value":{"type":["string","number","null"]}},"required":["field","value"]}},"caption":{"type":["string","null"]},"hedge":{"type":["string","null"]}},"required":["doc_id","state","evidence"]}[
{
"doc_id": "D-5004",
"state": "미리보기_실패",
"evidence": [
{
"field": "preview_status",
"value": "failed"
},
{
"field": "thumbnail_url",
"value": null
}
],
"caption": "미리보기를 만들지 못했습니다",
"hedge": "preview_status 가 failed 라 미리보기 실패 상태로 표시했습니다."
},
{
"doc_id": "D-5006",
"state": "대용량_경고",
"evidence": [
{
"field": "size_mb",
"value": 210
},
{
"field": "page_count",
"value": 320
}
],
"caption": "큰 문서라 페이지를 나눠 불러옵니다",
"hedge": "size_mb 200 초과라는 합성 임계값으로 대용량 경고를 우선했습니다."
},
{
"doc_id": "D-5005",
"state": "미지원_포맷",
"evidence": [
{
"field": "format",
"value": "unknown"
}
],
"caption": "지원하지 않는 형식입니다",
"hedge": "format 이 unknown 이라 미지원 포맷으로 판정했습니다."
},
{
"doc_id": "D-5008",
"state": "다국어_정렬",
"evidence": [
{
"field": "lang",
"value": "ar"
}
],
"caption": null,
"hedge": "lang 이 ar 라 우측 정렬 다국어 상태로 렌더했습니다(합성 기준)."
},
{
"doc_id": "D-5001",
"state": "정상",
"evidence": [
{
"field": "preview_status",
"value": "ready"
},
{
"field": "size_mb",
"value": 2.4
}
],
"caption": null,
"hedge": null
}
][자동 검증] 1. state 가 규칙 정답(preview_status failed 면 미리보기_실패, format unknown 이면 미지원_포맷, size_mb 200 초과면 대용량_경고, lang 이 ar·he 면 다국어_정렬)과 일치하는지 대조합니다. 2. evidence 의 field 와 value 가 입력 문서의 실제 메타와 같은지 확인해, 근거 없는 상태 판정을 거릅니다. 3. caption 은 길이 제한과 금지어를 통과하는지 확인합니다. [수동 검증] 1. 대용량이면서 다국어처럼 상태가 겹치는 경우 어떤 상태를 앞세웠는지 hedge 설명이 디자인 의도와 맞는지 사람이 봅니다. 2. caption 문구가 어색하지 않은지 디자이너가 스팟체크합니다.