kyeongmin
9fbe3ac90c
전체 401 files (397 추가 + 4 수정), 14304 insertions.
추가:
- figma_to_html_agent/blocks/ — Figma 변환 결과 (32 frame, ~79MB).
각 frame folder = {analysis.md, flat.md, texts.md, index.html, assets/,
_renders/, _render.py, RELATIONSHIPS.md / STATUS.md / classification.md
(일부 frame)}.
Phase Z 의 *figma source layer* — runtime 에서 직접 사용 X, contract /
partial / builder adapter (미래 axis A) 의 source.
- figma_to_html_agent/DISCUSSION-SUMMARY-20260411.md — 변환 설계 회의 기록.
- figma_to_html_agent/HARNESS.md — 변환 검증 harness.
- figma_to_html_agent/scripts/fetch_figma_screenshots.py — Figma 스크린샷 자동 수집.
수정:
- figma_to_html_agent/PROCESS-CONTROL.md / PROCESS.md / RULES.md —
변환 프로세스 / 룰 갱신 (R8/R9 lock 강화 등).
- figma_to_html_agent/blocks_index.md — 32 frame 인덱스 갱신.
Phase Z 영향 0 (figma_to_html_agent/blocks/ 가 V4 catalog +
templates/phase_z2/families adapter 의 source — runtime 에서 직접 import X).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
207 lines
9.6 KiB
HTML
207 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>Application S/W 구분 (Frame 1171281203)</title>
|
||
<!--
|
||
Frame: 145:8266, 1924×2014 px
|
||
Scale: 1280 / 1924 = 0.66527
|
||
패턴: compare-table-2col
|
||
구조: CSS grid 표 (R17 콘텐츠 주도형)
|
||
- 텍스트 늘면 → 셀 늘고 → 행 늘고 → border 자동 따라감
|
||
- R13 flex pair (• level 1)
|
||
- R19 zoom
|
||
-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { margin:0; padding:0; box-sizing:border-box; }
|
||
body {
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
background: #e8ecf0;
|
||
display: flex; justify-content: center; align-items: center;
|
||
min-height: 100vh; word-break: keep-all;
|
||
}
|
||
.slide {
|
||
width: 1280px;
|
||
background: #fff; position: relative;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||
}
|
||
.block { width: 1280px; position: relative; overflow: hidden; }
|
||
.inner {
|
||
width: 1924px;
|
||
zoom: 0.66527; /* R19 */
|
||
position: relative;
|
||
}
|
||
|
||
/* 배경 이미지 */
|
||
.bg-img { position: absolute; z-index: 0; }
|
||
.bg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
/* 타이틀 */
|
||
.title-area {
|
||
position: relative; z-index: 1;
|
||
padding: 48px 4px 10px;
|
||
display: flex; align-items: center; gap: 15px;
|
||
}
|
||
.title-area img { width: 50px; height: 50px; object-fit: cover; }
|
||
|
||
/* CSS Grid 표 */
|
||
.tbl {
|
||
display: grid;
|
||
grid-template-columns: 204px 1fr 1fr;
|
||
margin: 0 53px;
|
||
position: relative; z-index: 1;
|
||
}
|
||
.tbl-header { display: contents; }
|
||
.tbl-header .th {
|
||
padding: 15px 10px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-weight: 700; font-size: 40px; line-height: 45px;
|
||
color: #fff; text-align: center; letter-spacing: -2px;
|
||
}
|
||
.tbl-header .th:nth-child(1) { background: #589e8d; }
|
||
.tbl-header .th:nth-child(2) { background: #589e8d; }
|
||
.tbl-header .th:nth-child(3) { background: #ef7a26; }
|
||
|
||
.tbl-row { display: contents; }
|
||
.tbl-row .td {
|
||
padding: 15px 12px;
|
||
border-bottom: 1.5px solid #888;
|
||
border-right: 1.5px solid #888;
|
||
font-weight: 500; font-size: 40px; line-height: 75px;
|
||
color: #000;
|
||
}
|
||
.tbl-row .td:last-child { border-right: none; }
|
||
.tbl-row .td-label {
|
||
font-weight: 700; font-size: 40px; line-height: 75px;
|
||
text-align: center;
|
||
display: flex; align-items: center; justify-content: center;
|
||
border-right: 1.5px solid #888;
|
||
border-bottom: 1.5px solid #888;
|
||
}
|
||
.tbl-row:nth-child(odd) .td,
|
||
.tbl-row:nth-child(odd) .td-label { background: rgba(255,255,255,0.85); }
|
||
.tbl-row:nth-child(even) .td,
|
||
.tbl-row:nth-child(even) .td-label { background: rgba(253,198,158,0.2); }
|
||
|
||
.hl { font-weight: 700; color: #a14101; }
|
||
.big { font-size: 50px; font-weight: 700; color: #a14101; }
|
||
|
||
/* R13 flex pair */
|
||
.b1 { display: flex; align-items: flex-start; }
|
||
.b1 .m { flex: none; width: 35px; text-align: center; }
|
||
.b1 .t { flex: 1; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- 배경 이미지 -->
|
||
<div class="bg-img" style="left:0; top:0; width:1924px; height:737px;"><img src="assets/855b9d71b1cce30bcd89b214265fa8b6de58968f.png" alt=""></div>
|
||
<div class="bg-img" style="left:1px; top:489px; width:1923px; height:1525px;"><img src="assets/f808a8c71388afbadc21c5c4b4bbe76bcd73d420.png" alt=""></div>
|
||
|
||
<!-- 타이틀 -->
|
||
<div class="title-area">
|
||
<img src="assets/b0e9fad5b03f4d9e368524976c20c9886392e17b.png" alt="">
|
||
<div style="font-size:0; line-height:0; text-shadow:0 0 4px #322c1e;">
|
||
<span style="font-weight:900; font-size:70px; line-height:normal; background:linear-gradient(#CC5200,#883700); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;">Application S/W </span>
|
||
<span style="font-weight:900; font-size:50px; line-height:normal; background:linear-gradient(#296b55,#000); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;">의 구분</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CSS Grid 표 -->
|
||
<div class="tbl">
|
||
<div class="tbl-header">
|
||
<div class="th">구 분</div>
|
||
<div class="th">(Commercial) Package Program</div>
|
||
<div class="th">(System) Solution S/W</div>
|
||
</div>
|
||
|
||
<!-- 고객(분야) -->
|
||
<div class="tbl-row">
|
||
<div class="td-label">고객<br>(분야)</div>
|
||
<div class="td">
|
||
<div class="b1"><span class="m">•</span><span class="t"><span class="big">Customer</span></span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">구매자, 사용자 (상품, 제품 등)</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">이용자 (서비스, 구독 등)</span></div>
|
||
</div>
|
||
<div class="td">
|
||
<div class="b1"><span class="m">•</span><span class="t"><span class="big">Client</span></span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">발주자 (건설, 엔지니어링, 광고, 조선분야)</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">의뢰자 (법률, 회계, 자문 등)</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 정의 -->
|
||
<div class="tbl-row">
|
||
<div class="td-label">정의</div>
|
||
<div class="td">
|
||
<div class="b1"><span class="m">•</span><span class="t"><span class="hl">특정 기능이나 서비스를 제공</span>하기 위해 미리 구성된 Program</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">사용자가 직접 사용할 수 있도록 개발한 독립적이고 기성 제품화된 Program</span></div>
|
||
</div>
|
||
<div class="td">
|
||
<div class="b1"><span class="m">•</span><span class="t"><span class="hl">주어진 상황과 목적에 대한 해결책</span></span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">고객(의뢰인)의 요구를 충족시키면서 사용자가 편리하게 원하는 작업을 할 수 있도록 해주는 S/W 및 H/W를 제공</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 특징 -->
|
||
<div class="tbl-row">
|
||
<div class="td-label">특징</div>
|
||
<div class="td">
|
||
<div class="b1"><span class="m">•</span><span class="t">일반적인 업무프로세스 전반이 완성형 형태</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">고객필요기능 포함, <span class="hl">기성품</span></span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">변경 불가, API로 기능추가</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">예) ERP 패키지, AutoCAD, Midas 등</span></div>
|
||
</div>
|
||
<div class="td">
|
||
<div class="b1"><span class="m">•</span><span class="t">특정한 목적을 수행하는 H/W, S/W, 기술</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">고객요구로 <span class="hl">커스터마이징</span> 가능(맞춤형)</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">기능 또는 모듈을 추가하여 시스템 확장 기능</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">예) ERP 솔루션, CRM 솔루션</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 장점 -->
|
||
<div class="tbl-row">
|
||
<div class="td-label">장점</div>
|
||
<div class="td">
|
||
<div class="b1"><span class="m">•</span><span class="t">비용 효율적, 즉시 사용 가능</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">검증이 되어 안정성, 신뢰성</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">설치 및 사용이 상대적으로 간편</span></div>
|
||
</div>
|
||
<div class="td">
|
||
<div class="b1"><span class="m">•</span><span class="t">특정 비즈니스 문제해결 맞춤형 개발</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">고객의 요구가 자세히 반영</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">유연하고 확장성 뛰어남</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 단점 -->
|
||
<div class="tbl-row">
|
||
<div class="td-label">단점</div>
|
||
<div class="td">
|
||
<div class="b1"><span class="m">•</span><span class="t">특정 비즈니스 요구사항 딱 맞지 않음</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">소프트웨어 변경이 제작사에 의해 수행</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">필요하지 않은 기능이 많음</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">표준기능으로 경쟁우위 확보가 어려움</span></div>
|
||
</div>
|
||
<div class="td">
|
||
<div class="b1"><span class="m">•</span><span class="t">개발비용 및 시간 많이 소요</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">유지보수 및 업그레이드 비용 높음</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">개발 초기 안정성 신뢰도 낮음</span></div>
|
||
<div class="b1"><span class="m">•</span><span class="t">수요처가 제한적으로 상품화에 한계</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|